HaniBlindBox/.kiro/specs/content-auxiliary-frontend/tasks.md
2026-01-18 11:18:09 +08:00

414 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Implementation Plan: 内容与辅助模块前端迁移
## Overview
本实现计划将"内容与辅助"模块从老项目PHP ThinkPHP + Layui迁移到新项目ASP.NET Core + Vue 3 + Element Plus。该模块包含三个子模块单页管理Danye、悬浮球配置FloatBall、福利屋入口WelfareHouse
实现分为后端 API 开发和前端页面开发两个主要部分。
## 任务概览
| 阶段 | 任务数 | 预计工时 |
|------|--------|----------|
| 1. 后端单页管理API开发 | 4 | 2h |
| 2. 后端悬浮球API开发 | 4 | 2.5h |
| 3. 后端福利屋API开发 | 4 | 2h |
| 4. Checkpoint - 后端API验证 | 1 | 0.5h |
| 5. 前端API层开发 | 3 | 1.5h |
| 6. 前端单页管理页面开发 | 3 | 2.5h |
| 7. 前端悬浮球页面开发 | 4 | 3h |
| 8. 前端福利屋页面开发 | 4 | 2.5h |
| 9. Checkpoint - 前端页面验证 | 1 | 0.5h |
| 10. 路由和菜单配置 | 2 | 1h |
| 11. Checkpoint - 完整功能验证 | 1 | 0.5h |
| 12. 属性测试 | 4 | 1.5h |
| 13. Final Checkpoint | 1 | 0.5h |
| **总计** | **36** | **20.5h** |
---
## Tasks
- [x] 1. 后端单页管理API开发
- [x] 1.1 创建单页管理Models
-`HoneyBox.Admin.Business/Models/Danye/` 创建目录
- 创建 `DanyeModels.cs` 定义请求和响应模型
- 定义 `DanyeResponse` 列表响应模型Id, Title, IsImageOptimizer, UpdateTime
- 定义 `DanyeDetailResponse` 详情响应模型Id, Title, Content, IsImageOptimizer
- 定义 `DanyeUpdateRequest` 更新请求模型Title?, Content
- 定义 `ImageOptimizerRequest` 图片优化切换请求模型
- _Requirements: 11.1_
- [x] 1.2 创建单页管理Service接口和实现
-`HoneyBox.Admin.Business/Services/Interfaces/` 创建 `IDanyeService.cs`
- 定义 `GetDanyeListAsync` 列表查询方法
- 定义 `GetDanyeByIdAsync` 详情查询方法
- 定义 `UpdateDanyeAsync` 更新方法
- 定义 `ToggleImageOptimizerAsync` 切换图片优化方法
-`HoneyBox.Admin.Business/Services/` 创建 `DanyeService.cs`
- 实现所有方法ID 2-20 的单页标题不可编辑
- _Requirements: 1.1, 2.1, 2.2, 2.3, 11.1_
- [x] 1.3 创建单页管理Controller
-`HoneyBox.Admin.Business/Controllers/` 创建 `DanyeController.cs`
- 实现 `GET /api/business/danye` 列表查询接口
- 实现 `GET /api/business/danye/{id}` 详情查询接口
- 实现 `PUT /api/business/danye/{id}` 更新接口
- 实现 `PUT /api/business/danye/{id}/image-optimizer` 切换图片优化接口
- _Requirements: 1.1, 1.2, 1.3, 2.1, 2.2, 11.1_
- [x] 1.4 注册单页管理服务
-`ServiceCollectionExtensions.cs` 注册 `IDanyeService``DanyeService`
- _Requirements: 11.1_
- [x] 2. 后端悬浮球API开发
- [x] 2.1 创建悬浮球Models
-`HoneyBox.Admin.Business/Models/FloatBall/` 创建目录
- 创建 `FloatBallModels.cs` 定义请求和响应模型
- 定义 `FloatBallListRequest` 列表查询请求Page, PageSize
- 定义 `FloatBallResponse` 响应模型(所有字段)
- 定义 `FloatBallCreateRequest` 新增请求模型
- 定义 `FloatBallUpdateRequest` 更新请求模型
- 定义 `FloatBallStatusRequest` 状态切换请求模型
- _Requirements: 11.2_
- [x] 2.2 创建悬浮球Service接口和实现
-`HoneyBox.Admin.Business/Services/Interfaces/` 创建 `IFloatBallService.cs`
- 定义 `GetFloatBallsAsync` 列表查询方法(分页)
- 定义 `GetFloatBallByIdAsync` 详情查询方法
- 定义 `CreateFloatBallAsync` 新增方法
- 定义 `UpdateFloatBallAsync` 更新方法
- 定义 `DeleteFloatBallAsync` 删除方法
- 定义 `UpdateStatusAsync` 状态切换方法
-`HoneyBox.Admin.Business/Services/` 创建 `FloatBallService.cs`
- 实现所有方法,验证必填字段
- _Requirements: 3.1, 3.4, 4.1, 4.2, 5.1, 5.3, 6.1, 6.2, 11.2_
- [x] 2.3 创建悬浮球Controller
-`HoneyBox.Admin.Business/Controllers/` 创建 `FloatBallController.cs`
- 实现 `GET /api/business/floatball` 列表查询接口(分页)
- 实现 `GET /api/business/floatball/{id}` 详情查询接口
- 实现 `POST /api/business/floatball` 新增接口
- 实现 `PUT /api/business/floatball/{id}` 更新接口
- 实现 `DELETE /api/business/floatball/{id}` 删除接口
- 实现 `PUT /api/business/floatball/{id}/status` 状态切换接口
- _Requirements: 3.1, 3.2, 3.3, 3.4, 4.1, 4.2, 5.1, 5.3, 6.1, 6.2, 11.2_
- [x] 2.4 注册悬浮球服务
-`ServiceCollectionExtensions.cs` 注册 `IFloatBallService``FloatBallService`
- _Requirements: 11.2_
- [x] 3. 后端福利屋API开发
- [x] 3.1 创建福利屋Models
-`HoneyBox.Admin.Business/Models/WelfareHouse/` 创建目录
- 创建 `WelfareHouseModels.cs` 定义请求和响应模型
- 定义 `WelfareHouseListRequest` 列表查询请求Page, PageSize
- 定义 `WelfareHouseResponse` 响应模型Id, Name, Image, Url, Sort, Status, CreateTime
- 定义 `WelfareHouseCreateRequest` 新增请求模型
- 定义 `WelfareHouseUpdateRequest` 更新请求模型
- 定义 `WelfareHouseStatusRequest` 状态切换请求模型
- _Requirements: 11.3_
- [x] 3.2 创建福利屋Service接口和实现
-`HoneyBox.Admin.Business/Services/Interfaces/` 创建 `IWelfareHouseService.cs`
- 定义 `GetWelfareHousesAsync` 列表查询方法(分页)
- 定义 `GetWelfareHouseByIdAsync` 详情查询方法
- 定义 `CreateWelfareHouseAsync` 新增方法
- 定义 `UpdateWelfareHouseAsync` 更新方法
- 定义 `DeleteWelfareHouseAsync` 删除方法
- 定义 `UpdateStatusAsync` 状态切换方法
-`HoneyBox.Admin.Business/Services/` 创建 `WelfareHouseService.cs`
- 实现所有方法,验证必填字段
- _Requirements: 7.1, 7.4, 8.1, 8.2, 9.1, 9.3, 10.1, 10.2, 11.3_
- [x] 3.3 创建福利屋Controller
-`HoneyBox.Admin.Business/Controllers/` 创建 `WelfareHouseController.cs`
- 实现 `GET /api/business/welfarehouse` 列表查询接口(分页)
- 实现 `GET /api/business/welfarehouse/{id}` 详情查询接口
- 实现 `POST /api/business/welfarehouse` 新增接口
- 实现 `PUT /api/business/welfarehouse/{id}` 更新接口
- 实现 `DELETE /api/business/welfarehouse/{id}` 删除接口
- 实现 `PUT /api/business/welfarehouse/{id}/status` 状态切换接口
- _Requirements: 7.1, 7.2, 7.3, 7.4, 8.1, 8.2, 9.1, 9.3, 10.1, 10.2, 11.3_
- [x] 3.4 注册福利屋服务
-`ServiceCollectionExtensions.cs` 注册 `IWelfareHouseService``WelfareHouseService`
- _Requirements: 11.3_
- [x] 4. Checkpoint - 后端API验证
- 确保所有API编译通过
- 使用Swagger测试API基本功能
- 确保权限验证正常工作
- [x] 5. 前端API层开发
- [x] 5.1 创建单页管理API模块
- 创建 `src/api/business/danye.ts`
- 定义 TypeScript 接口DanyeResponse, DanyeDetailResponse, DanyeUpdateRequest
- 实现 `getDanyeList` 列表查询API调用
- 实现 `getDanyeById` 详情查询API调用
- 实现 `updateDanye` 更新API调用
- 实现 `toggleImageOptimizer` 切换图片优化API调用
- _Requirements: 11.1_
- [x] 5.2 创建悬浮球API模块
- 创建 `src/api/business/floatball.ts`
- 定义 TypeScript 接口FloatBallListRequest, FloatBallResponse, FloatBallCreateRequest
- 实现 `getFloatBalls` 列表查询API调用
- 实现 `getFloatBallById` 详情查询API调用
- 实现 `createFloatBall` 新增API调用
- 实现 `updateFloatBall` 更新API调用
- 实现 `deleteFloatBall` 删除API调用
- 实现 `updateFloatBallStatus` 状态切换API调用
- _Requirements: 11.2_
- [x] 5.3 创建福利屋API模块
- 创建 `src/api/business/welfarehouse.ts`
- 定义 TypeScript 接口WelfareHouseListRequest, WelfareHouseResponse, WelfareHouseCreateRequest
- 实现 `getWelfareHouses` 列表查询API调用
- 实现 `getWelfareHouseById` 详情查询API调用
- 实现 `createWelfareHouse` 新增API调用
- 实现 `updateWelfareHouse` 更新API调用
- 实现 `deleteWelfareHouse` 删除API调用
- 实现 `updateWelfareHouseStatus` 状态切换API调用
- _Requirements: 11.3_
- [x] 6. 前端单页管理页面开发
- [x] 6.1 创建单页列表主页面
- 创建 `src/views/business/danye/list.vue`
- 实现页面布局(表格区)
- 集成表格组件
- 实现编辑操作
- 实现图片优化开关切换
- _Requirements: 1.1, 1.2, 1.3, 1.4_
- [x] 6.2 创建单页表格组件
- 创建 `src/views/business/danye/components/DanyeTable.vue`
- 实现表格列配置ID、标题、图片优化开关、更新时间、操作
- 实现图片优化开关组件
- 实现编辑按钮
- _Requirements: 1.1, 1.4_
- [x] 6.3 创建单页编辑弹窗
- 创建 `src/views/business/danye/components/DanyeFormDialog.vue`
- 实现标题输入框ID 2-20 禁用)
- 集成富文本编辑器
- 实现表单验证
- 实现提交逻辑
- _Requirements: 2.1, 2.2, 2.3, 2.4_
- [x] 7. 前端悬浮球页面开发
- [x] 7.1 创建悬浮球列表主页面
- 创建 `src/views/business/floatball/list.vue`
- 实现页面布局(新增按钮 + 表格区)
- 集成表格组件
- 实现分页逻辑
- 实现新增、编辑、删除操作
- _Requirements: 3.1, 3.4_
- [x] 7.2 创建悬浮球表格组件
- 创建 `src/views/business/floatball/components/FloatBallTable.vue`
- 实现表格列配置ID、标题、图片、背景图、详情图、类型、链接、位置、尺寸、特效、状态、创建时间、操作
- 实现图片预览功能
- 实现状态开关组件
- 实现操作按钮(编辑、删除)
- 实现删除确认弹窗
- _Requirements: 3.1, 3.2, 3.3, 6.1, 6.2_
- [x] 7.3 创建悬浮球表单弹窗
- 创建 `src/views/business/floatball/components/FloatBallFormDialog.vue`
- 实现标题输入
- 实现类型选择(展示图片/跳转页面)
- 实现图片上传(悬浮球图片、背景图、详情图)
- 实现跳转链接输入(类型为跳转时显示)
- 实现位置输入X、Y
- 实现尺寸输入(宽、高)
- 实现详情图位置和尺寸输入
- 实现特效选择(无/缩放动画)
- 实现状态开关
- 实现表单验证
- 实现提交逻辑
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8, 5.1, 5.2, 5.3_
- [x] 7.4 实现悬浮球类型条件显示
- 当类型为"展示图片"时,隐藏跳转链接输入
- 当类型为"跳转页面"时,显示跳转链接输入
- _Requirements: 4.5_
- [x] 8. 前端福利屋页面开发
- [x] 8.1 创建福利屋列表主页面
- 创建 `src/views/business/welfarehouse/list.vue`
- 实现页面布局(新增按钮 + 表格区)
- 集成表格组件
- 实现分页逻辑
- 实现新增、编辑、删除操作
- _Requirements: 7.1, 7.4_
- [x] 8.2 创建福利屋表格组件
- 创建 `src/views/business/welfarehouse/components/WelfareHouseTable.vue`
- 实现表格列配置ID、名称、图片、链接、排序、状态、创建时间、操作
- 实现图片预览功能
- 实现状态开关组件
- 实现操作按钮(编辑、删除)
- 实现删除确认弹窗
- _Requirements: 7.1, 7.2, 7.3, 10.1, 10.2_
- [x] 8.3 创建福利屋表单弹窗
- 创建 `src/views/business/welfarehouse/components/WelfareHouseFormDialog.vue`
- 实现名称输入
- 实现图片上传
- 实现跳转链接输入
- 实现排序输入
- 实现状态开关
- 实现表单验证
- 实现提交逻辑
- _Requirements: 8.1, 8.2, 8.3, 8.4, 9.1, 9.2, 9.3_
- [x] 8.4 实现福利屋排序功能
- 列表按排序值升序显示
- _Requirements: 7.2_
- [x] 9. Checkpoint - 前端页面验证
- 确保单页管理列表页面正常显示
- 确保单页编辑功能正常(富文本编辑器)
- 确保图片优化开关功能正常
- 确保悬浮球列表页面正常显示
- 确保悬浮球新增、编辑、删除功能正常
- 确保悬浮球类型条件显示正常
- 确保福利屋列表页面正常显示
- 确保福利屋新增、编辑、删除功能正常
- 测试分页功能
- [x] 10. 路由和菜单配置
- [x] 10.1 配置路由
-`src/router/modules/business.ts` 添加内容管理路由配置
- 配置单页管理路由 `/business/danye/list`
- 配置悬浮球配置路由 `/business/floatball/list`
- 配置福利屋入口路由 `/business/welfarehouse/list`
- 配置权限标识
- _Requirements: 12.1, 12.2, 12.3_
- [x] 10.2 创建菜单SQL脚本并执行
-`HoneyBox/scripts/` 创建 `seed_content_auxiliary_menus.sql`
- 添加"内容管理"菜单组
- 添加单页管理菜单项
- 添加悬浮球配置菜单项
- 添加福利屋入口菜单项
- 添加相关权限配置
- 执行SQL脚本
- _Requirements: 12.1, 12.2, 12.3_
- [x] 11. Checkpoint - 完整功能验证
- 确保所有页面正常访问
- 测试完整的单页管理流程
- 测试完整的悬浮球配置流程
- 测试完整的福利屋入口流程
- 验证权限控制正常工作
- 验证菜单显示正常
- [x] 12. 属性测试
- [x] 12.1 编写分页参数传递属性测试
- **Property 1: 分页参数正确传递**
- 验证悬浮球和福利屋列表分页参数正确传递
- **Validates: Requirements 3.4, 7.4**
- [x] 12.2 编写表单必填字段验证属性测试
- **Property 2: 表单必填字段验证**
- 验证悬浮球表单必填字段(类型、图片、位置、尺寸、特效)
- 验证福利屋表单必填字段(名称、图片、链接、排序)
- **Validates: Requirements 4.2, 8.2**
- [x] 12.3 编写条件显示字段属性测试
- **Property 3: 条件显示字段正确切换**
- 验证悬浮球类型切换时跳转链接字段的显示/隐藏
- **Validates: Requirements 4.5**
- [x] 12.4 编写API响应格式一致性属性测试
- **Property 4: API响应格式一致性**
- 验证所有API返回统一的响应格式
- **Validates: Requirements 11.4, 11.5**
- [x] 13. Final Checkpoint - 最终验证
- 确保所有测试通过
- 确保所有功能正常工作
- 如有问题,询问用户
---
## 验收检查清单
### 功能验收
- [ ] 单页管理列表正常显示
- [ ] 单页编辑功能正常(富文本编辑器)
- [ ] 单页标题编辑限制正常ID 2-20 不可编辑)
- [ ] 图片优化开关功能正常
- [ ] 悬浮球列表正常显示,支持分页
- [ ] 悬浮球新增功能正常
- [ ] 悬浮球编辑功能正常
- [ ] 悬浮球删除功能正常(有二次确认)
- [ ] 悬浮球状态切换功能正常
- [ ] 悬浮球类型条件显示正常
- [ ] 福利屋列表正常显示,支持分页
- [ ] 福利屋新增功能正常
- [ ] 福利屋编辑功能正常
- [ ] 福利屋删除功能正常(有二次确认)
- [ ] 福利屋状态切换功能正常
- [ ] 福利屋排序功能正常
### 非功能验收
- [ ] 分页加载性能正常
- [ ] 图片预览功能正常
- [ ] 图片懒加载生效
- [ ] 表单验证实时反馈
- [ ] 操作提示正确显示
- [ ] 危险操作有二次确认
- [x] 属性测试全部通过
## Notes
- 每个Checkpoint确保增量验证
- 后端API需要先完成才能进行前端开发
- 属性测试验证通用正确性属性
- 所有任务均为必需任务,确保全面测试覆盖
- 单页管理不需要新增/删除功能,只需要编辑
- 悬浮球和福利屋需要完整的CRUD功能
- 富文本编辑器需要确认项目中使用的编辑器类型
- 数据库实体已存在,无需创建迁移
## 文件路径参考
### 后端文件
- `server/HoneyBox/src/HoneyBox.Admin.Business/Models/Danye/DanyeModels.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Models/FloatBall/FloatBallModels.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Models/WelfareHouse/WelfareHouseModels.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/Interfaces/IDanyeService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/Interfaces/IFloatBallService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/Interfaces/IWelfareHouseService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/DanyeService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/FloatBallService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Services/WelfareHouseService.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Controllers/DanyeController.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Controllers/FloatBallController.cs`
- `server/HoneyBox/src/HoneyBox.Admin.Business/Controllers/WelfareHouseController.cs`
### 前端文件
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/api/business/danye.ts`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/api/business/floatball.ts`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/api/business/welfarehouse.ts`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/danye/list.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/danye/components/DanyeTable.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/danye/components/DanyeFormDialog.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/floatball/list.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/floatball/components/FloatBallTable.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/floatball/components/FloatBallFormDialog.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/welfarehouse/list.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/welfarehouse/components/WelfareHouseTable.vue`
- `server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/welfarehouse/components/WelfareHouseFormDialog.vue`
### 参考文件
- PHP 单页管理: `server/php/app/admin/controller/Danye.php`
- PHP 悬浮球: `server/php/app/admin/controller/FloatBall.php`
- PHP 福利屋: `server/php/app/admin/controller/WelfareHouse.php`
- 实体 Danye: `server/HoneyBox/src/HoneyBox.Model/Entities/Danye.cs`
- 实体 FloatBallConfig: `server/HoneyBox/src/HoneyBox.Model/Entities/FloatBallConfig.cs`
- 实体 WelfareHouse: `server/HoneyBox/src/HoneyBox.Model/Entities/WelfareHouse.cs`