HaniBlindBox/.kiro/specs/diamond-mall-frontend/tasks.md

# Implementation Plan: 钻石商城模块前端迁移

## Overview

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

## 任务概览

| 阶段 | 任务数 | 预计工时 |
|------|--------|----------|
| 1. 后端API开发 | 6 | 4h |
| 2. Checkpoint - 后端API验证 | 1 | 0.5h |
| 3. 前端API层开发 | 2 | 1.5h |
| 4. 前端钻石商品页面 | 5 | 5h |
| 5. Checkpoint - 页面功能验证 | 1 | 0.5h |
| 6. 路由和菜单配置 | 2 | 1h |
| 7. Checkpoint - 完整功能验证 | 1 | 0.5h |
| 8. 属性测试 | 6 | 2h |
| 9. Final Checkpoint | 1 | 0.5h |
| **总计** | **25** | **15.5h** |

---

## Tasks

- [x] 1. 后端API开发
  - [x] 1.1 创建钻石商品Models
    - 在 `HoneyBox.Admin.Business/Models/Diamond/` 创建目录
    - 创建 `DiamondModels.cs` 定义请求和响应模型
    - 定义 `DiamondProductListRequest` 列表查询请求
    - 定义 `DiamondProductResponse` 商品响应模型
    - 定义 `DiamondProductCreateRequest` 新增请求
    - 定义 `DiamondProductUpdateRequest` 编辑请求
    - 定义 `DiamondProductStatusRequest` 状态切换请求
    - _Requirements: 8.1_

  - [x] 1.2 创建钻石商品Service接口
    - 在 `HoneyBox.Admin.Business/Services/Interfaces/` 创建 `IDiamondService.cs`
    - 定义 `GetDiamondProductsAsync` 列表查询方法
    - 定义 `GetDiamondProductByIdAsync` 详情查询方法
    - 定义 `CreateDiamondProductAsync` 新增方法
    - 定义 `UpdateDiamondProductAsync` 编辑方法
    - 定义 `DeleteDiamondProductAsync` 删除方法
    - 定义 `UpdateDiamondProductStatusAsync` 状态切换方法
    - 定义 `GetMaxSortOrderAsync` 获取最大排序值方法
    - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6_

  - [x] 1.3 实现钻石商品Service
    - 在 `HoneyBox.Admin.Business/Services/` 创建 `DiamondService.cs`
    - 实现列表查询逻辑，支持名称和状态筛选
    - 实现分页逻辑
    - 实现新增商品逻辑，验证必填字段
    - 实现编辑商品逻辑
    - 实现删除商品逻辑
    - 实现状态切换逻辑
    - 实现获取最大排序值逻辑
    - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6_

  - [x] 1.4 创建钻石商品Controller
    - 在 `HoneyBox.Admin.Business/Controllers/` 创建 `DiamondController.cs`
    - 实现 `GET /api/business/diamond` 列表查询接口
    - 实现 `GET /api/business/diamond/{id}` 详情查询接口
    - 实现 `POST /api/business/diamond` 新增接口
    - 实现 `PUT /api/business/diamond/{id}` 编辑接口
    - 实现 `DELETE /api/business/diamond/{id}` 删除接口
    - 实现 `PUT /api/business/diamond/{id}/status` 状态切换接口
    - 实现 `GET /api/business/diamond/max-sort` 获取最大排序值接口
    - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6_

  - [x] 1.5 注册钻石商品服务
    - 在 `ServiceCollectionExtensions.cs` 注册 `IDiamondService` 和 `DiamondService`
    - _Requirements: 8.1_

  - [x] 1.6 创建菜单SQL脚本
    - 在 `HoneyBox/scripts/` 创建 `seed_diamond_management_menus.sql`
    - 添加钻石商城菜单项
    - 添加相关权限配置
    - _Requirements: 7.3_

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

- [x] 3. 前端API层开发
  - [x] 3.1 创建钻石商品API模块
    - 创建 `src/api/business/diamond.ts`
    - 定义所有TypeScript接口（DiamondProductListRequest, DiamondProductResponse等）
    - 实现钻石商品列表查询API调用 `getDiamondProducts`
    - 实现钻石商品详情查询API调用 `getDiamondProductById`
    - 实现钻石商品新增API调用 `createDiamondProduct`
    - 实现钻石商品编辑API调用 `updateDiamondProduct`
    - 实现钻石商品删除API调用 `deleteDiamondProduct`
    - 实现钻石商品状态切换API调用 `updateDiamondProductStatus`
    - 实现获取最大排序值API调用 `getDiamondMaxSort`
    - _Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7_

  - [ ]* 3.2 编写API模块单元测试
    - 创建 `src/api/business/diamond.test.ts`
    - 测试API调用参数构造
    - 测试响应数据处理
    - _Requirements: 6.8_

