outsource/HaniBlindBox
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dca7ba7b1c
HaniBlindBox/.kiro/specs/diamond-mall-frontend/tasks.md
gpu 9e3f782cd9 商城管理
2026-01-18 00:24:19 +08:00

8.9 KiB
Raw Blame History

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

  • 1. 后端API开发

    • 1.1 创建钻石商品Models

      • 在 HoneyBox.Admin.Business/Models/Diamond/ 创建目录
      • 创建 DiamondModels.cs 定义请求和响应模型
      • 定义 DiamondProductListRequest 列表查询请求
      • 定义 DiamondProductResponse 商品响应模型
      • 定义 DiamondProductCreateRequest 新增请求
      • 定义 DiamondProductUpdateRequest 编辑请求
      • 定义 DiamondProductStatusRequest 状态切换请求
      • Requirements: 8.1

    • 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

    • 1.3 实现钻石商品Service

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

    • 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

    • 1.5 注册钻石商品服务

      • 在 ServiceCollectionExtensions.cs 注册 IDiamondService 和 DiamondService
      • Requirements: 8.1

    • 1.6 创建菜单SQL脚本

      • 在 HoneyBox/scripts/ 创建 seed_diamond_management_menus.sql
      • 添加钻石商城菜单项
      • 添加相关权限配置
      • Requirements: 7.3

  • 2. Checkpoint - 后端API验证

    • 确保所有API编译通过
    • 使用Swagger测试API基本功能
    • 确保权限验证正常工作

  • 3. 前端API层开发

    • 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

  • 4. 前端钻石商品页面开发

    • 4.1 创建钻石商品列表主页面

      • 创建 src/views/business/diamond/list.vue
      • 实现页面布局（搜索区 + 表格区）
      • 集成搜索表单和表格组件
      • 实现分页逻辑
      • 实现新增、编辑、删除操作
      • Requirements: 1.1, 1.3, 1.5, 1.6

    • 4.2 创建钻石商品搜索表单组件

      • 创建 src/views/business/diamond/components/DiamondSearchForm.vue
      • 实现商品名称输入框
      • 实现状态下拉选择（启用/禁用）
      • 实现搜索和重置按钮
      • Requirements: 1.2

    • 4.3 创建钻石商品表格组件

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

    • 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

    • 4.5 创建赠送货币配置组件

      • 创建 src/views/business/diamond/components/RewardConfigInput.vue
      • 实现货币类型选择（钻石/积分/UU币等）
      • 实现数量输入
      • 实现多条货币配置
      • 实现JSON序列化/反序列化
      • Requirements: 4.1, 4.2, 4.3, 4.4

  • 5. Checkpoint - 页面功能验证

    • 确保钻石商品列表页面正常显示
    • 测试搜索和分页功能
    • 测试新增商品功能
    • 测试编辑商品功能
    • 测试删除商品功能
    • 测试状态切换功能
    • 测试首充字段条件显示

  • 6. 路由和菜单配置

    • 6.1 配置路由

      • 在 src/router/modules/business.ts 添加钻石商城路由配置
      • 配置钻石商品列表路由 /business/diamond/list
      • 配置权限标识 diamond:list, diamond:add, diamond:edit, diamond:delete
      • Requirements: 7.1, 7.2

    • 6.2 执行菜单SQL脚本

      • 执行 seed_diamond_management_menus.sql 添加菜单
      • 验证菜单显示正常
      • Requirements: 7.3

  • 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序列化
  • 首充字段条件显示需要测试各种场景
  • 任务标记 * 为可选任务，可根据时间情况决定是否执行