HaniBlindBox/.kiro/specs/system-config-frontend/tasks.md

# 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

- [x] 1. 后端API验证和补充
  - [x] 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_

  - [x] 1.2 补充支付宝配置验证逻辑
    - 在 `AdminConfigService.cs` 添加 `ValidateAlipaySetting` 方法
    - 验证商户列表不为空
    - 验证AppId必填
    - _Requirements: 3.3, 3.8_

  - [x] 1.3 补充ConfigModels.cs中缺失的模型
    - 添加 `AlipaySetting` 和 `AlipayMerchant` 模型
    - 添加 `BaseSetting` 模型
    - 添加 `SignSetting` 模型
    - 添加 `AppSetting` 模型
    - 添加 `UserConfig` 模型
    - 添加 `SystemTest` 模型
    - 添加 `InfiniteMultiple` 模型
    - 添加 `RankSetting` 模型
    - _Requirements: 10.1_

- [x] 2. Checkpoint - 后端API验证
  - 确保所有配置键API正常工作
  - 确保配置保存和获取功能正常
  - 确保验证逻辑正确

- [x] 3. 前端API层开发
  - [x] 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_

- [x] 4. 前端基础设置页面开发
  - [x] 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_

- [x] 5. 前端微信支付配置页面开发
  - [x] 5.1 创建微信支付配置页面
    - 创建 `src/views/business/config/weixinpay.vue`
    - 实现页面布局（商户列表区域）
    - 实现商户列表展示
    - 实现添加商户按钮
    - 实现删除商户按钮（至少保留一个）
    - 实现保存按钮
    - _Requirements: 2.1, 2.2, 2.7, 2.8_

  - [x] 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_

- [x] 6. 前端支付宝配置页面开发
  - [x] 6.1 创建支付宝配置页面
    - 创建 `src/views/business/config/alipay.vue`
    - 实现页面布局（商户列表区域）
    - 实现商户列表展示
    - 实现添加/删除商户功能
    - 实现保存功能
    - _Requirements: 3.1, 3.2, 3.7, 3.8_

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

- [x] 7. 前端小程序配置页面开发
  - [x] 7.1 创建小程序配置页面
    - 创建 `src/views/business/config/miniprogram.vue`
    - 实现页面布局（小程序列表区域）
    - 实现小程序列表展示
    - 实现添加/删除小程序功能
    - 实现保存功能（验证必须有默认小程序）
    - _Requirements: 4.1, 4.2, 4.8, 4.9_

  - [x] 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_

- [x] 8. 前端H5配置页面开发
  - [x] 8.1 创建H5配置页面
    - 创建 `src/views/business/config/h5.vue`
    - 实现页面布局（H5应用列表区域）
    - 实现H5应用列表展示
    - 实现添加/删除H5应用功能
    - 实现保存功能（验证必须有默认H5应用）
    - _Requirements: 5.1, 5.2, 5.10, 5.11_

  - [x] 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_

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

- [x] 10. 前端上传配置页面开发
  - [x] 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_

- [x] 11. 前端签到配置页面开发
  - [x] 11.1 创建签到配置页面
    - 创建 `src/views/business/config/sign.vue`
    - 实现页面布局（表单区域）
    - 实现7天签到奖励配置
    - 实现表单验证（数字验证）
    - 实现保存功能
    - _Requirements: 7.1, 7.2, 7.3_

  - [ ]* 11.2 编写签到配置页面单元测试
    - 测试数字验证逻辑
    - _Requirements: 7.2_

- [x] 12. 前端系统设置页面开发
  - [x] 12.1 创建系统设置主页面
    - 创建 `src/views/business/config/system.vue`
    - 实现页面布局（多卡片区域）
    - 集成各配置卡片组件
    - _Requirements: 8.1_

  - [x] 12.2 创建应用设置卡片组件
    - 创建 `src/views/business/config/components/AppSettingCard.vue`
    - 实现项目名称、购买弹窗设置
    - 实现商城购买次数配置
    - 实现货币名称和图标配置（余额/货币1/货币2）
    - 实现中奖音频上传
    - 实现各项限制配置
    - 实现独立保存功能
    - _Requirements: 8.2, 8.3, 8.4, 8.5, 8.6, 8.7_

  - [x] 12.3 创建用户UID设置卡片组件
    - 创建 `src/views/business/config/components/UserConfigCard.vue`
    - 实现UID类型单选（真实ID/数字ID/随机字符和数字）
    - 实现UID长度配置（根据类型显示/隐藏）
    - 实现独立保存功能
    - _Requirements: 8.8, 8.9_

  - [x] 12.4 创建内测配置卡片组件
    - 创建 `src/views/business/config/components/SystemTestCard.vue`
    - 实现内测开关
    - 实现禁用微信支付开关
    - 实现签到倍数配置
    - 实现独立保存功能
    - _Requirements: 8.10, 8.11_

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

- [x] 13. Checkpoint - 配置页面验证
  - 确保基础设置页面正常工作
  - 确保上传配置页面正常工作
  - 确保签到配置页面正常工作
  - 确保系统设置页面各卡片正常工作
  - 测试配置保存和加载功能

- [x] 14. 路由和菜单配置
  - [x] 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_

  - [x] 14.2 创建菜单SQL脚本
    - 在 `HoneyBox/scripts/` 创建 `seed_system_config_menus.sql`
    - 添加系统配置菜单项
    - 添加各子菜单项
    - 添加相关权限配置
    - _Requirements: 9.3_

- [x] 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应用的动态表单是核心复杂度
- 任务标记 `*` 为可选任务，可根据时间情况决定是否执行