新增 luxsin-controller，更新 wiki

2026-07-10 16:51:05 +08:00
parent b9ba1d5ed4
commit fc88d42be9
28 changed files with 1009 additions and 270 deletions
@@ -9,6 +9,13 @@
 - [lux-theme.css](file://frontend/src/styles/lux-theme.css)
 </cite>

+## 更新摘要
+**所做更改**
+- 增强了标签页组件的交互体验，添加了平滑的颜色过渡动画（0.2s ease）
+- 支持新的玻璃拟态设计系统，提供更现代的视觉效果
+- 优化了图标和标签项的视觉反馈机制
+- 改进了主题样式与Element Plus组件的集成效果
+
 ## 目录
 1. [简介](#简介)
 2. [项目结构](#项目结构)
@@ -22,7 +29,7 @@
 10. [附录](#附录)

 ## 简介
-本文件为标签页视图组件的综合技术文档，聚焦于标签页的状态管理、数据结构设计、事件处理系统、生命周期管理、主题与图标配置以及与路由系统的集成与状态同步机制。该组件基于 Vue 3 Composition API 与 Element Plus Tabs 实现，支持标签页的激活、关闭、右键菜单操作、持久化存储，并通过 KeepAlive 实现组件缓存与内存优化。
+本文件为标签页视图组件的综合技术文档，聚焦于标签页的状态管理、数据结构设计、事件处理系统、生命周期管理、主题与图标配置以及与路由系统的集成与状态同步机制。该组件基于 Vue 3 Composition API 与 Element Plus Tabs 实现，支持标签页的激活、关闭、右键菜单操作、持久化存储，并通过 KeepAlive 实现组件缓存与内存优化。**最新更新**：增强了平滑颜色过渡动画（0.2s ease）以改善交互体验，并支持新的玻璃拟态设计系统。

 ## 项目结构
 标签页视图组件位于前端工程的组件目录中，与路由、布局及主题样式协同工作：
@@ -30,7 +37,7 @@
 - 工具层：标签页常量与持久化工具函数
 - 路由层：定义页面路由与元信息，驱动标签页标题与图标
 - 布局层：承载标签页视图组件并提供面包屑导航与用户菜单
- 样式层：深色主题与标签页视觉样式
+- 样式层：深色主题与标签页视觉样式，包含玻璃拟态设计系统

 ```mermaid
 graph TB
@@ -47,36 +54,36 @@ TV --> T
 L --> ST
 ```

-图表来源
- [index.vue:131-133](file://frontend/src/layout/index.vue#L131-L133)
+**图表来源**
+- [index.vue:139-141](file://frontend/src/layout/index.vue#L139-L141)
 - [TabsView.vue:1-53](file://frontend/src/components/TabsView.vue#L1-L53)
- [index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [index.js:1-103](file://frontend/src/router/index.js#L1-L103)
 - [tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
- [lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
+- [lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)

-章节来源
- [index.vue:131-133](file://frontend/src/layout/index.vue#L131-L133)
+**章节来源**
+- [index.vue:139-141](file://frontend/src/layout/index.vue#L139-L141)
 - [TabsView.vue:1-53](file://frontend/src/components/TabsView.vue#L1-L53)
- [index.js:1-91](file://frontend/src/router/index.js#L1-L91)
+- [index.js:1-103](file://frontend/src/router/index.js#L1-L103)
 - [tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
- [lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
+- [lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)

 ## 核心组件
 - 标签页视图组件：负责标签集合的渲染、激活切换、关闭、右键菜单、持久化与 KeepAlive 缓存
 - 路由系统：提供页面元信息（标题、图标），驱动标签页标题与图标生成
 - 工具模块：提供标签页存储键名、首页路径等常量与清理函数
 - 布局容器：承载标签页视图组件并提供面包屑导航与用户菜单
- 主题样式：提供深色主题变量与标签页视觉样式
+- 主题样式：提供深色主题变量与标签页视觉样式，支持玻璃拟态设计系统

-章节来源
+**章节来源**
 - [TabsView.vue:55-287](file://frontend/src/components/TabsView.vue#L55-L287)
- [index.js:6-56](file://frontend/src/router/index.js#L6-L56)
+- [index.js:6-67](file://frontend/src/router/index.js#L6-L67)
 - [tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
- [index.vue:131-133](file://frontend/src/layout/index.vue#L131-L133)
- [lux-theme.css:10-471](file://frontend/src/styles/lux-theme.css#L10-L471)
+- [index.vue:139-141](file://frontend/src/layout/index.vue#L139-L141)
+- [lux-theme.css:740-767](file://frontend/src/styles/lux-theme.css#L740-L767)

 ## 架构总览
-标签页视图组件通过路由钩子监听路由变化，动态生成或更新标签项；通过 Element Plus 的 Tabs 组件展示标签，通过 KeepAlive 实现组件缓存；通过 sessionStorage 持久化标签状态；通过右键菜单提供关闭、关闭其他、关闭全部等操作。
+标签页视图组件通过路由钩子监听路由变化，动态生成或更新标签项；通过 Element Plus 的 Tabs 组件展示标签，通过 KeepAlive 实现组件缓存；通过 sessionStorage 持久化标签状态；通过右键菜单提供关闭、关闭其他、关闭全部等操作。**新增功能**：实现了平滑的颜色过渡动画，提升用户交互体验。

 ```mermaid
 sequenceDiagram
@@ -91,15 +98,16 @@ TV->>View : 渲染当前路由组件(KeepAlive)
 View-->>TV : 组件实例缓存
 TV->>TV : handleTabClick/右键菜单/关闭
 TV->>Store : persist() 更新状态
+Note over TV : 添加0.2s平滑颜色过渡动画
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:176-286](file://frontend/src/components/TabsView.vue#L176-L286)
- [index.js:64-88](file://frontend/src/router/index.js#L64-L88)
+- [index.js:76-100](file://frontend/src/router/index.js#L76-L100)

-章节来源
+**章节来源**
 - [TabsView.vue:176-286](file://frontend/src/components/TabsView.vue#L176-L286)
- [index.js:64-88](file://frontend/src/router/index.js#L64-L88)
+- [index.js:76-100](file://frontend/src/router/index.js#L76-L100)

 ## 详细组件分析

@@ -124,18 +132,18 @@ class Tab {
 }
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
 - [TabsView.vue:151-162](file://frontend/src/components/TabsView.vue#L151-L162)

-章节来源
+**章节来源**
 - [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
 - [TabsView.vue:151-162](file://frontend/src/components/TabsView.vue#L151-L162)

 ### 状态管理机制
 - 激活状态：activeKey 双向绑定至 Element Plus Tabs，点击标签即激活
 - 关闭操作：removeTabByKey 根据 key 移除标签，若关闭的是当前激活标签则自动切换到相邻标签或首页
- 重新加载：通过 router-view 的 key 基于 fullPath 变更触发组件重新渲染（非标签页层面的“刷新”）
+- 重新加载：通过 router-view 的 key 基于 fullPath 变更触发组件重新渲染（非标签页层面的"刷新"）

 ```mermaid
 flowchart TD
@@ -147,10 +155,10 @@ Push --> |否| End
 RoutePush --> End(["结束"])
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)

-章节来源
+**章节来源**
 - [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)

 ### 事件处理系统
@@ -180,10 +188,10 @@ TV->>TV : handleCloseAll()
 end
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:202-268](file://frontend/src/components/TabsView.vue#L202-L268)

-章节来源
+**章节来源**
 - [TabsView.vue:202-268](file://frontend/src/components/TabsView.vue#L202-L268)

 ### 生命周期管理与缓存策略
@@ -201,11 +209,11 @@ Watch2["watch(tabs + activeKey)"] --> Persist["persist() 持久化"]
 KeepAlive["computed keepAliveInclude"] --> Cache["KeepAlive include"]
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:270-286](file://frontend/src/components/TabsView.vue#L270-L286)
 - [TabsView.vue:120-123](file://frontend/src/components/TabsView.vue#L120-L123)

-章节来源
+**章节来源**
 - [TabsView.vue:270-286](file://frontend/src/components/TabsView.vue#L270-L286)
 - [TabsView.vue:120-123](file://frontend/src/components/TabsView.vue#L120-L123)

@@ -229,25 +237,37 @@ TV->>Router : router.push(fullPath)
 end
 ```

-图表来源
+**图表来源**
 - [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
 - [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-L191)
 - [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)
- [index.js:64-88](file://frontend/src/router/index.js#L64-L88)
+- [index.js:76-100](file://frontend/src/router/index.js#L76-L100)

-章节来源
+**章节来源**
 - [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
 - [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-L191)
 - [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)
- [index.js:64-88](file://frontend/src/router/index.js#L64-L88)
+- [index.js:76-100](file://frontend/src/router/index.js#L76-L100)

 ### 主题定制、图标配置与动态内容渲染
- 主题定制：深色主题变量集中于 lux-theme.css，标签页样式通过 :deep 选择器覆盖 Element Plus 默认样式
- 图标配置：通过 icon 键值映射到 Element Plus 图标组件，支持 document/list/upload/collection/home/user 等
- 动态内容渲染：router-view 结合 KeepAlive，通过 key 基于 fullPath 变更触发组件重新渲染

-章节来源
- [lux-theme.css:10-471](file://frontend/src/styles/lux-theme.css#L10-L471)
+**更新** 新增了平滑颜色过渡动画和玻璃拟态设计系统支持
+
+- **平滑过渡动画**：标签页图标和文本元素添加了 `transition: color 0.2s ease` 属性，提供流畅的颜色变化效果
+- **玻璃拟态设计**：通过 CSS 变量和 backdrop-filter 实现现代玻璃质感效果
+- **主题定制**：深色主题变量集中于 lux-theme.css，标签页样式通过 :deep 选择器覆盖 Element Plus 默认样式
+- **图标配置**：通过 icon 键值映射到 Element Plus 图标组件，支持 document/list/upload/collection/home/user 等
+- **动态内容渲染**：router-view 结合 KeepAlive，通过 key 基于 fullPath 变更触发组件重新渲染
+
+**新增特性**：
+- 图标悬停和激活状态的平滑颜色过渡（0.2s ease）
+- 标签页背景色的渐变过渡效果
+- 玻璃拟态边框和阴影效果
+- 增强的视觉层次感和深度感
+
+**章节来源**
+- [lux-theme.css:740-767](file://frontend/src/styles/lux-theme.css#L740-L767)
+- [TabsView.vue:320-324](file://frontend/src/components/TabsView.vue#L320-L324)
 - [TabsView.vue:64-76](file://frontend/src/components/TabsView.vue#L64-L76)
 - [TabsView.vue:46-50](file://frontend/src/components/TabsView.vue#L46-L50)

@@ -266,23 +286,24 @@ TV --> RT["router/index.js"]
 L["layout/index.vue"] --> TV
 ```

-图表来源
- [TabsView.vue:58-59](file://frontend/src/components/TabsView.vue#L58-L59)
+**图表来源**
+- [TabsView.vue:56-59](file://frontend/src/components/TabsView.vue#L56-L59)
 - [tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
- [index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [index.vue:131-133](file://frontend/src/layout/index.vue#L131-L133)
+- [index.js:1-103](file://frontend/src/router/index.js#L1-L103)
+- [index.vue:158](file://frontend/src/layout/index.vue#L158)

-章节来源
- [TabsView.vue:58-59](file://frontend/src/components/TabsView.vue#L58-L59)
+**章节来源**
+- [TabsView.vue:56-59](file://frontend/src/components/TabsView.vue#L56-L59)
 - [tabs.js:1-9](file://frontend/src/utils/tabs.js#L1-L9)
- [index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [index.vue:131-133](file://frontend/src/layout/index.vue#L131-L133)
+- [index.js:1-103](file://frontend/src/router/index.js#L1-L103)
+- [index.vue:158](file://frontend/src/layout/index.vue#L158)

 ## 性能考量
 - KeepAlive 缓存：仅缓存有 name 的标签组件，避免无意义的实例保活
 - 持久化频率：通过 watch 监听 tabs 与 activeKey 变化进行持久化，减少频繁写入
 - DOM 重绘：标签标题与图标采用固定宽度与省略号，避免布局抖动
 - 路由跳转：仅在 fullPath 与当前不同才执行跳转，避免重复导航
+- **动画性能**：使用 CSS transition 而非 JavaScript 动画，确保 0.2s 过渡动画的流畅性

 ## 故障排查指南
 - 标签无法关闭：检查 closable 字段，首页标签默认不可关闭
@@ -290,8 +311,9 @@ L["layout/index.vue"] --> TV
 - 图标不显示：检查 meta.icon 键值是否正确且在 iconMap 中有对应映射
 - 标签状态丢失：检查 sessionStorage 写入权限与容量限制
 - 路由跳转无效：检查 fullPath 与当前路由是否一致，避免不必要的 router.push
+- **动画问题**：检查浏览器是否支持 CSS transition 和 backdrop-filter 属性

-章节来源
+**章节来源**
 - [TabsView.vue:101-101](file://frontend/src/components/TabsView.vue#L101-L101)
 - [TabsView.vue:78-81](file://frontend/src/components/TabsView.vue#L78-L81)
 - [TabsView.vue:64-76](file://frontend/src/components/TabsView.vue#L64-L76)
@@ -299,14 +321,19 @@ L["layout/index.vue"] --> TV
 - [TabsView.vue:197-199](file://frontend/src/components/TabsView.vue#L197-L199)

 ## 结论
-标签页视图组件通过清晰的数据结构、完善的事件处理与路由集成，实现了标签的激活、关闭、右键菜单与持久化。结合 KeepAlive 缓存与主题样式，提供了良好的用户体验与性能表现。建议在扩展新功能时遵循现有模式，保持标签状态与路由状态的一致性，并注意缓存范围与持久化策略的平衡。
+标签页视图组件通过清晰的数据结构、完善的事件处理与路由集成，实现了标签的激活、关闭、右键菜单与持久化。**最新改进**：通过添加 0.2s 平滑颜色过渡动画和玻璃拟态设计系统支持，显著提升了用户体验和视觉品质。结合 KeepAlive 缓存与现代化主题样式，提供了优秀的交互性能和美观的界面表现。建议在扩展新功能时遵循现有模式，保持标签状态与路由状态的一致性，并注意缓存范围与持久化策略的平衡。

 ## 附录
 - 常用配置项
  - 存储键名：TABS_STORAGE_KEY
  - 首页路径：HOME_PATH
  - 图标映射：document/list/upload/collection/home/user
+- **新增动画配置**
+  - 过渡时间：0.2s
+  - 缓动函数：ease
+  - 过渡属性：color
 - 最佳实践
  - 在路由 meta 中提供 title 与 icon，确保标签显示一致性
  - 控制 KeepAlive include 范围，避免过度缓存
-  - 使用 sessionStorage 进行轻量级状态持久化，避免频繁写入
+  - 使用 sessionStorage 进行轻量级状态持久化，避免频繁写入
+  - 利用 CSS transition 实现流畅的用户交互反馈
@@ -16,11 +16,12 @@

 ## 更新摘要
 **所做更改**
- 更新了侧边栏导航系统架构，从六个独立菜单项简化为三个主要分类
- 新增了侧边栏轨道导航（Rail Navigation）功能，提供快速展开侧边栏的交互体验
- 改进了导航链接实现方式，采用普通锚元素配合点击处理器替代Vue Router链接
- 增强了用户体验，实现了自动展开侧边栏的智能交互逻辑
- 更新了导航分类结构，重新组织了耳机管理、升级管理和分享码三大功能模块
+- 更新了主布局组件以支持全新的玻璃拟态设计系统和深色宇宙主题
+- 新增了动态背景光球效果，营造沉浸式视觉体验
+- 重构了侧边栏为悬浮式玻璃面板，支持智能展开/收起交互
+- 实现了三层导航架构：轨道导航 + 分类菜单 + 面包屑导航
+- 全面升级了主题系统，采用CSS变量驱动的响应式设计
+- 优化了组件间的依赖关系和性能表现

 ## 目录
 1. [简介](#简介)
@@ -37,14 +38,17 @@

 本项目采用现代化的Vue 3 + Element Plus前端技术栈构建，布局组件是整个系统的骨架结构，负责组织页面的整体架构。该布局组件实现了响应式设计，支持桌面端和移动端的自适应布局，提供了完整的导航体系和主题适配功能。

-**最新更新** 导航系统进行了重大改进，采用了创新的三层导航架构：
- **侧边栏轨道导航**：轻量化的图标导航条，提供快速访问入口
- **主菜单导航**：分类化的三级菜单结构，包含耳机管理、升级管理和分享码三大模块
- **顶部面包屑导航**：动态生成的路径导航，增强用户定位能力
+**最新更新亮点** 布局组件已全面升级为玻璃拟态设计风格：
+- **沉浸式背景系统**：动态光球动画营造深邃的宇宙空间感
+- **悬浮式侧边栏**：采用backdrop-filter实现真实的毛玻璃效果
+- **三层导航架构**：轨道导航 + 分类菜单 + 面包屑导航
+- **智能交互体验**：自动展开、悬停反馈、流畅过渡动画
+- **完整主题系统**：基于CSS变量的深色宇宙主题设计

 布局组件的核心特色包括：
- **三层导航系统**：轨道导航 + 分类菜单 + 面包屑导航
- **智能侧边栏**：支持展开/收起的玻璃拟态设计，具备自动展开功能
+- **玻璃拟态设计**：backdrop-filter模糊效果与半透明背景
+- **动态背景系统**：三个渐变光球的动画效果
+- **智能侧边栏**：支持展开/收起的玻璃面板，具备自动展开功能
 - **标签页管理**：多标签页浏览和持久化存储
 - **深色主题**：基于CSS变量的主题系统
 - **响应式适配**：针对不同屏幕尺寸的优化布局
@@ -80,11 +84,11 @@ end
 ```

 **图表来源**
- [frontend/src/layout/index.vue:1-349](file://frontend/src/layout/index.vue#L1-L349)
+- [frontend/src/layout/index.vue:1-351](file://frontend/src/layout/index.vue#L1-L351)
 - [frontend/src/router/index.js:1-103](file://frontend/src/router/index.js#L1-L103)

 **章节来源**
- [frontend/src/layout/index.vue:1-349](file://frontend/src/layout/index.vue#L1-L349)
+- [frontend/src/layout/index.vue:1-351](file://frontend/src/layout/index.vue#L1-L351)
 - [frontend/src/router/index.js:1-103](file://frontend/src/router/index.js#L1-L103)

 ## 核心组件
@@ -95,27 +99,31 @@ end

 ```mermaid
 graph LR
-A[LuxShell<br/>主容器] --> B[LuxShellBody<br/>主体容器]
-B --> C[ElContainer<br/>右侧列容器]
-C --> D[ElHeader<br/>顶部导航栏]
-C --> E[ElMain<br/>主要内容区]
-C --> F[ElFooter<br/>底部版权区]
-B --> G[ElAside<br/>侧边栏容器]
-G --> H[SidebarInner<br/>侧边栏内部容器]
-H --> I[SidebarLogo<br/>Logo组件]
-H --> J[SidebarNavWrap<br/>导航包装器]
-J --> K[SidebarRail<br/>轨道导航]
-J --> L[LuxMenu<br/>分类菜单]
-K --> M[耳机管理图标]
-K --> N[升级管理图标]
-K --> O[分享码图标]
-L --> P[耳机管理子菜单]
-L --> Q[升级管理子菜单]
-L --> R[分享码子菜单]
+A[LuxShell<br/>主容器] --> B[LuxShellBg<br/>背景层]
+B --> C[LuxOrb1<br/>青色光球]
+B --> D[LuxOrb2<br/>紫色光球]
+B --> E[LuxOrb3<br/>珊瑚色光球]
+A --> F[LuxShellBody<br/>主体容器]
+F --> G[ElContainer<br/>右侧列容器]
+G --> H[ElHeader<br/>顶部导航栏]
+G --> I[ElMain<br/>主要内容区]
+G --> J[ElFooter<br/>底部版权区]
+F --> K[ElAside<br/>侧边栏容器]
+K --> L[SidebarInner<br/>侧边栏内部容器]
+L --> M[SidebarLogo<br/>Logo组件]
+L --> N[SidebarNavWrap<br/>导航包装器]
+N --> O[SidebarRail<br/>轨道导航]
+N --> P[LuxMenu<br/>分类菜单]
+O --> Q[耳机管理图标]
+O --> R[升级管理图标]
+O --> S[分享码图标]
+P --> T[耳机管理子菜单]
+P --> U[升级管理子菜单]
+P --> V[分享码子菜单]
 ```

 **图表来源**
- [frontend/src/layout/index.vue:9-146](file://frontend/src/layout/index.vue#L9-L146)
+- [frontend/src/layout/index.vue:2-146](file://frontend/src/layout/index.vue#L2-L146)

 ### 组件层次结构

@@ -220,38 +228,30 @@ O --> P[页面跳转]

 ### 主布局组件详解

-#### 三层导航结构设计
+#### 玻璃拟态设计系统

-主布局组件采用了创新的三层导航架构，通过CSS Grid和Flexbox实现灵活的布局：
+主布局组件采用了全新的玻璃拟态设计系统，通过CSS变量和backdrop-filter实现：

 ```mermaid
 graph TB
-subgraph "轨道导航层"
-A[SidebarRail<br/>64px宽度] --> B[三个分类图标]
-B --> C[耳机管理图标]
-B --> D[升级管理图标]
-B --> E[分享码图标]
+subgraph "背景层"
+A[LuxShellBg<br/>绝对定位背景] --> B[LuxOrb1<br/>青色光球]
+A --> C[LuxOrb2<br/>紫色光球]
+A --> D[LuxOrb3<br/>珊瑚色光球]
 end
-subgraph "主菜单层"
-F[LuxMenu<br/>220px宽度] --> G[耳机管理子菜单]
-F --> H[升级管理子菜单]
-F --> I[分享码子菜单]
-G --> J[品牌管理]
-G --> K[型号管理]
-H --> L[OTA管理]
-H --> M[黑名单管理]
-H --> N[定向升级]
-I --> O[分享日志]
-end
-subgraph "面包屑层"
-P[顶部导航] --> Q[动态路径生成]
-Q --> R[当前页面标识]
+subgraph "内容层"
+E[LuxShellBody<br/>相对定位主体] --> F[ElContainer<br/>Flex布局容器]
+F --> G[ElAside<br/>悬浮侧边栏]
+F --> H[ElContainer<br/>右侧内容区]
+H --> I[ElHeader<br/>玻璃头部]
+H --> J[ElMain<br/>透明主内容]
+H --> K[ElFooter<br/>玻璃底部]
 end
 ```

 **图表来源**
- [frontend/src/layout/index.vue:22-91](file://frontend/src/layout/index.vue#L22-L91)
- [frontend/src/layout/index.vue:189-193](file://frontend/src/layout/index.vue#L189-L193)
+- [frontend/src/layout/index.vue:2-146](file://frontend/src/layout/index.vue#L2-L146)
+- [frontend/src/styles/lux-theme.css:80-151](file://frontend/src/styles/lux-theme.css#L80-L151)

 #### 智能导航系统实现

@@ -276,10 +276,11 @@ end
 classDiagram
 class SidebarGlass {
 +width : 64px/220px
-+backdropFilter : blur(18px)
-+backgroundColor : rgba(15,23,42,0.6)
+backdropFilter : blur(20px)
+backgroundColor : rgba(15,23,42,0.60)
 +borderRight : 1px solid rgba(255,255,255,0.08)
 +transition : width 0.30s ease
+boxShadow : 多层阴影效果
 }
 class SidebarRail {
 +position : absolute
@@ -292,6 +293,7 @@ class SidebarLogo {
 +collapsed : Boolean
 +animation : slide/fade
 +responsive : true
+gradientText : 渐变色文字
 }
 class SidebarNavWrap {
 +position : relative
@@ -312,7 +314,7 @@ SidebarNavWrap --> LuxMenu

 **图表来源**
 - [frontend/src/layout/index.vue:10-93](file://frontend/src/layout/index.vue#L10-L93)
- [frontend/src/styles/lux-theme.css:101-195](file://frontend/src/styles/lux-theme.css#L101-L195)
+- [frontend/src/styles/lux-theme.css:156-252](file://frontend/src/styles/lux-theme.css#L156-L252)

 #### 智能交互逻辑

@@ -406,8 +408,8 @@ Route-->>Tabs : 页面加载完成
 ```

 **图表来源**
- [frontend/src/components/TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-L191)
- [frontend/src/components/TabsView.vue:276-286](file://frontend/src/components/TabsView.vue#L276-L286)
+- [frontend/src/components/TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-191)
+- [frontend/src/components/TabsView.vue:276-286](file://frontend/src/components/TabsView.vue#L276-286)

 #### 标签页持久化机制

@@ -427,34 +429,37 @@ K --> L[下次访问恢复]
 ```

 **图表来源**
- [frontend/src/components/TabsView.vue:143-174](file://frontend/src/components/TabsView.vue#L143-L174)
- [frontend/src/components/TabsView.vue:125-141](file://frontend/src/components/TabsView.vue#L125-L141)
+- [frontend/src/components/TabsView.vue:143-174](file://frontend/src/components/TabsView.vue#L143-174)
+- [frontend/src/components/TabsView.vue:125-141](file://frontend/src/components/TabsView.vue#L125-141)

 **章节来源**
 - [frontend/src/components/TabsView.vue:55-287](file://frontend/src/components/TabsView.vue#L55-L287)

 ### 主题系统分析

-#### 深色主题实现
+#### 玻璃拟态主题实现

-项目采用了基于CSS变量的主题系统：
+项目采用了全新的玻璃拟态主题系统，基于CSS变量实现：

 ```mermaid
 graph TB
 A[主题变量定义] --> B[:root变量]
 B --> C[--lux-page-bg: #0a0e14]
-B --> D[--lux-card-bg: #1e293b]
-B --> E[--lux-text-strong: #e2e8f0]
-F[组件样式] --> G[使用CSS变量]
-G --> H[统一颜色管理]
-G --> I[主题一致性]
-J[运行时切换] --> K[变量值替换]
-K --> L[即时主题更新]
+B --> D[--lux-glass-bg-card: rgba(30,41,59,0.55)]
+B --> E[--lux-blur-lg: blur(20px)]
+B --> F[--lux-cyan: #38bdf8]
+G[组件样式] --> H[使用CSS变量]
+H --> I[统一颜色管理]
+H --> J[主题一致性]
+K[运行时切换] --> L[变量值替换]
+L --> M[即时主题更新]
+N[背景光球] --> O[动态渐变效果]
+O --> P[沉浸式体验]
 ```

 **图表来源**
- [frontend/src/styles/lux-theme.css:10-25](file://frontend/src/styles/lux-theme.css#L10-L25)
- [frontend/src/styles/lux-theme.css:27-35](file://frontend/src/styles/lux-theme.css#L27-L35)
+- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
+- [frontend/src/styles/lux-theme.css:98-129](file://frontend/src/styles/lux-theme.css#L98-L129)

 #### 样式覆盖策略

@@ -468,14 +473,17 @@ E --> F[子组件样式覆盖]
 G[主题变量] --> H[--lux-cyan: #38bdf8]
 H --> I[统一色彩规范]
 I --> J[一致的视觉体验]
+K[玻璃效果] --> L[backdrop-filter]
+L --> M[模糊背景]
+M --> N[现代UI风格]
 ```

 **图表来源**
- [frontend/src/styles/lux-theme.css:352-377](file://frontend/src/styles/lux-theme.css#L352-L377)
- [frontend/src/layout/index.vue:330-336](file://frontend/src/layout/index.vue#L330-L336)
+- [frontend/src/styles/lux-theme.css:352-377](file://frontend/src/styles/lux-theme.css#L352-377)
+- [frontend/src/layout/index.vue:330-336](file://frontend/src/layout/index.vue#L330-336)

 **章节来源**
- [frontend/src/styles/lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
+- [frontend/src/styles/lux-theme.css:1-800](file://frontend/src/styles/lux-theme.css#L1-L800)

 ## 依赖关系分析

@@ -499,6 +507,9 @@ Q --> R[权限验证]
 S[Icons] --> T[Headset, Upload, Share等图标]
 T --> U[轨道导航图标]
 T --> V[菜单项图标]
+W[Theme System] --> X[CSS Variables]
+X --> Y[Glass Effects]
+Y --> Z[Visual Consistency]
 ```

 **图表来源**
@@ -533,6 +544,7 @@ T --> V[菜单项图标]
 3. **缓存机制**：标签页内容的KeepAlive缓存
 4. **事件节流**：侧边栏交互事件的处理
 5. **计算属性优化**：使用computed缓存导航状态计算结果
+6. **GPU加速**：CSS变换和透明度动画利用硬件加速

 ### 内存管理

@@ -548,6 +560,8 @@ I[标签页切换] --> J[KeepAlive缓存]
 J --> K[避免重复渲染]
 L[导航状态变化] --> M[响应式更新]
 M --> N[最小化重渲染]
+O[背景光球] --> P[静态CSS动画]
+P --> Q[无JavaScript开销]
 ```

 **图表来源**
@@ -581,6 +595,10 @@ M --> N[最小化重渲染]
 **原因**：路由配置错误
 **解决**：验证路由配置和组件导入

+**问题**：玻璃效果不显示
+**原因**：浏览器不支持backdrop-filter
+**解决**：添加polyfill或降级方案
+
 #### 性能问题

 **问题**：页面切换卡顿
@@ -591,6 +609,10 @@ M --> N[最小化重渲染]
 **原因**：事件监听器未清理
 **解决**：确保在组件卸载时清理所有监听器

+**问题**：背景动画影响性能
+**原因**：光球动画过于复杂
+**解决**：减少动画帧率或使用CSS动画替代JS动画
+
 **章节来源**
 - [frontend/src/layout/index.vue:195-197](file://frontend/src/layout/index.vue#L195-L197)
 - [frontend/src/layout/index.vue:174-187](file://frontend/src/layout/index.vue#L174-L187)
@@ -600,17 +622,21 @@ M --> N[最小化重渲染]

 本布局组件展现了现代前端开发的最佳实践，通过精心设计的架构实现了：

-1. **创新的三层导航系统**：轨道导航 + 分类菜单 + 面包屑导航，提供丰富的导航体验
-2. **智能交互设计**：自动展开侧边栏、智能菜单展开、流畅的过渡动画
-3. **优秀的用户体验**：响应式设计和流畅的交互效果
-4. **可维护性**：清晰的组件分离和模块化设计
-5. **可扩展性**：灵活的主题系统和配置选项
-6. **性能优化**：合理的渲染策略和资源管理
+1. **创新的玻璃拟态设计**：backdrop-filter模糊效果与半透明背景营造现代感
+2. **沉浸式背景系统**：动态光球动画营造深邃的宇宙空间感
+3. **智能交互设计**：自动展开侧边栏、智能菜单展开、流畅的过渡动画
+4. **优秀的用户体验**：响应式设计和流畅的交互效果
+5. **可维护性**：清晰的组件分离和模块化设计
+6. **可扩展性**：灵活的主题系统和配置选项
+7. **性能优化**：合理的渲染策略和资源管理

 **最新更新亮点**：
+- **玻璃拟态设计系统**：全面的backdrop-filter效果和半透明背景
+- **动态背景光球**：三个渐变光球的动画效果营造沉浸感
+- **悬浮式侧边栏**：独立的玻璃面板设计，支持智能展开/收起
 - **简化的导航结构**：从六个独立菜单项重构为三个主要分类，提升了导航效率
 - **创新的轨道导航**：轻量化的图标导航条，提供快速访问入口
 - **智能的用户体验**：点击轨道图标自动展开侧边栏，减少操作步骤
 - **灵活的导航实现**：采用普通锚元素配合点击处理器，提供更灵活的导航行为

-该布局组件为整个Dashboard系统提供了坚实的基础，支持未来功能的扩展和定制化需求。通过合理的架构设计和实现细节，确保了系统的稳定性和可维护性。新的导航系统不仅提升了用户体验，也为后续的功能扩展提供了良好的架构基础。
+该布局组件为整个Dashboard系统提供了坚实的基础，支持未来功能的扩展和定制化需求。通过合理的架构设计和实现细节，确保了系统的稳定性和可维护性。新的玻璃拟态设计不仅提升了用户体验，也为后续的功能扩展提供了良好的架构基础。
@@ -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)