新增 luxsin-controller，更新 wiki

.qoder/repowiki/zh/content/前端组件/页面组件/首页仪表板.md

@@ -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)