From 40c720fdd7810742a5af2dd8abcd7f8958e1508a Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Fri, 20 Mar 2026 10:29:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=9E=B6=E6=9E=84=E5=B9=B6=E5=AE=9E=E7=8E=B0=E4=BC=81=E4=B8=9A?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E7=99=BB=E5=BD=95=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除旧的登录页面和计数器store，新增用户store管理登录状态
- 集成企业微信OAuth2.0登录流程，实现自动授权和token管理
- 重构路由守卫逻辑，支持角色权限控制和异常处理
- 优化HTTP请求模块，修复响应数据处理问题并增加取消请求处理
- 重写App.vue作为全局授权中心，添加加载状态和错误兜底界面
- 重构用户主页UI，采用现代化设计并优化表单交互
- 更新文件上传逻辑，确保与后端API兼容
---
 src/App.vue              | 204 ++++++++-
 src/main.js              |  10 +-
 src/router/index.js      |  29 +-
 src/stores/counter.ts    |  12 -
 src/stores/user.js       |  39 ++
 src/utils/http.js        | 106 +++++
 src/utils/request.js     | 129 ------
 src/views/AdminIndex.vue | 900 +++++++++++++++++++++++----------------
 src/views/Login.vue      |  64 ---
 src/views/UserHome.vue   | 791 +++++++++++++++++-----------------
 10 files changed, 1288 insertions(+), 996 deletions(-)
 delete mode 100644 src/stores/counter.ts
 create mode 100644 src/stores/user.js
 create mode 100644 src/utils/http.js
 delete mode 100644 src/utils/request.js
 delete mode 100644 src/views/Login.vue

diff --git a/src/App.vue b/src/App.vue
index 9c975c4..49913a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,28 @@
 <template>
-  <!-- 全局配置：中文语言包、全局消息提示 -->
   <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
     <n-message-provider>
       <n-dialog-provider>
-        <router-view />
+        
+        <!-- 1. 全局鉴权加载状态 -->
+        <div v-if="isLoading" class="global-auth-container">
+          <div class="spinner"></div>
+          <div class="loading-text">正在验证身份及获取权限...</div>
+        </div>
+
+        <!-- 2. 鉴权失败 / 死循环阻断时的兜底状态 -->
+        <div v-else-if="authFailed" class="global-auth-container">
+          <div class="error-card">
+            <h2>身份验证失败</h2>
+            <p>未能自动完成企业微信授权，请尝试手动重新登录。</p>
+            <n-button type="primary" size="large" @click="manualWechatLogin">
+              重新尝试企微登录
+            </n-button>
+          </div>
+        </div>
+
+        <!-- 3. 鉴权通过，正常渲染路由页面 -->
+        <router-view v-else />
+
       </n-dialog-provider>
     </n-message-provider>
     <n-global-style />
@@ -11,13 +30,192 @@
 </template>
 
 <script setup>
-import { NConfigProvider, NMessageProvider, NDialogProvider, NGlobalStyle, zhCN, dateZhCN } from 'naive-ui'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { NConfigProvider, NMessageProvider, NDialogProvider, NGlobalStyle, NButton, zhCN, dateZhCN } from 'naive-ui'
+import { useUserStore } from '@/stores/user' // 确保路径正确
+
+const REDIRECT_URI = 'https://superdata.nycjy.cn' 
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 全局状态
+const isLoading = ref(true)     // 是否正在全屏加载验证
+const authFailed = ref(false)   // 验证是否失败（用于展示兜底按钮）
+
+onMounted(async () => {
+  // 1. 检查本地是否已经登录
+  if (userStore.isAuthenticated) {
+    const role = userStore.getUserRole || localStorage.getItem('userRole')
+    isLoading.value = false
+    
+    // 如果用户是在根目录，则按角色重定向；否则留在当前页面（支持深度链接）
+    const currentPath = window.location.pathname
+    if (currentPath === '/' || currentPath === '/login') {
+      await router.replace(role === 'admin' ? '/admin' : '/user')
+    }
+    return 
+  }
+
+  // 2. 获取 URL 中的 Code 参数
+  const urlParams = new URLSearchParams(window.location.search)
+  const code = urlParams.get('code')
+
+  // 3. 逻辑分流：无 Code 则去授权，有 Code 则去服务端验证
+  if (!code) {
+    const redirectCount = parseInt(sessionStorage.getItem('wecom_redirect_count') || '0')
+    
+    if (redirectCount >= 2) {
+      console.warn('🚨 拦截到可能的重定向死循环，已阻断请求')
+      sessionStorage.removeItem('wecom_redirect_count')
+      isLoading.value = false 
+      authFailed.value = true // 超过阈值，展示兜底界面
+      return 
+    }
+
+    sessionStorage.setItem('wecom_redirect_count', (redirectCount + 1).toString())
+    await redirectToWechat()
+    
+  } else {
+    sessionStorage.removeItem('wecom_redirect_count')
+    
+    try {
+      const response = await fetch('https://superdata.nycjy.cn/api/v1/auth/wecom/login', {
+        method: 'POST',
+        headers: {
+          'accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ code: code })
+      })
+      const resData = await response.json()
+      
+      if (resData.data && resData.data.token) {
+        const role = resData.data.user_info?.role || 'user'
+        
+        userStore.setUser(resData.data.token, {
+          name: resData.data.user_info?.name,
+          role: role,
+          userid: resData.data.user_info?.userid
+        })
+        localStorage.setItem('userRole', role)
+
+        // 彻底清除 URL 上的 code，防止刷新页面报错
+        window.history.replaceState({}, document.title, window.location.pathname)
+
+        // 验证成功，解除全局拦截，开始渲染路由
+        isLoading.value = false
+        
+        // 根据角色进行路由跳转
+        await router.replace(role === 'admin' ? '/admin' : '/user')
+        
+      } else {
+        throw new Error(resData.message || '授权换取失败')
+      }
+    } catch (error) {
+      console.error('登录失败:', error)
+      window.history.replaceState({}, document.title, window.location.pathname)
+      userStore.logout()
+      
+      isLoading.value = false
+      authFailed.value = true // 验证异常，展示兜底页面
+    }
+  }
+})
+
+// 获取企微授权链接并跳转
+const redirectToWechat = async () => {
+  try {
+    const res = await fetch('https://superdata.nycjy.cn/api/v1/auth/wecom/url?redirect_uri=' + encodeURIComponent(REDIRECT_URI), {
+      method: 'GET',
+      headers: { 'accept': 'application/json' }
+    })
+    const resData = await res.json()
+    
+    if (resData && resData.login_url) {
+      window.location.replace(resData.login_url)
+    } else {
+      throw new Error('未能获取企业微信授权链接')
+    }
+  } catch (error) {
+    console.error('获取授权链接失败:', error)
+    isLoading.value = false 
+    authFailed.value = true // 网络异常等，展示兜底UI
+  }
+}
+
+// 页面按钮手动触发企微登录
+const manualWechatLogin = () => {
+  isLoading.value = true
+  authFailed.value = false
+  sessionStorage.removeItem('wecom_redirect_count')
+  redirectToWechat()
+}
 </script>
 
 <style>
+/* 全局基础样式 */
 body {
   margin: 0;
   background-color: #f5f7fa;
   font-family: v-sans, system-ui, -apple-system;
 }
+
+/* 鉴权拦截状态容器 */
+.global-auth-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #eef2f5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+/* 错误兜底卡片 */
+.error-card {
+  background: #fff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  text-align: center;
+}
+
+.error-card h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.error-card p {
+  color: #666;
+  margin-bottom: 30px;
+}
+
+/* 加载动画 */
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #d1d5db;
+  border-top: 4px solid #36ad6a; 
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+.loading-text {
+  color: #666;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index efe493a..732b999 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,13 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia' // 1. 引入 createPinia
 import App from './App.vue'
-import router from './router'
+import router from './router/index.js'
 
 const app = createApp(App)
+
+// 2. 创建 pinia 实例
+const pinia = createPinia() 
+
 app.use(router)
-app.mount('#app')
+app.use(pinia) // 3. 现在这里就不会报错了
+app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index bbf4ee9..204ba7d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-const routes = [
-  { path: '/', redirect: '/login' },
-  { path: '/login', component: () => import('../views/Login.vue') },
+const routes =[
+  // 根路径作为登录和企微回调的中转站。
+  // 因为 App.vue 中没验证完时 <router-view> 不会渲染，所以这里给个空的 template 即可
+  { path: '/', name: 'Root', component: { template: '<div></div>' } },
+  
   { path: '/user', component: () => import('../views/UserHome.vue') },
   { path: '/admin', component: () => import('../views/AdminIndex.vue') },
+  
+  // 捕获所有未匹配的路由，重定向到根路径
+  { path: '/:pathMatch(.*)*', redirect: '/' }
 ]
 
 const router = createRouter({
@@ -12,14 +17,22 @@ const router = createRouter({
   routes,
 })
 
-// 路由守卫：校验权限
+// 路由守卫：校验权限与角色
 router.beforeEach((to, from, next) => {
   const role = localStorage.getItem('userRole')
-  if (to.path !== '/login' && !role) {
-    next('/login')
-  } else {
+  
+  // 1. 如果没有角色信息，且访问的不是根路径（企微回调路径），则拦截到根路径让 App.vue 处理授权
+  if (!role && to.path !== '/') {
+    next('/')
+  } 
+  // 2. 权限越界拦截：普通用户（user）尝试访问管理端（/admin），强制拉回到用户端
+  else if (role === 'user' && to.path.startsWith('/admin')) {
+    next('/user')
+  } 
+  // 3. 正常放行
+  else {
     next()
   }
 })
 
-export default router
+export default router
\ No newline at end of file
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/user.js b/src/stores/user.js
new file mode 100644
index 0000000..2414598
--- /dev/null
+++ b/src/stores/user.js
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: '',
+    userInfo: {
+      name: '',
+      role: '',
+      userid: ''
+    }
+  }),
+  getters: {
+    isAuthenticated: (state) => !!state.token && state.token.length > 0,
+    getUserName: (state) => state.userInfo.name,
+    getUserRole: (state) => state.userInfo.role,
+    getUserId: (state) => state.userInfo.userid
+  },
+  actions: {
+    setToken(token) {
+      this.token = token
+    },
+    setUserInfo(userInfo) {
+      this.userInfo = {
+        name: userInfo.name || '',
+        role: userInfo.role || '',
+        userid: userInfo.userid || ''
+      }
+    },
+    setUser(token, userInfo) {
+      this.setToken(token)
+      this.setUserInfo(userInfo)
+    },
+    logout() {
+      this.token = ''
+      this.userInfo = { name: '', role: '', userid: '' }
+    }
+  },
+  persist: true
+})
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
new file mode 100644
index 0000000..b7d3778
--- /dev/null
+++ b/src/utils/http.js
@@ -0,0 +1,106 @@
+import axios from 'axios'
+
+// 1. 创建 axios 实例
+const service = axios.create({
+  baseURL: 'https://superdata.nycjy.cn/api' || '',
+  timeout: 150000, 
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8',
+  },
+})
+
+// 2. 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 【规范】：统一使用 'token' 作为本地存储的 Key
+    const token = localStorage.getItem('token')
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    console.error('Request Error:', error)
+    return Promise.reject(error)
+  },
+)
+
+// 3. 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    // 获取后端返回的数据 (例如: { code: 200, success: true, data: [...], pagination: {...} })
+    const res = response.data
+
+    if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
+      return res
+    }
+
+    // 处理后端的业务报错 (假设有 code 且不为 200 即为异常)
+    if (res.code && res.code !== 200) {
+      console.error(res.message || '系统异常')
+
+      if (res.code === 401) {
+        localStorage.removeItem('token')
+        window.location.href = '/login' 
+      }
+      return Promise.reject(new Error(res.message || 'Error'))
+    }
+
+    // ✅ 【关键修复 1】：直接返回完整的 res，不要只返回 res.data
+    // 否则 AdminIndex.vue 里的 if (res.success) 会永远是 undefined 导致列表渲染失败
+    return res
+  },
+  (error) => {
+    // ✅ 【关键修复 2】：静默处理浏览器/Vue Router 中止引起的被取消的请求，防止弹窗报错
+    if (axios.isCancel(error) || error.message === 'canceled') {
+      console.log('请求被中止(canceled)，已静默拦截:', error.message)
+      return Promise.reject(error)
+    }
+
+    // HTTP 网络错误统一处理
+    const status = error?.response?.status // 使用可选链，防止空指针
+    let errorMessage = '网络请求异常'
+
+    switch (status) {
+      case 400: errorMessage = '请求参数错误'; break;
+      case 401: 
+        errorMessage = '未授权，请重新登录'; 
+        localStorage.removeItem('token');
+        window.location.href = '/login';
+        break;
+      case 403: errorMessage = '拒绝访问'; break;
+      case 404: errorMessage = '请求的资源不存在'; break;
+      case 408: errorMessage = '请求超时'; break;
+      case 500: errorMessage = '服务器内部错误'; break;
+      case 502: errorMessage = '网关错误'; break;
+      case 503: errorMessage = '服务不可用'; break;
+      case 504: errorMessage = '网关超时'; break;
+      default: errorMessage = `连接错误 (${status || '未知'})`;
+    }
+
+    console.error(errorMessage)
+    return Promise.reject(error)
+  },
+)
+
+// 4. 导出常用请求方法封装
+const http = {
+  get(url, params, config) {
+    return service.get(url, { params, ...config })
+  },
+  post(url, data, config) {
+    return service.post(url, data, config)
+  },
+  put(url, data, config) {
+    return service.put(url, data, config)
+  },
+  delete(url, params, config) {
+    return service.delete(url, { params, ...config })
+  },
+  download(url, params) {
+    return service.get(url, { params, responseType: 'blob' })
+  },
+}
+
+export default http
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
deleted file mode 100644
index b802e1e..0000000
--- a/src/utils/request.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import axios from 'axios'
-
-// 1. 创建 axios 实例
-const service = axios.create({
-  // 根据不同的环境使用不同的 baseURL (假设使用了 Vite 或 Webpack)
-  baseURL: 'http://192.168.15.115:5636/api' || '',
-  timeout: 10000, // 请求超时时间：10秒
-  headers: {
-    'Content-Type': 'application/json;charset=utf-8',
-  },
-})
-
-// 2. 请求拦截器
-service.interceptors.request.use(
-  (config) => {
-    // 从 localStorage 或状态管理器中获取 Token
-    const token = localStorage.getItem('token')
-
-    // 如果有 token，将其添加到请求头中
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-    }
-
-    // 你可以在这里添加全局的 Loading 效果开启逻辑
-
-    return config
-  },
-  (error) => {
-    // 处理请求错误
-    console.error('Request Error:', error)
-    return Promise.reject(error)
-  },
-)
-
-// 3. 响应拦截器
-service.interceptors.response.use(
-  (response) => {
-    // 获取后端返回的数据
-    const res = response.data
-
-    // 处理二进制数据 (比如下载文件)
-    if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
-      return res
-    }
-
-    // 与后端约定的业务成功状态码，这里假设是 200
-    if (res.code !== 200) {
-      console.error(res.message || '系统异常')
-
-      // 比如 401: Token 过期，需要重新登录
-      if (res.code === 401) {
-        localStorage.removeItem('token')
-        window.location.href = '/login' // 跳回登录页
-      }
-
-      // 返回一个被拒绝的 Promise，中断调用链
-      return Promise.reject(new Error(res.message || 'Error'))
-    }
-
-    // 业务正常，直接剥离最外层，返回 data 里面的数据
-    return res.data
-  },
-  (error) => {
-    // HTTP 网络错误统一处理
-    const status = error.response?.status
-    let errorMessage = '网络请求异常'
-
-    switch (status) {
-      case 400:
-        errorMessage = '请求参数错误'
-        break
-      case 401:
-        errorMessage = '未授权，请重新登录'
-        break
-      case 403:
-        errorMessage = '拒绝访问'
-        break
-      case 404:
-        errorMessage = '请求的资源不存在'
-        break
-      case 408:
-        errorMessage = '请求超时'
-        break
-      case 500:
-        errorMessage = '服务器内部错误'
-        break
-      case 502:
-        errorMessage = '网关错误'
-        break
-      case 503:
-        errorMessage = '服务不可用'
-        break
-      case 504:
-        errorMessage = '网关超时'
-        break
-      default:
-        errorMessage = `连接错误 (${status})`
-    }
-
-    console.error(errorMessage)
-
-    return Promise.reject(error)
-  },
-)
-
-// 4. 导出常用请求方法封装
-const http = {
-  get(url, params, config) {
-    return service.get(url, { params, ...config })
-  },
-
-  post(url, data, config) {
-    return service.post(url, data, config)
-  },
-
-  put(url, data, config) {
-    return service.put(url, data, config)
-  },
-
-  delete(url, params, config) {
-    return service.delete(url, { params, ...config })
-  },
-
-  download(url, params) {
-    return service.get(url, { params, responseType: 'blob' })
-  },
-}
-
-export default http
diff --git a/src/views/AdminIndex.vue b/src/views/AdminIndex.vue
index 94e2e1c..c605b75 100644
--- a/src/views/AdminIndex.vue
+++ b/src/views/AdminIndex.vue
@@ -1,205 +1,230 @@
 <template>
