From 8a5d6f510e58062bcd75e6deabd723f06a0a823f Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 10:52:46 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/modules/certifications.js            |  12 +-
 .../components/EditDialog.vue                 | 178 +++++-------
 .../certification/certificationList/index.vue | 269 ++++++++++++++----
 3 files changed, 296 insertions(+), 163 deletions(-)

diff --git a/src/apis/modules/certifications.js b/src/apis/modules/certifications.js
index ed05efb..590a31b 100644
--- a/src/apis/modules/certifications.js
+++ b/src/apis/modules/certifications.js
@@ -1,13 +1,7 @@
 import request from '@/utils/request'
 
-//获取banner列表
+//获取审核列表
 export const getCertificationsList = (params) => request.basic.get('/api/v1/certifications', 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
+// 审核接口
+export const updateCertifications = (id, data) => request.basic.put(`/api/v1/certifications/${id}`, data)
diff --git a/src/views/certification/certificationList/components/EditDialog.vue b/src/views/certification/certificationList/components/EditDialog.vue
index aa18d80..ddf2280 100644
--- a/src/views/certification/certificationList/components/EditDialog.vue
+++ b/src/views/certification/certificationList/components/EditDialog.vue
@@ -5,32 +5,16 @@
             <a-card class="mb-8-2">
                 <a-row :gutter="24">
                     <a-col :span="24">
-                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
-                            <a-input v-model:value="formData.name"></a-input>
-                        </a-form-item>
-                    </a-col>
-
-                    <a-col :span="24">
-                        <a-form-item :label="$t('pages.system.role.form.sequence')" name="sequence">
-                            <a-input :defaultValue="0" type="number" v-model:value="formData.sequence"></a-input>
+                        <a-form-item label="审核结果" name="check">
+                            <a-radio-group v-model:value="formData.check" :options="[
+                                { label: '通过', value: true },
+                                { label: '不通过', value: false },
+                            ]" />
                         </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="'描述'">
-                            <a-textarea v-model:value="formData.description"></a-textarea>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="24">
-                        <a-form-item :label="'上传图片'" name="permissions">
-                            <GxUpload :fileNumber="1" />
+                        <a-form-item label="审核不通过理由" name="fail_reason">
+                            <a-textarea v-model:value="formData.fail_reason" :disabled="formData.check === true" />
                         </a-form-item>
                     </a-col>
                 </a-row>
@@ -40,119 +24,103 @@
 </template>
 
 <script setup>
-import { cloneDeep } from 'lodash-es'
 import { message } from 'ant-design-vue'
-import { ref, watch } from 'vue'
-import { config } from '@/config'
+import { ref, computed } from 'vue'
 import apis from '@/apis'
 import { useForm, useModal } from '@/hooks'
-import GxUpload from '@/components/GxUpload/index.vue'
-const emit = defineEmits(['ok'])
 import { useI18n } from 'vue-i18n'
+
+const emit = defineEmits(['ok'])
+const { t } = useI18n()
+
 const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
-const { formRecord, formData, formRef, formRules, resetForm } = useForm()
-const { t } = useI18n() // 解构出t方法
+const { formData, formRef, resetForm } = useForm()
+
 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') },
+
+// 初始化表单数据
+formData.value = {
+    check: true,
+    fail_reason: '',
+    id: null,
 }
 
-/**
- * 新建
- */
-function handleCreate() {
-    showModal({
-        type: 'create',
-        title: t('pages.system.role.add'),
-    })
+// 动态校验规则：使用 validator
+const validateFailReason = (rule, value, callback) => {
+    if (formData.value.check === false) {
+        if (!value || value.trim() === '') {
+            callback(new Error('请选择不通过时，必须填写不通过理由'))
+        } else {
+            callback()
+        }
+    } else {
+        // 通过时不需要校验
+        callback()
+    }
 }
 
+// 表单规则
+const formRules = computed(() => ({
+    check: [{ required: true, message: '请选择审核结果' }],
+    fail_reason: [{ validator: validateFailReason, trigger: 'blur' }],
+}))
+
 /**
- * 编辑
+ * 编辑（审核）
  */
-async function handleEdit(record = {}) {
+async function handleEdit(id) {
     showModal({
         type: 'edit',
-        title: t('pages.system.role.edit'),
+        title: '用户审核',
     })
-
-    const { data, success } = await apis.role.getRole(record.id).catch()
-    if (!success) {
-        message.error(t('component.message.error.save'))
-        hideModal()
-        return
-    }
-    let menus = []
-    if (data.menus) {
-        for (let item of data.menus) {
-            menus.push(item.menu_id)
-        }
-    }
-    checkedKeys.value = menus
-    formRecord.value = data
-    formData.value = cloneDeep(data)
+    formData.value.id = id
+    // 可选：如果需要回显原数据，可在此处调用 API 获取详情并赋值
+    // 比如：formData.value = await fetchCertificationDetail(id)
 }
 
 /**
  * 确定
  */
-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.banner.createBanner(params).catch(() => {
-                            throw new Error()
-                        })
-                        break
-                    case 'edit':
-                        result = await apis.banner.updateBanner(formData.value.id, params).catch(() => {
-                            throw new Error()
-                        })
-                        break
-                }
-                hideLoading()
-                if (config('http.code.success') === result?.success) {
-                    hideModal()
-                    emit('ok')
-                }
-            } catch (error) {
-                hideLoading()
-            }
-        })
-        .catch(() => {
-            hideLoading()
-        })
+async function handleOk() {
+    try {
+        await formRef.value.validateFields()
+        showLoading()
+
+        const params = {
+            check: formData.value.check,
+            fail_reason: formData.value.check ? null : formData.value.fail_reason?.trim(),
+        }
+
+        const result = await apis.certifications.updateCertifications(formData.value.id, params)
+
+        hideLoading()
+        if (result?.success) {
+            message.success('操作成功')
+            hideModal()
+            emit('ok')
+        }
+    } catch (error) {
+        hideLoading()
+        // validateFields 失败会抛出异常，但已被 catch，无需额外处理
+    }
 }
 
-/**
- * 取消
- */
 function handleCancel() {
     hideModal()
 }
 
-/**
- * 关闭后
- */
 function onAfterClose() {
     resetForm()
-    hideLoading()
+    // 重置表单数据（可选）
+    formData.value = {
+        check: true,
+        fail_reason: '',
+        id: null,
+    }
 }
 
 defineExpose({
-    handleCreate,
     handleEdit,
 })
-</script>
-
-<style lang="less" scoped></style>
+</script>
\ No newline at end of file
diff --git a/src/views/certification/certificationList/index.vue b/src/views/certification/certificationList/index.vue
index 22d6125..1b42009 100644
--- a/src/views/certification/certificationList/index.vue
+++ b/src/views/certification/certificationList/index.vue
@@ -12,11 +12,13 @@
 
                     <a-col :span="6">
                         <a-form-item label="认证状态" name="status">
-
                             <a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
+                                <a-select-option value="">全部</a-select-option>
                                 <a-select-option v-for="item in authenticationDict.options" :key="item.value"
                                     :value="item.value">
-                                    {{ item.label }}
+                                    <a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
+                                        {{ item.label }}
+                                    </a-tag>
                                 </a-select-option>
                             </a-select>
                         </a-form-item>
@@ -61,20 +63,21 @@
                 <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
                     :scroll="{ x: 1000 }" @change="onTableChange">
                     <template #bodyCell="{ column, record }">
