audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
864040f45b60387fcdbf9439e8922c639da1a093
dashboard/.qoder/repowiki/zh/content/前端组件/页面组件/型号管理页面.md
T
eafonyang 08da279275 新增项目文档
2026-06-30 14:46:52 +08:00

19 KiB
Raw Blame History

型号管理页面

**本文档引用的文件** - [frontend/src/views/model/index.vue](file://frontend/src/views/model/index.vue) - [backend/src/routes/models.js](file://backend/src/routes/models.js) - [backend/src/models/Model.js](file://backend/src/models/Model.js) - [backend/src/validators/model.js](file://backend/src/validators/model.js) - [frontend/src/api/model.js](file://frontend/src/api/model.js) - [frontend/src/api/brand.js](file://frontend/src/api/brand.js) - [backend/src/models/Brand.js](file://backend/src/models/Brand.js) - [backend/src/routes/brands.js](file://backend/src/routes/brands.js) - [backend/src/services/measurementStorage.js](file://backend/src/services/measurementStorage.js) - [backend/src/services/eqCacheStorage.js](file://backend/src/services/eqCacheStorage.js) - [frontend/src/utils/request.js](file://frontend/src/utils/request.js) - [frontend/src/router/index.js](file://frontend/src/router/index.js)

目录

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

简介

本文件面向“型号管理页面”的技术实现与使用说明，覆盖以下关键能力：

  • 型号列表展示、搜索过滤、排序与分页
  • 型号详情查看与参数配置
  • 型号表单的数据结构、字段验证与复杂表单处理（含频响文件上传）
  • 型号与品牌的关联关系、级联数据管理与外键约束处理
  • 型号参数的动态配置、数据格式验证与存储优化
  • 批量操作（复制、推送搜索）的实现方案

项目结构

型号管理页面位于前端单页应用中，后端提供 REST 接口与数据模型支撑，前端通过 API 模块与后端交互。

graph TB
subgraph "前端"
FE_Model["型号视图<br/>frontend/src/views/model/index.vue"]
FE_API_Model["型号 API<br/>frontend/src/api/model.js"]
FE_API_Brand["品牌 API<br/>frontend/src/api/brand.js"]
FE_Request["请求封装<br/>frontend/src/utils/request.js"]
FE_Router["路由<br/>frontend/src/router/index.js"]
end
subgraph "后端"
BE_Routes_Models["型号路由<br/>backend/src/routes/models.js"]
BE_Models_Model["型号模型<br/>backend/src/models/Model.js"]
BE_Validators_Model["型号校验器<br/>backend/src/validators/model.js"]
BE_Routes_Brands["品牌路由<br/>backend/src/routes/brands.js"]
BE_Models_Brand["品牌模型<br/>backend/src/models/Brand.js"]
BE_Services_Measure["频响存储服务<br/>backend/src/services/measurementStorage.js"]
BE_Services_EQ["EQ 缓存服务<br/>backend/src/services/eqCacheStorage.js"]
end
FE_Model --> FE_API_Model
FE_Model --> FE_API_Brand
FE_API_Model --> FE_Request
FE_API_Brand --> FE_Request
FE_Router --> FE_Model
FE_API_Model --> BE_Routes_Models
FE_API_Brand --> BE_Routes_Brands
BE_Routes_Models --> BE_Models_Model
BE_Routes_Models --> BE_Validators_Model
BE_Routes_Models --> BE_Services_Measure
BE_Routes_Models --> BE_Services_EQ
BE_Routes_Brands --> BE_Models_Brand

图表来源

章节来源

核心组件

  • 前端视图组件：负责渲染列表、表单、对话框、分页与批量操作，并通过 API 模块与后端交互。
  • 前端 API 模块：封装型号与品牌相关的 HTTP 请求，统一处理 Content-Type 与超时策略。
  • 后端路由：提供型号与品牌的 CRUD、搜索、排序、分页、推送搜索校验与推送、频响文件与 EQ 缓存查询等接口。
  • 数据模型：定义型号与品牌的数据结构、字段类型与约束。
  • 服务层：频响文件上传至 S3、EQ 缓存读取 Redis。

章节来源

架构总览

型号管理页面采用前后端分离架构，前端通过 Element Plus 组件与 Axios 进行交互，后端基于 Express 提供 REST 接口，数据持久化使用 Sequelize ORM，外部集成 S3 与 Redis。

sequenceDiagram
participant U as "用户"
participant V as "型号视图<br/>index.vue"
participant A as "API 模块<br/>model.js/brand.js"
participant R as "后端路由<br/>models.js/brands.js"
participant M as "模型<br/>Model.js/Brand.js"
participant S3 as "S3 存储"
participant EQ as "Redis 缓存"
U->>V : 打开型号管理页面
V->>A : 加载品牌列表
A->>R : GET /api/brands/
R->>M : 查询品牌
M-->>R : 品牌数据
R-->>A : 品牌列表
A-->>V : 渲染品牌下拉
U->>V : 搜索/排序/分页
V->>A : 获取型号列表
A->>R : GET /api/models/
R->>M : 分页查询型号
M-->>R : 型号数据
R-->>A : 列表与总数
A-->>V : 渲染表格
U->>V : 新增/编辑型号
V->>A : 提交表单含文件上传
A->>R : POST/PUT /api/models/
R->>S3 : 上传频响文件CSV/TXT/JSON
S3-->>R : S3 Key
R->>M : 保存型号记录
M-->>R : 新建/更新结果
R-->>A : 成功响应
A-->>V : 关闭对话框并刷新列表

图表来源

详细组件分析

型号数据模型与表单结构

  • 数据模型字段
    • 主键：自增整型 ID
    • 品牌名称：字符串，最大 100 字符，必填
    • 型号名称：字符串，最大 100 字符，必填
    • 形式：字符串，最大 100 字符，可空（入耳式/头戴式/耳塞式）
    • 阻抗：字符串，最大 100 字符，可空
    • 来源：字符串，最大 100 字符，可空
    • EQ 键：字符串，最大 255 字符，可空
    • 创建时间：日期，默认当前时间
  • 表单字段与验证
    • 品牌名称：必填
    • 型号名称：必填，长度 1-100
    • 形式：可选枚举值
    • 阻抗：可选
    • 来源：可选
    • 频响文件：可选上传，支持 CSV/TXT/JSON，TXT 自动转换为 CSV
  • 复杂表单处理
    • 文件上传采用 multipart/form-data
    • 新增时若品牌不存在，先尝试创建品牌再保存型号
    • 文件名解析：优先按品牌接口返回的品牌名进行最长前缀匹配，否则按首个空格拆分

章节来源

品牌关联与外键约束

  • 品牌模型
    • 主键：自增整型 ID
    • 名称：唯一、非空、最大 100 字符
  • 型号与品牌的关系
    • 前端通过品牌下拉选择型号所属品牌
    • 后端在新增/编辑时检查品牌是否存在，不存在则创建
    • 当前模型字段为字符串类型的“品牌名称”，未建立显式的外键约束
  • 级联与一致性
    • 若后续迁移为外键关联，建议在数据库层面添加约束，并在删除品牌时处理级联或阻止删除

章节来源

搜索过滤、排序与分页

  • 搜索条件
    • 品牌名称（模糊匹配）
    • 型号名称（模糊匹配）
  • 排序
    • 支持按 ID 与创建时间排序，升序/降序切换
  • 分页
    • 页面大小：10/20/50/100
    • 当前页变更时重置为第一页并重新加载
  • 后端实现
    • 使用 Sequelize 查询构建 where 条件与 order 排序
    • 限制每页最大 1000 条，总数统计用于分页控件

章节来源

批量操作与推送搜索

  • 批量复制
    • 支持复制所选项的“品牌+型号”文本
  • 推送搜索
    • 校验：对选中型号调用曲线校验服务，返回校验失败项
    • 推送：将型号数据批量写入 Meilisearch 索引
    • 进度弹窗：显示校验与推送步骤状态、当前处理项与错误明细
  • 多媒体资源
    • 查看 EQ 缓存：读取 Redis Hash 字段，支持展开查看 JSON 结构
    • 查看 CSV：仅支持来源为特定值的型号，按佩戴方式拼接 S3 Key 并读取
sequenceDiagram
participant U as "用户"
participant V as "型号视图"
participant A as "API 模块"
participant R as "后端路由"
participant C as "曲线校验服务"
participant MS as "Meilisearch"
U->>V : 选择多个型号并点击“推送搜索”
V->>A : validatePushToMeilisearch(ids)
A->>R : POST /api/models/push-to-search/validate
R->>C : 校验曲线数据
C-->>R : 校验结果
R-->>A : 校验错误列表或通过
A-->>V : 显示校验结果
U->>V : 确认推送
V->>A : pushToMeilisearch(ids)
A->>R : POST /api/models/push-to-search
R->>MS : 写入索引
MS-->>R : 任务 UID
R-->>A : 推送结果
A-->>V : 关闭进度弹窗并刷新

图表来源

章节来源

频响文件上传与存储优化

  • 支持格式
    • CSV、TXT、JSON
    • TXT 自动转换为 CSV（保留频率与幅度列）
  • 存储路径
    • S3 Key 规则：autoeq/measurements/{source}/data/{form}/{brandFirstChar}/{brand model}.csv
    • 上传成功后将 S3 Key 与型号记录关联
  • 读取与展示
    • 仅对特定来源与完整字段的型号允许读取 S3 中的 CSV 内容
    • 提供弹窗展示 CSV 文本内容

章节来源

EQ 缓存查看与动态配置

  • Redis Key 规则：{品牌名称} {型号名称}
  • 功能
    • 列出可用的 Hash Key
    • 展示指定 Key 的 JSON 值（带层级与图标）
    • 支持加载状态指示与空状态提示
  • 适用场景
    • 动态配置 EQ 参数、调试频响数据结构

章节来源

表单字段解析与文件名智能填充

  • 文件名预处理：去除扩展名、合并多余空格
  • 品牌解析策略
    • 优先使用品牌接口返回的品牌名进行最长前缀匹配（支持多词品牌）
    • 回退为“第一个空格”左侧为品牌、右侧为型号
  • 默认阻抗：新增时若未填写，按规则自动填充

章节来源

依赖关系分析

  • 前端依赖
    • Element Plus UI 组件库
    • Axios 请求封装
    • Vue Router 路由守卫
  • 后端依赖
    • Express 路由
    • Sequelize ORM
    • AWS SDK（S3）
    • Redis 客户端
    • Meilisearch 客户端
graph LR
FE_View["前端视图<br/>index.vue"] --> FE_API["前端 API<br/>model.js/brand.js"]
FE_API --> FE_Request["请求封装<br/>request.js"]
FE_API --> BE_Routes["后端路由<br/>models.js/brands.js"]
BE_Routes --> BE_Models["数据模型<br/>Model.js/Brand.js"]
BE_Routes --> BE_Services["服务层<br/>measurementStorage.js/eqCacheStorage.js"]
BE_Routes --> S3["S3 存储"]
BE_Routes --> Redis["Redis 缓存"]
BE_Routes --> MS["Meilisearch"]

图表来源

章节来源

性能考虑

  • 分页与排序
    • 后端限制每页最大 1000 条，避免一次性传输大量数据
    • 排序字段限定为 ID 与创建时间，减少复杂索引需求
  • 文件上传
    • 仅允许特定格式，TXT 自动转换降低客户端处理成本
    • S3 上传采用内存存储，注意控制文件大小与并发
  • 缓存与索引
    • EQ 缓存仅列出 Hash Key，避免一次性返回大体积 JSON
    • 推送搜索采用异步任务与进度弹窗，提升用户体验

故障排查指南

  • 登录与鉴权
    • 401：令牌失效或缺失，自动跳转登录页
    • 403：无权限执行操作
  • 网络与超时
    • 请求超时：检查后端服务与网络连通性
    • 响应错误：查看控制台日志与消息提示
  • 品牌与型号
    • 品牌名称重复：确保品牌唯一性
    • 型号重复：同一品牌下型号名称唯一
  • 文件上传
    • 不支持的文件格式：确认扩展名为 CSV/TXT/JSON
    • TXT 转换失败：检查文件内容格式是否符合预期
  • S3 与 Redis
    • 读取失败：确认 S3 Key 是否正确、对象是否存在
    • 缓存为空：确认型号 EQ 缓存是否已生成

章节来源

结论

型号管理页面提供了完整的型号生命周期管理能力：从列表检索、表单录入与校验，到文件上传与外部系统集成（S3、Redis、Meilisearch），再到批量操作与可视化展示。当前实现以字符串关联品牌，具备良好的扩展性；建议在后续版本中引入外键约束与更严格的级联策略，进一步提升数据一致性与安全性。

附录

  • API 一览
    • 获取型号列表：GET /api/models/
    • 获取单个型号：GET /api/models/:id
    • 创建型号：POST /api/models/
    • 更新型号：PUT /api/models/:id
    • 删除型号：DELETE /api/models/:id
    • 推送搜索校验：POST /api/models/push-to-search/validate
    • 推送搜索：POST /api/models/push-to-search
    • 查看 Meilisearch 推送：GET /api/models/:id/meilisearch
    • 查看频响 CSV：GET /api/models/:id/measurement
    • 查看 EQ 缓存：GET /api/models/:id/eq-cache
    • 查看 EQ 缓存字段：GET /api/models/:id/eq-cache/field?key=...
    • 获取品牌列表：GET /api/brands/
    • 获取单个品牌：GET /api/brands/:id
    • 创建品牌：POST /api/brands/
    • 更新品牌：PUT /api/brands/:id
    • 删除品牌：DELETE /api/brands/:id

章节来源

Reference in New Issue View Git Blame Copy Permalink