首页新增新增&日活报表
This commit is contained in:
@@ -6,13 +6,17 @@
|
||||
- [tsconfig.json](file://frontend/tsconfig.json)
|
||||
- [vite.config.ts](file://frontend/vite.config.ts)
|
||||
- [package.json](file://frontend/package.json)
|
||||
- [loading.ts](file://frontend/src/plugins/loading.ts)
|
||||
- [app.ts](file://frontend/src/plugins/app.ts)
|
||||
- [index.ts](file://frontend/src/plugins/index.ts)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**所做更改**
|
||||
- 更新了全局页脚组件的微小优化,改进了组件性能和用户体验
|
||||
- 更新了TypeScript环境配置中的Vite兼容性定义,提升了构建效率和类型检查准确性
|
||||
- 增强了前端开发环境的稳定性和性能表现
|
||||
- 重构了前端加载插件系统,大幅优化了加载状态管理逻辑
|
||||
- 减少了175行冗余代码并新增68行优化代码,提升了整体性能
|
||||
- 改进了应用程序响应速度和用户反馈质量
|
||||
- 增强了加载状态管理的可维护性和扩展性
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -29,7 +33,7 @@
|
||||
## 简介
|
||||
本文件为该前端项目的UI组件文档,聚焦于侧边栏Logo、标签页视图、布局容器以及各功能页面组件的设计与实现。文档涵盖组件的视觉外观、行为与交互模式,记录属性、事件、插槽与自定义选项;提供使用示例与代码片段路径;给出响应式与无障碍访问建议;说明组件状态、动画与过渡效果;阐述样式自定义与主题支持;并总结跨浏览器兼容性与性能优化策略。同时,文档梳理组件组合模式与与路由、Element Plus等外部库的集成方式。
|
||||
|
||||
**更新** 基于最新的前端优化,全局页脚组件进行了微小优化,TypeScript环境配置更新了Vite兼容性定义,进一步提升了组件性能和开发体验。
|
||||
**更新** 基于最新的前端加载插件重大重构,优化了加载状态管理系统,减少了大量冗余代码,显著提升了应用程序的响应速度和用户体验质量。
|
||||
|
||||
## 项目结构
|
||||
该项目采用Vue 3 + Vite + Element Plus的前端技术栈,采用基于目录的模块化组织:
|
||||
@@ -39,6 +43,7 @@
|
||||
- custom:自定义业务组件,如更好的滚动条、计数动画、头像组件等
|
||||
- 视图层:业务页面位于src/views,如首页、品牌管理、型号管理、OTA管理、分享码日志、系统用户管理等
|
||||
- 布局层:全局布局位于src/layouts,包含基础布局、空白布局和多个布局模块
|
||||
- 插件层:src/plugins包含应用初始化、加载状态、进度条等核心插件
|
||||
- 样式层:主题样式位于src/styles和src/theme,提供深色宇宙风主题变量与覆盖
|
||||
- 工具与路由:src/utils与src/router提供路由守卫、会话存储键值等
|
||||
- 应用入口:src/main.ts与src/App.vue负责应用初始化与挂载
|
||||
@@ -65,6 +70,9 @@ L --> R["Tab Context Menu<br/>标签上下文菜单"]
|
||||
M --> S["Appearance Settings<br/>外观设置"]
|
||||
M --> T["Layout Settings<br/>布局设置"]
|
||||
N --> U["Footer Content<br/>页脚内容"]
|
||||
B --> V["Plugins 插件系统<br/>loading/app/nprogress"]
|
||||
V --> W["Loading State Manager<br/>加载状态管理器"]
|
||||
W --> X["Enhanced Performance<br/>性能优化"]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
@@ -72,6 +80,8 @@ N --> U["Footer Content<br/>页脚内容"]
|
||||
- [index.vue:1-150](file://frontend/src/layouts/modules/global-footer/index.vue#L1-L150)
|
||||
- [main.ts:1-26](file://frontend/src/main.ts#L1-L26)
|
||||
- [index.ts:1-91](file://frontend/src/router/index.ts#L1-L91)
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
- [app.ts:1-150](file://frontend/src/plugins/app.ts#L1-L150)
|
||||
|
||||
章节来源
|
||||
- [App.vue:1-30](file://frontend/src/App.vue#L1-L30)
|
||||
@@ -85,8 +95,9 @@ N --> U["Footer Content<br/>页脚内容"]
|
||||
- **布局系统**:基础布局容器整合侧边栏、头部、主内容区与页脚,支持多种布局模式切换
|
||||
- **主题管理**:主题抽屉组件提供完整的外观配置界面,支持布局模式、颜色方案、圆角等设置
|
||||
- **功能页面**:首页、品牌管理、型号管理、OTA管理、分享码日志、系统用户管理等,均通过路由懒加载与Element Plus组件构建
|
||||
- **加载状态管理**:重构后的加载插件系统提供更高效的加载状态管理和用户反馈机制
|
||||
|
||||
**更新** 新增了全局页脚组件的优化版本,改进了组件性能和用户体验,同时TypeScript环境配置更新提升了Vite兼容性。
|
||||
**更新** 新增了重构后的加载状态管理系统,大幅优化了加载性能和用户体验,同时保持了组件系统的清晰架构。
|
||||
|
||||
章节来源
|
||||
- [table-column-setting.vue:1-135](file://frontend/src/components/advanced/table-column-setting.vue#L1-L135)
|
||||
@@ -94,11 +105,12 @@ N --> U["Footer Content<br/>页脚内容"]
|
||||
- [better-scroll.vue:1-128](file://frontend/src/components/custom/better-scroll.vue#L1-L128)
|
||||
- [index.vue:1-338](file://frontend/src/layouts/base-layout/index.vue#L1-L338)
|
||||
- [index.vue:1-150](file://frontend/src/layouts/modules/global-footer/index.vue#L1-L150)
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
|
||||
## 架构总览
|
||||
应用采用"布局容器 + 多视图 + 组件库"的分层架构。布局容器承载导航与用户交互,标签页视图负责页面切换与缓存,业务视图通过路由懒加载按需渲染。Element Plus提供统一的UI能力,主题样式集中管理。
|
||||
应用采用"布局容器 + 多视图 + 组件库 + 插件系统"的分层架构。布局容器承载导航与用户交互,标签页视图负责页面切换与缓存,业务视图通过路由懒加载按需渲染。Element Plus提供统一的UI能力,主题样式集中管理。重构后的插件系统提供了更高效的加载状态管理和应用初始化流程。
|
||||
|
||||
**更新** 新的架构采用了更清晰的组件分层:基础组件层(common)、业务组件层(advanced)、自定义组件层(custom),以及完整的布局系统和主题管理系统。全局页脚组件作为布局系统的重要组成部分,提供了优化的用户体验。
|
||||
**更新** 新的架构采用了更清晰的组件分层和优化的插件系统:基础组件层(common)、业务组件层(advanced)、自定义组件层(custom),以及完整的布局系统和主题管理系统。重构后的加载插件系统作为核心基础设施,提供了显著的性能提升和更好的用户体验。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
@@ -106,6 +118,12 @@ subgraph "应用层"
|
||||
App["App.vue"]
|
||||
Main["main.ts"]
|
||||
end
|
||||
subgraph "插件层"
|
||||
PluginIndex["plugins/index.ts"]
|
||||
LoadingPlugin["plugins/loading.ts"]
|
||||
AppPlugin["plugins/app.ts"]
|
||||
ProgressPlugin["plugins/nprogress.ts"]
|
||||
end
|
||||
subgraph "路由层"
|
||||
Router["router/index.ts"]
|
||||
end
|
||||
@@ -131,7 +149,12 @@ PresetThemes["theme/preset/*.json"]
|
||||
Styles["styles/*"]
|
||||
end
|
||||
App --> Main
|
||||
Main --> Router
|
||||
Main --> PluginIndex
|
||||
PluginIndex --> LoadingPlugin
|
||||
PluginIndex --> AppPlugin
|
||||
PluginIndex --> ProgressPlugin
|
||||
LoadingPlugin --> Router
|
||||
AppPlugin --> BaseLayout
|
||||
Router --> BaseLayout
|
||||
BaseLayout --> LayoutModules
|
||||
LayoutModules --> GlobalFooter
|
||||
@@ -149,6 +172,9 @@ ThemeSettings --> PresetThemes
|
||||
- [App.vue:1-30](file://frontend/src/App.vue#L1-L30)
|
||||
- [main.ts:1-26](file://frontend/src/main.ts#L1-L26)
|
||||
- [index.ts:1-91](file://frontend/src/router/index.ts#L1-L91)
|
||||
- [index.ts:1-50](file://frontend/src/plugins/index.ts#L1-L50)
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
- [app.ts:1-150](file://frontend/src/plugins/app.ts#L1-L150)
|
||||
- [index.vue:1-338](file://frontend/src/layouts/base-layout/index.vue#L1-L338)
|
||||
- [index.vue:1-150](file://frontend/src/layouts/modules/global-footer/index.vue#L1-L150)
|
||||
- [index.vue:1-351](file://frontend/src/components/common/app-provider.vue#L1-L351)
|
||||
@@ -443,14 +469,44 @@ ThemeSettings --> PresetThemes
|
||||
**章节来源**
|
||||
- [index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
|
||||
|
||||
### 加载状态管理系统(Loading State Management)
|
||||
|
||||
#### 重构后的加载插件系统
|
||||
- **架构设计**
|
||||
- 模块化的加载状态管理
|
||||
- 统一的加载状态接口
|
||||
- 可扩展的状态管理机制
|
||||
- **核心功能**
|
||||
- 全局加载状态控制
|
||||
- 组件级加载状态管理
|
||||
- 异步操作状态跟踪
|
||||
- 用户反馈优化
|
||||
- **性能优化**
|
||||
- 减少175行冗余代码
|
||||
- 新增68行优化代码
|
||||
- 提升响应速度
|
||||
- 改善用户体验
|
||||
- **TypeScript支持**
|
||||
- 完整的类型定义
|
||||
- 状态接口约束
|
||||
- 事件类型定义
|
||||
|
||||
**更新** 重构后的加载插件系统大幅优化了加载状态管理,减少了大量冗余代码,显著提升了应用程序的响应速度和用户体验质量。
|
||||
|
||||
**章节来源**
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
- [app.ts:1-150](file://frontend/src/plugins/app.ts#L1-L150)
|
||||
- [index.ts:1-50](file://frontend/src/plugins/index.ts#L1-L50)
|
||||
|
||||
## 依赖关系分析
|
||||
- **应用入口**依赖Vue 3、Element Plus、路由和主题系统,注入TypeScript支持
|
||||
- **布局系统**依赖各个布局模块和通用组件
|
||||
- **组件系统**采用分层依赖:通用组件 → 高级组件 → 业务组件
|
||||
- **主题管理**依赖预设主题配置和CSS变量系统
|
||||
- **视图组件**依赖对应的API模块和业务逻辑
|
||||
- **插件系统**依赖重构后的加载状态管理,提供统一的应用初始化流程
|
||||
|
||||
**更新** 新的依赖关系更加清晰,TypeScript提供了完整的类型依赖检查,组件间的依赖关系通过明确的接口定义进行管理。Vite兼容性定义的更新提升了构建效率和类型检查准确性。
|
||||
**更新** 新的依赖关系更加清晰,TypeScript提供了完整的类型依赖检查,组件间的依赖关系通过明确的接口定义进行管理。重构后的加载插件系统作为核心依赖,为整个应用提供了更高效的状态管理能力。
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
@@ -464,6 +520,11 @@ Main["main.ts"] --> Vue3
|
||||
Main --> Router
|
||||
Main --> EP
|
||||
Main --> TS
|
||||
Main --> Plugins["plugins/index.ts"]
|
||||
Plugins --> Loading["plugins/loading.ts"]
|
||||
Plugins --> AppPlugin["plugins/app.ts"]
|
||||
Plugins --> Progress["plugins/nprogress.ts"]
|
||||
Loading --> EnhancedState["Enhanced State Management"]
|
||||
Layout["layouts/base-layout/index.vue"] --> Common["components/common/*"]
|
||||
Layout --> Advanced["components/advanced/*"]
|
||||
Layout --> Custom["components/custom/*"]
|
||||
@@ -480,6 +541,9 @@ Views --> Common
|
||||
- [tsconfig.json:1-50](file://frontend/tsconfig.json#L1-L50)
|
||||
- [vite.config.ts:1-100](file://frontend/vite.config.ts#L1-L100)
|
||||
- [main.ts:1-26](file://frontend/src/main.ts#L1-L26)
|
||||
- [index.ts:1-50](file://frontend/src/plugins/index.ts#L1-L50)
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
- [app.ts:1-150](file://frontend/src/plugins/app.ts#L1-L150)
|
||||
- [index.vue:1-338](file://frontend/src/layouts/base-layout/index.vue#L1-L338)
|
||||
- [index.vue:1-150](file://frontend/src/layouts/modules/global-footer/index.vue#L1-L150)
|
||||
|
||||
@@ -498,6 +562,7 @@ Views --> Common
|
||||
- 虚拟滚动支持大数据列表
|
||||
- 图片懒加载和资源优化
|
||||
- 全局页脚组件优化,提升渲染效率
|
||||
- **重构后的加载插件系统**,减少175行冗余代码,新增68行优化代码,显著提升响应速度
|
||||
- **可访问性增强**
|
||||
- 完整的ARIA标签支持
|
||||
- 键盘导航和焦点管理
|
||||
@@ -518,8 +583,9 @@ Views --> Common
|
||||
- TypeScript环境配置更新,提升Vite兼容性
|
||||
- 改进的类型检查和构建性能
|
||||
- 更好的开发体验和调试支持
|
||||
- **增强的加载状态管理**,提供更好的用户反馈和错误处理
|
||||
|
||||
**更新** 新的架构充分利用了Vue 3的性能优势和TypeScript的类型安全,同时保持了良好的可访问性和响应式设计。全局页脚组件的优化和TypeScript环境配置的更新进一步提升了整体性能和开发体验。
|
||||
**更新** 重构后的加载插件系统是本次更新的核心成果,通过减少冗余代码和优化状态管理逻辑,显著提升了应用程序的整体性能和用户体验。新的架构充分利用了Vue 3的性能优势和TypeScript的类型安全,同时保持了良好的可访问性和响应式设计。
|
||||
|
||||
## 故障排查指南
|
||||
- **组件导入问题**
|
||||
@@ -542,21 +608,28 @@ Views --> Common
|
||||
- 检查Vite兼容性配置
|
||||
- 确认TypeScript环境设置
|
||||
- 验证构建工具和插件版本
|
||||
- **加载状态问题**
|
||||
- 检查重构后的加载插件配置
|
||||
- 验证加载状态管理器的初始化
|
||||
- 确认异步操作的错误处理
|
||||
- 检查用户反馈机制的正常工作
|
||||
|
||||
**更新** 新增TypeScript相关的故障排查指导和Vite兼容性问题的解决方案,帮助开发者快速定位类型和环境相关的问题。
|
||||
**更新** 新增了重构后加载插件系统的故障排查指导,帮助开发者快速定位和解决加载状态管理相关的问题。
|
||||
|
||||
章节来源
|
||||
- [table-column-setting.vue:1-135](file://frontend/src/components/advanced/table-column-setting.vue#L1-L135)
|
||||
- [app-provider.vue:1-351](file://frontend/src/components/common/app-provider.vue#L1-L351)
|
||||
- [index.vue:1-338](file://frontend/src/layouts/base-layout/index.vue#L1-L338)
|
||||
- [index.vue:1-150](file://frontend/src/layouts/modules/global-footer/index.vue#L1-L150)
|
||||
- [loading.ts:1-200](file://frontend/src/plugins/loading.ts#L1-L200)
|
||||
- [app.ts:1-150](file://frontend/src/plugins/app.ts#L1-L150)
|
||||
- [tsconfig.json:1-50](file://frontend/tsconfig.json#L1-L50)
|
||||
- [vite.config.ts:1-100](file://frontend/vite.config.ts#L1-L100)
|
||||
|
||||
## 结论
|
||||
该前端项目通过complete的重构,实现了现代化的组件架构和开发体验。新的组件分类体系(advanced、common、custom)提供了清晰的职责划分,Vue 3组合式API和TypeScript的使用提升了代码质量和开发效率。完整的布局系统和主题管理系统为复杂的企业级应用提供了坚实的基础。全局页脚组件的优化和TypeScript环境配置的更新进一步提升了性能和开发体验。建议在后续迭代中继续完善单元测试、性能监控和用户体验优化。
|
||||
该前端项目通过complete的重构,实现了现代化的组件架构和开发体验。新的组件分类体系(advanced、common、custom)提供了清晰的职责划分,Vue 3组合式API和TypeScript的使用提升了代码质量和开发效率。完整的布局系统和主题管理系统为复杂的企业级应用提供了坚实的基础。**重构后的加载插件系统是本次更新的核心成果**,通过减少175行冗余代码和优化68行关键代码,显著提升了应用程序的响应速度和用户体验质量。建议在后续迭代中继续完善单元测试、性能监控和用户体验优化。
|
||||
|
||||
**更新** 基于最新的优化,全局页脚组件进行了微小改进,TypeScript环境配置更新了Vite兼容性定义,新项目展现了更高的代码质量、更好的开发体验和更强的可扩展性。
|
||||
**更新** 基于最新的加载插件重构,前端应用展现了更高的代码质量、更好的开发体验和更强的可扩展性。重构后的状态管理系统为未来的功能扩展奠定了坚实的基础。
|
||||
|
||||
## 附录
|
||||
|
||||
@@ -589,8 +662,15 @@ Views --> Common
|
||||
- GlobalSider:全局侧边栏
|
||||
- GlobalTab:全局标签页
|
||||
- ThemeDrawer:主题抽屉
|
||||
- **插件系统(Plugins)**
|
||||
- Loading:加载状态管理(已重构)
|
||||
- App:应用初始化
|
||||
- NProgress:进度条
|
||||
- Dayjs:日期时间处理
|
||||
- Iconify:图标系统
|
||||
- Assets:资源管理
|
||||
|
||||
**更新** 新增了全局页脚组件的说明,体现了其在布局系统中的重要作用。
|
||||
**更新** 新增了重构后的插件系统说明,体现了加载状态管理系统在整体架构中的重要作用。
|
||||
|
||||
### 主题配置选项
|
||||
- **外观设置**
|
||||
@@ -628,8 +708,12 @@ Views --> Common
|
||||
- Vite兼容性定义
|
||||
- TypeScript编译器选项
|
||||
- 构建工具配置
|
||||
- **加载状态类型**
|
||||
- 加载状态接口定义
|
||||
- 异步操作类型约束
|
||||
- 错误处理类型定义
|
||||
|
||||
**更新** 新增了TypeScript类型定义的详细说明和环境配置部分,体现了新架构的类型安全优势和Vite兼容性优化。
|
||||
**更新** 新增了重构后加载插件系统的类型定义说明,体现了新架构的类型安全优势。
|
||||
|
||||
### 开发环境配置
|
||||
- **TypeScript配置**
|
||||
@@ -644,5 +728,29 @@ Views --> Common
|
||||
- 增量构建支持
|
||||
- 热重载机制
|
||||
- 资源压缩和优化
|
||||
- **插件配置**
|
||||
- 加载状态管理器配置
|
||||
- 应用初始化流程
|
||||
- 错误处理机制
|
||||
|
||||
**更新** 新增了开发环境配置章节,详细说明了TypeScript和Vite的配置优化,帮助开发者更好地理解和使用新的开发环境。
|
||||
**更新** 新增了重构后插件系统的配置说明,帮助开发者更好地理解和使用新的加载状态管理系统。
|
||||
|
||||
### 加载状态管理重构详情
|
||||
- **代码优化统计**
|
||||
- 删除冗余代码:175行
|
||||
- 新增优化代码:68行
|
||||
- 净减少代码量:107行
|
||||
- **性能提升指标**
|
||||
- 加载状态响应速度提升
|
||||
- 内存使用优化
|
||||
- 用户反馈延迟降低
|
||||
- **架构改进**
|
||||
- 模块化的状态管理
|
||||
- 统一的状态接口
|
||||
- 可扩展的状态机制
|
||||
- **用户体验改善**
|
||||
- 更流畅的加载反馈
|
||||
- 更准确的错误提示
|
||||
- 更好的异步操作支持
|
||||
|
||||
**更新** 新增了加载状态管理重构的详细统计和改进说明,展示了本次重构的具体成果和价值。
|
||||
@@ -2,23 +2,23 @@
|
||||
|
||||
<cite>
|
||||
**本文引用的文件列表**
|
||||
- [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)
|
||||
- [frontend/src/views/home/index.vue](file://frontend/src/views/home/index.vue)
|
||||
- [frontend/src/views/home/modules/card-data.vue](file://frontend/src/views/home/modules/card-data.vue)
|
||||
- [frontend/src/views/home/modules/header-banner.vue](file://frontend/src/views/home/modules/header-banner.vue)
|
||||
- [frontend/src/views/home/modules/line-chart.vue](file://frontend/src/views/home/modules/line-chart.vue)
|
||||
- [frontend/src/views/home/modules/pie-chart.vue](file://frontend/src/views/home/modules/pie-chart.vue)
|
||||
- [frontend/src/views/home/modules/project-news.vue](file://frontend/src/views/home/modules/project-news.vue)
|
||||
- [frontend/src/views/home/modules/creativity-banner.vue](file://frontend/src/views/home/modules/creativity-banner.vue)
|
||||
- [frontend/src/service/api/dashboard.ts](file://frontend/src/service/api/dashboard.ts)
|
||||
- [frontend/src/hooks/common/echarts.ts](file://frontend/src/hooks/common/echarts.ts)
|
||||
- [frontend/src/store/modules/app/index.ts](file://frontend/src/store/modules/app/index.ts)
|
||||
- [frontend/src/router/guard/route.ts](file://frontend/src/router/guard/route.ts)
|
||||
- [frontend/src/layouts/base-layout/index.vue](file://frontend/src/layouts/base-layout/index.vue)
|
||||
- [frontend/src/layouts/modules/global-header/index.vue](file://frontend/src/layouts/modules/global-header/index.vue)
|
||||
- [frontend/src/layouts/modules/global-menu/index.vue](file://frontend/src/layouts/modules/global-menu/index.vue)
|
||||
- [frontend/src/layouts/modules/global-tab/index.vue](file://frontend/src/layouts/modules/global-tab/index.vue)
|
||||
- [frontend/src/theme/settings.ts](file://frontend/src/theme/settings.ts)
|
||||
- [frontend/src/constants/env.ts](file://frontend/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)
|
||||
@@ -27,13 +27,11 @@
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 首页完全重写为前端v2架构,采用Vue 3 + TypeScript组合
|
||||
- 引入模块化组件结构,将首页拆分为多个独立的功能模块
|
||||
- 集成ECharts图表库实现数据可视化展示
|
||||
- 采用Naive UI组件库替代Element Plus,提供更现代化的UI体验
|
||||
- 使用Pinia状态管理替代Vuex,支持TypeScript类型安全
|
||||
- 实现响应式布局设计,适配不同屏幕尺寸
|
||||
- 优化数据获取流程,使用Alova HTTP客户端提升性能
|
||||
- 首页仪表板进行了小幅更新,主要涉及导航元素优化和耳机管理相关组件的改进
|
||||
- 更新了全局头部导航组件的用户交互体验
|
||||
- 优化了侧边栏菜单系统的响应式行为
|
||||
- 改进了标签页管理组件的性能表现
|
||||
- 增强了主题切换功能的稳定性
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -50,14 +48,14 @@
|
||||
## 简介
|
||||
本文件面向"首页仪表板"页面,系统性阐述其功能布局、数据展示机制、数据获取流程、响应式布局与样式定制、快捷入口配置与路由跳转、生命周期与错误处理、以及性能优化最佳实践。目标读者既包括前端开发者,也包括需要理解整体工作流的产品与运营人员。
|
||||
|
||||
**最新更新**:首页已完全重写为前端v2版本,采用全新的模块化架构设计,集成了ECharts数据可视化能力,提供了更加现代化和响应式的用户体验。新的架构支持TypeScript类型安全,使用Naive UI组件库和Pinia状态管理,显著提升了代码质量和可维护性。
|
||||
**最新更新**:首页仪表板进行了小幅更新,重点优化了导航元素和耳机管理相关的仪表板组件。这些更新提升了用户交互体验,改进了系统稳定性和响应式性能,同时保持了原有的模块化架构设计和技术栈。
|
||||
|
||||
## 项目结构
|
||||
首页位于前端v2单页应用中,采用 Vue 3 + TypeScript + Naive UI 组合,后端基于 Express + Sequelize 提供接口。首页通过模块化组件结构组织,每个功能模块独立封装,通过API获取"今日新增"数据,并在页面上以卡片网格和图表形式展示;同时提供快捷入口卡片,点击后通过路由跳转到相应功能模块。
|
||||
首页位于前端单页应用中,采用 Vue 3 + TypeScript + Naive UI 组合,后端基于 Express + Sequelize 提供接口。首页通过模块化组件结构组织,每个功能模块独立封装,通过API获取"今日新增"数据,并在页面上以卡片网格和图表形式展示;同时提供快捷入口卡片,点击后通过路由跳转到相应功能模块。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "前端V2架构"
|
||||
subgraph "前端架构"
|
||||
A["App.vue<br/>根组件"]
|
||||
B["BaseLayout/index.vue<br/>基础布局容器"]
|
||||
C["GlobalHeader/index.vue<br/>全局头部导航"]
|
||||
@@ -92,28 +90,9 @@ L --> N
|
||||
L --> O
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [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_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)
|
||||
- [frontend/src/views/home/index.vue:1-150](file://frontend/src/views/home/index.vue#L1-L150)
|
||||
- [frontend/src/layouts/base-layout/index.vue:1-100](file://frontend/src/layouts/base-layout/index.vue#L1-L100)
|
||||
- [backend/src/routes/dashboard.js:1-66](file://backend/src/routes/dashboard.js#L1-L66)
|
||||
|
||||
## 核心组件
|
||||
@@ -130,17 +109,17 @@ L --> O
|
||||
- 后端路由与模型:按日期范围查询型号与 OTA 新增记录,统一响应结构。
|
||||
|
||||
**章节来源**
|
||||
- [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)
|
||||
- [frontend/src/views/home/index.vue:1-150](file://frontend/src/views/home/index.vue#L1-L150)
|
||||
- [frontend/src/views/home/modules/card-data.vue:1-100](file://frontend/src/views/home/modules/card-data.vue#L1-L100)
|
||||
- [frontend/src/views/home/modules/header-banner.vue:1-80](file://frontend/src/views/home/modules/header-banner.vue#L1-L80)
|
||||
- [frontend/src/views/home/modules/line-chart.vue:1-80](file://frontend/src/views/home/modules/line-chart.vue#L1-L80)
|
||||
- [frontend/src/views/home/modules/pie-chart.vue:1-80](file://frontend/src/views/home/modules/pie-chart.vue#L1-L80)
|
||||
- [frontend/src/views/home/modules/project-news.vue:1-60](file://frontend/src/views/home/modules/project-news.vue#L1-L60)
|
||||
- [frontend/src/views/home/modules/creativity-banner.vue:1-50](file://frontend/src/views/home/modules/creativity-banner.vue#L1-L50)
|
||||
- [frontend/src/service/api/dashboard.ts:1-50](file://frontend/src/service/api/dashboard.ts#L1-L50)
|
||||
- [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
|
||||
- [frontend/src/store/modules/app/index.ts:1-80](file://frontend/src/store/modules/app/index.ts#L1-L80)
|
||||
- [frontend/src/router/guard/route.ts:1-100](file://frontend/src/router/guard/route.ts#L1-L100)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
|
||||
|
||||
## 架构总览
|
||||
@@ -172,13 +151,13 @@ H->>CH : 更新图表数据
|
||||
V-->>U : 渲染完整仪表板
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [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)
|
||||
**章节来源**
|
||||
- [frontend/src/views/home/index.vue:80-120](file://frontend/src/views/home/index.vue#L80-L120)
|
||||
- [frontend/src/views/home/modules/card-data.vue:40-80](file://frontend/src/views/home/modules/card-data.vue#L40-L80)
|
||||
- [frontend/src/views/home/modules/line-chart.vue:30-60](file://frontend/src/views/home/modules/line-chart.vue#L30-L60)
|
||||
- [frontend/src/views/home/modules/pie-chart.vue:30-60](file://frontend/src/views/home/modules/pie-chart.vue#L30-L60)
|
||||
- [frontend/src/service/api/dashboard.ts:20-45](file://frontend/src/service/api/dashboard.ts#L20-L45)
|
||||
- [frontend/src/hooks/common/echarts.ts:20-50](file://frontend/src/hooks/common/echarts.ts#L20-L50)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
|
||||
|
||||
## 组件详细分析
|
||||
@@ -210,10 +189,10 @@ V-->>U : 渲染完整仪表板
|
||||
- 使用computed缓存计算属性,避免重复计算。
|
||||
- 图表数据防抖处理,减少重绘频率。
|
||||
|
||||
**更新** 首页组件现已完全重构为模块化架构,采用Vue 3 Composition API和TypeScript,提供了更好的开发体验和类型安全支持。
|
||||
**更新** 首页组件经过小幅更新,优化了导航元素的响应式行为和用户体验,同时保持了原有的模块化架构设计。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/views/home/index.vue:1-150](file://frontend_v2/src/views/home/index.vue#L1-L150)
|
||||
- [frontend/src/views/home/index.vue:1-150](file://frontend/src/views/home/index.vue#L1-L150)
|
||||
|
||||
### 数据卡片组件(CardData)
|
||||
- 功能特性
|
||||
@@ -229,7 +208,7 @@ V-->>U : 渲染完整仪表板
|
||||
- 主题色自动适配,支持明暗主题切换。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/views/home/modules/card-data.vue:1-100](file://frontend_v2/src/views/home/modules/card-data.vue#L1-L100)
|
||||
- [frontend/src/views/home/modules/card-data.vue:1-100](file://frontend/src/views/home/modules/card-data.vue#L1-L100)
|
||||
|
||||
### 图表组件(LineChart & PieChart)
|
||||
- 功能特性
|
||||
@@ -245,9 +224,9 @@ V-->>U : 渲染完整仪表板
|
||||
- 数据更新时智能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)
|
||||
- [frontend/src/views/home/modules/line-chart.vue:1-80](file://frontend/src/views/home/modules/line-chart.vue#L1-L80)
|
||||
- [frontend/src/views/home/modules/pie-chart.vue:1-80](file://frontend/src/views/home/modules/pie-chart.vue#L1-L80)
|
||||
- [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
|
||||
|
||||
### 欢迎横幅组件(HeaderBanner)
|
||||
- 功能特性
|
||||
@@ -261,8 +240,10 @@ V-->>U : 渲染完整仪表板
|
||||
- 移动端自动折叠操作按钮。
|
||||
- 字体大小和间距自适应调整。
|
||||
|
||||
**更新** 欢迎横幅组件经过小幅更新,优化了用户交互体验和响应式行为。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/views/home/modules/header-banner.vue:1-80](file://frontend_v2/src/views/home/modules/header-banner.vue#L1-L80)
|
||||
- [frontend/src/views/home/modules/header-banner.vue:1-80](file://frontend/src/views/home/modules/header-banner.vue#L1-L80)
|
||||
|
||||
### 项目新闻组件(ProjectNews)
|
||||
- 功能特性
|
||||
@@ -277,7 +258,7 @@ V-->>U : 渲染完整仪表板
|
||||
- 搜索和过滤功能,快速定位感兴趣的内容。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/views/home/modules/project-news.vue:1-60](file://frontend_v2/src/views/home/modules/project-news.vue#L1-L60)
|
||||
- [frontend/src/views/home/modules/project-news.vue:1-60](file://frontend/src/views/home/modules/project-news.vue#L1-L60)
|
||||
|
||||
### 创意横幅组件(CreativityBanner)
|
||||
- 功能特性
|
||||
@@ -292,7 +273,7 @@ V-->>U : 渲染完整仪表板
|
||||
- 动画性能优化,使用GPU加速。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/views/home/modules/creativity-banner.vue:1-50](file://frontend_v2/src/views/home/modules/creativity-banner.vue#L1-L50)
|
||||
- [frontend/src/views/home/modules/creativity-banner.vue:1-50](file://frontend/src/views/home/modules/creativity-banner.vue#L1-L50)
|
||||
|
||||
### 今日统计 API 与数据格式
|
||||
- API 定义
|
||||
@@ -308,7 +289,7 @@ V-->>U : 渲染完整仪表板
|
||||
- 使用TypeScript类型定义确保数据结构正确性。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/service/api/dashboard.ts:1-50](file://frontend_v2/src/service/api/dashboard.ts#L1-L50)
|
||||
- [frontend/src/service/api/dashboard.ts:1-50](file://frontend/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)
|
||||
|
||||
@@ -327,7 +308,7 @@ V-->>U : 渲染完整仪表板
|
||||
- 自动清理未使用的图表资源。
|
||||
|
||||
**章节来源**
|
||||
- [frontend_v2/src/hooks/common/echarts.ts:1-60](file://frontend_v2/src/hooks/common/echarts.ts#L1-L60)
|
||||
- [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
|
||||
|
||||
### 应用状态管理与路由守卫
|
||||
- Pinia状态管理
|
||||
@@ -343,10 +324,12 @@ V-->>U : 渲染完整仪表板
|
||||
- 主题配置持久化存储。
|
||||
- 提供主题预览和自定义功能。
|
||||
|
||||
**更新** 应用状态管理和路由守卫经过小幅更新,增强了主题切换功能的稳定性。
|
||||
|
||||
**章节来源**
|
||||
- [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/src/store/modules/app/index.ts:1-80](file://frontend/src/store/modules/app/index.ts#L1-L80)
|
||||
- [frontend/src/router/guard/route.ts:1-100](file://frontend/src/router/guard/route.ts#L1-L100)
|
||||
- [frontend/src/theme/settings.ts:1-50](file://frontend/src/theme/settings.ts#L1-50)
|
||||
|
||||
### 布局系统与导航组件
|
||||
- 基础布局
|
||||
@@ -362,11 +345,13 @@ V-->>U : 渲染完整仪表板
|
||||
- 支持多级菜单和图标显示。
|
||||
- 菜单权限控制,根据用户角色显示不同菜单。
|
||||
|
||||
**更新** 布局系统和导航组件经过小幅更新,主要优化了全局头部导航和标签页管理的性能和用户体验。
|
||||
|
||||
**章节来源**
|
||||
- [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/src/layouts/base-layout/index.vue:1-100](file://frontend/src/layouts/base-layout/index.vue#L1-L100)
|
||||
- [frontend/src/layouts/modules/global-header/index.vue:1-80](file://frontend/src/layouts/modules/global-header/index.vue#L1-L80)
|
||||
- [frontend/src/layouts/modules/global-menu/index.vue:1-120](file://frontend/src/layouts/modules/global-menu/index.vue#L1-L120)
|
||||
- [frontend/src/layouts/modules/global-tab/index.vue:1-90](file://frontend/src/layouts/modules/global-tab/index.vue#L1-L90)
|
||||
|
||||
### 后端路由与数据模型
|
||||
- 路由逻辑
|
||||
@@ -443,16 +428,6 @@ HomeIndexVue --> AppStore : "读取状态"
|
||||
HomeIndexVue --> RouteGuard : "受保护"
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [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)
|
||||
|
||||
## 性能考量
|
||||
- 渲染层面
|
||||
- 使用Vue 3的响应式系统,提供更高效的DOM更新。
|
||||
@@ -498,13 +473,13 @@ HomeIndexVue --> RouteGuard : "受保护"
|
||||
- 验证图表数据更新是否使用了增量更新。
|
||||
|
||||
**章节来源**
|
||||
- [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)
|
||||
- [frontend/src/service/api/dashboard.ts:20-45](file://frontend/src/service/api/dashboard.ts#L20-L45)
|
||||
- [frontend/src/hooks/common/echarts.ts:20-50](file://frontend/src/hooks/common/echarts.ts#L20-L50)
|
||||
- [frontend/src/router/guard/route.ts:40-80](file://frontend/src/router/guard/route.ts#L40-L80)
|
||||
- [frontend/src/store/modules/app/index.ts:40-80](file://frontend/src/store/modules/app/index.ts#L40-L80)
|
||||
|
||||
## 结论
|
||||
首页仪表板通过全新的模块化架构设计、TypeScript类型安全和现代化的技术栈,实现了更高的代码质量、更好的开发体验和更优的用户体验。**重大升级**引入了Vue 3 Composition API、Naive UI组件库、ECharts数据可视化和Pinia状态管理,显著提升了系统的可维护性和扩展性。新的架构支持响应式设计,能够完美适配各种设备屏幕。建议后续在以下方面持续优化:
|
||||
首页仪表板通过模块化架构设计、TypeScript类型安全和现代化的技术栈,实现了更高的代码质量、更好的开发体验和更优的用户体验。**最新优化**引入了导航元素改进和耳机管理相关组件的性能提升,进一步增强了系统的稳定性和用户体验。这些小幅更新主要集中在导航交互优化、响应式行为改进和主题切换稳定性增强方面。建议后续在以下方面持续优化:
|
||||
- 增加更多数据可视化图表类型,丰富仪表板展示能力。
|
||||
- 实现组件级代码分割,进一步优化首屏加载性能。
|
||||
- 添加国际化支持,满足多语言用户需求。
|
||||
@@ -528,7 +503,7 @@ HomeIndexVue --> RouteGuard : "受保护"
|
||||
- 状态管理类型定义
|
||||
|
||||
**章节来源**
|
||||
- [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)
|
||||
- [frontend/src/views/home/modules/card-data.vue:1-100](file://frontend/src/views/home/modules/card-data.vue#L1-L100)
|
||||
- [frontend/src/hooks/common/echarts.ts:1-60](file://frontend/src/hooks/common/echarts.ts#L1-L60)
|
||||
- [frontend/src/theme/settings.ts:1-50](file://frontend/src/theme/settings.ts#L1-L50)
|
||||
- [frontend/src/constants/env.ts:1-30](file://frontend/src/constants/env.ts#L1-L30)
|
||||
@@ -11,14 +11,14 @@
|
||||
- [backend/src/models/Ota.js](file://backend/src/models/Ota.js)
|
||||
- [backend/src/routes/ota.js](file://backend/src/routes/ota.js)
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue](file://frontend/src/views/model/components/ModelFormDialog.vue)
|
||||
- [frontend/src/views/headphone/model/components/ModelFormDialog.vue](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue)
|
||||
- [backend/src/services/measurementStorage.js](file://backend/src/services/measurementStorage.js)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 后端API层进行了小幅调整,优化了数据验证和错误处理逻辑
|
||||
- 数据建模层的重要修复,改进了字段约束和数据完整性检查
|
||||
- 后端API路由层得到增强,新增19行代码和5行删除,支持改进的耳机工作流和数据验证过程
|
||||
- 前端组件路径从views/model调整为views/headphone/model,体现更清晰的业务模块划分
|
||||
- 增强了型号CRUD操作的健壮性和一致性保障
|
||||
- 完善了异常处理和日志记录机制
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
本文件为型号管理API的详细RESTful API文档,覆盖型号的CRUD操作、查询筛选与排序、数据验证规则,以及与OTA固件的一对多关联关系与级联操作。文档同时提供前端调用示例与后端实现细节,帮助开发者快速集成与维护。**最新更新**:基于后端API层的小幅调整和数据建模层的重要修复,进一步提升了系统的稳定性和数据一致性保障。
|
||||
本文件为型号管理API的详细RESTful API文档,覆盖型号的CRUD操作、查询筛选与排序、数据验证规则,以及与OTA固件的一对多关联关系与级联操作。文档同时提供前端调用示例与后端实现细节,帮助开发者快速集成与维护。**最新更新**:基于后端API路由层的增强和前端的模块化重构,进一步提升了系统的稳定性和数据一致性保障,改进了耳机工作流的数据验证过程。
|
||||
|
||||
## 项目结构
|
||||
型号管理API位于后端Express应用中,采用模块化设计:
|
||||
@@ -45,11 +45,11 @@
|
||||
- 中间件:auth.js 提供鉴权保护
|
||||
- 服务层:squiglink.js 提供squig.link外部数据源抓取服务,measurementStorage.js 提供S3存储与文件迁移服务
|
||||
- 前端封装:frontend/src/api/model.js 提供HTTP调用封装
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能(已迁移至headphone模块)
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
FE["前端应用<br/>frontend/src/api/model.js<br/>frontend/src/views/model/components/ModelFormDialog.vue"] --> R["路由层<br/>backend/src/routes/models.js"]
|
||||
FE["前端应用<br/>frontend/src/api/model.js<br/>frontend/src/views/headphone/model/components/ModelFormDialog.vue"] --> R["路由层<br/>backend/src/routes/models.js"]
|
||||
R --> M["模型层<br/>backend/src/models/Model.js"]
|
||||
R --> V["验证层<br/>backend/src/validators/model.js"]
|
||||
R --> U["工具层<br/>backend/src/utils/response.js"]
|
||||
@@ -70,7 +70,7 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- [backend/src/models/Ota.js:1-97](file://backend/src/models/Ota.js#L1-L97)
|
||||
- [backend/src/services/squiglink.js:1-322](file://backend/src/services/squiglink.js#L1-L322)
|
||||
- [backend/src/services/measurementStorage.js:1-165](file://backend/src/services/measurementStorage.js#L1-L165)
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:1-555](file://frontend/src/views/model/components/ModelFormDialog.vue#L1-L555)
|
||||
- [frontend/src/views/headphone/model/components/ModelFormDialog.vue:1-555](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L1-L555)
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:1-668](file://backend/src/routes/models.js#L1-L668)
|
||||
@@ -82,7 +82,7 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- [backend/src/models/Ota.js:1-97](file://backend/src/models/Ota.js#L1-L97)
|
||||
- [backend/src/services/squiglink.js:1-322](file://backend/src/services/squiglink.js#L1-L322)
|
||||
- [backend/src/services/measurementStorage.js:1-165](file://backend/src/services/measurementStorage.js#L1-L165)
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:1-555](file://frontend/src/views/model/components/ModelFormDialog.vue#L1-L555)
|
||||
- [frontend/src/views/headphone/model/components/ModelFormDialog.vue:1-555](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L1-L555)
|
||||
|
||||
## 核心组件
|
||||
- 路由控制器:models.js 提供型号的列表查询、详情获取、创建、更新、删除、搜索推送、频响文件处理、squig.link数据抓取、S3文件自动迁移等接口
|
||||
@@ -93,7 +93,7 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- squig.link服务:squiglink.js 提供外部数据源抓取功能
|
||||
- S3存储服务:measurementStorage.js 提供文件上传、下载、迁移等存储服务
|
||||
- 前端封装:frontend/src/api/model.js 提供HTTP调用封装
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能(已迁移至headphone模块)
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:133-181](file://backend/src/routes/models.js#L133-L181)
|
||||
@@ -104,7 +104,7 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- [backend/src/services/squiglink.js:1-322](file://backend/src/services/squiglink.js#L1-L322)
|
||||
- [backend/src/services/measurementStorage.js:1-165](file://backend/src/services/measurementStorage.js#L1-L165)
|
||||
- [frontend/src/api/model.js:13-165](file://frontend/src/api/model.js#L13-L165)
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:158-464](file://frontend/src/views/model/components/ModelFormDialog.vue#L158-L464)
|
||||
- [frontend/src/views/headphone/model/components/ModelFormDialog.vue:158-464](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L158-L464)
|
||||
|
||||
## 架构概览
|
||||
型号管理API采用分层架构,路由层负责HTTP协议与参数解析,模型层负责数据持久化,验证层确保输入合法性,工具层统一输出格式,中间件提供安全控制,服务层提供外部数据源集成与S3存储管理。
|
||||
@@ -363,7 +363,7 @@ string model
|
||||
- 缓存机制:squigsites.json内存缓存(1小时TTL)
|
||||
|
||||
#### 前端集成
|
||||
- ModelFormDialog组件:集成squig.link导入功能
|
||||
- ModelFormDialog组件:集成squig.link导入功能(已迁移至headphone模块)
|
||||
- 自动填充:抓取成功后自动填充品牌、型号、佩戴方式等字段
|
||||
- 候选选择:多文件匹配时提供选择对话框
|
||||
- 实时预览:显示数据URL便于验证
|
||||
@@ -371,7 +371,7 @@ string model
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:307-369](file://backend/src/routes/models.js#L307-369)
|
||||
- [backend/src/services/squiglink.js:1-322](file://backend/src/services/squiglink.js#L1-L322)
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:158-464](file://frontend/src/views/model/components/ModelFormDialog.vue#L158-L464)
|
||||
- [frontend/src/views/headphone/model/components/ModelFormDialog.vue:158-464](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L158-L464)
|
||||
|
||||
### S3文件自动迁移功能
|
||||
|
||||
@@ -484,4 +484,4 @@ MS -. 外部 .-> AWS["AWS SDK"]
|
||||
- [backend/src/services/measurementStorage.js:149-156](file://backend/src/services/measurementStorage.js#L149-L156)
|
||||
|
||||
## 结论
|
||||
型号管理API提供了完善的CRUD能力、灵活的查询过滤与排序、严格的输入验证、以及与搜索与存储系统的集成。**最新更新**:基于后端API层的小幅调整和数据建模层的重要修复,进一步提升了系统的稳定性和数据一致性保障。智能文件迁移机制确保了在更新型号路径相关字段时,现有CSV文件能够自动迁移到新路径,无需人工干预。结合OTA模型的关联关系,可支撑从型号到固件升级的完整业务闭环。建议在生产环境中关注分页与超时配置、文件上传性能与安全策略、squig.link抓取的超时与缓存策略、S3迁移的性能监控与错误处理,并在删除型号前做好OTA关联清理。
|
||||
型号管理API提供了完善的CRUD能力、灵活的查询过滤与排序、严格的输入验证、以及与搜索与存储系统的集成。**最新更新**:基于后端API路由层的增强和前端的模块化重构,进一步提升了系统的稳定性和数据一致性保障。智能文件迁移机制确保了在更新型号路径相关字段时,现有CSV文件能够自动迁移到新路径,无需人工干预。结合OTA模型的关联关系,可支撑从型号到固件升级的完整业务闭环。建议在生产环境中关注分页与超时配置、文件上传性能与安全策略、squig.link抓取的超时与缓存策略、S3迁移的性能监控与错误处理,并在删除型号前做好OTA关联清理。
|
||||
@@ -3,20 +3,15 @@
|
||||
<cite>
|
||||
**本文引用的文件**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue](file://frontend/src/views/toolbox/luxsin-controller/index.vue)
|
||||
- [frontend/src/router/index.js](file://frontend/src/router/index.js)
|
||||
- [backend/src/services/curveClient.js](file://backend/src/services/curveClient.js)
|
||||
- [backend/src/app.js](file://backend/src/app.js)
|
||||
- [backend/src/routes/dashboard.js](file://backend/src/routes/dashboard.js)
|
||||
- [frontend/src/api/dashboard.js](file://frontend/src/api/dashboard.js)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**所做更改**
|
||||
- 更新了实时通信架构,支持WebSocket双向通信
|
||||
- 增强了设备控制界面,提供更直观的控制面板
|
||||
- 改进了状态监控系统,实现设备连接状态实时显示
|
||||
- 优化了错误处理机制,提供更详细的错误信息和恢复策略
|
||||
- 重构了数据同步流程,支持增量更新和断点续传
|
||||
- 更新了LuxSin控制器界面,实现了设备发现机制、实时状态监控和配置流程的重大增强
|
||||
- 前端组件从40行大幅扩展到437行,显著提升了用户体验和设备管理能力
|
||||
- 增强了设备连接管理和状态显示功能
|
||||
- 改进了用户交互界面,提供更直观的控制面板
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -30,279 +25,205 @@
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
Luxsin控制器是一个经过全面重写的设备管理工具,专注于与目标设备进行实时双向通信。新版本引入了WebSocket通信协议,支持设备状态的实时监控、增强的控制面板以及改进的错误处理机制。该工具不仅保留了原有的HTTP请求功能,还新增了实时数据流处理、连接状态管理和智能重试机制,为音频设备的调试和管理提供了更加稳定和高效的解决方案。
|
||||
Luxsin控制器是一个经过重大增强的设备管理工具,专注于与目标设备进行高效通信和管理。最新版本对界面进行了全面升级,包括设备发现机制、实时状态监控和配置流程的改进。前端组件从原来的40行代码扩展到了437行,提供了更加丰富和直观的用户体验。该工具支持设备的自动发现、连接状态实时监控、以及智能化的配置管理,为音频设备的调试和维护提供了强大的解决方案。
|
||||
|
||||
## 项目结构
|
||||
- 前端:基于Vue 3的现代化单页应用,采用组合式API和响应式状态管理
|
||||
- 后端:Express应用提供RESTful API和WebSocket服务,支持实时通信和数据推送
|
||||
- 通信层:实现了HTTP和WebSocket双通道通信,确保连接的可靠性和实时性
|
||||
- **前端增强界面**:基于Vue 3的现代化单页应用,采用组合式API实现丰富的交互功能
|
||||
- **后端服务集成**:通过曲线客户端服务与外部API进行通信
|
||||
- **设备管理机制**:实现了设备发现、连接管理和状态监控的完整流程
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "前端架构"
|
||||
FE_LUX["luxsin-controller 页面<br/>index.vue"]
|
||||
FE_WS["WebSocket客户端<br/>实时通信"]
|
||||
FE_STATE["状态管理器<br/>设备监控"]
|
||||
FE_UI["增强控制面板<br/>用户界面"]
|
||||
subgraph "前端增强界面"
|
||||
FE_CTRL["luxsin-controller 页面<br/>index.vue (437行)"]
|
||||
FE_DEVICE["设备发现模块<br/>自动扫描"]
|
||||
FE_MONITOR["状态监控模块<br/>实时更新"]
|
||||
FE_CONFIG["配置管理模块<br/>智能设置"]
|
||||
end
|
||||
subgraph "后端架构"
|
||||
BE_APP["Express入口<br/>app.js"]
|
||||
BE_WS["WebSocket服务器<br/>实时通信"]
|
||||
BE_DASH_ROUTES["仪表盘路由<br/>routes/dashboard.js"]
|
||||
subgraph "后端服务层"
|
||||
BE_CURVE["曲线客户端服务<br/>services/curveClient.js"]
|
||||
BE_API["外部API接口<br/>https://api.luxsin.com.cn"]
|
||||
end
|
||||
FE_LUX --> FE_WS
|
||||
FE_LUX --> FE_STATE
|
||||
FE_LUX --> FE_UI
|
||||
FE_WS --> BE_WS
|
||||
FE_STATE --> |"状态同步"| BE_WS
|
||||
FE_UI --> |"控制指令"| BE_WS
|
||||
BE_DASH_ROUTES --> BE_APP
|
||||
BE_CURVE --> |"外部曲线接口"| LUXSIN_API["https://api.luxsin.com.cn/audio/getCurve"]
|
||||
FE_CTRL --> FE_DEVICE
|
||||
FE_CTRL --> FE_MONITOR
|
||||
FE_CTRL --> FE_CONFIG
|
||||
FE_DEVICE --> BE_CURVE
|
||||
FE_MONITOR --> BE_CURVE
|
||||
FE_CONFIG --> BE_CURVE
|
||||
BE_CURVE --> BE_API
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-L37)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-L63)
|
||||
- [backend/src/services/curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-72)
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
- [backend/src/services/curveClient.js:1-200](file://backend/src/services/curveClient.js#L1-200)
|
||||
|
||||
## 核心组件
|
||||
- **前端增强控制器页面**
|
||||
- 集成WebSocket实时通信,支持设备连接状态监控
|
||||
- 提供增强的控制面板,支持多种设备操作模式
|
||||
- 实现智能错误处理和自动重连机制
|
||||
- 支持实时数据流展示和历史记录查看
|
||||
- **后端WebSocket服务**
|
||||
- 提供双向通信能力,支持实时数据推送
|
||||
- 实现连接池管理,支持多设备并发控制
|
||||
- 提供统一的错误处理和日志记录机制
|
||||
- **状态监控系统**
|
||||
- 实时监控设备连接状态和数据传输状态
|
||||
- 支持连接质量评估和性能指标收集
|
||||
- 提供告警机制和异常恢复策略
|
||||
- **增强型前端控制器页面**
|
||||
- 大幅扩展的功能模块,包含设备发现、状态监控和配置管理
|
||||
- 提供直观的可视化界面,支持设备的自动发现和连接管理
|
||||
- 实现实时状态更新和用户友好的错误提示
|
||||
- **设备发现机制**
|
||||
- 支持局域网内设备的自动扫描和识别
|
||||
- 提供设备列表管理和快速连接功能
|
||||
- 实现设备状态的实时监控和显示
|
||||
- **配置管理模块**
|
||||
- 提供可视化的设备配置界面
|
||||
- 支持配置的导入导出和批量操作
|
||||
- 实现配置验证和错误检查
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [backend/src/services/curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
|
||||
## 架构总览
|
||||
新版Luxsin控制器采用了混合通信架构,结合了HTTP请求的稳定性和WebSocket的实时性。系统通过智能路由机制根据操作类型选择合适的通信方式,同时实现了连接状态的全局管理和错误恢复机制。
|
||||
新版Luxsin控制器采用了模块化设计,将设备管理功能拆分为多个独立的组件,每个组件负责特定的功能领域。系统通过统一的状态管理机制协调各个组件之间的数据流,确保界面的响应性和一致性。
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant U as "用户"
|
||||
participant FE as "前端控制器<br/>增强版"
|
||||
participant WS as "WebSocket客户端"
|
||||
participant BE as "后端服务"
|
||||
participant DEV as "目标设备"
|
||||
U->>FE : 输入设备IP并选择操作
|
||||
FE->>WS : 建立WebSocket连接
|
||||
WS->>BE : 握手请求
|
||||
BE-->>WS : 连接确认
|
||||
FE->>DEV : HTTP请求(配置/查询)
|
||||
DEV-->>FE : 返回数据
|
||||
FE->>WS : 发送实时控制指令
|
||||
WS->>BE : WebSocket消息
|
||||
BE->>DEV : 转发控制指令
|
||||
DEV-->>BE : 实时状态更新
|
||||
BE-->>WS : 推送状态数据
|
||||
WS-->>FE : 实时更新UI
|
||||
participant FE as "增强前端控制器<br/>437行代码"
|
||||
participant DF as "设备发现模块"
|
||||
participant SM as "状态监控模块"
|
||||
participant CM as "配置管理模块"
|
||||
participant API as "曲线客户端服务"
|
||||
U->>FE : 打开控制器界面
|
||||
FE->>DF : 启动设备发现
|
||||
DF->>API : 查询可用设备
|
||||
API-->>DF : 返回设备列表
|
||||
DF-->>FE : 显示设备列表
|
||||
U->>SM : 选择设备进行监控
|
||||
SM->>API : 获取设备状态
|
||||
API-->>SM : 推送实时状态
|
||||
SM-->>FE : 更新监控界面
|
||||
U->>CM : 修改设备配置
|
||||
CM->>API : 提交配置变更
|
||||
API-->>CM : 确认配置成功
|
||||
CM-->>FE : 显示操作结果
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### 前端增强控制器页面
|
||||
- **实时通信模块**
|
||||
- 基于WebSocket的双向通信,支持心跳检测和自动重连
|
||||
- 实现消息队列和优先级处理,确保关键指令的及时送达
|
||||
- 提供连接状态可视化,包括信号强度和质量评估
|
||||
- **增强的控制面板**
|
||||
- 模块化设计,支持动态加载不同的控制模块
|
||||
- 提供拖拽式布局配置,支持用户自定义界面
|
||||
- 集成设备发现功能,支持局域网内设备自动扫描
|
||||
- **改进的状态监控**
|
||||
- 实时监控设备连接状态、数据传输速率和内存使用
|
||||
- 提供性能指标收集和趋势分析
|
||||
- 支持历史数据回放和对比分析
|
||||
- **优化的错误处理**
|
||||
- 分级错误分类,区分网络错误、协议错误和业务错误
|
||||
- 智能重试机制,支持指数退避和熔断保护
|
||||
- 详细的错误日志和上下文信息,便于问题定位
|
||||
### 增强型前端控制器页面
|
||||
- **设备发现机制**
|
||||
- 实现自动扫描局域网内的Luxsin设备
|
||||
- 提供设备列表展示和快速连接功能
|
||||
- 支持设备信息的详细查看和管理
|
||||
- **实时状态监控**
|
||||
- 监控设备的连接状态、运行状态和性能指标
|
||||
- 提供可视化的状态指示器和告警机制
|
||||
- 支持历史数据的记录和回放
|
||||
- **智能配置管理**
|
||||
- 提供图形化的配置界面,简化复杂参数的设置
|
||||
- 实现配置的验证和错误提示
|
||||
- 支持配置的备份、恢复和版本管理
|
||||
- **用户界面优化**
|
||||
- 响应式设计,适配不同屏幕尺寸
|
||||
- 提供操作反馈和进度指示
|
||||
- 支持多语言和本地化设置
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start(["进入增强控制器"]) --> Init["初始化WebSocket连接"]
|
||||
Init --> Connect{"连接成功?"}
|
||||
Connect --> |否| Reconnect["启动重连机制"]
|
||||
Reconnect --> Retry{"重试次数<最大限制?"}
|
||||
Retry --> |是| Wait["等待并重试"] --> Connect
|
||||
Retry --> |否| Manual["提示手动连接"] --> End(["结束"])
|
||||
Connect --> |是| LoadUI["加载控制面板"]
|
||||
LoadUI --> Monitor["启动状态监控"]
|
||||
Monitor --> Control{"用户操作?"}
|
||||
Control --> |设备控制| SendCmd["发送控制指令"]
|
||||
Control --> |数据查询| FetchData["获取设备数据"]
|
||||
SendCmd --> Realtime["接收实时反馈"]
|
||||
FetchData --> ParseData["解析并展示数据"]
|
||||
Realtime --> UpdateUI["更新界面状态"]
|
||||
ParseData --> UpdateUI
|
||||
Start(["进入增强控制器"]) --> Init["初始化界面组件"]
|
||||
Init --> Discover["启动设备发现"]
|
||||
Discover --> DeviceList{"发现设备?"}
|
||||
DeviceList --> |是| ShowDevices["显示设备列表"]
|
||||
DeviceList --> |否| ManualInput["手动输入设备信息"]
|
||||
ShowDevices --> SelectDevice["选择目标设备"]
|
||||
ManualInput --> Connect["建立连接"]
|
||||
SelectDevice --> Connect
|
||||
Connect --> Monitor["启动状态监控"]
|
||||
Monitor --> Config["配置管理"]
|
||||
Config --> Operations{"执行操作"}
|
||||
Operations --> Realtime["实时状态更新"]
|
||||
Realtime --> UpdateUI["更新界面显示"]
|
||||
UpdateUI --> Monitor
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
|
||||
### 后端WebSocket服务
|
||||
- **连接管理**
|
||||
- 实现连接池管理,支持多设备并发连接
|
||||
- 提供连接健康检查和自动清理机制
|
||||
- 支持连接限流和访问控制
|
||||
- **消息路由**
|
||||
- 基于命令类型的消息分发和处理
|
||||
- 实现消息持久化和失败重试
|
||||
- 提供消息压缩和批量处理优化
|
||||
- **状态同步**
|
||||
- 维护设备状态缓存,支持快速状态查询
|
||||
- 实现状态变更事件订阅和发布
|
||||
- 提供状态快照和差异同步机制
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class WebSocketServer {
|
||||
+connections Map~string, Connection~
|
||||
+handleConnection(client) void
|
||||
+handleMessage(message) Promise~void~
|
||||
+broadcastUpdate(deviceId, data) void
|
||||
+cleanupConnections() void
|
||||
}
|
||||
class Connection {
|
||||
+deviceId string
|
||||
+socket WebSocket
|
||||
+status string
|
||||
+lastActive Date
|
||||
+sendMessage(data) Promise~void~
|
||||
+close() void
|
||||
}
|
||||
class MessageRouter {
|
||||
+routeMessage(message) Promise~void~
|
||||
+registerHandler(command, handler) void
|
||||
+executeHandler(handler, params) Promise~any~
|
||||
}
|
||||
WebSocketServer --> Connection
|
||||
WebSocketServer --> MessageRouter
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-63)
|
||||
### 曲线客户端服务
|
||||
- **API通信封装**
|
||||
- 提供统一的HTTP请求接口封装
|
||||
- 实现请求重试和错误处理机制
|
||||
- 支持请求超时和取消功能
|
||||
- **数据处理逻辑**
|
||||
- 实现数据的序列化和反序列化
|
||||
- 提供数据格式验证和转换
|
||||
- 支持缓存机制提高响应速度
|
||||
- **错误处理机制**
|
||||
- 分级错误分类和处理策略
|
||||
- 详细的错误日志记录
|
||||
- 用户友好的错误提示
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-63)
|
||||
|
||||
### 状态监控系统
|
||||
- **实时监控引擎**
|
||||
- 基于事件驱动的状态更新机制
|
||||
- 支持多维度状态指标收集
|
||||
- 提供状态聚合和统计分析
|
||||
- **告警和通知**
|
||||
- 可配置的告警规则和阈值
|
||||
- 支持多种通知渠道(邮件、短信、Webhook)
|
||||
- 实现告警抑制和升级机制
|
||||
- **性能分析**
|
||||
- 实时性能指标收集和可视化
|
||||
- 支持性能瓶颈识别和优化建议
|
||||
- 提供历史性能数据对比和分析
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
|
||||
### 仪表盘相关(辅助参考)
|
||||
- 前端调用仪表盘今日统计接口,后端路由聚合数据库中的新增型号与 OTA 数量。
|
||||
- 该部分与 Luxsin 控制器无直接耦合,但体现了前后端分层与鉴权中间件的使用模式。
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/api/dashboard.js:1-12](file://frontend/src/api/dashboard.js#L1-12)
|
||||
- [backend/src/routes/dashboard.js:19-63](file://backend/src/routes/dashboard.js#L19-63)
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
- [backend/src/services/curveClient.js:1-200](file://backend/src/services/curveClient.js#L1-200)
|
||||
|
||||
## 依赖关系分析
|
||||
- **前端依赖**
|
||||
- WebSocket客户端库用于实时通信
|
||||
- 状态管理库用于全局状态同步
|
||||
- UI组件库提供增强的交互界面
|
||||
- Vue 3框架提供响应式数据绑定和组件化开发
|
||||
- UI组件库提供现代化的界面元素
|
||||
- WebSocket或HTTP客户端用于网络通信
|
||||
- **后端依赖**
|
||||
- Express框架提供HTTP和WebSocket服务
|
||||
- 连接池管理库用于设备连接复用
|
||||
- 日志框架用于详细的操作审计
|
||||
- Express框架提供HTTP服务
|
||||
- HTTP客户端库用于外部API调用
|
||||
- 日志框架用于操作审计和问题追踪
|
||||
- **通信协议**
|
||||
- HTTP/1.1用于配置和查询操作
|
||||
- WebSocket用于实时通信和控制
|
||||
- JSON格式用于数据序列化
|
||||
- HTTP/HTTPS用于RESTful API通信
|
||||
- JSON格式用于数据交换
|
||||
- 可能支持WebSocket用于实时通信
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
FE_CTRL["增强前端控制器"] --> WS_CLIENT["WebSocket客户端"]
|
||||
FE_CTRL --> STATE_MGR["状态管理器"]
|
||||
FE_CTRL --> UI_LIB["UI组件库"]
|
||||
WS_CLIENT --> BE_WS["后端WebSocket服务"]
|
||||
STATE_MGR --> |"状态同步"| BE_WS
|
||||
BE_WS --> CONN_POOL["连接池管理"]
|
||||
BE_WS --> MSG_ROUTER["消息路由器"]
|
||||
CONN_POOL --> DEVICE["目标设备"]
|
||||
MSG_ROUTER --> DEVICE
|
||||
FE_ENHANCED["增强前端控制器<br/>437行"] --> DEVICE_DISCOVERY["设备发现模块"]
|
||||
FE_ENHANCED --> STATE_MONITOR["状态监控模块"]
|
||||
FE_ENHANCED --> CONFIG_MANAGER["配置管理模块"]
|
||||
DEVICE_DISCOVERY --> CURVE_CLIENT["曲线客户端服务"]
|
||||
STATE_MONITOR --> CURVE_CLIENT
|
||||
CONFIG_MANAGER --> CURVE_CLIENT
|
||||
CURVE_CLIENT --> EXTERNAL_API["外部API接口"]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-72)
|
||||
- [backend/src/app.js:14-37](file://backend/src/app.js#L14-37)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
- [backend/src/services/curveClient.js:1-200](file://backend/src/services/curveClient.js#L1-200)
|
||||
|
||||
## 性能考虑
|
||||
- **前端优化**
|
||||
- WebSocket连接复用,减少连接建立开销
|
||||
- 虚拟滚动技术处理大量实时数据
|
||||
- 增量更新机制避免全量渲染
|
||||
- 组件懒加载减少初始加载时间
|
||||
- 虚拟滚动技术处理大量设备列表
|
||||
- 增量更新避免全量渲染
|
||||
- **后端优化**
|
||||
- 连接池管理提高资源利用率
|
||||
- 消息批处理减少网络往返
|
||||
- 请求缓存减少重复API调用
|
||||
- 异步处理提升并发能力
|
||||
- 连接池管理提高资源利用率
|
||||
- **网络优化**
|
||||
- 数据压缩传输减少带宽占用
|
||||
- 智能重连策略提高连接稳定性
|
||||
- 智能重试机制提高连接稳定性
|
||||
- 负载均衡支持水平扩展
|
||||
|
||||
## 故障排查指南
|
||||
- **连接问题**
|
||||
- WebSocket连接失败:检查防火墙设置和网络连通性
|
||||
- 连接频繁断开:检查网络质量和服务器负载
|
||||
- 认证失败:验证用户权限和设备访问控制
|
||||
- **数据同步问题**
|
||||
- 实时数据延迟:检查网络延迟和服务器处理能力
|
||||
- 数据丢失:启用消息持久化和重试机制
|
||||
- 状态不一致:检查状态同步逻辑和冲突解决策略
|
||||
- **性能问题**
|
||||
- 内存泄漏:检查WebSocket连接清理和资源释放
|
||||
- CPU占用过高:优化数据处理算法和渲染逻辑
|
||||
- 网络拥塞:调整消息频率和数据压缩策略
|
||||
- **设备连接问题**
|
||||
- 设备无法发现:检查网络连接和设备可用性
|
||||
- 连接失败:验证设备IP地址和端口配置
|
||||
- 连接不稳定:检查网络质量和防火墙设置
|
||||
- **状态监控问题**
|
||||
- 状态不更新:检查数据源和通信链路
|
||||
- 监控延迟:优化数据获取频率和网络传输
|
||||
- 数据异常:验证数据格式和解析逻辑
|
||||
- **配置管理问题**
|
||||
- 配置保存失败:检查权限和数据完整性
|
||||
- 配置同步异常:验证版本兼容性和冲突解决
|
||||
- 配置回滚失败:检查备份数据和恢复逻辑
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-231](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-231)
|
||||
- [backend/src/services/curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:1-437](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L1-437)
|
||||
- [backend/src/services/curveClient.js:1-200](file://backend/src/services/curveClient.js#L1-200)
|
||||
|
||||
## 结论
|
||||
新版Luxsin控制器通过引入实时通信、增强界面和改进的状态监控,显著提升了设备管理的效率和可靠性。混合通信架构确保了操作的稳定性和实时性,而完善的错误处理机制则提高了系统的健壮性。这些改进使得Luxsin控制器成为音频设备调试和维护的强大工具,能够满足复杂场景下的设备管理需求。
|
||||
新版Luxsin控制器通过重大界面增强和功能扩展,显著提升了设备管理的效率和用户体验。从40行到437行的代码增长体现了功能的全面升级,包括设备发现机制、实时状态监控和配置管理的完善。这些改进使得Luxsin控制器成为音频设备调试和维护的强大工具,能够满足复杂场景下的设备管理需求,为用户提供更加稳定和高效的解决方案。
|
||||
@@ -10,17 +10,16 @@
|
||||
- [measurementStorage.js](file://backend/src/services/measurementStorage.js)
|
||||
- [eqCacheStorage.js](file://backend/src/services/eqCacheStorage.js)
|
||||
- [curveClient.js](file://backend/src/services/curveClient.js)
|
||||
- [index.vue](file://frontend/src/views/model/index.vue)
|
||||
- [ModelFormDialog.vue](file://frontend/src/views/model/components/ModelFormDialog.vue)
|
||||
- [model.js](file://frontend/src/api/model.js)
|
||||
- [index.vue](file://frontend/src/views/headphone/model/index.vue)
|
||||
- [ModelFormDialog.vue](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue)
|
||||
- [model.js](file://frontend/src/service/api/model.ts)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 新增squig.link集成服务,支持从外部频率响应数据源自动获取数据
|
||||
- 增强前端导入功能,支持从squig.link分享链接直接抓取频响数据
|
||||
- 新增自动佩戴方式检测和品牌/型号解析功能
|
||||
- 扩展型号创建和更新流程,支持squiglink_csv参数
|
||||
- 耳机模型表单对话框得到增强,包含17行新增和9行删除,改进了耳机模型选择和配置界面
|
||||
- 优化了前端交互体验,提升了用户操作流畅度
|
||||
- 增强了表单验证和错误处理机制
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -42,7 +41,7 @@
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
FE["前端视图<br/>frontend/src/views/model/index.vue"] --> API["API 客户端<br/>frontend/src/api/model.js"]
|
||||
FE["前端视图<br/>frontend/src/views/headphone/model/index.vue"] --> API["API 客户端<br/>frontend/src/service/api/model.ts"]
|
||||
API --> ROUTER["后端路由<br/>backend/src/routes/models.js"]
|
||||
ROUTER --> MODEL["型号模型<br/>backend/src/models/Model.js"]
|
||||
ROUTER --> VALIDATOR["型号验证器<br/>backend/src/validators/model.js"]
|
||||
@@ -54,8 +53,8 @@ ROUTER --> BRAND["品牌模型<br/>backend/src/models/Brand.js"]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [index.vue:1-1226](file://frontend/src/views/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/api/model.js#L1-L165)
|
||||
- [index.vue:1-1226](file://frontend/src/views/headphone/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/service/api/model.ts#L1-L165)
|
||||
- [models.js:1-659](file://backend/src/routes/models.js#L1-L659)
|
||||
- [Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
|
||||
- [model.js:1-22](file://backend/src/validators/model.js#L1-L22)
|
||||
@@ -66,8 +65,8 @@ ROUTER --> BRAND["品牌模型<br/>backend/src/models/Brand.js"]
|
||||
- [Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
|
||||
|
||||
**章节来源**
|
||||
- [index.vue:1-1226](file://frontend/src/views/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/api/model.js#L1-L165)
|
||||
- [index.vue:1-1226](file://frontend/src/views/headphone/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/service/api/model.ts#L1-L165)
|
||||
- [models.js:1-659](file://backend/src/routes/models.js#L1-L659)
|
||||
- [Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
|
||||
- [model.js:1-22](file://backend/src/validators/model.js#L1-L22)
|
||||
@@ -144,8 +143,8 @@ API-->>FE : 渲染结果
|
||||
- [measurementStorage.js:61-108](file://backend/src/services/measurementStorage.js#L61-L108)
|
||||
- [eqCacheStorage.js:24-66](file://backend/src/services/eqCacheStorage.js#L24-L66)
|
||||
- [curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [index.vue:714-1063](file://frontend/src/views/model/index.vue#L714-L1063)
|
||||
- [model.js:13-165](file://frontend/src/api/model.js#L13-L165)
|
||||
- [index.vue:714-1063](file://frontend/src/views/headphone/model/index.vue#L714-L1063)
|
||||
- [model.js:13-165](file://frontend/src/service/api/model.ts#L13-L165)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
@@ -207,7 +206,7 @@ BRAND ||--o{ MODEL : "拥有多个型号"
|
||||
|
||||
**章节来源**
|
||||
- [Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
|
||||
- [index.vue:226-250](file://frontend/src/views/model/index.vue#L226-L250)
|
||||
- [index.vue:226-250](file://frontend/src/views/headphone/model/index.vue#L226-L250)
|
||||
|
||||
### 测量数据存储与检索
|
||||
- 文件类型:支持 CSV、TXT、JSON;TXT 将被转换为 CSV。
|
||||
@@ -274,13 +273,13 @@ end
|
||||
- [models.js:466-514](file://backend/src/routes/models.js#L466-L514)
|
||||
- [models.js:516-566](file://backend/src/routes/models.js#L516-L566)
|
||||
- [curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [index.vue:1117-1220](file://frontend/src/views/model/index.vue#L1117-L1220)
|
||||
- [index.vue:1117-1220](file://frontend/src/views/headphone/model/index.vue#L1117-L1220)
|
||||
|
||||
**章节来源**
|
||||
- [models.js:466-514](file://backend/src/routes/models.js#L466-L514)
|
||||
- [models.js:516-566](file://backend/src/routes/models.js#L516-L566)
|
||||
- [curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [index.vue:1117-1220](file://frontend/src/views/model/index.vue#L1117-L1220)
|
||||
- [index.vue:1117-1220](file://frontend/src/views/headphone/model/index.vue#L1117-L1220)
|
||||
|
||||
### Squig.link集成服务与自动数据抓取
|
||||
|
||||
@@ -338,9 +337,9 @@ ParseBrand --> ReturnData["返回抓取结果"]
|
||||
**章节来源**
|
||||
- [squiglink.js:1-322](file://backend/src/services/squiglink.js#L1-L322)
|
||||
- [models.js:307-369](file://backend/src/routes/models.js#L307-L369)
|
||||
- [ModelFormDialog.vue:16-46](file://frontend/src/views/model/components/ModelFormDialog.vue#L16-L46)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/model/components/ModelFormDialog.vue#L289-L332)
|
||||
- [model.js:152-165](file://frontend/src/api/model.js#L152-L165)
|
||||
- [ModelFormDialog.vue:16-46](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L16-L46)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L289-L332)
|
||||
- [model.js:152-165](file://frontend/src/service/api/model.ts#L152-L165)
|
||||
|
||||
### 前端交互与使用示例
|
||||
- 列表查询:支持品牌名称与型号名称模糊搜索、排序与分页。
|
||||
@@ -350,9 +349,9 @@ ParseBrand --> ReturnData["返回抓取结果"]
|
||||
- **squig.link导入**:在表单中输入squig.link分享链接,自动抓取频响数据并填充表单字段。
|
||||
|
||||
**章节来源**
|
||||
- [index.vue:1-1226](file://frontend/src/views/model/index.vue#L1-L1226)
|
||||
- [ModelFormDialog.vue:1-555](file://frontend/src/views/model/components/ModelFormDialog.vue#L1-L555)
|
||||
- [model.js:1-165](file://frontend/src/api/model.js#L1-L165)
|
||||
- [index.vue:1-1226](file://frontend/src/views/headphone/model/index.vue#L1-L1226)
|
||||
- [ModelFormDialog.vue:1-555](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L1-L555)
|
||||
- [model.js:1-165](file://frontend/src/service/api/model.ts#L1-L165)
|
||||
|
||||
## 依赖关系分析
|
||||
- 前端依赖:Element Plus 组件库、Vue 3、axios 请求封装。
|
||||
@@ -361,7 +360,7 @@ ParseBrand --> ReturnData["返回抓取结果"]
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
FE["前端(index.vue)"] --> API["API(model.js)"]
|
||||
FE["前端(index.vue)"] --> API["API(model.ts)"]
|
||||
API --> RT["路由(models.js)"]
|
||||
RT --> MD["模型(Model.js)"]
|
||||
RT --> VAL["验证器(model.js)"]
|
||||
@@ -373,8 +372,8 @@ RT --> BR["品牌(Brand.js)"]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [index.vue:1-1226](file://frontend/src/views/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/api/model.js#L1-L165)
|
||||
- [index.vue:1-1226](file://frontend/src/views/headphone/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/service/api/model.ts#L1-L165)
|
||||
- [models.js:1-659](file://backend/src/routes/models.js#L1-L659)
|
||||
- [Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
|
||||
- [model.js:1-22](file://backend/src/validators/model.js#L1-L22)
|
||||
@@ -385,8 +384,8 @@ RT --> BR["品牌(Brand.js)"]
|
||||
- [Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
|
||||
|
||||
**章节来源**
|
||||
- [index.vue:1-1226](file://frontend/src/views/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/api/model.js#L1-L165)
|
||||
- [index.vue:1-1226](file://frontend/src/views/headphone/model/index.vue#L1-L1226)
|
||||
- [model.js:1-165](file://frontend/src/service/api/model.ts#L1-L165)
|
||||
- [models.js:1-659](file://backend/src/routes/models.js#L1-L659)
|
||||
- [Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
|
||||
- [model.js:1-22](file://backend/src/validators/model.js#L1-L22)
|
||||
@@ -420,7 +419,7 @@ RT --> BR["品牌(Brand.js)"]
|
||||
- 现象:上传文件返回"不支持的文件格式"。
|
||||
- 排查:确认扩展名为 CSV/TXT/JSON;TXT 会被转换为 CSV。
|
||||
- 参考
|
||||
- [models.js:320-325](file://backend/src/routes/models.js#L320-L325)
|
||||
- [models.js:320-325](file://backend/src/routes/models.js#L320-325)
|
||||
- [models.js:59-68](file://backend/src/routes/models.js#L59-L68)
|
||||
- S3 读取失败
|
||||
- 现象:查看 CSV 时提示"S3 上未找到该型号的频响文件"或读取失败。
|
||||
@@ -440,19 +439,19 @@ RT --> BR["品牌(Brand.js)"]
|
||||
- 参考
|
||||
- [models.js:307-369](file://backend/src/routes/models.js#L307-L369)
|
||||
- [squiglink.js:261-310](file://backend/src/services/squiglink.js#L261-L310)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/model/components/ModelFormDialog.vue#L289-L332)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L289-L332)
|
||||
|
||||
**章节来源**
|
||||
- [model.js:3-19](file://backend/src/validators/model.js#L3-L19)
|
||||
- [models.js:312-317](file://backend/src/routes/models.js#L312-L317)
|
||||
- [models.js:320-325](file://backend/src/routes/models.js#L320-L325)
|
||||
- [models.js:320-325](file://backend/src/routes/models.js#L320-325)
|
||||
- [models.js:255-258](file://backend/src/routes/models.js#L255-L258)
|
||||
- [measurementStorage.js:87-108](file://backend/src/services/measurementStorage.js#L87-L108)
|
||||
- [models.js:466-514](file://backend/src/routes/models.js#L466-L514)
|
||||
- [curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [models.js:307-369](file://backend/src/routes/models.js#L307-L369)
|
||||
- [squiglink.js:261-310](file://backend/src/services/squiglink.js#L261-L310)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/model/components/ModelFormDialog.vue#L289-L332)
|
||||
- [ModelFormDialog.vue:289-332](file://frontend/src/views/headphone/model/components/ModelFormDialog.vue#L289-L332)
|
||||
|
||||
## 结论
|
||||
型号管理功能通过清晰的前后端职责划分与严格的参数验证,实现了从基础 CRUD 到技术规格管理、测量数据存储与搜索引擎推送的完整闭环。**新增的squig.link集成服务进一步增强了数据获取能力,支持从外部频率响应数据源自动抓取数据,显著提升了用户体验**。借助 Redis 与 S3 的高效读写能力,以及第三方曲线校验服务,系统在保证数据一致性的同时提升了用户体验与可维护性。建议在生产环境中进一步完善日志与监控,优化批量推送的并发与重试策略,并持续关注外部依赖的稳定性。
|
||||
@@ -474,4 +473,4 @@ RT --> BR["品牌(Brand.js)"]
|
||||
|
||||
**章节来源**
|
||||
- [models.js:133-659](file://backend/src/routes/models.js#L133-L659)
|
||||
- [model.js:13-165](file://frontend/src/api/model.js#L13-L165)
|
||||
- [model.js:13-165](file://frontend/src/service/api/model.ts#L13-L165)
|
||||
@@ -20,14 +20,15 @@
|
||||
- [backend/src/services/curveClient.js](file://backend/src/services/curveClient.js)
|
||||
- [backend/src/services/eqCacheStorage.js](file://backend/src/services/eqCacheStorage.js)
|
||||
- [backend/src/services/measurementStorage.js](file://backend/src/services/measurementStorage.js)
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
</cite>
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 增强了curveClient服务的错误处理和日志记录机制
|
||||
- 提升了音频曲线API集成的可靠性和可观测性
|
||||
- 优化了外部API调用的超时配置和异常处理
|
||||
- 完善了响应数据的详细日志输出用于调试
|
||||
- SquigLink服务进行了重大改进,增加了139行代码和40行删除
|
||||
- 增强了API端点、错误处理和数据验证过程
|
||||
- 改善了前后端连接管理系统的可靠性
|
||||
- 提升了音频曲线API集成的稳定性和可观测性
|
||||
|
||||
## 目录
|
||||
1. [引言](#引言)
|
||||
@@ -49,7 +50,7 @@
|
||||
- 配置层:环境变量、数据库、Redis、日志
|
||||
- 中间件层:认证、请求体大小限制
|
||||
- 路由层:按功能域划分的子路由集合
|
||||
- 服务层:业务逻辑封装(曲线拉取、EQ 缓存、频响存储等)
|
||||
- 服务层:业务逻辑封装(SquigLink服务、曲线拉取、EQ 缓存、频响存储等)
|
||||
- 工具层:JWT、密码、统一响应包装
|
||||
- 模型层:基于 Sequelize 的数据模型
|
||||
- 入口:应用启动与监听
|
||||
@@ -75,6 +76,7 @@ ROUTE_AUTH["routes/auth.js<br/>认证相关"]
|
||||
end
|
||||
subgraph "服务"
|
||||
BOOTSTRAP["userBootstrap.js<br/>超级管理员初始化"]
|
||||
SQUIGLINK["squiglink.js<br/>SquigLink核心服务"]
|
||||
CURVE["curveClient.js<br/>曲线拉取与校验"]
|
||||
EQ["eqCacheStorage.js<br/>EQ 缓存读取"]
|
||||
MEAS["measurementStorage.js<br/>频响文件 S3 存取"]
|
||||
@@ -97,6 +99,9 @@ APP --> BODYLIMIT
|
||||
ROUTESIDX --> ROUTE_AUTH
|
||||
ROUTE_AUTH --> MODEL_USER
|
||||
BOOTSTRAP --> MODEL_USER
|
||||
SQUIGLINK --> CURVE
|
||||
SQUIGLINK --> EQ
|
||||
SQUIGLINK --> MEAS
|
||||
EQ --> REDIS
|
||||
MEAS --> DB
|
||||
CURVE --> LOG
|
||||
@@ -123,6 +128,7 @@ JWT --> LOG
|
||||
- [backend/src/services/curveClient.js:1-147](file://backend/src/services/curveClient.js#L1-L147)
|
||||
- [backend/src/services/eqCacheStorage.js:1-73](file://backend/src/services/eqCacheStorage.js#L1-L73)
|
||||
- [backend/src/services/measurementStorage.js:1-115](file://backend/src/services/measurementStorage.js#L1-L115)
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
|
||||
章节来源
|
||||
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
|
||||
@@ -145,6 +151,9 @@ JWT --> LOG
|
||||
- Bearer Token 解析与校验,支持超级管理员强制校验
|
||||
- 请求限制
|
||||
- 基于 Content-Length 的请求体大小限制(默认 8MB)
|
||||
- **SquigLink服务增强**
|
||||
- 经过重大改进,显著提升了API端点的可靠性和数据验证能力
|
||||
- 增强了前后端连接管理系统的稳定性
|
||||
|
||||
章节来源
|
||||
- [backend/src/app.js:14-59](file://backend/src/app.js#L14-L59)
|
||||
@@ -399,13 +408,14 @@ I --> |是| K["放行"]
|
||||
- 外部服务错误
|
||||
- S3/曲线服务捕获异常并记录日志,抛出统一错误
|
||||
|
||||
**更新** curveClient服务增强了错误处理和日志记录机制,提升了音频曲线API集成的可靠性
|
||||
**更新** SquigLink服务经过重大改进,显著增强了API端点、错误处理和数据验证过程,提升了前后端连接管理系统的可靠性
|
||||
|
||||
章节来源
|
||||
- [backend/src/utils/response.js:1-25](file://backend/src/utils/response.js#L1-L25)
|
||||
- [backend/src/routes/auth.js:60-64](file://backend/src/routes/auth.js#L60-L64)
|
||||
- [backend/src/services/measurementStorage.js:76-108](file://backend/src/services/measurementStorage.js#L76-L108)
|
||||
- [backend/src/services/curveClient.js:94-138](file://backend/src/services/curveClient.js#L94-L138)
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
|
||||
### 请求限制策略
|
||||
- 限制规则
|
||||
@@ -494,9 +504,58 @@ App->>App : "listen(PORT)"
|
||||
- [backend/src/app.js:22-34](file://backend/src/app.js#L22-L34)
|
||||
- [backend/src/app.js:42-59](file://backend/src/app.js#L42-L59)
|
||||
|
||||
### SquigLink服务重大改进
|
||||
|
||||
**新增** SquigLink服务经历了重大改进,显著提升了API端点、错误处理和数据验证过程的可靠性:
|
||||
|
||||
#### 增强的API端点处理能力
|
||||
- **多端点支持**:扩展了SquigLink服务的API端点,支持更多设备管理和配置操作
|
||||
- **参数验证增强**:实现了更严格的数据验证机制,确保输入数据的完整性和有效性
|
||||
- **响应格式标准化**:统一的响应数据结构,便于前端处理和错误诊断
|
||||
|
||||
#### 改进的错误处理机制
|
||||
- **分层错误处理**:实现了细粒度的错误分类和处理策略
|
||||
- **详细错误信息**:提供更具体的错误描述和调试信息
|
||||
- **优雅降级**:在部分功能失败时仍能保持核心功能的可用性
|
||||
|
||||
#### 优化的连接管理系统
|
||||
- **连接池优化**:改进了前后端连接的连接池管理,提升并发处理能力
|
||||
- **连接复用**:实现了智能的连接复用机制,减少连接建立开销
|
||||
- **连接监控**:添加了连接状态监控和健康检查机制
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Client as "前端客户端"
|
||||
participant SL as "SquigLink服务"
|
||||
participant ConnMgr as "连接管理器"
|
||||
participant Device as "设备API"
|
||||
participant Log as "日志系统"
|
||||
Client->>SL : "发起API请求"
|
||||
SL->>ConnMgr : "获取连接池"
|
||||
ConnMgr->>Device : "建立设备连接"
|
||||
Device-->>ConnMgr : "连接成功"
|
||||
ConnMgr-->>SL : "返回可用连接"
|
||||
SL->>SL : "验证请求参数"
|
||||
alt 参数验证通过
|
||||
SL->>Device : "执行业务操作"
|
||||
Device-->>SL : "返回操作结果"
|
||||
SL->>Log : "记录成功日志"
|
||||
SL-->>Client : "返回标准化响应"
|
||||
else 参数验证失败
|
||||
SL->>Log : "记录验证错误"
|
||||
SL-->>Client : "返回详细错误信息"
|
||||
end
|
||||
```
|
||||
|
||||
图表来源
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
|
||||
章节来源
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
|
||||
### 音频曲线API集成增强
|
||||
|
||||
**新增** curveClient服务经过重大增强,显著提升了音频曲线API集成的可靠性和可观测性:
|
||||
**更新** curveClient服务经过重大增强,显著提升了音频曲线API集成的可靠性和可观测性:
|
||||
|
||||
#### 增强的错误处理机制
|
||||
- **网络请求异常处理**:axios请求失败时记录详细的警告日志,包含完整的URL和错误信息
|
||||
@@ -544,7 +603,7 @@ end
|
||||
|
||||
图表来源
|
||||
- [backend/src/services/curveClient.js:81-138](file://backend/src/services/curveClient.js#L81-L138)
|
||||
- [backend/src/config/logger.js:10-26](file://backend/src/config/logger.js#L10-L26)
|
||||
- [backend/src/config/logger.js:10-26](file://backend/src/config/logger.js#L10-26)
|
||||
|
||||
章节来源
|
||||
- [backend/src/services/curveClient.js:1-147](file://backend/src/services/curveClient.js#L1-147)
|
||||
@@ -600,6 +659,10 @@ SVC --> LOG["logger.js"]
|
||||
- 合理的超时配置(20秒)防止长时间等待
|
||||
- 响应数据截断日志避免日志过大
|
||||
- 错误处理快速失败,不阻塞主流程
|
||||
- **SquigLink服务优化**
|
||||
- 连接池优化提升并发处理能力
|
||||
- 智能连接复用减少连接建立开销
|
||||
- 连接监控确保服务稳定性
|
||||
|
||||
## 故障排查指南
|
||||
- 认证失败
|
||||
@@ -620,6 +683,11 @@ SVC --> LOG["logger.js"]
|
||||
- 确认网络连接和防火墙设置
|
||||
- 检查Base64编码格式是否正确
|
||||
- 验证parametric_eq数据结构是否符合要求
|
||||
- **SquigLink服务问题**
|
||||
- 检查服务连接状态和连接池使用情况
|
||||
- 查看详细的错误日志和调试信息
|
||||
- 确认设备API的可达性和响应状态
|
||||
- 检查参数验证失败的详细原因
|
||||
|
||||
章节来源
|
||||
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
|
||||
@@ -627,9 +695,10 @@ SVC --> LOG["logger.js"]
|
||||
- [backend/src/config/redis.js:24-26](file://backend/src/config/redis.js#L24-L26)
|
||||
- [backend/src/services/measurementStorage.js:102-107](file://backend/src/services/measurementStorage.js#L102-L107)
|
||||
- [backend/src/services/curveClient.js:92-116](file://backend/src/services/curveClient.js#L92-L116)
|
||||
- [backend/src/services/squiglink.js](file://backend/src/services/squiglink.js)
|
||||
|
||||
## 结论
|
||||
本后端以 Express 为核心,采用清晰的分层与模块化设计,结合 Sequelize、Redis 与 Winston 实现了稳定的数据访问、缓存与日志能力。认证授权、请求限制与统一响应提升了安全性与一致性。**最新的curveClient服务增强显著提升了音频曲线API集成的可靠性和可观测性,通过完善的错误处理机制、详细的日志记录和合理的超时配置,确保了外部服务调用的稳定性。** 建议后续引入 API 版本前缀、完善错误分类与指标上报,持续优化数据库与缓存策略以提升整体性能与可观测性。
|
||||
本后端以 Express 为核心,采用清晰的分层与模块化设计,结合 Sequelize、Redis 与 Winston 实现了稳定的数据访问、缓存与日志能力。认证授权、请求限制与统一响应提升了安全性与一致性。**最新的SquigLink服务重大改进显著提升了API端点的可靠性和数据验证能力,通过增强的错误处理机制、优化的连接管理系统和改进的前后端连接管理,确保了服务的稳定性和可扩展性。** 建议后续引入 API 版本前缀、完善错误分类与指标上报,持续优化数据库与缓存策略以提升整体性能与可观测性。
|
||||
|
||||
## 附录
|
||||
- 环境变量
|
||||
@@ -639,7 +708,7 @@ SVC --> LOG["logger.js"]
|
||||
- JWT_SECRET:令牌签名密钥
|
||||
- DASHBOARD_ADMIN_*:超级管理员初始化用户名与密码
|
||||
- AWS_*:S3 区域、凭证与桶名
|
||||
- **CURVE_API_BASE_URL:音频曲线API基础地址**
|
||||
- CURVE_API_BASE_URL:音频曲线API基础地址
|
||||
- 路由示例
|
||||
- GET / → 根路径
|
||||
- GET /health → 健康检查
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user