diff --git a/web/.env.development b/web/.env.development
index 309efdb..8bae5dc 100644
--- a/web/.env.development
+++ b/web/.env.development
@@ -6,3 +6,4 @@ VITE_USE_PROXY = true
 
 # base api
 VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
+# VITE_BASE_API = 'http://127.0.0.1:9999/api/v1'
diff --git a/web/src/api/index.js b/web/src/api/index.js
index 461a67a..8a2be22 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -1,395 +1,5 @@
 import { request } from '@/utils'
 
-const baseValuationDetail = {
-  valuation_result: 1180000,
-  created_at: '2024-11-10T09:30:00Z',
-  reviewed_at: null,
-  status: 'pending',
-  admin_notes: null,
-  asset_name: '蜀绣传承精品',
-  institution: '天府非遗文化发展有限公司',
-  industry: '文化创意',
-  annual_revenue: 980000,
-  rd_investment: 165000,
-  three_year_income: [890000, 975000, 1180000],
-  funding_status: '国家资助',
-  inheritor_level: '市级传承人',
-  inheritor_age_count: [4, 6, 2],
-  inheritor_certificates: [
-    'https://dummyimage.com/120x80/edf2ff/409eff&text=证书A1',
-    'https://dummyimage.com/120x80/fef6f0/f0a020&text=证书A2',
-  ],
-  heritage_level: '国家级非遗',
-  heritage_asset_level: '一级保护',
-  patent_application_no: '1111111,2222222',
-  historical_evidence: {
-    artifacts: 1,
-    ancient_literature: 2,
-    inheritor_testimony: 0,
-    modern_research: 3,
-  },
-  patent_certificates: ['https://dummyimage.com/120x80/e8f5e9/34a853&text=专利1'],
-  pattern_images: ['https://dummyimage.com/120x80/f3e8ff/9c27b0&text=纹样1'],
-  application_maturity: '推广阶段',
-  application_coverage: '全国覆盖',
-  cooperation_depth: '品牌联名',
-  offline_activities: 4,
-  platform_accounts: {
-    bilibili: { account: 'B站@蜀绣', likes: 1260, comments: 320, shares: 188 },
-  },
-  sales_volume: 5200,
-  link_views: 86500,
-  circulation: '500-1000份',
-  last_market_activity: '近3个月',
-  monthly_transaction: '50-100万元',
-  price_fluctuation: [1200, 3200],
-  model_value_b: 1250000,
-  market_value_c: 1180000,
-  final_value_ab: 1220000,
-  dynamic_pledge_rate: 0.62,
-  calculation_result: {
-    flow: [
-      {
-        title: '基础估值',
-        description: '基于近三年收益与研发投入的模型估值',
-        value: '¥1,250,000',
-      },
-      {
-        title: '市场对标',
-        description: '结合同类资产市场成交价修正',
-        value: '¥1,180,000',
-      },
-      {
-        title: '综合校准',
-        description: '叠加ESG、政策匹配度得出最终估值',
-        value: '¥1,220,000',
-      },
-    ],
-  },
-}
-
-const valuationRecords = [
-  {
-    id: 2001,
-    phone: '13800138001',
-    wechat: 'zhangsan_wx',
-  },
-  {
-    id: 2002,
-    phone: '13800138002',
-    wechat: 'lisi2024',
-    valuation_result: 880000,
-    created_at: '2024-11-09T14:20:00Z',
-    reviewed_at: '2024-11-09T16:45:00Z',
-    status: 'approved',
-    admin_notes: '评估结果合理，已通过审核',
-    asset_name: '景泰蓝掐丝珐琅',
-    institution: '京华非遗研究院',
-    application_maturity: '成熟期',
-    application_coverage: '华北地区',
-    cooperation_depth: '科技载体',
-    platform_accounts: {
-      douyin: { account: '抖音@景泰蓝工坊', likes: 2350, comments: 610, shares: 302 },
-    },
-    price_fluctuation: [980, 2680],
-    calculation_result: {
-      flow: [
-        {
-          title: '基础估值',
-          description: '模型估算品牌溢价后得出结果',
-          value: '¥900,000',
-        },
-        {
-          title: '市场对标',
-          description: '对比近六个月文博拍卖价格',
-          value: '¥860,000',
-        },
-        {
-          title: '综合校准',
-          description: '结合政策扶持与线上声量校准',
-          value: '¥880,000',
-        },
-      ],
-    },
-  },
-  {
-    id: 2003,
-    phone: '13800138003',
-    wechat: 'wangwu_user',
-    valuation_result: 2100000,
-    created_at: '2024-11-08T16:45:00Z',
-    reviewed_at: '2024-11-08T18:30:00Z',
-    status: 'approved',
-    admin_notes: '评估价格偏高，但审核通过',
-    asset_name: '苗绣银饰',
-    institution: '黔锦民族文化有限公司',
-    industry: '民族工艺',
-    funding_status: '地方配套资金',
-    inheritor_level: '国家级代表性传承人',
-    inheritor_age_count: [2, 3, 1],
-    application_coverage: '西南片区',
-    platform_accounts: {
-      kuaishou: { account: '快手@苗绣手作', likes: 1800, comments: 420, shares: 210 },
-    },
-    price_fluctuation: [2600, 5200],
-  },
-  {
-    id: 2004,
-    phone: '13800138004',
-    wechat: 'zhaoliu_vip',
-    valuation_result: 560000,
-    created_at: '2024-11-07T11:15:00Z',
-    status: 'pending',
-    asset_name: '景德镇青花',
-    institution: '景尚文化传播有限公司',
-    industry: '陶瓷制造',
-    funding_status: '社会资本',
-    platform_accounts: {
-      bilibili: { account: 'B站@青花研习社', likes: 860, comments: 146, shares: 98 },
-    },
-    price_fluctuation: [560, 1200],
-  },
-  {
-    id: 2005,
-    phone: '13800138005',
-    wechat: 'sunqi888',
-    valuation_result: 1680000,
-    created_at: '2024-11-06T08:30:00Z',
-    reviewed_at: '2024-11-06T10:15:00Z',
-    status: 'approved',
-    admin_notes: '评估数据完整，审核通过',
-    asset_name: '藏医药香丸',
-    institution: '高原本草研究中心',
-    industry: '中医药',
-    application_coverage: '西藏及周边',
-    cooperation_depth: '国家外交礼品',
-    platform_accounts: {
-      douyin: { account: '抖音@藏医手作', likes: 3120, comments: 815, shares: 356 },
-    },
-    price_fluctuation: [3200, 7600],
-  },
-  {
-    id: 2006,
-    phone: '13800138006',
-    wechat: 'zhouba2024',
-    valuation_result: 950000,
-    created_at: '2024-11-05T13:20:00Z',
-    status: 'pending',
-    asset_name: '苏绣屏风',
-    institution: '苏澜绣坊',
-    funding_status: '企业自筹',
-    platform_accounts: {
-      bilibili: { account: 'B站@苏绣博物馆', likes: 980, comments: 240, shares: 130 },
-    },
-    price_fluctuation: [1500, 3600],
-  },
-  {
-    id: 2007,
-    phone: '13800138007',
-    wechat: 'wujiu_user',
-    valuation_result: 3200000,
-    created_at: '2024-11-04T15:45:00Z',
-    reviewed_at: '2024-11-04T17:20:00Z',
-    status: 'approved',
-    admin_notes: '高价值资产，评估结果准确',
-    asset_name: '宋锦织造',
-    institution: '苏州织造研究所',
-    funding_status: '国家重点补贴',
-    inheritor_age_count: [6, 8, 4],
-    application_maturity: '成熟期',
-    cooperation_depth: '科技载体',
-    platform_accounts: {
-      douyin: { account: '抖音@宋锦织造', likes: 4800, comments: 1020, shares: 520 },
-    },
-  },
-  {
-    id: 2008,
-    phone: '13800138008',
-    wechat: 'zhengshi_vip',
-    valuation_result: 750000,
-    created_at: '2024-11-03T10:10:00Z',
-    reviewed_at: '2024-11-03T12:00:00Z',
-    status: 'approved',
-    admin_notes: '评估流程规范，结果可信',
-    asset_name: '黄梅挑花',
-    institution: '徽楚非遗中心',
-    cooperation_depth: '品牌联名',
-    price_fluctuation: [980, 1800],
-  },
-  {
-    id: 2009,
-    phone: '13800138009',
-    wechat: 'chenjun2024',
-    valuation_result: 1890000,
-    created_at: '2024-11-02T14:30:00Z',
-    status: 'pending',
-    asset_name: '黎锦织造',
-    institution: '海南黎锦工坊',
-    funding_status: '国家资助',
-    application_coverage: '华南地区',
-  },
-  {
-    id: 2010,
-    phone: '13800138010',
-    wechat: 'liuxia_user',
-    valuation_result: 430000,
-    created_at: '2024-11-01T11:45:00Z',
-    reviewed_at: '2024-11-01T13:30:00Z',
-    status: 'approved',
-    admin_notes: '低价值资产，评估合理',
-    asset_name: '大漆工艺',
-    institution: '榫卯器物社',
-    funding_status: '地方专项',
-    cooperation_depth: '品牌联名',
-    platform_accounts: {
-      bilibili: { account: 'B站@大漆工坊', likes: 420, comments: 75, shares: 33 },
-    },
-  },
-  {
-    id: 2011,
-    phone: '13800138011',
-    wechat: 'zhaolei2024',
-    valuation_result: 2100000,
-    created_at: '2024-10-31T09:20:00Z',
-    reviewed_at: '2024-10-31T11:00:00Z',
-    status: 'approved',
-    admin_notes: '评估报告详细，数据支撑充分',
-    asset_name: '龙泉青瓷',
-    institution: '浙瓷非遗研究院',
-    cooperation_depth: '科技载体',
-  },
-  {
-    id: 2012,
-    phone: '13800138012',
-    wechat: 'sunmei_vip',
-    valuation_result: 680000,
-    created_at: '2024-10-30T16:15:00Z',
-    status: 'pending',
-    asset_name: '侗锦织造',
-    institution: '黔东南侗锦合作社',
-    funding_status: '社会资本',
-  },
-]
-
-const mockValuationDetails = valuationRecords.map((record) => ({
-  ...baseValuationDetail,
-  ...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'),
@@ -430,379 +40,28 @@ export default {
   // auditlog
   getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
   // app users (客户端用户管理) - 使用现有的后端接口
-  getAppUserList: (params = {}) => {
-    // 模拟分页和搜索
-    let filteredUsers = [...mockAppUsers]
-    
-    // 手机号搜索
-    if (params.phone) {
-      filteredUsers = filteredUsers.filter(user => 
-        user.phone.includes(params.phone)
-      )
-    }
-    
-    // 微信号搜索
-    if (params.wechat) {
-      filteredUsers = filteredUsers.filter(user => 
-        user.wechat && user.wechat.includes(params.wechat)
-      )
-    }
-    
-    // 注册时间筛选（日期范围）
-    if (params.created_at && Array.isArray(params.created_at) && params.created_at.length === 2) {
-      const [startTime, endTime] = params.created_at
-      filteredUsers = filteredUsers.filter(user => {
-        if (!user.created_at) return false
-        const userTime = new Date(user.created_at).getTime()
-        return userTime >= startTime && userTime <= endTime
-      })
-    }
-
-    // 分页处理
-    const page = Number(params.page) || 1
-    const pageSize = Number(params.page_size) || 10
-    const startIndex = (page - 1) * pageSize
-    const endIndex = startIndex + pageSize
-    const paginatedUsers = filteredUsers.slice(startIndex, endIndex)
-
-    // 返回 Promise 模拟异步请求
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          data: paginatedUsers,
-          total: filteredUsers.length,
-          page,
-          page_size: pageSize,
-        })
-      }, 300)
-    })
-  },
-  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)
-    }),
+  getAppUserList: (params = {}) => request.get('/app-user-admin/list', { params }),
+  updateAppUserQuota: (data = {}) => request.post('/app-user-admin/quota', data),
+  getAppUserQuotaLogs: ({ user_id, ...params } = {}) =>
+    request.get(`/app-user-admin/${user_id}/quota-logs`, { params }),
   createAppUser: (data = {}) => request.post('/app-user/register', data),
   updateAppUser: (data = {}) => request.post('/app-user/update', data),
   deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
