feat: 完善用户管理功能，新增用户详情弹窗和审核页面优化

- 新增UserDetailModal组件，支持用户基础信息、发票抬头和操作记录查看
- 完善用户管理API数据结构，添加用户类型字段和模拟数据优化
- 实现用户详情查看功能，支持完整信息展示
- 优化估值审核详情页样式，改进标签页和区块视觉效果
- 修复审核详情页面布局问题，提升用户体验

web/src/api/index.js

@@ -276,6 +276,120 @@ const mockValuationDetails = valuationRecords.map((record) => ({
   ...record,
 }))
 
+const mockAppUsers = [
+  {
+    id: 11111111,
+    phone: '15021982682',
+    wechat: 'f1498480844',
+    created_at: '2024-01-15T10:30:00Z',
+    notes: '测试用户1',
+    remaining_count: 1,
+    user_type: '体验用户',
+  },
+  {
+    id: 11111112,
+    phone: '13800138002',
+    wechat: 'wx_limming2024',
+    created_at: '2024-02-20T14:20:00Z',
+    notes: '付费用户',
+    remaining_count: 5,
+    user_type: '付费用户',
+  },
+  {
+    id: 11111113,
+    phone: '13800138003',
+    wechat: null,
+    created_at: '2024-03-10T08:45:00Z',
+    notes: null,
+    remaining_count: 0,
+    user_type: '体验用户',
+  },
+  {
+    id: 11111114,
+    phone: '13800138004',
+    wechat: 'chenjun_vip',
+    created_at: '2024-04-05T11:30:00Z',
+    notes: 'VIP用户',
+    remaining_count: 10,
+    user_type: 'VIP',
+  },
+  {
+    id: 11111115,
+    phone: '13800138005',
+    wechat: 'liuxia888',
+    created_at: '2024-05-12T16:15:00Z',
+    notes: '体验用户',
+    remaining_count: 3,
+    user_type: '体验用户',
+  },
+  {
+    id: 11111116,
+    phone: '13800138006',
+    wechat: null,
+    created_at: '2024-06-18T09:00:00Z',
+    notes: '新注册用户',
+    remaining_count: 2,
+    user_type: '体验用户',
+  },
+  {
+    id: 11111117,
+    phone: '13800138007',
+    wechat: 'zhaolei2024',
+    created_at: '2024-07-22T12:45:00Z',
+    notes: null,
+    remaining_count: 0,
+    user_type: '体验用户',
+  },
+  {
+    id: 11111118,
+    phone: '13800138008',
+    wechat: 'sunmei_user',
+    created_at: '2024-08-30T15:20:00Z',
+    notes: '活跃用户',
+    remaining_count: 7,
+    user_type: 'VIP',
+  },
+]
+
+const defaultInvoiceHeaders = [
+  {
+    company_name: '成都文创科技有限公司',
+    tax_number: '91510100MA7XYZ1234',
+    register_address: '四川省成都市高新区天府三街666号',
+    register_phone: '028-66666666',
+    bank_name: '招商银行成都分行',
+    bank_account: '6225 6666 8888 0000',
+    email: 'finance@scwenchuang.com',
+  },
+  {
+    company_name: '天府文化发展有限公司',
+    tax_number: '91510100678912345K',
+    register_address: '四川省成都市武侯区科华北路88号',
+    register_phone: '028-12345678',
+    bank_name: '中国工商银行成都分行',
+    bank_account: '6212 8888 0000 9999',
+    email: 'invoice@tfculture.com',
+  },
+]
+
+const defaultOperationLogs = [
+  {
+    time: '2025-10-31 18:30:30',
+    operator: 'admin',
+    records: ['剩余估值次数：0 -> 1', '类型：付费估值', '备注：新用户'],
+  },
+  {
+    time: '2025-10-31 18:30:30',
+    operator: 'admin',
+    records: ['剩余估值次数：2 -> 1', '类型：付费估值', '备注：退款'],
+  },
+  {
+    time: '2025-10-31 18:30:30',
+    operator: 'admin',
+    records: ['用户备注：111111111111 -> 22222222222222222222'],
+  },
+]
+
 export default {
   login: (data) => request.post('/base/access_token', data, { noNeedToken: true }),
   getUserInfo: () => request.get('/base/userinfo'),
@@ -317,76 +431,8 @@ export default {
   getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
   // app users (客户端用户管理) - 使用现有的后端接口
   getAppUserList: (params = {}) => {
-    // Mock 数据
-    const mockUsers = [
-      {
-        id: 11111111,
-        phone: '15021982682',
-        wechat: 'f1498480844',
-        created_at: '2024-01-15T10:30:00Z',
-        notes: '测试用户1',
-        remaining_count: 1
-      },
-      {
-        id: 11111112,
-        phone: '13800138002',
-        wechat: 'wx_limming2024',
-        created_at: '2024-02-20T14:20:00Z',
-        notes: '付费用户',
-        remaining_count: 5
-      },
-      {
-        id: 11111113,
-        phone: '13800138003',
-        wechat: null,
-        created_at: '2024-03-10T08:45:00Z',
-        notes: null,
-        remaining_count: 0
-      },
-      {
-        id: 11111114,
-        phone: '13800138004',
-        wechat: 'chenjun_vip',
-        created_at: '2024-04-05T11:30:00Z',
-        notes: 'VIP用户',
-        remaining_count: 10
-      },
-      {
-        id: 11111115,
-        phone: '13800138005',
-        wechat: 'liuxia888',
-        created_at: '2024-05-12T16:15:00Z',
-        notes: '体验用户',
-        remaining_count: 3
-      },
-      {
-        id: 11111116,
-        phone: '13800138006',
-        wechat: null,
-        created_at: '2024-06-18T09:00:00Z',
-        notes: '新注册用户',
-        remaining_count: 2
-      },
-      {
-        id: 11111117,
-        phone: '13800138007',
-        wechat: 'zhaolei2024',
-        created_at: '2024-07-22T12:45:00Z',
-        notes: null,
-        remaining_count: 0
-      },
-      {
-        id: 11111118,
-        phone: '13800138008',
-        wechat: 'sunmei_user',
-        created_at: '2024-08-30T15:20:00Z',
-        notes: '活跃用户',
-        remaining_count: 7
-      }
-    ]
-
     // 模拟分页和搜索
-    let filteredUsers = [...mockUsers]
+    let filteredUsers = [...mockAppUsers]
     
     // 手机号搜索
     if (params.phone) {
@@ -415,13 +461,32 @@ export default {
         resolve({
           data: paginatedUsers,
           total: filteredUsers.length,
-          page: page,
+          page,
-          page_size: pageSize
+          page_size: pageSize,
         })
-      }, 300) // 模拟网络延迟
+      }, 300)
     })
   },
