1.7 KiB

Raw Permalink Blame History

测试流程颜色图例功能实现说明

实现概述

已成功为测试流程列表页面添加颜色图例功能，解决了用户无法理解彩色标签含义的问题。

实现的功能

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诊断问题 ✅ 颜色分配逻辑正确实现 ✅ 图例组件正确渲染 ✅ 样式符合设计规范

使用说明

打开测试流程列表页面
在操作按钮下方会看到颜色图例
图例显示所有测试分类及其对应的颜色
表格中的测试项标签颜色与图例一致

注意事项

颜色图例仅在有分类数据时显示
颜色分配基于分类ID，确保跨页面一致性
支持响应式布局，适配不同屏幕尺寸