geo/docs/tasks/02-健康状态Dashboard任务规范.md

GEO平台 健康状态Dashboard 任务规范

任务目标

改造现有Dashboard为"健康状态仪表盘"，让用户5秒内理解业务状态

参考设计

见文档: /Users/Chiguyong/Code/Fischer/geo/docs/8-产品优化/GEO平台用户体验优化方案-v1.0.md 第4节

功能要求

1. 顶部概览区（4个核心指标卡片）

指标	展示内容	颜色/图标
综合评分	大数字 + /100 + 健康等级	绿/黄/橙/红
竞品地位	领先X竞品 / 落后X竞品	绿/红
趋势	百分比变化 + 箭头	绿↑/红↓
监控平台	X/7 平台监控中	蓝色

2. 健康等级标准

等级	分数范围	颜色	图标
优秀	80-100	绿色	✓
良好	60-79	黄色	~
及格	40-59	橙色	!
危险	0-39	红色	⚠️

3. 平台评分列表

每个平台展示：

• 平台名称 + 图标
• 可视化进度条（0-100）
• 具体分数
• 与竞品对比箭头（↑领先/↓落后 + 分差）
• 危险平台红色高亮

4. 下一步行动区

固定展示3个行动建议：

• 主要行动（最高优先级）
• 次要行动（建议项）
• 可选行动（高级功能）

每个行动：

• 图标 + 描述文字
• 点击跳转链接
• 优先级标识

5. 技术要求

• 复用现有Dashboard组件结构
• 增量开发，不破坏现有功能
• 响应式设计（移动端适配）
• 性能优化（骨架屏）

测试要求

3.1 单元测试

• 健康等级计算函数测试
• 指标格式化测试
• 行动建议生成逻辑测试

3.2 E2E测试

• Dashboard渲染测试
• 健康状态显示测试
• 行动建议点击跳转测试

验收标准

1. ✅ 综合评分以大数字+健康等级方式展示
2. ✅ 使用颜色传达状态（绿=优秀，红=危险）
3. ✅ 每个平台显示与竞品对比（↑↓+分差）
4. ✅ 危险平台有视觉警示（红色+图标）
5. ✅ 底部显示3个行动建议
6. ✅ 点击行动可跳转到对应功能
7. ✅ 加载时显示骨架屏
8. ✅ 移动端适配良好

文件位置

• 前端: /Users/Chiguyong/Code/Fischer/geo/frontend/app/(dashboard)/dashboard/page.tsx
• 组件: /Users/Chiguyong/Code/Fischer/geo/frontend/components/dashboard/
• 测试: /Users/Chiguyong/Code/Fischer/geo/frontend/e2e/tests/dashboard-health.spec.ts