-  // invoice (开票记录)
-  getInvoiceList: (params = {}) => {
-    // Mock 数据
-    const mockInvoices = [
-      {
-        id: 1001,
-        created_at: '2024-11-10T09:30:00Z',
-        ticket_type: 'electronic',
-        phone: '13800138001',
-        email: 'zhangsan@company1.com',
-        company_name: '北京科技有限公司',
-        tax_number: '91110000123456789A',
-        register_address: '北京市朝阳区科技园区A座1001室',
-        register_phone: '010-12345678',
-        bank_name: '中国工商银行北京分行',
-        bank_account: '6222021234567890123',
-        invoice_type: 'special',
-        status: 'pending'
-      },
-      {
-        id: 1002,
-        created_at: '2024-11-09T14:20:00Z',
-        ticket_type: 'paper',
-        phone: '13800138002',
-        email: 'lisi@company2.com',
-        company_name: '上海贸易股份有限公司',
-        tax_number: '91310000987654321B',
-        register_address: '上海市浦东新区金融街B座2002室',
-        register_phone: '021-87654321',
-        bank_name: '中国建设银行上海分行',
-        bank_account: '6217001234567890124',
-        invoice_type: 'normal',
-        status: 'invoiced'
-      },
-      {
-        id: 1003,
-        created_at: '2024-11-08T16:45:00Z',
-        ticket_type: 'electronic',
-        phone: '13800138003',
-        email: 'wangwu@company3.com',
-        company_name: '深圳创新科技有限公司',
-        tax_number: '91440300456789012C',
-        register_address: '深圳市南山区高新技术园C座3003室',
-        register_phone: '0755-23456789',
-        bank_name: '招商银行深圳分行',
-        bank_account: '6214851234567890125',
-        invoice_type: 'special',
-        status: 'rejected'
-      },
-      {
-        id: 1004,
-        created_at: '2024-11-07T11:15:00Z',
-        ticket_type: 'paper',
-        phone: '13800138004',
-        email: 'zhaoliu@company4.com',
-        company_name: '广州制造业集团有限公司',
-        tax_number: '91440100789012345D',
-        register_address: '广州市天河区商务中心D座4004室',
-        register_phone: '020-34567890',
-        bank_name: '中国银行广州分行',
-        bank_account: '6013821234567890126',
-        invoice_type: 'normal',
-        status: 'pending'
-      },
-      {
-        id: 1005,
-        created_at: '2024-11-06T08:30:00Z',
-        ticket_type: 'electronic',
-        phone: '13800138005',
-        email: 'sunqi@company5.com',
-        company_name: '杭州互联网科技有限公司',
-        tax_number: '91330100012345678E',
-        register_address: '杭州市西湖区互联网小镇E座5005室',
-        register_phone: '0571-45678901',
-        bank_name: '浙商银行杭州分行',
-        bank_account: '6228481234567890127',
-        invoice_type: 'special',
-        status: 'invoiced'
-      },
-      {
-        id: 1006,
-        created_at: '2024-11-05T13:20:00Z',
-        ticket_type: 'paper',
-        phone: '13800138006',
-        email: 'zhouba@company6.com',
-        company_name: '成都软件开发有限公司',
-        tax_number: '91510100345678901F',
-        register_address: '成都市高新区软件园F座6006室',
-        register_phone: '028-56789012',
-        bank_name: '中国农业银行成都分行',
-        bank_account: '6230521234567890128',
-        invoice_type: 'normal',
-        status: 'pending'
-      },
-      {
-        id: 1007,
-        created_at: '2024-11-04T15:45:00Z',
-        ticket_type: 'electronic',
-        phone: '13800138007',
-        email: 'wujiu@company7.com',
-        company_name: '武汉新能源科技有限公司',
-        tax_number: '91420100678901234G',
-        register_address: '武汉市江汉区新能源产业园G座7007室',
-        register_phone: '027-67890123',
-        bank_name: '交通银行武汉分行',
-        bank_account: '6222601234567890129',
-        invoice_type: 'special',
-        status: 'invoiced'
-      },
-      {
-        id: 1008,
-        created_at: '2024-11-03T10:10:00Z',
-        ticket_type: 'paper',
-        phone: '13800138008',
-        email: 'zhengshi@company8.com',
-        company_name: '西安电子商务有限公司',
-        tax_number: '91610100901234567H',
-        register_address: '西安市雁塔区电商产业园H座8008室',
-        register_phone: '029-78901234',
-        bank_name: '中信银行西安分行',
-        bank_account: '6217711234567890130',
-        invoice_type: 'normal',
-        status: 'refunded'
-      },
-      {
-        id: 1009,
-        created_at: '2024-11-02T14:30:00Z',
-        ticket_type: 'electronic',
-        phone: '13800138009',
-        email: 'wangwu@company9.com',
-        company_name: '天津物流科技有限公司',
-        tax_number: '91120000234567890I',
-        register_address: '天津市滨海新区物流园I座9009室',
-        register_phone: '022-89012345',
-        bank_name: '民生银行天津分行',
-        bank_account: '6226221234567890131',
-        invoice_type: 'special',
-        status: 'refunded'
-      },
-      {
-        id: 1010,
-        created_at: '2024-11-01T11:45:00Z',
-        ticket_type: 'paper',
-        phone: '13800138010',
-        email: 'liuliu@company10.com',
-        company_name: '重庆智能制造有限公司',
-        tax_number: '91500000567890123J',
-        register_address: '重庆市渝北区智能制造园J座1010室',
-        register_phone: '023-90123456',
-        bank_name: '华夏银行重庆分行',
-        bank_account: '6228881234567890132',
-        invoice_type: 'normal',
-        status: 'rejected'
-      }
-    ]
-
-    // 模拟分页和搜索
-    let filteredInvoices = [...mockInvoices]
-    
-    // 手机号搜索
-    if (params.phone) {
-      filteredInvoices = filteredInvoices.filter(invoice => 
-        invoice.phone.includes(params.phone)
-      )
-    }
-    
-    // 公司名称搜索
-    if (params.company_name) {
-      filteredInvoices = filteredInvoices.filter(invoice => 
-        invoice.company_name.includes(params.company_name)
-      )
-    }
-    
-    // 公司税号搜索
-    if (params.tax_number) {
-      filteredInvoices = filteredInvoices.filter(invoice => 
-        invoice.tax_number.includes(params.tax_number)
-      )
-    }
-    
-    // 状态筛选
-    if (params.status) {
-      filteredInvoices = filteredInvoices.filter(invoice => 
-        invoice.status === params.status
-      )
-    }
-    
-    // 提交时间筛选
-    if (params.created_at && Array.isArray(params.created_at) && params.created_at.length === 2) {
-      const [startDate, endDate] = params.created_at
-      filteredInvoices = filteredInvoices.filter(invoice => {
-        const invoiceDate = new Date(invoice.created_at)
-        return invoiceDate >= new Date(startDate) && invoiceDate <= new Date(endDate)
-      })
-    }
-
-    // 分页处理
-    const page = params.page || 1
-    const pageSize = params.page_size || 10
-    const startIndex = (page - 1) * pageSize
-    const endIndex = startIndex + pageSize
-    const paginatedInvoices = filteredInvoices.slice(startIndex, endIndex)
-
-    // 返回 Promise 模拟异步请求
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          data: paginatedInvoices,
-          total: filteredInvoices.length,
-          page: page,
-          page_size: pageSize
-        })
-      }, 300) // 模拟网络延迟
-    })
-  },
-  getInvoiceById: (params = {}) => request.get('/invoice/detail', { params }),
-  createInvoice: (data = {}) => request.post('/invoice/create', data),
-  updateInvoice: (data = {}) => request.post('/invoice/update', data),
-  deleteInvoice: (params = {}) => request.delete('/invoice/delete', { params }),
-  updateInvoiceStatus: (data = {}) => request.post('/invoice/update-status', data),
-  remindInvoice: (data = {}) => request.post('/invoice/remind', data),
-  refundInvoice: (data = {}) => request.post('/invoice/refund', data),
-  sendInvoice: (data = {}) => request.post('/invoice/send', data),
+  // invoice (交易管理-对公转账记录)
+  getInvoiceList: (params = {}) => request.get('/transactions/receipts', { params }),
+  getInvoiceById: (params = {}) => request.get(`/transactions/receipts/${params.id}`, { params }),
+  // 后端接口要求请求体包裹在 data 字段下
+  sendInvoice: (data = {}) => request.post('/transactions/send-email', { data }),
   // valuation (估值评估)
-  getValuationList: (params = {}) => {
-    // 模拟分页和搜索
-    let filteredValuations = [...mockValuationDetails]
-    
-    // 手机号搜索
-    if (params.phone) {
-      filteredValuations = filteredValuations.filter(valuation => 
-        valuation.phone.includes(params.phone)
-      )
-    }
-    
-    // 微信号搜索
-    if (params.wechat) {
-      filteredValuations = filteredValuations.filter(valuation => 
-        valuation.wechat && valuation.wechat.includes(params.wechat)
-      )
-    }
-    
-    // 状态筛选
-    if (params.status) {
-      filteredValuations = filteredValuations.filter(valuation => 
-        valuation.status === params.status
-      )
-    }
-    
-    // 提交时间筛选
-    if (params.created_at && Array.isArray(params.created_at) && params.created_at.length === 2) {
-      const [startDate, endDate] = params.created_at
-      filteredValuations = filteredValuations.filter(valuation => {
-        const valuationDate = new Date(valuation.created_at)
-        return valuationDate >= new Date(startDate) && valuationDate <= new Date(endDate)
-      })
-    }
-
-    // 分页处理
-    const page = params.page || 1
-    const pageSize = params.page_size || 10
-    const startIndex = (page - 1) * pageSize
-    const endIndex = startIndex + pageSize
-    const paginatedValuations = filteredValuations.slice(startIndex, endIndex).map((item) => ({
-      id: item.id,
-      phone: item.phone,
-      wechat: item.wechat,
-      valuation_result: item.valuation_result,
-      created_at: item.created_at,
-      reviewed_at: item.reviewed_at,
-      status: item.status,
-      admin_notes: item.admin_notes,
-    }))
-
-    // 返回 Promise 模拟异步请求
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          data: paginatedValuations,
-          total: filteredValuations.length,
-          page: page,
-          page_size: pageSize
-        })
-      }, 300) // 模拟网络延迟
-    })
-  },
-  getValuationById: (params = {}) => {
-    const id = Number(params.valuation_id || params.id)
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        const detail = mockValuationDetails.find((item) => item.id === id)
-        if (detail) {
-          resolve({ data: detail })
-        } else {
-          reject({ code: 404, message: '未找到估值详情' })
-        }
-      }, 200)
-    })
-  },
-  createValuation: (data = {}) => request.post('/valuation', data),
-  updateValuation: (data = {}) => request.put(`/valuation/${data.id}`, data),
-  deleteValuation: (params = {}) => request.delete(`/valuation/${params.valuation_id}`),
-  approveValuation: (data = {}) => request.post(`/valuation/${data.valuation_id}/approve`, data),
-  rejectValuation: (data = {}) => request.post(`/valuation/${data.valuation_id}/reject`, data),
-  updateValuationNotes: (data = {}) => request.put(`/valuation/${data.valuation_id}/admin-notes`, data),
+  getValuationList: (params = {}) => request.get('/valuations/', { params }),
+  getValuationById: (params = {}) => request.get(`/valuations/${params.valuation_id || params.id}`),
+  createValuation: (data = {}) => request.post('/valuations', data),
+  updateValuation: (data = {}) => request.put(`/valuations/${data.id}`, data),
+  deleteValuation: (params = {}) => request.delete(`/valuations/${params.valuation_id || params.id}`),
+  approveValuation: (data = {}) =>
+    request.post(`/valuations/${data.valuation_id || data.id}/approve`, { admin_notes: data.admin_notes }),
+  rejectValuation: (data = {}) =>
+    request.post(`/valuations/${data.valuation_id || data.id}/reject`, { admin_notes: data.admin_notes }),
+  updateValuationNotes: (data = {}) =>
+    request.put(`/valuations/${data.valuation_id || data.id}/admin-notes`, { admin_notes: data.admin_notes }),
 }
