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

## Overview

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

## Tasks

- [x] 1. 验证后端API
  - [x] 1.1 测试仪表盘API可用性
    - 使用Swagger或Postman测试 `GET /api/admin/business/dashboard`
    - 验证返回数据结构符合预期
    - 确认权限验证正常工作
    - _Requirements: 3.1_

- [x] 2. 前端API层开发
  - [x] 2.1 创建仪表盘API模块
    - 创建 `src/api/business/dashboard.ts`
    - 定义 `DashboardOverview` TypeScript接口
    - 实现 `getDashboardOverview` API调用函数
    - _Requirements: 3.1, 3.3_

- [x] 3. 前端页面开发
  - [x] 3.1 更新仪表盘页面数据概览卡片
    - 更新 `src/views/dashboard/index.vue`
    - 定义卡片配置数组（4个卡片）
    - 实现数据加载逻辑（调用API）
    - 实现错误处理和降级展示
    - _Requirements: 1.1, 1.6, 1.7_

  - [x] 3.2 实现数据概览卡片样式
    - 实现4种渐变背景色（蓝绿、粉黄、红粉、灰色）
    - 实现卡片悬停动画效果
    - 实现响应式布局
    - _Requirements: 1.2, 1.3, 1.4, 1.5, 2.1, 2.3_

  - [x] 3.3 实现金额格式化
    - 创建金额格式化工具函数
    - 应用到金额类型卡片
    - _Requirements: 2.4_

- [x] 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确保增量验证
- 属性测试验证通用正确性属性