-                        <!-- <template v-if="'action' === column.key">
-                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                        <template v-if="column.key === 'certificationStatus'">
+                            <!-- 认证状态标签 -->
+                            <a-tag :color="getStatusColor(record.certificationStatus)" class="status-tag">
+                                {{ authenticationDict.getLabel(record.certificationStatus) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="column.key === 'action'">
+                            <x-action-button @click="handleEdit(record)">
                                 <a-tooltip>
-                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <template #title>用户审核</template>
                                     <edit-outlined />
                                 </a-tooltip>
                             </x-action-button>
-                            <x-action-button @click="handleRemove(record)">
-                                <a-tooltip>
-                                    <template #title> {{ $t('pages.system.delete') }}</template>
-                                    <delete-outlined style="color: #ff4d4f" />
-                                </a-tooltip>
-                            </x-action-button>
-                        </template> -->
+                        </template>
                     </template>
                 </a-table>
             </a-card>
@@ -85,8 +88,9 @@
 </template>
 
 <script setup>
-import { message, Modal } from 'ant-design-vue'
-import { ref } from 'vue'
+import { h } from 'vue'
+import { message, Modal, Tag } from 'ant-design-vue'
+import { ref, computed } from 'vue'
 import apis from '@/apis'
 import { formatUtcDateTime } from '@/utils/util'
 import { config } from '@/config'
@@ -100,11 +104,54 @@ import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
 defineOptions({
     name: 'systemRole',
 })
-const { t } = useI18n() // 解构出t方法
+const { t } = useI18n()
+
+// 状态颜色映射 - 基于你的配置
+const statusColorMap = {
+    PENDING_CERTIFICATION: 'warning',
+    CERTIFICATION_DFFILED: 'processing',
+    CERTIFICATION_PASSED: 'success',
+    CERTIFICATION_FAILED: 'error',
+}
+
+// 状态标签样式映射
+const statusStyleMap = {
+    PENDING_CERTIFICATION: {
+        bgColor: '#fff7e6',
+        borderColor: '#ffd591',
+        textColor: '#fa8c16'
+    },
+    CERTIFICATION_DFFILED: {
+        bgColor: '#e6f4ff',
+        borderColor: '#91caff',
+        textColor: '#1677ff'
+    },
+    CERTIFICATION_PASSED: {
+        bgColor: '#f6ffed',
+        borderColor: '#b7eb8f',
+        textColor: '#52c41a'
+    },
+    CERTIFICATION_FAILED: {
+        bgColor: '#fff2f0',
+        borderColor: '#ffccc7',
+        textColor: '#ff4d4f'
+    }
+}
+
 const columns = [
-    // { title: '序号', dataIndex: 'id', width: 200 },
-    { title: '用户名', dataIndex: 'userName', width: 150 },
-    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
+    {
+        title: '用户名',
+        dataIndex: 'userName',
+        width: 150,
+        ellipsis: true
+    },
+    {
+        title: '手机号',
+        dataIndex: 'phone',
+        key: 'phone',
+        width: 150,
+        ellipsis: true
+    },
     {
         title: '认证类型',
         dataIndex: 'certificationType',
@@ -116,12 +163,82 @@ const columns = [
         title: '认证状态',
         dataIndex: 'certificationStatus',
         key: 'certificationStatus',
-        width: 120,
-        customRender: ({ text }) => authenticationDict.getLabel(text) || text,
+        width: 140,
+        filters: authenticationDict.options.map( item => ({
+            text: item.label,
+            value: item.value
+        })),
+        onFilter: (value, record) => record.certificationStatus === value,
+        customRender: ({ text }) => {
+            const style = statusStyleMap[text] || {}
+            return h(
+                'div',
+                {
+                    class: 'status-tag-wrapper',
+                    style: { display: 'inline-flex', alignItems: 'center' }
+                },
+                [
+                    // 状态圆点
+                    h('span', {
+                        class: 'status-dot',
+                        style: {
+                            width: '8px',
+                            height: '8px',
+                            borderRadius: '50%',
+                            backgroundColor: style.textColor || '#d9d9d9',
+                            marginRight: '6px',
+                            display: 'inline-block'
+                        }
+                    }),
+                    // 状态标签
+                    h(Tag, {
+                        color: getStatusColor(text),
+                        style: {
+                            margin: 0,
+                            fontSize: '12px',
+                            lineHeight: '20px',
+                            padding: '0 8px',
+                            backgroundColor: style.bgColor || '#fafafa',
+                            borderColor: style.borderColor || '#d9d9d9',
+                            color: style.textColor || '#00000073',
+                            borderRadius: '10px',
+                            fontWeight: 500
+                        }
+                    }, authenticationDict.getLabel(text) || text)
+                ]
+            )
+        }
+    },
+    {
+        title: '提交时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        width: 180,
+        sorter: true,
+        customRender: ({ text }) => formatUtcDateTime(text)
+    },
+    {
+        title: t('button.action'),
+        key: 'action',
+        fixed: 'right',
+        width: 100,
+        align: 'center'
     },
-    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
 ]
 
+// 获取状态颜色
+const getStatusColor = (status) => {
+    return statusColorMap[status] || 'default'
+}
+
+// 带样式的下拉选项
+const styledStatusOptions = computed(() => {
+    return authenticationDict.options.map(item => ({
+        ...item,
+        color: getStatusColor(item.value)
+    }))
+})
+
 const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
     usePagination()
 const { resetForm } = useForm()
@@ -157,32 +274,14 @@ async function getPageList() {
 }
 
 /**
- * 移除
+ * 编辑按钮点击
  */
-function handleRemove({ id }) {
-    Modal.confirm({
-        title: t('pages.system.role.delTip'),
-        content: t('button.confirm'),
-        okText: t('button.confirm'),
-        onOk: () => {
-            return new Promise((resolve, reject) => {
-                ; (async () => {
-                    try {
-                        const { success } = await apis.role.delRole(id).catch(() => {
-                            throw new Error()
-                        })
-                        if (config('http.code.success') === success) {
-                            resolve()
-                            message.success(t('component.message.success.delete'))
-                            await getPageList()
-                        }
-                    } catch (error) {
-                        reject()
-                    }
-                })()
-            })
-        },
-    })
+function handleEdit({ id, certificationStatus }) {
+    if (certificationStatus !== 'CERTIFICATION_DFFILED') {
+        message.warning('该用户认证状态不是已提交，不能操作')
+        return
+    }
+    editDialogRef.value?.handleEdit(id)
 }
 
 /**
@@ -207,8 +306,6 @@ function handleResetSearch() {
  * 搜索
  */
 function handleSearch() {
-    // resetForm()
-    // resetPagination()
     getPageList()
 }
 
@@ -220,4 +317,78 @@ async function onOk() {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.status-tag {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 0 8px;
+    border-radius: 10px;
+    font-weight: 500;
+    transition: all 0.3s;
+
+    &:hover {
+        opacity: 0.8;
+        transform: translateY(-1px);
+    }
+}
+
+.status-tag-wrapper {
+    .status-dot {
+        transition: all 0.3s;
+    }
+
+    // "已提交"状态的闪烁动画
+    &[data-status="CERTIFICATION_DFFILED"] .status-dot {
+        animation: blink 1.5s infinite;
+    }
+
+    // "待认证"状态的呼吸动画
+    &[data-status="PENDING_CERTIFICATION"] .status-dot {
+        animation: pulse 2s infinite;
+    }
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.align-right {
+    text-align: right;
+
+    .ant-space {
+        justify-content: flex-end;
+    }
+}
+
+// 表格样式优化
+:deep(.ant-table-thead > tr > th) {
+    font-weight: 600;
+    background-color: #fafafa;
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+    background-color: #f6f8fa;
+}
+</style>
\ No newline at end of file

From 4899e34c0ad4e323ab877a1f93e2009510b90597 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 11:19:23 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E8=AE=A4=E8=AF=81=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CertificationTable.vue         | 402 +++++++++++++++
 .../certification/certificationList/index.vue | 462 +++++++-----------
 2 files changed, 584 insertions(+), 280 deletions(-)
 create mode 100644 src/views/certification/certificationList/components/CertificationTable.vue

diff --git a/src/views/certification/certificationList/components/CertificationTable.vue b/src/views/certification/certificationList/components/CertificationTable.vue
new file mode 100644
index 0000000..bd65ef7
--- /dev/null
+++ b/src/views/certification/certificationList/components/CertificationTable.vue
@@ -0,0 +1,402 @@
+<template>
+    <div class="certification-table">
+        <a-table 
+            :columns="columns" 
+            :data-source="data" 
+            :loading="loading" 
+            :pagination="pagination"
+            :scroll="{ x: getTableWidth() }" 
+            @change="handleTableChange"
+            :row-key="record => record.id"
+        >
+            <template #bodyCell="{ column, record }">
+                <!-- 认证类型 -->
+                <template v-if="column.key === 'certificationType'">
+                    <a-tag :color="record.certificationType === 'COMPANY' ? 'orange' : 'green'">
+                        {{ getCertificationTypeLabel(record.certificationType) }}
+                    </a-tag>
+                </template>
+                
+                <!-- 认证状态 -->
+                <template v-if="column.key === 'certificationStatus'">
+                    <div class="status-cell">
+                        <a-tag 
+                            :color="getStatusColor(record.certificationStatus)" 
+                            class="status-tag"
+                        >
+                            {{ getStatusLabel(record.certificationStatus) }}
+                        </a-tag>
+                        <!-- 显示失败原因 -->
+                        <div v-if="record.certificationStatus === 'CERTIFICATION_FAILED' && record.fail_reason" 
+                             class="fail-reason">
+                            <a-tooltip :title="record.fail_reason">
+                                <info-circle-outlined style="color: #ff4d4f; margin-left: 4px;" />
+                            </a-tooltip>
+                        </div>
+                    </div>
+                </template>
+                
+                <!-- 个人认证字段 -->
+                <template v-if="record.certificationType === 'USER'">
+                    <template v-if="column.key === 'name'">
+                        {{ record.name }}
+                    </template>
+                    <template v-if="column.key === 'idCard'">
+                        {{ record.idCard }}
+                    </template>
+                    <template v-if="column.key === 'certificationPeriod'">
+                        {{ record.certificationStart }} - {{ record.certificationEnd }}
+                    </template>
+                </template>
+                
+                <!-- 企业认证字段 -->
+                <template v-if="record.certificationType === 'COMPANY'">
+                    <template v-if="column.key === 'companyName'">
+                        <div class="text-truncate" :title="record.companyName">
+                            {{ record.companyName }}
+                        </div>
+                    </template>
+                    <template v-if="column.key === 'unifiedSocialCreditCode'">
+                        {{ record.unifiedSocialCreditCode }}
+                    </template>
+                    <template v-if="column.key === 'companyContact'">
+                        <div v-if="record.identity === '企业法人'">
+                            {{ record.name }}（法人）
+                        </div>
+                        <div v-else-if="record.identity === '被授权人'">
+                            {{ record.name }}（被授权人）
+                        </div>
+                        <div v-else>
+                            {{ record.name }}
+                        </div>
+                    </template>
+                </template>
+                
+                <!-- 操作列 -->
+                <template v-if="column.key === 'action'">
+                    <a-space :size="8">
+                        <a-button 
+                            type="link" 
+                            size="small"
+                            @click="$emit('edit', record)"
+                            :disabled="record.certificationStatus !== 'CERTIFICATION_DFFILED'"
+                        >
+                            审核
+                        </a-button>
+                        <a-button 
+                            type="link" 
+                            size="small"
+                            @click="$emit('view', record)"
+                        >
+                            详情
+                        </a-button>
+                    </a-space>
+                </template>
+            </template>
+            
+            <template #emptyText>
+                <div class="empty-content">
+                    <a-empty description="暂无认证数据" />
+                </div>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue'
+import { Empty, Tooltip } from 'ant-design-vue'
+import { InfoCircleOutlined } from '@ant-design/icons-vue'
+import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    pagination: {
+        type: Object,
+        default: () => ({})
+    },
+    showType: {
+        type: String,
+        default: 'all', // all, personal, company
+        validator: (value) => ['all', 'personal', 'company'].includes(value)
+    }
+})
+
+const emit = defineEmits(['table-change', 'edit', 'view'])
+
+// 状态颜色映射
+const statusColorMap = {
+    PENDING_CERTIFICATION: 'orange',
+    CERTIFICATION_DFFILED: 'blue',
+    CERTIFICATION_PASSED: 'green',
+    CERTIFICATION_FAILED: 'red',
+}
+
+// 根据显示类型动态计算列
+const columns = computed(() => {
+    const baseColumns = [
+        { 
+            title: '用户名', 
+            dataIndex: 'userName', 
+            width: 120,
+            ellipsis: true,
+            fixed: 'left'
+        },
+        { 
+            title: '手机号', 
+            dataIndex: 'phone', 
+            width: 130,
+            ellipsis: true
+        },
+        {
+            title: '认证类型',
+            dataIndex: 'certificationType',
+            key: 'certificationType',
+            width: 100,
+            filters: authenticationTypeDict.options.map(item => ({
+                text: item.label,
+                value: item.value
+            })),
+            onFilter: (value, record) => record.certificationType === value,
+        },
+        {
+            title: '认证状态',
+            dataIndex: 'certificationStatus',
+            key: 'certificationStatus',
+            width: 140,
+            filters: authenticationDict.options.map(item => ({
+                text: item.label,
+                value: item.value
+            })),
+            onFilter: (value, record) => record.certificationStatus === value,
+        },
+    ]
+    
+    // 根据显示类型添加不同的列
+    if (props.showType === 'all') {
+        // 全部认证：显示所有列，用条件渲染控制显示内容
+        return [
+            ...baseColumns,
+            { 
+                title: '真实姓名/企业名称', 
+                dataIndex: 'name',
+                key: 'name', 
+                width: 150,
+                ellipsis: true,
+            },
+            { 
+                title: '证件号码/信用代码', 
+                dataIndex: 'idCard',
+                key: 'idCard', 
+                width: 180,
+                ellipsis: true,
+            },
+            { 
+                title: '有效期/身份', 
+                dataIndex: 'certificationPeriod',
+                key: 'certificationPeriod', 
+                width: 150,
+            },
+            { 
+                title: '操作', 
+                key: 'action', 
+                fixed: 'right', 
+                width: 120,
+                align: 'center'
+            },
+        ]
+    } else if (props.showType === 'personal') {
+        // 个人认证：显示个人相关字段
+        return [
+            ...baseColumns,
+            { 
+                title: '真实姓名', 
+                dataIndex: 'name',
+                key: 'name', 
+                width: 120,
+                ellipsis: true,
+            },
+            { 
+                title: '身份证号', 
+                dataIndex: 'idCard',
+                key: 'idCard', 
+                width: 180,
+                ellipsis: true,
+            },
+            { 
+                title: '证件有效期', 
+                dataIndex: 'certificationPeriod',
+                key: 'certificationPeriod', 
+                width: 180,
+            },
+            { 
+                title: '证件类型', 
+                dataIndex: 'documentType',
+                key: 'documentType', 
+                width: 100,
+                customRender: ({ text }) => text === '身份证' ? text : '其他',
+            },
+            { 
+                title: '操作', 
+                key: 'action', 
+                fixed: 'right', 
+                width: 120,
+                align: 'center'
+            },
+        ]
+    } else if (props.showType === 'company') {
+        // 企业认证：显示企业相关字段
+        return [
+            ...baseColumns,
+            { 
+                title: '企业名称', 
+                dataIndex: 'companyName',
+                key: 'companyName', 
+                width: 200,
+                ellipsis: true,
+            },
+            { 
+                title: '统一信用代码', 
+                dataIndex: 'unifiedSocialCreditCode',
+                key: 'unifiedSocialCreditCode', 
+                width: 180,
+                ellipsis: true,
+            },
+            { 
+                title: '联系人身份', 
+                dataIndex: 'companyContact',
+                key: 'companyContact', 
+                width: 120,
+            },
+            { 
+                title: '联系人姓名', 
+                dataIndex: 'name',
+                key: 'name', 
+                width: 120,
+                ellipsis: true,
+            },
+            { 
+                title: '证件类型', 
+                dataIndex: 'companyDocumentType',
+                key: 'companyDocumentType', 
+                width: 120,
+                customRender: ({ text }) => text === '营业执照' ? text : '其他',
+            },
+            { 
+                title: '操作', 
+                key: 'action', 
+                fixed: 'right', 
+                width: 120,
+                align: 'center'
+            },
+        ]
+    }
+    
+    return baseColumns
+})
+
+// 获取表格宽度
+const getTableWidth = () => {
+    if (props.showType === 'personal') return 900
+    if (props.showType === 'company') return 1100
+    return 800
+}
+
+// 获取认证类型标签
+const getCertificationTypeLabel = (type) => {
+    return authenticationTypeDict.getLabel(type) || type
+}
+
+// 获取状态标签
+const getStatusLabel = (status) => {
+    return authenticationDict.getLabel(status) || status
+}
+
+// 获取状态颜色
+const getStatusColor = (status) => {
+    return statusColorMap[status] || 'default'
+}
+
+// 表格变化
+const handleTableChange = (pagination, filters, sorter) => {
+    emit('table-change', pagination)
+}
+</script>
+
+<style lang="less" scoped>
+.certification-table {
+    :deep(.ant-table) {
+        background: #fff;
+        
+        .ant-table-thead > tr > th {
+            background: #fafafa;
+            font-weight: 600;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .ant-table-tbody > tr > td {
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .ant-table-tbody > tr:hover > td {
+            background: #fafafa;
+        }
+    }
+    
+    .status-cell {
+        display: flex;
+        align-items: center;
+        
+        .status-tag {
+            border-radius: 12px;
+            font-size: 12px;
+            line-height: 20px;
+            padding: 0 10px;
+            font-weight: 500;
+            border: none;
+            
+            &.ant-tag-orange {
+                background: #fff7e6;
+                color: #fa8c16;
+            }
+            
+            &.ant-tag-blue {
+                background: #e6f4ff;
+                color: #1677ff;
+            }
+            
+            &.ant-tag-green {
+                background: #f6ffed;
+                color: #52c41a;
+            }
+            
+            &.ant-tag-red {
+                background: #fff2f0;
+                color: #ff4d4f;
+            }
+        }
+        
+        .fail-reason {
+            margin-left: 4px;
+            cursor: pointer;
+        }
+    }
+    
+    .text-truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .empty-content {
+        padding: 48px 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/certification/certificationList/index.vue b/src/views/certification/certificationList/index.vue
index 1b42009..0766a1e 100644
--- a/src/views/certification/certificationList/index.vue
+++ b/src/views/certification/certificationList/index.vue
@@ -1,254 +1,145 @@
 <template>
-    <x-search-bar class="mb-8-2">
-        <template #default="{ gutter, colSpan }">
-            <a-form :model="searchFormData" layout="inline" :label-col="{ style: { width: '100px' } }">
-                <a-row :gutter="gutter" :wrap="false">
-                    <!-- 每个字段占 6 栅格，共 4 个 -->
-                    <a-col :span="6">
-                        <a-form-item label="用户姓名" name="userName">
-                            <a-input v-model:value="searchFormData.userName" placeholder="请输入用户姓名" />
-                        </a-form-item>
-                    </a-col>
+    <div class="certification-management">
+        <x-search-bar class="mb-8-2">
+            <template #default="{ gutter, colSpan }">
+                <a-form :model="searchFormData" layout="inline" :label-col="{ style: { width: '100px' } }">
+                    <a-row :gutter="gutter" :wrap="false">
+                        <a-col :span="6">
+                            <a-form-item label="用户姓名" name="userName">
+                                <a-input v-model:value="searchFormData.userName" placeholder="请输入用户姓名" />
+                            </a-form-item>
+                        </a-col>
 
-                    <a-col :span="6">
-                        <a-form-item label="认证状态" name="status">
-                            <a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
-                                <a-select-option value="">全部</a-select-option>
-                                <a-select-option v-for="item in authenticationDict.options" :key="item.value"
-                                    :value="item.value">
-                                    <a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
+                        <a-col :span="6">
+                            <a-form-item label="认证类型" name="certificationType">
+                                <a-select v-model:value="searchFormData.certificationType" placeholder="请选择认证类型">
+                                    <a-select-option value="">全部类型</a-select-option>
+                                    <a-select-option v-for="item in authenticationTypeDict.options" :key="item.value"
+                                        :value="item.value">
                                         {{ item.label }}
-                                    </a-tag>
-                                </a-select-option>
-                            </a-select>
-                        </a-form-item>
-                    </a-col>
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
 
-                    <a-col :span="6">
-                        <a-form-item label="认证类型" name="ctfType">
-                            <a-select v-model:value="searchFormData.ctfType" placeholder="请选择认证类型">
-                                <a-select-option v-for="item in authenticationTypeDict.options" :key="item.value"
-                                    :value="item.value">
-                                    {{ item.label }}
-                                </a-select-option>
-                            </a-select>
-                        </a-form-item>
-                    </a-col>
+                        <a-col :span="6">
+                            <a-form-item label="认证状态" name="status">
+                                <a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
+                                    <a-select-option value="">全部状态</a-select-option>
+                                    <a-select-option v-for="item in authenticationDict.options" :key="item.value"
+                                        :value="item.value">
+                                        <a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
+                                            {{ item.label }}
+                                        </a-tag>
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
 
-                    <!-- 操作按钮列：右对齐，占 6 栅格 -->
-                    <a-col :span="6" class="align-right">
-                        <a-space>
-                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
-                            <a-button ghost type="primary" @click="handleSearch">
-                                {{ $t('button.search') }}
-                            </a-button>
-                        </a-space>
-                    </a-col>
-                </a-row>
-            </a-form>
-        </template>
-    </x-search-bar>
+                        <a-col :span="6" class="align-right">
+                            <a-space>
+                                <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    {{ $t('button.search') }}
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </template>
+        </x-search-bar>
 
-    <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="column.key === 'certificationStatus'">
-                            <!-- 认证状态标签 -->
-                            <a-tag :color="getStatusColor(record.certificationStatus)" class="status-tag">
-                                {{ authenticationDict.getLabel(record.certificationStatus) }}
-                            </a-tag>
-                        </template>
+        <!-- 普通横线标签页 -->
+        <div class="table-container">
+            <a-tabs v-model:activeKey="activeTab" type="line" @change="handleTabChange">
+                <a-tab-pane key="all" tab="全部认证">
+                    <CertificationTable 
+                        :data="allData" 
+                        :loading="loading"
+                        :pagination="paginationState"
+                        @table-change="onTableChange"
+                        @edit="handleEdit"
+                        @view="handleViewDetail"
+                        :show-type="'all'"
+                    />
+                </a-tab-pane>
+                
+                <a-tab-pane key="USER" tab="个人认证">
+                    <CertificationTable 
+                        :data="personalData" 
+                        :loading="loading"
+                        :pagination="paginationState"
+                        @table-change="onTableChange"
+                        @edit="handleEdit"
+                        @view="handleViewDetail"
+                        :show-type="'personal'"
+                    />
+                </a-tab-pane>
+                
+                <a-tab-pane key="COMPANY" tab="企业认证">
+                    <CertificationTable 
+                        :data="companyData" 
+                        :loading="loading"
+                        :pagination="paginationState"
+                        @table-change="onTableChange"
+                        @edit="handleEdit"
+                        @view="handleViewDetail"
+                        :show-type="'company'"
+                    />
+                </a-tab-pane>
+            </a-tabs>
+        </div>
 
-                        <template v-if="column.key === 'action'">
-                            <x-action-button @click="handleEdit(record)">
-                                <a-tooltip>
-                                    <template #title>用户审核</template>
-                                    <edit-outlined />
-                                </a-tooltip>
-                            </x-action-button>
-                        </template>
-                    </template>
-                </a-table>
-            </a-card>
-        </a-col>
-    </a-row>
-
-    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+        <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+    </div>
 </template>
 
 <script setup>
-import { h } from 'vue'
-import { message, Modal, Tag } from 'ant-design-vue'
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
+import { message, Tabs } from 'ant-design-vue'
 import apis from '@/apis'
-import { formatUtcDateTime } from '@/utils/util'
-import { config } from '@/config'
-import { statusTypeEnum } from '@/enums/system'
-import { usePagination, useForm } from '@/hooks'
+import { usePagination } from '@/hooks'
 import EditDialog from './components/EditDialog.vue'
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import CertificationTable from './components/CertificationTable.vue'
 import { useI18n } from 'vue-i18n'
 import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
 
+const ATabs = Tabs
+const ATabPane = Tabs.TabPane
+
 defineOptions({
-    name: 'systemRole',
+    name: 'certificationManagement',
 })
+
 const { t } = useI18n()
 
-// 状态颜色映射 - 基于你的配置
+// 状态颜色映射
 const statusColorMap = {
-    PENDING_CERTIFICATION: 'warning',
-    CERTIFICATION_DFFILED: 'processing',
-    CERTIFICATION_PASSED: 'success',
-    CERTIFICATION_FAILED: 'error',
+    PENDING_CERTIFICATION: 'orange',
+    CERTIFICATION_DFFILED: 'blue',
+    CERTIFICATION_PASSED: 'green',
+    CERTIFICATION_FAILED: 'red',
 }
 
-// 状态标签样式映射
-const statusStyleMap = {
-    PENDING_CERTIFICATION: {
-        bgColor: '#fff7e6',
-        borderColor: '#ffd591',
-        textColor: '#fa8c16'
-    },
-    CERTIFICATION_DFFILED: {
-        bgColor: '#e6f4ff',
-        borderColor: '#91caff',
-        textColor: '#1677ff'
-    },
-    CERTIFICATION_PASSED: {
-        bgColor: '#f6ffed',
-        borderColor: '#b7eb8f',
-        textColor: '#52c41a'
-    },
-    CERTIFICATION_FAILED: {
-        bgColor: '#fff2f0',
-        borderColor: '#ffccc7',
-        textColor: '#ff4d4f'
-    }
-}
+// 响应式数据
+const activeTab = ref('all')
+const allData = ref([])
+const personalData = ref([])
+const companyData = ref([])
+const editDialogRef = ref()
 
-const columns = [
-    {
-        title: '用户名',
-        dataIndex: 'userName',
-        width: 150,
-        ellipsis: true
-    },
-    {
-        title: '手机号',
-        dataIndex: 'phone',
-        key: 'phone',
-        width: 150,
-        ellipsis: true
-    },
-    {
-        title: '认证类型',
-        dataIndex: 'certificationType',
-        key: 'certificationType',
-        width: 120,
-        customRender: ({ text }) => authenticationTypeDict.getLabel(text) || text,
-    },
-    {
-        title: '认证状态',
-        dataIndex: 'certificationStatus',
-        key: 'certificationStatus',
-        width: 140,
-        filters: authenticationDict.options.map( item => ({
-            text: item.label,
-            value: item.value
-        })),
-        onFilter: (value, record) => record.certificationStatus === value,
-        customRender: ({ text }) => {
-            const style = statusStyleMap[text] || {}
-            return h(
-                'div',
-                {
-                    class: 'status-tag-wrapper',
-                    style: { display: 'inline-flex', alignItems: 'center' }
-                },
-                [
-                    // 状态圆点
-                    h('span', {
-                        class: 'status-dot',
-                        style: {
-                            width: '8px',
-                            height: '8px',
-                            borderRadius: '50%',
-                            backgroundColor: style.textColor || '#d9d9d9',
-                            marginRight: '6px',
-                            display: 'inline-block'
-                        }
-                    }),
-                    // 状态标签
-                    h(Tag, {
-                        color: getStatusColor(text),
-                        style: {
-                            margin: 0,
-                            fontSize: '12px',
-                            lineHeight: '20px',
-                            padding: '0 8px',
-                            backgroundColor: style.bgColor || '#fafafa',
-                            borderColor: style.borderColor || '#d9d9d9',
-                            color: style.textColor || '#00000073',
-                            borderRadius: '10px',
-                            fontWeight: 500
-                        }
-                    }, authenticationDict.getLabel(text) || text)
-                ]
-            )
-        }
-    },
-    {
-        title: '提交时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-        width: 180,
-        sorter: true,
-        customRender: ({ text }) => formatUtcDateTime(text)
-    },
-    {
-        title: t('button.action'),
-        key: 'action',
-        fixed: 'right',
-        width: 100,
-        align: 'center'
-    },
-]
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = usePagination()
 
 // 获取状态颜色
 const getStatusColor = (status) => {
     return statusColorMap[status] || 'default'
 }
 
-// 带样式的下拉选项
-const styledStatusOptions = computed(() => {
-    return authenticationDict.options.map(item => ({
-        ...item,
-        color: getStatusColor(item.value)
-    }))
-})
-
-const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
-    usePagination()
-const { resetForm } = useForm()
-const editDialogRef = ref()
-
+// 初始加载
 getPageList()
 
 /**
  * 获取用户列表
- * @returns {Promise<void>}
  */
 async function getPageList() {
     try {
@@ -263,25 +154,50 @@ async function getPageList() {
             .catch(() => {
                 throw new Error()
             })
+        
         hideLoading()
         if (data.length > 0) {
-            listData.value = data
+            allData.value = data
+            // 按认证类型分组
+            personalData.value = data.filter(item => item.certificationType === 'USER')
+            companyData.value = data.filter(item => item.certificationType === 'COMPANY')
             paginationState.total = total
+        } else {
+            allData.value = []
+            personalData.value = []
+            companyData.value = []
         }
     } catch (error) {
         hideLoading()
+        console.error('获取认证列表失败:', error)
     }
 }
 
+/**
+ * 标签页切换
+ */
+function handleTabChange(activeKey) {
+    activeTab.value = activeKey
+}
+
 /**
  * 编辑按钮点击
  */
-function handleEdit({ id, certificationStatus }) {
-    if (certificationStatus !== 'CERTIFICATION_DFFILED') {
+function handleEdit(record) {
+    if (record.certificationStatus !== 'CERTIFICATION_DFFILED') {
         message.warning('该用户认证状态不是已提交，不能操作')
         return
     }
-    editDialogRef.value?.handleEdit(id)
+    editDialogRef.value?.handleEdit(record.id)
+}
+
+/**
+ * 查看详情
+ */
+function handleViewDetail(record) {
+    // 可以弹出详情模态框，展示完整的认证信息
+    console.log('查看详情:', record)
+    // 这里可以调用详情对话框组件
 }
 
 /**
@@ -306,6 +222,7 @@ function handleResetSearch() {
  * 搜索
  */
 function handleSearch() {
+    resetPagination()
     getPageList()
 }
 
@@ -318,77 +235,62 @@ async function onOk() {
 </script>
 
 <style lang="less" scoped>
-.status-tag {
-    font-size: 12px;
-    line-height: 20px;
-    padding: 0 8px;
-    border-radius: 10px;
-    font-weight: 500;
-    transition: all 0.3s;
-
-    &:hover {
-        opacity: 0.8;
-        transform: translateY(-1px);
+.certification-management {
+    .table-container {
+        background: #fff;
+        padding: 16px 24px;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+                    0 1px 6px -1px rgba(0, 0, 0, 0.02),
+                    0 2px 4px 0 rgba(0, 0, 0, 0.02);
     }
 }
 
-.status-tag-wrapper {
-    .status-dot {
-        transition: all 0.3s;
+// 标签页样式
+:deep(.ant-tabs) {
+    .ant-tabs-nav {
+        margin: 0 0 16px 0;
+        
+        &::before {
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .ant-tabs-tab {
+            padding: 12px 0;
+            margin: 0 32px 0 0;
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.65);
+            
+            &:hover {
+                color: #1890ff;
+            }
+            
+            &.ant-tabs-tab-active .ant-tabs-tab-btn {
+                color: #1890ff;
+                font-weight: 500;
+            }
+        }
+        
+        .ant-tabs-ink-bar {
+            background: #1890ff;
+            height: 2px;
+        }
     }
-
-    // "已提交"状态的闪烁动画
-    &[data-status="CERTIFICATION_DFFILED"] .status-dot {
-        animation: blink 1.5s infinite;
-    }
-
-    // "待认证"状态的呼吸动画
-    &[data-status="PENDING_CERTIFICATION"] .status-dot {
-        animation: pulse 2s infinite;
-    }
-}
-
-@keyframes blink {
-
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.3;
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
+    
+    .ant-tabs-content {
+        min-height: 400px;
     }
 }
 
 .align-right {
     text-align: right;
-
+    
     .ant-space {
         justify-content: flex-end;
     }
 }
 
-// 表格样式优化
-:deep(.ant-table-thead > tr > th) {
-    font-weight: 600;
-    background-color: #fafafa;
-}
-
-:deep(.ant-table-tbody > tr:hover > td) {
-    background-color: #f6f8fa;
+.mb-8-2 {
+    margin-bottom: 8px;
 }
 </style>
\ No newline at end of file

From 6abccd93deef265d39581de385a301804f1faee6 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 11:21:00 +0800
Subject: [PATCH 3/6] 1

---
 src/views/certification/certificationList/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/certification/certificationList/index.vue b/src/views/certification/certificationList/index.vue
index 0766a1e..e2c2898 100644
--- a/src/views/certification/certificationList/index.vue
+++ b/src/views/certification/certificationList/index.vue
@@ -154,7 +154,6 @@ async function getPageList() {
             .catch(() => {
                 throw new Error()
             })
-        
         hideLoading()
         if (data.length > 0) {
             allData.value = data

From dd577b486884b6044aa5a6f3a7257cd9cc8d341a Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 13:58:39 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=BB=91=E5=90=8D?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/modules/userControl.js               |   3 +
 .../blackList/components/EditDialog.vue       | 119 ------------------
 src/views/userControl/blackList/index.vue     |  46 +++----
 3 files changed, 18 insertions(+), 150 deletions(-)
 delete mode 100644 src/views/userControl/blackList/components/EditDialog.vue

diff --git a/src/apis/modules/userControl.js b/src/apis/modules/userControl.js
index 543276c..0eabbef 100644
--- a/src/apis/modules/userControl.js
+++ b/src/apis/modules/userControl.js
@@ -6,6 +6,9 @@ export const getCustomersList = (params) => request.basic.get('/api/v1/customers
 // 黑名单列表
 export const getBlackCustomersList = (params) => request.basic.get('/api/v1/blackCustomers', params)
 
+// 移除黑名单
+export const deleteBlackCustomers = (id) => request.basic.delete(`/api/v1/blackCustomers/${id}`)
+
 
 //获取单个banner
 export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
diff --git a/src/views/userControl/blackList/components/EditDialog.vue b/src/views/userControl/blackList/components/EditDialog.vue
deleted file mode 100644
index 51f7a3a..0000000
--- a/src/views/userControl/blackList/components/EditDialog.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<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-form>
-    </a-modal>
-</template>
-
-<script setup>
-import { cloneDeep } from 'lodash-es'
-import apis from '@/apis'
-import { useForm, useModal } from '@/hooks'
-
-const emit = defineEmits(['ok'])
-
-const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
-const { formRef, formRules, formRecord, formData, resetForm } = useForm()
-
-formRules.value = {
-    title: { required: true, message: '请输入标题' },
-}
-
-/**
- * 新建
- */
-function handleCreate() {
-    showModal({
-        type: 'create',
-        title: '新建',
-    })
-}
-
-/**
- * 编辑
- */
-function handleEdit(record = {}) {
-    showModal({
-        type: 'edit',
-        title: '编辑',
-    })
-    formRecord.value = record
-    formData.value = cloneDeep(record)
-}
-
-/**
- * 确定
- */
-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()
-        })
-}
-
-/**
- * 取消
- */
-function handleCancel() {
-    hideModal()
-}
-
-/**
- * 关闭后
- */
-function onAfterClose() {
-    resetForm()
-}
-
-defineExpose({
-    handleCreate,
-    handleEdit,
-})
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/views/userControl/blackList/index.vue b/src/views/userControl/blackList/index.vue
index 617b381..432c3d4 100644
--- a/src/views/userControl/blackList/index.vue
+++ b/src/views/userControl/blackList/index.vue
@@ -40,26 +40,15 @@
                 <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">
+                        <template v-if="'status' === column.key">
                             <!--状态-->
-                            <a-tag v-if="record.banner_type == 1" color="processing">
-                                首页轮播图
-                            </a-tag>
-                            <!--状态-->
-                            <a-tag v-else color="processing">
-                                营销活动图
-                            </a-tag>
-                        </template>
-
-                        <template v-if="'is_recommend' === column.key">
-                            <!--状态-->
-                            <a-tag v-if="record.banner_type == true" color="processing">
-                                启用
-                            </a-tag>
-                            <!--状态-->
-                            <a-tag v-else color="processing">
+                            <a-tag v-if="record.status == 'DISABLED'" color="red">
                                 禁用
                             </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                启用
+                            </a-tag>
                         </template>
 
 
@@ -68,15 +57,9 @@
                         </template>
 
                         <template v-if="'action' === column.key">
-                            <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 @click="handleRemove(record)">
                                 <a-tooltip>
-                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <template #title> 移出黑名单</template>
                                     <delete-outlined style="color: #ff4d4f" />
                                 </a-tooltip>
                             </x-action-button>
@@ -86,8 +69,6 @@
             </a-card>
         </a-col>
     </a-row>
-
-    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
 </template>
 
 <script setup>
@@ -98,7 +79,7 @@ import { formatUtcDateTime } from '@/utils/util'
 import { config } from '@/config'
 import { statusTypeEnum } from '@/enums/system'
 import { usePagination, useForm } from '@/hooks'
-import EditDialog from './components/EditDialog.vue'
+
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
 import { disabledDict, authenticationTypeDict } from '@/enums/dict'
@@ -133,7 +114,7 @@ const columns = [
 const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
     usePagination()
 const { resetForm } = useForm()
-const editDialogRef = ref()
+
 
 getPageList()
 
@@ -158,6 +139,9 @@ async function getPageList() {
         if (data.length > 0) {
             listData.value = data
             paginationState.total = total
+        }else{
+            listData.value = []
+            paginationState.total = 0 
         }
     } catch (error) {
         hideLoading()
@@ -169,14 +153,14 @@ async function getPageList() {
  */
 function handleRemove({ id }) {
     Modal.confirm({
-        title: t('pages.system.role.delTip'),
-        content: t('button.confirm'),
+        title: '提示',
+        content: '确定移出黑名单吗？',
         okText: t('button.confirm'),
         onOk: () => {
             return new Promise((resolve, reject) => {
                 ; (async () => {
                     try {
-                        const { success } = await apis.role.delRole(id).catch(() => {
+                        const { success } = await apis.userControl.deleteBlackCustomers(id).catch(() => {
                             throw new Error()
                         })
                         if (config('http.code.success') === success) {

From efb064280b2614d5c4064ed5f8ab7f604ce431d6 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 17:58:02 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=C2=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/modules/resource.js                  |  30 +
 src/apis/modules/userControl.js               |   6 +-
 src/locales/lang/zh-CN/menu.js                |   4 +-
 src/router/routes/resource.js                 |  25 +-
 src/views/resource/resourceAdmin/index.vue    | 560 +++++++-----
 .../resourceCard/components/EditDialog.vue    | 119 +++
 src/views/resource/resourceCard/index.vue     | 202 +++++
 src/views/resource/resourceInstance/index.vue | 815 ++++++++++++++++++
 .../userList/components/EditDialog.vue        |  42 +-
 src/views/userControl/userList/index.vue      |  30 +-
 10 files changed, 1585 insertions(+), 248 deletions(-)
 create mode 100644 src/apis/modules/resource.js
 create mode 100644 src/views/resource/resourceCard/components/EditDialog.vue
 create mode 100644 src/views/resource/resourceCard/index.vue
 create mode 100644 src/views/resource/resourceInstance/index.vue

diff --git a/src/apis/modules/resource.js b/src/apis/modules/resource.js
new file mode 100644
index 0000000..c274aa2
--- /dev/null
+++ b/src/apis/modules/resource.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+//获取计算卡列表
+export const getCardsList = (params) => request.basic.get('/api/v1/autoDl-dl-cards', params)
+
+//获取主机资源列表
+export const getHostsList = (params) => request.basic.get('/api/v1/autoDl-dl-hosts', params)
+
+// 获取实例卡列表
+export const getInstancesList = (params) => request.basic.get('/api/v1/auto-dl-instances', params)
+
+// 黑名单列表
+export const getBlackCustomersList = (params) => request.basic.get('/api/v1/blackCustomers', params)
+
+// 移除黑名单
+export const deleteBlackCustomers = (id) => request.basic.delete(`/api/v1/blackCustomers/${id}`)
+
+
+// 拉黑用户
+export const updateCustomers = (id, data) => request.basic.put(`/api/v1/customers/${id}`, data)
+
+
+//获取单个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 0eabbef..2ad2fe4 100644
--- a/src/apis/modules/userControl.js
+++ b/src/apis/modules/userControl.js
@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-//获取banner列表
+//获取用户列表
 export const getCustomersList = (params) => request.basic.get('/api/v1/customers', params)
 
 // 黑名单列表
@@ -10,6 +10,10 @@ 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)
+
+
 //获取单个banner
 export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
 //创建banner
diff --git a/src/locales/lang/zh-CN/menu.js b/src/locales/lang/zh-CN/menu.js
index 317b5d1..24ac4a0 100644
--- a/src/locales/lang/zh-CN/menu.js
+++ b/src/locales/lang/zh-CN/menu.js
@@ -36,7 +36,9 @@ export default {
     'account.trigger': '触发报错',
     'account.logout': '退出登录',
     resource: 'GPU资源管理',
-    resourceAdmin: '资源池管理',
+    resourceAdmin: '主机资源列表',
+    resourceCard: '计算卡列表',
+    resourceInstance: '实例卡列表',
     resourceStatistics: '资源池统计信息',
     userControl: '用户管理',
     userList: '用户列表',
diff --git a/src/router/routes/resource.js b/src/router/routes/resource.js
index 73b0791..92f6e16 100644
--- a/src/router/routes/resource.js
+++ b/src/router/routes/resource.js
@@ -18,12 +18,35 @@ export default [
                 name: 'resourceAdmin',
                 component: 'resource/resourceAdmin/index.vue',
                 meta: {
-                    title: '资源池管理 ',
+                    title: '主机资源列表 ',
                     isMenu: true,
                     keepAlive: true,
                     permission: '*',
                 },
             },
+            {
+                path: 'resourceCard',
+                name: 'resourceCard',
+                component: 'resource/resourceCard/index.vue',
+                meta: {
+                    title: '计算卡列表 ',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'resourceInstance',
+                name: 'resourceInstance',
+                component: 'resource/resourceInstance/index.vue',
+                meta: {
+                    title: '实例卡列表 ',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+
             {
                 path: 'resourceStatistics',
                 name: 'resourceStatistics',
diff --git a/src/views/resource/resourceAdmin/index.vue b/src/views/resource/resourceAdmin/index.vue
index 0687a05..0c0aa0c 100644
--- a/src/views/resource/resourceAdmin/index.vue
+++ b/src/views/resource/resourceAdmin/index.vue
@@ -1,249 +1,356 @@
 <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 name="title">
-                            <template #label>
-                                规则名称
-                                <a-tooltip title="规则名称是唯一的 key">
-                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
-                                </a-tooltip>
-                            </template>
-                            <a-input v-model:value="searchFormData.title"></a-input>
+                        <a-form-item label="主机名称/ID" name="machine_name">
+                            <a-input placeholder="请输入主机名称/ID" v-model:value="searchFormData.machine_name"></a-input>
                         </a-form-item>
                     </a-col>
                     <a-col v-bind="colSpan">
-                        <a-form-item label="描述">
-                            <a-input></a-input>
+                        <a-form-item label="内网IP" name="internal_ip">
+                            <a-input placeholder="请输入内网IP" v-model:value="searchFormData.internal_ip"></a-input>
                         </a-form-item>
                     </a-col>
-                    <template v-if="searchBarExpand">
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="服务调用次数">
-                                <a-input></a-input>
-                            </a-form-item>
-                        </a-col>
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="状态">
-                                <a-select></a-select>
-                            </a-form-item>
-                        </a-col>
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="上次调度时间">
-                                <a-date-picker placeholder=""></a-date-picker>
-                            </a-form-item>
-                        </a-col>
-                    </template>
-                    <a-col
-                        class="align-right"
-                        v-bind="colSpan">
+                    <a-col class="align-right" v-bind="colSpan">
                         <a-space>
-                            <a-button>重置</a-button>
-                            <a-button
-                                ghost
-                                type="primary"
-                                @click="handleSearch">
+                            <a-button @click="handleResetSearch">重置</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
                                 搜索
                             </a-button>
-                            <a @click="() => (searchBarExpand = !searchBarExpand)">
-                                展开
-                                <template v-if="searchBarExpand">
-                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
-                                </template>
-                                <template v-else>
-                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
-                                </template>
-                            </a>
                         </a-space>
                     </a-col>
                 </a-row>
             </a-form>
         </template>
     </x-search-bar>
-    <a-card>
-        <x-action-bar class="mb-8-2">
-            <a-button
-                type="primary"
-                @click="$refs.editDialogRef.handleCreate()">
-                <template #icon>
-                    <plus-outlined></plus-outlined>
-                </template>
-                新建
-            </a-button>
-            <template #extra>
-                <a-space>
-                    <a-tooltip title="刷新">
-                        <a-button
-                            type="text"
-                            @click="handleSearch">
-                            <template #icon>
-                                <reload-outlined></reload-outlined>
-                            </template>
-                        </a-button>
-                    </a-tooltip>
-                    <a-dropdown>
-                        <a-tooltip title="密度">
-                            <a-button type="text">
-                                <template #icon>
-                                    <column-height-outlined></column-height-outlined>
-                                </template>
-                            </a-button>
-                        </a-tooltip>
-                        <template #overlay>
-                            <a-menu
-                                :selectedKeys="[size]"
-                                @click="handleSize">
-                                <a-menu-item key="default">默认</a-menu-item>
-                                <a-menu-item key="middle">中等</a-menu-item>
-                                <a-menu-item key="small">紧凑</a-menu-item>
-                            </a-menu>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <a-table 
+                    :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1400 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <!-- 健康状态 -->
+                        <template v-if="'health_status' === column.key">
+                            <a-tag :color="getHealthStatusColor(record.health_status)">
+                                {{ getHealthStatusText(record.health_status) }}
+                            </a-tag>
                         </template>
-                    </a-dropdown>
-                    <a-tooltip title="设置">
-                        <a-button type="text">
-                            <template #icon>
-                                <setting-outlined></setting-outlined>
-                            </template>
-                        </a-button>
-                    </a-tooltip>
-                </a-space>
-            </template>
-        </x-action-bar>
-        <a-table
-            :columns="columns"
-            :data-source="listData"
-            :loading="loading"
-            :pagination="paginationState"
-            :size="size"
-            row-key="id"
-            @change="onTableChange">
-            <template #bodyCell="{ column, record }">
-                <template v-if="'action' === column.key">
-                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
-                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
-                    <x-action-button>
-                        <a-dropdown :trigger="['click']">
-                            <more-outlined></more-outlined>
-                            <template #overlay>
-                                <a-menu>
-                                    <a-menu-item>菜单1</a-menu-item>
-                                    <a-menu-item>菜单2</a-menu-item>
-                                    <a-menu-item>菜单3</a-menu-item>
-                                </a-menu>
-                            </template>
-                        </a-dropdown>
-                    </x-action-button>
-                </template>
-            </template>
-        </a-table>
-    </a-card>
 
-    <edit-dialog
-        ref="editDialogRef"
-        @ok="onOk" />
+                        <!-- 状态 -->
+                        <template v-if="'online_status' === column.key">
+                            <a-tag :color="getOnlineStatusColor(record.online_status)">
+                                {{ getOnlineStatusText(record.online_status) }}
+                            </a-tag>
+                        </template>
+
+                        <!-- 主机配置 -->
+                        <template v-if="'cpu_config' === column.key">
+                            <div>{{ record.cpu_num }}核</div>
+                            <div>{{ formatMemory(record.memory) }}</div>
+                        </template>
+
+                        <!-- 磁盘空间 -->
+                        <template v-if="'disk_space' === column.key">
+                            <div v-if="record.disks && record.disks.length > 0">
+                                <div v-for="disk in record.disks" :key="disk.disk_path">
+                                    {{ disk.disk_path }}: {{ formatDiskSpace(disk.idle) }}/{{ formatDiskSpace(disk.total) }}
+                                </div>
+                            </div>
+                            <div v-else>无磁盘信息</div>
+                        </template>
+
+                        <!-- 硬件平台 -->
+                        <template v-if="'hardware_platform' === column.key">
+                            <div>{{ record.chip_corp?.toUpperCase() || 'NVIDIA' }}</div>
+                            <div>{{ record.cpu_arch?.toUpperCase() || 'x86' }}</div>
+                        </template>
+
+                        <!-- 算力型号 -->
+                        <template v-if="'gpu_info' === column.key">
+                            <div>{{ record.gpu_name }}</div>
+                            <div>driver={{ record.driver_version }}</div>
+                            <div>cuda={{ record.cuda_version }}</div>
+                        </template>
+
+                        <!-- 空闲算力 -->
+                        <template v-if="'gpu_idle' === column.key">
+                            <div>{{ record.gpu?.idle || 0 }}/{{ record.gpu?.total || 0 }}</div>
+                        </template>
+
+                        <!-- CPU内存分配 -->
+                        <template v-if="'cpu_mem_per_gpu' === column.key">
+                            <div>{{ record.cpu_per_gpu }}核/GPU</div>
+                            <div>{{ formatMemory(record.mem_per_gpu) }}/GPU</div>
+                        </template>
+
+                        <!-- 实例数量 -->
+                        <template v-if="'instance_count' === column.key">
+                            <div>{{ record.binding_instance_num || 0 }}</div>
+                            <div v-if="record.machine_instance_limit > 0">
+                                限额: {{ record.machine_instance_limit }}
+                            </div>
+                        </template>
+
+                        <!-- 录入时间 -->
+                        <template v-if="'created_at' === column.key">
+                            {{ formatDateTime(record.created_at) }}
+                        </template>
+
+                        <!-- 可见性 -->
+                        <template v-if="'visibility' === column.key">
+                            <a-tag :color="record.user_visible_limit ? 'red' : 'green'">
+                                {{ record.user_visible_limit ? '受限' : '无限制' }}
+                            </a-tag>
+                        </template>
+
+                        <!-- 操作 -->
+                        <template v-if="'action' === column.key">
+                            <a-space>
+                                <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>
+                            </a-space>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
 </template>
 
 <script setup>
 import { message, Modal } from 'ant-design-vue'
 import { ref } from 'vue'
-import {
-    ColumnHeightOutlined,
-    DownOutlined,
-    QuestionCircleOutlined,
-    ReloadOutlined,
-    SettingOutlined,
-    UpOutlined,
-    PlusOutlined,
-    MoreOutlined,
-} from '@ant-design/icons-vue'
 import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
 import { config } from '@/config'
-import { usePagination } from '@/hooks'
+import { usePagination, useForm } from '@/hooks'
 import EditDialog from './components/EditDialog.vue'
+import { useI18n } from 'vue-i18n'
 
 defineOptions({
-    name: 'listTable',
+    name: 'hostManagement',
 })
 
-const columns = [
-    { title: '区域ID', dataIndex: 'hostId' },
-    { title: '区域名称', dataIndex: 'hostName' },
-    { title: '区域编码', dataIndex: 'regionId' },
-    { title: '数据中心地址', dataIndex: 'cpu' },
-    { title: '状态', dataIndex: 'memory' },
-    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
-    { title: '可用计算卡总数', dataIndex: 'ip' },
-    { title: '操作', key: 'action', width: 160 },
-]
-// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
-//     usePagination()
-const listData = ref([])
-const editDialogRef = ref()
-const searchBarExpand = ref(false)
-const size = ref('default')
+const { t } = useI18n()
 
-// getPageList()
+// 表格列定义
+const columns = [
+    { 
+        title: '主机名称/ID', 
+        dataIndex: 'machine_name', 
+        key: 'machine_name',
+        width: 140,
+        fixed: 'left'
+    },
+    { 
+        title: '内网IP', 
+        dataIndex: 'internal_ip', 
+        key: 'internal_ip',
+        width: 110
+    },
+    { 
+        title: '健康状态', 
+        key: 'health_status',
+        width: 100
+    },
+    { 
+        title: '状态', 
+        key: 'online_status',
+        width: 100
+    },
+    { 
+        title: '主机配置', 
+        key: 'cpu_config',
+        width: 120
+    },
+    { 
+        title: '磁盘空间(GB)', 
+        key: 'disk_space',
+        width: 150
+    },
+    { 
+        title: '硬件平台', 
+        key: 'hardware_platform',
+        width: 120
+    },
+    { 
+        title: '算力型号', 
+        key: 'gpu_info',
+        width: 200
+    },
+    { 
+        title: '空闲算力', 
+        key: 'gpu_idle',
+        width: 100
+    },
+    { 
+        title: 'CPU内存分配', 
+        key: 'cpu_mem_per_gpu',
+        width: 120
+    },
+    { 
+        title: '实例数量', 
+        key: 'instance_count',
+        width: 100
+    },
+    { 
+        title: '录入时间', 
+        key: 'created_at',
+        width: 160
+    },
+    { 
+        title: '可见性', 
+        key: 'visibility',
+        width: 100
+    },
+    { 
+        title: '操作', 
+        key: 'action', 
+        fixed: 'right', 
+        width: 180 
+    },
+]
+
+// 健康状态映射
+const healthStatusMap = {
+    0: { text: '正常', color: 'green' },
+    1: { text: '警告', color: 'orange' },
+    2: { text: '异常', color: 'red' },
+    // 可根据实际情况添加更多状态
+}
+
+// 在线状态映射（根据图片中的"已上架"状态）
+const onlineStatusMap = {
+    0: { text: '未上架', color: 'default' },
+    1: { text: '上架中', color: 'processing' },
+    2: { text: '已上架', color: 'green' },
+    3: { text: '下架中', color: 'orange' },
+    4: { text: '已下架', color: 'red' },
+}
+
+// 工具函数
+function getHealthStatusText(status) {
+    return healthStatusMap[status]?.text || '未知'
+}
+
+function getHealthStatusColor(status) {
+    return healthStatusMap[status]?.color || 'default'
+}
+
+function getOnlineStatusText(status) {
+    return onlineStatusMap[status]?.text || '未知'
+}
+
+function getOnlineStatusColor(status) {
+    return onlineStatusMap[status]?.color || 'default'
+}
+
+// 格式化内存（字节转GB）
+function formatMemory(bytes) {
+    if (!bytes) return '0G'
+    const gb = bytes / (1024 * 1024 * 1024)
+    return `${Math.round(gb)}G`
+}
+
+// 格式化磁盘空间（字节转GB）
+function formatDiskSpace(bytes) {
+    if (!bytes) return '0GB'
+    const gb = bytes / (1024 * 1024 * 1024)
+    return `${Math.round(gb)}GB`
+}
+
+// 格式化日期时间
+function formatDateTime(dateTimeStr) {
+    if (!dateTimeStr) return ''
+    try {
+        const date = new Date(dateTimeStr)
+        return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        }).replace(/\//g, '-')
+    } catch (e) {
+        return dateTimeStr
+    }
+}
+
+// 使用分页和数据获取钩子
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
 
 /**
- * 获取分页列表
+ * 获取主机列表
  */
 async function getPageList() {
     try {
-        // showLoading()
-        // const { pageSize, current } = paginationState
-        // const { code, data } = await apis.common
-        //     .getPageList({
-        //         pageSize,
-        //         current: current,
-        //     })
-        //     .catch(() => {
-        //         throw new Error()
-        //     })
-        // hideLoading()
-        // if (config('http.code.success') === code) {
-        //     const { records, pagination } = data
-        //     listData.value = records
-        //     paginationState.total = pagination.total
-        // }
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.resource
+            .getHostsList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
     } catch (error) {
-        // hideLoading()
+        hideLoading()
+        message.error('获取主机列表失败')
     }
 }
 
 /**
- * 搜索
+ * 移除/删除主机
  */
-function handleSearch() {
-    // resetPagination()
-    // getPageList()
-}
-
-/**
- * 删除
- */
-function handleDelete({ id }) {
+function handleRemove({ id, machine_name }) {
     Modal.confirm({
-        title: '删除提示',
-        content: '确认删除？',
+        title: '确认删除',
+        content: `确定要删除主机 ${machine_name} 吗？此操作不可恢复。`,
+        okText: '确认删除',
+        cancelText: '取消',
+        okType: 'danger',
         onOk: () => {
             return new Promise((resolve, reject) => {
-                ;(async () => {
+                ; (async () => {
                     try {
-                        const { code } = await apis.common.del(id).catch(() => {
+                        const { success } = await apis.resource.deleteHost(id).catch(() => {
                             throw new Error()
                         })
-                        if (config('http.code.success') === code) {
+                        if (config('http.code.success') === success) {
                             resolve()
                             message.success('删除成功')
                             await getPageList()
                         }
                     } catch (error) {
                         reject()
+                        message.error('删除失败')
                     }
                 })()
             })
@@ -252,30 +359,77 @@ function handleDelete({ id }) {
 }
 
 /**
- * 密度
- * @param {string} key
+ * 下架主机
  */
-function handleSize({ key }) {
-    size.value = key
+function handleDownShelf({ id, machine_name }) {
+    Modal.confirm({
+        title: '确认下架',
+        content: `确定要下架主机 ${machine_name} 吗？`,
+        okText: '确认下架',
+        cancelText: '取消',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.resource.downShelfHost(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success('下架成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                        message.error('下架失败')
+                    }
+                })()
+            })
+        },
+    })
 }
 
 /**
- * 表格发生改变
- * @param current
- * @param pageSize
+ * 分页变化
  */
 function onTableChange({ current, pageSize }) {
-    // paginationState.current = current
-    // paginationState.pageSize = pageSize
-    // getPageList()
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
 }
 
 /**
- * 完成
+ * 重置搜索
  */
-function onOk() {
-    // getPageList()
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.align-right {
+    text-align: right;
+}
+
+.mb-8-2 {
+    margin-bottom: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/resource/resourceCard/components/EditDialog.vue b/src/views/resource/resourceCard/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/resource/resourceCard/components/EditDialog.vue
@@ -0,0 +1,119 @@
+<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-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+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()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/resourceCard/index.vue b/src/views/resource/resourceCard/index.vue
new file mode 100644
index 0000000..0bbe4ea
--- /dev/null
+++ b/src/views/resource/resourceCard/index.vue
@@ -0,0 +1,202 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form  :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <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="'reserved' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.reserved == true" color="red">
+                                是
+                            </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="'action' === column.key">
+                            <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 @click="handleRemove(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>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: '主机ID', dataIndex: 'machine_id', width: 120 },
+    { title: 'GPU名称', dataIndex: 'gpu_name', width: 120 },
+    { title: 'GPU UUID', dataIndex: 'gpu_uuid', key: 'gpu_uuid', width: 240 },
+    { title: '实例ID', dataIndex: 'instance_uuid', width: 120 },
+    { title: '是否被占用', dataIndex: 'reserved', key: 'reserved', width: 120 },
+    { title: '开始占用时间', dataIndex: 'reserve_time', key: 'reserve_time', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.resource
+            .getCardsList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+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 getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/resourceInstance/index.vue b/src/views/resource/resourceInstance/index.vue
new file mode 100644
index 0000000..aa4b669
--- /dev/null
+++ b/src/views/resource/resourceInstance/index.vue
@@ -0,0 +1,815 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="用户ID" name="user_id">
+                            <a-input placeholder="请输入用户ID" v-model:value="searchFormData.user_id"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="实例ID" name="instance_id">
+                            <a-input placeholder="请输入实例ID" v-model:value="searchFormData.instance_id"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">重置</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                搜索
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <!-- <x-action-bar class="mb-8-2">
+                    <a-button type="primary" @click="handleExportInstances">
+                        <template #icon>
+                            <ExportOutlined />
+                        </template>
+                        导出实例列表
+                    </a-button>
+                </x-action-bar> -->
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1600 }" rowKey="id" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <!-- 用户名/用户ID -->
+                        <template v-if="'user_info' === column.key">
+                            <div class="user-info-cell">
+                                <div>自己</div>
+                                <div class="text-secondary">{{ record.id?.substring(0, 12) || '--' }}</div>
+                            </div>
+                        </template>
+
+                        <!-- 实例ID/名称 -->
+                        <template v-if="'instance_info' === column.key">
+                            <div class="instance-info-cell">
+                                <div>{{ record.machine_name || '--' }}</div>
+                                <div class="text-secondary">{{ record.instance_uuid || '--' }}</div>
+                            </div>
+                        </template>
+
+                        <!-- 规格详情 -->
+                        <template v-if="'spec_detail' === column.key">
+                            <div class="spec-detail-cell">
+                                <div>{{ formatGPUSpec(record) }}</div>
+                                <a-button type="link" size="small" @click="handleViewSpecDetail(record)">
+                                    查看详情
+                                </a-button>
+                            </div>
+                        </template>
+
+                        <!-- 状态 -->
+                        <template v-if="'status' === column.key">
+                            <a-tag :color="getStatusColor(record.status)">
+                                {{ getStatusText(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <!-- 磁盘使用 -->
+                        <template v-if="'disk_usage' === column.key">
+                            <div class="disk-usage-cell">
+                                <div>系统盘 {{ formatDiskUsage(record) }}</div>
+                                <div>数据盘 {{ formatDiskUsage(record) }}</div>
+                            </div>
+                        </template>
+
+                        <!-- 健康状态 -->
+                        <template v-if="'health_status' === column.key">
+                            <a-tag :color="getDiskHealthStatusColor(record.disk_health_status)">
+                                {{ getDiskHealthStatusText(record.disk_health_status) }}
+                            </a-tag>
+                        </template>
+
+                        <!-- 创建时间 -->
+                        <template v-if="'created_at' === column.key">
+                            {{ formatDateTime(record.created_at) }}
+                        </template>
+
+                        <!-- SSH登录 -->
+                        <template v-if="'ssh_login' === column.key">
+                            <div class="ssh-login-cell">
+                                <a-space direction="vertical" size="small">
+                                    <a-button type="link" size="small" @click="handleOpenJupyterLab(record)">
+                                        JupyterLab
+                                    </a-button>
+                                    <a-button type="link" size="small" @click="handleOpenAutoPanel(record)">
+                                        AutoPanel
+                                    </a-button>
+                                    <a-button type="link" size="small" @click="handleOpenInstanceMonitor(record)">
+                                        实例监控
+                                    </a-button>
+                                </a-space>
+                            </div>
+                        </template>
+
+                        <!-- 快捷工具 -->
+                        <template v-if="'quick_tools' === column.key">
+                            <div class="quick-tools-cell">
+                                <a-space direction="vertical" size="small">
+                                    <a-button type="link" size="small" danger @click="handleShutdownInstance(record)"
+                                        :disabled="record.status !== 'running'">
+                                        关机
+                                    </a-button>
+                                </a-space>
+                            </div>
+                        </template>
+
+                        <!-- 操作 -->
+                        <template v-if="'action' === column.key">
+                            <div class="action-cell">
+                                <a-space>
+                                    <a-button type="link" size="small" @click="handleStartInstance(record)"
+                                        :disabled="record.status === 'running'">
+                                        启动
+                                    </a-button>
+                                    <a-button type="link" size="small" @click="handleRestartInstance(record)"
+                                        :disabled="record.status !== 'running'">
+                                        重启
+                                    </a-button>
+                                    <a-button type="link" size="small" danger @click="handleStopInstance(record)"
+                                        :disabled="record.status !== 'running'">
+                                        停止
+                                    </a-button>
+                                    <a-dropdown>
+                                        <template #overlay>
+                                            <a-menu>
+                                                <a-menu-item @click="handleViewLogs(record)">
+                                                    查看日志
+                                                </a-menu-item>
+                                                <a-menu-item @click="handleTerminal(record)">
+                                                    终端连接
+                                                </a-menu-item>
+                                                <a-menu-item danger @click="handleDeleteInstance(record)">
+                                                    删除实例
+                                                </a-menu-item>
+                                            </a-menu>
+                                        </template>
+                                        <a-button type="link" size="small">
+                                            更多
+                                            <DownOutlined />
+                                        </a-button>
+                                    </a-dropdown>
+                                </a-space>
+                            </div>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+    <a-modal v-model:visible="specModalVisible" title="实例规格详情" width="700px" :footer="null"
+        @cancel="specModalVisible = false">
+        <div v-html="specDetailContent"></div>
+    </a-modal>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref, computed } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { usePagination, useForm } from '@/hooks'
+import { ExportOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+defineOptions({
+    name: 'instanceManagement',
+})
+
+// 表格列定义
+const columns = [
+    {
+        title: '用户名/用户ID',
+        key: 'user_info',
+        width: 150,
+        fixed: 'left'
+    },
+    {
+        title: '实例ID/名称',
+        key: 'instance_info',
+        width: 180
+    },
+    {
+        title: '规格详情',
+        key: 'spec_detail',
+        width: 180
+    },
+    {
+        title: '状态',
+        key: 'status',
+        width: 100
+    },
+    {
+        title: '磁盘使用',
+        key: 'disk_usage',
+        width: 140
+    },
+    {
+        title: '健康状态',
+        key: 'health_status',
+        width: 100
+    },
+    {
+        title: '创建时间',
+        key: 'created_at',
+        width: 160
+    },
+    {
+        title: 'SSH登录',
+        key: 'ssh_login',
+        width: 140
+    },
+    {
+        title: '快捷工具',
+        key: 'quick_tools',
+        width: 100
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 240
+    },
+]
+
+// 状态映射
+const statusMap = {
+    'running': { text: '运行中', color: 'green' },
+    'stopped': { text: '已停止', color: 'default' },
+    'starting': { text: '启动中', color: 'processing' },
+    'stopping': { text: '停止中', color: 'orange' },
+    'error': { text: '异常', color: 'red' },
+    'creating': { text: '创建中', color: 'processing' },
+    'deleting': { text: '删除中', color: 'orange' },
+    'paused': { text: '已暂停', color: 'warning' },
+    'exited': { text: '已退出', color: 'default' },
+}
+
+// 磁盘健康状态映射
+const diskHealthStatusMap = {
+    'normal': { text: '正常', color: 'green' },
+    'warning': { text: '警告', color: 'orange' },
+    'error': { text: '异常', color: 'red' },
+    'abnormal': { text: '异常', color: 'red' },
+}
+
+// 使用分页和数据获取钩子
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+
+// 弹窗相关
+const specModalVisible = ref(false)
+const currentRecord = ref(null)
+
+// 计算规格详情内容
+const specDetailContent = computed(() => {
+    if (!currentRecord.value) return ''
+    return getSpecDetailContent(currentRecord.value)
+})
+
+// 工具函数
+function getStatusText(status) {
+    return statusMap[status]?.text || status || '未知'
+}
+
+function getStatusColor(status) {
+    return statusMap[status]?.color || 'default'
+}
+
+function getDiskHealthStatusText(status) {
+    return diskHealthStatusMap[status]?.text || status || '正常'
+}
+
+function getDiskHealthStatusColor(status) {
+    return diskHealthStatusMap[status]?.color || 'green'
+}
+
+// 格式化日期时间
+function formatDateTime(dateTimeStr) {
+    if (!dateTimeStr) return ''
+    try {
+        const date = new Date(dateTimeStr)
+        return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        }).replace(/\//g, '-')
+    } catch (e) {
+        return dateTimeStr
+    }
+}
+
+// 格式化资源大小（字节转GB）
+function formatBytesToGB(bytes) {
+    if (!bytes && bytes !== 0) return '0GB'
+    const gb = bytes / (1024 * 1024 * 1024)
+    return `${gb.toFixed(2)}GB`
+}
+
+// 格式化百分比
+function formatPercent(decimal) {
+    if (decimal === undefined || decimal === null) return '0.00%'
+    return `${(decimal * 100).toFixed(2)}%`
+}
+
+// 规格详情相关函数
+function formatGPUSpec(record) {
+    if (!record.gpu_name) return '--'
+
+    const gpuName = record.gpu_name
+    const gpuAmount = record.req_gpu_amount || 1
+    return `${gpuName} * ${gpuAmount}`
+}
+
+// 磁盘使用格式化
+function formatDiskUsage(record) {
+    const usedRate = record.root_fs_used_rate || 0
+    return `${formatPercent(usedRate)}`
+}
+
+// 获取规格详情内容HTML
+function getSpecDetailContent(record) {
+    const cpuUsage = record.cpu_usage_percent || 0
+    const memUsage = record.mem_usage_percent || 0
+    const memUsageBytes = record.mem_usage || 0
+    const memLimitBytes = record.mem_limit_in_byte || record.mem_limit || 0
+
+    // 计算CPU核心数和内存
+    const cpuCores = record.cpu_limit || 0
+    const memoryGB = (memLimitBytes / (1024 * 1024 * 1024)).toFixed(1)
+
+    return `
+        <div style="margin-top: 16px; line-height: 1.8;">
+            
+            <div style="background: #f6f8fa; padding: 12px; border-radius: 4px; margin-bottom: 16px;">
+                <h5 style="margin: 0 0 8px 0; color: #666;">GPU配置</h5>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
+                    <div><strong>GPU型号：</strong>${record.gpu_name || '--'}</div>
+                    <div><strong>GPU数量：</strong>${record.req_gpu_amount || 1}</div>
+                    ${record.gpu_all_num ? `<div><strong>主机总GPU：</strong>${record.gpu_all_num}</div>` : ''}
+                    ${record.gpu_idle_num !== undefined ? `<div><strong>主机空闲GPU：</strong>${record.gpu_idle_num}</div>` : ''}
+                </div>
+            </div>
+            
+            <div style="background: #f6f8fa; padding: 12px; border-radius: 4px; margin-bottom: 16px;">
+                <h5 style="margin: 0 0 8px 0; color: #666;">CPU配置</h5>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
+                    <div><strong>CPU核心数：</strong>${cpuCores}核</div>
+                    <div><strong>CPU使用率：</strong>${formatPercent(cpuUsage)}</div>
+                </div>
+            </div>
+            
+            <div style="background: #f6f8fa; padding: 12px; border-radius: 4px; margin-bottom: 16px;">
+                <h5 style="margin: 0 0 8px 0; color: #666;">内存配置</h5>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
+                    <div><strong>内存大小：</strong>${formatBytesToGB(memLimitBytes)}</div>
+                    <div><strong>内存使用率：</strong>${formatPercent(memUsage)}</div>
+                    <div><strong>已用内存：</strong>${formatBytesToGB(memUsageBytes)}</div>
+                    <div><strong>剩余内存：</strong>${formatBytesToGB(memLimitBytes - memUsageBytes)}</div>
+                </div>
+            </div>
+            
+            <div style="background: #f6f8fa; padding: 12px; border-radius: 4px; margin-bottom: 16px;">
+                <h5 style="margin: 0 0 8px 0; color: #666;">磁盘配置</h5>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
+                    <div><strong>系统盘大小：</strong>${formatBytesToGB(record.root_fs_total_size)}</div>
+                    <div><strong>系统盘使用率：</strong>${formatPercent(record.root_fs_used_rate)}</div>
+                    <div><strong>系统盘已用：</strong>${formatBytesToGB(record.root_fs_used_size)}</div>
+                    <div><strong>系统盘剩余：</strong>${formatBytesToGB(record.root_fs_total_size - record.root_fs_used_size)}</div>
+                    ${record.usage_info?.data_disk_total_size ? `
+                        <div><strong>数据盘大小：</strong>${formatBytesToGB(record.usage_info.data_disk_total_size)}</div>
+                        <div><strong>数据盘使用率：</strong>${formatPercent(record.root_fs_used_rate)}</div>
+                        <div><strong>数据盘已用：</strong>${formatBytesToGB(record.usage_info.data_disk_used_size)}</div>
+                        <div><strong>数据盘剩余：</strong>${formatBytesToGB(record.usage_info.data_disk_total_size - record.usage_info.data_disk_used_size)}</div>
+                    ` : ''}
+                </div>
+            </div>
+            
+            <div style="background: #f6f8fa; padding: 12px; border-radius: 4px;">
+                <h5 style="margin: 0 0 8px 0; color: #666;">其他信息</h5>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
+                    <div><strong>镜像：</strong>${record.image || '--'}</div>
+                    <div><strong>启动模式：</strong>${record.start_mode || '--'}</div>
+                    <div><strong>共享内存：</strong>${formatBytesToGB(record.shm_size)}</div>
+                    <div><strong>启动时间：</strong>${record.started_at?.Valid ? formatDateTime(record.started_at.Time) : '--'}</div>
+                    ${record.machine_name ? `<div><strong>所在主机：</strong>${record.machine_name}</div>` : ''}
+                    ${record.machine_id ? `<div><strong>主机ID：</strong>${record.machine_id}</div>` : ''}
+                    ${record.ssh_command ? `<div style="grid-column: 1 / -1;"><strong>SSH命令：</strong><br><code style="background: #f0f0f0; padding: 4px 8px; border-radius: 3px; font-family: monospace; word-break: break-all;">${record.ssh_command}</code></div>` : ''}
+                </div>
+            </div>
+        </div>
+    `
+}
+
+// 初始化加载数据
+getPageList()
+
+/**
+ * 获取实例列表
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.resource
+            .getInstancesList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+        console.error('获取实例列表失败:', error)
+        message.error('获取实例列表失败')
+    }
+}
+
+/**
+ * 查看规格详情
+ */
+function handleViewSpecDetail(record) {
+    currentRecord.value = record
+    specModalVisible.value = true
+}
+
+/**
+ * 打开JupyterLab
+ */
+function handleOpenJupyterLab(record) {
+    if (record.jupyter_port && record.jupyter_token) {
+        const jupyterUrl = `http://${record.proxy_host}:${record.jupyter_port}/?token=${record.jupyter_token}`
+        window.open(jupyterUrl, '_blank')
+        message.success('正在打开JupyterLab...')
+    } else {
+        message.warning('JupyterLab未启用或配置不完整')
+    }
+}
+
+/**
+ * 打开AutoPanel
+ */
+function handleOpenAutoPanel(record) {
+    if (record.proxy_host) {
+        const autoPanelUrl = `http://${record.proxy_host}/autopanel/${record.instance_uuid}`
+        window.open(autoPanelUrl, '_blank')
+        message.success('正在打开AutoPanel...')
+    } else {
+        message.warning('AutoPanel未配置')
+    }
+}
+
+/**
+ * 打开实例监控
+ */
+function handleOpenInstanceMonitor(record) {
+    if (record.instance_uuid) {
+        const monitorUrl = `/monitor/instance/${record.instance_uuid}`
+        window.open(monitorUrl, '_blank')
+        message.success('正在打开实例监控...')
+    } else {
+        message.warning('实例ID不存在')
+    }
+}
+
+/**
+ * 关机实例
+ */
+function handleShutdownInstance(record) {
+    Modal.confirm({
+        title: '确认关机',
+        content: `确定要关机实例 ${record.instance_uuid || record.machine_name} 吗？关机后实例将停止运行。`,
+        okText: '确认关机',
+        cancelText: '取消',
+        okType: 'danger',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success, message: msg } = await apis.instance.shutdownInstance(record.id).catch(() => {
+                            throw new Error('API调用失败')
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(msg || '关机命令已发送')
+                            setTimeout(() => {
+                                getPageList()
+                            }, 2000)
+                        } else {
+                            reject(new Error(msg || '关机失败'))
+                        }
+                    } catch (error) {
+                        reject(error)
+                        message.error(error.message || '关机失败')
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 启动实例
+ */
+function handleStartInstance(record) {
+    Modal.confirm({
+        title: '确认启动',
+        content: `确定要启动实例 ${record.instance_uuid || record.machine_name} 吗？`,
+        okText: '确认启动',
+        cancelText: '取消',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success, message: msg } = await apis.instance.startInstance(record.id).catch(() => {
+                            throw new Error('API调用失败')
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(msg || '启动命令已发送')
+                            setTimeout(() => {
+                                getPageList()
+                            }, 2000)
+                        } else {
+                            reject(new Error(msg || '启动失败'))
+                        }
+                    } catch (error) {
+                        reject(error)
+                        message.error(error.message || '启动失败')
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 重启实例
+ */
+function handleRestartInstance(record) {
+    Modal.confirm({
+        title: '确认重启',
+        content: `确定要重启实例 ${record.instance_uuid || record.machine_name} 吗？重启期间实例将暂时不可用。`,
+        okText: '确认重启',
+        cancelText: '取消',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success, message: msg } = await apis.instance.restartInstance(record.id).catch(() => {
+                            throw new Error('API调用失败')
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(msg || '重启命令已发送')
+                            setTimeout(() => {
+                                getPageList()
+                            }, 2000)
+                        } else {
+                            reject(new Error(msg || '重启失败'))
+                        }
+                    } catch (error) {
+                        reject(error)
+                        message.error(error.message || '重启失败')
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 停止实例
+ */
+function handleStopInstance(record) {
+    Modal.confirm({
+        title: '确认停止',
+        content: `确定要停止实例 ${record.instance_uuid || record.machine_name} 吗？停止后实例将立即终止运行。`,
+        okText: '确认停止',
+        cancelText: '取消',
+        okType: 'danger',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success, message: msg } = await apis.instance.stopInstance(record.id).catch(() => {
+                            throw new Error('API调用失败')
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(msg || '停止命令已发送')
+                            setTimeout(() => {
+                                getPageList()
+                            }, 2000)
+                        } else {
+                            reject(new Error(msg || '停止失败'))
+                        }
+                    } catch (error) {
+                        reject(error)
+                        message.error(error.message || '停止失败')
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 删除实例
+ */
+function handleDeleteInstance(record) {
+    Modal.confirm({
+        title: '确认删除',
+        content: `确定要删除实例 ${record.instance_uuid || record.machine_name} 吗？此操作将永久删除实例及相关数据，不可恢复！`,
+        okText: '确认删除',
+        cancelText: '取消',
+        okType: 'danger',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success, message: msg } = await apis.instance.deleteInstance(record.id).catch(() => {
+                            throw new Error('API调用失败')
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(msg || '删除成功')
+                            await getPageList()
+                        } else {
+                            reject(new Error(msg || '删除失败'))
+                        }
+                    } catch (error) {
+                        reject(error)
+                        message.error(error.message || '删除失败')
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 查看日志
+ */
+function handleViewLogs(record) {
+    if (record.instance_uuid) {
+        const logsUrl = `/logs/instance/${record.instance_uuid}`
+        window.open(logsUrl, '_blank')
+        message.success('正在打开日志页面...')
+    } else {
+        message.warning('实例ID不存在')
+    }
+}
+
+/**
+ * 终端连接
+ */
+function handleTerminal(record) {
+    if (record.ssh_command) {
+        navigator.clipboard.writeText(record.ssh_command).then(() => {
+            message.success('SSH命令已复制到剪贴板')
+        }).catch(() => {
+            Modal.info({
+                title: 'SSH连接命令',
+                content: `
+                    <div style="margin: 16px 0;">
+                        <p>请复制以下命令到终端中使用：</p>
+                        <code style="background: #f0f0f0; padding: 8px; border-radius: 4px; display: block; font-family: monospace; word-break: break-all;">
+                            ${record.ssh_command}
+                        </code>
+                    </div>
+                `,
+                okText: '关闭',
+            })
+        })
+    } else {
+        message.warning('SSH连接信息不存在')
+    }
+}
+
+/**
+ * 导出实例列表
+ */
+function handleExportInstances() {
+    Modal.confirm({
+        title: '导出实例列表',
+        content: '确定要导出当前实例列表吗？导出的文件将包含所有实例的详细信息。',
+        okText: '确认导出',
+        cancelText: '取消',
+        onOk: () => {
+            message.loading('正在准备导出数据...', 0)
+
+            setTimeout(() => {
+                message.destroy()
+                message.success('导出成功！文件已开始下载')
+            }, 1500)
+        },
+    })
+}
+
+/**
+ * 分页变化
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置搜索
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+</script>
+
+<style lang="less" scoped>
+.align-right {
+    text-align: right;
+}
+
+.mb-8-2 {
+    margin-bottom: 8px;
+}
+
+.text-secondary {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+}
+
+.user-info-cell,
+.instance-info-cell,
+.spec-detail-cell,
+.disk-usage-cell,
+.ssh-login-cell,
+.quick-tools-cell,
+.action-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.spec-detail-cell {
+    .ant-btn-link {
+        padding: 0;
+        height: auto;
+        font-size: 12px;
+    }
+}
+
+:deep(.ant-table-cell) {
+    .ant-btn-link {
+        padding: 0;
+        height: auto;
+    }
+
+    .ant-dropdown-trigger {
+        padding: 0;
+        height: auto;
+    }
+}
+
+:deep(.ant-tag) {
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+// 弹窗样式
+:deep(.ant-modal-body) {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/userControl/userList/components/EditDialog.vue b/src/views/userControl/userList/components/EditDialog.vue
index 51f7a3a..236b2b5 100644
--- a/src/views/userControl/userList/components/EditDialog.vue
+++ b/src/views/userControl/userList/components/EditDialog.vue
@@ -1,21 +1,16 @@
 <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"
+    <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 label="封禁原因" name="blackReason">
+                <a-textarea v-model:value="formData.blackReason"></a-textarea>
+            </a-form-item>
+            <a-form-item label="封禁天数" name="blackDays">
+                <a-input :defaultValue="0" type="number" v-model:value="formData.blackDays"></a-input>
+            </a-form-item>
+            <a-form-item label="备注" name="remark">
+                <a-textarea v-model:value="formData.remark"></a-textarea>
             </a-form-item>
         </a-form>
     </a-modal>
@@ -25,6 +20,7 @@
 import { cloneDeep } from 'lodash-es'
 import apis from '@/apis'
 import { useForm, useModal } from '@/hooks'
+import { config } from '@/config'
 
 const emit = defineEmits(['ok'])
 
@@ -32,7 +28,8 @@ const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
 const { formRef, formRules, formRecord, formData, resetForm } = useForm()
 
 formRules.value = {
-    title: { required: true, message: '请输入标题' },
+    blackReason: { required: true, message: '请输入理由' },
+    blackDays: { required: true, message: '请输入封禁天数' }
 }
 
 /**
@@ -51,10 +48,9 @@ function handleCreate() {
 function handleEdit(record = {}) {
     showModal({
         type: 'edit',
-        title: '编辑',
+        title: '用户封禁',
     })
     formRecord.value = record
-    formData.value = cloneDeep(record)
 }
 
 /**
@@ -67,7 +63,9 @@ function handleOk() {
             try {
                 showLoading()
                 const params = {
-                    ...values,
+                    blackDays: Number(values.blackDays),
+                    blackReason: values.blackReason,
+                    remark: values.remark
                 }
                 let result = null
                 switch (modal.value.type) {
@@ -77,13 +75,13 @@ function handleOk() {
                         })
                         break
                     case 'edit':
-                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                        result = await apis.userControl.updateCustomers(formRecord.value, params).catch(() => {
                             throw new Error()
                         })
                         break
                 }
                 hideLoading()
-                if (200 === result?.code) {
+                if (config('http.code.success') === result?.success) {
                     hideModal()
                     emit('ok')
                 }
diff --git a/src/views/userControl/userList/index.vue b/src/views/userControl/userList/index.vue
index 15fc85a..0c2603e 100644
--- a/src/views/userControl/userList/index.vue
+++ b/src/views/userControl/userList/index.vue
@@ -78,7 +78,7 @@
                             </x-action-button>
                             <x-action-button @click="handleRemove(record)">
                                 <a-tooltip>
-                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <template #title> 拉黑用户</template>
                                     <delete-outlined style="color: #ff4d4f" />
                                 </a-tooltip>
                             </x-action-button>
@@ -168,28 +168,18 @@ async function getPageList() {
 /**
  * 移除
  */
-function handleRemove({ id }) {
+function handleRemove({ id, status }) {
+    console.log(id, status)
+    if( status == 'DISABLED' ){
+        message.error('该用户已被禁用，请勿重复操作')
+        return
+    }
     Modal.confirm({
-        title: t('pages.system.role.delTip'),
-        content: t('button.confirm'),
+        title: '确认操作',
+        content: '确认拉黑该用户？',
         okText: t('button.confirm'),
         onOk: () => {
-            return new Promise((resolve, reject) => {
-                ; (async () => {
-                    try {
-                        const { success } = await apis.role.delRole(id).catch(() => {
-                            throw new Error()
-                        })
-                        if (config('http.code.success') === success) {
-                            resolve()
-                            message.success(t('component.message.success.delete'))
-                            await getPageList()
-                        }
-                    } catch (error) {
-                        reject()
-                    }
-                })()
-            })
+             editDialogRef.value?.handleEdit(id)
         },
     })
 }

From 644cecc5218a38b19e20b135177a4b6f5bb8e40f Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 28 Jan 2026 18:19:17 +0800
Subject: [PATCH 6/6] 1

---
 src/views/resource/resourceCard/index.vue     |  2 +-
 src/views/resource/resourceInstance/index.vue | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/resource/resourceCard/index.vue b/src/views/resource/resourceCard/index.vue
index 0bbe4ea..18f0163 100644
--- a/src/views/resource/resourceCard/index.vue
+++ b/src/views/resource/resourceCard/index.vue
@@ -98,7 +98,7 @@ const columns = [
     { title: '实例ID', dataIndex: 'instance_uuid', width: 120 },
     { title: '是否被占用', dataIndex: 'reserved', key: 'reserved', width: 120 },
     { title: '开始占用时间', dataIndex: 'reserve_time', key: 'reserve_time', width: 120 },
-    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+    // { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
 ]
 
 const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
diff --git a/src/views/resource/resourceInstance/index.vue b/src/views/resource/resourceInstance/index.vue
index aa4b669..892cc78 100644
--- a/src/views/resource/resourceInstance/index.vue
+++ b/src/views/resource/resourceInstance/index.vue
@@ -122,7 +122,7 @@
                         </template>
 
                         <!-- 操作 -->
-                        <template v-if="'action' === column.key">
+                        <!-- <template v-if="'action' === column.key">
                             <div class="action-cell">
                                 <a-space>
                                     <a-button type="link" size="small" @click="handleStartInstance(record)"
@@ -158,7 +158,7 @@
                                     </a-dropdown>
                                 </a-space>
                             </div>
-                        </template>
+                        </template> -->
                     </template>
                 </a-table>
             </a-card>
@@ -231,12 +231,12 @@ const columns = [
         key: 'quick_tools',
         width: 100
     },
-    {
-        title: '操作',
-        key: 'action',
-        fixed: 'right',
-        width: 240
-    },
+    // {
+    //     title: '操作',
+    //     key: 'action',
+    //     fixed: 'right',
+    //     width: 240
+    // },
 ]
 
 // 状态映射