HaniBlindBox/.kiro/specs/dashboard-overview/tasks.md

Implementation Plan: 仪表盘数据概览卡片

Overview

本实现计划将仪表盘数据概览卡片从老项目迁移到新项目。后端API已完成，主要工作是前端API层开发和页面更新。

Tasks

• 1. 验证后端API

  • 1.1 测试仪表盘API可用性
    • 使用Swagger或Postman测试 GET /api/admin/business/dashboard
    • 验证返回数据结构符合预期
    • 确认权限验证正常工作
    • Requirements: 3.1

• 2. 前端API层开发

  • 2.1 创建仪表盘API模块
    • 创建 src/api/business/dashboard.ts
    • 定义 DashboardOverview TypeScript接口
    • 实现 getDashboardOverview API调用函数
    • Requirements: 3.1, 3.3

• 3. 前端页面开发

  • 3.1 更新仪表盘页面数据概览卡片

    • 更新 src/views/dashboard/index.vue
    • 定义卡片配置数组（4个卡片）
    • 实现数据加载逻辑（调用API）
    • 实现错误处理和降级展示
    • Requirements: 1.1, 1.6, 1.7

  • 3.2 实现数据概览卡片样式

    • 实现4种渐变背景色（蓝绿、粉黄、红粉、灰色）
    • 实现卡片悬停动画效果
    • 实现响应式布局
    • Requirements: 1.2, 1.3, 1.4, 1.5, 2.1, 2.3

  • 3.3 实现金额格式化

    • 创建金额格式化工具函数
    • 应用到金额类型卡片
    • Requirements: 2.4

• 4. Checkpoint - 功能验证

  • 确保仪表盘页面正常显示4个数据概览卡片
  • 测试数据加载和展示
  • 测试错误处理
  • 确保所有测试通过，如有问题询问用户

• 5. 属性测试

  • 5.1 编写卡片配置完整性属性测试

    • Property 1: 卡片结构完整性
    • Validates: Requirements 2.2

  • 5.2 编写金额格式化属性测试

    • Property 2: 金额格式化正确性
    • Validates: Requirements 2.4

  • 5.3 编写数据映射一致性属性测试

    • Property 3: API响应数据展示一致性
    • Validates: Requirements 3.2

• 6. Final Checkpoint - 最终验证

  • 确保所有功能正常工作
  • 确保所有测试通过
  • 如有问题，询问用户

Notes

• 后端API已完成，无需后端开发
• 每个Checkpoint确保增量验证
• 属性测试验证通用正确性属性