HaniBlindBox/.kiro/specs/user-management-frontend/tasks.md

# Implementation Plan: 用户管理模块前端迁移

## Overview

本实现计划将用户管理模块从老项目（PHP ThinkPHP + Layui）迁移到新项目（ASP.NET Core + Vue 3 + Element Plus）。实现分为后端API补充和前端页面开发两个主要部分。

## Tasks

- [x] 1. 后端API补充 - 用户详情相关
  - [x] 1.1 创建用户盒柜相关模型和API
    - 在 `Models/User/` 下创建 `UserBoxModels.cs`
    - 定义 `UserBoxQuery` 和 `UserBoxItem` 类
    - 在 `UserController.cs` 添加 `GetUserBox` API
    - 在 `IUserBusinessService.cs` 添加接口方法
    - 在 `UserBusinessService.cs` 实现查询逻辑
    - _Requirements: 10.1_

  - [x] 1.2 创建用户订单相关模型和API
    - 在 `Models/User/` 下创建 `UserOrderModels.cs`
    - 定义 `UserOrderQuery` 和 `UserOrderItem` 类
    - 在 `UserController.cs` 添加 `GetUserOrders` API
    - 实现服务层方法
    - _Requirements: 10.2_

  - [x] 1.3 创建流水明细相关模型和API
    - 在 `Models/User/` 下创建 `MoneyDetailModels.cs`
    - 定义 `MoneyDetailQuery` 和 `MoneyDetailItem` 类
    - 在 `UserController.cs` 添加余额/积分/钻石流水明细API
    - 实现服务层方法
    - _Requirements: 10.3_

  - [x] 1.4 创建IP登录历史API
    - 在 `UserController.cs` 添加 `GetUserIpLogs` API
    - 实现服务层方法
    - _Requirements: 10.4_

- [x] 2. 后端API补充 - 统计和操作相关
  - [x] 2.1 创建用户邀请统计API
    - 在 `Models/User/` 下创建 `StatsModels.cs`
    - 定义 `InviteStatsQuery` 和 `InviteStatsItem` 类
    - 在 `UserController.cs` 添加 `GetInviteStats` API
    - 实现服务层方法
    - _Requirements: 10.5_

  - [x] 2.2 创建用户登录统计API
    - 定义 `LoginStatsQuery` 和 `LoginStatsResponse` 类
    - 在 `UserController.cs` 添加 `GetLoginStats` API
    - 实现服务层方法
    - _Requirements: 10.6_

  - [x] 2.3 创建用户盈亏列表API
    - 定义 `ProfitLossListQuery` 和 `ProfitLossItem` 类
    - 在 `UserController.cs` 添加 `GetProfitLossList` API
    - 实现服务层方法
    - _Requirements: 10.7_

  - [x] 2.4 创建用户操作API（绑定手机号、重置签到、清空UID）
    - 在 `UserController.cs` 添加 `BindMobile` API
    - 在 `UserController.cs` 添加 `ResetUserSign` API
    - 在 `UserController.cs` 添加 `ClearUid` API
    - 实现服务层方法
    - _Requirements: 10.8, 10.9, 10.10_

- [x] 3. Checkpoint - 后端API验证
  - 确保所有新增API编译通过
  - 使用Swagger测试API基本功能
  - 确保权限验证正常工作

- [x] 4. 前端API层开发
  - [x] 4.1 创建用户管理API模块
    - 创建 `api/business/user.ts`
    - 定义所有TypeScript接口
    - 实现用户列表查询API调用
    - 实现资金变动API调用
    - 实现状态管理API调用
    - 实现赠送功能API调用
    - _Requirements: 1.1, 2.2, 3.1-3.6, 4.2, 4.4_

  - [x] 4.2 实现用户详情相关API调用
    - 实现用户盒柜查询API调用
    - 实现用户订单查询API调用
    - 实现流水明细查询API调用
    - 实现IP登录历史查询API调用
    - _Requirements: 5.1-5.7_

  - [x] 4.3 实现统计相关API调用
    - 实现用户盈亏列表API调用
    - 实现用户邀请统计API调用
    - 实现用户登录统计API调用
    - 实现VIP等级管理API调用
    - _Requirements: 6.1-6.3, 7.1-7.3, 8.1-8.3, 9.1-9.3_

- [x] 5. 前端用户列表页面开发
  - [x] 5.1 创建用户列表主页面
    - 创建 `views/business/user/index.vue`
    - 实现页面布局和基本结构
    - 集成搜索表单和用户表格组件
    - _Requirements: 1.1_

  - [x] 5.2 创建搜索表单组件
    - 创建 `views/business/user/components/UserSearchForm.vue`
    - 实现UID、推荐人UID、手机号、昵称、IP地址、登录时间范围搜索条件
    - 实现搜索和重置功能
    - _Requirements: 1.2_

  - [x] 5.3 创建用户表格组件
    - 创建 `views/business/user/components/UserTable.vue`
    - 实现用户信息、推荐人、余额、积分、钻石、货币信息、状态等列
    - 实现分页功能
    - 实现操作按钮组
    - _Requirements: 1.3, 1.4, 1.5_