-    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
-        <div class="admin-layout">
-            <!-- 顶部装饰 -->
-            <div class="admin-header-bg"></div>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+    <div class="admin-container">
+      <!-- 动态背景装饰 -->
+      <div class="header-banner">
+        <div class="banner-circle circle-1"></div>
+        <div class="banner-circle circle-2"></div>
+      </div>
 
-            <div class="admin-main-content">
-                <!-- 头部标题区 -->
-                <div class="page-header">
-                    <div class="title-group">
-                        <div class="icon-box">
-                            <n-icon size="24" color="#fff">
-                                <ReaderOutline />
-                            </n-icon>
-                        </div>
-                        <div>
-                            <h1 class="main-title">提报信息汇总中心</h1>
-                            <p class="sub-title">管理并分配所有分析师提交的客户资料与成交记录</p>
-                        </div>
-                    </div>
-                    <div class="header-actions">
-                        <n-button secondary type="error" round @click="logout">
-                            <template #icon><n-icon>
-                                    <LogOutOutline />
-                                </n-icon></template>
-                            退出系统
-                        </n-button>
-                    </div>
+      <main class="content-wrapper">
+        <!-- 顶部导航/标题区 -->
+        <header class="glass-header">
+          <div class="header-left">
+            <div class="logo-wrapper">
+              <n-icon size="28" color="#fff">
+                <ReaderOutline />
+              </n-icon>
+            </div>
+            <div class="title-meta">
+              <h1>提报信息汇总中心</h1>
+              <p>Management & Distribution System</p>
+            </div>
+          </div>
+          <div class="header-right">
+            <n-button secondary strong type="error" round @click="logout" class="logout-btn">
+              <template #icon>
+                <n-icon><LogOutOutline /></n-icon>
+              </template>
+              <span>退出系统</span>
+            </n-button>
+          </div>
+        </header>
+
+        <!-- 搜索筛选区 - 悬浮卡片 -->
+        <n-card class="glass-card search-section" :bordered="false">
+          <n-form inline :model="searchParams" label-placement="left" label-width="auto" size="medium">
+            <n-grid :x-gap="16" :y-gap="16" cols="1 s:2 m:3 l:5" responsive="screen">
+              <n-grid-item>
+                <n-form-item label="WeCom ID">
+                  <n-input v-model:value="searchParams.wecom_id" placeholder="输入 ID" clearable />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="家长姓名">
+                  <n-input v-model:value="searchParams.parentInfo" placeholder="匹配姓名" clearable />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item>
+                <n-form-item label="分配状态">
+                  <n-select v-model:value="searchParams.status" :options="statusOptions" placeholder="全部状态" clearable />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item span="m:1 l:1">
+                <n-form-item label="成交日期">
+                  <n-date-picker v-model:value="searchParams.dateRange" type="daterange" clearable />
+                </n-form-item>
+              </n-grid-item>
+              <n-grid-item class="actions-grid">
+                <n-space justify="end" style="width: 100%">
+                  <n-button type="primary" @click="handleSearch" :loading="loading" class="action-btn">
+                    <template #icon><n-icon><SearchOutline /></n-icon></template>
+                    查询
+                  </n-button>
+                  <n-button secondary @click="resetSearch">重置</n-button>
+                </n-space>
+              </n-grid-item>
+            </n-grid>
+          </n-form>
+        </n-card>
+
+        <!-- 数据表格区 -->
+        <n-card class="glass-card table-section" :bordered="false">
+          <template #header>
+            <div class="table-header-content">
+              <div class="table-title-box">
+                <span class="dot"></span>
+                <span class="text">数据列表</span>
+                <n-badge :value="pagination.itemCount" type="info" :max="999" class="count-badge" />
+              </div>
+            </div>
+          </template>
+          <template #header-extra>
+            <n-button size="small" strong secondary type="primary" class="export-btn">
+              <template #icon><n-icon><DownloadOutline /></n-icon></template>
+              导出报表
+            </n-button>
+          </template>
+
+          <div class="table-container">
+            <n-data-table 
+              remote 
+              :columns="columns" 
+              :data="displayData" 
+              :scroll-x="1200" 
+              :bordered="false"
+              :pagination="pagination" 
+              :loading="loading" 
+              :row-class-name="() => 'table-row-animate'"
+            />
+          </div>
+        </n-card>
+      </main>
+
+      <!-- 详情抽屉 - 视觉重构 -->
+      <n-drawer v-model:show="showDrawer" :width="650" placement="right" resizable>
+        <n-drawer-content title="原始提报资料详情" closable class="modern-drawer">
+          <div class="drawer-body" v-if="showDrawer && editingRow.wecom_id">
+            <n-space vertical :size="24">
+              <!-- 分配任务卡片 -->
+              <div class="form-section-card highlight">
+                <div class="section-header">
+                  <n-icon><BrushOutline /></n-icon>
+                  <span>执行任务分配</span>
+                </div>
+                <n-form label-placement="top" :model="editingRow">
+                  <n-grid :x-gap="16" cols="2">
+                    <n-grid-item>
+                      <n-form-item label="分配指导师">
+                        <n-input v-model:value="editingRow.assignee_name" placeholder="指导师姓名" />
+                      </n-form-item>
+                    </n-grid-item>
+                    <n-grid-item>
+                      <n-form-item label="联系电话">
+                        <n-input v-model:value="editingRow.assignee_phone" placeholder="手机号" />
+                      </n-form-item>
+                    </n-grid-item>
+                  </n-grid>
+                </n-form>
+              </div>
+
+              <!-- 基础信息卡片 -->
+              <div class="form-section-card">
+                <div class="section-header">
+                  <n-icon><PersonOutline /></n-icon>
+                  <span>核心业务信息</span>
+                </div>
+                <n-form label-placement="left" label-width="90" size="small" :model="editingRow">
+                  <n-grid :x-gap="20" :cols="2">
+                    <n-grid-item v-for="field in [
+                      {label:'主管', key:'analyst_supervisor'},
+                      {label:'部门', key:'analyst_department'},
+                      {label:'分析师', key:'analyst_name'},
+                      {label:'家长姓名', key:'parent_name'},
+                      {label:'家长电话', key:'parent_phone'},
+                      {label:'身份证', key:'parent_id_card'},
+                    ]" :key="field.key">
+                      <n-form-item :label="field.label">
+                        <n-input v-model:value="editingRow[field.key]" />
+                      </n-form-item>
+                    </n-grid-item>
+                    <n-grid-item>
+                      <n-form-item label="成交日期">
+                        <n-date-picker v-model:formatted-value="editingRow.transaction_date" value-format="yyyy-MM-dd" type="date" style="width: 100%" />
+                      </n-form-item>
+                    </n-grid-item>
+                    <n-grid-item>
+                      <n-form-item label="成交金额">
+                        <n-input v-model:value="editingRow.transaction_amount"><template #prefix>¥</template></n-input>
+                      </n-form-item>
+                    </n-grid-item>
+                  </n-grid>
+                </n-form>
+              </div>
+              
+              <!-- 附件区 -->
+              <div class="file-grid">
+                <div class="file-item">
+                  <div class="file-label"><n-icon><FileTrayOutline /></n-icon> 附件文档</div>
+                  <n-upload
+                    v-model:file-list="editingRow.attachmentFileList"
+                    :max="1"
+                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'attachmentFileList')"
+                  >
+                    <n-button dashed block>上传新附件</n-button>
+                  </n-upload>
                 </div>
 
