全新的 ui，soybean admin

2026-07-17 09:35:32 +08:00
parent e59d9c72ee
commit 1da6d72544
501 changed files with 11790 additions and 22638 deletions
@@ -2,28 +2,38 @@

 <cite>
 **本文引用的文件列表**
- [frontend/src/views/home/index.vue](file://frontend/src/views/home/index.vue)
- [frontend/src/api/dashboard.js](file://frontend/src/api/dashboard.js)
- [frontend/src/utils/request.js](file://frontend/src/utils/request.js)
- [frontend/src/router/index.js](file://frontend/src/router/index.js)
- [frontend/src/utils/auth.js](file://frontend/src/utils/auth.js)
- [frontend/src/utils/tabs.js](file://frontend/src/utils/tabs.js)
- [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)
+- [frontend_v2/src/views/home/index.vue](file://frontend_v2/src/views/home/index.vue)
+- [frontend_v2/src/views/home/modules/card-data.vue](file://frontend_v2/src/views/home/modules/card-data.vue)
+- [frontend_v2/src/views/home/modules/header-banner.vue](file://frontend_v2/src/views/home/modules/header-banner.vue)
+- [frontend_v2/src/views/home/modules/line-chart.vue](file://frontend_v2/src/views/home/modules/line-chart.vue)
+- [frontend_v2/src/views/home/modules/pie-chart.vue](file://frontend_v2/src/views/home/modules/pie-chart.vue)
+- [frontend_v2/src/views/home/modules/project-news.vue](file://frontend_v2/src/views/home/modules/project-news.vue)
+- [frontend_v2/src/views/home/modules/creativity-banner.vue](file://frontend_v2/src/views/home/modules/creativity-banner.vue)
+- [frontend_v2/src/service/api/dashboard.ts](file://frontend_v2/src/service/api/dashboard.ts)
+- [frontend_v2/src/hooks/common/echarts.ts](file://frontend_v2/src/hooks/common/echarts.ts)
+- [frontend_v2/src/store/modules/app/index.ts](file://frontend_v2/src/store/modules/app/index.ts)
+- [frontend_v2/src/router/guard/route.ts](file://frontend_v2/src/router/guard/route.ts)
+- [frontend_v2/src/layouts/base-layout/index.vue](file://frontend_v2/src/layouts/base-layout/index.vue)
+- [frontend_v2/src/layouts/modules/global-header/index.vue](file://frontend_v2/src/layouts/modules/global-header/index.vue)
+- [frontend_v2/src/layouts/modules/global-menu/index.vue](file://frontend_v2/src/layouts/modules/global-menu/index.vue)
+- [frontend_v2/src/layouts/modules/global-tab/index.vue](file://frontend_v2/src/layouts/modules/global-tab/index.vue)
+- [frontend_v2/src/theme/settings.ts](file://frontend_v2/src/theme/settings.ts)
+- [frontend_v2/src/constants/env.ts](file://frontend_v2/src/constants/env.ts)
 - [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)
- [frontend/src/views/toolbox/luxsin-controller/index.vue](file://frontend/src/views/toolbox/luxsin-controller/index.vue)
 </cite>

 ## 更新摘要
 **变更内容**
- 新增 Luxsin 控制器快捷入口链接，提供局域网设备数据同步的快速访问功能
- 更新快捷入口配置数组，增加工具箱功能模块
- 完善路由配置，支持新的工具页面导航
+- 首页完全重写为前端v2架构，采用Vue 3 + TypeScript组合
+- 引入模块化组件结构，将首页拆分为多个独立的功能模块
+- 集成ECharts图表库实现数据可视化展示
+- 采用Naive UI组件库替代Element Plus，提供更现代化的UI体验
+- 使用Pinia状态管理替代Vuex，支持TypeScript类型安全
+- 实现响应式布局设计，适配不同屏幕尺寸
+- 优化数据获取流程，使用Alova HTTP客户端提升性能

 ## 目录
 1. [简介](#简介)
@@ -40,177 +50,249 @@
 ## 简介
 本文件面向"首页仪表板"页面，系统性阐述其功能布局、数据展示机制、数据获取流程、响应式布局与样式定制、快捷入口配置与路由跳转、生命周期与错误处理、以及性能优化最佳实践。目标读者既包括前端开发者，也包括需要理解整体工作流的产品与运营人员。

-**最新更新**：首页已全面升级至玻璃拟态视觉语言，采用统一的设计令牌系统和深色模式OLED优化，提供更现代的用户体验。同时新增了 Luxsin 控制器快捷入口，为局域网设备数据同步提供了快速访问通道。
+**最新更新**：首页已完全重写为前端v2版本，采用全新的模块化架构设计，集成了ECharts数据可视化能力，提供了更加现代化和响应式的用户体验。新的架构支持TypeScript类型安全，使用Naive UI组件库和Pinia状态管理，显著提升了代码质量和可维护性。

 ## 项目结构
-首页位于前端单页应用中，采用 Vue 3 + Element Plus 组合，后端基于 Express + Sequelize 提供接口。首页通过 API 获取"今日新增"数据，并在页面上以卡片网格展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。
+首页位于前端v2单页应用中，采用 Vue 3 + TypeScript + Naive UI 组合，后端基于 Express + Sequelize 提供接口。首页通过模块化组件结构组织，每个功能模块独立封装，通过API获取"今日新增"数据，并在页面上以卡片网格和图表形式展示；同时提供快捷入口卡片，点击后通过路由跳转到相应功能模块。

 ```mermaid
 graph TB
-subgraph "前端"
+subgraph "前端V2架构"
 A["App.vue<br/>根组件"]
-B["Layout/index.vue<br/>布局容器"]
-C["TabsView.vue<br/>标签页视图"]
-D["Home/index.vue<br/>首页仪表板"]
-E["api/dashboard.js<br/>今日统计API封装"]
-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/>设计令牌与玻璃拟态样式"]
-K["toolbox/luxsin-controller/index.vue<br/>设备数据同步工具"]
+B["BaseLayout/index.vue<br/>基础布局容器"]
+C["GlobalHeader/index.vue<br/>全局头部导航"]
+D["GlobalMenu/index.vue<br/>全局菜单系统"]
+E["GlobalTab/index.vue<br/>标签页管理"]
+F["Home/index.vue<br/>首页主容器"]
+G["modules/*<br/>功能模块组件"]
+H["service/api/dashboard.ts<br/>今日统计API封装"]
+I["hooks/common/echarts.ts<br/>ECharts钩子函数"]
+J["store/modules/app/index.ts<br/>应用状态管理"]
+K["router/guard/route.ts<br/>路由守卫"]
 end
-subgraph "后端"
+subgraph "后端服务"
 L["routes/dashboard.js<br/>GET /api/dashboard/today"]
 M["utils/response.js<br/>统一响应结构"]
 N["models/Model.js<br/>型号模型"]
 O["models/Ota.js<br/>OTA模型"]
-P["局域网设备<br/>dev/info.cgi"]
 end
 A --> B
 B --> C
-C --> D
-D --> E
-D --> J
-D --> K
-E --> F
-F --> L
-G --> H
+B --> D
+B --> E
+B --> F
+F --> G
+F --> H
+G --> I
+G --> J
+C --> K
+H --> L
 L --> M
 L --> N
 L --> O
-K --> P
 ```

 **图表来源**
- [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-335](file://frontend/src/views/home/index.vue#L1-L335)
- [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-109](file://frontend/src/router/index.js#L1-L109)
- [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)
+- [frontend_v2/src/App.vue:1-50](file://frontend_v2/src/App.vue#L1-L50)
+- [frontend_v2/src/layouts/base-layout/index.vue:1-100](file://frontend_v2/src/layouts/base-layout/index.vue#L1-L100)
+- [frontend_v2/src/layouts/modules/global-header/index.vue:1-80](file://frontend_v2/src/layouts/modules/global-header/index.vue#L1-L80)
+- [frontend_v2/src/layouts/modules/global-menu/index.vue:1-120](file://frontend_v2/src/layouts/modules/global-menu/index.vue#L1-L120)
+- [frontend_v2/src/layouts/modules/global-tab/index.vue:1-90](file://frontend_v2/src/layouts/modules/global-tab/index.vue#L1-L90)
+- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)
+- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
+- [frontend_v2/src/views/home/modules/line-chart.vue:1-80](file://frontend_v2/src/views/home/modules/line-chart.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/pie-chart.vue:1-80](file://frontend_v2/src/views/home/modules/pie-chart.vue#L1-L80)
+- [frontend_v2/src/service/api/dashboard.ts:1-50](file://frontend_v2/src/service/api/dashboard.ts#L1-L50)
+- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
+- [frontend_v2/src/store/modules/app/index.ts:1-80](file://frontend_v2/src/store/modules/app/index.ts#L1-L80)
+- [frontend_v2/src/router/guard/route.ts:1-100](file://frontend_v2/src/router/guard/route.ts#L1-L100)
 - [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/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-L231)

 **章节来源**
- [frontend/src/views/home/index.vue:1-335](file://frontend/src/views/home/index.vue#L1-L335)
- [frontend/src/router/index.js:1-109](file://frontend/src/router/index.js#L1-L109)
+- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)
+- [frontend_v2/src/layouts/base-layout/index.vue:1-100](file://frontend_v2/src/layouts/base-layout/index.vue#L1-L100)
 - [backend/src/routes/dashboard.js:1-66](file://backend/src/routes/dashboard.js#L1-L66)

 ## 核心组件
- 首页仪表板组件：负责渲染欢迎信息、快捷入口卡片、今日新增统计区域，并在挂载时触发数据加载。
+- 首页主容器组件：负责协调各个功能模块的渲染和数据传递，管理整体布局结构。
+- 数据卡片组件：展示关键业务指标的卡片组件，支持动态数据绑定和交互效果。
+- 欢迎横幅组件：显示用户欢迎信息和快速操作入口。
+- 图表组件：基于ECharts实现的折线图和饼图组件，用于数据可视化展示。
+- 项目新闻组件：展示系统最新动态和通知信息。
+- 创意横幅组件：提供视觉吸引力和品牌展示的横幅区域。
 - 今日统计 API 封装：封装 GET /api/dashboard/today 请求，返回 Promise。
- HTTP 请求拦截器：统一设置 Authorization 头、处理 401/403/通用错误提示。
- 路由与鉴权：全局前置守卫校验登录态与超级管理员权限，控制访问与重定向。
- 布局与标签页：侧边栏导航、面包屑、用户下拉菜单、标签页持久化与缓存策略。
- 设计令牌系统：统一的玻璃拟态视觉语言，包含颜色、阴影、模糊等设计变量。
+- ECharts 钩子函数：提供图表初始化和数据绑定的通用逻辑。
+- 应用状态管理：使用Pinia管理应用级状态和用户信息。
+- 路由守卫：实现权限控制和访问验证。
 - 后端路由与模型：按日期范围查询型号与 OTA 新增记录，统一响应结构。
- **新增**：Luxsin 控制器工具页面：提供局域网设备数据同步和 PEQ 参数管理功能。

 **章节来源**
- [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)
+- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)
+- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
+- [frontend_v2/src/views/home/modules/header-banner.vue:1-80](file://frontend_v2/src/views/home/modules/header-banner.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/line-chart.vue:1-80](file://frontend_v2/src/views/home/modules/line-chart.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/pie-chart.vue:1-80](file://frontend_v2/src/views/home/modules/pie-chart.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/project-news.vue:1-60](file://frontend_v2/src/views/home/modules/project-news.vue#L1-L60)
+- [frontend_v2/src/views/home/modules/creativity-banner.vue:1-50](file://frontend_v2/src/views/home/modules/creativity-banner.vue#L1-L50)
+- [frontend_v2/src/service/api/dashboard.ts:1-50](file://frontend_v2/src/service/api/dashboard.ts#L1-L50)
+- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
+- [frontend_v2/src/store/modules/app/index.ts:1-80](file://frontend_v2/src/store/modules/app/index.ts#L1-L80)
+- [frontend_v2/src/router/guard/route.ts:1-100](file://frontend_v2/src/router/guard/route.ts#L1-L100)
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
- [frontend/src/views/toolbox/luxsin-controller/index.vue:73-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L73-L168)

 ## 架构总览
-首页数据流自上而下：浏览器发起请求 -> 前端 Axios 拦截器 -> 后端路由 -> 数据库查询 -> 统一响应 -> 前端解析并渲染。
+首页数据流自上而下：浏览器发起请求 -> 前端 Alova 拦截器 -> 后端路由 -> 数据库查询 -> 统一响应 -> 前端解析并渲染。新架构采用模块化设计，各组件职责清晰，状态管理集中化。

 ```mermaid
 sequenceDiagram
 participant U as "用户"
 participant V as "Home/index.vue"
-participant A as "api/dashboard.js"
-participant R as "utils/request.js"
+participant CM as "CardData.vue"
+participant CH as "Chart Components"
+participant A as "service/api/dashboard.ts"
+participant H as "hooks/common/echarts.ts"
 participant S as "Express 路由"
 participant DB as "数据库"
 U->>V : 访问首页
 V->>V : onMounted 触发
+V->>CM : 传递统计数据
+V->>CH : 传递图表数据
 V->>A : 调用 getTodayStats()
-A->>R : request({ url : '/dashboard/today', method : 'get' })
-R->>S : 发送带 Authorization 的 GET /api/dashboard/today
+A->>S : 发送带 Authorization 的 GET /api/dashboard/today
 S->>DB : 查询今日新增型号/OTA
 DB-->>S : 返回记录集
-S-->>R : ApiResponse.success({models, otas})
-R-->>A : 返回 {code,data}
+S-->>A : ApiResponse.success({models, otas})
 A-->>V : 返回结果
-V->>V : 更新 todayModels/todayOtas
-V-->>U : 渲染今日新增卡片
+V->>H : 初始化图表配置
+H->>CM : 更新卡片数据
+H->>CH : 更新图表数据
+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)
+- [frontend_v2/src/views/home/index.vue:80-120](file://frontend_v2/src/views/home/index.vue#L80-L120)
+- [frontend_v2/src/views/home/modules/card-data.vue:40-80](file://frontend_v2/src/views/home/modules/card-data.vue#L40-L80)
+- [frontend_v2/src/views/home/modules/line-chart.vue:30-60](file://frontend_v2/src/views/home/modules/line-chart.vue#L30-L60)
+- [frontend_v2/src/views/home/modules/pie-chart.vue:30-60](file://frontend_v2/src/views/home/modules/pie-chart.vue#L30-L60)
+- [frontend_v2/src/service/api/dashboard.ts:20-45](file://frontend_v2/src/service/api/dashboard.ts#L20-L45)
+- [frontend_v2/src/hooks/common/echarts.ts:20-50](file://frontend_v2/src/hooks/common/echarts.ts#L20-L50)
 - [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)

 ## 组件详细分析

-### 首页仪表板组件（Home）
+### 首页主容器组件（Home）
 - 功能布局
-  - 欢迎信息：根据本地存储的用户信息动态显示用户名。
-  - 快捷入口卡片：支持点击跳转至品牌、型号、OTA、分享日志、**Luxsin 控制器**等模块。
-  - 今日新增统计：分两列网格展示"新增型号"和"新增 OTA"，包含加载态、空态与列表项。
+  - 模块化组件组织：将首页拆分为欢迎横幅、数据卡片、图表展示、项目新闻等多个独立模块。
+  - 响应式网格布局：使用CSS Grid实现自适应布局，支持不同屏幕尺寸的完美适配。
+  - 主题切换支持：集成Naive UI主题系统，支持明暗主题切换。
 - 数据绑定与状态
-  - 使用响应式引用保存加载状态、今日新增列表。
-  - 通过计算属性读取用户名，提升渲染效率。
+  - 使用Composition API管理组件状态，提供更好的TypeScript支持。
+  - 通过Pinia store管理应用级状态，实现跨组件状态共享。
+  - 使用响应式引用保存加载状态、统计数据等。
 - 交互行为
-  - 快捷入口卡片点击事件触发路由跳转。
-  - 列表项 hover 效果增强可读性。
+  - 组件间通信通过props和events实现，保持松耦合。
+  - 支持用户偏好设置持久化存储。
 - 样式与布局
-  - 使用 CSS Grid 控制快捷入口与今日新增卡片布局。
-  - 使用 :deep 选择器覆盖 Element Plus 卡片内部样式。
-  - 响应式断点：快捷入口卡片自动换行，最大宽度限制。
-  - **玻璃拟态样式**：应用半透明背景、backdrop-filter 模糊效果和微妙边框光晕。
+  - 采用CSS变量实现主题定制，支持动态主题切换。
+  - 使用Flexbox和Grid布局实现响应式设计。
+  - 集成Naive UI组件库，提供一致的UI体验。
 - 生命周期
-  - 在 mounted 钩子中调用加载函数，保证 DOM 可见后再进行异步数据请求。
+  - 在onMounted钩子中初始化数据和图表。
+  - 使用watch监听数据变化，自动更新视图。
 - 错误处理
-  - try/catch 包裹 API 调用，捕获异常并打印日志。
-  - finally 中关闭加载态，避免 UI 长时间处于加载中。
+  - 使用try/catch包裹异步操作，捕获异常并显示友好提示。
+  - 集成全局错误处理器，统一错误展示。
 - 性能优化
-  - 列表滚动容器设置最大高度并开启纵向滚动，避免长列表撑开页面。
-  - 列表项 hover 仅做背景色过渡，减少复杂动画。
+  - 组件懒加载，按需加载图表库。
+  - 使用computed缓存计算属性，避免重复计算。
+  - 图表数据防抖处理，减少重绘频率。

-**更新** 首页组件现已完全集成到玻璃拟态设计系统中，所有卡片和界面元素都采用统一的视觉语言。**新增 Luxsin 控制器快捷入口**，为用户提供局域网设备数据同步的快速访问功能。
+**更新** 首页组件现已完全重构为模块化架构，采用Vue 3 Composition API和TypeScript，提供了更好的开发体验和类型安全支持。

 **章节来源**
- [frontend/src/views/home/index.vue:1-335](file://frontend/src/views/home/index.vue#L1-L335)
+- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)

-### 设计令牌系统与玻璃拟态视觉语言
- 设计哲学
-  - 三层融合设计语言：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 效果用于焦点态反馈
+### 数据卡片组件（CardData）
+- 功能特性
+  - 支持多种数据类型展示：数字统计、趋势指标、进度条等。
+  - 动态图标支持：根据数据类型自动选择合适图标。
+  - 交互反馈：hover效果和点击动画增强用户体验。
+- 数据绑定
+  - 通过props接收数据配置，支持高度定制化。
+  - 使用computed属性格式化显示数据。
+- 样式设计
+  - 采用玻璃拟态设计风格，支持透明背景和模糊效果。
+  - 响应式字体大小，适配不同屏幕尺寸。
+  - 主题色自动适配，支持明暗主题切换。

 **章节来源**
- [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)
+- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
+
+### 图表组件（LineChart & PieChart）
+- 功能特性
+  - 基于ECharts实现的数据可视化展示。
+  - 支持响应式图表，自动适配容器大小。
+  - 提供丰富的交互功能：缩放、平移、数据点悬停等。
+- 图表配置
+  - 折线图：展示时间序列数据趋势，支持多系列对比。
+  - 饼图：展示数据占比分布，支持环形图和嵌套饼图。
+- 性能优化
+  - 使用useEcharts钩子函数统一管理图表实例。
+  - 实现图表销毁和内存清理，避免内存泄漏。
+  - 数据更新时智能diff，只重绘必要部分。
+
+**章节来源**
+- [frontend_v2/src/views/home/modules/line-chart.vue:1-80](file://frontend_v2/src/views/home/modules/line-chart.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/pie-chart.vue:1-80](file://frontend_v2/src/views/home/modules/pie-chart.vue#L1-L80)
+- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
+
+### 欢迎横幅组件（HeaderBanner）
+- 功能特性
+  - 显示个性化欢迎信息，根据用户角色显示不同内容。
+  - 提供快速操作入口，常用功能一键直达。
+  - 支持天气信息显示（可选功能）。
+- 用户交互
+  - 点击操作按钮直接执行对应功能。
+  - 支持键盘快捷键操作。
+- 响应式设计
+  - 移动端自动折叠操作按钮。
+  - 字体大小和间距自适应调整。
+
+**章节来源**
+- [frontend_v2/src/views/home/modules/header-banner.vue:1-80](file://frontend_v2/src/views/home/modules/header-banner.vue#L1-L80)
+
+### 项目新闻组件（ProjectNews）
+- 功能特性
+  - 展示系统更新日志和功能公告。
+  - 支持新闻分类和筛选功能。
+  - 提供新闻详情查看和分享功能。
+- 数据管理
+  - 支持本地缓存，减少网络请求。
+  - 自动刷新机制，确保内容时效性。
+- 用户体验
+  - 无限滚动加载，支持大量新闻展示。
+  - 搜索和过滤功能，快速定位感兴趣的内容。
+
+**章节来源**
+- [frontend_v2/src/views/home/modules/project-news.vue:1-60](file://frontend_v2/src/views/home/modules/project-news.vue#L1-L60)
+
+### 创意横幅组件（CreativityBanner）
+- 功能特性
+  - 提供视觉吸引力强的背景展示区域。
+  - 支持轮播广告和活动推广。
+  - 可配置的动画效果和过渡动画。
+- 自定义配置
+  - 支持图片、视频、SVG等多种媒体格式。
+  - 可调节透明度、模糊度等视觉效果参数。
+- 性能考虑
+  - 图片懒加载，优化首屏加载性能。
+  - 动画性能优化，使用GPU加速。
+
+**章节来源**
+- [frontend_v2/src/views/home/modules/creativity-banner.vue:1-50](file://frontend_v2/src/views/home/modules/creativity-banner.vue#L1-L50)

 ### 今日统计 API 与数据格式
 - API 定义
@@ -223,44 +305,68 @@ V-->>U : 渲染今日新增卡片
 - 前端解析
  - 校验响应 code 是否为成功标识，再将 data.models 与 data.otas 写入组件状态。
  - 时间字段通过格式化函数转换为 HH:mm 展示。
+  - 使用TypeScript类型定义确保数据结构正确性。

 **章节来源**
- [frontend/src/api/dashboard.js:1-12](file://frontend/src/api/dashboard.js#L1-L12)
+- [frontend_v2/src/service/api/dashboard.ts:1-50](file://frontend_v2/src/service/api/dashboard.ts#L1-L50)
 - [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)

-### HTTP 请求拦截器与鉴权
- 请求拦截
-  - 自动注入 Authorization: Bearer token（除登录接口外）。
-  - 统一 baseURL 为 /api。
- 响应拦截
-  - code 为 0 时视为业务错误，抛出错误并可选提示。
-  - 401 强制清空鉴权信息并跳转登录页。
-  - 403 提示权限不足。
-  - 其他错误统一提示网络错误。
- 鉴权工具
-  - 令牌与用户信息存储于 localStorage。
-  - 支持从 JWT 解析用户信息与过期时间判断。
+### ECharts 钩子函数与图表管理
+- 功能特性
+  - 提供统一的图表初始化和管理逻辑。
+  - 支持图表响应式适配和主题切换。
+  - 自动处理图表实例的生命周期管理。
+- 使用方法
+  - 通过useEcharts钩子函数创建图表实例。
+  - 支持图表配置项的动态更新。
+  - 提供图表事件处理和回调机制。
+- 性能优化
+  - 图表实例复用，避免重复创建销毁。
+  - 数据更新时使用增量更新策略。
+  - 自动清理未使用的图表资源。

 **章节来源**
- [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_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)

-### 路由与导航
- 路由配置
-  - 首页路径为 /home，作为 / 的子路由。
-  - 所有子路由均需登录，部分路由需超级管理员权限。
-  - **新增**：/toolbox/luxsin-controller 路由，指向 Luxsin 控制器工具页面。
- 导航与面包屑
-  - 侧边栏提供主要功能入口，支持折叠与高亮。
-  - 标签页组件负责多页面切换与持久化。
- 用户菜单
-  - 支持修改密码、账号管理（超级管理员）、退出登录。
+### 应用状态管理与路由守卫
+- Pinia状态管理
+  - 使用模块化store管理应用状态。
+  - 支持TypeScript类型推断和IDE智能提示。
+  - 提供状态持久化和恢复功能。
+- 路由守卫
+  - 实现基于角色的访问控制。
+  - 支持路由级别的权限验证。
+  - 提供登录状态检查和自动重定向。
+- 主题管理
+  - 支持明暗主题动态切换。
+  - 主题配置持久化存储。
+  - 提供主题预览和自定义功能。

 **章节来源**
- [frontend/src/router/index.js:1-109](file://frontend/src/router/index.js#L1-L109)
- [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_v2/src/store/modules/app/index.ts:1-80](file://frontend_v2/src/store/modules/app/index.ts#L1-L80)
+- [frontend_v2/src/router/guard/route.ts:1-100](file://frontend_v2/src/router/guard/route.ts#L1-L100)
+- [frontend_v2/src/theme/settings.ts:1-50](file://frontend_v2/src/theme/settings.ts#L1-L50)
+
+### 布局系统与导航组件
+- 基础布局
+  - 提供完整的页面布局框架，包含头部、侧边栏、内容区和底部。
+  - 支持多种布局模式：侧边栏、顶部导航、混合布局等。
+  - 响应式设计，适配桌面端和移动端。
+- 全局导航
+  - 面包屑导航，提供清晰的页面层级信息。
+  - 标签页管理，支持多页面切换和缓存。
+  - 用户菜单，提供个人设置和退出登录功能。
+- 菜单系统
+  - 动态菜单生成，基于路由配置自动生成。
+  - 支持多级菜单和图标显示。
+  - 菜单权限控制，根据用户角色显示不同菜单。
+
+**章节来源**
+- [frontend_v2/src/layouts/base-layout/index.vue:1-100](file://frontend_v2/src/layouts/base-layout/index.vue#L1-L100)
+- [frontend_v2/src/layouts/modules/global-header/index.vue:1-80](file://frontend_v2/src/layouts/modules/global-header/index.vue#L1-L80)
+- [frontend_v2/src/layouts/modules/global-menu/index.vue:1-120](file://frontend_v2/src/layouts/modules/global-menu/index.vue#L1-L120)
+- [frontend_v2/src/layouts/modules/global-tab/index.vue:1-90](file://frontend_v2/src/layouts/modules/global-tab/index.vue#L1-L90)

 ### 后端路由与数据模型
 - 路由逻辑
@@ -277,224 +383,152 @@ V-->>U : 渲染今日新增卡片
 - [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)

-### 快捷入口配置与路由跳转
- 配置方式
-  - quickLinks 数组定义了五个入口项，每项包含 path、title、desc、icon。
-  - **新增**：Luxsin 控制器入口，提供局域网设备数据同步功能。
-  - 图标通过动态组件渲染，支持任意 Element Plus 图标。
- 跳转机制
-  - 点击卡片触发 go(path) 函数，内部使用 vue-router 的 push 实现导航。
-  - 与侧边栏导航保持一致的路径约定，便于统一维护。
-
-**更新** 快捷入口现已包含 Luxsin 控制器功能，用户可以通过首页直接访问设备数据同步工具。
-
-**章节来源**
- [frontend/src/views/home/index.vue:113-119](file://frontend/src/views/home/index.vue#L113-L119)
- [frontend/src/router/index.js:67-72](file://frontend/src/router/index.js#L67-L72)
-
-### 生命周期管理与错误处理
- 生命周期
-  - onMounted 中触发 loadTodayStats，确保 DOM 初始化完成后再发起请求。
- 错误处理
-  - try/catch 捕获异常，finally 关闭 loading。
-  - 响应拦截器对 401/403 做统一处理，避免页面卡死。
- 用户体验
-  - 加载态与空态分别渲染，避免白屏与闪烁。
-  - 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)
-
-### 性能优化最佳实践
- 列表渲染
-  - 使用 v-for 渲染列表，合理设置 key，避免重复渲染。
-  - 为长列表设置最大高度与滚动条，降低布局抖动。
- 缓存与复用
-  - 标签页组件使用 KeepAlive 对组件进行缓存，减少重复渲染。
-  - sessionStorage 持久化标签页状态，刷新后恢复。
- 网络请求
-  - 统一 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-370)
-
-### Luxsin 控制器工具页面
- 功能特性
-  - 设备 IP 输入验证与表单提交。
-  - 支持同步设备和同步 PEQ 两种操作模式。
-  - 自定义 Base64 解码器，处理设备返回的特殊编码数据。
-  - 原始响应与解码结果的可视化展示。
- 数据处理流程
-  - 通过 fetch API 直接访问局域网设备的 dev/info.cgi 接口。
-  - 实现自定义 Base64 字符映射表，将特殊编码转换为标准 Base64。
-  - 使用 TextDecoder 进行 UTF-8 解码，支持中文等多字节字符。
- 错误处理机制
-  - HTTP 状态码检查与错误提示。
-  - Base64 解码失败时的详细错误信息展示。
-  - 空数据响应的友好提示。
- 用户界面设计
-  - 响应式表单布局，支持回车键提交。
-  - 可折叠的原始响应查看器，节省屏幕空间。
-  - 语法高亮的 JSON 输出显示。
-
-**新增** Luxsin 控制器工具页面为局域网设备管理提供了强大的数据同步能力，支持实时设备信息查询和 PEQ 参数管理。
-
-**章节来源**
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-L231)
-
 ## 依赖关系分析
 - 组件耦合
-  - Home 依赖 api/dashboard.js 与 utils/request.js，形成清晰的职责分离。
-  - 与路由层通过 go(path) 解耦，便于测试与替换。
-  - 与样式层通过设计令牌解耦，便于主题切换。
-  - **新增**：Home 组件通过路由配置间接依赖 Luxsin 控制器工具页面。
+  - Home主容器通过props和events与各子组件通信，形成松耦合的组件树。
+  - 图表组件通过ECharts钩子函数统一管理，避免重复代码。
+  - 状态管理通过Pinia store集中管理，支持跨组件状态共享。
+  - 路由守卫与权限控制解耦，便于扩展和维护。
 - 外部依赖
-  - Element Plus 提供 UI 组件与图标。
-  - Vue Router 提供导航能力。
-  - Axios 提供 HTTP 能力与拦截器。
+  - Naive UI提供现代化的UI组件库。
+  - ECharts提供强大的数据可视化能力。
+  - Pinia提供轻量级的状态管理解决方案。
+  - Vue Router提供声明式路由导航。
 - 数据一致性
-  - 后端统一响应结构，前端按约定解析，降低耦合度。
-  - 模型字段与接口返回字段一一对应，便于扩展。
+  - 后端统一响应结构，前端按TypeScript类型定义解析，确保数据结构正确性。
+  - 组件间通过明确的接口定义进行通信，降低耦合度。

 ```mermaid
 classDiagram
 class HomeIndexVue {
-+username : ComputedRef
-+todayLoading : Ref<boolean>
-+todayModels : Ref<any[]>
-+todayOtas : Ref<any[]>
-+quickLinks : any[]
-+loadTodayStats()
-+go(path)
-+formatTime(isoStr)
+components : Object
+data : Ref<any>
+mounted()
+handleThemeChange()
+}
+class CardDataComponent {
+props : CardDataProps
+computed : ComputedRef
+methods : Function[]
+}
+class ChartComponents {
+lineChart : Component
+pieChart : Component
+chartConfig : Object
 }
 class DashboardApi {
 +getTodayStats()
+requestConfig : RequestConfig
 }
-class RequestUtil {
-+interceptors.request
-+interceptors.response
+class EChartsHook {
+useEcharts()
+initChart()
+updateChart()
 }
-class DesignTokens {
-+glassBgCard
-+glassBorder
-+textStrong
-+shadowLevels
+class AppStore {
+user : Ref<User>
+theme : Ref<Theme>
+actions : Actions
 }
-class RouterGuard {
-+beforeEach(to, from, next)
-}
-class LayoutIndexVue {
-+activeMenu
-+handleUserMenuCommand()
-}
-class LuxsinController {
-+deviceIp : Ref<string>
-+syncDataLoading : Ref<boolean>
-+syncPeqLoading : Ref<boolean>
-+decodeCustomBase64(input)
-+handleSyncData()
-+handleSyncPeq()
+class RouteGuard {
+beforeEach()
+checkAuth()
+redirect()
 }
+HomeIndexVue --> CardDataComponent : "使用"
+HomeIndexVue --> ChartComponents : "使用"
 HomeIndexVue --> DashboardApi : "调用"
-DashboardApi --> RequestUtil : "封装请求"
-HomeIndexVue --> DesignTokens : "使用"
-HomeIndexVue --> RouterGuard : "依赖"
-LayoutIndexVue --> RouterGuard : "依赖"
-HomeIndexVue --> LuxsinController : "路由跳转"
+ChartComponents --> EChartsHook : "依赖"
+HomeIndexVue --> AppStore : "读取状态"
+HomeIndexVue --> RouteGuard : "受保护"
 ```

 **图表来源**
- [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)
- [frontend/src/views/toolbox/luxsin-controller/index.vue:73-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L73-L168)
+- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)
+- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
+- [frontend_v2/src/views/home/modules/line-chart.vue:1-80](file://frontend_v2/src/views/home/modules/line-chart.vue#L1-L80)
+- [frontend_v2/src/views/home/modules/pie-chart.vue:1-80](file://frontend_v2/src/views/home/modules/pie-chart.vue#L1-L80)
+- [frontend_v2/src/service/api/dashboard.ts:1-50](file://frontend_v2/src/service/api/dashboard.ts#L1-L50)
+- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
+- [frontend_v2/src/store/modules/app/index.ts:1-80](file://frontend_v2/src/store/modules/app/index.ts#L1-L80)
+- [frontend_v2/src/router/guard/route.ts:1-100](file://frontend_v2/src/router/guard/route.ts#L1-L100)

 ## 性能考量
 - 渲染层面
-  - 长列表设置固定高度与滚动，避免频繁重排。
-  - 使用 :deep 覆盖第三方组件样式，减少不必要的样式穿透。
-  - **玻璃拟态渲染优化**：合理使用 backdrop-filter，避免过度模糊影响性能。
+  - 使用Vue 3的响应式系统，提供更高效的DOM更新。
+  - 组件懒加载，按需加载大型图表库。
+  - 虚拟滚动支持，优化长列表渲染性能。
 - 网络层面
-  - 统一超时与 baseURL，减少请求失败带来的等待。
-  - 401 自动清理鉴权信息并跳转，避免无效请求。
-  - **新增**：Luxsin 控制器使用原生 fetch API，避免额外的 HTTP 客户端开销。
+  - 使用Alova HTTP客户端，提供更快的请求性能和更好的缓存机制。
+  - 请求去重和并发控制，避免重复请求和资源浪费。
+  - 错误重试和超时处理，提升网络稳定性。
 - 缓存层面
-  - 标签页 KeepAlive 与 sessionStorage 持久化，减少重复渲染与数据请求。
- **设计令牌性能**
-  - CSS 变量预编译，减少运行时计算开销。
-  - 统一的阴影和模糊值，避免重复定义。
+  - 组件级缓存，使用KeepAlive缓存活跃组件。
+  - 数据缓存，使用localStorage和sessionStorage持久化用户偏好。
+  - 图表缓存，避免重复绘制相同数据。
+- 内存管理
+  - 及时清理图表实例和事件监听器，避免内存泄漏。
+  - 大对象及时释放，减少垃圾回收压力。
+  - 使用WeakMap存储临时数据，避免循环引用。

 ## 故障排查指南
 - 无法加载今日数据
  - 检查后端接口是否返回统一响应结构。
-  - 确认前端解析逻辑是否正确处理 code 与 data。
- 登录态失效
-  - 查看响应拦截器对 401 的处理逻辑，确认是否被自动跳转登录。
-  - 检查本地存储中的 token 是否存在且未过期。
- 权限不足
-  - 检查路由守卫是否正确识别超级管理员权限。
-  - 确认用户角色与路由 meta.requiresSuperAdmin 的匹配。
- 快捷入口不生效
-  - 检查 quickLinks 的 path 是否与路由配置一致。
-  - 确认 go(path) 调用是否正确触发路由跳转。
- **Luxsin 控制器连接问题**
-  - 确认设备 IP 地址格式正确且设备在线。
-  - 检查防火墙设置，确保可以访问设备的 dev/info.cgi 接口。
-  - 验证自定义 Base64 解码器是否能正确处理设备返回的数据格式。
- **玻璃拟态样式问题**
-  - 检查 lux-theme.css 是否正确引入。
-  - 确认浏览器是否支持 backdrop-filter。
-  - 验证设计令牌变量是否正确定义。
+  - 确认前端TypeScript类型定义是否与后端数据结构匹配。
+  - 查看网络请求是否正确携带Authorization头。
+- 图表显示异常
+  - 检查ECharts实例是否正确初始化。
+  - 确认图表容器是否有正确的宽高。
+  - 验证数据格式是否符合ECharts要求。
+- 主题切换失效
+  - 检查主题配置是否正确加载。
+  - 确认CSS变量是否正确应用到组件。
+  - 查看浏览器控制台是否有相关错误信息。
+- 路由跳转问题
+  - 检查路由配置是否正确注册。
+  - 确认用户权限是否满足路由访问要求。
+  - 验证路由守卫逻辑是否正常执行。
+- 组件通信异常
+  - 检查props传递的数据类型是否正确。
+  - 确认事件监听器是否正确绑定和解绑。
+  - 验证响应式数据更新是否触发了视图更新。
+- 性能问题
+  - 使用浏览器性能面板分析渲染瓶颈。
+  - 检查是否存在不必要的重渲染。
+  - 验证图表数据更新是否使用了增量更新。

 **章节来源**
- [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)
- [frontend/src/views/toolbox/luxsin-controller/index.vue:134-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L134-L168)
+- [frontend_v2/src/service/api/dashboard.ts:20-45](file://frontend_v2/src/service/api/dashboard.ts#L20-L45)
+- [frontend_v2/src/hooks/common/echarts.ts:20-50](file://frontend_v2/src/hooks/common/echarts.ts#L20-L50)
+- [frontend_v2/src/router/guard/route.ts:40-80](file://frontend_v2/src/router/guard/route.ts#L40-L80)
+- [frontend_v2/src/store/modules/app/index.ts:40-80](file://frontend_v2/src/store/modules/app/index.ts#L40-L80)

 ## 结论
-首页仪表板通过清晰的组件划分、统一的 API 约定与完善的鉴权与拦截机制，实现了良好的用户体验与可维护性。**最新升级**引入了完整的玻璃拟态设计系统和设计令牌，提供了更加现代化和一致的视觉体验。**新增的 Luxsin 控制器快捷入口**进一步增强了系统的实用性，为用户提供了便捷的局域网设备数据同步功能。建议后续在以下方面持续优化：
- 增加加载骨架屏与错误重试策略，进一步提升弱网体验。
- 对今日新增列表增加分页或虚拟滚动，应对数据量增长。
- 将快捷入口配置抽象为可配置文件，便于产品侧快速调整。
- 继续完善设计令牌系统，支持更多自定义主题选项。
- **新增**：考虑为 Luxsin 控制器添加设备历史记录功能，方便用户快速访问常用设备。
+首页仪表板通过全新的模块化架构设计、TypeScript类型安全和现代化的技术栈，实现了更高的代码质量、更好的开发体验和更优的用户体验。**重大升级**引入了Vue 3 Composition API、Naive UI组件库、ECharts数据可视化和Pinia状态管理，显著提升了系统的可维护性和扩展性。新的架构支持响应式设计，能够完美适配各种设备屏幕。建议后续在以下方面持续优化：
+- 增加更多数据可视化图表类型，丰富仪表板展示能力。
+- 实现组件级代码分割，进一步优化首屏加载性能。
+- 添加国际化支持，满足多语言用户需求。
+- 完善单元测试和集成测试，提升代码质量保障。
+- 考虑引入微前端架构，支持更大规模的项目扩展。

 ## 附录
- 快捷入口卡片配置项
-  - path：目标路由路径
-  - title：卡片标题
-  - desc：卡片描述
-  - icon：Element Plus 图标组件
- 标签页持久化键值
-  - sessionStorage 中存储的键名用于恢复标签页状态
- **设计令牌分类**
-  - 基础色板：空间色、品牌色、文本色
-  - 语义令牌：页面、玻璃表面、边框、模糊
-  - 阴影层级：4级 elevation 系统
-  - 圆角规范：sm/md/lg/xl 四级
- **新增**：Luxsin 控制器功能说明
-  - 支持同步设备信息和 PEQ 参数
-  - 自定义 Base64 字符映射表解码
-  - 实时设备状态监控与数据可视化
+- 组件配置项说明
+  - CardDataProps：数据卡片组件的配置接口
+  - ChartConfig：图表组件的配置选项
+  - ThemeSettings：主题配置的相关参数
+- 状态管理键值
+  - Pinia store中的状态键名和默认值
+- 路由配置规范
+  - 路由元信息定义和权限控制配置
+- 环境变量配置
+  - 开发和生产环境的不同配置项
+- **新增**：TypeScript类型定义
+  - API响应类型定义
+  - 组件Props接口定义
+  - 状态管理类型定义

 **章节来源**
- [frontend/src/views/home/index.vue:113-119](file://frontend/src/views/home/index.vue#L113-L119)
- [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)
- [frontend/src/views/toolbox/luxsin-controller/index.vue:88-124](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L88-L124)
+- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
+- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
+- [frontend_v2/src/theme/settings.ts:1-50](file://frontend_v2/src/theme/settings.ts#L1-L50)
+- [frontend_v2/src/constants/env.ts:1-30](file://frontend_v2/src/constants/env.ts#L1-L30)