Files

T

eafonyang 003b44e2bd ui 优化

2026-07-14 18:56:13 +08:00

24 KiB

Raw Blame History

首页仪表板

**本文引用的文件列表** - [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) - [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)

更新摘要

变更内容

新增 Luxsin 控制器快捷入口链接，提供局域网设备数据同步的快速访问功能
更新快捷入口配置数组，增加工具箱功能模块
完善路由配置，支持新的工具页面导航

简介

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

最新更新：首页已全面升级至玻璃拟态视觉语言，采用统一的设计令牌系统和深色模式OLED优化，提供更现代的用户体验。同时新增了 Luxsin 控制器快捷入口，为局域网设备数据同步提供了快速访问通道。

项目结构

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

graph TB
subgraph "前端"
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/>设备数据同步工具"]
end
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
L --> M
L --> N
L --> O
K --> P

图表来源

章节来源

核心组件

首页仪表板组件：负责渲染欢迎信息、快捷入口卡片、今日新增统计区域，并在挂载时触发数据加载。
今日统计 API 封装：封装 GET /api/dashboard/today 请求，返回 Promise。
HTTP 请求拦截器：统一设置 Authorization 头、处理 401/403/通用错误提示。
路由与鉴权：全局前置守卫校验登录态与超级管理员权限，控制访问与重定向。
布局与标签页：侧边栏导航、面包屑、用户下拉菜单、标签页持久化与缓存策略。
设计令牌系统：统一的玻璃拟态视觉语言，包含颜色、阴影、模糊等设计变量。
后端路由与模型：按日期范围查询型号与 OTA 新增记录，统一响应结构。
新增：Luxsin 控制器工具页面：提供局域网设备数据同步和 PEQ 参数管理功能。

章节来源

架构总览

首页数据流自上而下：浏览器发起请求 -> 前端 Axios 拦截器 -> 后端路由 -> 数据库查询 -> 统一响应 -> 前端解析并渲染。

sequenceDiagram
participant U as "用户"
participant V as "Home/index.vue"
participant A as "api/dashboard.js"
participant R as "utils/request.js"
participant S as "Express 路由"
participant DB as "数据库"
U->>V : 访问首页
V->>V : onMounted 触发
V->>A : 调用 getTodayStats()
A->>R : request({ url : '/dashboard/today', method : 'get' })
R->>S : 发送带 Authorization 的 GET /api/dashboard/today
S->>DB : 查询今日新增型号/OTA
DB-->>S : 返回记录集
S-->>R : ApiResponse.success({models, otas})
R-->>A : 返回 {code,data}
A-->>V : 返回结果
V->>V : 更新 todayModels/todayOtas
V-->>U : 渲染今日新增卡片

图表来源

组件详细分析