outsource/HaniBlindBox
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
71cd3b514b
HaniBlindBox/.kiro/specs/system-config-frontend/tasks.md
gpu 71cd3b514b 配置
2026-01-18 01:29:27 +08:00

13 KiB
Raw Blame History

Implementation Plan: 系统配置模块前端迁移

Overview

本实现计划将系统配置模块从老项目（PHP ThinkPHP + Layui）迁移到新项目（ASP.NET Core + Vue 3 + Element Plus）。后端API已基本完成，主要工作是前端页面开发和后端模型补充。

任务概览

阶段 任务数 预计工时
1. 后端API验证和补充 3 2h
2. Checkpoint - 后端API验证 1 0.5h
3. 前端API层开发 2 1.5h
4. 前端基础设置页面 2 2h
5. 前端微信支付配置页面 3 3h
6. 前端支付宝配置页面 2 2h
7. 前端小程序配置页面 3 3h
8. 前端H5配置页面 3 3h
9. Checkpoint - 支付配置验证 1 0.5h
10. 前端上传配置页面 2 1.5h
11. 前端签到配置页面 2 1h
12. 前端系统设置页面 5 4h
13. Checkpoint - 配置页面验证 1 0.5h
14. 路由和菜单配置 2 1h
15. Checkpoint - 完整功能验证 1 0.5h
16. 属性测试 6 2h
17. Final Checkpoint 1 0.5h
总计 40 28h

