72 lines
2.2 KiB
Markdown
72 lines
2.2 KiB
Markdown
# 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确保增量验证
|
||
- 属性测试验证通用正确性属性
|
||
|