-                <!-- 搜索筛选卡片 -->
-                <n-card class="search-card" :bordered="false">
-                    <n-form inline :model="searchParams" label-placement="left" label-width="auto" size="medium">
-                        <n-grid :x-gap="20" :y-gap="16" cols="1 s:2 m:3 l:4 xl:5" responsive="screen">
-                            <n-grid-item>
-                                <n-form-item label="WeCom ID">
-                                    <n-input v-model:value="searchParams.wecom_id" placeholder="输入 ID 筛选" clearable />
-                                </n-form-item>
-                            </n-grid-item>
-                            <n-grid-item>
-                                <n-form-item label="家长姓名">
-                                    <n-input v-model:value="searchParams.parentInfo" placeholder="匹配姓名" clearable />
-                                </n-form-item>
-                            </n-grid-item>
-                            <n-grid-item>
-                                <n-form-item label="分配状态">
-                                    <n-select v-model:value="searchParams.status" :options="statusOptions"
-                                        placeholder="全部状态" clearable />
-                                </n-form-item>
-                            </n-grid-item>
-                            <n-grid-item span="m:1 l:1 xl:1">
-                                <n-form-item label="成交日期">
-                                    <n-date-picker v-model:value="searchParams.dateRange" type="daterange" clearable />
-                                </n-form-item>
-                            </n-grid-item>
-                            <n-grid-item class="search-btns">
-                                <n-space>
-                                    <n-button type="primary" @click="handleSearch" :loading="loading">
-                                        <template #icon><n-icon>
-                                                <SearchOutline />
-                                            </n-icon></template>
-                                        查询
-                                    </n-button>
-                                    <n-button secondary @click="resetSearch">重置</n-button>
-                                </n-space>
-                            </n-grid-item>
-                        </n-grid>
-                    </n-form>
-                </n-card>
-
-                <!-- 数据表格卡片 -->
-                <n-card class="table-card" :bordered="false">
-                    <template #header>
-                        <n-space align="center">
-                            <span class="table-title">数据列表</span>
-                            <n-text depth="3" style="font-size: 12px; font-weight: normal;">共找到 {{ pagination.itemCount
-                                }}
-                                条记录</n-text>
-                        </n-space>
-                    </template>
-                    <template #header-extra>
-                        <n-button size="small" strong secondary type="primary">
-                            <template #icon><n-icon>
-                                    <DownloadOutline />
-                                </n-icon></template>
-                            导出报表
-                        </n-button>
-                    </template>
-
-                    <n-data-table remote :columns="columns" :data="displayData" :scroll-x="1800" :bordered="false"
-                        :pagination="pagination" :loading="loading" :row-class-name="() => 'table-row'" />
-                </n-card>
+                <div class="file-item">
+                  <div class="file-label"><n-icon><ImagesOutline /></n-icon> 付款截图</div>
+                  <n-upload
+                    v-model:file-list="editingRow.paymentFileList"
+                    list-type="image-card"
+                    multiple
+                    @preview="handlePreview"
+                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'paymentFileList')"
+                  />
+                </div>
+              </div>
+            </n-space>
+          </div>
+          <template #footer>
+            <div class="drawer-footer">
+              <n-button @click="showDrawer = false" round px-8>取消</n-button>
+              <n-button type="primary" :loading="submitLoading" round @click="handleDrawerSubmit" class="submit-btn-glow">
+                确认分配并同步数据
+              </n-button>
             </div>
+          </template>
+        </n-drawer-content>
+      </n-drawer>
 
