5.0 KiB

Raw Permalink Blame History

设计文档

概述

本设计为测试流程列表页面添加颜色图例功能。图例将显示在表格上方，展示所有测试分类及其对应的颜色，帮助用户快速理解表格中彩色标签的含义。

架构

前端组件架构

test_flow/index.vue
├── 查询表单区域
├── 操作按钮区域
├── 颜色图例组件 (新增)
│   └── 分类颜色映射显示
├── 数据表格
│   └── 测试项列（使用彩色标签）
└── 分页组件

颜色分配策略

使用一致的颜色分配算法，确保同一测试分类在所有地方都显示相同的颜色：

基于分类ID的哈希值来分配颜色索引
使用模运算确保颜色索引在可用颜色范围内
颜色数组：['#409EFF', '#67C23A', '#909399', '#E6A23C', '#F56C6C', '#8E44AD', '#FF7F50']

组件和接口

1. 颜色图例组件

位置: 在操作按钮行和数据表格之间

数据源:

categoryOptions: 从后端API获取的所有测试分类列表
tagColors: 预定义的颜色数组

显示逻辑:

// 为每个分类计算一致的颜色索引
getCategoryColor(categoryId) {
  const colorIndex = categoryId % this.tagColors.length;
  return this.tagColors[colorIndex];
}

2. 表格标签渲染更新

当前实现问题:

使用数组索引 index % tagColors.length 分配颜色
同一分类在不同行可能显示不同颜色

改进方案:

改用分类ID来计算颜色索引
确保同一分类始终显示相同颜色

// 修改前
:style="{backgroundColor: tagColors[index % tagColors.length]}"

// 修改后
:style="{backgroundColor: getCategoryColor(tag.test_category_id)}"

数据模型

测试分类数据结构

{
  id: Number,           // 分类ID
  name: String,         // 分类名称
  // ... 其他字段
}

图例项数据结构

{
  categoryId: Number,   // 分类ID
  categoryName: String, // 分类名称
  color: String        // 十六进制颜色值
}

正确性属性

属性是指在系统所有有效执行中都应该成立的特征或行为——本质上是关于系统应该做什么的正式声明。属性作为人类可读规范和机器可验证正确性保证之间的桥梁。

属性 1: 颜色一致性

对于任何 测试分类ID，无论在图例中还是在表格标签中，多次调用颜色计算函数都应该返回相同的颜色值 验证: 需求 1.2, 2.1, 3.1, 3.2, 3.4

属性 2: 图例完整性

对于任何 分类列表，图例中显示的分类数量应该等于输入的分类数量 验证: 需求 1.4

属性 3: 图例项结构完整性

对于任何 图例项，渲染后的DOM元素应该同时包含颜色方块和分类名称文本 验证: 需求 1.3

属性 4: 颜色来源有效性

对于任何 分类ID，分配的颜色应该存在于预定义的tagColors数组中 验证: 需求 3.3

属性 5: 图例项间距一致性

对于任何 相邻的图例项对，它们之间的间距应该相等 验证: 需求 2.4

错误处理

1. 分类数据加载失败

场景: API请求失败或返回空数据
处理: 显示空图例或提示信息，不影响表格正常显示

2. 颜色数组未定义

场景: tagColors数组为空或未初始化
处理: 使用默认颜色或灰色作为后备方案

3. 分类ID无效

场景: 分类ID为null、undefined或非数字
处理: 使用默认颜色索引0

测试策略

单元测试

颜色计算函数测试
- 测试相同ID返回相同颜色
- 测试不同ID可能返回不同颜色
- 测试边界情况（ID为0、负数、很大的数）
图例渲染测试
- 测试空分类列表的渲染
- 测试单个分类的渲染
- 测试多个分类的渲染

集成测试

端到端显示测试
- 验证图例和表格标签颜色一致
- 验证页面加载后图例正确显示
- 验证响应式布局在不同屏幕尺寸下的表现

视觉回归测试

截图对比测试，确保UI变更不影响现有布局
验证颜色对比度满足可访问性标准

UI设计规范

图例布局

┌─────────────────────────────────────────────────┐
│ 测试项图例：                                      │
│ ■ 分类1  ■ 分类2  ■ 分类3  ■ 分类4  ■ 分类5      │
└─────────────────────────────────────────────────┘

样式规范

图例容器:
- 背景色: #f5f7fa
- 内边距: 10px 15px
- 边框圆角: 4px
- 外边距: 10px 0
图例项:
- 颜色方块: 12px × 12px
- 方块圆角: 2px
- 文字大小: 14px
- 项间距: 15px
响应式:
- 小屏幕: 垂直堆叠
- 大屏幕: 水平排列，自动换行

5.0 KiB Raw Permalink Blame History Unescape Escape