-  getAppUserById: (params = {}) => request.get('/app-user/detail', { params }),
+  getAppUserById: (params = {}) =>
+    new Promise((resolve) => {
+      const id = Number(params.id)
+      const user = mockAppUsers.find((item) => item.id === id) || {}
+      setTimeout(() => {
+        resolve({
+          baseInfo: {
+            id: user.id,
+            phone: user.phone,
+            wechat: user.wechat,
+            register_time: user.created_at,
+            notes: user.notes,
+            remaining_count: user.remaining_count,
+            user_type: user.user_type || '体验用户',
+          },
+          invoiceHeaders: defaultInvoiceHeaders,
+          operationLogs: defaultOperationLogs,
+        })
+      }, 300)
+    }),
   createAppUser: (data = {}) => request.post('/app-user/register', data),
   updateAppUser: (data = {}) => request.post('/app-user/update', data),
   deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),

web/src/views/user-management/user-list/UserDetailModal.vue

@@ -0,0 +1,222 @@
+<script setup>
+import { computed, ref, watch, h } from 'vue'
+import { NModal, NButton, NTabs, NTabPane, NDataTable, NSpin } from 'naive-ui'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:visible'])
+
+const activeTab = ref('basic')
+
+watch(
+  () => props.visible,
+  (show) => {
+    if (!show) {
+      activeTab.value = 'basic'
+    }
+  }
+)
+
+const baseInfo = computed(() => props.data?.baseInfo || {})
+const invoiceHeaders = computed(() => props.data?.invoiceHeaders || [])
+const operationLogs = computed(() => props.data?.operationLogs || [])
+
+const invoiceColumns = [
+  { title: '公司名称', key: 'company_name', ellipsis: { tooltip: true } },
+  { title: '公司税号', key: 'tax_number', ellipsis: { tooltip: true } },
+  { title: '注册地址', key: 'register_address', ellipsis: { tooltip: true } },
+  { title: '注册电话', key: 'register_phone' },
+  { title: '开户银行', key: 'bank_name' },
+  { title: '银行账号', key: 'bank_account', ellipsis: { tooltip: true } },
+  { title: '邮箱', key: 'email', ellipsis: { tooltip: true } },
+]
+
+const logColumns = [
+  { title: '操作时间', key: 'time', width: 160 },
+  { title: '操作人', key: 'operator', width: 100 },
+  {
+    title: '操作记录',
+    key: 'records',
+    render: (row) =>
+      h(
+        'div',
+        { class: 'log-record' },
+        row.records?.map((item, idx) => h('div', { key: idx }, item))
+      ),
+  },
+]
+
+function handleClose() {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <NModal
+    :show="visible"
+    preset="card"
+    title="用户信息"
+    style="width: 780px"
+    :bordered="false"
+    size="huge"
+    :mask-closable="false"
+    @update:show="$emit('update:visible', $event)"
+  >
+    <NSpin :show="loading">
+      <div class="user-detail-modal">
+        <NTabs v-model:value="activeTab" type="card" size="large" class="detail-tabs">
+          <NTabPane name="basic" tab="基础信息">
+            <div class="basic-info">
+              <div class="info-row">
+                <span class="label">ID：</span>
+                <span class="value">{{ baseInfo.id || '-' }}</span>
+                <span class="label">手机号：</span>
+                <span class="value">{{ baseInfo.phone || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="label">微信号：</span>
+                <span class="value">{{ baseInfo.wechat || '-' }}</span>
+                <span class="label">注册时间：</span>
+                <span class="value">{{ baseInfo.register_time || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="label">剩余次数：</span>
+                <span class="value">{{ baseInfo.remaining_count ?? '-' }}</span>
+                <span class="label">用户类型：</span>
+                <span class="value">{{ baseInfo.user_type || '-' }}</span>
+              </div>
+              <div class="info-row notes">
+                <span class="label">备注：</span>
+                <div class="notes-content">{{ baseInfo.notes || '暂无备注' }}</div>
+              </div>
+            </div>
+          </NTabPane>
+          <NTabPane name="invoice" tab="发票抬头">
+            <NDataTable
+              class="section-table"
+              :columns="invoiceColumns"
+              :data="invoiceHeaders"
+              :pagination="false"
+              :bordered="false"
+              :single-line="false"
+            >
+              <template #empty>
+                <div class="empty">暂无发票抬头信息</div>
+              </template>
+            </NDataTable>
+          </NTabPane>
+          <NTabPane name="logs" tab="操作记录">
+            <NDataTable
+              class="section-table"
+              :columns="logColumns"
+              :data="operationLogs"
+              :pagination="false"
+              :bordered="false"
+              :single-line="false"
+            >
+              <template #empty>
+                <div class="empty">暂无操作记录</div>
+              </template>
+            </NDataTable>
+          </NTabPane>
+        </NTabs>
+
+        <div class="action-buttons">
+          <NButton @click="handleClose">取消</NButton>
+          <NButton type="primary" @click="handleClose">确定</NButton>
+        </div>
+      </div>
+    </NSpin>
+  </NModal>
+</template>
+
+<style scoped>
+.user-detail-modal {
+  padding: 12px 0 0;
+}
+
+.detail-tabs :deep(.n-tabs-nav-scroll-content) {
+  justify-content: flex-start;
+}
+
+.basic-info {
+  padding: 12px 8px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #1f2329;
+}
+
+.info-row.notes {
+  align-items: flex-start;
+}
+
+.label {
+  min-width: 80px;
+  font-weight: 500;
+}
+
+.value {
+  flex: 1;
+  margin-right: 40px;
+}
+
+.notes-content {
+  flex: 1;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid #ebedf0;
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.section-table {
+  width: 100%;
+}
+
+.section-table :deep(.n-data-table-th) {
+  background: #f6f7fb;
+  font-weight: 500;
+}
+
+.section-table :deep(.n-data-table-th),
+.section-table :deep(.n-data-table-td) {
+  font-size: 14px;
+  padding: 12px;
+  color: #333;
+}
+
+.section-table .empty {
+  text-align: center;
+  color: #999;
+  padding: 24px 0;
+}
+
+.log-record div + div {
+  margin-top: 4px;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 20px;
+}
+</style>

web/src/views/user-management/user-list/index.vue

@@ -16,6 +16,7 @@ import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
 import CrudModal from '@/components/table/CrudModal.vue'
 import CrudTable from '@/components/table/CrudTable.vue'
 import LimitSettingModal from './LimitSettingModal.vue'
+import UserDetailModal from './UserDetailModal.vue'
 
 import { formatDate, renderIcon } from '@/utils'
 import { useCRUD } from '@/composables'
@@ -32,6 +33,14 @@ const vPermission = resolveDirective('permission')
 const limitModalVisible = ref(false)
 const currentUser = ref(null)
 
+const detailModalVisible = ref(false)
+const detailLoading = ref(false)
+const userDetail = ref({
+  baseInfo: {},
+  invoiceHeaders: [],
+  operationLogs: [],
+})
+
 const {
   modalVisible,
   modalTitle,
@@ -156,9 +165,30 @@ const columns = [
 ]
 
 // 查看用户详情
-function handleViewDetail(row) {
+async function handleViewDetail(row) {
-  // 这里可以跳转到详情页面或打开详情弹窗
+  detailModalVisible.value = true
-  $message.info('查看用户详情功能待实现')
+  detailLoading.value = true
+  try {
+    const detail = await api.getAppUserById({ id: row.id })
+    const baseInfoFromServer = detail?.baseInfo || {}
+    userDetail.value = {
+      baseInfo: {
+        ...baseInfoFromServer,
+        id: row.id,
+        phone: row.phone,
+        wechat: row.wechat,
+        register_time: row.created_at ? formatDate(row.created_at) : '-',
+        notes: row.notes,
+        remaining_count: row.remaining_count,
+      },
+      invoiceHeaders: detail?.invoiceHeaders || [],
+      operationLogs: detail?.operationLogs || [],
+    }
+  } catch (error) {
+    $message.error('获取用户详情失败')
+  } finally {
+    detailLoading.value = false
+  }
 }
 
 // 次数设置
@@ -271,6 +301,12 @@ const validateForm = {
       :user-data="currentUser"
       @save="handleSaveLimitSetting"
     />
+
+    <!-- 用户详情弹窗 -->
+    <UserDetailModal
+      v-model:visible="detailModalVisible"
+      :data="userDetail"
+      :loading="detailLoading"
+    />
   </CommonPage>
 </template>
-

web/src/views/valuation/audit/components/AuditDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, h } from 'vue'
 import {
   NButton,
   NTag,
@@ -8,10 +8,12 @@ import {
   NSpin,
   NImage,
   NImageGroup,
+  NDataTable,
 } from 'naive-ui'
 
 import { formatDate } from '@/utils'
 import TheIcon from '@/components/icon/TheIcon.vue'
+import CertificateModal from './CertificateModal.vue'
 
 import { getStatusConfig } from '../constants'
 import {
@@ -35,6 +37,11 @@ const emit = defineEmits(['back', 'approve', 'reject'])
 
 const activeDetailTab = ref('audit')
 
+// 证书弹窗相关状态
+const certificateModalVisible = ref(false)
+const certificateModalMode = ref('upload') // 'upload' 或 'view'
+const certificateData = ref({})
+
 watch(
   () => props.detailData?.id,
   () => {
@@ -45,20 +52,23 @@ watch(
 const detailSections = computed(() => {
   const detail = props.detailData
   if (!detail) return []
-  return [
+  
+  const sections = [
     {
       key: 'basic',
       title: '基础信息',
-      columns: [
+      fields: [
         { label: '资产名称', type: 'text', value: detail.asset_name || '-' },
         { label: '所属机构', type: 'text', value: detail.institution || '-' },
         { label: '所属行业', type: 'text', value: detail.industry || '-' },
+        { label: '企业简介', type: 'text', value: detail.company_profile || '-' },
+        { label: '业务简介', type: 'text', value: detail.business_profile || '-' },
       ],
     },
     {
       key: 'finance',
       title: '财务状况',
-      columns: [
+      fields: [
         { label: '近12个月机构营收/万元', type: 'text', value: formatNumberValue(detail.annual_revenue) },
         { label: '近12个月机构研发投入/万元', type: 'text', value: formatNumberValue(detail.rd_investment) },
         { label: '近三年机构收益/万元', type: 'list', value: formatThreeYearIncome(detail.three_year_income) },
@@ -68,7 +78,7 @@ const detailSections = computed(() => {
     {
       key: 'tech',
       title: '非遗等级与技术',
-      columns: [
+      fields: [
         { label: '非遗传承人等级', type: 'text', value: detail.inheritor_level || '-' },
         { label: '非遗传承人年龄水平及数量', type: 'list', value: formatAgeDistribution(detail.inheritor_age_count) },
         { label: '非遗传承人等级证书', type: 'images', value: detail.inheritor_certificates || [] },
@@ -85,7 +95,7 @@ const detailSections = computed(() => {
     {
       key: 'promotion',
       title: '非遗应用与推广',
-      columns: [
+      fields: [
         { label: '非遗资产应用成熟度', type: 'text', value: detail.application_maturity || detail.implementation_stage || '-' },
         { label: '非遗资产应用覆盖范围', type: 'text', value: detail.application_coverage || detail.coverage_area || '-' },
         { label: '非遗资产跨界合作深度', type: 'text', value: detail.cooperation_depth || detail.collaboration_type || '-' },
@@ -96,7 +106,7 @@ const detailSections = computed(() => {
     {
       key: 'products',
       title: '非遗资产衍生商品信息',
-      columns: [
+      fields: [
         { label: '代表产品近12个月销售数量', type: 'text', value: formatNumberValue(detail.sales_volume) },
         { label: '商品链接浏览量', type: 'text', value: formatNumberValue(detail.link_views) },
         { label: '发行量', type: 'text', value: detail.circulation || detail.scarcity_level || '-' },
@@ -106,9 +116,101 @@ const detailSections = computed(() => {
       ],
     },
   ]
+
+  // 为每个 section 生成 NDataTable 需要的 columns 和 data
+  return sections.map(section => {
+    const columns = [
+      {
+        title: '字段名',
+        key: 'fieldName',
+        width: 120,
+        align: 'center',
+        fixed: 'left',
+      },
+      ...section.fields.map(field => ({
+        title: field.label,
+        key: field.label,
+        width: 200,
+        ellipsis: {
+          tooltip: true,
+        },
+        render: (row) => {
+          const fieldData = row[field.label]
+          if (!fieldData) return '-'
+          
+          if (fieldData.type === 'list') {
+            if (fieldData.value && fieldData.value.length) {
+              return h('div', { class: 'cell-multi' }, 
+                fieldData.value.map(item => h('span', item))
+              )
+            }
+            return '-'
+          } else if (fieldData.type === 'images') {
+            if (fieldData.value && fieldData.value.length) {
+              return h(NImageGroup, {}, () => 
+                fieldData.value.map(img => 
+                  h(NImage, { 
+                    src: img, 
+                    width: 72,
+                    height: 48,
+                    objectFit: 'cover',
+                    style: 'margin-right: 8px;'
+                  })
+                )
+              )
+            }
+            return '-'
+          } else {
+            return fieldData.value || '-'
+          }
+        }
+      })),
+    ]
+
+    const data = [
+      {
+        fieldName: '用户输入',
+        ...section.fields.reduce((acc, field) => {
+          acc[field.label] = field
+          return acc
+        }, {}),
+      },
+    ]
+
+    return {
+      ...section,
+      columns,
+      data,
+    }
+  })
 })
 
 const calcFlow = computed(() => props.detailData?.calculation_result?.flow || [])
+
+// 证书相关功能
+const handleUploadCertificate = () => {
+  certificateModalMode.value = 'upload'
+  certificateData.value = {}
+  certificateModalVisible.value = true
+}
+
+const handleViewCertificate = () => {
+  certificateModalMode.value = 'view'
+  // 这里可以从 props.detailData 中获取已上传的证书数据
+  certificateData.value = {
+    title: '非遗传承人等级证书',
+    description: '非遗传承人等级证书相关文件',
+    files: props.detailData?.certificates || []
+  }
+  certificateModalVisible.value = true
+}
+
+const handleCertificateConfirm = (data) => {
+  console.log('证书数据:', data)
+  // 这里可以调用 API 保存证书数据
+  $message?.success('证书上传成功')
+  certificateModalVisible.value = false
+}
 </script>
 
 <template>
@@ -119,7 +221,7 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
           <TheIcon icon="mdi:arrow-left" :size="16" class="mr-4" />
           返回审核列表
         </button>
-        <div class="detail-title">
+        <!-- <div class="detail-title">
           <h2>{{ detailData?.asset_name || '审核详情' }}</h2>
           <NTag size="small" :type="getStatusConfig(detailData?.status).type">
             {{ getStatusConfig(detailData?.status).text }}
@@ -130,21 +232,16 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
           <span>微信号：{{ detailData?.wechat || '-' }}</span>
           <span>提交时间：{{ formatDate(detailData?.created_at) }}</span>
           <span>审核时间：{{ detailData?.reviewed_at ? formatDate(detailData?.reviewed_at) : '-' }}</span>
-        </p>
+        </p> -->
-      </div>
-      <div v-if="mode === 'approve' && detailData?.status === 'pending'" class="detail-actions">
-        <NButton tertiary type="error" @click="emit('reject')">
-          <TheIcon icon="mdi:close-circle-outline" :size="16" class="mr-4" />
-          拒绝
-        </NButton>
-        <NButton type="primary" @click="emit('approve')">
-          <TheIcon icon="mdi:check-circle-outline" :size="16" class="mr-4" />
-          通过
-        </NButton>
       </div>
     </div>
 
-    <NTabs v-model:value="activeDetailTab">
+    <NTabs
+      v-model:value="activeDetailTab"
+      type="line"
+      size="large"
+      class="audit-tabs"
+    >
       <NTabPane name="audit" tab="审核信息">
         <NSpin :show="loading">
           <div v-for="section in detailSections" :key="section.key" class="detail-section">
@@ -152,47 +249,17 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
               <span class="dot" />
               <span>{{ section.title }}</span>
             </div>
-            <div class="table-wrapper">
+            <NDataTable
-              <table class="info-table">
+              :columns="section.columns"
-                <thead>
+              :data="section.data"
-                  <tr>
+              :bordered="true"
-                    <th class="first-col">字段名</th>
+              :single-line="false"
-                    <th v-for="column in section.columns" :key="column.label">
+              :scroll-x="section.fields.length * 200 + 120"
-                      {{ column.label }}
+            >
-                    </th>
+              <template #empty>
-                  </tr>
+                <span>暂无数据</span>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="first-col">用户输入</td>
-                    <td v-for="column in section.columns" :key="column.label">
-                      <div v-if="column.type === 'list'" class="cell-multi">
-                        <template v-if="column.value && column.value.length">
-                          <span v-for="(item, idx) in column.value" :key="idx">{{ item }}</span>
               </template>
-                        <span v-else>-</span>
+            </NDataTable>
-                      </div>
-                      <div v-else-if="column.type === 'images'">
-                        <template v-if="column.value && column.value.length">
-                          <NImageGroup>
-                            <NImage
-                              v-for="(img, idx) in column.value"
-                              :key="idx"
-                              width="72"
-                              height="48"
-                              :src="img"
-                              object-fit="cover"
-                            />
-                          </NImageGroup>
-                        </template>
-                        <span v-else>-</span>
-                      </div>
-                      <span v-else>{{ column.value || '-' }}</span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
           </div>
         </NSpin>
       </NTabPane>
@@ -230,6 +297,34 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
         </NSpin>
       </NTabPane>
     </NTabs>
+
+    <!-- 证书按钮 -->
+    <div class="certificate-actions">
+      <NButton 
+        v-if="mode === 'approve'"
+        type="primary" 
+        @click="handleUploadCertificate"
+      >
+        <TheIcon icon="mdi:upload" :size="16" class="mr-4" />
+        上传证书
+      </NButton>
+      <NButton 
+        v-else
+        type="info" 
+        @click="handleViewCertificate"
+      >
+        <TheIcon icon="mdi:eye" :size="16" class="mr-4" />
+        查看证书
+      </NButton>
+    </div>
+
+    <!-- 证书弹窗 -->
+    <CertificateModal
+      v-model:visible="certificateModalVisible"
+      :mode="certificateModalMode"
+      :certificate-data="certificateData"
+      @confirm="handleCertificateConfirm"
+    />
   </div>
 </template>
 
@@ -238,13 +333,20 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
   background: #fff;
   border-radius: 12px;
   padding: 24px;
+  .certificate-actions {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    z-index: 100;
+  }
 }
 
 .detail-header {
   display: flex;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 16px;
+  margin: -16px 0px 10px ;
 }
 
 .back-btn {
@@ -290,51 +392,62 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
   margin-bottom: 24px;
 }
 
+.audit-tabs :deep(.n-tabs-nav) {
+  margin-bottom: 16px;
+}
+
+.audit-tabs :deep(.n-tabs-tab) {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1d2129;
+  padding: 0 24px;
+}
+
+.audit-tabs :deep(.n-tabs-tab.n-tabs-tab--active) {
+  color: #ff6f3b;
+}
+
+.audit-tabs :deep(.n-tabs-nav__line) {
+  background-color: #ff6f3b;
+  height: 3px;
+  border-radius: 999px;
+}
+
 .section-title {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   font-weight: 600;
   margin-bottom: 12px;
+  font-size: 18px;
+  color: #1d2129;
 }
 
 .section-title .dot {
-  width: 8px;
+  width: 10px;
-  height: 8px;
+  height: 18px;
-  border-radius: 50%;
+  border-radius: 4px;
-  background: #409eff;
+  background: #3b82f6;
 }
 
-.table-wrapper {
+.detail-section :deep(.n-data-table) {
-  overflow-x: auto;
-}
-
-.info-table {
-  width: 100%;
-  border-collapse: collapse;
   background: #f9fafe;
-  table-layout: fixed;
 }
 
-.info-table th,
+.detail-section :deep(.n-data-table-th) {
-.info-table td {
-  border: 1px solid #e5e6eb;
-  padding: 12px;
-  text-align: left;
-  min-width: 140px;
-  word-break: break-word;
-}
-
-.info-table .first-col {
-  width: 120px;
-  text-align: center;
   background: #f1f2f5;
   font-weight: 600;
 }
 
-.info-table th:not(.first-col),
+.detail-section :deep(.n-data-table-th:first-child) {
-.info-table td:not(.first-col) {
+  background: #f1f2f5;
-  width: 180px;
+  text-align: center;
+}
+
+.detail-section :deep(.n-data-table-td:first-child) {
+  background: #f1f2f5;
+  text-align: center;
+  font-weight: 600;
 }
 
 .cell-multi {
@@ -419,4 +532,6 @@ const calcFlow = computed(() => props.detailData?.calculation_result?.flow || []
   color: #999;
   padding: 40px 0;
 }
+
+
 </style>

web/src/views/valuation/audit/components/CertificateModal.vue

@@ -0,0 +1,485 @@
+<script setup>
+import { ref, watch, computed } from 'vue'
+import {
+  NModal,
+  NCard,
+  NButton,
+  NUpload,
+  NText,
+  NImage
+} from 'naive-ui'
+// 临时移除图标导入以解决模块解析问题
+// import { DownloadIcon } from '@vicons/tabler'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  certificateData: {
+    type: Object,
+    default: () => ({}),
+  },
+  mode: {
+    type: String,
+    default: 'upload', // 'upload' 或 'view'
+  },
+})
+
+const emit = defineEmits(['update:visible', 'confirm'])
+
+const formData = ref({
+  reportFiles: [],
+  certificateFiles: [],
+})
+
+const reportFileList = ref([])
+const certificateFileList = ref([])
+
+// 监听弹窗打开，初始化数据
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      if (props.mode === 'view') {
+        // 查看模式，加载已有数据
+        reportFileList.value = props.certificateData?.reportFiles || []
+        certificateFileList.value = props.certificateData?.certificateFiles || []
+      } else {
+        // 上传模式，清空数据
+        formData.value = {
+          reportFiles: [],
+          certificateFiles: [],
+        }
+        reportFileList.value = []
+        certificateFileList.value = []
+      }
+    }
+  }
+)
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:visible', false)
+}
+
+// 确认操作
+const handleConfirm = () => {
+  emit('confirm', {
+    reportFiles: formData.value.reportFiles,
+    certificateFiles: formData.value.certificateFiles,
+  })
+  handleClose()
+}
+
+// 文件上传前的处理
+const beforeUpload = (data) => {
+  const { file } = data
+  const isImage = file.type.startsWith('image/')
+  const isPdf = file.type === 'application/pdf'
+  const isWord = file.type.includes('word') || file.type.includes('document')
+  const isVideo = file.type.startsWith('video/')
+
+  if (!isImage && !isPdf && !isWord && !isVideo) {
+    $message.error('只能上传图片、PDF、Word文档或视频文件')
+    return false
+  }
+
+  const isLt50M = file.size / 1024 / 1024 < 50
+  if (!isLt50M) {
+    $message.error('文件大小不能超过50MB')
+    return false
+  }
+
+  return true
+}
+
+// 报告文件上传变化
+const handleReportUploadChange = ({ fileList: newFileList }) => {
+  reportFileList.value = newFileList
+  formData.value.reportFiles = newFileList.map(file => ({
+    id: file.id,
+    name: file.name,
+    url: file.url,
+    type: file.type
+  }))
+}
+
+// 证书文件上传变化
+const handleCertificateUploadChange = ({ fileList: newFileList }) => {
+  certificateFileList.value = newFileList
+  formData.value.certificateFiles = newFileList.map(file => ({
+    id: file.id,
+    name: file.name,
+    url: file.url,
+    type: file.type
+  }))
+}
+
+// 移除文件
+const handleRemove = () => {
+  return true
+}
+
+// 移除证书文件
+const removeCertificateFile = (index) => {
+  certificateFileList.value.splice(index, 1)
+  formData.value.certificateFiles = certificateFileList.value.map(file => ({
+    id: file.id,
+    name: file.name,
+    url: file.url || '',
+    type: file.type || ''
+  }))
+}
+
+
+// 下载报告
+const handleDownloadReport = () => {
+  // 这里实现下载原版报告的逻辑
+  console.log('下载原版报告')
+  // TODO: 实现实际的下载功能
+}
+
+// 文件预览
+const handlePreview = (file) => {
+  // 图片和PDF可以直接预览
+  if (file.type?.startsWith('image/') || file.type === 'application/pdf') {
+    window.open(file.url || '', '_blank')
+  } else {
+    console.log('此文件类型不支持预览')
+    // TODO: 添加用户提示
+  }
+}
+
+const modalTitle = computed(() => {
+  return props.mode === 'upload' ? '上传' : '查看'
+})
+
+const isUploadMode = computed(() => props.mode === 'upload')
+</script>
+
+<template>
+  <NModal
+    :show="visible"
+    :mask-closable="false"
+    preset="card"
+    :title="modalTitle"
+    class="certificate-modal"
+    style="width: 700px"
+    @update:show="handleClose"
+  >
+    <!-- 上传模式 -->
+    <div v-if="isUploadMode" class="certificate-content">
+      <!-- 报告上传部分 -->
+      <div class="upload-section">
+        <div class="section-title">报告:</div>
+        <div class="upload-content">
+          <div class="download-section">
+            <NButton text type="primary" @click="handleDownloadReport">
+              点击下载原版报告
+            </NButton>
+          </div>
+
+          <NUpload
+            v-model:file-list="reportFileList"
+            :max="5"
+            list-type="image-card"
+            :before-upload="beforeUpload"
+            @change="handleReportUploadChange"
+            @remove="handleRemove"
+          >
+          </NUpload>
+        </div>
+      </div>
+
+      <!-- 证书上传部分 -->
+      <div class="upload-section">
+        <div class="section-title">证书:</div>
+        <div class="upload-content">
+          <NUpload
+            v-model:file-list="certificateFileList"
+            :max="5"
+            list-type="image-card"
+            :before-upload="beforeUpload"
+            @change="handleCertificateUploadChange"
+            @remove="handleRemove"
+          >
+          </NUpload>
+        </div>
+      </div>
+    </div>
+
+    <!-- 查看模式 -->
+    <div v-else class="certificate-content">
+      <!-- 报告查看部分 -->
+      <div class="view-section">
+        <div class="section-title">报告:</div>
+        <div class="view-content">
+          <div class="download-area">
+            <NButton text type="primary" @click="handleDownloadReport">
+              <!-- 临时移除图标 -->
+              <!-- <template #icon>
+                <NIcon :component="DownloadIcon" />
+              </template> -->
+              点击下载原版报告
+            </NButton>
+          </div>
+
+          <div v-if="reportFileList.length > 0" class="file-info">
+            <NText>{{ reportFileList[0]?.name }} 下载</NText>
+          </div>
+        </div>
+      </div>
+
+      <!-- 证书查看部分 -->
+      <div class="view-section">
+        <div class="section-title">证书:</div>
+        <div class="view-content">
+          <div v-if="certificateFileList.length === 0" class="empty-state">
+            <NText depth="3">暂无证书文件</NText>
+          </div>
+          <div v-else class="certificate-display">
+            <div
+              v-for="file in certificateFileList"
+              :key="file.id"
+              class="certificate-image"
+              @click="handlePreview(file)"
+            >
+              <NImage
+                v-if="file.type?.startsWith('image/')"
+                :src="file.url"
+                width="120"
+                height="120"
+                objectFit="cover"
+                preview-disabled
+              />
+              <div v-else class="file-icon">
+                {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="modal-footer">
+        <NButton @click="handleClose">取消</NButton>
+        <NButton v-if="isUploadMode" type="primary" @click="handleConfirm">
+          上传并通知
+        </NButton>
+        <NButton v-else type="primary" @click="handleConfirm">
+          确定
+        </NButton>
+      </div>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+.certificate-modal {
+  max-width: 90vw;
+}
+
+.certificate-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px 0;
+}
+
+/* 上传模式样式 */
+.upload-section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+  font-weight: normal;
+}
+
+.upload-content {
+  min-height: 60px;
+}
+
+.report-upload-area,
+.certificate-upload-area {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.download-section {
+  flex: 0 0 auto;
+}
+
+.file-section {
+  flex: 1;
+  min-width: 200px;
+}
+
+.uploaded-file {
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: 8px;
+}
+
+
+.file-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.certificate-preview {
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #e8e8e8;
+  flex: 0 0 auto;
+}
+
+.file-preview-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  color: #666;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+}
+
+.remove-button {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  background: #ff4d4f;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.remove-button:hover {
+  background: #ff7875;
+}
+
+/* 查看模式样式 */
+.view-section {
+  margin-bottom: 24px;
+}
+
+.view-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.download-area {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.file-info {
+  padding: 8px 12px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.certificate-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.certificate-image {
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e8e8e8;
+  transition: all 0.3s;
+}
+
+.certificate-image:hover {
+  border-color: #1890ff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+.file-icon {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  color: #666;
+  font-size: 24px;
+  font-weight: 600;
+  border-radius: 8px;
+}
+
+/* 底部按钮 */
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* 缩略图上传组件样式 */
+:deep(.n-upload) {
+  width: 100%;
+}
+
+:deep(.n-upload-file-list) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
+}
+
+:deep(.n-upload-file-card) {
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .certificate-modal {
+    width: 95vw !important;
+  }
+
+  .certificate-display {
+    justify-content: center;
+  }
+
+  .certificate-image {
+    flex: 0 0 auto;
+  }
+}
+</style>