risingLee
/
ETest-Vue-FastAPI
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity
ETest-Vue-FastAPI/.kiro/specs/test-flow-color-legend/tasks.md

2.1 KiB
Raw Blame History

实施计划

  • 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

  • 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. 检查点 - 确保所有测试通过

    • 确保所有测试通过，如有问题请询问用户