57 lines
1.7 KiB
Markdown
57 lines
1.7 KiB
Markdown
# 测试流程颜色图例功能实现说明
|
||
|
||
## 实现概述
|
||
|
||
已成功为测试流程列表页面添加颜色图例功能，解决了用户无法理解彩色标签含义的问题。
|
||
|
||
## 实现的功能
|
||
|
||
### 1. 颜色分配函数 (`getCategoryColor`)
|
||
- 基于分类ID使用模运算计算颜色索引
|
||
- 确保同一分类在所有位置显示相同颜色
|
||
- 处理边界情况（空ID、空颜色数组等）
|
||
|
||
### 2. 更新表格标签渲染
|
||
- 将原来基于索引的颜色分配改为基于分类ID
|
||
- 调用 `getCategoryColor(tag.test_category_id)` 确保颜色一致性
|
||
|
||
### 3. 颜色图例组件
|
||
- 在操作按钮行和数据表格之间添加图例
|
||
- 显示所有测试分类及其对应的颜色
|
||
- 包含颜色方块和分类名称
|
||
|
||
### 4. 样式实现
|
||
- 图例容器：浅灰色背景 (#f5f7fa)，圆角边框
|
||
- 颜色方块：12px × 12px，带圆角
|
||
- 响应式布局：小屏幕垂直堆叠，大屏幕水平排列
|
||
- 使用 flexbox 和 gap 属性确保间距一致
|
||
|
||
## 修改的文件
|
||
|
||
- `ruoyi-fastapi-frontend/src/views/system/test_flow/index.vue`
|
||
- 添加 `getCategoryColor` 方法
|
||
- 更新表格标签渲染逻辑
|
||
- 添加颜色图例HTML结构
|
||
- 添加CSS样式
|
||
|
||
## 验证结果
|
||
|
||
✅ 无语法错误
|
||
✅ 无TypeScript/ESLint诊断问题
|
||
✅ 颜色分配逻辑正确实现
|
||
✅ 图例组件正确渲染
|
||
✅ 样式符合设计规范
|
||
|
||
## 使用说明
|
||
|
||
1. 打开测试流程列表页面
|
||
2. 在操作按钮下方会看到颜色图例
|
||
3. 图例显示所有测试分类及其对应的颜色
|
||
4. 表格中的测试项标签颜色与图例一致
|
||
|
||
## 注意事项
|
||
|
||
- 颜色图例仅在有分类数据时显示
|
||
- 颜色分配基于分类ID，确保跨页面一致性
|
||
- 支持响应式布局，适配不同屏幕尺寸
|