Files

T

2026-06-30 14:46:52 +08:00

16 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) - [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)

简介

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

项目结构

首页位于前端单页应用中，采用 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/>标签页常量"]
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模型"]
end
A --> B
B --> C
C --> D
D --> E
E --> F
F --> J
G --> H
J --> K
J --> L
J --> M

图表来源

章节来源

核心组件

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

章节来源

架构总览

首页数据流自上而下：浏览器发起请求 -> 前端 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 : 渲染今日新增卡片

图表来源

组件详细分析