diff --git a/web/src/views/transaction/invoice/InvoiceModal.vue b/web/src/views/transaction/invoice/InvoiceModal.vue
index a973482..9fcd91e 100644
--- a/web/src/views/transaction/invoice/InvoiceModal.vue
+++ b/web/src/views/transaction/invoice/InvoiceModal.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue'
-import { NModal, NCard, NForm, NFormItem, NInput, NButton, NUpload, NSpace, NText } from 'naive-ui'
+import { ref, watch, computed } from 'vue'
+import { NModal, NCard, NForm, NFormItem, NInput, NButton, NUpload, NSpace, NText, useMessage } from 'naive-ui'
+import { getToken } from '@/utils/auth/token'
 
 const props = defineProps({
   visible: {
@@ -27,6 +28,12 @@ const formData = ref({
 })
 
 const fileList = ref([])
+const $message = useMessage()
+
+const uploadUrl = `${import.meta.env.VITE_BASE_API}/upload/file`
+const uploadHeaders = computed(() => ({
+  Authorization: `Bearer ${getToken()}`,
+}))
 
 // 监听弹窗打开，初始化数据
 watch(
@@ -80,10 +87,42 @@ const beforeUpload = (data) => {
   return true
 }
 
-// 文件上传变化
-const handleUploadChange = ({ fileList: newFileList }) => {
-  fileList.value = newFileList
-  formData.value.attachments = newFileList.map(file => file.id || file.name)
+// 文件上传完成
+const handleUploadFinish = ({ file, event }) => {
+  try {
+    const res = JSON.parse(event.target.response)
+    // 只要返回了 url 字段，就认为上传成功
+    if (res.code === 200 && res.data?.url) {
+      // 显式查找 fileList 中的文件对象进行更新，确保响应式
+      const targetFile = fileList.value.find(f => f.id === file.id) || file
+      targetFile.url = res.data.url
+      targetFile.name = res.data.filename || targetFile.name
+      targetFile.status = 'finished' // 手动标记为完成
+      
+      // 更新 formData.attachments
+      updateAttachments()
+      $message.success('上传成功')
+    } else {
+      $message.error(res.message || '上传失败')
+      // 从列表中移除失败的文件
+      const index = fileList.value.findIndex((item) => item.id === file.id)
+      if (index > -1) fileList.value.splice(index, 1)
+    }
+  } catch (error) {
+    console.error('上传响应解析失败:', error)
+    $message.error('上传失败：服务器响应异常')
+    const index = fileList.value.findIndex((item) => item.id === file.id)
+    if (index > -1) fileList.value.splice(index, 1)
+  }
+  return file
+}
+
+// 更新附件列表
+const updateAttachments = () => {
+  // 只要有 url 的都算作有效附件
+  formData.value.attachments = fileList.value
+    .map(file => file.url)
+    .filter(url => !!url)
 }
 
 // 移除文件
@@ -91,6 +130,7 @@ const handleRemove = ({ file }) => {
   const index = fileList.value.findIndex(item => item.id === file.id)
   if (index > -1) {
     fileList.value.splice(index, 1)
+    updateAttachments()
   }
   return true
 }
@@ -157,8 +197,10 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
             multiple
             :max="2"
             list-type="image-card"
+            :action="uploadUrl"
+            :headers="uploadHeaders"
             :before-upload="beforeUpload"
-            @change="handleUploadChange"
+            @finish="handleUploadFinish"
             @remove="handleRemove"
             :disabled="mode === 'view'"
           >
diff --git a/web/src/views/transaction/invoice/index.vue b/web/src/views/transaction/invoice/index.vue
index 1cc0343..28ac8e1 100644
--- a/web/src/views/transaction/invoice/index.vue
+++ b/web/src/views/transaction/invoice/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
+import dayjs from 'dayjs'
 import { NButton, NInput, NTag, NSelect, NDatePicker } from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
@@ -7,7 +8,7 @@ import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
 import CrudTable from '@/components/table/CrudTable.vue'
 import InvoiceModal from './InvoiceModal.vue'
 
-import { formatDate } from '@/utils'
+import { formatDate, formatDateTime } from '@/utils'
 import api from '@/api'
 
 defineOptions({ name: '开票记录' })
@@ -20,6 +21,18 @@ const vPermission = resolveDirective('permission')
 const invoiceModalVisible = ref(false)
 const invoiceModalMode = ref('view') // 'send' 或 'view'
 const currentInvoice = ref(null)
+const submittedDateRange = ref(null)
+
+const handleDateRangeChange = (val) => {
+  if (val && val.length === 2) {
+    queryItems.value.submitted_start = dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    queryItems.value.submitted_end = dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    queryItems.value.submitted_start = null
+    queryItems.value.submitted_end = null
+  }
+  $table.value?.handleSearch()
+}
 
 // 状态选项
 const statusOptions = [
@@ -57,12 +70,9 @@ const renderInvoiceType = (type) => {
 const columns = [
   {
     title: 'ID',
-    key: 'receiptId',
+    key: 'id',
     width: 80,
     align: 'center',
-    render(row) {
-      return row.receipt?.id || '-'
-    },
   },
   {
     title: '提交时间',
@@ -75,38 +85,25 @@ const columns = [
   },
   {
     title: '付款凭证',
-    key: 'receipt',
+    key: 'receipts',
     width: 140,
     align: 'center',
     render(row) {
-      const list = Array.isArray(row.receipt) ? row.receipt : row.receipt ? [row.receipt] : []
-      const urls = list
-        .map((item) => (typeof item === 'string' ? item : item?.url))
-        .filter(Boolean)
+      const list = Array.isArray(row.receipts) ? row.receipts : []
+      const urls = list.map((item) => item?.url).filter(Boolean)
+
       if (!urls.length) return '-'
       return h(
         'div',
-        { style: 'display:flex; gap:6px; justify-content:center;' },
+        { style: 'display:flex; gap:6px; justify-content:center; align-items: center;' },
         urls.slice(0, 3).map((url, idx) =>
-          h(
-            'a',
-            {
-              href: url,
-              target: '_blank',
-              rel: 'noopener noreferrer',
-              key: `${url}-${idx}`,
-              style: 'display:inline-block',
-            },
-            {
-              default: () =>
-                h('img', {
-                  src: url,
-                  style:
-                    'width:46px;height:46px;object-fit:cover;border-radius:4px;border:1px solid #e5e6eb;',
-                  alt: '付款凭证',
-                }),
-            }
-          )
+          h('img', {
+            src: url,
+            style:
+              'width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid #e5e6eb;cursor:pointer;',
+            alt: '付款凭证',
+            onClick: () => window.open(url, '_blank'),
+          })
         )
       )
     },
@@ -217,37 +214,31 @@ const columns = [
 ]
 
 // 开票按钮：未开票可编辑，其余只读
-async function handleInvoice(row) {
+function handleInvoice(row) {
   const editable = row.status === 'pending'
   invoiceModalMode.value = editable ? 'send' : 'view'
+  currentInvoice.value = row
   invoiceModalVisible.value = true
-  await fetchDetail(row)
-}
-
-async function fetchDetail(row) {
-  try {
-    const id = row?.receipt?.id || row.id
-    const { data } = await api.getInvoiceById({ id })
-    currentInvoice.value = data || row
-  } catch (error) {
-    currentInvoice.value = row
-    $message.error(error?.message || '获取详情失败')
-  }
 }
 
 // 确认发送邮件
-async function handleInvoiceConfirm(data) {
+// 确认发送邮件
+async function handleInvoiceConfirm(formData) {
   try {
-    await api.sendInvoice({
-      email: data.email,
-      subject: data.subject,
-      body: data.body,
-      file_url: data.file_url || currentInvoice.value?.receipt?.url,
-    })
+    const payload = {
+      receipt_id: formData.id,
+      email: formData.email,
+      subject: formData.email, // 用户要求 subject 传 email
+      body: formData.content,  // 映射 content -> body
+      file_url: formData.attachments?.[0] || '', // 映射 attachments -> file_url
+    }
+    
+    await api.sendInvoice(payload)
     $message.success('发送成功')
     invoiceModalVisible.value = false
     $table.value?.handleSearch()
   } catch (error) {
+    console.error(error)
     $message.error(error?.message || '操作失败')
   }
 }
@@ -267,12 +258,12 @@ async function handleInvoiceConfirm(data) {
       <template #queryBar>
         <QueryBarItem label="提交时间" :label-width="80">
           <NDatePicker
-            v-model:value="queryItems.submitted_at"
+            v-model:value="submittedDateRange"
             type="daterange"
             clearable
             placeholder="请选择提交时间"
             style="width: 280px"
-            @update:value="$table?.handleSearch()"
+            @update:value="handleDateRangeChange"
           />
         </QueryBarItem>
         <QueryBarItem label="手机号" :label-width="80">
diff --git a/web/src/views/transaction/receipts/index.vue b/web/src/views/transaction/receipts/index.vue
index 40e9a55..c834601 100644
--- a/web/src/views/transaction/receipts/index.vue
+++ b/web/src/views/transaction/receipts/index.vue
@@ -1,18 +1,31 @@
 <script setup>
 import { h, onMounted, ref } from 'vue'
+import dayjs from 'dayjs'
 import { NTag, NButton, NInput, NSelect, NDatePicker } from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
 import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
 import CrudTable from '@/components/table/CrudTable.vue'
 
-import { formatDate } from '@/utils'
+import { formatDate, formatDateTime } from '@/utils'
 import api from '@/api'
 
 defineOptions({ name: '交易记录' })
 
 const $table = ref(null)
 const queryItems = ref({})
+const submittedDateRange = ref(null)
+
+const handleDateRangeChange = (val) => {
+  if (val && val.length === 2) {
+    queryItems.value.submitted_start = dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    queryItems.value.submitted_end = dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    queryItems.value.submitted_start = null
+    queryItems.value.submitted_end = null
+  }
+  $table.value?.handleSearch()
+}
 
 const statusOptions = [
   { label: '全部', value: '' },
@@ -83,12 +96,12 @@ const columns = [
       <template #queryBar>
         <QueryBarItem label="凭证时间" :label-width="80">
           <NDatePicker
-            v-model:value="queryItems.created_at"
+            v-model:value="submittedDateRange"
             type="daterange"
             clearable
             placeholder="请选择凭证时间"
             style="width: 280px"
-            @update:value="$table?.handleSearch()"
+            @update:value="handleDateRangeChange"
           />
         </QueryBarItem>
         <QueryBarItem label="手机号" :label-width="80">
diff --git a/web/src/views/user-management/user-list/UserDetailModal.vue b/web/src/views/user-management/user-list/UserDetailModal.vue
index f435221..e3a2247 100644
--- a/web/src/views/user-management/user-list/UserDetailModal.vue
+++ b/web/src/views/user-management/user-list/UserDetailModal.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch, h } from 'vue'
 import { NModal, NButton, NTabs, NTabPane, NDataTable, NSpin } from 'naive-ui'
+import { formatDate } from '@/utils'
 
 const props = defineProps({
   visible: {
@@ -45,7 +46,14 @@ const invoiceColumns = [
 ]
 
 const logColumns = [
-  { title: '操作时间', key: 'operation_time', width: 180 },
+  {
+    title: '操作时间',
+    key: 'created_at',
+    width: 180,
+    render(row) {
+      return row.created_at ? formatDate(row.created_at, 'YYYY-MM-DD HH:mm:ss') : '-'
+    },
+  },
   { title: '操作人', key: 'operator_name', width: 120 },
   { title: '操作记录', key: 'operation_detail', ellipsis: { tooltip: true } },
 ]
diff --git a/web/src/views/valuation/audit/components/AuditDetail.vue b/web/src/views/valuation/audit/components/AuditDetail.vue
index f40b89d..5a25ddb 100644
--- a/web/src/views/valuation/audit/components/AuditDetail.vue
+++ b/web/src/views/valuation/audit/components/AuditDetail.vue
@@ -60,9 +60,9 @@ const detailSections = computed(() => {
       fields: [
         { label: '资产名称', type: 'text', value: detail.asset_name || '-' },
         { label: '所属机构/权利人', type: 'text', value: detail.institution || '-' },
-        { label: '统一社会信用代码/身份证号', type: 'text', value: detail.credit_code || '-' },
+        { label: '统一社会信用代码/身份证号', type: 'text', value: detail.credit_code || detail.credit_code_or_id || '-' },
         { label: '所属行业', type: 'text', value: detail.industry || '-' },
-        { label: '业务/传承介绍', type: 'text', value: detail.business_heritage_intro || '-' },
+        { label: '业务/传承介绍', type: 'text', value: detail.business_heritage_intro || detail.biz_intro || '-' },
       ],
     },
     {
@@ -80,9 +80,13 @@ const detailSections = computed(() => {
       title: '非遗等级与技术',
       fields: [
         { label: '非遗传承人等级', type: 'text', value: detail.inheritor_level || '-' },
-        { label: '非遗传承人年龄水平及数量', type: 'list', value: formatAgeDistribution(detail.inheritor_age_count) },
+        {
+          label: '非遗传承人年龄水平及数量',
+          type: 'list',
+          value: formatAgeDistribution(detail.inheritor_age_count || detail.inheritor_ages),
+        },
         { label: '非遗传承人等级证书', type: 'images', value: detail.inheritor_certificates || [] },
-        { label: '非遗等级', type: 'text', value: detail.heritage_level || '-' },
+        { label: '非遗等级', type: 'text', value: detail.heritage_level || detail.heritage_asset_level || '-' },
         { label: '非遗资产所用专利的申请号', type: 'text', value: detail.patent_application_no || '-' },
         { label: '非遗资产历史证明证据及数量', type: 'list', value: formatHistoricalEvidence(detail.historical_evidence) },
         {
@@ -99,7 +103,11 @@ const detailSections = computed(() => {
         { 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 || '-' },
-        { label: '近12个月线下相关宣讲活动次数', type: 'text', value: formatNumberValue(detail.offline_activities) },
+        {
+          label: '近12个月线下相关宣讲活动次数',
+          type: 'text',
+          value: formatNumberValue(detail.offline_activities ?? detail.offline_teaching_count),
+        },
         { label: '线上相关宣传账号信息', type: 'list', value: formatPlatformAccounts(detail.platform_accounts) },
       ],
     },
diff --git a/web/src/views/valuation/audit/constants.js b/web/src/views/valuation/audit/constants.js
index aa23f6a..f55aa27 100644
--- a/web/src/views/valuation/audit/constants.js
+++ b/web/src/views/valuation/audit/constants.js
@@ -1,12 +1,16 @@
 export const STATUS_OPTIONS = [
   { label: '全部', value: '' },
   { label: '待审核', value: 'pending' },
-  { label: '已完成', value: 'approved' },
+  { label: '已通过', value: 'approved' },
+  { label: '已拒绝', value: 'rejected' },
+  { label: '已完成', value: 'success' },
 ]
 
 export const STATUS_MAP = {
   pending: { type: 'warning', text: '待审核' },
-  approved: { type: 'success', text: '已完成' },
+  approved: { type: 'success', text: '已通过' },
+  rejected: { type: 'error', text: '已拒绝' },
+  success: { type: 'success', text: '已完成' },
 }
 
 export const getStatusConfig = (status) => STATUS_MAP[status] || { type: 'default', text: '未知' }
diff --git a/web/src/views/valuation/audit/index.vue b/web/src/views/valuation/audit/index.vue
index e24c71c..0fb1751 100644
--- a/web/src/views/valuation/audit/index.vue
+++ b/web/src/views/valuation/audit/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { h, onMounted, ref, watch } from 'vue'
+import dayjs from 'dayjs'
 import { useRoute, useRouter } from 'vue-router'
 import {
   NButton,
@@ -29,6 +30,30 @@ const router = useRouter()
 const route = useRoute()
 const $table = ref(null)
 const queryItems = ref({})
+const submittedDateRange = ref(null)
+const auditedDateRange = ref(null)
+
+const handleSubmittedDateRangeChange = (val) => {
+  if (val && val.length === 2) {
+    queryItems.value.submitted_start = dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    queryItems.value.submitted_end = dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    queryItems.value.submitted_start = null
+    queryItems.value.submitted_end = null
+  }
+  $table.value?.handleSearch()
+}
+
+const handleAuditedDateRangeChange = (val) => {
+  if (val && val.length === 2) {
+    queryItems.value.audited_start = dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    queryItems.value.audited_end = dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    queryItems.value.audited_start = null
+    queryItems.value.audited_end = null
+  }
+  $table.value?.handleSearch()
+}
 
 // 列表与详情公共方法
 const renderStatus = (status) => {
@@ -36,30 +61,44 @@ const renderStatus = (status) => {
   return h(NTag, { type: config.type }, { default: () => config.text })
 }
 
+const getValuationResult = (row) => {
+  if (row?.final_value_ab !== undefined && row.final_value_ab !== null) return row.final_value_ab
+  if (row?.market_value_c !== undefined && row.market_value_c !== null) return row.market_value_c
+  if (row?.model_value_b !== undefined && row.model_value_b !== null) return row.model_value_b
+  return row?.valuation_result
+}
+
 // 列定义
 const columns = [
   { title: '编号', key: 'id', width: 80, align: 'center' },
   {
     title: '手机号',
-    key: 'phone',
-    width: 120,
-    align: 'center',
-    ellipsis: { tooltip: true },
-  },
-  {
-    title: '微信号',
-    key: 'wechat',
+    key: 'user_phone',
     width: 120,
     align: 'center',
     ellipsis: { tooltip: true },
+    render(row) {
+      return row.user_phone || row.user?.phone || '-'
+    },
   },
+  // {
+  //   title: '微信号',
+  //   key: 'wechat',
+  //   width: 120,
+  //   align: 'center',
+  //   ellipsis: { tooltip: true },
+  //   render(row) {
+  //     return row.wechat || row.user_wechat || row.user?.wechat || '-'
+  //   },
+  // },
   {
     title: '评估结果',
     key: 'valuation_result',
     width: 120,
     align: 'center',
     render(row) {
-      return formatAmount(row.valuation_result)
+      const val = getValuationResult(row)
+      return val || val === 0 ? formatAmount(val) : '-'
     },
   },
   {
@@ -110,7 +149,7 @@ const columns = [
           }
         )
       }
-      if (row.status === 'approved') {
+      if (['approved', 'rejected', 'success'].includes(row.status)) {
         return h(
           NButton,
           {
@@ -286,7 +325,7 @@ watch(
               @keypress.enter="$table?.handleSearch()"
             />
           </QueryBarItem>
-          <QueryBarItem label="微信号" :label-width="80">
+          <!-- <QueryBarItem label="微信号" :label-width="80">
             <NInput
               v-model:value="queryItems.wechat"
               clearable
@@ -295,25 +334,25 @@ watch(
               style="width: 200px"
               @keypress.enter="$table?.handleSearch()"
             />
-          </QueryBarItem>
+          </QueryBarItem> -->
           <QueryBarItem label="提交时间" :label-width="80">
             <NDatePicker
-              v-model:value="queryItems.created_at"
+              v-model:value="submittedDateRange"
               type="daterange"
               clearable
               placeholder="请选择提交时间"
               style="width: 280px"
-              @update:value="$table?.handleSearch()"
+              @update:value="handleSubmittedDateRangeChange"
             />
           </QueryBarItem>
           <QueryBarItem label="审核时间" :label-width="80">
             <NDatePicker
-              v-model:value="queryItems.reviewed_at"
+              v-model:value="auditedDateRange"
               type="daterange"
               clearable
               placeholder="请选择审核时间"
               style="width: 280px"
-              @update:value="$table?.handleSearch()"
+              @update:value="handleAuditedDateRangeChange"
             />
           </QueryBarItem>
           <QueryBarItem label="状态" :label-width="80">
@@ -328,12 +367,6 @@ watch(
           </QueryBarItem>
         </template>
 
-        <template #action>
-          <NButton type="primary" @click="handleAddContent">
-            <TheIcon icon="mdi:plus" :size="18" class="mr-5" />
-            新增文案设置
-          </NButton>
-        </template>
       </CrudTable>
     </template>
 
diff --git a/web1/src/api/index.js b/web1/src/api/index.js
index c1b2dd2..b8c470b 100644
--- a/web1/src/api/index.js
+++ b/web1/src/api/index.js
@@ -8,6 +8,8 @@ export default {
   // 手机号
   registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
   loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
+  // 估值次数
+  userQuota: () => request.get('/app-user/quota'),
   // 短信验证码
   sendVerifyCode: (data) => request.post('/sms/send-code', data, { noNeedToken: true }),
   loginWithVerifyCode: (data) => request.post('/sms/login', data, { noNeedToken: true }),
diff --git a/web1/src/assets/icon/估值记录.png b/web1/src/assets/icon/估值记录.png
new file mode 100644
index 0000000..1e25905
Binary files /dev/null and b/web1/src/assets/icon/估值记录.png differ
diff --git a/web1/src/assets/icon/对公转账.png b/web1/src/assets/icon/对公转账.png
new file mode 100644
index 0000000..f0066ac
Binary files /dev/null and b/web1/src/assets/icon/对公转账.png differ
diff --git a/web1/src/assets/icon/报告.png b/web1/src/assets/icon/报告.png
new file mode 100644
index 0000000..d90fa45
Binary files /dev/null and b/web1/src/assets/icon/报告.png differ
diff --git a/web1/src/assets/icon/抬头管理.png b/web1/src/assets/icon/抬头管理.png
new file mode 100644
index 0000000..569096f
Binary files /dev/null and b/web1/src/assets/icon/抬头管理.png differ
diff --git a/web1/src/assets/icon/证书.png b/web1/src/assets/icon/证书.png
new file mode 100644
index 0000000..bc70e1c
Binary files /dev/null and b/web1/src/assets/icon/证书.png differ
diff --git a/web1/src/assets/img/home_bg.png b/web1/src/assets/img/home_bg.png
new file mode 100644
index 0000000..935de32
Binary files /dev/null and b/web1/src/assets/img/home_bg.png differ
diff --git a/web1/src/assets/img/icon_checkbox.png b/web1/src/assets/img/icon_checkbox.png
new file mode 100644
index 0000000..94b0d3d
Binary files /dev/null and b/web1/src/assets/img/icon_checkbox.png differ
diff --git a/web1/src/assets/img/icon_code.png b/web1/src/assets/img/icon_code.png
new file mode 100644
index 0000000..33840e6
Binary files /dev/null and b/web1/src/assets/img/icon_code.png differ
diff --git a/web1/src/assets/img/icon_user.png b/web1/src/assets/img/icon_user.png
new file mode 100644
index 0000000..386c489
Binary files /dev/null and b/web1/src/assets/img/icon_user.png differ
diff --git a/web1/src/assets/img/login_bg_full.png b/web1/src/assets/img/login_bg_full.png
new file mode 100644
index 0000000..20621a2
Binary files /dev/null and b/web1/src/assets/img/login_bg_full.png differ
diff --git a/web1/src/assets/img/login_box_left.png b/web1/src/assets/img/login_box_left.png
new file mode 100644
index 0000000..3899c25
Binary files /dev/null and b/web1/src/assets/img/login_box_left.png differ
diff --git a/web1/src/assets/img/login_btn_bg.png b/web1/src/assets/img/login_btn_bg.png
new file mode 100644
index 0000000..bdaecfc
Binary files /dev/null and b/web1/src/assets/img/login_btn_bg.png differ
diff --git a/web1/src/assets/img/login_title.png b/web1/src/assets/img/login_title.png
new file mode 100644
index 0000000..89e0ab7
Binary files /dev/null and b/web1/src/assets/img/login_title.png differ
diff --git a/web1/src/components/AppHeader.vue b/web1/src/components/AppHeader.vue
new file mode 100644
index 0000000..b61e813
--- /dev/null
+++ b/web1/src/components/AppHeader.vue
@@ -0,0 +1,100 @@
+<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: #fff;
+  border: 1px solid #EBEEF5;
+  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>
diff --git a/web1/src/router/routes/index.js b/web1/src/router/routes/index.js
index 3ba5200..9943186 100644
--- a/web1/src/router/routes/index.js
+++ b/web1/src/router/routes/index.js
@@ -49,7 +49,7 @@ export const basicRoutes = [
         path: 'invoice',
         component: () => import('@/views/user-center/components/InvoiceManagement.vue'),
         meta: {
-          title: '开票管理',
+          title: '抬头管理',
         },
       },
     ],
diff --git a/web1/src/views/home/index.vue b/web1/src/views/home/index.vue
index 978373d..7168922 100644
--- a/web1/src/views/home/index.vue
+++ b/web1/src/views/home/index.vue
@@ -1,162 +1,142 @@
 <template>
   <div class="home-container">
-    <div class="header">
-      <div class="logo-section">
-        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
-        <div class="user-center" @click="handleUserCenter">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
-            <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <span>个人中心</span>
-        </div>
-      </div>
-    </div>
+    <AppHeader />
     
-    <div class="content">
-      <div class="title-section">
+    <div class="content-wrapper">
+      <div class="glass-card">
+        <div class="card-logo">
+          <img src="@/assets/images/logo.png" alt="logo" />
+        </div>
         <h1 class="main-title">非遗IP价值评估系统</h1>
         <p class="subtitle">基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务</p>
-      </div>
-      
-      <div class="action-section">
-        <n-button
-          type="primary"
-          size="large"
-          class="start-btn"
-          @click="handleStartEvaluation"
-        >
-          开始评估
-        </n-button>
+        
+        <div class="action-section">
+          <button class="start-btn" @click="handleStartEvaluation">
+            开始评估
+            <img src="@/assets/images/go.png" alt="arrow" class="arrow-icon" />
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+import AppHeader from '@/components/AppHeader.vue'
+
 const router = useRouter()
 
 function handleStartEvaluation() {
   router.push('/pages')
 }
-
-function handleUserCenter() {
-  router.push('/user-center')
-}
 </script>
 
 <style scoped>
 .home-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+  width: 100%;
+  background-image: url('@/assets/img/home_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
+  position: relative;
+  overflow: hidden;
 }
 
-.header {
-  padding: 20px 40px;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
 
-.logo-section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.logo {
-  height: 32px;
-  width: auto;
-}
-
-.user-center {
-  font-size: 16px;
-  color: #303133;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-
-.user-center:hover {
-  background: rgba(136, 12, 34, 0.05);
-  color: #880C22;
-}
-
-.user-center svg {
-  color: currentColor;
-}
-
-.content {
+.content-wrapper {
   flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 20px;
+  padding: 20px;
 }
 
-.title-section {
+.glass-card {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 60px 80px;
   text-align: center;
-  margin-bottom: 60px;
+  max-width: 900px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card-logo {
+  margin-bottom: 30px;
+}
+
+.card-logo img {
+  height: 48px;
+  width: auto;
 }
 
 .main-title {
   font-size: 48px;
-  font-weight: 600;
-  color: #303133;
-  line-height: 1.2;
-  margin: 0 0 20px 0;
+  font-weight: 800;
+  color: #333;
+  margin-bottom: 24px;
+  letter-spacing: 2px;
 }
 
 .subtitle {
   font-size: 16px;
-  color: #606266;
-  line-height: 1.6;
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.action-section {
-  display: flex;
-  justify-content: center;
+  color: #555;
+  line-height: 1.8;
+  max-width: 600px;
+  margin: 0 auto 50px;
 }
 
 .start-btn {
-  height: 50px;
-  padding: 0 60px;
-  font-size: 18px;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
+  background: linear-gradient(90deg, #880C22 0%, #B81C36 100%);
+  color: white;
   border: none;
+  padding: 12px 40px;
+  font-size: 18px;
   border-radius: 8px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(136, 12, 34, 0.3);
 }
 
 .start-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(136, 12, 34, 0.3);
+  box-shadow: 0 6px 16px rgba(136, 12, 34, 0.4);
+}
+
+.arrow-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
 }
 
 @media (max-width: 768px) {
+  .glass-card {
+    padding: 40px 20px;
+  }
+
   .main-title {
     font-size: 32px;
   }
-  
+
   .subtitle {
     font-size: 14px;
   }
   
-  .start-btn {
-    height: 44px;
-    padding: 0 40px;
-    font-size: 16px;
+  .header {
+    padding: 15px 20px;
   }
 }
 </style>
diff --git a/web1/src/views/login/index.vue b/web1/src/views/login/index.vue
index f97b9de..5512af6 100644
--- a/web1/src/views/login/index.vue
+++ b/web1/src/views/login/index.vue
@@ -1,124 +1,181 @@
 <template>
-  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
-    <div
-      style="transform: translateY(25px)"
-      class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
-      dark:bg-dark
-    >
-      <div w-750 px-20 style="height: 480px; padding-top: 50px; text-align: center;">
-        <img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
-        <div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
-          非遗IP价值评估系统
+  <div class="page flex-col">
+    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
+      <div class="box_1 flex-row">
+        <div class="section_2 flex-col">
+          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
         </div>
-        <div style="text-align: center; margin-top: 16px; color: #606266;">
-          基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
-        </div>
-        <div mt-30>
-          <n-input
-            v-model:value="loginInfo.phone"
-            style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
-            placeholder="请输入手机号"
-            :maxlength="11"
-            @keypress.enter="handleLogin"
+        <div class="section_3 flex-col">
+          <img class="image_1" referrerpolicy="no-referrer" :src="loginTitleImg" />
+          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
+            <n-form-item path="phone">
+              <div class="block_1 flex-row">
+                <div class="image-text_1 flex-row">
+                  <img class="thumbnail_1" referrerpolicy="no-referrer" :src="iconUserImg" />
+                  <n-input
+                    v-model:value="loginInfo.phone"
+                    class="input-reset text-group_1 custom-n-input"
+                    placeholder="请输入账号"
+                    type="text"
+                    :bordered="false"
+                    @keypress.enter="handleLogin"
+                  />
+                </div>
+              </div>
+            </n-form-item>
+            <div class="block_2 flex-row justify-between">
+              <n-form-item path="verifyCode" class="verify-code-item">
+                <div class="section_4 flex-row">
+                  <div class="image-text_2 flex-row">
+                    <img class="thumbnail_2" referrerpolicy="no-referrer" :src="iconCodeImg" />
+                    <n-input
+                      v-model:value="loginInfo.verifyCode"
+                      class="input-reset text-group_2 custom-n-input"
+                      placeholder="请输入验证码"
+                      type="text"
+                      :bordered="false"
+                      @keypress.enter="handleLogin"
+                    />
+                  </div>
+                </div>
+              </n-form-item>
+              <div
+                class="text-wrapper_1 flex-col cursor-pointer"
+                @click="handleSendCode"
+                :class="{ disabled: countdown > 0 }"
+              >
+                <span class="text_1">{{
+                  countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码'
+                }}</span>
+              </div>
+            </div>
+          </n-form>
+          <div class="block_3 flex-row">
+            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
+              <span class="text-group_3">阅读并同意</span>
+              <span class="text_2" @click.stop="handleOpenAgreement">《用户协议》</span>
+            </n-checkbox>
+          </div>
+          
+          <!-- User Agreement Modal -->
+          <n-modal
+            v-model:show="showAgreement"
+            preset="card"
+            title="用户服务协议"
+            style="width: 800px; max-width: 90vw;"
+            :bordered="false"
           >
-           <template #prefix>
-            <img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
-          </template>
-          </n-input>
-
-          <n-button
-            w-126
-            h-42
-            rounded-5
-            type="primary"
-            style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
+            <div class="agreement-content" style="max-height: 60vh; overflow-y: auto; padding: 0 10px;">
+              <h3>特别提示</h3>
+              <p>在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。</p>
+              <p>本协议约定成都文化产权交易所有限公司（以下简称“成都文交所”）与用户之间关于“IP文产通”平台服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由成都文交所随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不另行通知，用户可在本网站查阅最新版协议条款。在成都文交所修改协议条款后，如果用户不接受修改后的条款，请立即停止使用成都文交所提供的服务，用户继续使用成都文交所提供的服务将被视为接受修改后的协议。</p>
+              
+              <h3>一、服务内容</h3>
+              <p>1.1 本服务的具体内容由成都文交所根据实际情况提供，包括但不限于授权用户通过其账号进行相关操作。</p>
+              <p>1.2 成都文交所提供的服务仅限于平台上的相关功能，用户在使用服务时应遵守相关法律法规及本协议的规定。</p>
+              
+              <h3>二、用户账号</h3>
+              <p>2.1 用户在使用本服务前需要注册一个账号。账号注册过程中，用户应提供真实、准确、完整的个人资料。</p>
+              <p>2.2 用户有责任妥善保管注册账号信息及账号密码的安全，因用户保管不善可能导致遭受盗号或密码失窃，责任由用户自行承担。</p>
+              
+              <h3>三、用户个人信息保护</h3>
+              <p>3.1 保护用户个人信息是成都文交所的一项基本原则，成都文交所将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可成都文交所不会向第三方公开、透露用户个人信息。</p>
+              
+              <br/>
+              <!-- <p style="color: #999; text-align: center; font-size: 12px;">(以上内容为示例，请替换为完整版《用户服务协议（暂行）》)</p> -->
+            </div>
+          </n-modal>
+          <div
+            class="text-wrapper_2 flex-col cursor-pointer"
             @click="handleLogin"
+            :style="{ backgroundImage: `url(${loginBtnBg})` }"
           >
-            立即登录
-            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
-          </n-button>
-        </div>
-        
-        <div mt-20 style="display: flex; justify-content: center; align-items: center;">
-          <n-input
-            v-model:value="loginInfo.verifyCode"
-            style="width: 260px; height: 42px;"
-            placeholder="验证码"
-            :maxlength="6"
-            @keypress.enter="handleLogin"
-          />
-          <n-button
-            style="width: 126px; height: 42px; margin-left: 12px; font-size: 14px;"
-            :disabled="countdown > 0"
-            @click="handleSendCode"
-          >
-            {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
-          </n-button>
+            <span class="text_3">立即登录</span>
+          </div>
         </div>
       </div>
     </div>
-  </AppPage>
+  </div>
 </template>
 
 <script setup>
-import { lStorage, setToken } from '@/utils'
-import bgImg from '@/assets/images/login_bg.png'
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { setToken } from '@/utils'
 import api from '@/api'
-import { addDynamicRoutes } from '@/router'
-import { useI18n } from 'vue-i18n'
+
+// Images
+import loginTitleImg from '@/assets/img/login_title.png'
+import iconUserImg from '@/assets/img/icon_user.png'
+import iconCodeImg from '@/assets/img/icon_code.png'
+import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
+import loginBgFull from '@/assets/img/login_bg_full.png'
+import loginBoxLeft from '@/assets/img/login_box_left.png'
+import loginBtnBg from '@/assets/img/login_btn_bg.png'
 
 const router = useRouter()
 const { query } = useRoute()
-const { t } = useI18n({ useScope: 'global' })
 
 const loginInfo = ref({
   phone: '',
   verifyCode: '',
+  requestId: '',
 })
 
+const isAgreed = ref(false)
+const showAgreement = ref(false)
 const countdown = ref(0)
 let countdownTimer = null
-
-initLoginInfo()
-
-function initLoginInfo() {
-  if(localStorage.getItem('phone')){
-    loginInfo.value.phone = localStorage.getItem('phone')
-  }
-  // const localLoginInfo = lStorage.get('loginInfo')
-  // if (localLoginInfo) {
-  //   loginInfo.value.phone = localLoginInfo.phone || ''
-  //   loginInfo.value.password = localLoginInfo.password || ''
-  // }
-}
-
 const loading = ref(false)
 
-// 验证手机号格式
+// Open Agreement Modal
+function handleOpenAgreement() {
+  showAgreement.value = true
+}
+
+
+// Initialize login info
+if (localStorage.getItem('phone')) {
+  loginInfo.value.phone = localStorage.getItem('phone')
+}
+
+const formRef = ref(null)
+const rules = {
+  phone: [
+    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] },
+  ],
+  verifyCode: [{ required: true, message: '请输入验证码', trigger: ['input', 'blur'] }],
+}
+
+// Validate phone
 function validatePhone(phone) {
   const phoneReg = /^1[3-9]\d{9}$/
   return phoneReg.test(phone)
 }
 
-// 发送验证码
+// Send verification code
 async function handleSendCode() {
+  if (countdown.value > 0) return
+
   const { phone } = loginInfo.value
-  
+
   if (!phone) {
     $message.warning('请输入手机号')
     return
   }
-  
+
   if (!validatePhone(phone)) {
     $message.warning('请输入正确的手机号')
     return
   }
-  
+
   try {
-    await api.sendVerifyCode({ phone })
+    const res = await api.sendVerifyCode({ phone })
+    loginInfo.value.requestId = res.data.request_id
     $message.success('验证码已发送')
-    
-    // 开始倒计时
+
+    // Start countdown
     countdown.value = 60
     countdownTimer = setInterval(() => {
       countdown.value--
@@ -127,61 +184,52 @@ async function handleSendCode() {
         countdownTimer = null
       }
     }, 1000)
-  } catch (error) {
-    // error is handled by interceptor usually, but we can catch specific ones if needed
-  }
-}
-
-// 登录
-async function handleLogin() {
-  const { phone, verifyCode } = loginInfo.value
-  
-  if (!phone) {
-    $message.warning('请输入手机号')
-    return
-  }
-  
-  if (!validatePhone(phone)) {
-    $message.warning('请输入正确的手机号')
-    return
-  }
-  
-  if (!verifyCode) {
-    $message.warning('请输入验证码')
-    return
-  }
-  
-  if (verifyCode.length < 4) {
-    $message.warning('请输入完整的验证码')
-    return
-  }
-  
-  loading.value = true
-  
-  try {
-    const res = await api.loginWithVerifyCode({ phone, code: verifyCode })
-    if (res.data?.access_token) {
-      setToken(res.data.access_token)
-      localStorage.setItem('phone', phone)
-      
-      if (query.redirect) {
-        const path = query.redirect
-        Reflect.deleteProperty(query, 'redirect')
-        router.push({ path, query })
-      } else {
-        router.push('/home')
-      }
-    } else {
-       $message.error('登录失败：未获取到token')
-    }
   } catch (error) {
     console.error(error)
-  } finally {
-    loading.value = false
   }
 }
 
-// 组件卸载时清除定时器
+// Login
+async function handleLogin() {
+  const { phone, verifyCode, requestId } = loginInfo.value
+
+  if (!isAgreed.value) {
+    $message.warning('请阅读并同意用户协议')
+    return
+  }
+
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      loading.value = true
+      try {
+        const res = await api.loginWithVerifyCode({
+          phone_number: phone,
+          verification_code: verifyCode,
+          device_id: requestId,
+        })
+        if (res.data?.token?.access_token) {
+          setToken(res.data.token.access_token)
+          localStorage.setItem('phone', phone)
+
+          if (query.redirect) {
+            const path = query.redirect
+            Reflect.deleteProperty(query, 'redirect')
+            router.push({ path, query })
+          } else {
+            router.push('/home')
+          }
+        } else {
+          $message.error('登录失败：未获取到token')
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
 onBeforeUnmount(() => {
   if (countdownTimer) {
     clearInterval(countdownTimer)
@@ -189,3 +237,409 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+
+<style scoped>
+/* Utility Classes */
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.input-reset {
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Page Styles */
+.page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f0f2f5; /* Fallback */
+}
+
+.section_1 {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.box_1 {
+  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
+  background-color: rgba(255, 255, 255, 1);
+  width: 900px;
+  height: 500px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section_2 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 0px 100px 0px 0px;
+  height: 500px;
+  width: 400px;
+  position: relative;
+  overflow: hidden;
+}
+
+.group_1 {
+  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
+  width: 841px;
+  height: 500px;
+  margin-left: -270px;
+  background-repeat: no-repeat;
+  /* Ensure the image covers this specific area if needed, or default */
+}
+
+.section_3 {
+  width: 331px;
+  height: 298px;
+  margin: 101px 85px 0 84px;
+}
+
+.image_1 {
+  width: 260px;
+  height: 42px;
+  margin-left: 1px;
+  /* Removed object-fit: contain to match reference behavior */
+}
+
+.block_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 330px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  margin: 50px 0 0 1px;
+  align-items: center;
+}
+
+.image-text_1 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_1 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_1::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.block_2 {
+  width: 330px;
+  height: 42px;
+  margin: 20px 0 0 1px;
+  align-items: center;
+}
+
+.section_4 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 191px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  align-items: center;
+}
+
+.image-text_2 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_2 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_2 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_2::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.text-wrapper_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  width: 131px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) {
+  border-color: rgba(163, 1, 19, 1);
+  background-color: rgba(163, 1, 19, 0.05);
+}
+
+.text-wrapper_1:active:not(.disabled) {
+  transform: scale(0.98);
+}
+
+.text_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) .text_1 {
+  color: rgba(163, 1, 19, 1);
+}
+
+.block_3 {
+  width: 100%;
+  margin-top: 36px;
+  align-items: center;
+}
+
+.text-group_3 {
+  color: rgba(136, 136, 136, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  margin-right: 4px;
+}
+
+.text_2 {
+  color: rgba(163, 1, 19, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.text_2:hover {
+  text-decoration: underline;
+  color: rgba(180, 1, 21, 1);
+}
+
+.text-wrapper_2 {
+  height: 42px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 330px;
+  margin: 10px 0 0 1px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.text-wrapper_2:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
+}
+
+.text-wrapper_2:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
+}
+
+.text_3 {
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_2:hover .text_3 {
+  letter-spacing: 1px;
+}
+
+/* Custom Naive UI Overrides */
+.custom-n-input {
+  background-color: transparent !important;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-n-input :deep(.n-input-wrapper) {
+  padding: 0 !important;
+}
+
+.custom-n-input :deep(.n-input__input-el) {
+  height: 16px !important;
+  line-height: 16px !important;
+  color: rgba(48, 49, 51, 1);
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+}
+
+.custom-n-input :deep(.n-input__placeholder) {
+  color: rgba(189, 189, 189, 1) !important;
+}
+
+.custom-n-input :deep(.n-input__state-border),
+.custom-n-input :deep(.n-input__border) {
+  display: none !important;
+}
+
+/* Fix Form Item Layout to prevent shifts */
+:deep(.n-form-item-feedback-wrapper) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding-top: 2px;
+  line-height: 1;
+}
+
+:deep(.n-form-item) {
+  display: block;
+  margin-bottom: 0 !important;
+}
+
+/* Ensure the code input item doesn't break flex layout */
+.verify-code-item {
+  flex: 1;
+  /* The section_4 inside has fixed width, so we just let it be */
+  max-width: 191px;
+}
+
+/* Input Container Interactions */
+.block_1,
+.section_4 {
+  transition: all 0.3s ease;
+}
+
+.block_1:hover,
+.section_4:hover {
+  border-color: rgba(163, 1, 19, 0.5);
+}
+
+.block_1:focus-within,
+.section_4:focus-within {
+  border-color: rgba(163, 1, 19, 1);
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
+}
+
+/* Error State Styling */
+:deep(.n-form-item.n-form-item--error) .block_1,
+:deep(.n-form-item.n-form-item--error) .section_4 {
+  border-color: #d03050;
+}
+
+:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
+:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
+  border-color: #d03050;
+  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
+}
+
+/* Checkbox Customization */
+:deep(.agreement-checkbox .n-checkbox-box) {
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+/* Checked State - Solid Red */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
+  background-color: rgba(163, 1, 19, 1) !important;
+  border: 1px solid rgba(163, 1, 19, 1) !important;
+}
+
+/* Hide the separate border element when checked to prevent color overlap/double borders */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
+  display: none !important;
+}
+
+/* Hover State - Red Border */
+:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+/* Focus State - Red Border & Shadow */
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
+}
+
+/* Ensure checkmark is white */
+:deep(.agreement-checkbox .n-checkbox-icon) {
+  color: #fff !important;
+}
+
+/* Agreement Modal Styles */
+.agreement-content {
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+
+.agreement-content h3 {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.agreement-content p {
+  margin-bottom: 12px;
+  text-align: justify;
+  font-size: 14px;
+}
+</style>
diff --git a/web1/src/views/login/index.vue.backup b/web1/src/views/login/index.vue.backup
new file mode 100644
index 0000000..65d50f9
--- /dev/null
+++ b/web1/src/views/login/index.vue.backup
@@ -0,0 +1,601 @@
+<template>
+  <div class="page flex-col">
+    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
+      <div class="box_1 flex-row">
+        <div class="section_2 flex-col">
+          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
+        </div>
+        <div class="section_3 flex-col">
+          <img
+            class="image_1"
+            referrerpolicy="no-referrer"
+            :src="loginTitleImg"
+          />
+          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
+            <n-form-item path="phone">
+              <div class="block_1 flex-row" @click="phoneInputRef?.focus()">
+                <div class="image-text_1 flex-row">
+                  <img
+                    class="thumbnail_1"
+                    referrerpolicy="no-referrer"
+                    :src="iconUserImg"
+                  />
+                  <n-input
+                    ref="phoneInputRef"
+                    v-model:value="loginInfo.phone"
+                    class="input-reset text-group_1 custom-n-input"
+                    placeholder="请输入账号"
+                    type="text"
+                    :bordered="false"
+                    @keypress.enter="handleLogin"
+                  />
+                </div>
+              </div>
+            </n-form-item>
+            <div class="block_2 flex-row justify-between">
+              <n-form-item path="verifyCode" class="verify-code-item">
+                <div class="section_4 flex-row" @click="codeInputRef?.focus()">
+                  <div class="image-text_2 flex-row">
+                    <img
+                      class="thumbnail_2"
+                      referrerpolicy="no-referrer"
+                      :src="iconCodeImg"
+                    />
+                    <n-input
+                      ref="codeInputRef"
+                      v-model:value="loginInfo.verifyCode"
+                      class="input-reset text-group_2 custom-n-input"
+                      placeholder="请输入验证码"
+                      type="text"
+                      :bordered="false"
+                      @keypress.enter="handleLogin"
+                    />
+                  </div>
+                </div>
+              </n-form-item>
+              <div 
+                class="text-wrapper_1 flex-col cursor-pointer" 
+                @click="handleSendCode"
+                :class="{ 'disabled': countdown > 0 }"
+              >
+                <span class="text_1">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</span>
+              </div>
+            </div>
+          </n-form>
+          <div class="block_3 flex-row">
+            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
+              <span class="text-group_3">阅读并同意</span>
+              <span class="text_2">《用户协议》</span>
+            </n-checkbox>
+          </div>
+          <div 
+            class="text-wrapper_2 flex-col cursor-pointer" 
+            @click="handleLogin"
+            :style="{ backgroundImage: `url(${loginBtnBg})` }"
+          >
+            <span class="text_3">立即登录</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { setToken } from '@/utils'
+import api from '@/api'
+
+// Images
+import loginTitleImg from '@/assets/img/login_title.png'
+import iconUserImg from '@/assets/img/icon_user.png'
+import iconCodeImg from '@/assets/img/icon_code.png'
+import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
+import loginBgFull from '@/assets/img/login_bg_full.png'
+import loginBoxLeft from '@/assets/img/login_box_left.png'
+import loginBtnBg from '@/assets/img/login_btn_bg.png'
+
+const router = useRouter()
+const { query } = useRoute()
+
+const loginInfo = ref({
+  phone: '',
+  verifyCode: '',
+})
+
+const isAgreed = ref(false)
+const countdown = ref(0)
+let countdownTimer = null
+const loading = ref(false)
+
+// Initialize login info
+if(localStorage.getItem('phone')){
+  loginInfo.value.phone = localStorage.getItem('phone')
+}
+
+const formRef = ref(null)
+const phoneInputRef = ref(null)
+const codeInputRef = ref(null)
+
+const rules = {
+  phone: [
+    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] }
+  ],
+  verifyCode: [
+    { required: true, message: '请输入验证码', trigger: ['input', 'blur'] }
+  ]
+}
+
+// Validate phone
+function validatePhone(phone) {
+  const phoneReg = /^1[3-9]\d{9}$/
+  return phoneReg.test(phone)
+}
+
+// Send verification code
+async function handleSendCode() {
+  if (countdown.value > 0) return
+  
+  const { phone } = loginInfo.value
+  
+  if (!phone) {
+    $message.warning('请输入手机号')
+    return
+  }
+  
+  if (!validatePhone(phone)) {
+    $message.warning('请输入正确的手机号')
+    return
+  }
+  
+  try {
+    await api.sendVerifyCode({ phone })
+    $message.success('验证码已发送')
+    
+    // Start countdown
+    countdown.value = 60
+    countdownTimer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) {
+        clearInterval(countdownTimer)
+        countdownTimer = null
+      }
+    }, 1000)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// Login
+async function handleLogin() {
+  const { phone, verifyCode } = loginInfo.value
+
+  if (!isAgreed.value) {
+    $message.warning('请阅读并同意用户协议')
+    return
+  }
+
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      loading.value = true
+      try {
+        const res = await api.loginWithVerifyCode({ phone, code: verifyCode })
+        if (res.data?.access_token) {
+          setToken(res.data.access_token)
+          localStorage.setItem('phone', phone)
+          
+          if (query.redirect) {
+            const path = query.redirect
+            Reflect.deleteProperty(query, 'redirect')
+            router.push({ path, query })
+          } else {
+            router.push('/home')
+          }
+        } else {
+           $message.error('登录失败：未获取到token')
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<style scoped>
+/* Utility Classes */
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.input-reset {
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Page Styles */
+.page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f0f2f5; /* Fallback */
+}
+
+.section_1 {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.box_1 {
+  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
+  background-color: rgba(255, 255, 255, 1);
+  width: 900px;
+  height: 500px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section_2 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 0px 100px 0px 0px;
+  height: 500px;
+  width: 400px;
+  position: relative;
+  overflow: hidden;
+}
+
+.group_1 {
+  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
+  width: 841px;
+  height: 500px;
+  margin-left: -270px;
+  background-repeat: no-repeat;
+  /* Ensure the image covers this specific area if needed, or default */
+}
+
+.section_3 {
+  width: 331px;
+  height: 298px;
+  margin: 101px 85px 0 84px;
+}
+
+.image_1 {
+  width: 260px;
+  height: 42px;
+  margin-left: 1px;
+  /* Removed object-fit: contain to match reference behavior */
+}
+
+.block_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 330px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  margin: 50px 0 0 1px;
+  align-items: center;
+}
+
+.image-text_1 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_1 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_1::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.block_2 {
+  width: 330px;
+  height: 42px;
+  margin: 20px 0 0 1px;
+  align-items: center;
+}
+
+.section_4 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  width: 191px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  align-items: center;
+}
+
+.image-text_2 {
+  width: 100%;
+  height: 16px;
+  margin: 0 15px;
+  align-items: center;
+}
+
+.thumbnail_2 {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.text-group_2 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  line-height: 14px;
+}
+
+.text-group_2::placeholder {
+  color: rgba(189, 189, 189, 1);
+}
+
+.text-wrapper_1 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  height: 42px;
+  border: 1px solid rgba(229, 229, 229, 1);
+  width: 131px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) {
+  border-color: rgba(163, 1, 19, 1);
+  background-color: rgba(163, 1, 19, 0.05);
+}
+
+.text-wrapper_1:active:not(.disabled) {
+  transform: scale(0.98);
+}
+
+.text_1 {
+  color: rgba(48, 49, 51, 1);
+  font-size: 14px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.text-wrapper_1:hover:not(.disabled) .text_1 {
+  color: rgba(163, 1, 19, 1);
+}
+
+.block_3 {
+  width: 100%;
+  margin-top: 36px;
+  align-items: center;
+}
+
+.text-group_3 {
+  color: rgba(136, 136, 136, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  margin-right: 4px;
+}
+
+.text_2 {
+  color: rgba(163, 1, 19, 1);
+  font-size: 12px;
+  letter-spacing: 0.32px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  white-space: nowrap;
+  line-height: 12px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.text_2:hover {
+  text-decoration: underline;
+  color: rgba(180, 1, 21, 1);
+}
+
+.text-wrapper_2 {
+  height: 42px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 330px;
+  margin: 10px 0 0 1px;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.text-wrapper_2:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
+}
+
+.text-wrapper_2:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
+}
+
+.text_3 {
+  color: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-family: Alibaba-PuHuiTi-M, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+.text-wrapper_2:hover .text_3 {
+  letter-spacing: 1px;
+}
+
+/* Custom Naive UI Overrides */
+.custom-n-input {
+  background-color: transparent !important;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-n-input :deep(.n-input-wrapper) {
+  padding: 0 !important;
+}
+
+.custom-n-input :deep(.n-input__input-el) {
+  height: 16px !important;
+  line-height: 16px !important;
+  color: rgba(48, 49, 51, 1);
+  font-family: Alibaba-PuHuiTi-R, sans-serif;
+}
+
+.custom-n-input :deep(.n-input__placeholder) {
+  color: rgba(189, 189, 189, 1) !important;
+}
+
+.custom-n-input :deep(.n-input__state-border),
+.custom-n-input :deep(.n-input__border) {
+  display: none !important;
+}
+
+/* Fix Form Item Layout to prevent shifts */
+:deep(.n-form-item-feedback-wrapper) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding-top: 2px;
+  line-height: 1;
+}
+
+:deep(.n-form-item) {
+  display: block;
+  margin-bottom: 0 !important;
+}
+
+/* Ensure the code input item doesn't break flex layout */
+.verify-code-item {
+  flex: 1;
+  /* The section_4 inside has fixed width, so we just let it be */
+  max-width: 191px; 
+}
+
+/* Input Container Interactions */
+.block_1,
+.section_4 {
+  transition: all 0.3s ease;
+  cursor: text;
+}
+
+.block_1:hover,
+.section_4:hover {
+  border-color: rgba(163, 1, 19, 0.5);
+}
+
+.block_1:focus-within,
+.section_4:focus-within {
+  border-color: rgba(163, 1, 19, 1);
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
+}
+
+/* Error State Styling */
+:deep(.n-form-item.n-form-item--error) .block_1,
+:deep(.n-form-item.n-form-item--error) .section_4 {
+  border-color: #d03050;
+}
+
+:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
+:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
+  border-color: #d03050;
+  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
+}
+
+/* Checkbox Customization */
+:deep(.agreement-checkbox .n-checkbox-box) {
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+/* Checked State - Solid Red */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
+  background-color: rgba(163, 1, 19, 1) !important;
+  border: 1px solid rgba(163, 1, 19, 1) !important;
+}
+
+/* Hide the separate border element when checked to prevent color overlap/double borders */
+:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
+  display: none !important;
+}
+
+/* Hover State - Red Border */
+:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+/* Focus State - Red Border & Shadow */
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
+  border-color: rgba(163, 1, 19, 1) !important;
+}
+
+:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
+}
+
+/* Ensure checkmark is white */
+:deep(.agreement-checkbox .n-checkbox-icon) {
+  color: #fff !important;
+}
+</style>
diff --git a/web1/src/views/pages/index.vue b/web1/src/views/pages/index.vue
index 51b49e0..2cc003d 100644
--- a/web1/src/views/pages/index.vue
+++ b/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"
@@ -32,7 +33,7 @@
                 require-mark-placement = "left"
             >   
                 <n-grid v-if="currentStep == 0" :cols="24" :x-gap="24">
-                    <n-form-item-gi :span="10" class="form-item" label="资产名称" path="asset_name">
+                    <n-form-item-gi :span="12" label="资产名称" path="asset_name">
                         <template #label>
                             <div class="flex items-center gap-4">
                                 <span>资产名称</span>
@@ -46,7 +47,8 @@
                         </template>
                         <NInput v-model:value="modalForm.asset_name" placeholder="请输入资产名称" />
                     </n-form-item-gi>
-                    <n-form-item-gi :span="12" class="form-item" label="所属机构/权利人" path="institution">
+                    <n-gi :span="12"></n-gi>
+                    <n-form-item-gi :span="12" label="所属机构/权利人" path="institution">
                         <template #label>
                             <div class="flex items-center gap-4">
                                 <span>所属机构/权利人</span>
@@ -60,7 +62,7 @@
                         </template>
                         <NInput v-model:value="modalForm.institution" placeholder="请输入所属机构/权利人" />
                     </n-form-item-gi>
-                    <n-form-item-gi :span="10" class="form-item" label="统一社会信用代码/身份证号" path="credit_code">
+                    <n-form-item-gi :span="12" label="统一社会信用代码/身份证号" path="credit_code">
                         <template #label>
                             <div class="flex items-center gap-4">
                                 <span>统一社会信用代码/身份证号</span>
@@ -74,7 +76,7 @@
                         </template>
                         <NInput v-model:value="modalForm.credit_code" placeholder="请输入统一社会信用代码/身份证号" />
                     </n-form-item-gi>
-                    <n-form-item-gi :span="12" class="form-item" label="所属行业" path="industry">
+                    <n-form-item-gi :span="12" label="所属行业" path="industry">
                         <template #label>
                             <div class="flex items-center gap-4">
                                 <span>所属行业</span>
@@ -93,7 +95,8 @@
                             filterable
                         />
                     </n-form-item-gi>
-                    <n-form-item-gi :span="24" class="form-item" label="业务/传承介绍" path="business_heritage_intro">
+                    <n-gi :span="12"></n-gi>
+                    <n-form-item-gi :span="24" label="业务/传承介绍" path="business_heritage_intro">
                         <template #label>
                             <div class="flex items-center gap-4">
                                 <span>业务/传承介绍</span>
@@ -593,6 +596,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'
@@ -1085,10 +1089,11 @@ const previousStep = () => {
     currentStep.value --
 }
 
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { unref } from 'vue'
 
 const router = useRouter()
+const route = useRoute()
 
 const navToLogin = () => {
     userStore.logout()
@@ -1100,12 +1105,11 @@ const nextStep = () => {
     }
     modalFormRef.value?.validate((errors) => {
         if (!errors) {
-            if(currentStep.value != 4){
+            if(currentStep.value < 4){
                 currentStep.value ++
+                return
             }
-            if(currentStep.value == 4){
-                submit()
-            }
+            openSubmitConfirm()
         }
         else {
             message.error('请完善表单')
@@ -1190,10 +1194,12 @@ const submit = () => {
 const getHistoryList = () => {
     const params = { 
       page: 1, 
-      size: 99
+      page_size: 99
     };
-    api.getHistoryList(params).then(res=>{
-       historyList.value = res.data
+    return api.getHistoryList(params).then(res=>{
+       const list = res?.data?.items ?? res?.data?.results ?? res?.results ?? []
+       historyList.value = Array.isArray(list) ? list : []
+       return res
     })
 }
 const selectedObj = ref({
@@ -1217,6 +1223,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: '确认删除',
@@ -1317,6 +1332,14 @@ onMounted(async () => {
       page_size: 99
     };
     await getHistoryList()
+    
+    if (route.query.id) {
+        const targetId = Number(route.query.id)
+        const targetItem = historyList.value.find(item => item.id === targetId)
+        if (targetItem) {
+            selectTimeBox(targetItem)
+        }
+    }
     // 使用await提高可读性
     const res = await api.getIndustryList(params);
     
@@ -1347,20 +1370,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;
-        height: 100%;
+        margin: 20px auto;
+        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 +1440,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 +1555,4 @@ input[type="number"]::-webkit-inner-spin-button {
   margin: 0;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/web1/src/views/user-center/components/CorporateTransfer.vue b/web1/src/views/user-center/components/CorporateTransfer.vue
index 26124ba..6f86d48 100644
--- a/web1/src/views/user-center/components/CorporateTransfer.vue
+++ b/web1/src/views/user-center/components/CorporateTransfer.vue
@@ -1,145 +1,176 @@
 <template>
   <div class="content-section">
+    <div class="section-header">
+      <div class="title-bar"></div>
+      <div class="title-text">对公转账</div>
+    </div>
+
     <div class="transfer-container">
       <!-- 步骤条 -->
       <div class="steps">
         <div class="step" :class="{ active: currentStep >= 1 }">
-          <div class="step-number">1</div>
+          <div class="step-icon">
+            <span v-if="currentStep === 1">1</span>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
           <div class="step-label">对公汇款</div>
         </div>
-        <div class="step-line" :class="{ active: currentStep >= 2 }"></div>
+        <div class="step-line">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
         <div class="step" :class="{ active: currentStep >= 2 }">
-          <div class="step-number">2</div>
+          <div class="step-icon">
+            <span v-if="currentStep <= 2">2</span>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
           <div class="step-label">上传凭证</div>
         </div>
-        <div class="step-line" :class="{ active: currentStep >= 3 }"></div>
+        <div class="step-line">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
         <div class="step" :class="{ active: currentStep >= 3 }">
-          <div class="step-number">3</div>
+          <div class="step-icon">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 v-if="currentStep === 1" class="step-content">
+        <div class="info-card">
+          <div class="info-title">评估收费标准：<span class="highlight">6000元/次</span></div>
+          <div class="info-subtitle">请汇款至以下账户：</div>
+          
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="label">公司名称：</span>
+              <span class="value">成都文化产权交易所有限公司</span>
+            </div>
+            <div class="info-item">
+              <span class="label">税号：</span>
+              <span class="value">91510104586429590T</span>
+            </div>
+            <div class="info-item">
+              <span class="label">注册地址：</span>
+              <span class="value">成都市锦江区工业园区三色路38号</span>
+            </div>
+            <div class="info-item">
+              <span class="label">开户行：</span>
+              <span class="value">中国民生银行股份有限公司成都科华支行</span>
+            </div>
+            <div class="info-item">
+              <span class="label">开户账号：</span>
+              <span class="value">6343 8264 7</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电话：</span>
+              <span class="value">(028) 85915289</span>
+            </div>
           </div>
         </div>
-        <n-button class="next-btn" @click="handleNextStep">
-          下一步
-        </n-button>
+        
+        <div class="btn-container">
+          <button class="primary-btn" @click="handleNextStep">下一步</button>
+        </div>
       </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"
+      <!-- 第二步：上传凭证 -->
+      <div v-if="currentStep === 2" class="step-content">
+        <div class="form-container">
+          <n-form
+            ref="formRef"
+            :model="formModel"
+            label-placement="top"
+            require-mark-placement="left"
+            class="custom-form"
           >
-            上传
-          </n-button>
+            <n-form-item label="上传支付凭证" required>
+              <n-upload
+                v-model:file-list="fileList"
+                list-type="image-card"
+                :max="1"
+                accept="image/png,image/jpeg,image/jpg"
+                :custom-request="customRequest"
+                @change="handleUploadChange"
+              >
+                <div class="upload-trigger">
+                  <div class="upload-icon">+</div>
+                  <div class="upload-text">添加图片</div>
+                </div>
+              </n-upload>
+              <template #feedback>
+                <div class="form-tip">支持jpg、png、jpeg格式，大小不超过5M</div>
+              </template>
+            </n-form-item>
+
+            <n-form-item label="开票抬头" required>
+              <div class="select-wrapper">
+                <n-select
+                  v-model:value="formModel.invoiceHeader"
+                  :options="invoiceHeaderOptions"
+                  placeholder="请选择开票抬头"
+                  class="flex-1"
+                />
+                <div class="add-header-link" @click="handleAddHeader">+ 添加抬头</div>
+              </div>
+            </n-form-item>
+
+            <n-form-item label="开票类型" required>
+              <n-select
+                v-model:value="formModel.invoiceType"
+                :options="invoiceTypeOptions"
+                placeholder="请选择开票类型"
+              />
+            </n-form-item>
+
+            <div class="btn-container">
+              <n-button
+                type="primary"
+                class="submit-btn"
+                :disabled="!isFormValid"
+                @click="handleUploadSubmit"
+                color="#A30113"
+                style="width: 200px; height: 40px;"
+              >
+                确认上传
+              </n-button>
+            </div>
+          </n-form>
         </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 v-if="currentStep === 3" class="step-content success-content">
+        <div class="success-icon">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="12" fill="#67C23A"/>
+            <path d="M17 8L10 15L7 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="success-title">上传成功</div>
+        <div class="success-desc">预计1-3个工作日内到账，请耐心等待</div>
+        
+        <div class="btn-container">
+          <button class="primary-btn" @click="handleReturnHome">返回首页</button>
         </div>
-        <n-button class="return-btn" @click="handleReturnHome">
-          返回首页
-        </n-button>
       </div>
     </div>
+    
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useMessage } from 'naive-ui'
 
 const emit = defineEmits(['return-home'])
 
@@ -152,14 +183,13 @@ const uploadedFile = ref(null)
 const uploadedFileUrl = ref('')
 
 // 表单选择相关
-const selectedInvoiceHeader = ref(null)
-const selectedInvoiceType = ref(null)
+
+const router = useRouter()
 
 // 开票抬头选项
 const invoiceHeaderOptions = ref([
-  { label: '抬头1', value: 'header1' },
-  { label: '抬头2', value: 'header2' },
-  { label: '抬头3', value: 'header3' }
+  { label: '上海某某科技有限公司', value: 'header1' },
+  { label: '北京某某文化有限公司', value: 'header2' }
 ])
 
 // 开票类型选项
@@ -175,45 +205,51 @@ function handleNextStep() {
   }
 }
 
-// 触发文件选择
-function triggerFileInput() {
-  fileInput.value?.click()
+
+
+// 添加抬头
+function handleAddHeader() {
+  router.push({ path: '/user-center/invoice', query: { action: 'create' } })
 }
 
-// 处理文件选择
-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)
-  }
+// 表单数据
+const formModel = reactive({
+  invoiceHeader: null,
+  invoiceType: null
+})
+const fileList = ref([])
+const message = useMessage()
+
+// 计算表单是否有效
+const isFormValid = computed(() => {
+  return fileList.value.length > 0 && formModel.invoiceHeader && formModel.invoiceType
+})
+
+// 自定义上传请求（模拟）
+const customRequest = ({ file, onFinish }) => {
+  setTimeout(() => {
+    onFinish()
+  }, 500)
 }
 
-// 移除文件
-function removeFile() {
-  uploadedFile.value = null
-  uploadedFileUrl.value = ''
-  if (fileInput.value) {
-    fileInput.value.value = ''
+// 处理上传变化
+function handleUploadChange({ fileList: newFileList }) {
+  fileList.value = newFileList
+  if (newFileList.length > 0) {
+    uploadedFile.value = newFileList[0].file
+  } else {
+    uploadedFile.value = null
   }
 }
 
 // 提交上传
 function handleUploadSubmit() {
-  if (!uploadedFile.value || !selectedInvoiceHeader.value || !selectedInvoiceType.value) {
-    $message.warning('请完成所有必填项')
+  if (!isFormValid.value) {
+    message.warning('请完成所有必填项')
     return
   }
   
-  // 这里可以调用API上传文件
-  // 暂时直接进入下一步
-  $message.success('上传成功')
+  message.success('上传成功')
   currentStep.value = 3
 }
 
@@ -238,8 +274,26 @@ defineExpose({
   border-radius: 8px;
   padding: 24px;
   min-height: calc(100vh - 40px);
-  position: relative;
+}
 
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 40px;
+}
+
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #A30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
 }
 
 .transfer-container {
@@ -247,286 +301,201 @@ defineExpose({
   margin: 0 auto;
 }
 
+/* 步骤条样式 */
 .steps {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 40px;
+  margin-bottom: 60px;
+  gap: 16px;
 }
 
 .step {
   display: flex;
-  flex-direction: column;
   align-items: center;
   gap: 8px;
 }
 
-.step-number {
-  width: 40px;
-  height: 40px;
+.step-icon {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: #EEEEEE;
-  color: #909399;
+  background: #C0C4CC;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
-  transition: all 0.3s ease;
 }
 
-.step.active .step-number {
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  color: white;
+.step.active .step-icon {
+  background: #A30113;
 }
 
 .step-label {
   font-size: 14px;
   color: #909399;
+  font-weight: 500;
 }
 
 .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;
+  display: flex;
+  align-items: center;
+  color: #C0C4CC;
 }
 
-.step-line.active {
-  background: #A30113;
-}
-
-.transfer-info {
-  background: #F5F7FA;
+/* 第一步内容 */
+.info-card {
+  background: #F9FAFC;
   border-radius: 8px;
-  padding: 24px;
-  border: 1px solid #EEEEEE;
+  padding: 40px;
+  margin-bottom: 40px;
 }
 
 .info-title {
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 16px;
   color: #303133;
-  margin-bottom: 20px;
-  padding-left: 12px;
-  border-left: 4px solid #A30113;
+  margin-bottom: 12px;
 }
 
-.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 {
+.info-title .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 {
+.info-subtitle {
   font-size: 14px;
   color: #606266;
-  font-weight: 500;
+  margin-bottom: 24px;
 }
 
-.upload-area {
-  width: 100%;
-  max-width: 400px;
-  height: 200px;
-  border: 2px dashed #DCDFE6;
-  border-radius: 8px;
+.info-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.info-item {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: white;
-  position: relative;
-  overflow: hidden;
+  font-size: 14px;
 }
 
-.upload-area:hover {
-  border-color: #4A90E2;
-  background: #F5F9FF;
+.info-item .label {
+  color: #909399;
+  width: 80px;
+  flex-shrink: 0;
 }
 
-.upload-placeholder {
+.info-item .value {
+  color: #303133;
+}
+
+/* 第二步内容 */
+.form-container {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+
+
+.form-tip {
+  font-size: 12px;
+  color: #C0C4CC;
+  margin-top: 8px;
+}
+
+.select-wrapper {
   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;
+.flex-1 {
+  flex: 1;
 }
 
-.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;
+
+
+.add-header-link {
+  font-size: 14px;
+  color: #A30113;
   cursor: pointer;
-  transition: all 0.3s ease;
+  white-space: nowrap;
 }
 
-.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;
+/* 第三步内容 */
+.success-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 40px;
+  padding-top: 40px;
 }
 
-.success-message {
-  text-align: center;
+.success-icon {
+  margin-bottom: 24px;
 }
 
 .success-title {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 600;
   color: #303133;
   margin-bottom: 12px;
 }
 
-.success-subtitle {
+.success-desc {
   font-size: 14px;
-  color: #606266;
+  color: #909399;
+  margin-bottom: 40px;
 }
 
-.return-btn {
-  width: 180px;
-  height: 40px;
+/* 通用按钮 */
+.btn-container {
   display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 4px;
+}
+
+.primary-btn {
+  width: 200px;
+  height: 40px;
   background: #A30113;
   color: white;
   border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
 }
 
-.return-btn:hover,
-.return-btn:focus,
-.return-btn:active {
-  background: #A30113;
-  opacity: 1;
+.primary-btn:hover {
+  background: #880C22;
+}
+
+.primary-btn:disabled {
+  background: #fab6b6;
+  cursor: not-allowed;
+}
+
+.upload-trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #909399;
+}
+
+.upload-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.upload-text {
+  font-size: 12px;
 }
 </style>
diff --git a/web1/src/views/user-center/components/InvoiceManagement.vue b/web1/src/views/user-center/components/InvoiceManagement.vue
index 64ea186..f284825 100644
--- a/web1/src/views/user-center/components/InvoiceManagement.vue
+++ b/web1/src/views/user-center/components/InvoiceManagement.vue
@@ -1,59 +1,292 @@
 <template>
   <div class="content-section">
-    <div class="invoice-container">
-      <div class="add-card" @click="handleAddInvoice">
-        <div class="add-text">添加</div>
+    <div class="section-header">
+      <div class="header-left">
+        <div class="title-bar"></div>
+        <div class="title-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 class="add-btn" @click="handleAddInvoice">
+        <span class="plus-icon">+</span>
+        <span>添加抬头</span>
       </div>
     </div>
+
+    <div class="table-container">
+      <n-data-table
+        :columns="columns"
+        :data="invoiceList"
+        :row-key="rowKey"
+        :pagination="false"
+        striped
+        size="medium"
+      />
+    </div>
+
+    <!-- 添加/编辑抬头弹窗 -->
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      preset="card"
+      :title="currentInvoice ? '编辑抬头' : '添加抬头'"
+      class="invoice-modal"
+      :style="{ width: '600px' }"
+      :bordered="false"
+      :segmented="{ content: true }"
+    >
+      <n-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-placement="top"
+        require-mark-placement="left"
+        :show-feedback="true"
+      >
+        <n-grid :cols="2" :x-gap="16">
+          <!-- 公司名称 -->
+          <n-form-item-gi :span="1" path="companyName" label="公司名称">
+            <n-input
+              v-model:value="formData.companyName"
+              placeholder="请输入公司名称"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 公司税号 -->
+          <n-form-item-gi :span="1" path="taxNumber" label="公司税号">
+            <n-input
+              v-model:value="formData.taxNumber"
+              placeholder="请输入公司税号"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 注册地址 -->
+          <n-form-item-gi :span="2" path="registeredAddress" label="注册地址">
+            <n-input
+              v-model:value="formData.registeredAddress"
+              placeholder="请输入注册地址"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 注册电话 -->
+          <n-form-item-gi :span="2" path="registeredPhone" label="注册电话">
+            <n-input
+              v-model:value="formData.registeredPhone"
+              placeholder="请输入注册电话"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 开户银行 -->
+          <n-form-item-gi :span="1" path="bankName" label="开户银行">
+            <n-input
+              v-model:value="formData.bankName"
+              placeholder="请输入开户银行"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 银行账号 -->
+          <n-form-item-gi :span="1" path="bankAccount" label="银行账号">
+            <n-input
+              v-model:value="formData.bankAccount"
+              placeholder="请输入银行账号"
+              clearable
+            />
+          </n-form-item-gi>
+
+          <!-- 电子邮箱 -->
+          <n-form-item-gi :span="2" path="email" label="电子邮箱">
+            <n-input
+              v-model:value="formData.email"
+              placeholder="请输入邮箱"
+              clearable
+            />
+            <template #feedback>
+              <span class="email-hint">此邮箱用于接收发票，请填写正确！</span>
+            </template>
+          </n-form-item-gi>
+        </n-grid>
+      </n-form>
+
+      <template #footer>
+        <div class="modal-footer">
+          <n-button class="cancel-btn" @click="handleCancel">取消</n-button>
+          <n-button class="save-btn" @click="handleSave">保存</n-button>
+        </div>
+      </template>
+    </n-modal>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { h, ref, watch } from 'vue'
+import { NButton, NDataTable, NSpace, NModal, NForm, NFormItemGi, NGrid, NInput } from 'naive-ui'
 
-const router = useRouter()
-
-defineProps({
+const props = defineProps({
   invoiceList: {
     type: Array,
     default: () => []
   }
 })
 
-const emit = defineEmits(['add-invoice', 'delete-invoice'])
+const emit = defineEmits(['add-invoice', 'delete-invoice', 'update-invoice'])
+
+const showModal = ref(false)
+const currentInvoice = ref(null)
+const formRef = ref(null)
+
+// 表单数据
+const formData = ref({
+  companyName: '',
+  taxNumber: '',
+  registeredAddress: '',
+  registeredPhone: '',
+  bankName: '',
+  bankAccount: '',
+  email: ''
+})
+
+// 表单验证规则
+const formRules = {
+  companyName: [
+    { required: true, message: '请输入公司名称', trigger: 'blur' }
+  ],
+  taxNumber: [
+    { required: true, message: '请输入公司税号', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
+    { 
+      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      message: '请输入正确的邮箱格式',
+      trigger: 'blur'
+    }
+  ]
+}
+
+// 监听弹窗显示状态,重置表单
+watch(showModal, (newVal) => {
+  if (newVal) {
+    if (currentInvoice.value) {
+      // 编辑模式,填充数据
+      formData.value = { ...currentInvoice.value }
+    } else {
+      // 新增模式,清空数据
+      formData.value = {
+        companyName: '',
+        taxNumber: '',
+        registeredAddress: '',
+        registeredPhone: '',
+        bankName: '',
+        bankAccount: '',
+        email: ''
+      }
+    }
+  }
+})
 
 // 添加开票
 function handleAddInvoice() {
-  router.push('/invoice-header/add')
+  currentInvoice.value = null
+  showModal.value = true
+}
+
+// 编辑开票
+function handleEditInvoice(invoice) {
+  currentInvoice.value = { ...invoice }
+  showModal.value = true
 }
 
 // 删除开票
 function handleDeleteInvoice(invoice) {
-  $message.info('删除开票功能开发中')
+  // TODO: Add confirmation dialog
+  emit('delete-invoice', invoice)
 }
+
+// 取消
+function handleCancel() {
+  showModal.value = false
+  formRef.value?.restoreValidation()
+}
+
+// 保存
+function handleSave() {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      handleModalSubmit(formData.value)
+    }
+  })
+}
+
+// 处理弹窗提交
+function handleModalSubmit(data) {
+  if (currentInvoice.value) {
+    emit('update-invoice', { ...currentInvoice.value, ...data })
+  } else {
+    emit('add-invoice', data)
+  }
+  showModal.value = false
+}
+
+const columns = [
+  {
+    title: '公司名称',
+    key: 'name',
+    minWidth: 220,
+    ellipsis: true,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => row.name || row.companyName || '-'
+  },
+  {
+    title: '税号',
+    key: 'taxId',
+    minWidth: 200,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => row.taxId || row.taxNumber || '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.companyName ?? row.taxId ?? row.taxNumber
 </script>
 
 <style scoped>
@@ -62,96 +295,139 @@ function handleDeleteInvoice(invoice) {
   border-radius: 8px;
   padding: 24px;
   min-height: calc(100vh - 40px);
-  position: relative;
-
 }
 
-.invoice-container {
-  max-width: 1000px;
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
 }
 
-.add-card {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  width: 80px;
-  height: 32px;
-  background: #A30113;
-  border-radius: 4px;
+.header-left {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
+  gap: 8px;
 }
 
-.add-card:hover {
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #A30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  background: #A30113;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.add-btn:hover {
   background: #880C22;
 }
 
-.add-text {
-  color: white;
-  font-size: 14px;
+.plus-icon {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
 }
 
-.invoice-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  margin-top: 60px;
+.table-container {
+  width: 100%;
 }
 
-.invoice-card {
-  background: #F5F7FA;
+/* 弹窗样式 */
+:deep(.invoice-modal) {
   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 {
+:deep(.invoice-modal .n-card-header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   color: #303133;
-  margin-bottom: 4px;
 }
 
-.invoice-status {
-  font-size: 12px;
-  color: #909399;
+:deep(.invoice-modal .n-card__content) {
+  padding: 24px;
 }
 
-.invoice-action {
-  cursor: pointer;
-  padding: 8px;
+:deep(.n-form-item-label) {
+  font-size: 14px;
+  color: #303133;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+:deep(.n-form-item-label__asterisk) {
+  color: #A30113;
+}
+
+:deep(.n-input) {
   border-radius: 4px;
-  transition: all 0.3s ease;
 }
 
-.invoice-action:hover {
-  background: rgba(163, 1, 19, 0.1);
+:deep(.n-input__input-el::placeholder) {
+  color: #C0C4CC;
 }
 
-@media (max-width: 768px) {
-  .invoice-list {
-    grid-template-columns: 1fr;
-  }
+.email-hint {
+  font-size: 12px;
+  color: #A30113;
+  margin-top: 4px;
+  display: inline-block;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 16px;
+}
+
+.cancel-btn {
+  padding: 8px 24px;
+  border: 1px solid #DCDFE6;
+  background: white;
+  color: #606266;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.cancel-btn:hover {
+  border-color: #C0C4CC;
+  background: #F5F7FA;
+}
+
+.save-btn {
+  padding: 8px 24px;
+  background: #A30113;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.save-btn:hover {
+  background: #880C22;
 }
 </style>
diff --git a/web1/src/views/user-center/components/UserSidebar.vue b/web1/src/views/user-center/components/UserSidebar.vue
index 95a28f3..d81d598 100644
--- a/web1/src/views/user-center/components/UserSidebar.vue
+++ b/web1/src/views/user-center/components/UserSidebar.vue
@@ -1,112 +1,116 @@
 <template>
-  <div class="sidebar">
-    <!-- 用户信息 -->
+  <div class="sidebar-card">
     <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 class="avatar-wrapper">
+        <img src="@/assets/img/icon_user.png" alt="User" />
       </div>
-      <div class="user-phone">{{ userPhone }}</div>
-      <div class="user-count">累计估值次数: {{ valuationCount }}</div>
+      <div class="user-phone">{{ userPhone || '18988880000' }}</div>
+      <div class="valuation-count">剩余评估次数：{{ valuationCount }}</div>
     </div>
 
-    <!-- 菜单列表 -->
     <div class="menu-list">
-      <div 
-        v-for="menu in menuList" 
-        :key="menu.id" 
+      <div
+        v-for="menu in menuList"
+        :key="menu.id"
         class="menu-item"
         :class="{ active: currentMenu === menu.id }"
-        @click="handleMenuClick(menu)"
+        @click="$emit('menu-click', 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 class="menu-icon">
+          <img :src="getMenuIcon(menu.id)" :alt="menu.label" />
+        </div>
+        <span class="menu-label">{{ menu.label }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import iconHistory from '@/assets/icon/估值记录.png'
+import iconTransfer from '@/assets/icon/对公转账.png'
+import iconInvoice from '@/assets/icon/抬头管理.png'
+
 defineProps({
-  userPhone: {
-    type: String,
-    default: ''
-  },
-  valuationCount: {
-    type: Number,
-    default: 0
-  },
-  currentMenu: {
-    type: String,
-    required: true
-  },
-  menuList: {
-    type: Array,
-    default: () => []
-  }
+  userPhone: String,
+  valuationCount: Number,
+  currentMenu: String,
+  menuList: Array
 })
 
-const emit = defineEmits(['menu-click'])
+defineEmits(['menu-click'])
 
-function handleMenuClick(menu) {
-  emit('menu-click', menu)
+function getMenuIcon(id) {
+  const iconMap = {
+    'history': iconHistory,
+    'transfer': iconTransfer,
+    'invoice': iconInvoice
+  }
+  return iconMap[id]
 }
 </script>
 
 <style scoped>
-.sidebar {
-  width: 240px;
+.sidebar-card {
+  width: 280px;
   background: white;
-  padding: 20px;
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
 }
 
 .user-info {
-  text-align: center;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #EEEEEE;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40px;
 }
 
-.avatar {
-  width: 60px;
-  height: 60px;
+.avatar-wrapper {
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
-  margin: 0 auto 12px;
+  background: #f0f0f0;
+  margin-bottom: 16px;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.avatar-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .user-phone {
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 18px;
+  font-weight: 600;
   color: #303133;
   margin-bottom: 8px;
 }
 
-.user-count {
+.valuation-count {
   font-size: 12px;
   color: #909399;
 }
 
 .menu-list {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .menu-item {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
-  border-radius: 4px;
+  padding: 12px 20px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   color: #606266;
@@ -117,23 +121,40 @@ function handleMenuClick(menu) {
 }
 
 .menu-item.active {
-  background: rgba(163, 1, 19, 0.08);
+  background: #FFF0F0;
   color: #A30113;
+  font-weight: 500;
 }
 
 .menu-icon {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.menu-text {
-  flex: 1;
+.menu-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(100%);
+  opacity: 0.6;
+  transition: all 0.3s;
+}
+
+.menu-item.active .menu-icon img {
+  filter: none;
+  opacity: 1;
+}
+
+.menu-label {
   font-size: 14px;
 }
 
 @media (max-width: 768px) {
-  .sidebar {
+  .sidebar-card {
     width: 100%;
   }
 }
diff --git a/web1/src/views/user-center/components/ValuationHistory.vue b/web1/src/views/user-center/components/ValuationHistory.vue
index 938fd13..3f3ea76 100644
--- a/web1/src/views/user-center/components/ValuationHistory.vue
+++ b/web1/src/views/user-center/components/ValuationHistory.vue
@@ -1,187 +1,229 @@
 <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>
+  <n-card :bordered="false" class="valuation-card">
+    <div class="section-header">
+      <div class="title-block">
+        <div class="title-bar"></div>
+        <div class="title-text">估值记录</div>
       </div>
+      <!-- <n-button quaternary type="primary" size="small" @click="fetchHistory">
+        刷新
+      </n-button> -->
     </div>
-  </div>
+
+    <n-data-table
+      :loading="loading"
+      :columns="columns"
+      :data="tableData"
+      :row-key="rowKey"
+      :pagination="pagination"
+      remote
+      striped
+      size="medium"
+    />
+  </n-card>
 </template>
 
 <script setup>
-defineProps({
+import { h, onMounted, ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { NButton, NSpace } from 'naive-ui'
+import api from '@/api'
+
+const props = defineProps({
   assetList: {
     type: Array,
-    default: () => []
+    default: () => [],
+  },
+})
+
+const router = useRouter()
+
+
+
+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)}`
+}
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50],
+  prefix: ({ itemCount }) => `共 ${itemCount} 条`,
+  onChange: (page) => {
+    pagination.page = page
+    fetchHistory()
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.pageSize = pageSize
+    pagination.page = 1
+    fetchHistory()
   }
 })
 
-// 格式化日期
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
-}
+const columns = [
+  {
+    title: '序号',
+    key: 'index',
+    width: 80,
+    align: 'center',
+    titleAlign: 'center',
+    render: (_, index) => (pagination.page - 1) * pagination.pageSize + index + 1
+  },
+  {
+    title: '资产名称',
+    key: 'asset_name',
+    minWidth: 200,
+    ellipsis: true,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => h(
+      'div',
+      {
+        class: 'asset-name-link',
+        onClick: () => {
+          router.push({
+            path: '/pages',
+            query: { id: row.id }
+          })
+        }
+      },
+      row.asset_name || row.name || '未知资产'
+    ),
+  },
+  {
+    title: '评估时间',
+    key: 'created_at',
+    minWidth: 180,
+    align: 'center',
+    titleAlign: 'center',
+    render: (row) => formatDate(row.created_at),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    align: 'center',
+    titleAlign: 'center',
+    width: 220,
+    render: (row) =>
+      h(
+        NSpace,
+        { size: 8, justify: 'center' },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'primary',
+                size: 'small',
+                onClick: (e) => {
+                  e.stopPropagation()
+                  handleDownloadReport(row)
+                },
+              },
+              { default: () => '下载报告' }
+            ),
+            h(
+              NButton,
+              {
+                text: true,
+                type: 'primary',
+                size: 'small',
+                onClick: (e) => {
+                  e.stopPropagation()
+                  handleDownloadCertificate(row)
+                },
+              },
+              { default: () => '下载证书' }
+            ),
+          ],
+        }
+      ),
+  },
+]
 
-// 获取状态文本
-function getStatusText(status) {
-  const statusMap = {
-    'pending': '审核中',
-    'approved': '已通过',
-    'rejected': '已拒绝',
-    'processing': '评估中'
+const rowKey = (row) => row.id ?? row.asset_name ?? row.name
+
+async function fetchHistory() {
+  loading.value = true
+  try {
+    const res = await api.getHistoryList({ 
+      page: pagination.page, 
+      page_size: pagination.pageSize 
+    })
+    const list = res?.data?.items ?? res?.data?.results ?? res?.results ?? []
+    tableData.value = Array.isArray(list) ? list : []
+    pagination.itemCount = res?.data?.total ?? res?.total ?? 0
+  } catch (error) {
+    console.error('加载估值记录失败:', error)
+    tableData.value = props.assetList
+  } finally {
+    loading.value = false
   }
-  return statusMap[status] || status
 }
 
-// 获取状态样式类
-function getStatusClass(status) {
-  return `status-${status}`
-}
-
-// 下载报告
-function handleDownloadReport(item) {
-  $message.info('下载报告功能开发中')
-}
-
-// 下载证书
-function handleDownloadCertificate(item) {
-  $message.info('下载证书功能开发中')
-}
+onMounted(fetchHistory)
 </script>
 
 <style scoped>
-.content-section {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
+.valuation-card {
   min-height: calc(100vh - 40px);
-  position: relative;
-
+  border-radius: 12px;
 }
 
-.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 {
+.section-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;
+  justify-content: space-between;
   margin-bottom: 12px;
 }
 
-.asset-actions {
+.title-block {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
 
-.action-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  background: white;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #A30113;
+.title-bar {
+  width: 4px;
+  height: 16px;
+  background: #a30113;
+  border-radius: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.empty-block {
+  padding: 24px 0;
+}
+
+:deep(.asset-name-link) {
   cursor: pointer;
-  transition: all 0.3s ease;
-  border: 1px solid #EEEEEE;
+  color: #A30113;
+  font-weight: 500;
+  transition: all 0.3s;
 }
 
-.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;
-  }
+:deep(.asset-name-link:hover) {
+  opacity: 0.8;
+  text-decoration: underline;
 }
 </style>
diff --git a/web1/src/views/user-center/index.vue b/web1/src/views/user-center/index.vue
index 956c322..682ce84 100644
--- a/web1/src/views/user-center/index.vue
+++ b/web1/src/views/user-center/index.vue
@@ -1,30 +1,36 @@
 <template>
   <div class="user-center-container">
-    <!-- 左侧边栏 -->
-    <UserSidebar
-      :user-phone="userPhone"
-      :valuation-count="valuationCount"
-      :current-menu="currentMenu"
-      :menu-list="menuList"
-      @menu-click="handleMenuClick"
-    />
+    <!-- 头部 -->
+    <AppHeader />
 
-    <!-- 右侧内容区 -->
-    <div class="content-area">
-      <!-- 返回按钮 -->
-      <div class="back-button" @click="handleBackToHome">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span>返回首页</span>
-      </div>
-
-      <!-- 子路由视图 -->
-      <router-view 
-        :asset-list="assetList"
-        :invoice-list="invoiceList"
-        @return-home="handleBackToHome"
+    <!-- 主体内容容器 -->
+    <div class="main-container">
+      <!-- 左侧边栏 -->
+      <UserSidebar
+        :user-phone="userPhone"
+        :valuation-count="valuationCount"
+        :current-menu="currentMenu"
+        :menu-list="menuList"
+        @menu-click="handleMenuClick"
       />
+
+      <!-- 右侧内容区 -->
+      <div class="content-area">
+        <!-- 返回按钮 (暂时注释) -->
+        <!-- <div class="back-button" @click="handleBackToHome">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>返回首页</span>
+        </div> -->
+
+        <!-- 子路由视图 -->
+        <router-view
+          :asset-list="assetList"
+          :invoice-list="invoiceList"
+          @return-home="handleBackToHome"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -33,9 +39,10 @@
 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() 
+const router = useRouter()
 const route = useRoute()
 
 // 当前菜单（从路由路径计算）
@@ -57,7 +64,7 @@ const assetList = ref([])
 // 开票列表
 const invoiceList = ref([
   { id: 1, name: '某某公司', status: '待审' },
-  { id: 2, name: '某某公司', status: '待审' }
+  { id: 2, name: '某某公司', status: '待审' },
 ])
 
 // 菜单列表
@@ -65,80 +72,15 @@ const menuList = ref([
   {
     id: 'history',
     label: '估值记录',
-    icon: () => h('svg', {
-      width: 20,
-      height: 20,
-      viewBox: '0 0 24 24',
-      fill: 'none',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, [
-      h('path', {
-        d: 'M12 8V12L15 15',
-        stroke: 'currentColor',
-        'stroke-width': 2,
-        'stroke-linecap': 'round'
-      }),
-      h('circle', {
-        cx: 12,
-        cy: 12,
-        r: 9,
-        stroke: 'currentColor',
-        'stroke-width': 2
-      })
-    ])
   },
   {
     id: 'transfer',
     label: '对公转账',
-    icon: () => h('svg', {
-      width: 20,
-      height: 20,
-      viewBox: '0 0 24 24',
-      fill: 'none',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, [
-      h('path', {
-        d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
-        stroke: 'currentColor',
-        'stroke-width': 2,
-        'stroke-linecap': 'round'
-      }),
-      h('circle', {
-        cx: 12,
-        cy: 12,
-        r: 4,
-        stroke: 'currentColor',
-        'stroke-width': 2
-      })
-    ])
   },
   {
     id: 'invoice',
-    label: '开票管理',
-    icon: () => h('svg', {
-      width: 20,
-      height: 20,
-      viewBox: '0 0 24 24',
-      fill: 'none',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, [
-      h('rect', {
-        x: 3,
-        y: 3,
-        width: 18,
-        height: 18,
-        rx: 2,
-        stroke: 'currentColor',
-        'stroke-width': 2
-      }),
-      h('path', {
-        d: 'M8 12H16M8 16H13',
-        stroke: 'currentColor',
-        'stroke-width': 2,
-        'stroke-linecap': 'round'
-      })
-    ])
-  }
+    label: '抬头管理',
+  },
 ])
 
 // 返回首页
@@ -165,8 +107,13 @@ async function loadData() {
       assetList.value = res.results
       valuationCount.value = res.results.length
     }
+    const res2 = await api.userQuota()
+    if (res2 && res2.data) {
+      valuationCount.value = res2.data.remaining_count
+    }
   } catch (error) {
-    console.error('加载数据失败:', error)
+    console.error('加载估值记录失败:', error)
+    $message.error('加载估值记录失败，请稍后重试')
   }
 }
 
@@ -177,23 +124,37 @@ onMounted(() => {
 
 <style scoped>
 .user-center-container {
-  display: flex;
   min-height: 100vh;
-  background: #F5F7FA;
+  background: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Main Container Styles */
+.main-container {
+  width: 1200px;
+  max-width: 95%;
+  margin: 20px auto;
+  display: flex;
+  gap: 20px;
+  flex: 1;
+  align-items: flex-start; /* Prevent stretching */
 }
 
 /* 右侧内容区 */
 .content-area {
   flex: 1;
-  padding: 20px;
-  overflow-y: auto;
+  background: white;
+  border-radius: 8px;
+  min-height: calc(100vh - 100px); /* Adjust based on header + margin */
   position: relative;
+  overflow: hidden; /* Ensure rounded corners */
 }
 
 .back-button {
   position: absolute;
-  top: 44px; /* Align with the content card's top padding area */
-  left: 44px; /* Align with the content card's left padding area */
+  top: 20px;
+  left: 20px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -204,24 +165,25 @@ onMounted(() => {
   font-size: 14px;
   background: transparent;
   z-index: 10;
-  box-shadow: none;
 }
 
 .back-button:hover {
-  color: #A30113;
+  color: #a30113;
 }
 
-.back-button svg {
-  transition: transform 0.3s ease;
-}
-
-.back-button:hover svg {
-  transform: translateX(-4px);
+@media (max-width: 1200px) {
+  .main-container {
+    width: 95%;
+  }
 }
 
 @media (max-width: 768px) {
-  .user-center-container {
+  .main-container {
     flex-direction: column;
   }
+
+  .header {
+    padding: 10px 20px;
+  }
 }
 </style>