全新的前端ui
This commit is contained in:
@@ -253,13 +253,13 @@ Note over TV : 工具箱路由支持 tools 图标
|
||||
|
||||
**图表来源**
|
||||
- [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
|
||||
- [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-L191)
|
||||
- [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-191)
|
||||
- [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)
|
||||
- [index.js:68-72](file://frontend/src/router/index.js#L68-L72)
|
||||
|
||||
**章节来源**
|
||||
- [TabsView.vue:88-103](file://frontend/src/components/TabsView.vue#L88-L103)
|
||||
- [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-L191)
|
||||
- [TabsView.vue:180-191](file://frontend/src/components/TabsView.vue#L180-191)
|
||||
- [TabsView.vue:193-200](file://frontend/src/components/TabsView.vue#L193-L200)
|
||||
- [index.js:68-72](file://frontend/src/router/index.js#L68-L72)
|
||||
|
||||
|
||||
@@ -17,12 +17,10 @@
|
||||
|
||||
## 更新摘要
|
||||
**所做更改**
|
||||
- 新增了工具箱功能模块,包含Tools和Operation图标的完整支持
|
||||
- 在侧边栏导航中添加了"工具箱"分类菜单项
|
||||
- 实现了luxsin-controller工具页面,提供设备数据同步功能
|
||||
- 更新了路由配置以支持新的工具箱路径
|
||||
- 增强了轨道导航系统,添加工具箱快捷访问入口
|
||||
- 完善了面包屑导航对工具箱页面的支持
|
||||
- 主布局组件进行了平衡的重构工作,改进了整体应用外壳的体验
|
||||
- 优化了布局组件的架构设计,提升了性能和可维护性
|
||||
- 增强了响应式设计和用户体验
|
||||
- 重构了导航系统结构,提高了代码组织效率
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -39,18 +37,15 @@
|
||||
|
||||
本项目采用现代化的Vue 3 + Element Plus前端技术栈构建,布局组件是整个系统的骨架结构,负责组织页面的整体架构。该布局组件实现了响应式设计,支持桌面端和移动端的自适应布局,提供了完整的导航体系和主题适配功能。
|
||||
|
||||
**最新更新亮点** 布局组件已全面升级为玻璃拟态设计风格:
|
||||
- **沉浸式背景系统**:动态光球动画营造深邃的宇宙空间感
|
||||
- **悬浮式侧边栏**:采用backdrop-filter实现真实的毛玻璃效果
|
||||
- **三层导航架构**:轨道导航 + 分类菜单 + 面包屑导航
|
||||
- **智能交互体验**:自动展开、悬停反馈、流畅过渡动画
|
||||
- **完整主题系统**:基于CSS变量的深色宇宙主题设计
|
||||
- **工具箱功能模块**:新增工具箱分类,集成设备管理工具
|
||||
**最新更新亮点** 主布局组件经过平衡重构,显著提升了整体应用外壳体验:
|
||||
- **优化的架构设计**:重构了组件结构,提升了代码可维护性和性能
|
||||
- **改进的用户体验**:增强了交互流畅度和响应速度
|
||||
- **增强的可配置性**:提供了更灵活的布局定制选项
|
||||
- **更好的兼容性**:优化了跨浏览器支持和移动端适配
|
||||
|
||||
布局组件的核心特色包括:
|
||||
- **玻璃拟态设计**:backdrop-filter模糊效果与半透明背景
|
||||
- **动态背景系统**:三个渐变光球的动画效果
|
||||
- **智能侧边栏**:支持展开/收起的玻璃面板,具备自动展开功能
|
||||
- **模块化架构**:清晰的组件分离和职责划分
|
||||
- **智能侧边栏**:支持展开/收起的动态布局
|
||||
- **标签页管理**:多标签页浏览和持久化存储
|
||||
- **深色主题**:基于CSS变量的主题系统
|
||||
- **响应式适配**:针对不同屏幕尺寸的优化布局
|
||||
@@ -219,8 +214,8 @@ View-->>User : 显示工具箱功能
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/layout/index.vue:208-210](file://frontend/src/layout/index.vue#L208-L210)
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-L72)
|
||||
- [frontend/src/layout/index.vue:208-210](file://frontend/src/layout/index.vue#L208-210)
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-72)
|
||||
|
||||
### 数据流架构
|
||||
|
||||
@@ -246,11 +241,11 @@ T --> U[页面跳转]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/layout/index.vue:185-199](file://frontend/src/layout/index.vue#L185-L199)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:126-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L126-L168)
|
||||
- [frontend/src/layout/index.vue:185-199](file://frontend/src/layout/index.vue#L185-199)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:126-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L126-168)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/layout/index.vue:185-199](file://frontend/src/layout/index.vue#L185-L199)
|
||||
- [frontend/src/layout/index.vue:185-199](file://frontend/src/layout/index.vue#L185-199)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
@@ -403,7 +398,7 @@ K --> L[/toolbox/luxsin-controller]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-L72)
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-72)
|
||||
|
||||
#### 路由元数据配置
|
||||
|
||||
@@ -415,7 +410,7 @@ K --> L[/toolbox/luxsin-controller]
|
||||
- **懒加载**:支持组件按需加载
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-L72)
|
||||
- [frontend/src/router/index.js:68-72](file://frontend/src/router/index.js#L68-72)
|
||||
|
||||
### 导航分类重构
|
||||
|
||||
@@ -456,7 +451,7 @@ G --> L[openedMenus = []]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/layout/index.vue:185-191](file://frontend/src/layout/index.vue#L185-L191)
|
||||
- [frontend/src/layout/index.vue:185-191](file://frontend/src/layout/index.vue#L185-191)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/layout/index.vue:50-101](file://frontend/src/layout/index.vue#L50-L101)
|
||||
@@ -536,7 +531,7 @@ O --> P[沉浸式体验]
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
|
||||
- [frontend/src/styles/lux-theme.css:98-129](file://frontend/src/styles/lux-theme.css#L98-129)
|
||||
- [frontend/src/styles/lux-theme.css:98-129](file://frontend/src/styles/lux-theme.css#L98-L129)
|
||||
|
||||
#### 样式覆盖策略
|
||||
|
||||
@@ -592,7 +587,7 @@ AA --> AB[Visual Consistency]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/layout/index.vue:163-171](file://frontend/src/layout/index.vue#L163-L171)
|
||||
- [frontend/src/layout/index.vue:163-171](file://frontend/src/layout/index.vue#L163-171)
|
||||
- [frontend/src/router/index.js:1-5](file://frontend/src/router/index.js#L1-L5)
|
||||
|
||||
### 外部依赖分析
|
||||
@@ -647,7 +642,7 @@ S --> T[按需资源加载]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/components/TabsView.vue:47-49](file://frontend/src/components/TabsView.vue#L47-L49)
|
||||
- [frontend/src/components/TabsView.vue:47-49](file://frontend/src/components/TabsView.vue#L47-49)
|
||||
|
||||
## 故障排除指南
|
||||
|
||||
@@ -724,9 +719,9 @@ S --> T[按需资源加载]
|
||||
**解决**:减少动画帧率或使用CSS动画替代JS动画
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/layout/index.vue:208-210](file://frontend/src/layout/index.vue#L208-L210)
|
||||
- [frontend/src/layout/index.vue:185-191](file://frontend/src/layout/index.vue#L185-L191)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:126-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L126-L168)
|
||||
- [frontend/src/layout/index.vue:208-210](file://frontend/src/layout/index.vue#L208-210)
|
||||
- [frontend/src/layout/index.vue:185-191](file://frontend/src/layout/index.vue#L185-191)
|
||||
- [frontend/src/views/toolbox/luxsin-controller/index.vue:126-168](file://frontend/src/views/toolbox/luxsin-controller/index.vue#L126-168)
|
||||
|
||||
## 结论
|
||||
|
||||
@@ -742,15 +737,10 @@ S --> T[按需资源加载]
|
||||
8. **工具箱集成**:完整的设备管理工具模块,支持数据同步操作
|
||||
|
||||
**最新更新亮点**:
|
||||
- **玻璃拟态设计系统**:全面的backdrop-filter效果和半透明背景
|
||||
- **动态背景光球**:三个渐变光球的动画效果营造沉浸感
|
||||
- **悬浮式侧边栏**:独立的玻璃面板设计,支持智能展开/收起
|
||||
- **简化的导航结构**:从六个独立菜单项重构为四个主要分类,提升了导航效率
|
||||
- **创新的轨道导航**:轻量化的图标导航条,提供快速访问入口
|
||||
- **智能的用户体验**:点击轨道图标自动展开侧边栏,减少操作步骤
|
||||
- **灵活的导航实现**:采用普通锚元素配合点击处理器,提供更灵活的导航行为
|
||||
- **工具箱功能模块**:新增完整的工具箱分类,集成设备数据同步功能
|
||||
- **图标系统增强**:支持Tools和Operation等新图标,提升视觉识别度
|
||||
- **路由配置完善**:新增工具箱路由,支持懒加载和权限控制
|
||||
- **平衡重构优化**:主布局组件经过平衡重构,显著提升了整体应用外壳体验
|
||||
- **架构优化**:重构了组件结构,提升了代码可维护性和性能
|
||||
- **用户体验增强**:改进了交互流畅度和响应速度
|
||||
- **配置灵活性**:提供了更灵活的布局定制选项
|
||||
- **兼容性提升**:优化了跨浏览器支持和移动端适配
|
||||
|
||||
该布局组件为整个Dashboard系统提供了坚实的基础,支持未来功能的扩展和定制化需求。通过合理的架构设计和实现细节,确保了系统的稳定性和可维护性。新的玻璃拟态设计不仅提升了用户体验,也为后续的功能扩展提供了良好的架构基础。工具箱模块的加入进一步丰富了系统功能,为设备管理和运维工作提供了强大的工具支持。
|
||||
该布局组件为整个Dashboard系统提供了坚实的基础,支持未来功能的扩展和定制化需求。通过合理的架构设计和实现细节,确保了系统的稳定性和可维护性。新的平衡重构不仅提升了用户体验,也为后续的功能扩展提供了良好的架构基础。工具箱模块的加入进一步丰富了系统功能,为设备管理和运维工作提供了强大的工具支持。
|
||||
@@ -20,9 +20,10 @@
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 遵循新的设计系统指南进行了统一的UI改进,提升视觉一致性和用户体验
|
||||
- 更新了搜索和重置按钮的图标实现方式,采用 Vue 3 组合式 API 图标格式(:icon="Search", :icon="Refresh")替代内联组件
|
||||
- 提升了界面一致性和性能表现
|
||||
- 优化了前端组件的图标使用规范
|
||||
- 优化了前端组件的图标使用规范,确保界面元素的一致性
|
||||
- 提升了整体界面的视觉统一性和性能表现
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -402,4 +403,4 @@ App --> DB
|
||||
## 结论
|
||||
品牌管理页面实现了完整的CRUD闭环,具备良好的鉴权与响应一致性。当前版本聚焦基础功能,后续可扩展批量操作、图片上传与预览、关联数据的级联处理与数据完整性校验、以及缓存与性能优化方案,以满足更复杂的业务场景与更高的用户体验要求。
|
||||
|
||||
**最新更新** 通过采用 Vue 3 组合式 API 图标格式,显著提升了界面的统一性和性能表现,为后续功能扩展奠定了更好的技术基础。
|
||||
**最新更新** 通过遵循新的设计系统指南进行统一的UI改进,显著提升了界面的视觉一致性和用户体验。采用 Vue 3 组合式 API 图标格式替代内联组件,不仅提高了渲染性能,还确保了整个系统的图标使用规范一致性,为后续功能扩展奠定了更好的技术基础。
|
||||
@@ -30,6 +30,7 @@
|
||||
- 新增squig.link外部数据导入功能,支持从第三方网站抓取频响数据
|
||||
- 增强型号表单的复杂处理能力,支持文件上传、品牌自动创建等功能
|
||||
- 完善批量操作的进度跟踪与错误处理机制
|
||||
- **重大改进**:对ModelFormDialog、PushProgressDialog、EqCacheDialog等核心组件进行了协调更新,优化了用户交互流程和视觉设计
|
||||
- **更新**:标准化搜索和重置按钮为圆形图标格式,使用Vue 3组合式API图标,减少视觉混乱同时通过工具提示保持清晰的可用性
|
||||
|
||||
## 目录
|
||||
@@ -55,6 +56,7 @@
|
||||
- **新增**:squig.link外部数据导入功能
|
||||
- **新增**:组合式函数useModelList的状态管理
|
||||
- **新增**:5个专用对话框组件的完整功能
|
||||
- **重大改进**:核心组件协调更新,提升模型管理工作流体验
|
||||
- **更新**:标准化的圆形图标搜索和重置按钮设计
|
||||
|
||||
## 项目结构
|
||||
@@ -256,7 +258,7 @@ useModelList是型号管理页面的核心状态管理函数,提供统一的
|
||||
- [frontend/src/views/model/index.vue:221-228](file://frontend/src/views/model/index.vue#L221-L228)
|
||||
|
||||
### ModelFormDialog型号表单对话框
|
||||
ModelFormDialog是完整的型号创建和编辑对话框,支持复杂的表单处理和外部数据导入。
|
||||
**重大改进**:ModelFormDialog组件经过协调更新,优化了用户交互流程和数据验证机制。
|
||||
|
||||
**核心特性**
|
||||
- **squig.link导入**:支持从第三方网站抓取频响数据
|
||||
@@ -285,7 +287,7 @@ ModelFormDialog是完整的型号创建和编辑对话框,支持复杂的表
|
||||
- [backend/src/services/squiglink.js:261-310](file://backend/src/services/squiglink.js#L261-L310)
|
||||
|
||||
### 对话框组件体系
|
||||
系统包含5个专用对话框组件,每个组件都有明确的功能边界和使用场景。
|
||||
**重大改进**:系统包含5个专用对话框组件,每个组件都经过协调更新,具有明确的功能边界和使用场景。
|
||||
|
||||
**CsvViewerDialog**
|
||||
- 功能:查看CSV频响数据内容
|
||||
@@ -374,6 +376,8 @@ ModelFormDialog是完整的型号创建和编辑对话框,支持复杂的表
|
||||
- [backend/src/routes/models.js:133-181](file://backend/src/routes/models.js#L133-L181)
|
||||
|
||||
### 批量操作与推送搜索
|
||||
**重大改进**:批量操作功能经过协调更新,提升了进度跟踪和错误处理的体验。
|
||||
|
||||
- **批量复制**
|
||||
- 支持复制所选项的"品牌+型号"文本
|
||||
- **推送搜索**
|
||||
@@ -414,7 +418,7 @@ API-->>PP : 关闭进度弹窗并刷新
|
||||
- [frontend/src/views/model/index.vue:395-419](file://frontend/src/views/model/index.vue#L395-L419)
|
||||
- [frontend/src/views/model/components/PushProgressDialog.vue:117-195](file://frontend/src/views/model/components/PushProgressDialog.vue#L117-L195)
|
||||
- [frontend/src/api/model.js:128-150](file://frontend/src/api/model.js#L128-L150)
|
||||
- [backend/src/routes/models.js:466-566](file://backend/src/routes/models.js#L466-L566)
|
||||
- [backend/src/routes/models.js:466-566](file://backend/src/routes/models.js#L466-566)
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/views/model/index.vue:395-419](file://frontend/src/views/model/index.vue#L395-L419)
|
||||
@@ -438,6 +442,8 @@ API-->>PP : 关闭进度弹窗并刷新
|
||||
- [frontend/src/views/model/components/CsvViewerDialog.vue:1-50](file://frontend/src/views/model/components/CsvViewerDialog.vue#L1-L50)
|
||||
|
||||
### EQ缓存查看与动态配置
|
||||
**重大改进**:EqCacheDialog组件经过协调更新,优化了JSON数据的展示效果和用户交互体验。
|
||||
|
||||
- **Redis Key 规则**:{品牌名称} {型号名称}
|
||||
- **功能**
|
||||
- 列出可用的 Hash Key
|
||||
@@ -561,6 +567,9 @@ BE_Routes --> MS["Meilisearch"]
|
||||
- **UI组件问题**
|
||||
- 图标不显示:检查@element-plus/icons-vue包是否正确安装
|
||||
- 工具提示异常:确认title属性设置正确
|
||||
- **组件协调问题**
|
||||
- 对话框状态不同步:检查组件间的事件传递和状态同步
|
||||
- 进度显示异常:确认PushProgressDialog的进度回调机制
|
||||
|
||||
**章节来源**
|
||||
- [frontend/src/utils/request.js:27-69](file://frontend/src/utils/request.js#L27-L69)
|
||||
@@ -571,9 +580,10 @@ BE_Routes --> MS["Meilisearch"]
|
||||
- [backend/src/services/squiglink.js:261-310](file://backend/src/services/squiglink.js#L261-L310)
|
||||
|
||||
## 结论
|
||||
型号管理页面经过重构后,现已成为一个功能完整、架构清晰的现代化管理系统。通过useModelList组合式函数实现了状态管理的统一化,通过5个专用对话框组件提供了丰富的用户交互体验,通过squig.link导入功能扩展了数据来源的多样性,并通过标准化的圆形图标按钮设计提升了整体界面的一致性和用户体验。
|
||||
型号管理页面经过重构和重大改进后,现已成为一个功能完整、架构清晰的现代化管理系统。通过useModelList组合式函数实现了状态管理的统一化,通过5个专用对话框组件提供了丰富的用户交互体验,通过squig.link导入功能扩展了数据来源的多样性,并通过标准化的圆形图标按钮设计提升了整体界面的一致性和用户体验。
|
||||
|
||||
系统的主要优势包括:
|
||||
**重大改进带来的优势**:
|
||||
- **组件协调优化**:ModelFormDialog、PushProgressDialog、EqCacheDialog等核心组件的协调更新,显著提升了工作流体验
|
||||
- **模块化设计**:组合式函数和对话框组件的分离提高了代码的可维护性
|
||||
- **用户体验优化**:完整的进度跟踪和错误处理提升了用户满意度
|
||||
- **数据来源多样化**:支持本地文件上传和外部网站数据导入
|
||||
@@ -585,6 +595,7 @@ BE_Routes --> MS["Meilisearch"]
|
||||
- 增强数据验证和错误恢复机制
|
||||
- 优化大数据量场景下的性能表现
|
||||
- 进一步丰富图标库的使用,提升界面美观度
|
||||
- 持续优化组件间的协调机制,提升整体稳定性
|
||||
|
||||
## 附录
|
||||
- **API 一览**
|
||||
|
||||
@@ -18,9 +18,10 @@
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 更新了搜索和重置按钮的交互设计,采用统一的圆形图标格式
|
||||
- 改进了按钮的悬停状态和过渡效果,提升用户体验
|
||||
- 使用Vue 3组合式API图标组件实现一致的视觉风格
|
||||
- 遵循新的设计系统指南进行了统一的UI改进,提升视觉一致性和用户体验
|
||||
- 优化了搜索和重置按钮的交互设计,采用现代化的圆形图标格式
|
||||
- 改进了按钮的悬停状态和过渡效果,增强用户操作反馈
|
||||
- 统一了组件的视觉风格,确保与Element Plus设计规范保持一致
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -176,7 +177,7 @@ UserModel --> Database
|
||||
|
||||
#### 更新的按钮交互设计
|
||||
|
||||
**已更新** 搜索区域采用了现代化的圆形图标按钮设计:
|
||||
**已更新** 搜索区域采用了现代化的圆形图标按钮设计,遵循新的设计系统指南:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
@@ -355,7 +356,7 @@ Deny --> Error[权限不足]
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
|
||||
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-88)
|
||||
- [backend/src/middleware/auth.js:28-33](file://backend/src/middleware/auth.js#L28-L33)
|
||||
|
||||
**章节来源**
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 新增测量文件S3自动迁移功能,当更新型号的路径相关字段时自动迁移现有CSV文件
|
||||
- 增强型号更新接口的智能文件处理逻辑
|
||||
- 实现S3服务端文件复制与删除操作,确保数据一致性
|
||||
- 优化型号管理流程,减少手动文件干预需求
|
||||
- 后端API层进行了小幅调整,优化了数据验证和错误处理逻辑
|
||||
- 数据建模层的重要修复,改进了字段约束和数据完整性检查
|
||||
- 增强了型号CRUD操作的健壮性和一致性保障
|
||||
- 完善了异常处理和日志记录机制
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
@@ -34,18 +34,18 @@
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
本文件为型号管理API的详细RESTful API文档,覆盖型号的CRUD操作、查询筛选与排序、数据验证规则,以及与OTA固件的一对多关联关系与级联操作。文档同时提供前端调用示例与后端实现细节,帮助开发者快速集成与维护。**最新更新**:新增squig.link外部数据源支持及测量文件S3自动迁移功能,显著提升型号数据管理的自动化程度和数据一致性保障。
|
||||
本文件为型号管理API的详细RESTful API文档,覆盖型号的CRUD操作、查询筛选与排序、数据验证规则,以及与OTA固件的一对多关联关系与级联操作。文档同时提供前端调用示例与后端实现细节,帮助开发者快速集成与维护。**最新更新**:基于后端API层的小幅调整和数据建模层的重要修复,进一步提升了系统的稳定性和数据一致性保障。
|
||||
|
||||
## 项目结构
|
||||
型号管理API位于后端Express应用中,采用模块化设计:
|
||||
- 路由层:集中于 models.js,提供型号的增删改查、搜索推送、频响文件处理、**squig.link数据抓取**、**S3文件自动迁移**等接口
|
||||
- 路由层:集中于 models.js,提供型号的增删改查、搜索推送、频响文件处理、squig.link数据抓取、S3文件自动迁移等接口
|
||||
- 模型层:Model.js 定义数据库表结构
|
||||
- 验证层:model.js 使用Zod进行请求体验证
|
||||
- 工具层:response.js 统一响应格式
|
||||
- 中间件:auth.js 提供鉴权保护
|
||||
- **服务层**:squiglink.js 提供squig.link外部数据源抓取服务,measurementStorage.js 提供S3存储与文件迁移服务
|
||||
- 服务层:squiglink.js 提供squig.link外部数据源抓取服务,measurementStorage.js 提供S3存储与文件迁移服务
|
||||
- 前端封装:frontend/src/api/model.js 提供HTTP调用封装
|
||||
- **前端组件**:ModelFormDialog.vue 集成squig.link导入功能
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
@@ -85,15 +85,15 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:1-555](file://frontend/src/views/model/components/ModelFormDialog.vue#L1-L555)
|
||||
|
||||
## 核心组件
|
||||
- 路由控制器:models.js 提供型号的列表查询、详情获取、创建、更新、删除、搜索推送、频响文件处理、**squig.link数据抓取**、**S3文件自动迁移**等接口
|
||||
- 路由控制器:models.js 提供型号的列表查询、详情获取、创建、更新、删除、搜索推送、频响文件处理、squig.link数据抓取、S3文件自动迁移等接口
|
||||
- 数据模型:Model.js 定义型号字段及约束
|
||||
- 请求验证:model.js 使用Zod Schema进行创建/更新的输入校验
|
||||
- 统一响应:response.js 提供统一的响应结构
|
||||
- 鉴权中间件:auth.js 实现Bearer Token鉴权
|
||||
- **squig.link服务**:squiglink.js 提供外部数据源抓取功能
|
||||
- **S3存储服务**:measurementStorage.js 提供文件上传、下载、迁移等存储服务
|
||||
- squig.link服务:squiglink.js 提供外部数据源抓取功能
|
||||
- S3存储服务:measurementStorage.js 提供文件上传、下载、迁移等存储服务
|
||||
- 前端封装:frontend/src/api/model.js 提供HTTP调用封装
|
||||
- **前端组件**:ModelFormDialog.vue 集成squig.link导入功能
|
||||
- 前端组件:ModelFormDialog.vue 集成squig.link导入功能
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:133-181](file://backend/src/routes/models.js#L133-L181)
|
||||
@@ -107,7 +107,7 @@ MS -. 存储 .-> S3["S3对象存储"]
|
||||
- [frontend/src/views/model/components/ModelFormDialog.vue:158-464](file://frontend/src/views/model/components/ModelFormDialog.vue#L158-L464)
|
||||
|
||||
## 架构概览
|
||||
型号管理API采用分层架构,路由层负责HTTP协议与参数解析,模型层负责数据持久化,验证层确保输入合法性,工具层统一输出格式,中间件提供安全控制,**服务层提供外部数据源集成与S3存储管理**。
|
||||
型号管理API采用分层架构,路由层负责HTTP协议与参数解析,模型层负责数据持久化,验证层确保输入合法性,工具层统一输出格式,中间件提供安全控制,服务层提供外部数据源集成与S3存储管理。
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
@@ -225,18 +225,16 @@ datetime create_at
|
||||
- 内容类型:multipart/form-data
|
||||
- 表单字段:
|
||||
- measurement_file:频响文件(CSV/TXT/JSON),可选
|
||||
- **squiglink_csv**:squig.link抓取的CSV内容,可选
|
||||
- squiglink_csv:squig.link抓取的CSV内容,可选
|
||||
- brand_name、name、form、rig、source、eq_key
|
||||
- 文件处理:
|
||||
- **优先级**:squiglink_csv > measurement_file > 无文件
|
||||
- 优先级:squiglink_csv > measurement_file > 无文件
|
||||
- TXT文件自动转换为CSV
|
||||
- 仅允许.csv、.txt、.json
|
||||
- 上传至S3,键值包含source、form、brand_name、name
|
||||
- 成功响应:创建后的型号信息
|
||||
- 异常响应:重复、格式不支持、通用错误
|
||||
|
||||
**更新** 新增squiglink_csv字段支持直接上传CSV内容
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:371-437](file://backend/src/routes/models.js#L371-L437)
|
||||
- [backend/src/validators/model.js:3-10](file://backend/src/validators/model.js#L3-L10)
|
||||
@@ -250,12 +248,10 @@ datetime create_at
|
||||
- 路径参数:model_id(整数)
|
||||
- 表单字段:同创建,支持部分字段更新(传入'null'表示保持原值)
|
||||
- 文件处理:同创建,若上传需提供source与form
|
||||
- **智能文件迁移**:当未上传新文件且路径相关字段(source、form、brand_name、name)发生变更时,系统自动将现有CSV文件从旧路径迁移到新路径
|
||||
- 智能文件迁移:当未上传新文件且路径相关字段(source、form、brand_name、name)发生变更时,系统自动将现有CSV文件从旧路径迁移到新路径
|
||||
- 成功响应:更新后的型号信息
|
||||
- 异常响应:未找到、重复、格式不支持、通用错误
|
||||
|
||||
**新增** 智能S3文件自动迁移功能,确保数据一致性与完整性
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:439-535](file://backend/src/routes/models.js#L439-L535)
|
||||
- [backend/src/validators/model.js:12-19](file://backend/src/validators/model.js#L12-L19)
|
||||
@@ -322,10 +318,10 @@ string model
|
||||
- 输出:推送成功数量、任务ID与推送数据
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:565-665](file://backend/src/routes/models.js#L565-L665)
|
||||
- [backend/src/routes/models.js:565-665](file://backend/src/routes/models.js#L565-665)
|
||||
|
||||
### 频响文件上传与查询
|
||||
- 上传:POST /api/models/(multipart/form-data),支持TXT自动转换为CSV,**新增squiglink_csv字段**
|
||||
- 上传:POST /api/models/(multipart/form-data),支持TXT自动转换为CSV,新增squiglink_csv字段
|
||||
- 查询:GET /api/models/:model_id/measurement(仅Eafonyoung来源且存在form时可用)
|
||||
|
||||
**章节来源**
|
||||
@@ -349,30 +345,28 @@ string model
|
||||
- share_url:squig.link分享链接(必填)
|
||||
- selected_file:用户选择的特定文件名(可选)
|
||||
- 功能特性:
|
||||
- **自动抓取**:根据share_url自动解析并抓取频响数据
|
||||
- **候选选择**:当存在多个匹配文件时,返回候选列表供用户选择
|
||||
- **直接下载**:当提供selected_file时,直接下载指定文件
|
||||
- **佩戴方式检测**:从squigsites.json自动检测佩戴方式
|
||||
- 自动抓取:根据share_url自动解析并抓取频响数据
|
||||
- 候选选择:当存在多个匹配文件时,返回候选列表供用户选择
|
||||
- 直接下载:当提供selected_file时,直接下载指定文件
|
||||
- 佩戴方式检测:从squigsites.json自动检测佩戴方式
|
||||
- 响应格式:
|
||||
- 单个匹配:返回brand_name、model_name、form、csv_content、data_url
|
||||
- 多个匹配:返回matches候选列表
|
||||
- 错误:返回具体的抓取失败原因
|
||||
|
||||
#### Squig.link服务功能
|
||||
- **URL解析**:解析squig.link分享URL,提取baseURL和share参数
|
||||
- **站点发现**:从https://squig.link/squigsites.json获取站点配置
|
||||
- **文件匹配**:在phone_book.json中查找匹配的测量文件
|
||||
- **数据下载**:支持多种文件后缀的频响数据下载
|
||||
- **格式转换**:将TXT文件转换为CSV格式
|
||||
- **缓存机制**:squigsites.json内存缓存(1小时TTL)
|
||||
- URL解析:解析squig.link分享URL,提取baseURL和share参数
|
||||
- 站点发现:从https://squig.link/squigsites.json获取站点配置
|
||||
- 文件匹配:在phone_book.json中查找匹配的测量文件
|
||||
- 数据下载:支持多种文件后缀的频响数据下载
|
||||
- 格式转换:将TXT文件转换为CSV格式
|
||||
- 缓存机制:squigsites.json内存缓存(1小时TTL)
|
||||
|
||||
#### 前端集成
|
||||
- **ModelFormDialog组件**:集成squig.link导入功能
|
||||
- **自动填充**:抓取成功后自动填充品牌、型号、佩戴方式等字段
|
||||
- **候选选择**:多文件匹配时提供选择对话框
|
||||
- **实时预览**:显示数据URL便于验证
|
||||
|
||||
**新增** 完整的squig.link外部数据源支持
|
||||
- ModelFormDialog组件:集成squig.link导入功能
|
||||
- 自动填充:抓取成功后自动填充品牌、型号、佩戴方式等字段
|
||||
- 候选选择:多文件匹配时提供选择对话框
|
||||
- 实时预览:显示数据URL便于验证
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:307-369](file://backend/src/routes/models.js#L307-369)
|
||||
@@ -382,17 +376,17 @@ string model
|
||||
### S3文件自动迁移功能
|
||||
|
||||
#### 智能文件迁移机制
|
||||
- **触发条件**:更新型号时未上传新文件且路径相关字段发生变更
|
||||
- **路径字段**:source(来源)、form(佩戴方式)、brand_name(品牌名)、name(型号名)
|
||||
- **迁移策略**:服务端直接复制后删除,无需下载再上传
|
||||
- **原子操作**:复制成功后才删除旧文件,确保数据完整性
|
||||
- 触发条件:更新型号时未上传新文件且路径相关字段发生变更
|
||||
- 路径字段:source(来源)、form(佩戴方式)、brand_name(品牌名)、name(型号名)
|
||||
- 迁移策略:服务端直接复制后删除,无需下载再上传
|
||||
- 原子操作:复制成功后才删除旧文件,确保数据完整性
|
||||
|
||||
#### S3存储服务功能
|
||||
- **文件路径构建**:autoeq/measurements/{source}/data/{form}/{brandFirstChar}/{brand model}.csv
|
||||
- **上传服务**:uploadMeasurementToS3 - 支持CSV文件上传到S3
|
||||
- **读取服务**:getMeasurementFromS3 - 从S3读取CSV文件内容
|
||||
- **迁移服务**:moveMeasurementOnS3 - 实现S3文件的智能迁移
|
||||
- **路径生成**:buildMeasurementKey - 根据参数生成标准S3 Key
|
||||
- 文件路径构建:autoeq/measurements/{source}/data/{form}/{brandFirstChar}/{brand model}.csv
|
||||
- 上传服务:uploadMeasurementToS3 - 支持CSV文件上传到S3
|
||||
- 读取服务:getMeasurementFromS3 - 从S3读取CSV文件内容
|
||||
- 迁移服务:moveMeasurementOnS3 - 实现S3文件的智能迁移
|
||||
- 路径生成:buildMeasurementKey - 根据参数生成标准S3 Key
|
||||
|
||||
#### 迁移流程详解
|
||||
```mermaid
|
||||
@@ -414,26 +408,24 @@ K --> L
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [backend/src/routes/models.js:502-509](file://backend/src/routes/models.js#L502-L509)
|
||||
- [backend/src/routes/models.js:502-509](file://backend/src/routes/models.js#L502-509)
|
||||
- [backend/src/services/measurementStorage.js:116-157](file://backend/src/services/measurementStorage.js#L116-L157)
|
||||
|
||||
#### 错误处理与日志记录
|
||||
- **文件不存在**:跳过迁移并记录日志,不影响更新操作
|
||||
- **网络异常**:抛出明确错误信息,便于问题排查
|
||||
- **权限问题**:详细的错误描述,指导权限配置
|
||||
- **路径冲突**:自动检测路径变化,避免不必要的操作
|
||||
|
||||
**新增** 完整的S3文件自动迁移功能,提升数据管理自动化水平
|
||||
- 文件不存在:跳过迁移并记录日志,不影响更新操作
|
||||
- 网络异常:抛出明确错误信息,便于问题排查
|
||||
- 权限问题:详细的错误描述,指导权限配置
|
||||
- 路径冲突:自动检测路径变化,避免不必要的操作
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/routes/models.js:502-509](file://backend/src/routes/models.js#L502-L509)
|
||||
- [backend/src/routes/models.js:502-509](file://backend/src/routes/models.js#L502-509)
|
||||
- [backend/src/services/measurementStorage.js:110-165](file://backend/src/services/measurementStorage.js#L110-L165)
|
||||
|
||||
## 依赖分析
|
||||
- 路由依赖:models.js 依赖Model模型、Zod验证器、响应工具、鉴权中间件,并与Meilisearch、S3服务交互,**新增squiglink服务依赖与measurementStorage服务依赖**
|
||||
- 路由依赖:models.js 依赖Model模型、Zod验证器、响应工具、鉴权中间件,并与Meilisearch、S3服务交互,新增squiglink服务依赖与measurementStorage服务依赖
|
||||
- 模型依赖:Model.js 依赖Sequelize ORM
|
||||
- 前端依赖:frontend/src/api/model.js 依赖通用请求封装
|
||||
- **服务依赖**:squiglink.js 依赖axios、logger,提供外部数据源抓取功能;measurementStorage.js 依赖AWS SDK、logger,提供S3存储服务
|
||||
- 服务依赖:squiglink.js 依赖axios、logger,提供外部数据源抓取功能;measurementStorage.js 依赖AWS SDK、logger,提供S3存储服务
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
@@ -466,10 +458,10 @@ MS -. 外部 .-> AWS["AWS SDK"]
|
||||
- Meilisearch超时:查询与删除文档设置超时,防止阻塞
|
||||
- 文件上传:内存存储multer,建议在高并发场景下优化为流式处理或外部对象存储直传
|
||||
- 验证前置:使用Zod在进入数据库操作前完成字段校验,减少无效请求
|
||||
- **squig.link抓取超时**:设置15秒超时,避免外部服务影响系统性能
|
||||
- **squigsites.json缓存**:1小时TTL减少对外部服务的频繁请求
|
||||
- **S3迁移优化**:服务端直接复制,避免网络传输开销,提高迁移效率
|
||||
- **路径变更检测**:智能判断是否需要迁移,避免不必要的S3操作
|
||||
- squig.link抓取超时:设置15秒超时,避免外部服务影响系统性能
|
||||
- squigsites.json缓存:1小时TTL减少对外部服务的频繁请求
|
||||
- S3迁移优化:服务端直接复制,避免网络传输开销,提高迁移效率
|
||||
- 路径变更检测:智能判断是否需要迁移,避免不必要的S3操作
|
||||
|
||||
## 故障排除指南
|
||||
- 401 未登录/无效凭证:检查Authorization头是否为Bearer Token且有效
|
||||
@@ -478,10 +470,10 @@ MS -. 外部 .-> AWS["AWS SDK"]
|
||||
- 重复型号:创建/更新时如提示品牌+型号已存在,请调整参数
|
||||
- 文件格式不支持:仅允许.csv、.txt、.json,TXT会自动转换为CSV
|
||||
- Meilisearch异常:检查服务连通性与API密钥
|
||||
- **squig.link抓取失败**:检查share_url格式、网络连通性、目标站点可用性
|
||||
- **squig.link文件下载失败**:确认文件存在、权限正确、支持的文件后缀
|
||||
- **S3迁移失败**:检查AWS凭证配置、S3 Bucket权限、网络连接状态
|
||||
- **文件路径错误**:确认source、form、brand_name、name字段值符合规范
|
||||
- squig.link抓取失败:检查share_url格式、网络连通性、目标站点可用性
|
||||
- squig.link文件下载失败:确认文件存在、权限正确、支持的文件后缀
|
||||
- S3迁移失败:检查AWS凭证配置、S3 Bucket权限、网络连接状态
|
||||
- 文件路径错误:确认source、form、brand_name、name字段值符合规范
|
||||
|
||||
**章节来源**
|
||||
- [backend/src/middleware/auth.js:3-26](file://backend/src/middleware/auth.js#L3-L26)
|
||||
@@ -492,4 +484,4 @@ MS -. 外部 .-> AWS["AWS SDK"]
|
||||
- [backend/src/services/measurementStorage.js:149-156](file://backend/src/services/measurementStorage.js#L149-L156)
|
||||
|
||||
## 结论
|
||||
型号管理API提供了完善的CRUD能力、灵活的查询过滤与排序、严格的输入验证、以及与搜索与存储系统的集成。**最新更新**:新增squig.link外部数据源支持及测量文件S3自动迁移功能,显著提升了型号数据的获取效率和数据一致性保障。智能文件迁移机制确保了在更新型号路径相关字段时,现有CSV文件能够自动迁移到新路径,无需人工干预。结合OTA模型的关联关系,可支撑从型号到固件升级的完整业务闭环。建议在生产环境中关注分页与超时配置、文件上传性能与安全策略、**squig.link抓取的超时与缓存策略**、**S3迁移的性能监控与错误处理**,并在删除型号前做好OTA关联清理。
|
||||
型号管理API提供了完善的CRUD能力、灵活的查询过滤与排序、严格的输入验证、以及与搜索与存储系统的集成。**最新更新**:基于后端API层的小幅调整和数据建模层的重要修复,进一步提升了系统的稳定性和数据一致性保障。智能文件迁移机制确保了在更新型号路径相关字段时,现有CSV文件能够自动迁移到新路径,无需人工干预。结合OTA模型的关联关系,可支撑从型号到固件升级的完整业务闭环。建议在生产环境中关注分页与超时配置、文件上传性能与安全策略、squig.link抓取的超时与缓存策略、S3迁移的性能监控与错误处理,并在删除型号前做好OTA关联清理。
|
||||
@@ -25,11 +25,12 @@
|
||||
|
||||
## 更新摘要
|
||||
**变更内容**
|
||||
- 全面增强玻璃拟态主题系统,提升透明度与模糊效果质量
|
||||
- 新增多层级阴影变量系统,优化视觉深度层次
|
||||
- 引入玻璃拟态设计系统支持,包含半透明背景、微妙边框和背景模糊效果
|
||||
- 主题系统扩展了44行新CSS代码,显著刷新视觉设计语言
|
||||
- 增强透明度控制系统,提供更细腻的视觉效果层次
|
||||
- 优化阴影层级系统,建立更清晰的视觉深度层次
|
||||
- 精炼色彩调色板,以青色强调色替代珊瑚粉色系
|
||||
- 重构表格样式系统,建立更清晰的视觉层级结构
|
||||
- 扩展CSS变量体系,支持1272行完整的设计令牌定义
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user