Tasks

  • 1. 后端API验证和补充

    • 1.1 验证现有ConfigController API

      • 使用Swagger测试 GET /api/admin/business/config/{key} 接口
      • 测试所有配置键: base, weixinpay_setting, alipay_setting, miniprogram_setting, h5_setting, uploads, sign, systemconfig, app_setting, user_config, infinite_multiple, rank_setting, system_test
      • 验证返回数据格式是否正确
      • Requirements: 10.1, 10.3

    • 1.2 补充支付宝配置验证逻辑

      • 在 AdminConfigService.cs 添加 ValidateAlipaySetting 方法
      • 验证商户列表不为空
      • 验证AppId必填
      • Requirements: 3.3, 3.8

    • 1.3 补充ConfigModels.cs中缺失的模型

      • 添加 AlipaySetting 和 AlipayMerchant 模型
      • 添加 BaseSetting 模型
      • 添加 SignSetting 模型
      • 添加 AppSetting 模型
      • 添加 UserConfig 模型
      • 添加 SystemTest 模型
      • 添加 InfiniteMultiple 模型
      • 添加 RankSetting 模型
      • Requirements: 10.1

  • 2. Checkpoint - 后端API验证

    • 确保所有配置键API正常工作
    • 确保配置保存和获取功能正常
    • 确保验证逻辑正确

  • 3. 前端API层开发

    • 3.1 创建配置管理API模块

      • 创建 src/api/business/config.ts
      • 定义所有TypeScript接口（BaseSetting, WeixinPaySetting, AlipaySetting等）
      • 实现 getConfig<T>(key: ConfigKey) 获取配置API
      • 实现 updateConfig<T>(key: ConfigKey, value: T) 更新配置API
      • 实现 getConfigKeys() 获取配置键列表API
      • Requirements: 10.1, 10.2, 10.3

    • * 3.2 编写API模块单元测试

      • 创建 src/api/business/config.test.ts
      • 测试API调用参数构造
      • 测试响应数据处理
      • Requirements: 10.4, 10.5

  • 4. 前端基础设置页面开发

    • 4.1 创建基础设置页面

      • 创建 src/views/business/config/base.vue
      • 实现页面布局（表单区域）
      • 实现网站名称、物流code、分销比例等基础配置项
      • 实现赏券限制配置（特级/终极/高级/普通）
      • 实现包邮门槛和运费配置
      • 实现锁箱时间配置
      • 实现图片上传（福利进群二维码、分享图片）
      • 实现开关配置（首页弹窗、兑换开关）
      • 实现表单验证和保存功能
      • Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 1.10, 1.11, 1.12

    • * 4.2 编写基础设置页面单元测试

      • 测试表单验证逻辑
      • 测试数据加载和保存
      • Requirements: 1.4

  • 5. 前端微信支付配置页面开发

    • 5.1 创建微信支付配置页面

      • 创建 src/views/business/config/weixinpay.vue
      • 实现页面布局（商户列表区域）
      • 实现商户列表展示
      • 实现添加商户按钮
      • 实现删除商户按钮（至少保留一个）
      • 实现保存按钮
      • Requirements: 2.1, 2.2, 2.7, 2.8

    • 5.2 创建商户表单组件

      • 创建 src/views/business/config/components/WeixinMerchantForm.vue
      • 实现商户名称、MCHID、Key输入
      • 实现订单前缀输入（3位字符验证）
      • 实现权重输入
      • 实现启用状态开关
      • 实现备注输入
      • 实现表单验证（必填、前缀唯一性）
      • Requirements: 2.3, 2.4, 2.5, 2.6

    • * 5.3 编写微信支付配置页面单元测试

      • 测试商户添加和删除逻辑
      • 测试前缀唯一性验证
      • Requirements: 2.4, 2.7

  • 6. 前端支付宝配置页面开发

    • 6.1 创建支付宝配置页面

      • 创建 src/views/business/config/alipay.vue
      • 实现页面布局（商户列表区域）
      • 实现商户列表展示
      • 实现添加/删除商户功能
      • 实现保存功能
      • Requirements: 3.1, 3.2, 3.7, 3.8

    • 6.2 创建支付宝商户表单组件

      • 创建 src/views/business/config/components/AlipayMerchantForm.vue
      • 实现商户名称、AppId输入
      • 实现应用私钥、支付宝公钥文本域
      • 实现权重、启用状态、备注配置
      • 实现表单验证
      • Requirements: 3.3, 3.4, 3.5, 3.6

  • 7. 前端小程序配置页面开发

    • 7.1 创建小程序配置页面

      • 创建 src/views/business/config/miniprogram.vue
      • 实现页面布局（小程序列表区域）
      • 实现小程序列表展示
      • 实现添加/删除小程序功能
      • 实现保存功能（验证必须有默认小程序）
      • Requirements: 4.1, 4.2, 4.8, 4.9

    • 7.2 创建小程序表单组件

      • 创建 src/views/business/config/components/MiniprogramForm.vue
      • 实现小程序名称、AppId、AppSecret输入
      • 实现域名输入
      • 实现订单前缀输入（2位字符验证）
      • 实现是否默认单选框
      • 实现关联商户多选（从微信支付配置获取商户列表）
      • 实现表单验证
      • Requirements: 4.3, 4.4, 4.5, 4.6, 4.7

    • * 7.3 编写小程序配置页面单元测试

      • 测试默认小程序唯一性验证
      • 测试前缀唯一性验证
      • Requirements: 4.4, 4.6

  • 8. 前端H5配置页面开发

    • 8.1 创建H5配置页面

      • 创建 src/views/business/config/h5.vue
      • 实现页面布局（H5应用列表区域）
      • 实现H5应用列表展示
      • 实现添加/删除H5应用功能
      • 实现保存功能（验证必须有默认H5应用）
      • Requirements: 5.1, 5.2, 5.10, 5.11

    • 8.2 创建H5应用表单组件

      • 创建 src/views/business/config/components/H5AppForm.vue
      • 实现H5名称、AppId、AppSecret输入
      • 实现域名输入
      • 实现订单前缀输入（2位字符验证）
      • 实现是否默认单选框
      • 实现支付方式选项卡（支付宝/微信）
      • 实现关联商户选择
      • 实现表单验证
      • Requirements: 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 5.9

    • * 8.3 编写H5配置页面单元测试

      • 测试默认H5应用唯一性验证
      • 测试支付方式切换逻辑
      • Requirements: 5.4, 5.7

  • 9. Checkpoint - 支付配置验证

    • 确保微信支付配置页面正常工作
    • 确保支付宝配置页面正常工作
    • 确保小程序配置页面正常工作
    • 确保H5配置页面正常工作
    • 测试商户添加、删除、保存功能
    • 测试前缀唯一性验证
    • 测试默认唯一性验证

  • 10. 前端上传配置页面开发

    • 10.1 创建上传配置页面

      • 创建 src/views/business/config/uploads.vue
      • 实现页面布局（表单区域）
      • 实现存储类型单选（本地/阿里云/腾讯云）
      • 实现云存储配置字段（空间名称、地域、密钥、域名）
      • 实现根据存储类型显示/隐藏配置字段
      • 实现表单验证和保存功能
      • Requirements: 6.1, 6.2, 6.3, 6.4, 6.5

    • * 10.2 编写上传配置页面单元测试

      • 测试存储类型切换逻辑
      • 测试表单验证
      • Requirements: 6.2, 6.4

  • 11. 前端签到配置页面开发

    • 11.1 创建签到配置页面

      • 创建 src/views/business/config/sign.vue
      • 实现页面布局（表单区域）
      • 实现7天签到奖励配置
      • 实现表单验证（数字验证）
      • 实现保存功能
      • Requirements: 7.1, 7.2, 7.3

    • * 11.2 编写签到配置页面单元测试

      • 测试数字验证逻辑
      • Requirements: 7.2

  • 12. 前端系统设置页面开发

    • 12.1 创建系统设置主页面

      • 创建 src/views/business/config/system.vue
      • 实现页面布局（多卡片区域）
      • 集成各配置卡片组件
      • Requirements: 8.1

    • 12.2 创建应用设置卡片组件

      • 创建 src/views/business/config/components/AppSettingCard.vue
      • 实现项目名称、购买弹窗设置
      • 实现商城购买次数配置
      • 实现货币名称和图标配置（余额/货币1/货币2）
      • 实现中奖音频上传
      • 实现各项限制配置
      • 实现独立保存功能
      • Requirements: 8.2, 8.3, 8.4, 8.5, 8.6, 8.7

    • 12.3 创建用户UID设置卡片组件

      • 创建 src/views/business/config/components/UserConfigCard.vue
      • 实现UID类型单选（真实ID/数字ID/随机字符和数字）
      • 实现UID长度配置（根据类型显示/隐藏）
      • 实现独立保存功能
      • Requirements: 8.8, 8.9

    • 12.4 创建内测配置卡片组件

      • 创建 src/views/business/config/components/SystemTestCard.vue
      • 实现内测开关
      • 实现禁用微信支付开关
      • 实现签到倍数配置
      • 实现独立保存功能
      • Requirements: 8.10, 8.11

    • 12.5 创建排行榜设置卡片组件

      • 创建 src/views/business/config/components/RankSettingCard.vue
      • 实现达达券/钻石/UU币排行榜统计方式配置
      • 实现自定义时间范围配置（根据类型显示/隐藏）
      • 实现无限赏抽奖倍数配置
      • 实现独立保存功能
      • Requirements: 8.12, 8.13, 8.14, 8.15

  • 13. Checkpoint - 配置页面验证

    • 确保基础设置页面正常工作
    • 确保上传配置页面正常工作
    • 确保签到配置页面正常工作
    • 确保系统设置页面各卡片正常工作
    • 测试配置保存和加载功能

  • 14. 路由和菜单配置

    • 14.1 配置路由

      • 在 src/router/modules/business.ts 添加系统配置路由配置
      • 配置基础设置路由 /business/config/base
      • 配置微信支付配置路由 /business/config/weixinpay
      • 配置支付宝配置路由 /business/config/alipay
      • 配置小程序配置路由 /business/config/miniprogram
      • 配置H5配置路由 /business/config/h5
      • 配置上传配置路由 /business/config/uploads
      • 配置签到配置路由 /business/config/sign
      • 配置系统设置路由 /business/config/system
      • 配置权限标识 config:view, config:edit
      • Requirements: 9.1, 9.2, 9.3, 9.4

    • 14.2 创建菜单SQL脚本

      • 在 HoneyBox/scripts/ 创建 seed_system_config_menus.sql
      • 添加系统配置菜单项
      • 添加各子菜单项
      • 添加相关权限配置
      • Requirements: 9.3

  • 15. Checkpoint - 完整功能验证

    • 确保所有页面正常访问
    • 测试完整的配置管理流程
    • 验证权限控制正常工作

  • 16. 属性测试

    • * 16.1 编写配置保存一致性属性测试

      • Property 1: 配置保存后获取一致性
      • Validates: Requirements 1.2, 1.3, 1.4, 7.2

    • * 16.2 编写微信支付商户前缀唯一性属性测试

      • Property 2: 微信支付商户前缀唯一性验证
      • Validates: Requirements 2.4

    • * 16.3 编写小程序默认唯一性属性测试

      • Property 3: 小程序默认唯一性验证
      • Validates: Requirements 4.4, 4.9

    • * 16.4 编写H5应用默认唯一性属性测试

      • Property 4: H5应用默认唯一性验证
      • Validates: Requirements 5.4, 5.11

    • * 16.5 编写商户列表最少保留一个属性测试

      • Property 5: 商户列表最少保留一个
      • Validates: Requirements 2.7, 3.7

    • * 16.6 编写API响应格式一致性属性测试

      • Property 6: API响应格式一致性
      • Validates: Requirements 10.1, 10.2, 10.3

  • 17. Final Checkpoint - 最终验证

    • 确保所有测试通过
    • 确保所有功能正常工作
    • 如有问题，询问用户

验收检查清单

功能验收

  • 基础设置页面正常显示，支持配置保存
  • 微信支付配置页面正常显示，支持多商户管理
  • 支付宝配置页面正常显示，支持多商户管理
  • 小程序配置页面正常显示，支持多小程序管理
  • H5配置页面正常显示，支持多H5应用管理
  • 上传配置页面正常显示，支持存储类型切换
  • 签到配置页面正常显示，支持7天奖励配置
  • 系统设置页面正常显示，各卡片独立保存
  • 商户前缀唯一性验证正常
  • 默认小程序/H5应用唯一性验证正常
  • 商户列表至少保留一个验证正常
  • 图片上传功能正常
  • 表单验证正常

非功能验收

  • 页面加载性能正常
  • 表单验证实时反馈
  • 操作提示正确显示
  • 属性测试全部通过

Notes

  • 每个Checkpoint确保增量验证
  • 后端API已基本完成，主要补充验证逻辑和模型定义
  • 属性测试验证通用正确性属性
  • 多商户/多小程序/多H5应用的动态表单是核心复杂度
  • 任务标记 * 为可选任务，可根据时间情况决定是否执行