From 62354c9e23da7bc5cce146ff06129af2f4120888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wei=5F=E4=BD=B3?= <weijia.svip@gmail.com>
Date: Wed, 19 Nov 2025 14:39:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=BC=B0=E5=80=BC=E8=AE=B0=E5=BD=95=E3=80=81?=
 =?UTF-8?q?=E5=AF=B9=E5=85=AC=E8=BD=AC=E8=B4=A6=E3=80=81=E5=8F=91=E7=A5=A8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=B9=B6=E9=87=8D=E6=9E=84=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web1/src/router/routes/index.js               |  27 +
 .../components/CorporateTransfer.vue          | 532 +++++++++++++++
 .../components/InvoiceManagement.vue          | 157 +++++
 .../user-center/components/UserSidebar.vue    | 140 ++++
 .../components/ValuationHistory.vue           | 187 ++++++
 web1/src/views/user-center/index.vue          | 633 +-----------------
 6 files changed, 1070 insertions(+), 606 deletions(-)
 create mode 100644 web1/src/views/user-center/components/CorporateTransfer.vue
 create mode 100644 web1/src/views/user-center/components/InvoiceManagement.vue
 create mode 100644 web1/src/views/user-center/components/UserSidebar.vue
 create mode 100644 web1/src/views/user-center/components/ValuationHistory.vue

