76 lines
2.1 KiB
Markdown
76 lines
2.1 KiB
Markdown
|
# 实施计划
|
|||
|
|
|
|||
|
|
- [x] 1. 实现颜色分配函数
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 在 `test_flow/index.vue` 中添加 `getCategoryColor` 方法
|
|||
|
|
- 使用分类ID的模运算来计算颜色索引
|
|||
|
|
- 确保函数返回 tagColors 数组中的有效颜色
|
|||
|
|
- _需求: 3.1, 3.2, 3.3, 3.5_
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- [ ] 1.1 编写颜色分配函数的属性测试
|
|||
|
|
- **属性 1: 颜色一致性**
|
|||
|
|
|
|||
|
|
- **验证: 需求 1.2, 2.1, 3.1, 3.2, 3.4**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- [ ] 1.2 编写颜色来源有效性的属性测试
|
|||
|
|
- **属性 4: 颜色来源有效性**
|
|||
|
|
- **验证: 需求 3.3**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- [ ] 2. 更新表格标签渲染逻辑
|
|||
|
|
- 修改测试项列的模板代码
|
|||
|
|
- 将基于索引的颜色分配改为基于分类ID的颜色分配
|
|||
|
|
- 调用 `getCategoryColor(tag.test_category_id)` 替代 `tagColors[index % tagColors.length]`
|
|||
|
|
- _需求: 1.2, 2.1, 3.1, 3.4_
|
|||
|
|
|
|||
|
|
|
|||
|
|
- [ ] 3. 创建颜色图例组件
|
|||
|
|
- 在表格上方添加图例容器
|
|||
|
|
- 遍历 `categoryOptions` 数组生成图例项
|
|||
|
|
|
|||
|
|
- 每个图例项包含颜色方块和分类名称
|
|||
|
|
- 应用样式：背景色、内边距、边框圆角
|
|||
|
|
|
|||
|
|
|
|||
|
|
- _需求: 1.1, 1.3, 1.4, 1.5_
|
|||
|
|
|
|||
|
|
- [ ] 3.1 编写图例完整性的属性测试
|
|||
|
|
- **属性 2: 图例完整性**
|
|||
|
|
- **验证: 需求 1.4**
|
|||
|
|
|
|||
|
|
|
|||
|
|
- [x] 3.2 编写图例项结构完整性的属性测试
|
|||
|
|
|
|||
|
|
|
|||
|
|
- **属性 3: 图例项结构完整性**
|
|||
|
|
- **验证: 需求 1.3**
|
|||
|
|
|
|||
|
|
- [ ] 4. 实现图例样式
|
|||
|
|
- 添加图例容器样式（背景色 #f5f7fa，内边距 10px 15px，圆角 4px）
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 添加图例项样式（颜色方块 12px × 12px，文字 14px，项间距 15px）
|
|||
|
|
- 实现响应式布局（小屏幕垂直堆叠，大屏幕水平排列）
|
|||
|
|
- _需求: 2.1, 2.2, 2.3, 2.4, 2.5_
|
|||
|
|
|
|||
|
|
- [ ] 4.1 编写图例项间距一致性的属性测试
|
|||
|
|
- **属性 5: 图例项间距一致性**
|
|||
|
|
- **验证: 需求 2.4**
|
|||
|
|
|
|||
|
|
- [ ] 5. 测试和验证
|
|||
|
|
- 在浏览器中测试页面加载和图例显示
|
|||
|
|
- 验证图例和表格标签颜色一致性
|
|||
|
|
- 测试不同屏幕尺寸下的响应式布局
|
|||
|
|
- 验证边界情况（无分类、单个分类、大量分类）
|
|||
|
|
- _需求: 所有需求_
|
|||
|
|
|
|||
|
|
- [ ] 6. 检查点 - 确保所有测试通过
|
|||
|
|
- 确保所有测试通过，如有问题请询问用户
|