164 lines
6.5 KiB
Markdown
164 lines
6.5 KiB
Markdown
# Implementation Plan: 仪表盘数据看板
|
||
|
||
## Overview
|
||
|
||
本实现计划将仪表盘数据看板模块从老项目（PHP ThinkPHP + Layui）迁移到新项目（ASP.NET Core + Vue 3 + Element Plus）。实现分为后端API开发和前端页面开发两个主要部分。
|
||
|
||
## Tasks
|
||
|
||
- [x] 1. 验证和补充后端API - 今日订单统计
|
||
- [x] 1.1 检查后端是否已有今日订单统计API
|
||
- 检查 `StatisticsController` 是否存在
|
||
- 检查是否有 `GetTodayOrderStats` 方法
|
||
- 如果不存在，需要创建
|
||
- _Requirements: 5.1_
|
||
|
||
- [x] 1.2 创建今日订单统计API（如需要）
|
||
- 在 `Models/Statistics/` 下创建 `TodayOrderStatsResponse.cs`
|
||
- 在 `Services/` 下创建 `IStatisticsService.cs` 接口
|
||
- 在 `Services/` 下创建 `StatisticsService.cs` 实现
|
||
- 在 `Controllers/` 下创建 `StatisticsController.cs`
|
||
- 实现 `GET /api/admin/business/statistics/today-order` 端点
|
||
- _Requirements: 1.2-1.11, 5.1_
|
||
|
||
- [x] 2. 验证和补充后端API - 货币信息统计
|
||
- [x] 2.1 创建货币信息统计API
|
||
- 在 `Models/Statistics/` 下创建 `CurrencyInfoStatsResponse.cs`
|
||
- 在 `IStatisticsService.cs` 添加接口方法
|
||
- 在 `StatisticsService.cs` 实现查询逻辑
|
||
- 在 `StatisticsController.cs` 添加 `GetCurrencyInfoStats` 方法
|
||
- 实现 `GET /api/admin/business/statistics/currency-info` 端点
|
||
- _Requirements: 2.2-2.13, 5.2_
|
||
|
||
- [x] 3. 验证和补充后端API - 收入汇总统计
|
||
- [x] 3.1 创建收入汇总统计API
|
||
- 在 `Models/Statistics/` 下创建 `IncomeSummaryStatsResponse.cs`
|
||
- 在 `IStatisticsService.cs` 添加接口方法
|
||
- 在 `StatisticsService.cs` 实现查询逻辑（包含利润计算）
|
||
- 在 `StatisticsController.cs` 添加 `GetIncomeSummaryStats` 方法
|
||
- 实现 `GET /api/admin/business/statistics/income-summary` 端点
|
||
- _Requirements: 3.2-3.12, 5.3_
|
||
|
||
- [x] 4. 验证和补充后端API - 用户统计
|
||
- [x] 4.1 创建用户统计API
|
||
- 在 `Models/Statistics/` 下创建 `UserStatsResponse.cs`
|
||
- 在 `IStatisticsService.cs` 添加接口方法
|
||
- 在 `StatisticsService.cs` 实现查询逻辑
|
||
- 在 `StatisticsController.cs` 添加 `GetUserStats` 方法
|
||
- 实现 `GET /api/admin/business/statistics/user-stats` 端点
|
||
- _Requirements: 4.2-4.12, 5.4_
|
||
|
||
- [x] 5. Checkpoint - 后端API验证
|
||
- 启动后端服务
|
||
- 使用Swagger测试所有4个统计API
|
||
- 验证返回数据结构符合预期
|
||
- 确保权限验证正常工作
|
||
- 如有问题，询问用户
|
||
|
||
- [x] 6. 前端API层开发
|
||
- [x] 6.1 创建统计API模块
|
||
- 创建 `src/api/business/statistics.ts`
|
||
- 定义 `TodayOrderStats` TypeScript接口
|
||
- 定义 `CurrencyInfoStats` TypeScript接口
|
||
- 定义 `IncomeSummaryStats` TypeScript接口
|
||
- 定义 `UserStats` TypeScript接口
|
||
- 实现 `getTodayOrderStats` API调用函数
|
||
- 实现 `getCurrencyInfoStats` API调用函数
|
||
- 实现 `getIncomeSummaryStats` API调用函数
|
||
- 实现 `getUserStats` API调用函数
|
||
- _Requirements: 5.5, 5.7_
|
||
|
||
- [x] 7. 前端组件开发 - 今日订单卡片
|
||
- [x] 7.1 创建今日订单卡片组件
|
||
- 创建 `src/views/business/statistics/components/TodayOrderCard.vue`
|
||
- 实现卡片布局（3行4列网格）
|
||
- 实现数据展示（10个数据项）
|
||
- 实现加载状态和刷新按钮
|
||
- 实现错误处理和降级展示
|
||
- _Requirements: 1.1-1.12, 6.2, 6.3, 6.4_
|
||
|
||
- [x] 8. 前端组件开发 - 货币信息卡片
|
||
- [x] 8.1 创建货币信息卡片组件
|
||
- 创建 `src/views/business/statistics/components/CurrencyInfoCard.vue`
|
||
- 实现卡片布局（3行4列网格）
|
||
- 实现数据展示（12个数据项：钻石、UU币、达达券的今日/昨日发放/消费）
|
||
- 实现加载状态和刷新按钮
|
||
- 实现错误处理和降级展示
|
||
- _Requirements: 2.1-2.14, 6.2, 6.3, 6.4_
|
||
|
||
- [x] 9. 前端组件开发 - 收入汇总卡片
|
||
- [x] 9.1 创建收入汇总卡片组件
|
||
- 创建 `src/views/business/statistics/components/IncomeSummaryCard.vue`
|
||
- 实现表格布局（11行数据）
|
||
- 实现数据展示（包含利润计算公式）
|
||
- 实现利润负值红色高亮
|
||
- 实现加载状态和刷新按钮
|
||
- 实现错误处理和降级展示
|
||
- _Requirements: 3.1-3.14, 6.2, 6.3, 6.4_
|
||
|
||
- [x] 10. 前端组件开发 - 用户统计卡片
|
||
- [x] 10.1 创建用户统计卡片组件
|
||
- 创建 `src/views/business/statistics/components/UserStatsCard.vue`
|
||
- 实现表格布局（6行2列）
|
||
- 实现数据展示（11个数据项）
|
||
- 实现加载状态和刷新按钮
|
||
- 实现错误处理和降级展示
|
||
- _Requirements: 4.1-4.13, 6.2, 6.3, 6.4_
|
||
|
||
- [x] 11. 前端页面开发 - 数据看板主页面
|
||
- [x] 11.1 创建数据看板主页面
|
||
- 创建 `src/views/business/statistics/data-stand.vue`
|
||
- 实现两列布局
|
||
- 集成4个卡片组件
|
||
- 实现页面加载时自动加载所有卡片数据
|
||
- 实现响应式布局
|
||
- _Requirements: 6.1, 6.5, 6.6_
|
||
|
||
- [x] 12. 前端路由配置
|
||
- [x] 12.1 配置统计模块路由
|
||
- 在 `router/modules/business.ts` 添加数据看板路由
|
||
- 配置路由权限
|
||
- _Requirements: 6.1_
|
||
|
||
- [x] 13. Checkpoint - 功能验证
|
||
- 启动前后端服务
|
||
- 登录后台管理系统
|
||
- 访问数据看板页面
|
||
- 验证4个卡片正常显示数据
|
||
- 测试刷新按钮功能
|
||
- 测试错误处理
|
||
- 如有问题，询问用户
|
||
|
||
- [ ] 14. 属性测试
|
||
- [ ] 14.1 编写今日订单数据一致性属性测试
|
||
- **Property 1: 今日订单数据一致性**
|
||
- **Validates: Requirements 1.2, 1.3, 1.4**
|
||
|
||
- [ ] 14.2 编写货币信息数据非负性属性测试
|
||
- **Property 2: 货币信息数据非负性**
|
||
- **Validates: Requirements 2.2-2.13**
|
||
|
||
- [ ] 14.3 编写利润计算正确性属性测试
|
||
- **Property 3: 利润计算正确性**
|
||
- **Validates: Requirements 3.11**
|
||
|
||
- [ ] 14.4 编写用户统计数据非负性属性测试
|
||
- **Property 4: 用户统计数据非负性**
|
||
- **Validates: Requirements 4.2-4.12**
|
||
|
||
- [ ] 14.5 编写API响应格式一致性属性测试
|
||
- **Property 5: API响应格式一致性**
|
||
- **Validates: Requirements 5.5**
|
||
|
||
- [ ] 15. Final Checkpoint - 最终验证
|
||
- 确保所有功能正常工作
|
||
- 确保所有测试通过
|
||
- 如有问题，询问用户
|
||
|
||
## Notes
|
||
|
||
- 需要先验证后端API是否已完成，如未完成需要新增对应的接口
|
||
- 每个Checkpoint确保增量验证
|
||
- 属性测试验证通用正确性属性
|
||
- 后端API需要排除测试用户数据（istest > 0）
|