产品状态标签显示测试指南
验证需求管理和客户详情中的产品状态标签显示
需求管理测试
测试需求维度
- 1. 打开
demand-management.html
- 2. 切换到"需求维度"标签
- 3. 查看任意需求卡片
- 4. ✅ 验证：头部显示产品状态统计徽章
- 5. 点击"展开产品"按钮
- 6. ✅ 验证：每个产品卡片都显示状态标签
- 7. ✅ 验证：标签在产品名称下方，Offer标签旁边
- 8. ✅ 验证：标签颜色和图标正确
客户详情测试
测试客户需求列表
- 1. 打开
client-management.html
- 2. 点击任意客户卡片
- 3. 进入客户详情页面
- 4. ✅ 验证：头部显示产品状态统计徽章
- 5. 点击"展开产品"按钮
- 6. ✅ 验证：每个产品卡片都显示状态标签
- 7. ✅ 验证：标签样式与需求管理完全一致
- 8. ✅ 验证：标签颜色和图标正确
状态标签测试
待匹配状态
待匹配
灰色 | 无方案或方案中无产品
匹配中状态
匹配中
蓝色 | 有方案但任务未全部生成
交付中状态
交付中
青色 | 任务已生成，部分未完成
已完成状态
已完成
绿色 | 所有任务状态为 approved
一致性验证
头部统计与卡片一致
- • 展开产品后，手动数每种状态的产品数量
- • 对比头部统计的徽章数量
- • 验证数量完全一致
两个页面完全一致
- • 在需求管理中查看某个需求的产品状态
- • 在客户详情中查看同一需求的产品状态
- • 验证状态标签完全相同
- • 验证颜色、图标、文本完全一致
标签换行效果
- • 缩小浏览器窗口宽度
- • 验证标签自动换行
- • 验证卡片不会变形或溢出
测试场景清单
场景1：新创建的需求
🎯 测试步骤：
- 1. 创建一个新需求，添加产品
- 2. 不发布Offer，不生成方案
- 3. 查看需求列表，展开产品
✅ 期望结果：
产品显示 [待发布Offer] [待匹配]
场景2：已发布Offer但无方案
🎯 测试步骤：
- 1. 对某个产品发布Offer
- 2. 不生成方案
- 3. 查看产品状态标签
✅ 期望结果：
产品显示 [Offer已发布] [待匹配]
场景3：已生成方案但任务未完成
🎯 测试步骤：
- 1. 生成方案并选择达人
- 2. 生成部分任务（少于视频需求数）
- 3. 查看产品状态标签
✅ 期望结果：
产品显示 [匹配中]
场景4：任务已生成但未完成
🎯 测试步骤：
- 1. 生成所有需要的任务
- 2. 部分任务未完成（非approved状态）
- 3. 查看产品状态标签
✅ 期望结果：
产品显示 [交付中]
场景5：所有任务已完成
🎯 测试步骤：
- 1. 所有任务状态都为 approved
- 2. 查看产品状态标签
✅ 期望结果：
产品显示 [已完成]
场景6：产品已延期
🎯 测试步骤：
- 1. 找一个deadline已过的产品
- 2. 产品未完成（状态非completed）
- 3. 查看产品状态标签
✅ 期望结果：
产品显示 [已延期] (红色)