-            <!-- 右侧详情抽屉 -->
-            <n-drawer v-model:show="showDrawer" :width="600" placement="right">
-                <n-drawer-content title="原始提报资料详情" closable>
-                    <div class="drawer-container">
-                        <n-space vertical :size="24">
-                            <!-- 分配操作区 -->
-                            <div class="info-group highlight-group">
-                                <div class="group-title"><n-icon>
-                                        <BrushOutline />
-                                    </n-icon> 执行分配</div>
-                                <n-form label-placement="left" label-width="100">
-                                    <n-form-item label="分配指导师">
-                                        <n-input v-model:value="editingRow.assignee_name" placeholder="输入指导师姓名" />
-                                    </n-form-item>
-                                    <n-form-item label="联系电话">
-                                        <n-input v-model:value="editingRow.assignee_phone" placeholder="输入指导师手机号" />
-                                    </n-form-item>
-                                </n-form>
-                            </div>
-
-                            <!-- 详情展示区 -->
-                            <div class="info-group">
-                                <div class="group-title"><n-icon>
-                                        <PersonOutline />
-                                    </n-icon> 客户及成交信息</div>
-                                <n-descriptions label-placement="left" :column="2" bordered size="small"
-                                    class="custom-desc">
-                                    <n-descriptions-item label="分析师主管">{{ editingRow.analyst_supervisor
-                                        }}</n-descriptions-item>
-                                    <n-descriptions-item label="分析师部门">{{ editingRow.analyst_department
-                                        }}</n-descriptions-item>
-                                    <n-descriptions-item label="分析师姓名">{{ editingRow.analyst_name
-                                        }}</n-descriptions-item>
-                                    <n-descriptions-item label="家长姓名">{{ editingRow.parent_name }}</n-descriptions-item>
-                                    <n-descriptions-item label="家长电话">{{ editingRow.parent_phone
-                                    }}</n-descriptions-item>
-                                    <n-descriptions-item label="身份证号">{{ editingRow.parent_id_card
-                                        }}</n-descriptions-item>
-                                    <n-descriptions-item label="成交日期">{{ editingRow.transaction_date
-                                        }}</n-descriptions-item>
-                                    <n-descriptions-item label="成交金额"><span class="price-text">¥{{
-                                        editingRow.transaction_amount
-                                            }}</span></n-descriptions-item>
-                                    <n-descriptions-item label="指导周期" :span="2">{{ editingRow.guidance_period
-                                        }}</n-descriptions-item>
-                                </n-descriptions>
-                            </div>
-
-                            <div class="info-group">
-                                <div class="group-title"><n-icon>
-                                        <FileTrayOutline />
-                                    </n-icon> 附件文档</div>
-                                <div class="file-box" v-if="editingRow.attachment_file_url">
-                                    <n-button block secondary type="primary" @click="downloadFile">下载附件文档</n-button>
-                                </div>
-                                <n-empty v-else description="未上传附件" size="small" />
-                            </div>
-
-                            <div class="info-group">
-                                <div class="group-title"><n-icon>
-                                        <ImagesOutline />
-                                    </n-icon> 付款截图</div>
-                                <n-image-group>
-                                    <n-space>
-                                        <n-image v-for="(img, i) in editingRow.payment_image_urls" :key="i" width="120"
-                                            height="120" fit="cover" class="preview-img" :src="img" />
-                                    </n-space>
-                                </n-image-group>
-                            </div>
-
-                            <div class="info-group">
-                                <div class="group-title"><n-icon>
-                                        <BrushOutline />
-                                    </n-icon> 电子签名</div>
-                                <div class="signature-wrapper">
-                                    <n-image v-if="editingRow.signature_image_url" width="240"
-                                        :src="editingRow.signature_image_url" />
-                                    <n-text v-else depth="3">暂无签名数据</n-text>
-                                </div>
-                            </div>
-                        </n-space>
-                    </div>
-                    <template #footer>
-                        <n-space justify="end">
-                            <n-button @click="showDrawer = false">取消</n-button>
-                            <n-button type="primary" :loading="submitLoading"
-                                @click="handleDrawerSubmit">确认分配并提交</n-button>
-                        </n-space>
-                    </template>
-                </n-drawer-content>
-            </n-drawer>
-        </div>
-    </n-config-provider>
+      <!-- 预览模态框 -->
+      <n-modal v-model:show="showPreview" preset="card" style="width: 600px; border-radius: 12px" title="素材预览">
+        <img :src="previewImageUrl" style="width: 100%; border-radius: 8px" />
+      </n-modal>
+    </div>
+  </n-config-provider>
 </template>
 
 <script setup>