- [x] 6. 前端对话框组件开发
  - [x] 6.1 创建资金变动对话框
    - 创建 `views/business/user/components/MoneyChangeDialog.vue`
    - 实现操作类型选择（充值/扣除）
    - 实现金额输入和备注输入
    - 实现表单验证和提交
    - _Requirements: 2.1, 2.2, 2.3, 2.4_

  - [x] 6.2 创建赠送优惠券对话框
    - 创建 `views/business/user/components/GiftCouponDialog.vue`
    - 实现优惠券列表加载和选择
    - 实现数量输入和提交
    - _Requirements: 4.1, 4.2_

  - [x] 6.3 创建赠送卡牌对话框
    - 创建 `views/business/user/components/GiftCardDialog.vue`
    - 实现盒子选择和奖品联动选择
    - 实现数量输入和提交
    - _Requirements: 4.3, 4.4_

  - [x] 6.4 创建用户盒柜对话框
    - 创建 `views/business/user/components/UserBoxDialog.vue`
    - 实现盒柜列表展示和筛选
    - 实现奖品状态、名称、盒子名称筛选
    - _Requirements: 5.2_

  - [x] 6.5 创建用户订单对话框
    - 创建 `views/business/user/components/UserOrderDialog.vue`
    - 实现订单列表展示和筛选
    - _Requirements: 5.3_

  - [x] 6.6 创建下级用户对话框
    - 创建 `views/business/user/components/UserTeamDialog.vue`
    - 实现下级用户列表展示
    - 实现导出功能
    - _Requirements: 5.1_

  - [x] 6.7 创建流水明细对话框
    - 创建 `views/business/user/components/MoneyDetailDialog.vue`
    - 实现流水列表展示和筛选
    - 支持余额/积分/钻石三种类型
    - _Requirements: 5.4, 5.5, 5.6_

  - [x] 6.8 创建IP登录历史对话框
    - 创建 `views/business/user/components/IpLogDialog.vue`
    - 实现IP登录历史列表展示
    - _Requirements: 5.7_

- [x] 7. Checkpoint - 用户列表页面验证
  - 确保用户列表页面正常显示
  - 测试搜索和分页功能
  - 测试各个对话框的打开和关闭
  - 测试资金变动和状态管理功能

- [x] 8. 前端统计页面开发
  - [x] 8.1 创建用户盈亏统计页面
    - 创建 `views/business/user/profit-loss.vue`
    - 实现盈亏列表展示
    - 实现筛选功能（用户ID、时间范围）
    - 实现盈亏状态颜色区分
    - 实现导出Excel功能
    - _Requirements: 6.1, 6.2, 6.3, 6.4_

  - [x] 8.2 创建VIP等级管理页面
    - 创建 `views/business/user/vip.vue`
    - 实现VIP等级列表展示
    - 实现编辑对话框
    - _Requirements: 7.1, 7.2, 7.3_

  - [x] 8.3 创建用户邀请统计页面
    - 创建 `views/business/user/invite-stats.vue`
    - 实现邀请统计列表展示
    - 实现展开查看被邀请用户详情
    - 实现导出功能
    - _Requirements: 8.1, 8.2, 8.3_

  - [x] 8.4 创建用户登录统计页面
    - 创建 `views/business/user/login-stats.vue`
    - 实现统计图表展示
    - 实现统计类型切换（日/周/月）
    - 实现时间范围选择
    - _Requirements: 9.1, 9.2, 9.3_

- [x] 9. 前端路由配置
  - [x] 9.1 配置业务模块路由
    - 创建 `router/modules/business.ts`
    - 配置用户管理相关路由
    - 配置路由权限

- [x] 10. Checkpoint - 完整功能验证
  - 确保所有页面正常访问
  - 测试完整的用户管理流程
  - 验证权限控制正常工作

- [x] 11. 属性测试
  - [x] 11.1 编写搜索参数传递属性测试
    - **Property 1: 搜索参数正确传递**
    - **Validates: Requirements 1.2**

  - [x] 11.2 编写分页参数传递属性测试
    - **Property 2: 分页参数正确传递**
    - **Validates: Requirements 1.4**

  - [x] 11.3 编写资金变动参数验证属性测试
    - **Property 3: 资金变动参数验证**
    - **Validates: Requirements 2.3**

  - [x] 11.4 编写用户状态切换一致性属性测试
    - **Property 4: 用户状态切换一致性**
    - **Validates: Requirements 3.1, 3.2**

  - [x] 11.5 编写盈亏计算正确性属性测试
    - **Property 5: 盈亏计算正确性**
    - **Validates: Requirements 6.4**

  - [x] 11.6 编写API响应格式一致性属性测试
    - **Property 6: API响应格式一致性**
    - **Validates: Requirements 10.1-10.10**

- [x] 12. Final Checkpoint - 最终验证
  - 确保所有测试通过
  - 确保所有功能正常工作
  - 如有问题，询问用户

## Notes

- 每个Checkpoint确保增量验证
- 属性测试验证通用正确性属性
- 单元测试验证具体示例和边界情况