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] =?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