diff --git a/src/apis/modules/container.js b/src/apis/modules/container.js
new file mode 100644
index 0000000..c8071ec
--- /dev/null
+++ b/src/apis/modules/container.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//容器/实例列表
+export const getHostCasesList = (params) => request.basic.get('/api/v1/host-cases', params)
+
+// 算力卡删除
+export const deleteHostCases = (id) => request.basic.delete(`/api/v1/host-cases/${id}`)
+
+// 容器实例下线
+export const HandleOnline = (id) => request.basic.put(`/api/v1/containerHandleOnline/${id}`)
diff --git a/src/apis/modules/resource.js b/src/apis/modules/resource.js
index c274aa2..acd530d 100644
--- a/src/apis/modules/resource.js
+++ b/src/apis/modules/resource.js
@@ -19,12 +19,6 @@ export const deleteBlackCustomers = (id) => request.basic.delete(`/api/v1/blackC
 // 拉黑用户
 export const updateCustomers = (id, data) => request.basic.put(`/api/v1/customers/${id}`, data)
 
+// 上架主机资源
+export const addHostResource = (params) => request.basic.get('/api/v1/autoDl-dl-hosts/sync', params)
 
-//获取单个banner
-export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
-//创建banner
-export const createBanner = (data) => request.basic.post('/api/v1/banners', data)
-//更新banner
-export const updateBanner = (id, data) => request.basic.put(`/api/v1/banners/${id}`, data)
-//删除banner
-export const deleteBanner = (id) => request.basic.delete(`/api/v1/banners/${id}`)
\ No newline at end of file
diff --git a/src/apis/modules/userControl.js b/src/apis/modules/userControl.js
index 2ad2fe4..40058f9 100644
--- a/src/apis/modules/userControl.js
+++ b/src/apis/modules/userControl.js
@@ -9,10 +9,18 @@ export const getBlackCustomersList = (params) => request.basic.get('/api/v1/blac
 // 移除黑名单
 export const deleteBlackCustomers = (id) => request.basic.delete(`/api/v1/blackCustomers/${id}`)
 
-
 // 拉黑用户
 export const updateCustomers = (id, data) => request.basic.put(`/api/v1/customers/${id}`, data)
 
+// 用户流水
+export const getTopUpRecordsList = (params) => request.basic.get('/api/v1/top-up-records/customer', params)
+
+// 用户实例订单
+export const getCustomerOrderList = (params) => request.basic.get('/api/v1/orders/customer', params)
+
+// 用户实例列表
+export const getCustomerHostList = (params) => request.basic.get('/api/v1/host-cases/customer', params)
+
 
 //获取单个banner
 export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
diff --git a/src/enums/dict.js b/src/enums/dict.js
index d09ff37..bdbc0f0 100644
--- a/src/enums/dict.js
+++ b/src/enums/dict.js
@@ -34,12 +34,11 @@ class PayStatusDict extends BaseDict {
             ['PaymentProcessing', '支付中'],
             ['PaymentSuccessful', '支付成功'],
             ['PaymentFailed', '支付失败'],
-            ['PaymentCancelled', '已取消']
+            ['PaymentCancelled', '已取消'],
         ])
     }
 }
 
-
 // 认证状态
 class AuthenticationDict extends BaseDict {
     constructor() {
@@ -57,7 +56,7 @@ class AuthenticationTypeDict extends BaseDict {
     constructor() {
         super([
             ['USER', '个人'],
-            ['COMPANY', '企业'] 
+            ['COMPANY', '企业']
         ])
     }
 }
@@ -67,37 +66,37 @@ class DisabledDict extends BaseDict {
     constructor() {
         super([
             ['ENABLED', '启用'],
-            ['DISABLED', '禁用'] 
+            ['DISABLED', '禁用']
         ])
     }
 }
 //镜像类型
-class ImgType extends BaseDict{
-    constructor(){
+class ImgType extends BaseDict {
+    constructor() {
         super([
-            ['USER','用户镜像'],
-            ['SYSTEM','系统镜像']
+            ['USER', '用户镜像'],
+            ['SYSTEM', '系统镜像']
         ])
     }
 }
 //计费方式
-class PayType extends BaseDict{
-    constructor(){
+class PayType extends BaseDict {
+    constructor() {
         super([
-            ['PayOnTime','按时付费'],
-            ['PayOnDay','按日付费'],
-            ['PayOnWeek','按周付费'],
-            ['PayOnMonth','按月付费'],
-            ['PayOnYear','按年付费'],
+            ['PayOnTime', '按时付费'],
+            ['PayOnDay', '按日付费'],
+            ['PayOnWeek', '按周付费'],
+            ['PayOnMonth', '按月付费'],
+            ['PayOnYear', '按年付费'],
         ])
     }
 }
 //算力券状态
-class TicketStatus extends BaseDict{
-    constructor(){
+class TicketStatus extends BaseDict {
+    constructor() {
         super([
-            ['ENABLED','启用'],
-            ['DISABLED','禁用'],
+            ['ENABLED', '启用'],
+            ['DISABLED', '禁用'],
         ])
     }
 }
@@ -110,6 +109,30 @@ class InvoiceTitleType extends BaseDict {
         ])
     }
 }
+
+// 健康状态
+class HealthStatus extends BaseDict {
+    constructor() {
+        super([
+            ['Normal', '正常'],
+            ['Abnormal', '异常'],
+        ])
+    }
+}
+
+// 运行状况
+class RunningStatus extends BaseDict {
+    constructor() {
+        super([
+            ['RUNNING', '运行中'],
+            ['STOPPED', '已停止'],
+            ['RELEASED', '已释放'],
+            ['CREATING', '创建中'],
+            ['RESTARTING', '重启中'],
+        ])
+    }
+}
+
 //如何使用:import {payTypeDict} from '@/enums/dict
 //获取下拉框列表：payTypeDict.options
 //获取label:payTypeDict.getLabel(1)
@@ -122,3 +145,5 @@ export const imgType =new ImgType()
 export const payType=new PayType()
 export const ticketStatus=new TicketStatus()
 export const invoiceTitleType=new InvoiceTitleType()
+export const healthStatus = new HealthStatus()
+export const runningStatus = new RunningStatus()
diff --git a/src/views/container/containerList/components/EditDialog.vue b/src/views/container/containerList/components/EditDialog.vue
index b76d71c..45030e1 100644
--- a/src/views/container/containerList/components/EditDialog.vue
+++ b/src/views/container/containerList/components/EditDialog.vue
@@ -1,222 +1,94 @@
 <template>
-    <a-modal
-        :width="640"
-        :open="modal.open"
-        :title="modal.title"
-        :confirm-loading="modal.confirmLoading"
-        :after-close="onAfterClose"
-        :cancel-text="cancelText"
-        :ok-text="okText"
-        @ok="handleOk"
-        @cancel="handleCancel">
-        <a-form
-            layout="vertical"
-            ref="formRef"
-            :model="formData"
-            :rules="formRules">
+    <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
+        <a-form ref="formRef" :model="formData" :rules="formRules">
             <a-card class="mb-8-2">
-                <a-row :gutter="12">
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.parent_name')"
-                            name="parent_id">
-                            <a-tree-select
-                                v-model:value="formData.parent_id"
-                                tree-default-expand-all></a-tree-select>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.type')"
-                            name="type">
-                            <a-radio-group
-                                v-model:value="formData.type"
-                                :options="menuTypeEnum.getOptions()"></a-radio-group>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.name')"
-                            name="name">
+                <a-row :gutter="24">
+                    <a-col :span="24">
+                        <a-form-item :label="'算力中心名称'" name="name">
                             <a-input v-model:value="formData.name"></a-input>
                         </a-form-item>
                     </a-col>
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.resource.form.path')"
-                            name="path">
-                            <a-input v-model:value="formData.path"></a-input>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                        <a-form-item name="code">
-                            <template #label>
-                                <span class="mr-4-1">{{ $t('pages.system.menu.form.code') }}</span>
-                                <a-tooltip :title="$t('pages.system.menu.form.code')">
-                                    <question-circle-outlined class="color-secondary"></question-circle-outlined>
-                                </a-tooltip>
-                            </template>
-                            <a-input v-model:value="formData.code"></a-input>
-                        </a-form-item>
-                    </a-col>
-
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.status')"
-                            name="status">
-                            <a-radio-group
-                                v-model:value="formData.status"
-                                :options="statusTypeEnum.getOptions()"></a-radio-group>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                        <a-form-item
-                            style="width: 200px"
-                            :label="$t('pages.system.menu.form.sequence')"
-                            name="sequence">
-                            <a-input
-                                :defaultValue="0"
-                                type="number"
-                                v-model:value="formData.sequence"></a-input>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.description')"
-                            name="description">
-                            <a-input v-model:value="formData.description"></a-input>
-                        </a-form-item>
-                    </a-col>
 
                     <a-col :span="24">
-                        <a-form-item
-                            :label="$t('pages.system.menu.form.properties')"
-                            name="properties">
-                            <a-textarea v-model:value="formData.properties"></a-textarea>
+                        <a-form-item :label="'区域编码'" name="code">
+                            <a-input  v-model:value="formData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="24">
+                        <a-form-item :label="'排序'" name="sort">
+                            <a-input :defaultValue="0" type="number" v-model:value="formData.sort"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="$t('pages.system.role.form.status')" name="status">
+                            <a-radio-group v-model:value="formData.status" :options="[
+                                { label: $t('pages.system.role.form.status.enabled'), value: 'ENABLED' },
+                                { label: $t('pages.system.role.form.status.disabled'), value: 'DISABLED' },
+                            ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="'描述'" name="description">
+                            <a-textarea v-model:value="formData.description"></a-textarea>
                         </a-form-item>
                     </a-col>
                 </a-row>
             </a-card>
-            <a-card :title="$t('pages.system.menu.resource.form.title')">
-                <a-table
-                    :columns="columns"
-                    :data-source="formData.resources"
-                    :pagination="false"
-                    row-key="id">
-                    <template #bodyCell="{ column, record, index }">
-                        <template v-if="column.key === 'types'">
-                            <a-form-item :label="$t('pages.system.menu.resource.form.method')">
-                                <a-input-group
-                                    style="display: inline-block; vertical-align: middle"
-                                    :compact="true">
-                                    <a-form-item-rest>
-                                        <a-select
-                                            v-model:value="record.method"
-                                            :default-value="record.method || 'GET'"
-                                            style="width: 100px">
-                                            <a-select-option
-                                                v-for="item of reqType"
-                                                :key="item"
-                                                :value="item"
-                                                >{{ item }}</a-select-option
-                                            >
-                                        </a-select>
-                                    </a-form-item-rest>
-                                    <a-input
-                                        v-model:value="record.path"
-                                        :style="{ width: 'calc(100% - 100px)' }" />
-                                </a-input-group>
-                            </a-form-item>
-                        </template>
-                        <template v-if="column.key === 'action'">
-                            <x-action-button @click="handleDelete(index)"> {{ $t('button.delete') }}</x-action-button>
-                        </template>
-                    </template>
-                </a-table>
-
-                <a-button
-                    @click="handleAddApi"
-                    block
-                    class="mt-8-2"
-                    type="dashed">
-                    <template #icon>
-                        <plus-outlined></plus-outlined>
-                    </template>
-                    {{ $t('button.add') }}
-                </a-button>
-            </a-card>
-            <template v-if="menuTypeEnum.is('menu', formData.type)"> </template>
-            <template v-if="statusTypeEnum.is('enabled', formData.status)"> </template>
         </a-form>
     </a-modal>
 </template>
 
 <script setup>
 import { cloneDeep } from 'lodash-es'
-import { QuestionCircleOutlined } from '@ant-design/icons-vue'
-import apis from '@/apis'
-import { useModal, useForm } from '@/hooks'
-import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
-import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { ref, watch } from 'vue'
 import { config } from '@/config'
-import { useI18n } from 'vue-i18n'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import GxUpload from '@/components/GxUpload/index.vue'
 const emit = defineEmits(['ok'])
-const { t } = useI18n() // 解构出t方法
+import { useI18n } from 'vue-i18n'
 const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
-const { formData, formRef, formRules, resetForm } = useForm()
-
-formRules.value = {
-    name: { required: true, message: t('pages.system.menu.form.name.placeholder') },
-    code: { required: true, message: t('pages.system.menu.form.code.placeholder') },
-}
-
-const columns = [
-    { title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
-    { title: t('button.action'), dataIndex: 'action', key: 'action' },
-]
-const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const { t } = useI18n() // 解构出t方法
 const cancelText = ref(t('button.cancel'))
 const okText = ref(t('button.confirm'))
+formData.value.enabled='enabled'
+formRules.value = {
+    name: { required: true, message: t('pages.system.role.form.name.placeholder') },
+    code: { required: true, message: t('pages.system.role.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.role.form.status.placeholder') },
+}
 
 /**
  * 新建
  */
 function handleCreate() {
-    formData.value.resources = []
     showModal({
         type: 'create',
-        title: t('pages.system.menu.add'),
+        title: t('pages.system.role.add'),
     })
 }
 
-/**
- * 添加下级
- * handleCreateChild
- */
-
-function handleCreateChild(record = {}) {
-    formData.value.resources = []
-    showModal({
-        type: 'create',
-        title: t('pages.system.menu.button.addChild'),
-    })
-    formData.value.parent_id = record.id
-}
-
 /**
  * 编辑
  */
 async function handleEdit(record = {}) {
     showModal({
         type: 'edit',
-        title: t('pages.system.menu.edit'),
-    })
-    const { data } = await apis.menu.getMenu(record.id).catch(() => {
-        throw new Error()
+        title: t('pages.system.role.edit'),
     })
+
+    const { data, success } = await apis.computing.editCeCenter(record.id).catch()
+    if (!success) {
+        message.error(t('component.message.error.save'))
+        hideModal()
+        return
+    }
+    formRecord.value = data
     formData.value = cloneDeep(data)
-    formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
-    formData.value.resources = formData.value.resources || (formData.value.resources = [])
 }
 
 /**
@@ -228,23 +100,18 @@ function handleOk() {
         .then(async (values) => {
             try {
                 showLoading()
-                const params = {
-                    ...values,
-                }
-                params.sequence = Number.parseInt(params.sequence) || 0
-                params.properties = JSON.stringify(params.properties)
+                console.log("===",values)
+                values.sort = parseInt(values.sort)
+                const params = {...values}
                 let result = null
                 switch (modal.value.type) {
                     case 'create':
-                        result = await apis.menu.createMenu(params).catch(() => {
+                        result = await apis.computing.addCenter(params).catch(() => {
                             throw new Error()
                         })
-
                         break
                     case 'edit':
-                        newApiData()
-                        params.resources = formData.value.resources
-                        result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
+                        result = await apis.computing.updateCenter(formData.value.id, params).catch(() => {
                             throw new Error()
                         })
                         break
@@ -270,16 +137,6 @@ function handleCancel() {
     hideModal()
 }
 
-/**
- * 针对API 做一次 menu_id
- */
-function newApiData() {
-    if (formData.value.resources)
-        formData.value.resources.forEach((item) => {
-            item.menu_id = formData.value.id
-        })
-}
-
 /**
  * 关闭后
  */
@@ -288,26 +145,8 @@ function onAfterClose() {
     hideLoading()
 }
 
-/**
- * 添加API
- */
-
-function handleAddApi() {
-    formData.value.resources.push({
-        method: 'GET',
-        path: '',
-    })
-} /**
- * 删除API
- */
-
-function handleDelete(index) {
-    formData.value.resources.splice(index, 1)
-}
-
 defineExpose({
     handleCreate,
-    handleCreateChild,
     handleEdit,
 })
 </script>
diff --git a/src/views/container/containerList/index.vue b/src/views/container/containerList/index.vue
index 03686e3..d70184d 100644
--- a/src/views/container/containerList/index.vue
+++ b/src/views/container/containerList/index.vue
@@ -1,28 +1,36 @@
 <template>
     <x-search-bar class="mb-8-2">
         <template #default="{ gutter, colSpan }">
-            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+            <a-form :model="searchFormData" layout="inline">
                 <a-row :gutter="gutter">
                     <a-col v-bind="colSpan">
-                        <a-form-item :label="$t('pages.system.menu.form.name')" name="name">
-                            <a-input :placeholder="$t('pages.system.menu.form.name.placeholder')"
-                                v-model:value="searchFormData.name"></a-input>
+                        <a-form-item :label="'实例名称'" name="caseName">
+                            <a-input :placeholder="'实例名称'" v-model:value="searchFormData.caseName"></a-input>
                         </a-form-item>
                     </a-col>
 
-                    <a-col v-bind="colSpan">
-                        <a-form-item name="code">
-                            <template #label>
-                                {{ $t('pages.system.menu.form.code') }}
-                                <a-tooltip :title="$t('pages.system.menu.form.code')">
-                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
-                                </a-tooltip>
-                            </template>
-                            <a-input :placeholder="$t('pages.system.menu.form.code.placeholder')"
-                                v-model:value="searchFormData.code"></a-input>
+
+                    <a-col :span="6">
+                        <a-form-item :label="'手机号'" name="phone">
+                            <a-input :placeholder="'手机号'" v-model:value="searchFormData.phone"></a-input>
                         </a-form-item>
                     </a-col>
 
+                    <a-col :span="6">
+                        <a-form-item :label="'用户名'" name="userName">
+                            <a-input :placeholder="'用户名'" v-model:value="searchFormData.userName"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="健康状态" name="status">
+                            <a-select v-model:value="searchFormData.healthStatus" placeholder="请选择健康状态">
+                                <a-select-option v-for="item in healthStatus.options" :key="item.value"
+                                    :value="item.value">
+                                    {{ item.label }}
+                                </a-select-option>
+                            </a-select>
+                        </a-form-item>
+                    </a-col>
                     <a-col class="align-right" v-bind="colSpan">
                         <a-space>
                             <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
@@ -35,126 +43,130 @@
             </a-form>
         </template>
     </x-search-bar>
-    <a-card>
-        <i class="iconfont icon-gonggao" style="color: red;"></i>
-        <span>引入阿里巴巴图标</span>
-        <x-action-bar class="mb-8-2">
-            <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
-                <template #icon>
-                    <plus-outlined></plus-outlined>
-                </template>
-                {{ $t('pages.system.menu.add') }}
-            </a-button>
-        </x-action-bar>
-        <a-table rowKey="id" :loading="loading" :pagination="true" :columns="columns" :data-source="listData">
-            <template #bodyCell="{ column, record }">
-                <template v-if="'menuType' === column.key">
-                    <!--菜单-->
-                    <a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing">
-                        {{ menuTypeEnum.getDesc(record.type) }}
-                    </a-tag>
-                    <!--按钮-->
-                    <a-tag v-if="menuTypeEnum.is('button', record.type)" color="success">
-                        {{ menuTypeEnum.getDesc(record.type) }}
-                    </a-tag>
-                </template>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <!-- <x-action-bar class="mb-8-2">
+                    <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        增加算力中心
+                    </a-button>
+                </x-action-bar> -->
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'status' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.status == 'ENABLED'" color="processing">
+                                启用
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                禁用
+                            </a-tag>
+                        </template>
 
-                <template v-if="'createAt' === column.key">
-                    {{ formatUtcDateTime(record.created_at) }}
-                </template>
 
-                <template v-if="'statusType' === column.key">
-                    <!--状态-->
-                    <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
-                        {{ statusTypeEnum.getDesc(record.status) }}
-                    </a-tag>
-                    <!--状态-->
-                    <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
-                        {{ statusTypeEnum.getDesc(record.status) }}
-                    </a-tag>
-                </template>
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
 
-                <template v-if="'action' === column.key">
-                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
-                        <a-tooltip>
-                            <template #title>{{ $t('pages.system.menu.edit') }}</template>
-                            <edit-outlined />
-                        </a-tooltip>
-                    </x-action-button>
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="handleOnline(record)">
+                                下线
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                删除
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
 
-                    <x-action-button @click="$refs.editDialogRef.handleCreateChild(record)">
-                        <a-tooltip>
-                            <template #title>{{ $t('pages.system.menu.button.addChild') }}</template>
-                            <plus-circle-outlined />
-                        </a-tooltip>
-                    </x-action-button>
-                    <x-action-button @click="handleDelete(record)">
-                        <a-tooltip>
-                            <template #title>{{ $t('pages.system.delete') }}</template>
-                            <delete-outlined style="color: #ff4d4f" />
-                        </a-tooltip>
-                    </x-action-button>
-                </template>
-            </template>
-        </a-table>
-    </a-card>
-
-    <edit-dialog @ok="onOk" ref="editDialogRef" />
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
 </template>
 
 <script setup>
-import { Modal, message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 import { ref } from 'vue'
-import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
 import apis from '@/apis'
-import { config } from '@/config'
-import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
-import { usePagination, useForm } from '@/hooks'
 import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { usePagination, useForm } from '@/hooks'
 import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
+import { disabledDict, payType, payStatusDict, payTypeDict, healthStatus, runningStatus } from '@/enums/dict'
+
 defineOptions({
-    // eslint-disable-next-line vue/no-reserved-component-names
-    name: 'menu',
+    name: 'systemRole',
 })
 const { t } = useI18n() // 解构出t方法
-const columns = ref([
-    { title: t('pages.system.menu.form.name'), dataIndex: 'name', key: 'name', fixed: true },
-    { title: t('pages.system.menu.form.code'), dataIndex: 'code', key: 'code' },
+const columns = [
+    { title: '实例名称', dataIndex: 'caseName', width: 200, fixed: 'left' },
+    { title: '用户名', dataIndex: 'userName', width: 200 },
+    { title: '手机号', dataIndex: 'phone', width: 200 },
+    { title: '镜像标识', dataIndex: 'image', width: 150 },
+    { title: 'GPU类型', dataIndex: 'gpuType', width: 150 },
+    { title: 'GPU数量', dataIndex: 'gpuCount', width: 150 },
+    {
+        title: '计费方式',
+        key: 'billingMethod',
+        dataIndex: 'billingMethod',
+        width: 120,
+        customRender: ({ text }) => payType.getLabel(text) || text,
+    },
+    { title: '价格（单价）', dataIndex: 'unitPrice', width: 150 },
+    { title: '计费时长', dataIndex: 'billingTime', width: 150 },
+    { title: '到期时间', dataIndex: 'expirationTime', width: 150 },
+    { title: '最后一次扣费时间', dataIndex: 'lastDeductionTime', width: 150 },
+    {
+        title: '健康状态',
+        key: 'healthStatus',
+        dataIndex: 'healthStatus',
+        width: 120,
+        customRender: ({ text }) => healthStatus.getLabel(text) || text,
+    },
+    {
+        title: '运行状态',
+        key: 'runningStatus',
+        dataIndex: 'runningStatus',
+        width: 120,
+        customRender: ({ text }) => runningStatus.getLabel(text) || text,
+    },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 200 },
+];
 
-    { title: t('pages.system.menu.form.type'), dataIndex: 'type', key: 'menuType', width: 80 },
-    { title: t('pages.system.menu.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
-    { title: t('pages.system.menu.form.sequence'), dataIndex: 'sequence', width: 100 },
-    { title: t('pages.system.menu.form.created_at'), dataIndex: 'created_at', key: 'createAt', width: 180 },
-    { title: t('button.action'), key: 'action', width: 180 },
-])
-const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
     usePagination()
 const { resetForm } = useForm()
 const editDialogRef = ref()
 
-getMenuList()
+getPageList()
 
 /**
- * 获取菜单列表
- * @return {Promise<void>}
+ * 获取用户列表
+ * @returns {Promise<void>}
  */
-async function getMenuList() {
+async function getPageList() {
     try {
         showLoading()
-        // const { current } = paginationState
-        const { data, success, total } = await apis.menu
-            .getMenuList({
+        const { pageSize, current } = paginationState
+        const { data, total } = await apis.container
+            .getHostCasesList({
+                pageSize,
+                current: current,
                 ...searchFormData.value,
             })
             .catch(() => {
                 throw new Error()
             })
         hideLoading()
-        if (config('http.code.success') === success) {
-            data.forEach((item) => {
-                item.name = t(item.code) || item.name
-            })
+        if (data.length > 0) {
             listData.value = data
             paginationState.total = total
         }
@@ -162,42 +174,53 @@ async function getMenuList() {
         hideLoading()
     }
 }
+
 /**
- * 搜索
+ * 移除
  */
-function handleSearch() {
-    resetForm()
-    resetPagination()
-    getMenuList()
-}
-/**
- * 重置
- */
-function handleResetSearch() {
-    searchFormData.value = {}
-    resetPagination()
-    getMenuList()
-}
-/**
- * 删除
- * @param id
- */
-function handleDelete({ id }) {
+function handleRemove({ id }) {
     Modal.confirm({
-        title: t('pages.system.menu.delTip'),
-        content: t('button.confirm'),
+        title: '提示',
+        content: '是否删除容器/实例？',
         okText: t('button.confirm'),
         onOk: () => {
             return new Promise((resolve, reject) => {
                 ; (async () => {
                     try {
-                        const { success } = await apis.menu.delMenu(id).catch(() => {
+                        const { success } = await apis.container.deleteHostCases(id).catch(() => {
                             throw new Error()
                         })
                         if (config('http.code.success') === success) {
                             resolve()
                             message.success(t('component.message.success.delete'))
-                            await getMenuList()
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+// 下线
+function handleOnline({ id }) {
+    Modal.confirm({
+        title: '提示',
+        content: '是否下线容器/实例？',
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.container.HandleOnline(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success('操作成功')
+                            await getPageList()
                         }
                     } catch (error) {
                         reject()
@@ -207,11 +230,38 @@ function handleDelete({ id }) {
         },
     })
 }
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
 /**
  * 编辑完成
  */
 async function onOk() {
-    await getMenuList()
+    await getPageList()
 }
 </script>
 
diff --git a/src/views/resource/resourceAdmin/components/EditDialog.vue b/src/views/resource/resourceAdmin/components/EditDialog.vue
index 51f7a3a..adef60a 100644
--- a/src/views/resource/resourceAdmin/components/EditDialog.vue
+++ b/src/views/resource/resourceAdmin/components/EditDialog.vue
@@ -1,27 +1,88 @@
 <template>
-    <a-modal
-        :open="modal.open"
-        :title="modal.title"
-        :confirm-loading="modal.confirmLoading"
-        :after-close="onAfterClose"
-        @ok="handleOk"
-        @cancel="handleCancel">
-        <a-form
-            ref="formRef"
-            scroll-to-first-error
-            :model="formData"
-            :rules="formRules"
-            :label-col="{ style: { width: '80px' } }">
-            <a-form-item
-                label="标题"
-                name="title">
-                <a-input v-model:value="formData.title"></a-input>
-            </a-form-item>
+    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :width="800"
+        :after-close="onAfterClose" @ok="handleOk" @cancel="handleCancel">
+        <a-form ref="formRef" scroll-to-first-error :model="formData" :rules="formRules" :label-col="{ span: 6 }"
+            :wrapper-col="{ span: 16 }">
+            <!-- 价格输入部分 -->
+            <a-row :gutter="16">
+                <a-col :span="12">
+                    <!-- 机器ID（编辑时显示，新建时隐藏） -->
+                    <a-form-item v-if="modal.type === 'edit'" label="机器ID" name="machine_id">
+                        <a-input v-model:value="formData.machine_id" placeholder="机器ID" disabled>
+                        </a-input>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <!-- 数据中心ID下拉选择 -->
+                    <a-form-item label="数据中心" name="center_id" :rules="[{ required: true, message: '请选择数据中心' }]">
+                        <a-select v-model:value="formData.center_id" placeholder="请选择数据中心" :options="centerOptions"
+                            allowClear show-search :filter-option="filterOption">
+                        </a-select>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item label="按时付费" name="payOnTime" :rules="[{ required: true, message: '请输入按时付费价格' }]">
+                        <a-input-number v-model:value="formData.payOnTime" placeholder="请输入按时付费价格" style="width: 100%"
+                            :min="0" :precision="2" :step="0.01" addon-after="元">
+                        </a-input-number>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item label="按日付费" name="payOnDay" :rules="[{ required: true, message: '请输入按日付费价格' }]">
+                        <a-input-number v-model:value="formData.payOnDay" placeholder="请输入按日付费价格" style="width: 100%"
+                            :min="0" :precision="2" :step="0.01" addon-after="元">
+                        </a-input-number>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+
+            <a-row :gutter="16">
+                <a-col :span="12">
+                    <a-form-item label="按周付费" name="payOnWeek" :rules="[{ required: true, message: '请输入按周付费价格' }]">
+                        <a-input-number v-model:value="formData.payOnWeek" placeholder="请输入按周付费价格" style="width: 100%"
+                            :min="0" :precision="2" :step="0.01" addon-after="元">
+                        </a-input-number>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item label="按月付费" name="payOnMonth" :rules="[{ required: true, message: '请输入按月付费价格' }]">
+                        <a-input-number v-model:value="formData.payOnMonth" placeholder="请输入按月付费价格" style="width: 100%"
+                            :min="0" :precision="2" :step="0.01" addon-after="元">
+                        </a-input-number>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+
+            <a-row :gutter="16">
+                <a-col :span="12">
+                    <a-form-item label="按年付费" name="payOnYear" :rules="[{ required: true, message: '请输入按年付费价格' }]">
+                        <a-input-number v-model:value="formData.payOnYear" placeholder="请输入按年付费价格" style="width: 100%"
+                            :min="0" :precision="2" :step="0.01" addon-after="元">
+                        </a-input-number>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态' }]">
+                        <a-radio-group v-model:value="formData.status">
+                            <a-radio value="ENABLED">启用</a-radio>
+                            <a-radio value="DISABLED">禁用</a-radio>
+                        </a-radio-group>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item label="是否推荐" name="is_recommend">
+                        <a-switch v-model:checked="formData.is_recommend" checked-children="推荐"
+                            un-checked-children="不推荐">
+                        </a-switch>
+                    </a-form-item>
+                </a-col>
+            </a-row>
         </a-form>
     </a-modal>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import apis from '@/apis'
 import { useForm, useModal } from '@/hooks'
@@ -31,17 +92,69 @@ const emit = defineEmits(['ok'])
 const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
 const { formRef, formRules, formRecord, formData, resetForm } = useForm()
 
-formRules.value = {
-    title: { required: true, message: '请输入标题' },
+// 数据中心选项
+const centerOptions = ref([
+    { label: '数据中心1', value: '20004adaknk656' },
+    { label: '数据中心2', value: '20004adaknk656' },
+    { label: '数据中心3', value: '20004adaknk656' },
+])
+
+// 初始化表单数据
+const initFormData = () => {
+    formData.value = {
+        machine_id: '',        // 机器ID（编辑时传入）
+        center_id: undefined,  // 数据中心ID
+        payOnTime: undefined,  // 按时付费
+        payOnDay: undefined,   // 按日付费
+        payOnWeek: undefined,  // 按周付费
+        payOnMonth: undefined, // 按月付费
+        payOnYear: undefined,  // 按年付费
+        status: 'ENABLED',     // 状态，默认启用
+        is_recommend: false,   // 是否推荐，默认不推荐
+    }
+
+    // 表单验证规则
+    formRules.value = {
+        center_id: [{ required: true, message: '请选择数据中心' }],
+        payOnTime: [{ required: true, message: '请输入按时付费价格' }],
+        payOnDay: [{ required: true, message: '请输入按日付费价格' }],
+        payOnWeek: [{ required: true, message: '请输入按周付费价格' }],
+        payOnMonth: [{ required: true, message: '请输入按月付费价格' }],
+        payOnYear: [{ required: true, message: '请输入按年付费价格' }],
+        status: [{ required: true, message: '请选择状态' }],
+    }
+}
+
+// 下拉框搜索过滤
+const filterOption = (input, option) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 如果需要从接口获取数据中心列表，可以这样写
+const fetchCenterList = async () => {
+    try {
+        // 假设有一个获取数据中心列表的API
+        // const result = await apis.system.getCenterList()
+        // if (result?.success || result?.code === 200) {
+        //     centerOptions.value = result.data.map(item => ({
+        //         label: item.name,
+        //         value: item.id
+        //     }))
+        // }
+    } catch (error) {
+        console.error('获取数据中心列表失败:', error)
+    }
 }
 
 /**
  * 新建
  */
 function handleCreate() {
+    initFormData()
     showModal({
         type: 'create',
-        title: '新建',
+        title: '新增主机同步',
+        confirmLoading: false,
     })
 }
 
@@ -49,51 +162,83 @@ function handleCreate() {
  * 编辑
  */
 function handleEdit(record = {}) {
+    initFormData()
+
     showModal({
         type: 'edit',
-        title: '编辑',
+        title: '上架主机资源',
+        confirmLoading: false,
     })
+
+    // 记录原始数据
     formRecord.value = record
-    formData.value = cloneDeep(record)
+
+    // 填充表单数据
+    formData.value = {
+        machine_id: record.machine_id,
+        center_id: record.center_id || undefined,
+        payOnTime: record.payOnTime || undefined,
+        payOnDay: record.payOnDay || undefined,
+        payOnWeek: record.payOnWeek || undefined,
+        payOnMonth: record.payOnMonth || undefined,
+        payOnYear: record.payOnYear || undefined,
+        status: record.status || 'ENABLED',
+        is_recommend: record.is_recommend || false,
+    }
 }
 
 /**
- * 确定
+ * 确定 - 提交表单
  */
-function handleOk() {
-    formRef.value
-        .validateFields()
-        .then(async (values) => {
-            try {
-                showLoading()
-                const params = {
-                    ...values,
-                }
-                let result = null
-                switch (modal.value.type) {
-                    case 'create':
-                        result = await apis.common.create(params).catch(() => {
-                            throw new Error()
-                        })
-                        break
-                    case 'edit':
-                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
-                            throw new Error()
-                        })
-                        break
-                }
-                hideLoading()
-                if (200 === result?.code) {
-                    hideModal()
-                    emit('ok')
-                }
-            } catch (error) {
-                hideLoading()
-            }
-        })
-        .catch(() => {
-            hideLoading()
-        })
+async function handleOk() {
+    try {
+        // 验证表单
+        await formRef.value.validateFields()
+
+        showLoading()
+
+        // 准备提交数据
+        const submitData = {
+            machine_id: formData.value.machine_id,
+            center_id: formData.value.center_id,
+            payOnTime: Number(formData.value.payOnTime || 0),
+            payOnDay: Number(formData.value.payOnDay || 0),
+            payOnWeek: Number(formData.value.payOnWeek || 0),
+            payOnMonth: Number(formData.value.payOnMonth || 0),
+            payOnYear: Number(formData.value.payOnYear || 0),
+            status: formData.value.status,
+            is_recommend: formData.value.is_recommend,
+        }
+
+        console.log('提交数据:', submitData)
+
+        let result = null
+
+        // 根据类型调用不同接口
+        if (modal.value.type === 'create') {
+            // 新增接口
+            result = await apis.host.syncHostInfo(submitData)
+        } else if (modal.value.type === 'edit') {
+            // 编辑接口
+            result = await apis.resource.addHostResource(submitData)
+        }
+
+        hideLoading()
+
+        // 根据实际API响应处理
+        if (result?.success || result?.code === 200) {
+            // 成功
+            hideModal()
+            emit('ok') // 通知父组件刷新列表
+        } else {
+            // 失败，显示错误信息
+            console.error('操作失败:', result?.message)
+        }
+
+    } catch (error) {
+        hideLoading()
+        console.error('表单验证或提交失败:', error)
+    }
 }
 
 /**
@@ -104,16 +249,35 @@ function handleCancel() {
 }
 
 /**
- * 关闭后
+ * 关闭后重置
  */
 function onAfterClose() {
     resetForm()
 }
 
+// 组件挂载时初始化
+onMounted(() => {
+    initFormData()
+    // 如果需要从接口获取数据中心列表
+    // fetchCenterList()
+})
+
 defineExpose({
     handleCreate,
     handleEdit,
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+:deep(.ant-form-item) {
+    margin-bottom: 16px;
+}
+
+:deep(.ant-input-number) {
+    width: 100%;
+}
+
+:deep(.ant-select) {
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/resource/resourceAdmin/index.vue b/src/views/resource/resourceAdmin/index.vue
index 0c0aa0c..e0c2cfc 100644
--- a/src/views/resource/resourceAdmin/index.vue
+++ b/src/views/resource/resourceAdmin/index.vue
@@ -110,15 +110,15 @@
                         <!-- 操作 -->
                         <template v-if="'action' === column.key">
                             <a-space>
-                                <a-button type="link" size="small" @click="$refs.editDialogRef.handleEdit(record)">
+                                <!-- <a-button type="link" size="small" @click="$refs.editDialogRef.handleEdit(record)">
                                     编辑
+                                </a-button> -->
+                                <a-button type="link" size="small"  @click="$refs.editDialogRef.handleEdit(record)">
+                                    上架
                                 </a-button>
-                                <a-button type="link" size="small" danger @click="handleDownShelf(record)">
-                                    下架
-                                </a-button>
-                                <a-button type="link" size="small" danger @click="handleRemove(record)">
+                                <!-- <a-button type="link" size="small" danger @click="handleRemove(record)">
                                     删除
-                                </a-button>
+                                </a-button> -->
                             </a-space>
                         </template>
                     </template>
diff --git a/src/views/userControl/userList/components/HostCaseDialog.vue b/src/views/userControl/userList/components/HostCaseDialog.vue
new file mode 100644
index 0000000..8780418
--- /dev/null
+++ b/src/views/userControl/userList/components/HostCaseDialog.vue
@@ -0,0 +1,181 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :after-close="onAfterClose"
+        @ok="handleOk" @cancel="handleCancel" width="80%">
+        <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+            :scroll="{ x: 1000 }" @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'banner_type' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="record.banner_type == 1" color="processing">
+                        首页轮播图
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-else color="processing">
+                        营销活动图
+                    </a-tag>
+                </template>
+            </template>
+        </a-table>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal, usePagination } from '@/hooks'
+import { config } from '@/config'
+import { disabledDict, authenticationTypeDict, payStatusDict, payTypeDict, payType, healthStatus, runningStatus } from '@/enums/dict'
+
+const emit = defineEmits(['ok'])
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { modal, showModal, hideModal } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+const columns = [
+    { title: '订单编号', dataIndex: 'caseName', key: 'caseName', fixed: 'left', width: 200 },
+    { title: '镜像标识', dataIndex: 'image', key: 'image', width: 200 },
+    {
+        title: '计费方式',
+        dataIndex: 'billingMethod',
+        key: 'billingMethod',
+        width: 150,
+        customRender: ({ text }) => payType.getLabel(text) || text,
+    },
+
+    // {
+    //     title: '账号类型',
+    //     key: 'accountType',
+    //     dataIndex: 'accountType',
+    //     width: 120,
+    // },
+    { title: 'GPU类型', key: 'gpuType', dataIndex: 'gpuType', width: 120 },
+    { title: 'GPU数量', key: 'gpuCount', dataIndex: 'gpuCount', width: 120 },
+    { title: '价格（单价）', key: 'unitPrice', dataIndex: 'unitPrice', width: 120 },
+    { title: '计费时长', key: 'billingTime', dataIndex: 'billingTime', width: 120 },
+    {
+        title: '健康状态',
+        key: 'healthStatus',
+        dataIndex: 'healthStatus',
+        width: 120,
+        customRender: ({ text }) => healthStatus.getLabel(text) || text,
+    },
+    {
+        title: '运行状态',
+        key: 'runningStatus',
+        dataIndex: 'runningStatus',
+        width: 120,
+        customRender: ({ text }) => runningStatus.getLabel(text) || text,
+    },
+    { title: '到期时间', key: 'expirationTime', dataIndex: 'paexpirationTimeyStatus', width: 120 },
+    { title: '最后一次扣费时间', key: 'lastDeductionTime', dataIndex: 'lastDeductionTime', width: 120 },
+]
+
+/**
+ * 流水查询
+ */
+async function handleHost(userId) {
+    formRecord.value = userId
+    showModal({
+        type: 'edit',
+        title: '查看实例列表',
+    })
+
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const params = {
+            pageSize,
+            current: current,
+            userId: userId,
+        }
+
+        const res = await apis.userControl.getCustomerHostList(params)
+
+        if (config('http.code.success') === res.success) {
+            const { data, total } = res
+            if (data && data.length > 0) {
+                listData.value = data
+                paginationState.total = total || 0
+            } else {
+                listData.value = []
+                paginationState.total = 0
+            }
+        } else {
+            listData.value = []
+            paginationState.total = 0
+        }
+    } catch (error) {
+        console.error('获取流水记录失败:', error)
+        listData.value = []
+        paginationState.total = 0
+    } finally {
+        hideLoading()
+    }
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const { pageSize, current } = paginationState
+                const params = {
+                    pageSize,
+                    current: current,
+                    userId: formRecord.value,
+                }
+
+                // 这里可以根据需要添加保存逻辑
+                // 目前主要是查看，可能不需要保存操作
+
+                hideLoading()
+                hideModal()
+                emit('ok')
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    // 重新加载数据
+    if (formRecord.value) {
+        handleOrder(formRecord.value)
+    }
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    listData.value = []
+    paginationState.total = 0
+}
+
+defineExpose({
+    handleHost,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userControl/userList/components/OrderDialog.vue b/src/views/userControl/userList/components/OrderDialog.vue
new file mode 100644
index 0000000..5d333bd
--- /dev/null
+++ b/src/views/userControl/userList/components/OrderDialog.vue
@@ -0,0 +1,174 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :after-close="onAfterClose"
+        @ok="handleOk" @cancel="handleCancel" width="80%">
+         <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+            :scroll="{ x: 1000 }" @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'banner_type' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="record.banner_type == 1" color="processing">
+                        首页轮播图
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-else color="processing">
+                        营销活动图
+                    </a-tag>
+                </template>
+            </template>
+        </a-table>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal, usePagination } from '@/hooks'
+import { config } from '@/config'
+import { disabledDict, authenticationTypeDict,payStatusDict , payTypeDict, payType } from '@/enums/dict'
+
+const emit = defineEmits(['ok'])
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { modal, showModal, hideModal } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+const columns = [
+    { title: '订单编号', dataIndex: 'orderNumber', key: 'orderNumber', fixed: 'left', width: 200 },
+    { title: '实例名称', dataIndex: 'caseName', key: 'caseName', fixed: 'left', width: 200 },
+    { 
+        title: '计费方式', 
+        dataIndex: 'billingMethod', 
+        key: 'billingMethod', 
+        width: 150,
+        customRender: ({ text }) => payType.getLabel(text) || text,
+     },
+    {
+        title: '支付状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 150,
+        customRender: ({ text }) => payStatusDict.getLabel(text) || text,
+    },
+    // {
+    //     title: '账号类型',
+    //     key: 'accountType',
+    //     dataIndex: 'accountType',
+    //     width: 120,
+    // },
+    { title: '计费开始时间', key: 'billingStart', dataIndex: 'billingStart', width: 120 },
+    { title: '计费结束时间', key: 'billingEnd', dataIndex: 'billingEnd', width: 120 },
+    { title: '计费时长', key: 'billingTime', dataIndex: 'billingTime', width: 120 },
+    { title: '单价', key: 'price', dataIndex: 'price', width: 120 },
+    { title: '总费用', key: 'totalAmount', dataIndex: 'totalAmount', width: 120 },
+    { title: '算力券名称', key: 'voucherName', dataIndex: 'voucherName', width: 120 },
+    { title: '支付状态', key: 'payStatus', dataIndex: 'payStatus', width: 120 },
+]
+
+/**
+ * 流水查询
+ */
+async function handleOrder(userId) {
+    formRecord.value = userId
+    showModal({
+        type: 'edit',
+        title: '查看实例订单列表',
+    })
+    
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const params = {
+            pageSize,
+            current: current,
+            userId: userId,
+        }
+        
+        const res = await apis.userControl.getCustomerOrderList(params)
+        
+        if (config('http.code.success') === res.success) {
+            const { data, total } = res
+            if (data && data.length > 0) {
+                listData.value = data
+                paginationState.total = total || 0
+            } else {
+                listData.value = []
+                paginationState.total = 0
+            }
+        } else {
+            listData.value = []
+            paginationState.total = 0
+        }
+    } catch (error) {
+        console.error('获取流水记录失败:', error)
+        listData.value = []
+        paginationState.total = 0
+    } finally {
+        hideLoading()
+    }
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const { pageSize, current } = paginationState
+                const params = {
+                    pageSize,
+                    current: current,
+                    userId: formRecord.value,
+                }
+                
+                // 这里可以根据需要添加保存逻辑
+                // 目前主要是查看，可能不需要保存操作
+                
+                hideLoading()
+                hideModal()
+                emit('ok')
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    // 重新加载数据
+    if (formRecord.value) {
+        handleOrder(formRecord.value)
+    }
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    listData.value = []
+    paginationState.total = 0
+}
+
+defineExpose({
+    handleOrder,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userControl/userList/components/WaterDialog.vue b/src/views/userControl/userList/components/WaterDialog.vue
new file mode 100644
index 0000000..fb4bc3b
--- /dev/null
+++ b/src/views/userControl/userList/components/WaterDialog.vue
@@ -0,0 +1,168 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :after-close="onAfterClose"
+        @ok="handleOk" @cancel="handleCancel" width="80%">
+        <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+            :scroll="{ x: 1000 }" @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'banner_type' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="record.banner_type == 1" color="processing">
+                        首页轮播图
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-else color="processing">
+                        营销活动图
+                    </a-tag>
+                </template>
+            </template>
+        </a-table>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal, usePagination } from '@/hooks'
+import { config } from '@/config'
+import { disabledDict, authenticationTypeDict,payStatusDict , payTypeDict } from '@/enums/dict'
+
+const emit = defineEmits(['ok'])
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { modal, showModal, hideModal } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+const columns = [
+    { title: '充值金额', dataIndex: 'topUpAmount', key: 'topUpAmount', fixed: 'left', width: 200 },
+    { 
+        title: '支付方式', 
+        dataIndex: 'paymentMethod', 
+        key: 'paymentMethod', 
+        width: 150,
+        customRender: ({ text }) => payTypeDict.getLabel(text) || text,
+     },
+    {
+        title: '支付状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 150,
+        customRender: ({ text }) => payStatusDict.getLabel(text) || text,
+    },
+    // {
+    //     title: '账号类型',
+    //     key: 'accountType',
+    //     dataIndex: 'accountType',
+    //     width: 120,
+    // },
+    { title: '支付第三方编号', key: 'thirdPartyId', dataIndex: 'thirdPartyId', width: 120 },
+    { title: '支付时间', key: 'paymentTime', dataIndex: 'paymentTime', width: 120 },
+]
+
+/**
+ * 流水查询
+ */
+async function handleWater(userId) {
+    formRecord.value = userId
+    showModal({
+        type: 'edit',
+        title: '查看流水列表',
+    })
+    
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const params = {
+            pageSize,
+            current: current,
+            userId: userId,
+        }
+        
+        const res = await apis.userControl.getTopUpRecordsList(params)
+        
+        if (config('http.code.success') === res.success) {
+            const { data, total } = res
+            if (data && data.length > 0) {
+                listData.value = data
+                paginationState.total = total || 0
+            } else {
+                listData.value = []
+                paginationState.total = 0
+            }
+        } else {
+            listData.value = []
+            paginationState.total = 0
+        }
+    } catch (error) {
+        console.error('获取流水记录失败:', error)
+        listData.value = []
+        paginationState.total = 0
+    } finally {
+        hideLoading()
+    }
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const { pageSize, current } = paginationState
+                const params = {
+                    pageSize,
+                    current: current,
+                    userId: formRecord.value,
+                }
+                
+                // 这里可以根据需要添加保存逻辑
+                // 目前主要是查看，可能不需要保存操作
+                
+                hideLoading()
+                hideModal()
+                emit('ok')
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    // 重新加载数据
+    if (formRecord.value) {
+        handleWater(formRecord.value)
+    }
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    listData.value = []
+    paginationState.total = 0
+}
+
+defineExpose({
+    handleWater,
+})
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/views/userControl/userList/index.vue b/src/views/userControl/userList/index.vue
index 0c2603e..0c0a37b 100644
--- a/src/views/userControl/userList/index.vue
+++ b/src/views/userControl/userList/index.vue
@@ -70,17 +70,23 @@
                         </template>
 
                         <template v-if="'action' === column.key">
-                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                            <!-- <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
                                 <a-tooltip>
                                     <template #title> {{ $t('pages.system.role.edit') }}</template>
                                     <edit-outlined />
                                 </a-tooltip>
-                            </x-action-button>
+                            </x-action-button> -->
                             <x-action-button @click="handleRemove(record)">
-                                <a-tooltip>
-                                    <template #title> 拉黑用户</template>
-                                    <delete-outlined style="color: #ff4d4f" />
-                                </a-tooltip>
+                                封禁
+                            </x-action-button>
+                             <x-action-button @click="handleWater(record)">
+                                流水
+                            </x-action-button>
+                              <x-action-button @click="handleHost(record)">
+                                实例
+                            </x-action-button>
+                              <x-action-button @click="handleOrder(record)">
+                                实例订单
                             </x-action-button>
                         </template>
                     </template>
@@ -88,8 +94,11 @@
             </a-card>
         </a-col>
     </a-row>
-
+ 
     <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+    <water-dialog ref="waterDialogRef" @ok="onOk"></water-dialog>
+    <order-dialog ref="orderDialogRef" @ok="onOk"></order-dialog>
+    <host-case-dialog ref="hostCaseDialogRef" @ok="onOk"></host-case-dialog>
 </template>
 
 <script setup>
@@ -101,6 +110,9 @@ import { config } from '@/config'
 import { statusTypeEnum } from '@/enums/system'
 import { usePagination, useForm } from '@/hooks'
 import EditDialog from './components/EditDialog.vue'
+import WaterDialog from './components/WaterDialog.vue'
+import OrderDialog from './components/OrderDialog.vue'
+import HostCaseDialog from './components/HostCaseDialog.vue'
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
 import { disabledDict, authenticationTypeDict } from '@/enums/dict'
@@ -110,7 +122,7 @@ defineOptions({
 })
 const { t } = useI18n() // 解构出t方法
 const columns = [
-    { title: '用户姓名', dataIndex: 'userName', width: 200 },
+    { title: '用户姓名', dataIndex: 'userName', fixed: 'left', width: 200 },
     { title: '用户联系方式', dataIndex: 'phone', width: 150 },
     {
         title: '状态',
@@ -128,13 +140,16 @@ const columns = [
     },
     { title: '余额', key: 'balance', dataIndex: 'balance', width: 120 },
     { title: '算力点', key: 'point', dataIndex: 'point', width: 120 },
-    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 250 },
 ]
 
 const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
     usePagination()
 const { resetForm } = useForm()
 const editDialogRef = ref()
+const waterDialogRef = ref()
+const orderDialogRef = ref()
+const hostCaseDialogRef = ref()
 
 getPageList()
 
@@ -184,6 +199,22 @@ function handleRemove({ id, status }) {
     })
 }
 
+// 流水
+function handleWater({ id }) {
+     waterDialogRef.value?.handleWater(id)
+}
+
+// 实例
+function handleHost({ id }) {
+    console.log(id)
+    hostCaseDialogRef.value?.handleHost(id)
+}   
+
+// 订单
+function handleOrder({ id }) {
+    console.log(id)
+    orderDialogRef.value?.handleOrder(id)
+}   
 /**
  * 分页
  */