eafonyang
527 lines
20 KiB
Markdown
527 lines
20 KiB
Markdown
# 页面组件
|
||
|
||
<cite>
|
||
**本文引用的文件**
|
||
- [frontend/src/router/index.js](file://frontend/src/router/index.js)
|
||
- [frontend/src/views/home/index.vue](file://frontend/src/views/home/index.vue)
|
||
- [frontend/src/views/login/index.vue](file://frontend/src/views/login/index.vue)
|
||
- [frontend/src/views/brand/index.vue](file://frontend/src/views/brand/index.vue)
|
||
- [frontend/src/views/model/index.vue](file://frontend/src/views/model/index.vue)
|
||
- [frontend/src/views/ota/index.vue](file://frontend/src/views/ota/index.vue)
|
||
- [frontend/src/views/share-code/log.vue](file://frontend/src/views/share-code/log.vue)
|
||
- [frontend/src/views/system/users/index.vue](file://frontend/src/views/system/users/index.vue)
|
||
- [frontend/src/api/auth.js](file://frontend/src/api/auth.js)
|
||
- [frontend/src/api/brand.js](file://frontend/src/api/brand.js)
|
||
- [frontend/src/api/model.js](file://frontend/src/api/model.js)
|
||
- [frontend/src/api/ota.js](file://frontend/src/api/ota.js)
|
||
- [frontend/src/api/shareCodeLog.js](file://frontend/src/api/shareCodeLog.js)
|
||
- [frontend/src/api/user.js](file://frontend/src/api/user.js)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [简介](#简介)
|
||
2. [项目结构](#项目结构)
|
||
3. [核心组件](#核心组件)
|
||
4. [架构总览](#架构总览)
|
||
5. [详细组件分析](#详细组件分析)
|
||
6. [依赖分析](#依赖分析)
|
||
7. [性能考虑](#性能考虑)
|
||
8. [故障排查指南](#故障排查指南)
|
||
9. [结论](#结论)
|
||
10. [附录](#附录)
|
||
|
||
## 简介
|
||
本文件面向前端页面组件，系统性梳理各功能页面的设计与实现，覆盖以下页面：
|
||
- 首页仪表板：数据概览与快捷入口
|
||
- 登录页：身份认证与令牌管理
|
||
- 品牌管理：品牌数据的增删改查
|
||
- 型号管理：技术配置、推送搜索、查看 EQ 缓存与 CSV
|
||
- OTA 固件：版本控制与升级包上传
|
||
- 分享码日志：数据追踪与 EQ 快照查看
|
||
- 系统用户：账号管理与权限控制
|
||
|
||
文档重点阐述：
|
||
- 路由配置与鉴权守卫
|
||
- 数据获取与分页策略
|
||
- 表单验证与交互流程
|
||
- 状态管理、错误处理与加载状态
|
||
- 页面间导航与数据传递
|
||
|
||
## 项目结构
|
||
前端采用 Vue 3 + Element Plus 架构，页面位于 views 下，路由集中于 router/index.js，API 层封装于 api 目录，通用工具位于 utils。
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph "路由层"
|
||
R["router/index.js<br/>定义路由与鉴权守卫"]
|
||
end
|
||
subgraph "视图层"
|
||
H["views/home/index.vue"]
|
||
L["views/login/index.vue"]
|
||
B["views/brand/index.vue"]
|
||
M["views/model/index.vue"]
|
||
O["views/ota/index.vue"]
|
||
S["views/share-code/log.vue"]
|
||
U["views/system/users/index.vue"]
|
||
end
|
||
subgraph "API 层"
|
||
A1["api/auth.js"]
|
||
A2["api/brand.js"]
|
||
A3["api/model.js"]
|
||
A4["api/ota.js"]
|
||
A5["api/shareCodeLog.js"]
|
||
A6["api/user.js"]
|
||
end
|
||
R --> H
|
||
R --> L
|
||
R --> B
|
||
R --> M
|
||
R --> O
|
||
R --> S
|
||
R --> U
|
||
H --> A1
|
||
L --> A1
|
||
B --> A2
|
||
M --> A3
|
||
O --> A4
|
||
S --> A5
|
||
U --> A6
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
|
||
- [frontend/src/views/home/index.vue:1-327](file://frontend/src/views/home/index.vue#L1-L327)
|
||
- [frontend/src/views/login/index.vue:1-453](file://frontend/src/views/login/index.vue#L1-L453)
|
||
- [frontend/src/views/brand/index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
|
||
- [frontend/src/views/model/index.vue:1-800](file://frontend/src/views/model/index.vue#L1-L800)
|
||
- [frontend/src/views/ota/index.vue:1-628](file://frontend/src/views/ota/index.vue#L1-L628)
|
||
- [frontend/src/views/share-code/log.vue:1-353](file://frontend/src/views/share-code/log.vue#L1-L353)
|
||
- [frontend/src/views/system/users/index.vue:1-428](file://frontend/src/views/system/users/index.vue#L1-L428)
|
||
- [frontend/src/api/auth.js:1-24](file://frontend/src/api/auth.js#L1-L24)
|
||
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
|
||
- [frontend/src/api/model.js:1-151](file://frontend/src/api/model.js#L1-L151)
|
||
- [frontend/src/api/ota.js:1-68](file://frontend/src/api/ota.js#L1-L68)
|
||
- [frontend/src/api/shareCodeLog.js:1-26](file://frontend/src/api/shareCodeLog.js#L1-L26)
|
||
- [frontend/src/api/user.js:1-40](file://frontend/src/api/user.js#L1-L40)
|
||
|
||
章节来源
|
||
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
|
||
|
||
## 核心组件
|
||
- 路由与鉴权
|
||
- 定义登录页与受保护页面，设置 requiresAuth 与 requiresSuperAdmin 元信息
|
||
- beforeEach 守卫检查令牌有效性与超级管理员权限
|
||
- 首页仪表板
|
||
- 展示今日新增型号与 OTA 列表，支持点击快捷入口跳转
|
||
- 登录页
|
||
- 表单校验、调用登录 API、存储令牌与用户信息
|
||
- 品牌管理
|
||
- 搜索、分页、新增/编辑对话框、删除确认
|
||
- 型号管理
|
||
- 品牌联动、排序、批量推送搜索、查看 EQ 缓存与 CSV、上传频响文件
|
||
- OTA 固件
|
||
- 多条件筛选、开关控制、上传升级包并自动生成 MD5/URL
|
||
- 分享码日志
|
||
- 时间范围筛选、动作过滤、查看 EQ 快照
|
||
- 系统用户
|
||
- 用户列表、启/禁用、改密、删除
|
||
|
||
章节来源
|
||
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
|
||
- [frontend/src/views/home/index.vue:97-149](file://frontend/src/views/home/index.vue#L97-L149)
|
||
- [frontend/src/views/login/index.vue:100-151](file://frontend/src/views/login/index.vue#L100-L151)
|
||
- [frontend/src/views/brand/index.vue:109-276](file://frontend/src/views/brand/index.vue#L109-L276)
|
||
- [frontend/src/views/model/index.vue:460-800](file://frontend/src/views/model/index.vue#L460-L800)
|
||
- [frontend/src/views/ota/index.vue:249-580](file://frontend/src/views/ota/index.vue#L249-L580)
|
||
- [frontend/src/views/share-code/log.vue:148-278](file://frontend/src/views/share-code/log.vue#L148-L278)
|
||
- [frontend/src/views/system/users/index.vue:169-393](file://frontend/src/views/system/users/index.vue#L169-L393)
|
||
|
||
## 架构总览
|
||
页面组件通过 API 层与后端交互，统一使用 request 封装的 HTTP 客户端。路由守卫负责全局鉴权与权限拦截，页面内部通过响应式状态管理数据与 UI。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant V as "页面组件"
|
||
participant API as "API 模块"
|
||
participant S as "后端服务"
|
||
U->>V : 触发操作如登录/搜索/提交
|
||
V->>API : 调用具体接口带参数
|
||
API->>S : 发起 HTTP 请求
|
||
S-->>API : 返回响应code/data/msg
|
||
API-->>V : 返回结果
|
||
V->>V : 更新本地状态/显示消息
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/login/index.vue:123-150](file://frontend/src/views/login/index.vue#L123-L150)
|
||
- [frontend/src/api/auth.js:3-12](file://frontend/src/api/auth.js#L3-L12)
|
||
- [frontend/src/views/brand/index.vue:146-168](file://frontend/src/views/brand/index.vue#L146-L168)
|
||
- [frontend/src/api/brand.js:10-16](file://frontend/src/api/brand.js#L10-L16)
|
||
- [frontend/src/views/model/index.vue:714-739](file://frontend/src/views/model/index.vue#L714-L739)
|
||
- [frontend/src/api/model.js:13-19](file://frontend/src/api/model.js#L13-L19)
|
||
- [frontend/src/views/ota/index.vue:420-449](file://frontend/src/views/ota/index.vue#L420-L449)
|
||
- [frontend/src/api/ota.js:13-19](file://frontend/src/api/ota.js#L13-L19)
|
||
- [frontend/src/views/share-code/log.vue:233-250](file://frontend/src/views/share-code/log.vue#L233-L250)
|
||
- [frontend/src/api/shareCodeLog.js:17-24](file://frontend/src/api/shareCodeLog.js#L17-L24)
|
||
- [frontend/src/views/system/users/index.vue:231-252](file://frontend/src/views/system/users/index.vue#L231-L252)
|
||
- [frontend/src/api/user.js:3-9](file://frontend/src/api/user.js#L3-L9)
|
||
|
||
## 详细组件分析
|
||
|
||
### 首页仪表板（Home）
|
||
- 功能要点
|
||
- 渲染欢迎语与快捷入口卡片，点击跳转至对应页面
|
||
- 加载“今日新增”数据：型号与 OTA 列表，支持加载态与空态
|
||
- 时间格式化工具函数
|
||
- 数据流
|
||
- 组件挂载时调用仪表板统计 API
|
||
- 成功后更新响应式状态，失败打印日志
|
||
- 交互与状态
|
||
- 使用 loading 状态控制加载指示
|
||
- 使用数组长度判断空态
|
||
- 错误处理
|
||
- try/catch 包裹请求，finally 关闭加载态
|
||
- 性能
|
||
- 仅在首次进入时请求一次，避免重复请求
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant C as "Home 组件"
|
||
participant API as "dashboard API"
|
||
participant S as "后端"
|
||
C->>C : onMounted()
|
||
C->>API : getTodayStats()
|
||
API->>S : GET /dashboard/stats
|
||
S-->>API : {code,data}
|
||
API-->>C : 结果
|
||
alt code===1
|
||
C->>C : 更新 todayModels/todayOtas
|
||
else 其他
|
||
C->>C : 打印错误/保持空态
|
||
end
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/home/index.vue:127-148](file://frontend/src/views/home/index.vue#L127-L148)
|
||
- [frontend/src/api/dashboard.js:1-200](file://frontend/src/api/dashboard.js#L1-L200)
|
||
|
||
章节来源
|
||
- [frontend/src/views/home/index.vue:97-149](file://frontend/src/views/home/index.vue#L97-L149)
|
||
|
||
### 登录页（Login）
|
||
- 功能要点
|
||
- 账号/密码输入与必填校验
|
||
- 提交时调用登录 API，成功后写入令牌与用户信息，清空标签页缓存并跳转首页
|
||
- 表单与校验
|
||
- Element Plus 表单规则：账号与密码必填
|
||
- 交互与状态
|
||
- loading 控制按钮加载态
|
||
- ElMessage 展示成功/失败提示
|
||
- 错误处理
|
||
- try/catch 捕获异常，finally 关闭加载态
|
||
- 导航
|
||
- 登录成功后 replace 到首页路径
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant L as "Login 组件"
|
||
participant API as "auth API"
|
||
participant S as "后端"
|
||
U->>L : 输入账号/密码并提交
|
||
L->>L : validate()
|
||
alt 校验通过
|
||
L->>API : login({username,password})
|
||
API->>S : POST /auth/login
|
||
S-->>API : {code,data : {access_token,user}}
|
||
API-->>L : 结果
|
||
alt code===1
|
||
L->>L : setToken/setUser
|
||
L->>L : clearTabsStorage()
|
||
L->>L : router.replace(HOME_PATH)
|
||
else 其他
|
||
L->>L : ElMessage.error()
|
||
end
|
||
else 校验失败
|
||
L->>L : 停止提交
|
||
end
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/login/index.vue:118-150](file://frontend/src/views/login/index.vue#L118-L150)
|
||
- [frontend/src/api/auth.js:3-12](file://frontend/src/api/auth.js#L3-L12)
|
||
- [frontend/src/router/index.js:82-85](file://frontend/src/router/index.js#L82-L85)
|
||
|
||
章节来源
|
||
- [frontend/src/views/login/index.vue:100-151](file://frontend/src/views/login/index.vue#L100-L151)
|
||
|
||
### 品牌管理（Brand）
|
||
- 功能要点
|
||
- 品牌名称搜索、分页（10/20/50/100）
|
||
- 新增/编辑对话框，表单必填校验（1-100字符）
|
||
- 删除前二次确认
|
||
- 数据流
|
||
- 搜索/重置/分页变更触发加载数据
|
||
- 新增/编辑/删除调用对应 API
|
||
- 状态管理
|
||
- loading 控制表格加载态
|
||
- submitLoading 控制对话框提交按钮加载态
|
||
- 错误处理
|
||
- try/catch 包裹请求，失败提示并保持空数据
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start(["进入页面"]) --> Load["加载数据<br/>getBrands(skip,limit,name)"]
|
||
Load --> Render["渲染表格与分页"]
|
||
Render --> Action{"用户操作"}
|
||
Action --> |搜索| ResetPage["重置页码=1"] --> Load
|
||
Action --> |分页改变| Load
|
||
Action --> |新增/编辑| Dialog["打开对话框并校验"] --> Submit["提交表单"] --> Load
|
||
Action --> |删除| Confirm["确认删除"] --> DeleteReq["deleteBrand(id)"] --> Load
|
||
Action --> |关闭对话框| ResetForm["重置表单/字段"]
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/brand/index.vue:146-276](file://frontend/src/views/brand/index.vue#L146-L276)
|
||
- [frontend/src/api/brand.js:10-66](file://frontend/src/api/brand.js#L10-L66)
|
||
|
||
章节来源
|
||
- [frontend/src/views/brand/index.vue:109-276](file://frontend/src/views/brand/index.vue#L109-L276)
|
||
|
||
### 型号管理（Model）
|
||
- 功能要点
|
||
- 品牌/型号搜索、排序（id/create_at）、分页
|
||
- 批量选择、推送搜索（校验+推送两步）、复制选中项
|
||
- 更多操作：查看搜索、查看 EQ 缓存、查看 CSV（特定来源）
|
||
- 新增/编辑对话框：品牌下拉/可创建、文件上传、阻抗等字段
|
||
- 数据流
|
||
- 加载品牌选项与型号列表
|
||
- 文件上传后自动填充来源与默认阻抗，并尝试解析品牌/型号
|
||
- 推送搜索：先 validate，再 push，实时反馈步骤与进度
|
||
- 状态管理
|
||
- 多处 loading：表格、对话框、推送过程
|
||
- pushSteps 控制推送步骤状态
|
||
- selectedIds 记录勾选项
|
||
- 错误处理
|
||
- 各类请求失败统一提示
|
||
- 文件上传失败清理列表并提示
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant M as "Model 组件"
|
||
participant API as "model API"
|
||
participant S as "后端"
|
||
U->>M : 选择若干型号并点击“推送搜索”
|
||
M->>API : validatePushToMeilisearch(ids)
|
||
API->>S : POST /models/push-to-search/validate
|
||
S-->>API : 校验结果
|
||
API-->>M : 校验通过/失败列表
|
||
alt 全部通过
|
||
M->>API : pushToMeilisearch(ids)
|
||
API->>S : POST /models/push-to-search
|
||
S-->>API : 推送结果
|
||
API-->>M : 成功数量/状态
|
||
else 部分失败
|
||
M->>M : 展示失败原因列表
|
||
end
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/model/index.vue:494-506](file://frontend/src/views/model/index.vue#L494-L506)
|
||
- [frontend/src/api/model.js:128-150](file://frontend/src/api/model.js#L128-L150)
|
||
|
||
章节来源
|
||
- [frontend/src/views/model/index.vue:460-800](file://frontend/src/views/model/index.vue#L460-L800)
|
||
|
||
### OTA 固件（OTA）
|
||
- 功能要点
|
||
- 多条件筛选：版本名、设备型号、状态、版本号
|
||
- 新增/编辑/复制/删除
|
||
- 升级包上传（针对指定型号），自动生成 URL 与 MD5
|
||
- 表单校验：版本号/名称/型号必填，MD5 32位十六进制
|
||
- 数据流
|
||
- 搜索/重置/分页变更触发加载
|
||
- 上传文件后调用上传接口，回填 URL 与 MD5
|
||
- 状态管理
|
||
- loading 控制表格加载态
|
||
- submitLoading 控制提交按钮
|
||
- packageUploading 控制上传按钮
|
||
- 错误处理
|
||
- 上传失败清理文件列表并提示
|
||
- 表单校验失败阻止提交
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Open(["打开新增/编辑对话框"]) --> Fill["填写基础字段"]
|
||
Fill --> ModelSel{"是否选择支持上传的型号?"}
|
||
ModelSel --> |是| Upload["选择文件并上传"]
|
||
Upload --> UploadOK{"上传成功?"}
|
||
UploadOK --> |是| AutoFill["自动填充URL/MD5并校验"]
|
||
UploadOK --> |否| Hint["提示失败并清理文件"]
|
||
ModelSel --> |否| Skip["跳过上传字段"]
|
||
AutoFill --> Submit["提交表单"]
|
||
Skip --> Submit
|
||
Submit --> Done["成功/失败提示并刷新列表"]
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/ota/index.vue:372-418](file://frontend/src/views/ota/index.vue#L372-L418)
|
||
- [frontend/src/api/ota.js:56-67](file://frontend/src/api/ota.js#L56-L67)
|
||
|
||
章节来源
|
||
- [frontend/src/views/ota/index.vue:249-580](file://frontend/src/views/ota/index.vue#L249-L580)
|
||
|
||
### 分享码日志（ShareCodeLog）
|
||
- 功能要点
|
||
- MAC/IP/动作/时间范围筛选
|
||
- 查看 EQ 快照（JSON 可视化）
|
||
- 数据流
|
||
- 构造查询参数（含时间范围），调用日志接口
|
||
- 打开对话框时安全解析并展示 JSON
|
||
- 状态管理
|
||
- loading 控制表格加载态
|
||
- eqDialogVisible 控制弹窗
|
||
- 错误处理
|
||
- 请求失败统一提示
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant U as "用户"
|
||
participant S as "ShareCodeLog 组件"
|
||
participant API as "shareCodeLog API"
|
||
participant B as "后端"
|
||
U->>S : 设置筛选条件并点击搜索
|
||
S->>S : buildQueryParams()
|
||
S->>API : getShareCodeLogs(params)
|
||
API->>B : GET /share-code/logs
|
||
B-->>API : {code,data}
|
||
API-->>S : 结果
|
||
S->>S : 渲染表格/分页
|
||
U->>S : 点击某行“查看”
|
||
S->>S : safeParseJson(eq_data)
|
||
S->>S : 打开弹窗展示
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/share-code/log.vue:214-250](file://frontend/src/views/share-code/log.vue#L214-L250)
|
||
- [frontend/src/api/shareCodeLog.js:17-24](file://frontend/src/api/shareCodeLog.js#L17-L24)
|
||
|
||
章节来源
|
||
- [frontend/src/views/share-code/log.vue:148-278](file://frontend/src/views/share-code/log.vue#L148-L278)
|
||
|
||
### 系统用户（System Users）
|
||
- 功能要点
|
||
- 用户名模糊搜索、分页
|
||
- 启用/禁用、改密、删除
|
||
- 数据流
|
||
- 搜索/重置/分页变更触发加载
|
||
- 新建账号、改密、启/禁用、删除分别调用对应 API
|
||
- 状态管理
|
||
- loading 控制表格加载态
|
||
- submitLoading 控制提交按钮
|
||
- 错误处理
|
||
- 统一提示与错误捕获
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Enter(["进入页面"]) --> Load["加载用户列表"]
|
||
Load --> Act{"用户操作"}
|
||
Act --> |新建| Create["打开新建对话框并校验"] --> CreateUser["createUser()"] --> Load
|
||
Act --> |改密| Change["打开改密对话框并校验"] --> UpdateUser["updateUser(pwd)"] --> Load
|
||
Act --> |启/禁用| Toggle["updateUser(status)"] --> Load
|
||
Act --> |删除| Del["确认删除"] --> DeleteUser["deleteUser(id)"] --> Load
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/views/system/users/index.vue:231-393](file://frontend/src/views/system/users/index.vue#L231-L393)
|
||
- [frontend/src/api/user.js:3-40](file://frontend/src/api/user.js#L3-L40)
|
||
|
||
章节来源
|
||
- [frontend/src/views/system/users/index.vue:169-393](file://frontend/src/views/system/users/index.vue#L169-L393)
|
||
|
||
## 依赖分析
|
||
- 路由与页面
|
||
- 路由定义了页面路径、标题与图标，部分页面需要超级管理员权限
|
||
- 鉴权守卫基于令牌与角色进行拦截
|
||
- 页面与 API
|
||
- 各页面通过对应的 API 模块发起请求，遵循统一的参数与返回结构
|
||
- 组件内聚与耦合
|
||
- 页面组件内聚于自身状态与交互逻辑，API 层提供稳定接口契约
|
||
- 低耦合：页面不直接依赖其他页面，仅通过路由与公共工具交互
|
||
|
||
```mermaid
|
||
graph LR
|
||
R["router/index.js"] --> H["views/home/index.vue"]
|
||
R --> L["views/login/index.vue"]
|
||
R --> B["views/brand/index.vue"]
|
||
R --> M["views/model/index.vue"]
|
||
R --> O["views/ota/index.vue"]
|
||
R --> S["views/share-code/log.vue"]
|
||
R --> U["views/system/users/index.vue"]
|
||
H --> A1["api/auth.js"]
|
||
L --> A1
|
||
B --> A2["api/brand.js"]
|
||
M --> A3["api/model.js"]
|
||
O --> A4["api/ota.js"]
|
||
S --> A5["api/shareCodeLog.js"]
|
||
U --> A6["api/user.js"]
|
||
```
|
||
|
||
图表来源
|
||
- [frontend/src/router/index.js:6-57](file://frontend/src/router/index.js#L6-L57)
|
||
- [frontend/src/views/home/index.vue:101-102](file://frontend/src/views/home/index.vue#L101-L102)
|
||
- [frontend/src/views/login/index.vue:105-106](file://frontend/src/views/login/index.vue#L105-L106)
|
||
- [frontend/src/views/brand/index.vue](file://frontend/src/views/brand/index.vue#L113)
|
||
- [frontend/src/views/model/index.vue:486-487](file://frontend/src/views/model/index.vue#L486-L487)
|
||
- [frontend/src/views/ota/index.vue](file://frontend/src/views/ota/index.vue#L253)
|
||
- [frontend/src/views/share-code/log.vue](file://frontend/src/views/share-code/log.vue#L154)
|
||
- [frontend/src/views/system/users/index.vue](file://frontend/src/views/system/users/index.vue#L173)
|
||
|
||
章节来源
|
||
- [frontend/src/router/index.js:6-57](file://frontend/src/router/index.js#L6-L57)
|
||
|
||
## 性能考虑
|
||
- 列表分页
|
||
- 通过 skip/limit 控制每次请求的数据量，避免一次性加载过多
|
||
- 加载态
|
||
- 使用 v-loading 与局部 loading 状态，减少闪烁与无效渲染
|
||
- 上传优化
|
||
- OTA 升级包上传设置较长超时，避免短时中断
|
||
- 事件节流
|
||
- 搜索建议在输入完成后再触发请求（当前实现为即时触发，可根据需求增加防抖）
|
||
|
||
## 故障排查指南
|
||
- 登录失败
|
||
- 检查网络与后端 /auth/login 接口连通性
|
||
- 确认账号/密码正确，查看 ElMessage 提示
|
||
- 数据为空
|
||
- 检查筛选条件是否过于严格（如状态/型号/时间范围）
|
||
- 确认分页参数（page/pageSize）是否合理
|
||
- 上传失败
|
||
- 确认所选型号支持上传（非支持型号会清空上传字段）
|
||
- 检查文件类型与大小限制
|
||
- 权限不足
|
||
- 超级管理员页面访问被拦截时，确认当前用户角色
|
||
- 推送搜索失败
|
||
- 查看校验失败列表，修正问题型号后再重试
|
||
|
||
章节来源
|
||
- [frontend/src/views/login/index.vue:144-149](file://frontend/src/views/login/index.vue#L144-L149)
|
||
- [frontend/src/views/ota/index.vue:384-418](file://frontend/src/views/ota/index.vue#L384-L418)
|
||
- [frontend/src/views/model/index.vue:494-506](file://frontend/src/views/model/index.vue#L494-L506)
|
||
- [frontend/src/router/index.js:75-79](file://frontend/src/router/index.js#L75-L79)
|
||
|
||
## 结论
|
||
本文档系统梳理了各功能页面的路由、数据获取、表单验证与交互流程，并结合状态管理、错误处理与加载状态给出实现参考。页面间通过路由与 API 进行解耦协作，整体具备良好的可维护性与扩展性。
|
||
|
||
## 附录
|
||
- 路由元信息
|
||
- requiresAuth：是否需要登录
|
||
- requiresSuperAdmin：是否需要超级管理员
|
||
- title/icon：菜单标题与图标
|
||
- 常用工具
|
||
- 时间格式化：formatTime/formatDateTime
|
||
- 消息提示：ElMessage
|
||
- 确认对话框：ElMessageBox |