新增 luxsin-controller，更新 wiki

2026-07-10 16:51:05 +08:00
parent b9ba1d5ed4
commit fc88d42be9
28 changed files with 1009 additions and 270 deletions
@@ -13,8 +13,15 @@
 - [backend/src/middleware/auth.js](file://backend/src/middleware/auth.js)
 - [backend/src/utils/password.js](file://backend/src/utils/password.js)
 - [backend/src/utils/response.js](file://backend/src/utils/response.js)
+- [frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
 </cite>

+## 更新摘要
+**变更内容**   
+- 更新了登录按钮样式实现，从复杂渐变背景简化为纯色背景配合 backdrop-filter 模糊效果
+- 优化了性能表现，同时保持了玻璃拟态美学设计
+- 增强了按钮的视觉层次和交互反馈
+
 ## 目录
 1. [简介](#简介)
 2. [项目结构](#项目结构)
@@ -41,6 +48,7 @@ AuthUtil["认证工具<br/>frontend/src/utils/auth.js"]
 RequestUtil["HTTP 请求封装<br/>frontend/src/utils/request.js"]
 Router["路由守卫<br/>frontend/src/router/index.js"]
 TabsUtil["标签页工具<br/>frontend/src/utils/tabs.js"]
+Styles["主题样式<br/>frontend/src/styles/lux-theme.css"]
 end
 subgraph "后端"
 AuthRoute["认证路由<br/>backend/src/routes/auth.js"]
@@ -59,6 +67,7 @@ RequestUtil --> AuthUtil
 Router --> AuthUtil
 Router --> TabsUtil
 AuthRoute --> AuthMW
+LoginView --> Styles
 ```

 图表来源
@@ -66,17 +75,19 @@ AuthRoute --> AuthMW
 - [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
 - [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
 - [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
 - [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
 - [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)

 章节来源
- [frontend/src/views/login/index.vue:1-453](file://frontend/src/views/login/index.vue#L1-L453)
+- [frontend/src/views/login/index.vue:1-445](file://frontend/src/views/login/index.vue#L1-L445)
 - [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
 - [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
 - [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
 - [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
 - [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
@@ -88,6 +99,7 @@ AuthRoute --> AuthMW
 - 认证工具：负责本地 Token 与用户信息的读取、设置、清理与解析。
 - 请求封装：全局注入 Authorization 头、处理 401 自动跳转登录。
 - 路由守卫：控制访问权限、超时自动登出、超级管理员限制。
+- 主题样式：提供统一的按钮样式、玻璃拟态效果和视觉规范。
 - 后端认证路由：处理登录、获取当前用户、修改密码。
 - JWT 工具：签发与解码 Access Token，定义 TTL。
 - 密码工具：PBKDF2 哈希与安全比对。
@@ -99,6 +111,7 @@ AuthRoute --> AuthMW
 - [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
 - [backend/src/routes/auth.js:24-77](file://backend/src/routes/auth.js#L24-L77)
 - [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
 - [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
@@ -140,7 +153,7 @@ LV->>RT : 清空标签页缓存并跳转首页
 - [backend/src/utils/password.js:16-34](file://backend/src/utils/password.js#L16-L34)
 - [backend/src/utils/jwt.js:7-17](file://backend/src/utils/jwt.js#L7-L17)
 - [frontend/src/utils/auth.js:8-26](file://frontend/src/utils/auth.js#L8-L26)
- [frontend/src/router/index.js:82-85](file://frontend/src/router/index.js#L82-L85)
+- [frontend/src/router/index.js:82-85](file://frontend/src/router/index.js#L82-85)

 ## 详细组件分析

@@ -401,7 +414,47 @@ AuthUtils --> JWTUtil : "解析 payload"
  - 按钮尺寸与间距适中，便于触摸点击。

 章节来源
- [frontend/src/views/login/index.vue:153-453](file://frontend/src/views/login/index.vue#L153-L453)
+- [frontend/src/views/login/index.vue:153-445](file://frontend/src/views/login/index.vue#L153-L445)
+
+### 按钮样式优化（新增）
+**更新** 登录按钮样式已从复杂的渐变背景简化为纯色背景配合 backdrop-filter 模糊效果，在保持玻璃拟态美学的同时显著提升了性能表现。
+
+- **样式实现**：
+  - 主按钮采用纯色背景 `rgba(56, 189, 248, 0.92)`，移除了复杂的渐变计算
+  - 保留 `backdrop-filter: blur(8px)` 模糊效果，维持玻璃质感
+  - 悬停状态使用更亮的纯色 `rgba(34, 211, 238, 0.95)`
+  - 添加了内阴影和高光效果增强立体感
+
+- **性能优化**：
+  - 减少了渐变背景的渲染开销
+  - 简化了 CSS 计算复杂度
+  - 保持了流畅的交互动画
+
+- **视觉效果**：
+  - 圆角设计 `border-radius: 999px` 营造现代感
+  - 多层阴影系统提供深度层次
+  - 平滑的过渡动画提升用户体验
+
+```mermaid
+flowchart TD
+A["登录按钮样式"] --> B["纯色背景替代渐变"]
+A --> C["保留 backdrop-filter 模糊"]
+A --> D["优化阴影系统"]
+B --> E["提升渲染性能"]
+C --> F["维持玻璃质感"]
+D --> G["增强视觉层次"]
+E --> H["流畅交互体验"]
+F --> H
+G --> H
+```
+
+**图表来源**
+- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
+
+章节来源
+- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)

 ## 依赖关系分析
 - 前端模块耦合：
@@ -409,6 +462,7 @@ AuthUtils --> JWTUtil : "解析 payload"
  - 认证 API 依赖请求封装。
  - 请求封装依赖认证工具（读取 Token）。
  - 路由守卫依赖认证工具与标签页工具。
+  - 登录视图依赖主题样式（按钮样式、玻璃拟态效果）。
 - 后端模块耦合：
  - 认证路由依赖模型、密码工具、JWT 工具与响应封装。
  - 认证中间件依赖 JWT 工具。
@@ -422,6 +476,7 @@ API --> REQ["请求封装"]
 REQ --> AU["认证工具"]
 RT["路由守卫"] --> AU
 RT --> TU["标签页工具"]
+LV --> ST["主题样式"]
 AR["认证路由"] --> PW["密码工具"]
 AR --> JW["JWT 工具"]
 AR --> RU["响应封装"]
@@ -433,6 +488,7 @@ AR --> MW["认证中间件"]
 - [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
 - [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
 - [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
 - [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
@@ -444,6 +500,7 @@ AR --> MW["认证中间件"]
 - [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [frontend/src/styles/lux-theme.css:447-477](file://frontend/src/styles/lux-theme.css#L447-L477)
 - [backend/src/routes/auth.js:1-112](file://backend/src/routes/auth.js#L1-L112)
 - [backend/src/utils/password.js:1-37](file://backend/src/utils/password.js#L1-L37)
 - [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
@@ -454,6 +511,10 @@ AR --> MW["认证中间件"]
 - Token TTL：12 小时，平衡安全性与用户体验。
 - 请求拦截器：避免重复设置 Authorization，减少不必要的网络开销。
 - 前端解析：仅在需要时解析 Token，避免频繁计算。
+- **按钮样式优化**：
+  - 简化渐变背景为纯色，减少 CSS 计算开销
+  - 保留必要的 backdrop-filter 效果，平衡性能与视觉效果
+  - 优化阴影层级，减少重绘重排
 - 建议优化：
  - 对频繁访问的受保护接口，可在路由守卫中加入缓存策略（如短期缓存用户信息）。
  - 后端可引入登录失败计数与临时封禁策略，缓解暴力破解风险。
@@ -470,11 +531,16 @@ AR --> MW["认证中间件"]
 - 页面跳转异常：
  - 检查路由守卫逻辑与 redirect 参数传递。
  - 确认标签页缓存清理是否成功。
+- **按钮样式问题**：
+  - 检查主题样式是否正确加载。
+  - 确认浏览器是否支持 backdrop-filter 属性。
+  - 验证 CSS 优先级冲突。

 章节来源
 - [frontend/src/utils/request.js:44-59](file://frontend/src/utils/request.js#L44-L59)
 - [frontend/src/router/index.js:68-73](file://frontend/src/router/index.js#L68-L73)
 - [backend/src/middleware/auth.js:21-25](file://backend/src/middleware/auth.js#L21-L25)
+- [frontend/src/views/login/index.vue:382-424](file://frontend/src/views/login/index.vue#L382-L424)

 ## 结论
-该登录系统从前端表单到后端认证形成完整的闭环，具备良好的可维护性与扩展性。前端通过统一的请求封装与路由守卫保障了安全性与用户体验；后端通过 PBKDF2 哈希与 JWT 机制提供了可靠的认证基础。建议在生产环境中补充速率限制与 HTTPS 等安全措施，并持续监控与优化登录流程的性能与稳定性。
+该登录系统从前端表单到后端认证形成完整的闭环，具备良好的可维护性与扩展性。前端通过统一的请求封装与路由守卫保障了安全性与用户体验；后端通过 PBKDF2 哈希与 JWT 机制提供了可靠的认证基础。**最新的按钮样式优化进一步提升了性能表现，在保持玻璃拟态美学的同时实现了更好的渲染效率**。建议在生产环境中补充速率限制与 HTTPS 等安全措施，并持续监控与优化登录流程的性能与稳定性。
@@ -11,12 +11,20 @@
 - [frontend/src/layout/index.vue](file://frontend/src/layout/index.vue)
 - [frontend/src/components/TabsView.vue](file://frontend/src/components/TabsView.vue)
 - [frontend/src/App.vue](file://frontend/src/App.vue)
+- [frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
 - [backend/src/routes/dashboard.js](file://backend/src/routes/dashboard.js)
 - [backend/src/utils/response.js](file://backend/src/utils/response.js)
 - [backend/src/models/Model.js](file://backend/src/models/Model.js)
 - [backend/src/models/Ota.js](file://backend/src/models/Ota.js)
 </cite>

+## 更新摘要
+**变更内容**
+- 新增玻璃拟态视觉语言和设计令牌系统说明
+- 更新首页组件的视觉样式实现细节
+- 补充设计令牌在首页中的应用方式
+- 增强响应式布局和用户体验优化章节
+
 ## 目录
 1. [简介](#简介)
 2. [项目结构](#项目结构)
@@ -30,10 +38,12 @@
 10. [附录](#附录)

 ## 简介
-本文件面向“首页仪表板”页面，系统性阐述其功能布局、数据展示机制、数据获取流程、响应式布局与样式定制、快捷入口配置与路由跳转、生命周期与错误处理、以及性能优化最佳实践。目标读者既包括前端开发者，也包括需要理解整体工作流的产品与运营人员。
+本文件面向"首页仪表板"页面，系统性阐述其功能布局、数据展示机制、数据获取流程、响应式布局与样式定制、快捷入口配置与路由跳转、生命周期与错误处理、以及性能优化最佳实践。目标读者既包括前端开发者，也包括需要理解整体工作流的产品与运营人员。
+
+**最新更新**：首页已全面升级至玻璃拟态视觉语言，采用统一的设计令牌系统和深色模式OLED优化，提供更现代的用户体验。

 ## 项目结构
-首页位于前端单页应用中，采用 Vue 3 + Element Plus 组合，后端基于 Express + Sequelize 提供接口。首页通过 API 获取“今日新增”数据，并在页面上以卡片网格展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。
+首页位于前端单页应用中，采用 Vue 3 + Element Plus 组合，后端基于 Express + Sequelize 提供接口。首页通过 API 获取"今日新增"数据，并在页面上以卡片网格展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。

 ```mermaid
 graph TB
@@ -47,42 +57,45 @@ F["utils/request.js<br/>HTTP拦截器"]
 G["router/index.js<br/>路由与鉴权守卫"]
 H["utils/auth.js<br/>鉴权工具"]
 I["utils/tabs.js<br/>标签页常量"]
+J["styles/lux-theme.css<br/>设计令牌与玻璃拟态样式"]
 end
 subgraph "后端"
-J["routes/dashboard.js<br/>GET /api/dashboard/today"]
-K["utils/response.js<br/>统一响应结构"]
-L["models/Model.js<br/>型号模型"]
-M["models/Ota.js<br/>OTA模型"]
+K["routes/dashboard.js<br/>GET /api/dashboard/today"]
+L["utils/response.js<br/>统一响应结构"]
+M["models/Model.js<br/>型号模型"]
+N["models/Ota.js<br/>OTA模型"]
 end
 A --> B
 B --> C
 C --> D
 D --> E
+D --> J
 E --> F
-F --> J
+F --> K
 G --> H
-J --> K
-J --> L
-J --> M
+K --> L
+K --> M
+K --> N
 ```

-图表来源
+**图表来源**
 - [frontend/src/App.vue:1-30](file://frontend/src/App.vue#L1-L30)
 - [frontend/src/layout/index.vue:1-338](file://frontend/src/layout/index.vue#L1-L338)
 - [frontend/src/components/TabsView.vue:1-351](file://frontend/src/components/TabsView.vue#L1-L351)
- [frontend/src/views/home/index.vue:1-327](file://frontend/src/views/home/index.vue#L1-L327)
+- [frontend/src/views/home/index.vue:1-334](file://frontend/src/views/home/index.vue#L1-L334)
 - [frontend/src/api/dashboard.js:1-12](file://frontend/src/api/dashboard.js#L1-L12)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
 - [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
 - [frontend/src/utils/tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
+- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
 - [backend/src/routes/dashboard.js:1-66](file://backend/src/routes/dashboard.js#L1-L66)
 - [backend/src/utils/response.js:1-25](file://backend/src/utils/response.js#L1-L25)
 - [backend/src/models/Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
 - [backend/src/models/Ota.js:1-97](file://backend/src/models/Ota.js#L1-L97)

-章节来源
- [frontend/src/views/home/index.vue:1-327](file://frontend/src/views/home/index.vue#L1-L327)
+**章节来源**
+- [frontend/src/views/home/index.vue:1-334](file://frontend/src/views/home/index.vue#L1-L334)
 - [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
 - [backend/src/routes/dashboard.js:1-66](file://backend/src/routes/dashboard.js#L1-L66)

@@ -92,15 +105,17 @@ J --> M
 - HTTP 请求拦截器：统一设置 Authorization 头、处理 401/403/通用错误提示。
 - 路由与鉴权：全局前置守卫校验登录态与超级管理员权限，控制访问与重定向。
 - 布局与标签页：侧边栏导航、面包屑、用户下拉菜单、标签页持久化与缓存策略。
+- 设计令牌系统：统一的玻璃拟态视觉语言，包含颜色、阴影、模糊等设计变量。
 - 后端路由与模型：按日期范围查询型号与 OTA 新增记录，统一响应结构。

-章节来源
+**章节来源**
 - [frontend/src/views/home/index.vue:97-149](file://frontend/src/views/home/index.vue#L97-L149)
 - [frontend/src/api/dashboard.js:1-12](file://frontend/src/api/dashboard.js#L1-L12)
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
 - [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
 - [frontend/src/layout/index.vue:144-222](file://frontend/src/layout/index.vue#L144-L222)
 - [frontend/src/components/TabsView.vue:55-287](file://frontend/src/components/TabsView.vue#L55-L287)
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)

 ## 架构总览
@@ -128,7 +143,7 @@ V->>V : 更新 todayModels/todayOtas
 V-->>U : 渲染今日新增卡片
 ```

-图表来源
+**图表来源**
 - [frontend/src/views/home/index.vue:127-148](file://frontend/src/views/home/index.vue#L127-L148)
 - [frontend/src/api/dashboard.js:6-11](file://frontend/src/api/dashboard.js#L6-L11)
 - [frontend/src/utils/request.js:12-69](file://frontend/src/utils/request.js#L12-L69)
@@ -140,7 +155,7 @@ V-->>U : 渲染今日新增卡片
 - 功能布局
  - 欢迎信息：根据本地存储的用户信息动态显示用户名。
  - 快捷入口卡片：支持点击跳转至品牌、型号、OTA、分享日志等模块。
-  - 今日新增统计：分两列网格展示“新增型号”和“新增 OTA”，包含加载态、空态与列表项。
+  - 今日新增统计：分两列网格展示"新增型号"和"新增 OTA"，包含加载态、空态与列表项。
 - 数据绑定与状态
  - 使用响应式引用保存加载状态、今日新增列表。
  - 通过计算属性读取用户名，提升渲染效率。
@@ -151,6 +166,7 @@ V-->>U : 渲染今日新增卡片
  - 使用 CSS Grid 控制快捷入口与今日新增卡片布局。
  - 使用 :deep 选择器覆盖 Element Plus 卡片内部样式。
  - 响应式断点：快捷入口卡片自动换行，最大宽度限制。
+  - **玻璃拟态样式**：应用半透明背景、backdrop-filter 模糊效果和微妙边框光晕。
 - 生命周期
  - 在 mounted 钩子中调用加载函数，保证 DOM 可见后再进行异步数据请求。
 - 错误处理
@@ -160,8 +176,34 @@ V-->>U : 渲染今日新增卡片
  - 列表滚动容器设置最大高度并开启纵向滚动，避免长列表撑开页面。
  - 列表项 hover 仅做背景色过渡，减少复杂动画。

-章节来源
- [frontend/src/views/home/index.vue:1-327](file://frontend/src/views/home/index.vue#L1-L327)
+**更新** 首页组件现已完全集成到玻璃拟态设计系统中，所有卡片和界面元素都采用统一的视觉语言。
+
+**章节来源**
+- [frontend/src/views/home/index.vue:1-334](file://frontend/src/views/home/index.vue#L1-L334)
+
+### 设计令牌系统与玻璃拟态视觉语言
+- 设计哲学
+  - 三层融合设计语言：Glassmorphism (60%) + Dimensional Layering (25%) + Dark Mode OLED (15%)
+  - 核心理念：Glass everywhere、Depth through layers、Contrast first、Consistency over creativity
+- 基础色板
+  - 深空黑底色 (#0a0e14) 保障对比度
+  - 品牌色系：青色 (#38bdf8)、珊瑚色 (#fb7185)、靛蓝色 (#6366f1)
+  - 文本层次：strong (#e2e8f0)、body (#cbd5e1)、muted (#94a3b8)、dim (#64748b)
+- 玻璃表面令牌
+  - 卡片背景：rgba(30, 41, 59, 0.55)
+  - 表格背景：rgba(30, 41, 59, 0.45)
+  - 输入框背景：rgba(15, 23, 42, 0.45)
+  - 对话框背景：rgba(30, 41, 59, 0.72)
+- 玻璃边框与模糊
+  - 边框透明度：0.08 (默认) → 0.14 (hover) → 0.45 (focus)
+  - 模糊强度：blur(8px) → blur(14px) → blur(20px) → blur(24px)
+- 阴影层级
+  - 4级 elevation 系统：card resting → card hover → floating → overlay
+  - 品牌 glow 效果用于焦点态反馈
+
+**章节来源**
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
+- [DESIGN.md:9-25](file://DESIGN.md#L9-L25)

 ### 今日统计 API 与数据格式
 - API 定义
@@ -175,7 +217,7 @@ V-->>U : 渲染今日新增卡片
  - 校验响应 code 是否为成功标识，再将 data.models 与 data.otas 写入组件状态。
  - 时间字段通过格式化函数转换为 HH:mm 展示。

-章节来源
+**章节来源**
 - [frontend/src/api/dashboard.js:1-12](file://frontend/src/api/dashboard.js#L1-L12)
 - [backend/src/routes/dashboard.js:43-58](file://backend/src/routes/dashboard.js#L43-L58)
 - [backend/src/utils/response.js:1-25](file://backend/src/utils/response.js#L1-L25)
@@ -193,9 +235,9 @@ V-->>U : 渲染今日新增卡片
  - 令牌与用户信息存储于 localStorage。
  - 支持从 JWT 解析用户信息与过期时间判断。

-章节来源
+**章节来源**
 - [frontend/src/utils/request.js:1-72](file://frontend/src/utils/request.js#L1-L72)
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
+- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-99)

 ### 路由与导航
 - 路由配置
@@ -207,8 +249,8 @@ V-->>U : 渲染今日新增卡片
 - 用户菜单
  - 支持修改密码、账号管理（超级管理员）、退出登录。

-章节来源
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+**章节来源**
+- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-91)
 - [frontend/src/layout/index.vue:144-222](file://frontend/src/layout/index.vue#L144-L222)
 - [frontend/src/components/TabsView.vue:55-287](file://frontend/src/components/TabsView.vue#L55-L287)

@@ -222,7 +264,7 @@ V-->>U : 渲染今日新增卡片
  - Model：包含品牌名、型号名、创建时间等字段。
  - Ota：包含版本号、版本名、URL、MD5、目标型号、创建时间等字段。

-章节来源
+**章节来源**
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
 - [backend/src/models/Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
 - [backend/src/models/Ota.js:1-97](file://backend/src/models/Ota.js#L1-L97)
@@ -235,7 +277,7 @@ V-->>U : 渲染今日新增卡片
  - 点击卡片触发 go(path) 函数，内部使用 vue-router 的 push 实现导航。
  - 与侧边栏导航保持一致的路径约定，便于统一维护。

-章节来源
+**章节来源**
 - [frontend/src/views/home/index.vue:113-144](file://frontend/src/views/home/index.vue#L113-L144)
 - [frontend/src/router/index.js:26-54](file://frontend/src/router/index.js#L26-L54)

@@ -249,7 +291,7 @@ V-->>U : 渲染今日新增卡片
  - 加载态与空态分别渲染，避免白屏与闪烁。
  - hover 效果与时间格式化提升可读性。

-章节来源
+**章节来源**
 - [frontend/src/views/home/index.vue:127-148](file://frontend/src/views/home/index.vue#L127-L148)
 - [frontend/src/utils/request.js:28-69](file://frontend/src/utils/request.js#L28-L69)

@@ -263,16 +305,22 @@ V-->>U : 渲染今日新增卡片
 - 网络请求
  - 统一 baseURL 与超时设置，避免请求堆积。
  - 401 自动跳转登录，避免无效请求占用资源。
+- **玻璃拟态性能优化**
+  - backdrop-filter 模糊效果适度使用，避免过度影响性能。
+  - 合理使用 CSS 变量，减少重复计算。
+  - 利用 GPU 加速的 transform 和 opacity 属性。

-章节来源
+**章节来源**
 - [frontend/src/components/TabsView.vue:47-50](file://frontend/src/components/TabsView.vue#L47-L50)
 - [frontend/src/utils/request.js:6-9](file://frontend/src/utils/request.js#L6-L9)
 - [frontend/src/views/home/index.vue:250-284](file://frontend/src/views/home/index.vue#L250-L284)
+- [frontend/src/styles/lux-theme.css:356-370](file://frontend/src/styles/lux-theme.css#L356-L370)

 ## 依赖关系分析
 - 组件耦合
  - Home 依赖 api/dashboard.js 与 utils/request.js，形成清晰的职责分离。
  - 与路由层通过 go(path) 解耦，便于测试与替换。
+  - 与样式层通过设计令牌解耦，便于主题切换。
 - 外部依赖
  - Element Plus 提供 UI 组件与图标。
  - Vue Router 提供导航能力。
@@ -300,6 +348,12 @@ class RequestUtil {
 +interceptors.request
 +interceptors.response
 }
+class DesignTokens {
+glassBgCard
+glassBorder
+textStrong
+shadowLevels
+}
 class RouterGuard {
 +beforeEach(to, from, next)
 }
@@ -309,13 +363,15 @@ class LayoutIndexVue {
 }
 HomeIndexVue --> DashboardApi : "调用"
 DashboardApi --> RequestUtil : "封装请求"
+HomeIndexVue --> DesignTokens : "使用"
 LayoutIndexVue --> RouterGuard : "依赖"
 ```

-图表来源
+**图表来源**
 - [frontend/src/views/home/index.vue:97-149](file://frontend/src/views/home/index.vue#L97-L149)
 - [frontend/src/api/dashboard.js:6-11](file://frontend/src/api/dashboard.js#L6-L11)
 - [frontend/src/utils/request.js:12-69](file://frontend/src/utils/request.js#L12-L69)
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
 - [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
 - [frontend/src/layout/index.vue:144-222](file://frontend/src/layout/index.vue#L144-L222)

@@ -323,11 +379,15 @@ LayoutIndexVue --> RouterGuard : "依赖"
 - 渲染层面
  - 长列表设置固定高度与滚动，避免频繁重排。
  - 使用 :deep 覆盖第三方组件样式，减少不必要的样式穿透。
+  - **玻璃拟态渲染优化**：合理使用 backdrop-filter，避免过度模糊影响性能。
 - 网络层面
  - 统一超时与 baseURL，减少请求失败带来的等待。
  - 401 自动清理鉴权信息并跳转，避免无效请求。
 - 缓存层面
  - 标签页 KeepAlive 与 sessionStorage 持久化，减少重复渲染与数据请求。
+- **设计令牌性能**
+  - CSS 变量预编译，减少运行时计算开销。
+  - 统一的阴影和模糊值，避免重复定义。

 ## 故障排查指南
 - 无法加载今日数据
@@ -342,17 +402,23 @@ LayoutIndexVue --> RouterGuard : "依赖"
 - 快捷入口不生效
  - 检查 quickLinks 的 path 是否与路由配置一致。
  - 确认 go(path) 调用是否正确触发路由跳转。
+- **玻璃拟态样式问题**
+  - 检查 lux-theme.css 是否正确引入。
+  - 确认浏览器是否支持 backdrop-filter。
+  - 验证设计令牌变量是否正确定义。

-章节来源
+**章节来源**
 - [frontend/src/utils/request.js:28-69](file://frontend/src/utils/request.js#L28-L69)
 - [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
 - [frontend/src/views/home/index.vue:113-144](file://frontend/src/views/home/index.vue#L113-L144)
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)

 ## 结论
-首页仪表板通过清晰的组件划分、统一的 API 约定与完善的鉴权与拦截机制，实现了良好的用户体验与可维护性。建议后续在以下方面持续优化：
+首页仪表板通过清晰的组件划分、统一的 API 约定与完善的鉴权与拦截机制，实现了良好的用户体验与可维护性。**最新升级**引入了完整的玻璃拟态设计系统和设计令牌，提供了更加现代化和一致的视觉体验。建议后续在以下方面持续优化：
 - 增加加载骨架屏与错误重试策略，进一步提升弱网体验。
 - 对今日新增列表增加分页或虚拟滚动，应对数据量增长。
 - 将快捷入口配置抽象为可配置文件，便于产品侧快速调整。
+- 继续完善设计令牌系统，支持更多自定义主题选项。

 ## 附录
 - 快捷入口卡片配置项
@@ -362,7 +428,14 @@ LayoutIndexVue --> RouterGuard : "依赖"
  - icon：Element Plus 图标组件
 - 标签页持久化键值
  - sessionStorage 中存储的键名用于恢复标签页状态
+- **设计令牌分类**
+  - 基础色板：空间色、品牌色、文本色
+  - 语义令牌：页面、玻璃表面、边框、模糊
+  - 阴影层级：4级 elevation 系统
+  - 圆角规范：sm/md/lg/xl 四级

-章节来源
+**章节来源**
 - [frontend/src/views/home/index.vue:113-118](file://frontend/src/views/home/index.vue#L113-L118)
- [frontend/src/utils/tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
+- [frontend/src/utils/tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
+- [DESIGN.md:28-97](file://DESIGN.md#L28-L97)