diff --git a/web1/src/router/routes/index.js b/web1/src/router/routes/index.js
index dde3eba..3ba5200 100644
--- a/web1/src/router/routes/index.js
+++ b/web1/src/router/routes/index.js
@@ -22,10 +22,37 @@ export const basicRoutes = [
     name: 'UserCenter',
     path: '/user-center',
     component: () => import('@/views/user-center/index.vue'),
+    redirect: '/user-center/history',
     isHidden: true,
     meta: {
       title: '个人中心',
     },
+    children: [
+      {
+        name: 'ValuationHistory',
+        path: 'history',
+        component: () => import('@/views/user-center/components/ValuationHistory.vue'),
+        meta: {
+          title: '估值记录',
+        },
+      },
+      {
+        name: 'CorporateTransfer',
+        path: 'transfer',
+        component: () => import('@/views/user-center/components/CorporateTransfer.vue'),
+        meta: {
+          title: '对公转账',
+        },
+      },
+      {
+        name: 'InvoiceManagement',
+        path: 'invoice',
+        component: () => import('@/views/user-center/components/InvoiceManagement.vue'),
+        meta: {
+          title: '开票管理',
+        },
+      },
+    ],
   },
   {
     name: 'InvoiceHeaderAdd',
diff --git a/web1/src/views/user-center/components/CorporateTransfer.vue b/web1/src/views/user-center/components/CorporateTransfer.vue
new file mode 100644
index 0000000..16c7534
--- /dev/null
+++ b/web1/src/views/user-center/components/CorporateTransfer.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="content-section">
+    <div class="transfer-container">
+      <!-- 步骤条 -->
+      <div class="steps">
+        <div class="step" :class="{ active: currentStep >= 1 }">
+          <div class="step-number">1</div>
+          <div class="step-label">对公汇款</div>
+        </div>
+        <div class="step-line" :class="{ active: currentStep >= 2 }"></div>
+        <div class="step" :class="{ active: currentStep >= 2 }">
+          <div class="step-number">2</div>
+          <div class="step-label">上传凭证</div>
+        </div>
+        <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
+        <div class="step" :class="{ active: currentStep >= 3 }">
+          <div class="step-number">3</div>
+          <div class="step-label">等待到账</div>
+        </div>
+      </div>
+
+      <!-- 第一步：转账信息 -->
+      <div v-if="currentStep === 1" class="transfer-info">
+        <div class="info-title">第一步</div>
+        <div class="info-content">
+          <div class="info-row">
+            <span class="label">评估收费标准：</span>
+            <span class="value highlight">6000元/次</span>
+          </div>
+          <div class="info-row">
+            <span class="label">请汇款以下账户：</span>
+          </div>
+          <div class="info-row">
+            <span class="label">公司名称：</span>
+            <span class="value">成都文化产权交易所有限公司</span>
+          </div>
+          <div class="info-row">
+            <span class="label">税号：</span>
+            <span class="value">91510104586429590T</span>
+          </div>
+          <div class="info-row">
+            <span class="label">注册地址：</span>
+            <span class="value">成都市锦江区工业园区三色路38号</span>
+          </div>
+          <div class="info-row">
+            <span class="label">开户行：</span>
+            <span class="value">中国民生银行股份有限公司成都科华支行</span>
+          </div>
+          <div class="info-row">
+            <span class="label">开户账号：</span>
+            <span class="value">6343 8264 7</span>
+          </div>
+          <div class="info-row">
+            <span class="label">电话：</span>
+            <span class="value">(028) 85915289</span>
+          </div>
+        </div>
+        <n-button class="next-btn" @click="handleNextStep">
+          下一步
+        </n-button>
+      </div>
+
+      <!-- 第二步：上传凭证 -->
+      <div v-if="currentStep === 2" class="upload-section">
+        <div class="info-title">第二步：</div>
+        
+        <div class="upload-form">
+          <!-- 上传支付凭证 -->
+          <div class="form-item">
+            <div class="form-label">上传支付凭证：</div>
+            <div class="upload-area" @click="triggerFileInput">
+              <input 
+                ref="fileInput" 
+                type="file" 
+                accept="image/*" 
+                style="display: none" 
+                @change="handleFileChange"
+              />
+              <div v-if="!uploadedFile" class="upload-placeholder">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 5V19M5 12H19" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <div class="upload-hint">仅支持图片格式</div>
+              </div>
+              <div v-else class="upload-preview">
+                <img :src="uploadedFileUrl" alt="支付凭证" />
+                <div class="upload-remove" @click.stop="removeFile">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 开票抬头 -->
+          <div class="form-item">
+            <div class="form-label">开票抬头：</div>
+            <n-select 
+              v-model:value="selectedInvoiceHeader" 
+              :options="invoiceHeaderOptions"
+              placeholder="请选择开票抬头"
+            />
+          </div>
+
+          <!-- 开票类型 -->
+          <div class="form-item">
+            <div class="form-label">开票类型：</div>
+            <n-select 
+              v-model:value="selectedInvoiceType" 
+              :options="invoiceTypeOptions"
+              placeholder="请选择开票类型"
+            />
+          </div>
+
+          <!-- 上传按钮 -->
+          <n-button 
+            class="upload-btn" 
+            :disabled="!uploadedFile || !selectedInvoiceHeader || !selectedInvoiceType"
+            @click="handleUploadSubmit"
+          >
+            上传
+          </n-button>
+        </div>
+      </div>
+
+      <!-- 第三步：等待到账 -->
+      <div v-if="currentStep === 3" class="success-section">
+        <div class="success-message">
+          <div class="success-title">上传成功！预计N个小时内到账</div>
+          <div class="success-subtitle">请耐心等待</div>
+        </div>
+        <n-button class="return-btn" @click="handleReturnHome">
+          返回首页
+        </n-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['return-home'])
+
+// 当前步骤
+const currentStep = ref(1)
+
+// 文件上传相关
+const fileInput = ref(null)
+const uploadedFile = ref(null)
+const uploadedFileUrl = ref('')
+
+// 表单选择相关
+const selectedInvoiceHeader = ref(null)
+const selectedInvoiceType = ref(null)
+
+// 开票抬头选项
+const invoiceHeaderOptions = ref([
+  { label: '抬头1', value: 'header1' },
+  { label: '抬头2', value: 'header2' },
+  { label: '抬头3', value: 'header3' }
+])
+
+// 开票类型选项
+const invoiceTypeOptions = ref([
+  { label: '普通发票', value: 'normal' },
+  { label: '增值税专用发票', value: 'vat' }
+])
+
+// 下一步
+function handleNextStep() {
+  if (currentStep.value < 3) {
+    currentStep.value++
+  }
+}
+
+// 触发文件选择
+function triggerFileInput() {
+  fileInput.value?.click()
+}
+
+// 处理文件选择
+function handleFileChange(event) {
+  const file = event.target.files?.[0]
+  if (file) {
+    // 验证文件类型
+    if (!file.type.startsWith('image/')) {
+      $message.warning('请上传图片格式的文件')
+      return
+    }
+    
+    uploadedFile.value = file
+    uploadedFileUrl.value = URL.createObjectURL(file)
+  }
+}
+
+// 移除文件
+function removeFile() {
+  uploadedFile.value = null
+  uploadedFileUrl.value = ''
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 提交上传
+function handleUploadSubmit() {
+  if (!uploadedFile.value || !selectedInvoiceHeader.value || !selectedInvoiceType.value) {
+    $message.warning('请完成所有必填项')
+    return
+  }
+  
+  // 这里可以调用API上传文件
+  // 暂时直接进入下一步
+  $message.success('上传成功')
+  currentStep.value = 3
+}
+
+// 返回首页
+function handleReturnHome() {
+  emit('return-home')
+}
+
+// 重置步骤
+function resetStep() {
+  currentStep.value = 1
+}
+
+defineExpose({
+  resetStep
+})
+</script>
+
+<style scoped>
+.content-section {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: calc(100vh - 40px);
+  position: relative;
+  margin-top: 50px;
+}
+
+.transfer-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.step-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #EEEEEE;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.step.active .step-number {
+  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  color: white;
+}
+
+.step-label {
+  font-size: 14px;
+  color: #909399;
+}
+
+.step.active .step-label {
+  color: #303133;
+  font-weight: 500;
+}
+
+.step-line {
+  width: 100px;
+  height: 2px;
+  background: #EEEEEE;
+  margin: 0 16px;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #A30113;
+}
+
+.transfer-info {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 24px;
+  border: 1px solid #EEEEEE;
+}
+
+.info-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-left: 12px;
+  border-left: 4px solid #A30113;
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.info-row {
+  display: flex;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.info-row .label {
+  color: #606266;
+  min-width: 120px;
+}
+
+.info-row .value {
+  color: #303133;
+  flex: 1;
+}
+
+.info-row .value.highlight {
+  color: #A30113;
+  font-weight: 600;
+}
+
+.next-btn {
+  width: 180px;
+  height: 40px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #A30113;
+  color: white;
+  border-radius: 4px;
+  border: none;
+}
+
+.next-btn:hover,
+.next-btn:focus,
+.next-btn:active {
+  background: #A30113;
+  opacity: 1;
+}
+
+/* 第二步：上传凭证 */
+.upload-section {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 24px;
+  border: 1px solid #EEEEEE;
+}
+
+.upload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.upload-area {
+  width: 100%;
+  max-width: 400px;
+  height: 200px;
+  border: 2px dashed #DCDFE6;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.upload-area:hover {
+  border-color: #4A90E2;
+  background: #F5F9FF;
+}
+
+.upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.upload-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.upload-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.upload-remove:hover {
+  background: rgba(0, 0, 0, 0.7);
+  transform: scale(1.1);
+}
+
+.upload-btn {
+  width: 180px;
+  height: 40px;
+  margin: 20px auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: #A30113;
+  color: white;
+  border: none;
+}
+
+.upload-btn:disabled {
+  background: #fab6b6;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.upload-btn:not(:disabled):hover,
+.upload-btn:not(:disabled):focus,
+.upload-btn:not(:disabled):active {
+  background: #A30113;
+  opacity: 1;
+}
+
+/* 第三步：等待到账 */
+.success-section {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 60px 24px;
+  border: 1px solid #EEEEEE;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+.success-message {
+  text-align: center;
+}
+
+.success-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.success-subtitle {
+  font-size: 14px;
+  color: #606266;
+}
+
+.return-btn {
+  width: 180px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: #A30113;
+  color: white;
+  border: none;
+}
+
+.return-btn:hover,
+.return-btn:focus,
+.return-btn:active {
+  background: #A30113;
+  opacity: 1;
+}
+</style>
diff --git a/web1/src/views/user-center/components/InvoiceManagement.vue b/web1/src/views/user-center/components/InvoiceManagement.vue
new file mode 100644
index 0000000..626b2fc
--- /dev/null
+++ b/web1/src/views/user-center/components/InvoiceManagement.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="content-section">
+    <div class="invoice-container">
+      <div class="add-card" @click="handleAddInvoice">
+        <div class="add-text">添加</div>
+      </div>
+      <div class="invoice-list">
+        <div 
+          v-for="invoice in invoiceList" 
+          :key="invoice.id" 
+          class="invoice-card"
+        >
+          <div class="invoice-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
+              <path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <div class="invoice-info">
+            <div class="invoice-name">{{ invoice.name }}</div>
+            <div class="invoice-status">{{ invoice.status }}</div>
+          </div>
+          <div class="invoice-action" @click="handleDeleteInvoice(invoice)">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 6H21M8 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="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+defineProps({
+  invoiceList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['add-invoice', 'delete-invoice'])
+
+// 添加开票
+function handleAddInvoice() {
+  router.push('/invoice-header/add')
+}
+
+// 删除开票
+function handleDeleteInvoice(invoice) {
+  $message.info('删除开票功能开发中')
+}
+</script>
+
+<style scoped>
+.content-section {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: calc(100vh - 40px);
+  position: relative;
+  margin-top: 50px;
+}
+
+.invoice-container {
+  max-width: 1000px;
+}
+
+.add-card {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 80px;
+  height: 32px;
+  background: #A30113;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.add-card:hover {
+  background: #880C22;
+}
+
+.add-text {
+  color: white;
+  font-size: 14px;
+}
+
+.invoice-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+  margin-top: 60px;
+}
+
+.invoice-card {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.invoice-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
+  border-color: #A30113;
+}
+
+.invoice-icon {
+  flex-shrink: 0;
+}
+
+.invoice-info {
+  flex: 1;
+}
+
+.invoice-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.invoice-status {
+  font-size: 12px;
+  color: #909399;
+}
+
+.invoice-action {
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.invoice-action:hover {
+  background: rgba(163, 1, 19, 0.1);
+}
+
+@media (max-width: 768px) {
+  .invoice-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web1/src/views/user-center/components/UserSidebar.vue b/web1/src/views/user-center/components/UserSidebar.vue
new file mode 100644
index 0000000..95a28f3
--- /dev/null
+++ b/web1/src/views/user-center/components/UserSidebar.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="sidebar">
+    <!-- 用户信息 -->
+    <div class="user-info">
+      <div class="avatar">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
+          <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <div class="user-phone">{{ userPhone }}</div>
+      <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+    </div>
+
+    <!-- 菜单列表 -->
+    <div class="menu-list">
+      <div 
+        v-for="menu in menuList" 
+        :key="menu.id" 
+        class="menu-item"
+        :class="{ active: currentMenu === menu.id }"
+        @click="handleMenuClick(menu)"
+      >
+        <component :is="menu.icon" class="menu-icon" />
+        <span class="menu-text">{{ menu.label }}</span>
+        <svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  userPhone: {
+    type: String,
+    default: ''
+  },
+  valuationCount: {
+    type: Number,
+    default: 0
+  },
+  currentMenu: {
+    type: String,
+    required: true
+  },
+  menuList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['menu-click'])
+
+function handleMenuClick(menu) {
+  emit('menu-click', menu)
+}
+</script>
+
+<style scoped>
+.sidebar {
+  width: 240px;
+  background: white;
+  padding: 20px;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.user-info {
+  text-align: center;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #EEEEEE;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  margin: 0 auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-phone {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.user-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #606266;
+}
+
+.menu-item:hover {
+  background: #F5F7FA;
+}
+
+.menu-item.active {
+  background: rgba(163, 1, 19, 0.08);
+  color: #A30113;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 12px;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+  }
+}
+</style>
diff --git a/web1/src/views/user-center/components/ValuationHistory.vue b/web1/src/views/user-center/components/ValuationHistory.vue
new file mode 100644
index 0000000..0571025
--- /dev/null
+++ b/web1/src/views/user-center/components/ValuationHistory.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="content-section">
+    <div class="asset-grid">
+      <div 
+        v-for="item in assetList" 
+        :key="item.id" 
+        class="asset-card"
+      >
+        <div class="asset-header">
+          <div class="asset-title">资产名称</div>
+          <div class="asset-status" :class="getStatusClass(item.status)">
+            {{ getStatusText(item.status) }}
+          </div>
+        </div>
+        <div class="asset-date">{{ formatDate(item.created_at) }}</div>
+        <div class="asset-actions">
+          <div class="action-item" @click="handleDownloadReport(item)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            <span>报告</span>
+          </div>
+          <div class="action-item" @click="handleDownloadCertificate(item)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            <span>证书</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  assetList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 格式化日期
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
+}
+
+// 获取状态文本
+function getStatusText(status) {
+  const statusMap = {
+    'pending': '审核中',
+    'approved': '已通过',
+    'rejected': '已拒绝',
+    'processing': '评估中'
+  }
+  return statusMap[status] || status
+}
+
+// 获取状态样式类
+function getStatusClass(status) {
+  return `status-${status}`
+}
+
+// 下载报告
+function handleDownloadReport(item) {
+  $message.info('下载报告功能开发中')
+}
+
+// 下载证书
+function handleDownloadCertificate(item) {
+  $message.info('下载证书功能开发中')
+}
+</script>
+
+<style scoped>
+.content-section {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: calc(100vh - 40px);
+  position: relative;
+  margin-top: 50px;
+}
+
+.asset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.asset-card {
+  background: #F5F7FA;
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.asset-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
+  border-color: #A30113;
+}
+
+.asset-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.asset-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.asset-date {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 12px;
+}
+
+.asset-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: white;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #A30113;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #EEEEEE;
+}
+
+.action-item:hover {
+  background: #A30113;
+  color: white;
+  border-color: #A30113;
+}
+
+.action-item:hover svg path {
+  stroke: white;
+}
+
+.asset-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.status-pending {
+  background: #FFF3E0;
+  color: #F57C00;
+}
+
+.status-approved {
+  background: #E8F5E9;
+  color: #2E7D32;
+}
+
+.status-rejected {
+  background: #FFEBEE;
+  color: #C62828;
+}
+
+.status-processing {
+  background: #E3F2FD;
+  color: #1565C0;
+}
+
+@media (max-width: 768px) {
+  .asset-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web1/src/views/user-center/index.vue b/web1/src/views/user-center/index.vue
index 8605855..650e200 100644
--- a/web1/src/views/user-center/index.vue
+++ b/web1/src/views/user-center/index.vue
@@ -1,36 +1,13 @@
 <template>
   <div class="user-center-container">
     <!-- 左侧边栏 -->
-    <div class="sidebar">
-      <!-- 用户信息 -->
-      <div class="user-info">
-        <div class="avatar">
-          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
-            <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </div>
-        <div class="user-phone">{{ userPhone }}</div>
-        <div class="user-count">累计估值次数: {{ valuationCount }}</div>
-      </div>
-
-      <!-- 菜单列表 -->
-      <div class="menu-list">
-        <div 
-          v-for="menu in menuList" 
-          :key="menu.id" 
-          class="menu-item"
-          :class="{ active: currentMenu === menu.id }"
-          @click="handleMenuClick(menu)"
-        >
-          <component :is="menu.icon" class="menu-icon" />
-          <span class="menu-text">{{ menu.label }}</span>
-          <svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-      </div>
-    </div>
+    <UserSidebar
+      :user-phone="userPhone"
+      :valuation-count="valuationCount"
+      :current-menu="currentMenu"
+      :menu-list="menuList"
+      @menu-click="handleMenuClick"
+    />
 
     <!-- 右侧内容区 -->
     <div class="content-area">
@@ -42,151 +19,33 @@
         <span>返回首页</span>
       </div>
 
-      <!-- 估值记录 -->
-      <div v-if="currentMenu === 'history'" class="content-section">
-        <div class="asset-grid">
-          <div 
-            v-for="item in assetList" 
-            :key="item.id" 
-            class="asset-card"
-          >
-            <div class="asset-header">
-              <div class="asset-title">资产名称</div>
-              <div class="asset-status" :class="getStatusClass(item.status)">
-                {{ getStatusText(item.status) }}
-              </div>
-            </div>
-            <div class="asset-date">{{ formatDate(item.created_at) }}</div>
-            <div class="asset-actions">
-              <div class="action-item" @click="handleDownloadReport(item)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-                <span>报告</span>
-              </div>
-              <div class="action-item" @click="handleDownloadCertificate(item)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-                <span>证书</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 对公转账 -->
-      <div v-if="currentMenu === 'transfer'" class="content-section">
-        <div class="transfer-container">
-          <!-- 步骤条 -->
-          <div class="steps">
-            <div class="step" :class="{ active: currentStep >= 1 }">
-              <div class="step-number">1</div>
-              <div class="step-label">对公汇款</div>
-            </div>
-            <div class="step-line" :class="{ active: currentStep >= 2 }"></div>
-            <div class="step" :class="{ active: currentStep >= 2 }">
-              <div class="step-number">2</div>
-              <div class="step-label">上传凭证</div>
-            </div>
-            <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
-            <div class="step" :class="{ active: currentStep >= 3 }">
-              <div class="step-number">3</div>
-              <div class="step-label">等待到账</div>
-            </div>
-          </div>
-
-          <!-- 转账信息 -->
-          <div class="transfer-info">
-            <div class="info-title">第一步</div>
-            <div class="info-content">
-              <div class="info-row">
-                <span class="label">评估收费标准：</span>
-                <span class="value highlight">6000元/次</span>
-              </div>
-              <div class="info-row">
-                <span class="label">请汇款以下账户：</span>
-              </div>
-              <div class="info-row">
-                <span class="label">公司名称：</span>
-                <span class="value">成都文化产权交易所有限公司</span>
-              </div>
-              <div class="info-row">
-                <span class="label">税号：</span>
-                <span class="value">91510104586429590T</span>
-              </div>
-              <div class="info-row">
-                <span class="label">注册地址：</span>
-                <span class="value">成都市锦江区工业园区三色路38号</span>
-              </div>
-              <div class="info-row">
-                <span class="label">开户行：</span>
-                <span class="value">中国民生银行股份有限公司成都科华支行</span>
-              </div>
-              <div class="info-row">
-                <span class="label">开户账号：</span>
-                <span class="value">6343 8264 7</span>
-              </div>
-              <div class="info-row">
-                <span class="label">电话：</span>
-                <span class="value">(028) 85915289</span>
-              </div>
-            </div>
-            <n-button type="info" class="next-btn" @click="handleNextStep">
-              下一步
-            </n-button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 开票管理 -->
-      <div v-if="currentMenu === 'invoice'" class="content-section">
-        <div class="invoice-container">
-          <div class="add-card" @click="handleAddInvoice">
-            <div class="add-text">添加</div>
-          </div>
-          <div class="invoice-list">
-            <div 
-              v-for="invoice in invoiceList" 
-              :key="invoice.id" 
-              class="invoice-card"
-            >
-              <div class="invoice-icon">
-                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
-                  <path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </div>
-              <div class="invoice-info">
-                <div class="invoice-name">{{ invoice.name }}</div>
-                <div class="invoice-status">{{ invoice.status }}</div>
-              </div>
-              <div class="invoice-action" @click="handleDeleteInvoice(invoice)">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M3 6H21M8 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="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <!-- 子路由视图 -->
+      <router-view 
+        :asset-list="assetList"
+        :invoice-list="invoiceList"
+        @return-home="handleBackToHome"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, h } from 'vue'
+import { ref, onMounted, h, watch, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import api from '@/api'
+import UserSidebar from './components/UserSidebar.vue'
 
 const router = useRouter()
+const route = useRoute()
 
-// 当前菜单
-const currentMenu = ref('history')
-
-// 当前步骤
-const currentStep = ref(1)
+// 当前菜单（从路由路径计算）
+const currentMenu = computed(() => {
+  const path = route.path
+  if (path.includes('/history')) return 'history'
+  if (path.includes('/transfer')) return 'transfer'
+  if (path.includes('/invoice')) return 'invoice'
+  return 'history'
+})
 
 // 用户信息
 const userPhone = ref('')
@@ -282,38 +141,6 @@ const menuList = ref([
   }
 ])
 
