feat: 引入 AppHeader 组件，将表格重构为 Naive UI 的 n-data-table，并优化页面布局和交互。

web1/src/components/AppHeader.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-header">
+    <div class="logo-section" @click="handleLogoClick">
+      <img src="@/assets/images/logo.png" alt="logo" class="logo" />
+    </div>
+    <div class="user-section">
+      <div class="user-avatar" @click="handleUserClick">
+        <img src="@/assets/img/icon_user.png" alt="User" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function handleLogoClick() {
+  router.push('/home')
+}
+
+function handleUserClick() {
+  router.push('/user-center')
+}
+</script>
+
+<style scoped>
+.app-header {
+  padding: 20px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  height: 80px;
+  z-index: 10;
+}
+
+.logo-section {
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  display: flex;
+  align-items: center;
+}
+
+.logo-section:hover {
+  opacity: 0.8;
+}
+
+.logo {
+  height: 40px;
+  width: auto;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  overflow: hidden;
+}
+
+.user-avatar img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.user-avatar:hover {
+  transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 15px 20px;
+    height: 60px;
+  }
+  
+  .logo {
+    height: 32px;
+  }
+  
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .user-avatar img {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

web1/src/views/home/index.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="home-container">
-    <div class="header">
+    <AppHeader />
-      <div class="logo-section">
-        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
-      </div>
-      <div class="user-section">
-        <div class="user-avatar" @click="handleUserCenter">
-          <img src="@/assets/img/icon_user.png" alt="User" />
-        </div>
-      </div>
-    </div>
     
     <div class="content-wrapper">
       <div class="glass-card">
@@ -32,15 +23,12 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
+import AppHeader from '@/components/AppHeader.vue'
 
 const router = useRouter()
 
 function handleStartEvaluation() {
-  router.push('/valuation/list')
+  router.push('/pages')
-}
-
-function handleUserCenter() {
-  router.push('/user-center')
 }
 </script>
 
@@ -58,43 +46,6 @@ function handleUserCenter() {
   overflow: hidden;
 }
 
-.header {
-  padding: 20px 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 10;
-  background: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.logo {
-  height: 40px;
-  width: auto;
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: transform 0.3s ease;
-  overflow: hidden;
-}
-
-.user-avatar img {
-  width: 24px;
-  height: 24px;
-  object-fit: contain;
-}
-
-.user-avatar:hover {
-  transform: scale(1.05);
-}
 
 .content-wrapper {
   flex: 1;

web1/src/views/pages/index.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="pages">
-        <div class="left">
+        <AppHeader class="page-header" />
+        <!-- 左侧边栏 - 已隐藏 -->
+        <!-- <div class="left">
             <img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin">
             <div style="margin-left: 20px;">
                 <div v-for="(item, index) in historyList" @click="selectTimeBox(item)" :class="{ timeBox: item.id != isSelected, timeBox2: item.id == isSelected}">
@@ -8,8 +10,7 @@
                     <img v-if="item.id == isSelected" class="delete-icon" src="@/assets/images/delete.png" alt="" @click.stop="deleteValuations(item)">
                 </div>
             </div>
-            
+        </div> -->
-        </div>
         <div v-if="status=='create'" class="right">
             <StepProgressBar style="width: 800px; margin: auto; margin-top: 40px;" :steps="steps" :currentStep="currentStep" />
             <div class="line"></div>
@@ -22,7 +23,7 @@
                 <div v-if="currentStep==4" class="title-form">非遗资产衍生商品信息</div>
             </div>
             <NForm
-                style="margin:auto; margin-top:30px; width:900px; height: calc(100vh - 500px); overflow-y: auto;"
+                class="form-container"
                 ref="modalFormRef"
                 label-placement="top"
                 label-align="top"
@@ -593,6 +594,7 @@
 <script lang="ts" setup>
 import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
 import StepProgressBar from './components/StepProgressBar.vue';
+import AppHeader from '@/components/AppHeader.vue'
 import api from '@/api'
 import { ref, reactive, onMounted } from 'vue'
 import { useMessage, useDialog } from 'naive-ui'
@@ -1100,12 +1102,11 @@ const nextStep = () => {
     }
     modalFormRef.value?.validate((errors) => {
         if (!errors) {
-            if(currentStep.value != 4){
+            if(currentStep.value < 4){
                 currentStep.value ++
+                return
             }
-            if(currentStep.value == 4){
+            openSubmitConfirm()
-                submit()
-            }
         }
         else {
             message.error('请完善表单')
@@ -1217,6 +1218,15 @@ const retry = () => {
     status.value = 'create'
 }
 const dialog = useDialog()
+const openSubmitConfirm = () => {
+    dialog.warning({
+        title: '提示',
+        content: '提交后将消耗评估次数，确认提交？',
+        positiveText: '确认',
+        negativeText: '取消',
+        onPositiveClick: () => submit(),
+    })
+}
 const deleteValuations = (item) => {
      dialog.warning({
         title: '确认删除',
@@ -1347,20 +1357,34 @@ onMounted(async () => {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     width: 100%;
     height: 100vh;
+    overflow-y: auto;
     display: flex;
+    flex-direction: column;
     background: #F8F8F8;
-    .left {
+    /* 左侧边栏样式 - 已隐藏 */
+    /* .left {
         width: 270px;
         height: 100%;
         background-color: #fff;
-    }
+    } */
     .right {
         flex: 1;
-        margin: 40px;
+        margin: 20px auto;
-        height: 100%;
+        max-width: 1200px;
+        width: 95%;
         background-color: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 60px;
     }
 }
+.page-header{
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
 .delete-icon{
     float: right;
     transform: translate(0,2px);
@@ -1403,6 +1427,12 @@ onMounted(async () => {
     background: #EEEEEE;
     border-radius: 4px;
 }
+.form-container{
+    margin: auto;
+    margin-top: 30px;
+    width: 900px;
+    max-width: 100%;
+}
 .form-item{
     display: inline-block;
     width: 330px;
@@ -1512,4 +1542,4 @@ input[type="number"]::-webkit-inner-spin-button {
   margin: 0;
 }
 
-</style>
+</style>

web1/src/views/user-center/components/InvoiceManagement.vue

@@ -12,42 +12,14 @@
     </div>
 
     <div class="table-container">
-      <table class="custom-table">
+      <n-data-table
-        <thead>
+        :columns="columns"
-          <tr>
+        :data="invoiceList"
-            <th style="width: 40%">公司名称</th>
+        :row-key="rowKey"
-            <th style="width: 35%">税号</th>
+        :pagination="false"
-            <th style="width: 25%">操作</th>
+        striped
-          </tr>
+        size="medium"
-        </thead>
+      />
-        <tbody>
-          <tr v-for="invoice in invoiceList" :key="invoice.id">
-            <td>{{ invoice.name }}</td>
-            <td>{{ invoice.taxId || '123456789012345678' }}</td>
-            <td>
-              <div class="action-group">
-                <div class="action-btn edit" @click="handleEditInvoice(invoice)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                  <span>编辑</span>
-                </div>
-                <div class="action-btn delete" @click="handleDeleteInvoice(invoice)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                  <span>删除</span>
-                </div>
-              </div>
-            </td>
-          </tr>
-          <tr v-if="invoiceList.length === 0">
-            <td colspan="3" class="empty-text">暂无抬头信息...</td>
-          </tr>
-        </tbody>
-      </table>
     </div>
 
     <InvoiceModal
@@ -59,7 +31,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { h, ref } from 'vue'
+import { NButton, NDataTable, NSpace } from 'naive-ui'
 import InvoiceModal from './InvoiceModal.vue'
 
 const props = defineProps({
@@ -101,6 +74,64 @@ function handleModalSubmit(data) {
   }
   showModal.value = false
 }
+
+const columns = [
+  {
+    title: '公司名称',
+    key: 'name',
+    minWidth: 220,
+    ellipsis: true,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => row.name || '-'
+  },
+  {
+    title: '税号',
+    key: 'taxId',
+    minWidth: 200,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => row.taxId || '123456789012345678'
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 200,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) =>
+      h(
+        NSpace,
+        { size: 12, justify: 'center' },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'primary',
+                size: 'small',
+                onClick: () => handleEditInvoice(row)
+              },
+              { default: () => '编辑' }
+            ),
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'error',
+                size: 'small',
+                onClick: () => handleDeleteInvoice(row)
+              },
+              { default: () => '删除' }
+            )
+          ]
+        }
+      )
+  }
+]
+
+const rowKey = (row) => row.id ?? row.name ?? row.taxId
 </script>
 
 <style scoped>
@@ -163,60 +194,4 @@ function handleModalSubmit(data) {
 .table-container {
   width: 100%;
 }
-
-.custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.custom-table th {
-  text-align: left;
-  padding: 12px 24px;
-  background: #F5F7FA;
-  color: #909399;
-  font-weight: 500;
-  border-bottom: 1px solid #EBEEF5;
-}
-
-.custom-table td {
-  padding: 16px 24px;
-  color: #606266;
-  border-bottom: 1px solid #EBEEF5;
-}
-
-.custom-table tr:hover td {
-  background-color: #F5F7FA;
-}
-
-.action-group {
-  display: flex;
-  gap: 24px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.action-btn:hover {
-  opacity: 0.8;
-}
-
-.action-btn.edit {
-  color: #409EFF;
-}
-
-.action-btn.delete {
-  color: #F56C6C;
-}
-
-.empty-text {
-  text-align: center;
-  color: #909399;
-  padding: 40px 0;
-}
 </style>

web1/src/views/user-center/components/ValuationHistory.vue

@@ -1,89 +1,148 @@
 <template>
-  <div class="content-section">
+  <n-card :bordered="false" class="valuation-card">
     <div class="section-header">
-      <div class="title-bar"></div>
+      <div class="title-block">
-      <div class="title-text">估值记录</div>
+        <div class="title-bar"></div>
+        <div class="title-text">估值记录</div>
+      </div>
+      <!-- <n-button quaternary type="primary" size="small" @click="fetchHistory">
+        刷新
+      </n-button> -->
     </div>
-    
+
-    <div class="table-container">
+    <n-data-table
-      <table class="custom-table">
+      :loading="loading"
-        <thead>
+      :columns="columns"
-          <tr>
+      :data="tableData"
-            <th style="width: 40%">资产名称</th>
+      :row-key="rowKey"
-            <th style="width: 25%">时间</th>
+      :pagination="false"
-            <th style="width: 35%">操作</th>
+      striped
-          </tr>
+      size="medium"
-        </thead>
+    />
-        <tbody>
+  </n-card>
-          <tr v-for="item in assetList" :key="item.id">
-            <td>{{ item.name || '未知资产' }}</td>
-            <td>{{ formatDate(item.created_at) }}</td>
-            <td>
-              <div class="action-group">
-                <div class="action-btn" @click="handleDownloadReport(item)">
-                  <img src="@/assets/icon/报告.png" alt="报告" class="action-icon" />
-                  <span>下载报告</span>
-                </div>
-                <div class="action-btn" @click="handleDownloadCertificate(item)">
-                  <img src="@/assets/icon/证书.png" alt="证书" class="action-icon" />
-                  <span>下载证书</span>
-                </div>
-              </div>
-            </td>
-          </tr>
-          <tr v-if="assetList.length === 0">
-            <td colspan="3" class="empty-text">暂无估值记录...</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
 </template>
 
 <script setup>
-defineProps({
+import { h, onMounted, ref } from 'vue'
+import { NButton, NSpace } from 'naive-ui'
+import api from '@/api'
+
+const props = defineProps({
   assetList: {
     type: Array,
-    default: () => []
+    default: () => [],
-  }
+  },
 })
 
-// 格式化日期
+const loading = ref(false)
+const tableData = ref([...props.assetList])
+
+function handleDownloadReport(item) {
+  window.$message?.info('下载报告功能开发中')
+}
+
+function handleDownloadCertificate(item) {
+  window.$message?.info('下载证书功能开发中')
+}
+
 function formatDate(dateStr) {
   if (!dateStr) return ''
-  return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
+  return `${dateStr.slice(0, 10)} ${dateStr.slice(11, 16)}`
 }
 
-// 下载报告
+const columns = [
-function handleDownloadReport(item) {
+  {
-  $message.info('下载报告功能开发中')
+    title: '资产名称',
+    key: 'asset_name',
+    minWidth: 200,
+    ellipsis: true,
+    render: (row) => row.asset_name || row.name || '未知资产',
+  },
+  {
+    title: '评估时间',
+    key: 'created_at',
+    minWidth: 180,
+    render: (row) => formatDate(row.created_at),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    align: 'right',
+    width: 220,
+    render: (row) =>
+      h(
+        NSpace,
+        { size: 8 },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'primary',
+                size: 'small',
+                onClick: () => handleDownloadReport(row),
+              },
+              { default: () => '下载报告' }
+            ),
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'primary',
+                size: 'small',
+                onClick: () => handleDownloadCertificate(row),
+              },
+              { default: () => '下载证书' }
+            ),
+          ],
+        }
+      ),
+  },
+]
+
+const rowKey = (row) => row.id ?? row.asset_name ?? row.name
+
+async function fetchHistory() {
+  loading.value = true
+  try {
+    const res = await api.getHistoryList({ page: 1, page_size: 50 })
+    const list = res?.data?.results ?? res?.data ?? res?.results ?? []
+    tableData.value = Array.isArray(list) ? list : []
+  } catch (error) {
+    console.error('加载估值记录失败:', error)
+    tableData.value = props.assetList
+  } finally {
+    loading.value = false
+  }
 }
 
-// 下载证书
+onMounted(fetchHistory)
-function handleDownloadCertificate(item) {
-  $message.info('下载证书功能开发中')
-}
 </script>
 
 <style scoped>
-.content-section {
+.valuation-card {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
   min-height: calc(100vh - 40px);
+  border-radius: 12px;
 }
 
 .section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.title-block {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 24px;
 }
 
 .title-bar {
   width: 4px;
   height: 16px;
-  background: #A30113;
+  background: #a30113;
   border-radius: 2px;
 }
 
@@ -93,62 +152,7 @@ function handleDownloadCertificate(item) {
   color: #303133;
 }
 
-.table-container {
+.empty-block {
-  width: 100%;
+  padding: 24px 0;
-}
-
-.custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.custom-table th {
-  text-align: left;
-  padding: 12px 24px;
-  background: #F5F7FA;
-  color: #909399;
-  font-weight: 500;
-  border-bottom: 1px solid #EBEEF5;
-}
-
-.custom-table td {
-  padding: 16px 24px;
-  color: #606266;
-  border-bottom: 1px solid #EBEEF5;
-}
-
-.custom-table tr:hover td {
-  background-color: #F5F7FA;
-}
-
-.action-group {
-  display: flex;
-  gap: 24px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: #409EFF;
-  cursor: pointer;
-  transition: opacity 0.3s;
-}
-
-.action-btn:hover {
-  opacity: 0.8;
-}
-
-.action-icon {
-  width: 14px;
-  height: 14px;
-  object-fit: contain;
-}
-
-.empty-text {
-  text-align: center;
-  color: #909399;
-  padding: 40px 0;
 }
 </style>

web1/src/views/user-center/index.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="user-center-container">
     <!-- 头部 -->
-    <div class="header">
+    <AppHeader />
-      <div class="logo-section">
-        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
-      </div>
-      <div class="user-section">
-        <div class="user-avatar">
-          <img src="@/assets/img/icon_user.png" alt="User" />
-        </div>
-      </div>
-    </div>
 
     <!-- 主体内容容器 -->
     <div class="main-container">
@@ -48,6 +39,7 @@
 import { ref, onMounted, h, watch, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import api from '@/api'
+import AppHeader from '@/components/AppHeader.vue'
 import UserSidebar from './components/UserSidebar.vue'
 
 const router = useRouter() 
@@ -181,7 +173,8 @@ async function loadData() {
       valuationCount.value = res.results.length
     }
   } catch (error) {
-    console.error('加载数据失败:', error)
+    console.error('加载估值记录失败:', error)
+    $message.error('加载估值记录失败，请稍后重试')
   }
 }
 
@@ -198,38 +191,6 @@ onMounted(() => {
   flex-direction: column;
 }
 
-/* Header Styles */
-.header {
-  padding: 10px 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  height: 60px;
-}
-
-.logo {
-  height: 32px;
-  width: auto;
-}
-
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.user-avatar img {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-}
 
 /* Main Container Styles */
 .main-container {