audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(tabs): 更新标签页视图组件设计与交互细节

Browse Source 
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题
- 统一关闭按钮尺寸为14x14px，提升视觉一致性
- 优化活动标签和悬停状态的层级管理，确保视觉层次正确
- 增强视觉反馈，添加内嵌阴影效果改善用户体验
- 添加平滑颜色过渡动画（0.2秒），提升交互流畅度
- 支持玻璃拟态设计系统，实现现代化视觉风格
- 完善工具箱图标支持，确保标签页工具功能准确显示
This commit is contained in:
eafonyang
2026-07-15 09:58:56 +08:00
parent 003b44e2bd
commit f48f1cce70
27 changed files with 670 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.qoder/repowiki/zh/content/前端组件/页面组件/品牌管理页面.md
+38 -24
View File
@@ -18,6 +18,12 @@
- [frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
</cite>
## 更新摘要
**变更内容**
- 更新了搜索和重置按钮的图标实现方式，采用 Vue 3 组合式 API 图标格式（:icon="Search", :icon="Refresh"）替代内联组件
- 提升了界面一致性和性能表现
- 优化了前端组件的图标使用规范
## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
@@ -73,10 +79,10 @@ FE_Layout --> FE_View
```
**图表来源**
- [frontend/src/views/brand/index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
- [frontend/src/views/brand/index.vue:1-302](file://frontend/src/views/brand/index.vue#L1-L302)
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/layout/index.vue:1-338](file://frontend/src/layout/index.vue#L1-L338)
- [frontend/src/router/index.js:1-109](file://frontend/src/router/index.js#L1-L109)
- [frontend/src/layout/index.vue:1-365](file://frontend/src/layout/index.vue#L1-L365)
- [frontend/src/styles/lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
- [backend/src/routes/brands.js:1-147](file://backend/src/routes/brands.js#L1-L147)
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
@@ -88,18 +94,18 @@ FE_Layout --> FE_View
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
**章节来源**
- [frontend/src/views/brand/index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
- [frontend/src/views/brand/index.vue:1-302](file://frontend/src/views/brand/index.vue#L1-L302)
- [backend/src/routes/brands.js:1-147](file://backend/src/routes/brands.js#L1-L147)
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
- [backend/src/validators/brand.js:1-12](file://backend/src/validators/brand.js#L1-L12)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
- [backend/src/utils/response.js:1-25](file://backend/src/utils/response.js#L1-L25)
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/router/index.js:1-109](file://frontend/src/router/index.js#L1-L109)
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
- [backend/src/config/database.js:1-24](file://backend/src/config/database.js#L1-L24)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
- [frontend/src/layout/index.vue:1-338](file://frontend/src/layout/index.vue#L1-L338)
- [frontend/src/layout/index.vue:1-365](file://frontend/src/layout/index.vue#L1-L365)
- [frontend/src/styles/lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
## 核心组件
@@ -117,7 +123,7 @@ FE_Layout --> FE_View
- 布局与主题：深色宇宙风格的主题样式与侧边导航。
**章节来源**
- [frontend/src/views/brand/index.vue:109-276](file://frontend/src/views/brand/index.vue#L109-L276)
- [frontend/src/views/brand/index.vue:100-267](file://frontend/src/views/brand/index.vue#L100-L267)
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
- [backend/src/routes/brands.js:1-147](file://backend/src/routes/brands.js#L1-L147)
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
@@ -127,8 +133,8 @@ FE_Layout --> FE_View
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
- [backend/src/config/database.js:1-24](file://backend/src/config/database.js#L1-L24)
- [backend/src/utils/jwt.js:1-28](file://backend/src/utils/jwt.js#L1-L28)
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
- [frontend/src/layout/index.vue:1-338](file://frontend/src/layout/index.vue#L1-L338)
- [frontend/src/router/index.js:82-106](file://frontend/src/router/index.js#L82-L106)
- [frontend/src/layout/index.vue:1-365](file://frontend/src/layout/index.vue#L1-L365)
- [frontend/src/styles/lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
## 架构总览
@@ -152,7 +158,7 @@ M-->>R : 映射为items与total
R-->>A : ApiResponse.success({items,total})
A-->>V : 返回数据并更新表格与分页
V-->>U : 展示品牌列表
U->>V : 点击“新增/编辑”
U->>V : 点击"新增/编辑"
V->>A : 调用 createBrand 或 updateBrand
A->>R : POST/PUT /api/brands/
R->>M : create/update
@@ -164,7 +170,7 @@ A-->>V : 成功提示并刷新列表
```
**图表来源**
- [frontend/src/views/brand/index.vue:146-275](file://frontend/src/views/brand/index.vue#L146-L275)
- [frontend/src/views/brand/index.vue:136-266](file://frontend/src/views/brand/index.vue#L136-L266)
- [frontend/src/api/brand.js:10-65](file://frontend/src/api/brand.js#L10-L65)
- [backend/src/routes/brands.js:14-144](file://backend/src/routes/brands.js#L14-L144)
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
@@ -174,12 +180,13 @@ A-->>V : 成功提示并刷新列表
### 品牌视图组件（index.vue）
- 搜索与过滤
- 支持按品牌名称模糊查询，清空后重置分页至第1页。
- **已更新** 搜索和重置按钮采用圆形图标格式，使用 Vue 3 组合式 API 图标（:icon="Search", :icon="Refresh"），提升界面一致性和性能。
- 搜索触发后自动刷新列表。
- 分页处理
- 使用 Element Plus 分页组件，支持页大小切换与页码跳转。
- 分页变更时重新加载数据。
- 列表展示
- 展示ID与品牌名称，右侧固定操作列包含“编辑”“删除”按钮。
- 展示ID与品牌名称，右侧固定操作列包含"编辑""删除"按钮。
- 表单与对话框
- 新增/编辑共用对话框，表单包含品牌名称字段与必填校验。
- 提交前进行表单校验，根据是否存在id选择创建或更新。
@@ -190,7 +197,7 @@ A-->>V : 成功提示并刷新列表
flowchart TD
Start(["进入品牌管理"]) --> Load["加载数据<br/>getBrands(skip,limit,name)"]
Load --> Render["渲染表格与分页"]
Render --> Search["搜索/重置"]
Render --> Search["搜索/重置<br/>圆形图标按钮"]
Search --> Load
Render --> AddEdit["新增/编辑"]
AddEdit --> Validate["表单校验"]
@@ -205,10 +212,10 @@ Confirm --> |否| Render
```
**图表来源**
- [frontend/src/views/brand/index.vue:146-275](file://frontend/src/views/brand/index.vue#L146-L275)
- [frontend/src/views/brand/index.vue:136-266](file://frontend/src/views/brand/index.vue#L136-L266)
**章节来源**
- [frontend/src/views/brand/index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
- [frontend/src/views/brand/index.vue:1-302](file://frontend/src/views/brand/index.vue#L1-L302)
### 品牌API封装（brand.js）
- 提供 getBrands、getBrand、createBrand、updateBrand、deleteBrand 方法，分别对应列表查询、详情查询、创建、更新、删除。
@@ -247,7 +254,7 @@ G-->>C : ApiResponse.success({items,total})
### 品牌模型（Brand.js）
- 字段：id（自增主键）、name（字符串，唯一且非空）。
- 表名：brand，注释为“耳机品牌”。
- 表名：brand，注释为"耳机品牌"。
**章节来源**
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
@@ -281,12 +288,12 @@ end
```
**图表来源**
- [frontend/src/router/index.js:64-88](file://frontend/src/router/index.js#L64-L88)
- [frontend/src/router/index.js:82-106](file://frontend/src/router/index.js#L82-L106)
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
**章节来源**
- [frontend/src/router/index.js:1-91](file://frontend/src/router/index.js#L1-L91)
- [frontend/src/router/index.js:1-109](file://frontend/src/router/index.js#L1-L109)
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
@@ -311,7 +318,7 @@ end
- 侧边导航集成品牌管理入口，面包屑与标题动态生成。
**章节来源**
- [frontend/src/layout/index.vue:1-338](file://frontend/src/layout/index.vue#L1-L338)
- [frontend/src/layout/index.vue:1-365](file://frontend/src/layout/index.vue#L1-L365)
- [frontend/src/styles/lux-theme.css:1-471](file://frontend/src/styles/lux-theme.css#L1-L471)
## 依赖关系分析
@@ -333,7 +340,7 @@ App --> DB
```
**图表来源**
- [frontend/src/views/brand/index.vue:113-113](file://frontend/src/views/brand/index.vue#L113-L113)
- [frontend/src/views/brand/index.vue:103-104](file://frontend/src/views/brand/index.vue#L103-L104)
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
- [backend/src/routes/brands.js:1-147](file://backend/src/routes/brands.js#L1-L147)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
@@ -343,7 +350,7 @@ App --> DB
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
**章节来源**
- [frontend/src/views/brand/index.vue:1-311](file://frontend/src/views/brand/index.vue#L1-L311)
- [frontend/src/views/brand/index.vue:1-302](file://frontend/src/views/brand/index.vue#L1-L302)
- [frontend/src/api/brand.js:1-66](file://frontend/src/api/brand.js#L1-L66)
- [backend/src/routes/brands.js:1-147](file://backend/src/routes/brands.js#L1-L147)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
@@ -359,16 +366,18 @@ App --> DB
- 响应与渲染
- 列表加载时使用局部loading遮罩，避免整页闪烁。
- 表格数据项精简，仅传输必要字段（id、name）。
- **已更新** 使用 Vue 3 组合式 API 图标替代内联组件，提升渲染性能和一致性。
- 缓存策略
- 当前未实现专用缓存层；可在网关或Redis层引入读缓存，写操作采用“先写后删”策略，降低数据库热点。
- 当前未实现专用缓存层；可在网关或Redis层引入读缓存，写操作采用"先写后删"策略，降低数据库热点。
- 并发与幂等
- 提交按钮增加loading状态，防止重复提交。
- 后端接口对重复名称进行唯一性校验，避免脏数据。
- 用户体验
- 搜索支持清空重置，提升可用性。
- 对话框内表单即时校验，减少往返。
- **已更新** 统一的圆形图标设计提升界面一致性和可访问性。
[本节为通用指导，不直接分析具体文件，故无“章节来源”]
[本节为通用指导，不直接分析具体文件，故无"章节来源"]
## 故障排除指南
- 登录态异常
@@ -380,12 +389,17 @@ App --> DB
- 启动阶段同步表结构失败时，检查数据库连接参数与权限。
- 接口返回异常
- 统一响应code=0或2表示错误或无数据，前端据此提示并记录日志。
- 图标显示问题
- **新增** 如遇到图标显示异常，检查 @element-plus/icons-vue 是否正确导入，确保 Search、Refresh、Plus 图标已正确注册。
**章节来源**
- [frontend/src/utils/auth.js:1-99](file://frontend/src/utils/auth.js#L1-L99)
- [backend/src/middleware/auth.js:1-36](file://backend/src/middleware/auth.js#L1-L36)
- [backend/src/app.js:42-56](file://backend/src/app.js#L42-L56)
- [backend/src/utils/response.js:1-25](file://backend/src/utils/response.js#L1-L25)
- [frontend/src/views/brand/index.vue:103](file://frontend/src/views/brand/index.vue#L103)
## 结论
品牌管理页面实现了完整的CRUD闭环，具备良好的鉴权与响应一致性。当前版本聚焦基础功能，后续可扩展批量操作、图片上传与预览、关联数据的级联处理与数据完整性校验、以及缓存与性能优化方案，以满足更复杂的业务场景与更高的用户体验要求。
品牌管理页面实现了完整的CRUD闭环，具备良好的鉴权与响应一致性。当前版本聚焦基础功能，后续可扩展批量操作、图片上传与预览、关联数据的级联处理与数据完整性校验、以及缓存与性能优化方案，以满足更复杂的业务场景与更高的用户体验要求。
**最新更新** 通过采用 Vue 3 组合式 API 图标格式，显著提升了界面的统一性和性能表现，为后续功能扩展奠定了更好的技术基础。