- [x] 4. 前端钻石商品页面开发
  - [x] 4.1 创建钻石商品列表主页面
    - 创建 `src/views/business/diamond/list.vue`
    - 实现页面布局（搜索区 + 表格区）
    - 集成搜索表单和表格组件
    - 实现分页逻辑
    - 实现新增、编辑、删除操作
    - _Requirements: 1.1, 1.3, 1.5, 1.6_

  - [x] 4.2 创建钻石商品搜索表单组件
    - 创建 `src/views/business/diamond/components/DiamondSearchForm.vue`
    - 实现商品名称输入框
    - 实现状态下拉选择（启用/禁用）
    - 实现搜索和重置按钮
    - _Requirements: 1.2_

  - [x] 4.3 创建钻石商品表格组件
    - 创建 `src/views/business/diamond/components/DiamondTable.vue`
    - 实现表格列配置（ID、商品名称、商品编号、价格、是否首充、展示图、排序、状态、时间）
    - 实现图片预览功能
    - 实现状态开关切换
    - 实现操作按钮（编辑、删除）
    - _Requirements: 1.1, 1.4, 1.5, 1.6_

  - [x] 4.4 创建钻石商品表单弹窗
    - 创建 `src/views/business/diamond/components/DiamondFormDialog.vue`
    - 实现商品基本信息表单（名称、编号、类型、价格）
    - 实现赠送货币配置
    - 实现图片上传（非首充展示图、非首充选中图）
    - 实现是否首充单选框
    - 实现首充相关字段条件显示（首充额外赠送货币、首充展示图、首充选中图）
    - 实现排序和状态配置
    - 实现表单验证
    - 实现提交逻辑
    - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 3.1, 3.2, 3.3, 3.4, 3.5_

  - [x] 4.5 创建赠送货币配置组件
    - 创建 `src/views/business/diamond/components/RewardConfigInput.vue`
    - 实现货币类型选择（钻石/积分/UU币等）
    - 实现数量输入
    - 实现多条货币配置
    - 实现JSON序列化/反序列化
    - _Requirements: 4.1, 4.2, 4.3, 4.4_

- [x] 5. Checkpoint - 页面功能验证
  - 确保钻石商品列表页面正常显示
  - 测试搜索和分页功能
  - 测试新增商品功能
  - 测试编辑商品功能
  - 测试删除商品功能
  - 测试状态切换功能
  - 测试首充字段条件显示

- [x] 6. 路由和菜单配置
  - [x] 6.1 配置路由
    - 在 `src/router/modules/business.ts` 添加钻石商城路由配置
    - 配置钻石商品列表路由 `/business/diamond/list`
    - 配置权限标识 `diamond:list`, `diamond:add`, `diamond:edit`, `diamond:delete`
    - _Requirements: 7.1, 7.2_

  - [x] 6.2 执行菜单SQL脚本
    - 执行 `seed_diamond_management_menus.sql` 添加菜单
    - 验证菜单显示正常
    - _Requirements: 7.3_

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

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

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

  - [ ]* 8.3 编写表单必填字段验证属性测试
    - **Property 3: 表单必填字段验证**
    - **Validates: Requirements 2.2, 2.6, 3.4**

  - [ ]* 8.4 编写赠送货币配置序列化属性测试
    - **Property 4: 赠送货币配置序列化**
    - **Validates: Requirements 4.2, 4.3, 4.4**

  - [ ]* 8.5 编写状态切换参数传递属性测试
    - **Property 5: 状态切换参数正确传递**
    - **Validates: Requirements 1.4**

  - [ ]* 8.6 编写错误响应格式一致性属性测试
    - **Property 6: 错误响应格式一致性**
    - **Validates: Requirements 6.8**

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

---

## 验收检查清单

### 功能验收
- [ ] 钻石商品列表正常显示，支持搜索、分页
- [ ] 钻石商品新增功能正常
- [ ] 钻石商品编辑功能正常
- [ ] 钻石商品删除功能正常（有二次确认）
- [ ] 钻石商品状态切换功能正常
- [ ] 首充字段条件显示正常
- [ ] 赠送货币配置功能正常
- [ ] 图片上传和预览功能正常
- [ ] 表单验证正常

### 非功能验收
- [ ] 分页加载性能正常
- [ ] 图片懒加载生效
- [ ] 表单验证实时反馈
- [ ] 操作提示正确显示
- [ ] 危险操作有二次确认
- [ ] 属性测试全部通过

## Notes

- 每个Checkpoint确保增量验证
- 后端API需要先完成才能进行前端开发
- 属性测试验证通用正确性属性
- 赠送货币配置是核心功能，需要仔细测试JSON序列化
- 首充字段条件显示需要测试各种场景
- 任务标记 `*` 为可选任务，可根据时间情况决定是否执行