-// 格式化日期
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
-}
-
-// 获取状态文本
-function getStatusText(status) {
-  const statusMap = {
-    'pending': '审核中',
-    'approved': '已通过',
-    'rejected': '已拒绝',
-    'processing': '评估中'
-  }
-  return statusMap[status] || status
-}
-
-// 获取状态样式类
-function getStatusClass(status) {
-  return `status-${status}`
-}
-
-// 下载报告
-function handleDownloadReport(item) {
-  $message.info('下载报告功能开发中')
-}
-
-// 下载证书
-function handleDownloadCertificate(item) {
-  $message.info('下载证书功能开发中')
-}
-
 // 返回首页
 function handleBackToHome() {
   router.push('/home')
@@ -321,24 +148,8 @@ function handleBackToHome() {
 
 // 菜单点击
 function handleMenuClick(menu) {
-  currentMenu.value = menu.id
-}
-
-// 下一步
-function handleNextStep() {
-  if (currentStep.value < 3) {
-    currentStep.value++
-  }
-}
-
-// 添加开票
-function handleAddInvoice() {
-  router.push('/invoice-header/add')
-}
-
-// 删除开票
-function handleDeleteInvoice(invoice) {
-  $message.info('删除开票功能开发中')
+  // 使用路由导航
+  router.push(`/user-center/${menu.id}`)
 }
 
 // 加载数据
@@ -371,80 +182,6 @@ onMounted(() => {
   background: #F5F7FA;
 }
 
-/* 左侧边栏 */
-.sidebar {
-  width: 240px;
-  background: white;
-  padding: 20px;
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
-}
-
-.user-info {
-  text-align: center;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #EEEEEE;
-  margin-bottom: 20px;
-}
-
-.avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  margin: 0 auto 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.user-phone {
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-  margin-bottom: 8px;
-}
-
-.user-count {
-  font-size: 12px;
-  color: #909399;
-}
-
-.menu-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: #606266;
-}
-
-.menu-item:hover {
-  background: #F5F7FA;
-}
-
-.menu-item.active {
-  background: rgba(163, 1, 19, 0.08);
-  color: #A30113;
-}
-
-.menu-icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 12px;
-}
-
-.menu-text {
-  flex: 1;
-  font-size: 14px;
-}
-
 /* 右侧内容区 */
 .content-area {
   flex: 1;
@@ -483,325 +220,9 @@ onMounted(() => {
   transform: translateX(-2px);
 }
 
-.content-section {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  min-height: calc(100vh - 40px);
-  position: relative;
-  margin-top: 50px;
-}
-
-/* 估值记录 */
-.asset-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-
-.asset-card {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 16px;
-  transition: all 0.3s ease;
-  border: 1px solid #EEEEEE;
-}
-
-.asset-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
-  border-color: #A30113;
-}
-
-.asset-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.asset-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-}
-
-.asset-date {
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 12px;
-}
-
-.asset-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.action-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  background: white;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #A30113;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border: 1px solid #EEEEEE;
-}
-
-.action-item:hover {
-  background: #A30113;
-  color: white;
-  border-color: #A30113;
-}
-
-.action-item:hover svg path {
-  stroke: white;
-}
-
-.asset-status {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.status-pending {
-  background: #FFF3E0;
-  color: #F57C00;
-}
-
-.status-approved {
-  background: #E8F5E9;
-  color: #2E7D32;
-}
-
-.status-rejected {
-  background: #FFEBEE;
-  color: #C62828;
-}
-
-.status-processing {
-  background: #E3F2FD;
-  color: #1565C0;
-}
-
-/* 对公转账 */
-.transfer-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 40px;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-number {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #EEEEEE;
-  color: #909399;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.step.active .step-number {
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  color: white;
-}
-
-.step-label {
-  font-size: 14px;
-  color: #909399;
-}
-
-.step.active .step-label {
-  color: #303133;
-  font-weight: 500;
-}
-
-.step-line {
-  width: 100px;
-  height: 2px;
-  background: #EEEEEE;
-  margin: 0 16px;
-  transition: all 0.3s ease;
-}
-
-.step-line.active {
-  background: #A30113;
-}
-
-.transfer-info {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 24px;
-  border: 1px solid #EEEEEE;
-}
-
-.info-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 20px;
-  padding-left: 12px;
-  border-left: 4px solid #A30113;
-}
-
-.info-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 24px;
-}
-
-.info-row {
-  display: flex;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.info-row .label {
-  color: #606266;
-  min-width: 120px;
-}
-
-.info-row .value {
-  color: #303133;
-  flex: 1;
-}
-
-.info-row .value.highlight {
-  color: #A30113;
-  font-weight: 600;
-}
-
-.next-btn {
-  width: 180px;
-  height: 40px;
-  margin: 0 auto;
-  display: block;
-  background: #A30113;
-  border-radius: 4px;
-  border: none;
-}
-
-.next-btn:hover {
-  background: #880C22;
-}
-
-/* 开票管理 */
-.invoice-container {
-  max-width: 1000px;
-}
-
-.add-card {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  width: 80px;
-  height: 32px;
-  background: #A30113;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.add-card:hover {
-  background: #880C22;
-}
-
-.add-text {
-  color: white;
-  font-size: 14px;
-}
-
-.invoice-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  margin-top: 60px;
-}
-
-.invoice-card {
-  background: #F5F7FA;
-  border-radius: 8px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  transition: all 0.3s ease;
-  border: 1px solid #EEEEEE;
-}
-
-.invoice-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
-  border-color: #A30113;
-}
-
-.invoice-icon {
-  flex-shrink: 0;
-}
-
-.invoice-info {
-  flex: 1;
-}
-
-.invoice-name {
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-  margin-bottom: 4px;
-}
-
-.invoice-status {
-  font-size: 12px;
-  color: #909399;
-}
-
-.invoice-action {
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-}
-
-.invoice-action:hover {
-  background: rgba(163, 1, 19, 0.1);
-}
-
 @media (max-width: 768px) {
   .user-center-container {
     flex-direction: column;
   }
-  
-  .sidebar {
-    width: 100%;
-  }
-  
-  .asset-grid,
-  .invoice-list {
-    grid-template-columns: 1fr;
-  }
 }
 </style>