+/** 
+ * Script 部分保持原样，无需修改逻辑 
+ * 这里省略重复的逻辑代码以减少篇幅，请直接沿用你原文件中的 script 内容
+ */
 import { ref, h, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import {
     useMessage, zhCN, dateZhCN, NConfigProvider, NCard, NDataTable, NButton, NIcon, NInput,
-    NDrawer, NDrawerContent, NSpace, NDescriptions, NDescriptionsItem, NImage, NImageGroup,
-    NText, NForm, NFormItem, NGrid, NGridItem, NDatePicker, NSelect, NTag, NEmpty
+    NDrawer, NDrawerContent, NSpace, NForm, NFormItem, NGrid, NGridItem, NDatePicker, NSelect, 
+    NTag, NUpload, NModal, NText, NBadge
 } from 'naive-ui'
 
 import {
     SearchOutline, LogOutOutline, DownloadOutline, PersonOutline, FileTrayOutline,
     ImagesOutline, BrushOutline, ReaderOutline, EyeOutline
 } from '@vicons/ionicons5'
+import http from '@/utils/http'
 
 const router = useRouter()
 const message = useMessage()
@@ -213,7 +238,7 @@ const searchParams = reactive({
     status: null
 })
 
-const statusOptions = [
+const statusOptions =[
     { label: '待处理', value: 'pending' },
     { label: '已处理', value: 'processed' }
 ]
@@ -225,7 +250,7 @@ const pagination = reactive({
     pageSize: 10,
     itemCount: 0,
     showSizePicker: true,
-    pageSizes: [10, 20, 50],
+    pageSizes:[10, 20, 50],
     onChange: (page) => {
         pagination.page = page
         fetchData()
@@ -237,7 +262,6 @@ const pagination = reactive({
     }
 })
 
-// 1. 获取列表数据并映射回显
 const fetchData = async () => {
     loading.value = true
     try {
@@ -245,73 +269,103 @@ const fetchData = async () => {
             page: pagination.page,
             page_size: pagination.pageSize
         })
-
         if (searchParams.wecom_id) query.append('wecom_id', searchParams.wecom_id)
         if (searchParams.status) query.append('status', searchParams.status)
-
-        const response = await fetch(`http://192.168.15.115:5636/api/v1/customer/list?${query.toString()}`, {
-            headers: { 'accept': 'application/json' }
-        })
-        const res = await response.json()
-
-        if (res.success) {
-            displayData.value = res.data.map(item => ({
-                // 基础信息
-                wecom_id: item.wecom_id,
-                analyst_supervisor: item.analyst_supervisor,
-                analyst_department: item.analyst_department,
-                analyst_name: item.analyst_name,
-                parent_name: item.parent_name,
-                parent_phone: item.parent_phone,
-                parent_id_card: item.parent_id_card || '',
-                transaction_date: item.transaction_date,
-                transaction_amount: item.transaction_amount || '0',
-                guidance_period: item.guidance_period || '',
-                submission_time: item.submission_time,
-                status: item.status,
-
-                // --- 修复关键：直接映射分配人信息以实现回显 ---
-                assignee_name: item.assignee_name || '',
-                assignee_phone: item.assignee_phone || '',
-
-                // 存储原始 Object Names (用于提交接口)
-                payment_object_names: Array.isArray(item.payment_object_names) ? item.payment_object_names : [],
-                signature_object_name: item.signature_object_name || '',
-                attachment_object_name: item.attachment_object_name || '',
-
-                // 带有签名的展示 URL
-                payment_image_urls: item.payment_image_url || [],
-                signature_image_url: item.signature_image_url,
-                attachment_file_url: item.attachment_file_url,
-
-                // 交互状态
-                isSubmitting: false
-            }))
-            pagination.itemCount = res.pagination.total
-        } else {
-            message.error(res.message || '获取数据失败')
+        if (searchParams.parentInfo) query.append('parent_name', searchParams.parentInfo)
+        if (searchParams.dateRange && searchParams.dateRange.length === 2 && searchParams.dateRange[0] && searchParams.dateRange[1]) {
+            const startDate = new Date(searchParams.dateRange[0]).toISOString().split('T')[0]
+            const endDate = new Date(searchParams.dateRange[1]).toISOString().split('T')[0]
+            query.append('start_date', startDate)
+            query.append('end_date', endDate)
+        }
+        const res = await http.get(`/v1/customer/list?${query.toString()}`)
+        if (res && res.success) {
+            displayData.value = res.data.map(item => {
+                const p_names = Array.isArray(item.payment_object_names) ? item.payment_object_names :[]
+                const p_urls = item.payment_image_url ||[]
+                const paymentFileList = p_urls.map((url, i) => ({
+                    id: p_names[i] || `pay_${i}`,
+                    name: `付款截图_${i + 1}.png`,
+                    status: 'finished',
+                    url: url,
+                    object_name: p_names[i]
+                }))
+                const signatureFileList = item.signature_image_url ?[{
+                    id: item.signature_object_name || 'sig',
+                    name: '电子签名.png',
+                    status: 'finished',
+                    url: item.signature_image_url,
+                    object_name: item.signature_object_name
+                }] :[]
+                const attachmentFileList = item.attachment_file_url ?[{
+                    id: item.attachment_object_name || 'att',
+                    name: '原始附件文档',
+                    status: 'finished',
+                    url: item.attachment_file_url,
+                    object_name: item.attachment_object_name
+                }] :[]
+                return {
+                    ...item,
+                    transaction_amount: item.transaction_amount || '0',
+                    assignee_name: item.assignee_name || '',
+                    assignee_phone: item.assignee_phone || '',
+                    paymentFileList,
+                    signatureFileList,
+                    attachmentFileList,
+                    isSubmitting: false
+                }
+            })
+            pagination.itemCount = res.pagination?.total || 0
         }
     } catch (error) {
-        message.error('接口连接失败，请检查网络')
+        console.error(error)
     } finally {
         loading.value = false
     }
 }
 
-// 2. 提交分配请求
+const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type) => {
+    try {
+        const uploadData = new FormData()
+        uploadData.append('file', file.file)
+        const response = await http.post('/v1/material/upload', uploadData, {
+            headers: { 'Content-Type': 'multipart/form-data' },
+            onUploadProgress: (p) => onProgress({ percent: Math.ceil((p.loaded / p.total) * 100) })
+        })
+        if (response && response.success) {
+            file.rawResponse = response
+            file.url = response.url
+            file.status = 'finished'
+            message.success('上传成功')
+            onFinish()
+        } else {
+            onError()
+        }
+    } catch (error) {
+        onError()
+    }
+}
+
+const getObjectName = (fileItem) => {
+    if (fileItem.rawResponse) return fileItem.rawResponse.data?.object_name || fileItem.rawResponse.object_name || null
+    return fileItem.object_name || null
+}
+
 const submitAssignment = async (row) => {
     if (!row.assignee_name || !row.assignee_phone) {
         message.warning('请填写指导师姓名和电话')
         return false
     }
-
     row.isSubmitting = true
     try {
+        const payment_object_names = row.paymentFileList.map(getObjectName).filter(Boolean)
+        const signature_object_name = row.signatureFileList.length > 0 ? getObjectName(row.signatureFileList[0]) : ''
+        const attachment_object_name = row.attachmentFileList.length > 0 ? getObjectName(row.attachmentFileList[0]) : ''
         const payload = {
             wecom_id: String(row.wecom_id),
-            payment_object_names: row.payment_object_names,
-            signature_object_name: row.signature_object_name,
-            attachment_object_name: row.attachment_object_name,
+            payment_object_names: payment_object_names,
+            signature_object_name: signature_object_name,
+            attachment_object_name: attachment_object_name,
             analyst_supervisor: row.analyst_supervisor,
             analyst_department: row.analyst_department,
             analyst_name: row.analyst_name,
@@ -324,107 +378,116 @@ const submitAssignment = async (row) => {
             assignee_name: row.assignee_name,
             assignee_phone: row.assignee_phone
         }
-
-        const response = await fetch('http://192.168.15.115:5636/api/v1/material/submit', {
-            method: 'POST',
-            headers: {
-                'accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(payload)
-        })
-
-        const res = await response.json()
-
-        if (response.ok && (res.success || res.code === 200)) {
-            message.success('分配并提报成功')
+        const res = await http.post('/v1/material/submit', payload)
+        if (res && (res.success || res.code === 200)) {
+            message.success('分配成功')
             row.status = 'processed'
             return true
-        } else {
-            message.error(res.message || '提交失败')
-            return false
         }
+        return false
     } catch (error) {
-        message.error('网络请求异常')
         return false
     } finally {
         row.isSubmitting = false
     }
 }
 
+const showDrawer = ref(false)
+const editingRow = ref({})
+const showPreview = ref(false)
+const previewImageUrl = ref('')
+
+const openDetails = (row) => {
+    const rowCopy = JSON.parse(JSON.stringify(row))
+    if (!rowCopy.transaction_date) {
+        rowCopy.transaction_date = null
+    }
+    editingRow.value = rowCopy
+    showDrawer.value = true
+}
+
 const handleDrawerSubmit = async () => {
     submitLoading.value = true
     const success = await submitAssignment(editingRow.value)
     submitLoading.value = false
-    if (success) showDrawer.value = false
+    if (success) {
+        showDrawer.value = false
+        fetchData() 
+    }
 }
 
-// 表格列定义
-const columns = [
-    { title: '分析师', key: 'analyst_name', width: 90, fixed: 'left' },
-    { title: '家长姓名', key: 'parent_name', width: 90 },
-    { title: '家长电话', key: 'parent_phone', width: 120 },
-    {
-        title: '状态',
-        key: 'status',
-        width: 90,
+const columns =[
+    { title: '分析师', key: 'analyst_name', width: 100, fixed: 'left' },
+    { title: '家长姓名', key: 'parent_name', width: 100 },
+    { 
+        title: '状态', 
+        key: 'status', 
+        width: 100,
         render: (row) => h(NTag, {
             type: row.status === 'pending' ? 'warning' : 'success',
-            round: true, size: 'small'
+            variant: 'outline',
+            round: true,
+            size: 'small'
         }, { default: () => row.status === 'pending' ? '待处理' : '已处理' })
     },
-    { title: '成交金额', key: 'transaction_amount', width: 100, render: (row) => h('span', { class: 'price-text' }, `¥${row.transaction_amount}`) },
+    { 
+        title: '成交金额', 
+        key: 'transaction_amount', 
+        width: 120, 
+        render: (row) => h('span', { style: 'color: #e88080; font-weight: 600' }, `¥${row.transaction_amount}`) 
+    },
     {
-        title: '分配指导师姓名',
+        title: '分配指导师',
         key: 'assignee_name',
-        width: 130,
+        width: 150,
         render: (row) => h(NInput, {
             value: row.assignee_name,
             size: 'small',
             placeholder: '输入姓名',
+            style: 'border-radius: 6px',
             onUpdateValue: (v) => { row.assignee_name = v }
         })
     },
     {
         title: '指导师电话',
         key: 'assignee_phone',
-        width: 160,
+        width: 180,
         render: (row) => h(NInput, {
             value: row.assignee_phone,
             size: 'small',
             placeholder: '输入手机号',
+            style: 'border-radius: 6px',
             onUpdateValue: (v) => { row.assignee_phone = v }
         })
     },
     {
         title: '操作',
         key: 'op',
-        width: 180,
+        width: 150,
         fixed: 'right',
         align: 'center',
         render: (row) => h(NSpace, { justify: 'center' }, {
-            default: () => [
+            default: () =>[
                 h(NButton, {
+                    circle: true,
                     quaternary: true,
-                    size: 'small',
                     onClick: () => openDetails(row)
-                }, { icon: () => h(EyeOutline) }),
+                }, { icon: () => h(NIcon, null, { default: () => h(EyeOutline) }) }),
                 h(NButton, {
                     type: 'primary',
+                    round: true,
                     size: 'small',
                     loading: row.isSubmitting,
                     onClick: () => submitAssignment(row)
-                }, { default: () => '确认分配' })
+                }, { default: () => '分配' })
             ]
         })
     }
 ]
 
-const showDrawer = ref(false)
-const editingRow = ref({})
-const openDetails = (row) => {
-    editingRow.value = row
-    showDrawer.value = true
+const handlePreview = (file) => {
+    previewImageUrl.value = file.url || (file.file && URL.createObjectURL(file.file))
+    showPreview.value = true
 }
 
 const handleSearch = () => { pagination.page = 1; fetchData() }
@@ -436,131 +499,234 @@ const resetSearch = () => {
 
 onMounted(() => fetchData())
 
-const logout = () => { localStorage.clear(); router.push('/login') }
-const downloadFile = () => { if (editingRow.value.attachment_file_url) window.open(editingRow.value.attachment_file_url) }
+const logout = () => { 
+    localStorage.clear(); 
+    router.push('/login') 
+}
 </script>
 
 <style scoped>
-.admin-layout {
-    min-height: 100vh;
-    background-color: #f6f8fa;
-    position: relative;
+/* 容器基础样式 */
+.admin-container {
+  min-height: 100vh;
+  background-color: #f0f4f8;
+  position: relative;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-.admin-header-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 180px;
-    background: linear-gradient(135deg, #18a058 0%, #20804e 100%);
-    z-index: 0;
+/* 顶部背景装饰 */
+.header-banner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 240px;
+  background: linear-gradient(135deg, #18a058 0%, #0c5e34 100%);
+  z-index: 0;
+  overflow: hidden;
 }
 
-.admin-main-content {
-    position: relative;
-    z-index: 1;
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 30px 24px;
+.banner-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  filter: blur(40px);
 }
 
-.page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: 24px;
-    color: #fff;
+.circle-1 { width: 300px; height: 300px; top: -100px; right: -50px; }
+.circle-2 { width: 200px; height: 200px; bottom: -50px; left: 10%; }
+
+/* 内容包裹器 */
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 20px 24px 40px;
 }
 
-.title-group {
-    display: flex;
-    align-items: center;
-    gap: 16px;
+/* 毛玻璃头部 */
+.glass-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-bottom: 24px;
+  color: white;
 }
 
-.icon-box {
-    width: 54px;
-    height: 54px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.main-title {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 600;
+.logo-wrapper {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  padding: 12px;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
-.sub-title {
-    margin: 4px 0 0 0;
-    opacity: 0.8;
-    font-size: 14px;
+.title-meta h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 1px;
 }
 
-.search-card,
-.table-card {
-    border-radius: 12px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
-    margin-bottom: 20px;
+.title-meta p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  opacity: 0.8;
+  text-transform: uppercase;
 }
 
-.table-title {
-    font-size: 16px;
-    font-weight: 600;
+/* 通用毛玻璃卡片 */
+.glass-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 20px !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.6) !important;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin-bottom: 24px;
 }
 
-.info-group {
-    background: #fcfcfd;
-    border: 1px solid #f0f0f5;
-    border-radius: 10px;
-    padding: 16px;
+.glass-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }
 
-.highlight-group {
-    background: #f0fff4;
-    border: 1px solid #c6f6d5;
+/* 搜索栏样式优化 */
+.search-section {
+  padding: 8px;
 }
 
-.group-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 15px;
-    font-weight: 600;
-    color: #18a058;
-    margin-bottom: 16px;
+.action-btn {
+  padding: 0 24px;
+  font-weight: 600;
 }
 
-.price-text {
-    color: #d03050;
-    font-weight: bold;
+/* 表格标题装饰 */
+.table-header-content {
+  display: flex;
+  align-items: center;
 }
 
-.preview-img {
-    border-radius: 8px;
-    cursor: zoom-in;
-    transition: transform 0.2s;
+.table-title-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.preview-img:hover {
-    transform: scale(1.05);
+.table-title-box .dot {
+  width: 8px;
+  height: 8px;
+  background: #18a058;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(24, 160, 88, 0.5);
 }
 
-.signature-wrapper {
-    background: #fff;
-    border: 1px dashed #e0e0e0;
-    border-radius: 8px;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
+.table-title-box .text {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
 }
 
-:deep(.n-data-table .n-data-table-td) {
-    vertical-align: middle;
+/* 表格行动画 */
+:deep(.table-row-animate) {
+  transition: background-color 0.3s;
+}
+
+:deep(.n-data-table-td) {
+  padding: 16px !important;
+}
+
+/* 抽屉内部样式 */
+.form-section-card {
+  background: #f9fafb;
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid #edf2f7;
+}
+
+.form-section-card.highlight {
+  background: #f0fdf4;
+  border: 1px solid #dcfce7;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  color: #18a058;
+  margin-bottom: 16px;
+  font-size: 16px;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.file-item {
+  background: #fff;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px dashed #cbd5e1;
+}
+
+.file-label {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.drawer-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding: 12px 0;
+}
+
+.submit-btn-glow {
+  box-shadow: 0 4px 14px 0 rgba(24, 160, 88, 0.39);
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .header-banner { height: 180px; }
+  .title-meta h1 { font-size: 18px; }
+  .title-meta p { display: none; }
+  .header-right span { display: none; }
+  .logout-btn { padding: 8px !important; }
+  
+  .file-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .content-wrapper {
+    padding: 12px;
+  }
+
+  /* 移动端表格隐藏部分列，防止挤压 */
+  :deep(.n-data-table-th:nth-child(2)), 
+  :deep(.n-data-table-td:nth-child(2)) {
+    display: none;
+  }
+}
+
+@media (min-width: 1600px) {
+  .content-wrapper {
+    max-width: 1560px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
deleted file mode 100644
index 26b46db..0000000
--- a/src/views/Login.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <div class="login-container">
-        <div class="login-card">
-            <div class="login-left">
-                <h1>提报管理系统</h1>
-                <p>高效 · 安全 · 数字化</p>
-            </div>
-            <div class="login-right">
-                <h2>欢迎登录</h2>
-                <n-space vertical size="large">
-                    <n-button type="primary" size="large" block @click="login('user')">提报端 (分析师入口)</n-button>
-                    <n-button secondary type="primary" size="large" block @click="login('admin')">管理端 (管理员入口)</n-button>
-                </n-space>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const login = (role) => {
-    localStorage.setItem('userRole', role)
-    router.push(role === 'admin' ? '/admin' : '/user')
-}
-</script>
-
-<style scoped>
-.login-container {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #eef2f5;
-}
-
-.login-card {
-    display: flex;
-    width: 700px;
-    height: 400px;
-    background: #fff;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
-
-.login-left {
-    flex: 1;
-    background: #36ad6a;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.login-right {
-    flex: 1;
-    padding: 50px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/UserHome.vue b/src/views/UserHome.vue
index 1d0ed9d..ba8b2d0 100644
--- a/src/views/UserHome.vue
+++ b/src/views/UserHome.vue
@@ -1,216 +1,179 @@
 <template>
-    <!-- 1. 配置中文语言包 -->
-    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
-        <div class="page-container">
-            <!-- 顶部装饰背景 -->
-            <div class="bg-decoration"></div>
-
-            <n-card class="main-card" :bordered="false">
-                <!-- 头部 -->
-                <template #header>
-                    <div class="header-content">
-                        <div class="header-title">
-                            <div class="title-icon-wrapper">
-                                <n-icon size="24" color="#fff">
-                                    <AnalyticsOutline />
-                                </n-icon>
-                            </div>
-                            <div>
-                                <h2>材料提报中心</h2>
-                                <p class="sub-title">请如实填写客户成交信息并上传相关凭证</p>
-                            </div>
+    <!-- 1. 配置中文语言包及自定义主题圆角 -->
+    <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
+        <div class="page-wrapper">
+            <!-- 顶部装饰背景（动态渐变） -->
+            <div class="header-banner">
+                <div class="banner-content">
+                    <div class="logo-area">
+                        <div class="icon-hexagon">
+                            <n-icon size="32" color="#fff">
+                                <AnalyticsOutline />
+                            </n-icon>
+                        </div>
+                        <div class="text-group">
+                            <h1>材料提报中心</h1>
+                            <p>Transaction Material Reporting Center</p>
                         </div>
-                        <n-button class="logout-btn" secondary type="error" round @click="logout">
-                            <template #icon>
-                                <n-icon>
-                                    <LogOutOutline />
-                                </n-icon>
-                            </template>
-                            退出系统
-                        </n-button>
                     </div>
-                </template>
+                    <n-button class="logout-btn" secondary type="error" round @click="logout">
+                        <template #icon>
+                            <n-icon><LogOutOutline /></n-icon>
+                        </template>
+                        退出系统
+                    </n-button>
+                </div>
+            </div>
 
+            <div class="main-content">
                 <n-form ref="formRef" :model="formData" :rules="rules" label-placement="top"
                     require-mark-placement="right-hanging">
-
-                    <n-space vertical :size="32">
-
-                        <!-- 模块 1: 客户及成交信息 -->
-                        <div class="section">
-                            <div class="section-header">
-                                <n-icon class="section-icon" size="20">
-                                    <IdCardOutline />
-                                </n-icon>
-                                <span>1. 客户及成交信息录入</span>
-                            </div>
-                            <div class="section-body">
-                                <n-grid :x-gap="24" :y-gap="8" cols="1 s:2 m:3" responsive="screen">
-                                    <n-grid-item>
-                                        <n-form-item label="分析师主管" path="analystSupervisor">
-                                            <n-input v-model:value="formData.analystSupervisor" placeholder="请输入主管姓名"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="分析师部门" path="analystDepartment">
-                                            <n-input v-model:value="formData.analystDepartment" placeholder="例如: 市场一部"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="分析师姓名" path="analystName">
-                                            <n-input v-model:value="formData.analystName" placeholder="请输入分析师姓名"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="家长姓名" path="parentName">
-                                            <n-input v-model:value="formData.parentName" placeholder="请输入家长姓名"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="家长电话" path="parentPhone">
-                                            <n-input v-model:value="formData.parentPhone" placeholder="请输入联系电话"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="家长身份证号码" path="parentIdCard">
-                                            <n-input v-model:value="formData.parentIdCard" placeholder="请输入18位身份证号"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="成交日期" path="transactionDate">
-                                            <n-date-picker v-model:value="formData.transactionDate" type="date"
-                                                clearable style="width: 100%" />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="成交金额" path="transactionAmount">
-                                            <n-input-number v-model:value="formData.transactionAmount"
-                                                placeholder="0.00" clearable style="width: 100%">
-                                                <template #prefix>¥</template>
-                                            </n-input-number>
-                                        </n-form-item>
-                                    </n-grid-item>
-                                    <n-grid-item>
-                                        <n-form-item label="指导周期" path="guidancePeriod">
-                                            <n-input v-model:value="formData.guidancePeriod" placeholder="例如: 3个月"
-                                                clearable />
-                                        </n-form-item>
-                                    </n-grid-item>
-                                </n-grid>
-
-                                <div style="margin-top: 8px;">
-                                    <n-form-item label="分析师备注">
-                                        <n-input v-model:value="formData.analystNotes" type="textarea"
-                                            placeholder="请填写额外备注说明（选填）..." :autosize="{ minRows: 3, maxRows: 5 }" />
+                    
+                    <!-- 模块 1: 基础信息卡片 -->
+                    <div class="glass-card section-card">
+                        <div class="card-header">
+                            <div class="header-indicator"></div>
+                            <n-icon size="22"><IdCardOutline /></n-icon>
+                            <h3>1. 客户及成交信息</h3>
+                        </div>
+                        <div class="card-body">
+                            <n-grid :x-gap="24" :y-gap="0" cols="1 s:2 m:3" responsive="screen">
+                                <n-grid-item>
+                                    <n-form-item label="分析师主管" path="analystSupervisor">
+                                        <n-input v-model:value="formData.analystSupervisor" placeholder="输入姓名" clearable />
                                     </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="分析师部门" path="analystDepartment">
+                                        <n-input v-model:value="formData.analystDepartment" placeholder="例如：市场一部" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="分析师姓名" path="analystName">
+                                        <n-input v-model:value="formData.analystName" placeholder="分析师姓名" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="家长姓名" path="parentName">
+                                        <n-input v-model:value="formData.parentName" placeholder="家长姓名" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="家长电话" path="parentPhone">
+                                        <n-input v-model:value="formData.parentPhone" placeholder="11位手机号" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="身份证号码" path="parentIdCard">
+                                        <n-input v-model:value="formData.parentIdCard" placeholder="18位身份证号" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="成交日期" path="transactionDate">
+                                        <n-date-picker v-model:value="formData.transactionDate" type="date" clearable style="width: 100%" />
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="成交金额" path="transactionAmount">
+                                        <n-input-number v-model:value="formData.transactionAmount" placeholder="0.00" clearable style="width: 100%">
+                                            <template #prefix>¥</template>
+                                        </n-input-number>
+                                    </n-form-item>
+                                </n-grid-item>
+                                <n-grid-item>
+                                    <n-form-item label="指导周期" path="guidancePeriod">
+                                        <n-input v-model:value="formData.guidancePeriod" placeholder="例如：3个月" clearable />
+                                    </n-form-item>
+                                </n-grid-item>
+                            </n-grid>
+                            <n-form-item label="分析师备注" class="mt-8">
+                                <n-input v-model:value="formData.analystNotes" type="textarea" placeholder="填写备注信息（选填）" :autosize="{ minRows: 2, maxRows: 4 }" />
+                            </n-form-item>
+                        </div>
+                    </div>
+
+                    <!-- 模块 2 & 4: 附件与签名并排 (响应式) -->
+                    <n-grid :x-gap="20" :y-gap="20" cols="1 m:2" responsive="screen" class="mt-20">
+                        <n-grid-item>
+                            <div class="glass-card section-card full-h">
+                                <div class="card-header">
+                                    <div class="header-indicator"></div>
+                                    <n-icon size="22"><DocumentAttachOutline /></n-icon>
+                                    <h3>2. 附件文档 (限1份)</h3>
+                                </div>
+                                <div class="card-body">
+                                    <n-upload :max="1" directory-dnd v-model:file-list="documentFileListLast"
+                                        @preview="handlePreview"
+                                        :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'documentFileList')">
+                                        <n-upload-dragger class="modern-dragger">
+                                            <div class="dragger-icon">
+                                                <n-icon size="44" depth="3"><CloudUploadOutline /></n-icon>
+                                            </div>
+                                            <n-text class="dragger-text">点击或拖拽上传</n-text>
+                                            <n-p depth="3" class="dragger-subtext">支持 PDF, DOCX, XLSX (Max 50MB)</n-p>
+                                        </n-upload-dragger>
+                                    </n-upload>
                                 </div>
                             </div>
-                        </div>
-
-                        <!-- 模块 2: 附件文档 (仅限1份) -->
-                        <div class="section">
-                            <div class="section-header">
-                                <n-icon class="section-icon" size="20">
-                                    <DocumentAttachOutline />
-                                </n-icon>
-                                <span>2. 附件文档 (限1份)</span>
-                            </div>
-                            <div class="section-body">
-                                <n-upload :max="1" directory-dnd v-model:file-list="documentFileListLast"
-                                    @preview="handlePreview"
-                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'documentFileList')">
-                                    <n-upload-dragger class="custom-dragger">
-                                        <div class="dragger-icon">
-                                            <n-icon size="48" :depth="3">
-                                                <CloudUploadOutline />
-                                            </n-icon>
+                        </n-grid-item>
+                        <n-grid-item>
+                            <div class="glass-card section-card full-h">
+                                <div class="card-header">
+                                    <div class="header-indicator"></div>
+                                    <n-icon size="22"><BrushOutline /></n-icon>
+                                    <h3>4. 电子签名 (限1张)</h3>
+                                </div>
+                                <div class="card-body">
+                                    <n-upload class="signature-modern-upload" accept="image/*" :max="1"
+                                        list-type="image-card" v-model:file-list="signatureFileListLast"
+                                        @preview="handlePreview"
+                                        :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'signatureFileList')">
+                                        <div class="signature-placeholder">
+                                            <n-icon size="28" depth="3"><CreateOutline /></n-icon>
+                                            <span>上传手写签名</span>
                                         </div>
-                                        <n-text style="font-size: 16px; font-weight: 500;">点击或者拖动单份文件到该区域来上传</n-text>
-                                        <n-p depth="3" style="margin: 8px 0 0 0; font-size: 13px;">
-                                            支持 PDF, DOCX, XLSX 等格式，单文件不超过 50MB
-                                        </n-p>
-                                    </n-upload-dragger>
-                                </n-upload>
+                                    </n-upload>
+                                </div>
                             </div>
-                        </div>
+                        </n-grid-item>
+                    </n-grid>
 
-                        <!-- 模块 3: 付款截图 (可上传多张) -->
-                        <div class="section">
-                            <div class="section-header">
-                                <n-icon class="section-icon" size="20">
-                                    <ImagesOutline />
-                                </n-icon>
-                                <span>3. 付款截图 (可上传多张)</span>
-                            </div>
-                            <div class="section-body">
-                                <n-upload class="custom-multi-upload" accept="image/*" multiple list-type="image-card"
-                                    v-model:file-list="paymentFileListLast" @preview="handlePreview"
-                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'paymentFileList')">
-                                    <div class="upload-placeholder">
-                                        <div class="icon-bg">
-                                            <n-icon size="28" color="#666">
-                                                <CameraOutline />
-                                            </n-icon>
-                                        </div>
-                                        <span class="placeholder-text">上传凭证</span>
-                                    </div>
-                                </n-upload>
-                            </div>
+                    <!-- 模块 3: 付款截图 -->
+                    <div class="glass-card section-card mt-20">
+                        <div class="card-header">
+                            <div class="header-indicator"></div>
+                            <n-icon size="22"><ImagesOutline /></n-icon>
+                            <h3>3. 付款截图凭证 (可多张)</h3>
                         </div>
-
-                        <!-- 模块 4: 电子签名 (仅限1张) -->
-                        <div class="section">
-                            <div class="section-header">
-                                <n-icon class="section-icon" size="20">
-                                    <BrushOutline />
-                                </n-icon>
-                                <span>4. 电子签名 (限1张)</span>
-                            </div>
-                            <div class="section-body">
-                                <n-upload class="signature-upload-container" accept="image/*" :max="1"
-                                    list-type="image-card" v-model:file-list="signatureFileListLast"
-                                    @preview="handlePreview"
-                                    :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'signatureFileList')">
-                                    <div class="upload-placeholder signature-placeholder">
-                                        <n-icon size="32" depth="3">
-                                            <CreateOutline />
-                                        </n-icon>
-                                        <n-text depth="3" style="font-size: 14px; margin-top: 8px;">点击上传手写签名</n-text>
-                                    </div>
-                                </n-upload>
-                            </div>
+                        <div class="card-body">
+                            <n-upload class="payment-modern-upload" accept="image/*" multiple list-type="image-card"
+                                v-model:file-list="paymentFileListLast" @preview="handlePreview"
+                                :custom-request="({ file, onFinish, onError, onProgress }) => handleCustomUpload({ file, onFinish, onError, onProgress }, 'paymentFileList')">
+                                <div class="payment-placeholder">
+                                    <n-icon size="32"><CameraOutline /></n-icon>
+                                    <span>添加凭证</span>
+                                </div>
+                            </n-upload>
                         </div>
-                    </n-space>
+                    </div>
                 </n-form>
 
-                <!-- 底部操作 -->
-                <template #footer>
-                    <div class="footer-actions">
-                        <n-button size="large" class="action-btn" @click="handleCancel">
-                            <template #icon>
-                                <n-icon>
-                                    <CloseOutline />
-                                </n-icon>
-                            </template>
+                <!-- 底部悬浮操作栏 -->
+                <div class="footer-actions-wrapper">
+                    <div class="footer-blur-bg"></div>
+                    <div class="footer-content">
+                        <n-button size="large" round @click="handleCancel" class="btn-cancel">
                             取消录入
                         </n-button>
-                        <n-button size="large" type="primary" class="action-btn submit-btn" @click="handleSubmit">
+                        <n-button size="large" type="primary" round @click="handleSubmit" class="btn-submit">
                             <template #icon>
-                                <n-icon>
-                                    <CheckmarkCircleOutline />
-                                </n-icon>
+                                <n-icon><CheckmarkCircleOutline /></n-icon>
                             </template>
-                            提交资料
+                            提交材料至中心
                         </n-button>
                     </div>
-                </template>
-            </n-card>
+                </div>
+            </div>
         </div>
     </n-config-provider>
 </template>
@@ -230,17 +193,29 @@ import {
     CreateOutline, CloseOutline, CheckmarkCircleOutline
 } from '@vicons/ionicons5'
 
-import http from '@/utils/request'
+import http from '@/utils/http'
+
+/**
+ * 主题定制：优化圆角和品牌色
+ */
+const themeOverrides = {
+    common: {
+        primaryColor: '#18a058',
+        primaryColorHover: '#36ad6a',
+        primaryColorPressed: '#0c7a43',
+        borderRadius: '10px'
+    }
+}
 
 const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 const formRef = ref(null)
 
-// 从路由中获取 wecom_id，后续提交时需要
+// 保持原逻辑：获取 wecom_id
 const wecomId = route.query.wecom_id || 'wmcr-ECwAAzKclEfIKNcVgOdxD-TcqLg'
 
-// 响应式表单数据
+// 保持原逻辑：响应式表单数据
 const formData = reactive({
     analystSupervisor: '',
     analystDepartment: '',
@@ -252,18 +227,17 @@ const formData = reactive({
     transactionAmount: null,
     guidancePeriod: '',
     analystNotes: '',
-    // 存储 UI 显示用的文件列表
     documentFileList: [],
     paymentFileList: [],
     signatureFileList: []
 })
 
-// 临时文件列表，用于上传前预览
+// 保持原逻辑：文件预览列表
 const documentFileListLast = ref([])
 const paymentFileListLast = ref([])
 const signatureFileListLast = ref([])
 
-// 定义校验规则
+// 保持原逻辑：校验规则
 const rules = {
     analystSupervisor: { required: true, message: '请输入主管姓名', trigger: 'blur' },
     parentName: { required: true, message: '请输入家长姓名', trigger: 'blur' },
@@ -271,9 +245,7 @@ const rules = {
 }
 
 /**
- * 格式化日期：将时间戳转换为 YYYY-MM-DD 格式
- * @param {number} timestamp - The date timestamp.
- * @returns {string|null} - Formatted date string or null.
+ * 保持原逻辑：格式化日期
  */
 const formatDate = (timestamp) => {
     if (!timestamp) return null;
@@ -284,17 +256,14 @@ const formatDate = (timestamp) => {
     return `${year}-${month}-${day}`;
 };
 
-
 /**
- * 核心：通用文件上传逻辑
- * 直接把后端返回的数据挂载到文件对象的 rawResponse 字段，完全隔离前端生成的 id/fullPath
+ * 保持原逻辑：通用文件上传逻辑
  */
 const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type) => {
     try {
         const uploadData = new FormData()
         uploadData.append('file', file.file)
 
-        // 注意：这里的上传接口地址可能需要根据您的实际情况修改
         const response = await http.post('/v1/material/upload', uploadData, {
             headers: { 'Content-Type': 'multipart/form-data' },
             onUploadProgress: (p) => onProgress({ percent: Math.ceil((p.loaded / p.total) * 100) })
@@ -325,14 +294,12 @@ const handleCustomUpload = async ({ file, onFinish, onError, onProgress }, type)
 }
 
 /**
- * 核心：初始化数据回显
+ * 保持原逻辑：初始化数据回显
  */
 const initData = async () => {
     try {
-        // 注意：这里的获取信息接口地址可能需要根据您的实际情况修改
         const res = await http.get('/v1/customer/get_customers_info', { wecom_id: wecomId })
 
-        // 1. 回显基础字段
         formData.analystName = res.analystName
         formData.parentName = res.customerName
         formData.parentPhone = res.customerPhone
@@ -342,7 +309,6 @@ const initData = async () => {
         if (res.dealAmount) formData.transactionAmount = Number(res.dealAmount)
         if (res.dealDate) formData.transactionDate = new Date(res.dealDate).getTime()
 
-        // 2. 回显付款截图
         if (res.proofOfPayment && res.proofOfPayment_urls) {
             const paymentFiles = res.proofOfPayment.map((objName, index) => ({
                 id: objName,
@@ -350,8 +316,10 @@ const initData = async () => {
                 status: 'finished',
                 url: res.proofOfPayment_urls[index],
                 rawResponse: {
-                    object_name: objName,
-                    url: res.proofOfPayment_urls[index],
+                    data: {
+                        object_name: objName,
+                        url: res.proofOfPayment_urls[index],
+                    },
                     success: true
                 }
             }))
@@ -369,19 +337,17 @@ onMounted(() => {
     initData()
 })
 
-// 预览
 const handlePreview = (file) => {
     const url = file.url || file.thumbnailUrl
     if (url) window.open(url)
 }
 
-// ==============================================================================
-//  核心改动: 更新提交逻辑以匹配新接口
-// ==============================================================================
+/**
+ * 保持原逻辑：更新提交逻辑
+ */
 const handleSubmit = () => {
     formRef.value?.validate(async (errors) => {
         if (!errors) {
-            // 1. 构建完全符合后端接口要求的 payload
             const submitPayload = {
                 wecom_id: wecomId,
                 analyst_supervisor: formData.analystSupervisor,
@@ -390,27 +356,16 @@ const handleSubmit = () => {
                 parent_name: formData.parentName,
                 parent_phone: formData.parentPhone,
                 parent_id_card: formData.parentIdCard,
-                // 格式化日期和金额
                 transaction_date: formatDate(formData.transactionDate),
                 transaction_amount: String(formData.transactionAmount || ''),
                 guidance_period: formData.guidancePeriod,
-                // 提取文件 object_name
-                payment_object_names: formData.paymentFileList.map(f => f.object_name).filter(Boolean),
-                signature_object_name: formData.signatureFileList[0]?.object_name || null,
-                attachment_object_name: formData.documentFileList[0]?.object_name || null,
-                // analystNotes 似乎不在接口中，如果需要提交请后端添加字段
-                // assignee_name 和 assignee_phone 表单中未提供，暂不提交
+                payment_object_names: formData.paymentFileList.map(f => f.rawResponse?.data?.object_name).filter(Boolean),
+                signature_object_name: formData.signatureFileList[0]?.rawResponse?.data?.object_name || null,
+                attachment_object_name: formData.documentFileList[0]?.rawResponse?.data?.object_name || null,
             };
-
-            console.log('--- 准备提交给后端的最终纯净数据 ---', submitPayload);
-
             try {
-                // 2. 调用新的提交接口
-                // 注意：请确保 http util 配置了正确的 baseURL, 例如 http://192.168.15.115:5636/api
                 await http.post('/v1/material/submit', submitPayload);
                 message.success('材料已正式提交成功！');
-                // 可选：提交成功后跳转或重置表单
-                // router.push('/success-page');
             } catch (err) {
                 console.error('提交失败:', err);
                 message.error('提交失败，请联系管理员');
@@ -421,256 +376,270 @@ const handleSubmit = () => {
     });
 };
 
-
 const logout = () => router.push('/login')
 const handleCancel = () => router.back()
-
 </script>
 
 <style scoped>
-.page-container {
+/* 核心容器 */
+.page-wrapper {
     min-height: 100vh;
-    background-color: #f0f2f5;
-    background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #f0f2f5 80%);
+    background-color: #f5f7fa;
+    padding-bottom: 120px; /* 为底部悬浮栏留出空间 */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* 顶部 Banner 优化 */
+.header-banner {
+    background: linear-gradient(135deg, #18a058 0%, #2d5a43 100%);
+    height: 220px;
+    color: white;
+    padding: 0 5%;
     display: flex;
-    justify-content: center;
-    padding: 60px 20px;
-    position: relative;
-    overflow: hidden;
+    align-items: center;
+    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
 }
 
-.bg-decoration {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 240px;
-    background: linear-gradient(135deg, #18a058 0%, #36ad6a 100%);
-    clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
-    z-index: 0;
-}
-
-.main-card {
-    max-width: 960px;
+.banner-content {
     width: 100%;
-    border-radius: 16px;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
-    z-index: 1;
-    overflow: hidden;
-}
-
-.main-card :deep(.n-card-header) {
-    padding: 24px 32px;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.main-card :deep(.n-card__content) {
-    padding: 32px;
-}
-
-.main-card :deep(.n-card__footer) {
-    padding: 24px 32px;
-    background-color: #fafafc;
-    border-top: 1px solid #f0f0f0;
-}
-
-.header-content {
+    max-width: 1100px;
+    margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-bottom: 30px;
 }
 
-.header-title {
+.logo-area {
     display: flex;
     align-items: center;
     gap: 16px;
 }
 
-.title-icon-wrapper {
-    width: 48px;
-    height: 48px;
-    background: linear-gradient(135deg, #18a058 0%, #36ad6a 100%);
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
+.icon-hexagon {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    padding: 12px;
+    border-radius: 14px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
-.header-title h2 {
-    margin: 0 0 4px 0;
-    font-size: 22px;
-    color: #1f2225;
-    font-weight: 600;
-}
-
-.sub-title {
+.text-group h1 {
     margin: 0;
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.text-group p {
+    margin: 4px 0 0 0;
     font-size: 13px;
-    color: #8c929b;
+    opacity: 0.8;
+    text-transform: uppercase;
 }
 
-.section {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+/* 主内容区域 */
+.main-content {
+    max-width: 1100px;
+    margin: -60px auto 0;
+    padding: 0 20px;
 }
 
-.section-header {
+/* 玻璃质感卡片 */
+.glass-card {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+}
+
+.section-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    z-index: 1;
+}
+
+.section-card:hover {
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
+}
+
+.card-header {
+    padding: 20px 24px;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
+    border-bottom: 1px solid #f0f2f5;
+    background: #fafbfc;
+    position: relative;
+    z-index: 10;
+}
+
+.card-header h3 {
+    margin: 0;
     font-size: 17px;
+    color: #333;
     font-weight: 600;
-    color: #1f2225;
 }
 
-.section-icon {
-    color: #18a058;
-    background-color: #e8f5ed;
-    padding: 6px;
-    border-radius: 8px;
+.header-indicator {
+    width: 4px;
+    height: 18px;
+    background: #18a058;
+    border-radius: 2px;
 }
 
-.section-body {
-    background-color: #fcfcfd;
-    border: 1px solid #f0f0f5;
-    border-radius: 12px;
+.card-body {
     padding: 24px;
+}
+
+/* 布局辅助 */
+.mt-8 { margin-top: 8px; }
+.mt-20 { margin-top: 20px; }
+.full-h { height: 100%; display: flex; flex-direction: column; }
+
+/* 上传组件现代风格 */
+.modern-dragger {
+    border: 2px dashed #e0e0e0;
+    background: #fcfdfe !important;
+    border-radius: 12px;
+    padding: 30px 0 !important;
     transition: all 0.3s ease;
 }
 
-.section-body:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
-    border-color: #e8e8ed;
-}
-
-.custom-dragger {
-    background-color: #fafafc;
-    border-radius: 8px;
-    padding: 32px 0;
-    transition: all 0.3s ease;
-}
-
-.custom-dragger:hover {
-    background-color: #f3fcf6;
+.modern-dragger:hover {
+    border-color: #18a058;
+    background: #f6fbf8 !important;
 }
 
 .dragger-icon {
-    margin-bottom: 16px;
-    transition: transform 0.3s ease;
-}
-
-.custom-dragger:hover .dragger-icon {
-    transform: translateY(-4px);
+    margin-bottom: 12px;
     color: #18a058;
 }
 
-.upload-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.dragger-text {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.dragger-subtext {
+    font-size: 12px;
+    margin-top: 4px !important;
+}
+
+/* 签名上传样式 */
+.signature-modern-upload :deep(.n-upload-trigger.n-upload-trigger--image-card) {
     width: 100%;
-    height: 100%;
-    background-color: #fafafc;
-    transition: all 0.3s ease;
+    height: 140px;
+    border-radius: 12px;
+    background: #fcfdfe;
+    border: 2px dashed #e0e0e0;
 }
 
-.upload-placeholder:hover {
-    background-color: #f3fcf6;
-}
-
-.custom-multi-upload :deep(.n-upload-trigger.n-upload-trigger--image-card) {
-    width: 120px;
-    height: 120px;
-    border-radius: 8px;
-}
-
-.custom-multi-upload :deep(.n-upload-file.n-upload-file--image-card) {
-    width: 120px;
-    height: 120px;
-    border-radius: 8px;
-}
-
-.icon-bg {
-    width: 48px;
-    height: 48px;
-    background-color: #fff;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-    margin-bottom: 8px;
-}
-
-.placeholder-text {
-    font-size: 13px;
-    color: #666;
-    font-weight: 500;
-}
-
-.signature-upload-container :deep(.n-upload-trigger.n-upload-trigger--image-card) {
-    width: 300px;
-    height: 120px;
-    border-radius: 8px;
-    border: 2px dashed #d9d9d9;
-}
-
-.signature-upload-container :deep(.n-upload-file.n-upload-file--image-card) {
-    width: 300px;
-    height: 120px;
-    border-radius: 8px;
+.signature-modern-upload :deep(.n-upload-file.n-upload-file--image-card) {
+    width: 100%;
+    height: 140px;
 }
 
 .signature-placeholder {
-    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: #8c929b;
 }
 
-.footer-actions {
+/* 付款凭证样式 */
+.payment-modern-upload :deep(.n-upload-trigger.n-upload-trigger--image-card) {
+    width: 120px;
+    height: 120px;
+    border-radius: 12px;
+}
+.payment-modern-upload :deep(.n-upload-file.n-upload-file--image-card) {
+    width: 120px;
+    height: 120px;
+    border-radius: 12px;
+}
+
+.payment-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    color: #18a058;
+    font-weight: 500;
+    font-size: 13px;
+}
+
+/* 底部操作栏 */
+.footer-actions-wrapper {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 1100px;
+    height: 70px;
+    z-index: 1000;
+}
+
+.footer-blur-bg {
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px);
+    border-radius: 35px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.footer-content {
+    position: relative;
+    height: 100%;
     display: flex;
     justify-content: flex-end;
+    align-items: center;
+    padding: 0 32px;
     gap: 16px;
 }
 
-.action-btn {
-    min-width: 120px;
-    border-radius: 8px;
-    font-weight: 500;
+.btn-cancel {
+    background: #fff;
+    color: #666;
 }
 
-.submit-btn {
-    box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
+.btn-submit {
+    min-width: 180px;
+    box-shadow: 0 4px 15px rgba(24, 160, 88, 0.3);
 }
 
+/* 响应式调整 */
 @media (max-width: 768px) {
-    .page-container {
-        padding: 20px 12px;
+    .header-banner {
+        height: 180px;
+        padding: 0 20px;
+    }
+    
+    .text-group h1 { font-size: 20px; }
+    .text-group p { font-size: 11px; }
+    .logout-btn { scale: 0.9; }
+
+    .main-content {
+        margin-top: -40px;
+        padding: 0 12px;
     }
 
-    .header-content {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 16px;
-    }
+    .card-body { padding: 16px; }
 
-    .logout-btn {
-        align-self: flex-end;
-    }
-
-    .main-card :deep(.n-card__content) {
-        padding: 20px 16px;
-    }
-
-    .section-body {
-        padding: 16px;
-    }
-
-    .signature-upload-container :deep(.n-upload-trigger.n-upload-trigger--image-card),
-    .signature-upload-container :deep(.n-upload-file.n-upload-file--image-card) {
+    .footer-actions-wrapper {
+        bottom: 0;
         width: 100%;
-        height: 100px;
+        border-radius: 0;
+        height: 80px;
     }
+    
+    .footer-blur-bg { border-radius: 20px 20px 0 0; }
+    .footer-content { justify-content: space-around; padding: 0 16px; }
+    .btn-cancel, .btn-submit { flex: 1; }
 }
 </style>
\ No newline at end of file