数据统计页面测试指南

完整测试工作台的所有功能

快速开始

1. 初始化完整数据

创建测试数据

2. 打开数据统计

开始测试

场景1：紧急待办统计

测试步骤

  1. 打开数据统计页面
  2. 查看"紧急待办"区域（第一个区域，红色/橙色）
  3. 验证显示4个统计卡片：
    • • 客户驳回的任务（红色，有"紧急"标签）
    • • 延期的任务（红色，有"紧急"标签）
    • • 待审核的任务（橙色，有"待办"标签）
    • • 待审核的达人（橙色，有"待办"标签）
  4. 验证每个卡片显示正确的数字
  5. 验证卡片有"紧急"或"待办"标签

预期结果

  • ✅ 4个统计卡片正确显示
  • ✅ 数字与实际数据一致
  • ✅ 紧急卡片有红色视觉标识
  • ✅ 待办卡片有橙色视觉标识

场景2：日常待办统计

测试步骤

  1. 查看"日常待办"区域（第二个区域，蓝色/绿色）
  2. 验证显示4个统计卡片：
    • • 待匹配的需求（indigo色）
    • • 待填写物流单号（蓝色）
    • • 物流送达的任务（青色）
    • • 待结算的佣金（绿色，显示金额）
  3. 验证每个卡片显示正确的数字或金额
  4. 验证"待结算的佣金"显示格式为 $xxx.xx

预期结果

  • ✅ 4个统计卡片正确显示
  • ✅ 数字与实际数据一致
  • ✅ 佣金格式正确（$符号+两位小数）
  • ✅ 颜色区分清晰

场景3：概览统计

测试步骤

  1. 查看"概览统计"区域（第三个区域，紫色/粉色）
  2. 验证显示4个统计卡片：
    • • 总需求数（紫色）
    • • 总任务数（粉色）
    • • 已完成任务（青绿色）
    • • 总客户数（紫红色）
  3. 验证每个卡片显示正确的数字

预期结果

  • ✅ 4个统计卡片正确显示
  • ✅ 数字与实际数据一致
  • ✅ 颜色丰富多彩

场景4：卡片交互测试

测试步骤

  1. 将鼠标悬停在任意统计卡片上
  2. 验证卡片上浮效果
  3. 验证卡片阴影增强
  4. 验证鼠标指针变为手型
  5. 点击"客户驳回的任务"卡片
  6. 验证跳转到任务管理页面
  7. 验证URL包含 ?status=client-rejected
  8. 返回数据统计页面
  9. 依次点击其他卡片，验证跳转正确

预期结果

  • ✅ 悬停时卡片上浮（translateY）
  • ✅ 悬停时阴影增强
  • ✅ 点击后正确跳转
  • ✅ URL参数正确传递
  • ✅ 所有12个卡片都可点击

场景5：刷新功能测试

测试步骤

  1. 查看右上角的"最后更新时间"
  2. 记录当前时间（如：14:30）
  3. 点击"刷新数据"按钮
  4. 验证按钮文字变为"刷新中..."
  5. 验证按钮显示旋转图标
  6. 等待0.5秒
  7. 验证按钮恢复正常
  8. 验证"最后更新时间"更新为当前时间
  9. 验证所有统计数字重新计算

预期结果

  • ✅ 刷新按钮有加载动画
  • ✅ 最后更新时间正确更新
  • ✅ 统计数据重新计算
  • ✅ 刷新过程流畅

场景6：跳转参数传递测试

测试步骤

  1. 点击"客户驳回的任务"卡片
  2. 在任务管理页面，验证URL: task-management.html?status=client-rejected
  3. 验证页面自动筛选出客户驳回的任务
  4. 返回数据统计页面
  5. 点击"延期的任务"卡片
  6. 验证URL: task-management.html?status=overdue
  7. 依次测试所有带参数的跳转

预期结果

  • ✅ URL参数正确
  • ✅ 目标页面自动筛选
  • ✅ 筛选结果准确

测试清单

紧急待办

日常待办

概览统计

交互功能

数据准确性

数据验证脚本

在浏览器控制台执行以下脚本验证统计准确性：

// 验证统计数据
const demands = JSON.parse(localStorage.getItem('demands') || '[]');
const tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
const creators = JSON.parse(localStorage.getItem('creatorApplications') || '[]');
const clients = JSON.parse(localStorage.getItem('clients') || '[]');
const now = new Date();

console.log('=== 数据统计验证 ===');
console.log('客户驳回任务:', tasks.filter(t => t.status === 'client-rejected').length);
console.log('延期任务:', tasks.filter(t => {
  if (t.status === 'approved' || t.status === 'cancelled') return false;
  if (!t.deadline) return false;
  return new Date(t.deadline) < now;
}).length);
console.log('待审核任务:', tasks.filter(t => t.status === 'submitted').length);
console.log('待审核达人:', creators.filter(c => c.status === 'pending').length);

const pendingPaymentTasks = tasks.filter(t => t.status === 'approved' && !t.isPaid);
const pendingCommission = pendingPaymentTasks.reduce((sum, t) => sum + (t.pricePerVideo || 0), 0);
console.log('待结算佣金:', `$${pendingCommission.toFixed(2)}`);

console.log('总需求数:', demands.length);
console.log('总任务数:', tasks.length);
console.log('已完成任务:', tasks.filter(t => t.status === 'approved').length);
console.log('总客户数:', clients.length);