outsource/HaniBlindBox
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dca7ba7b1c
HaniBlindBox/.kiro/specs/content-auxiliary-frontend/tasks.md
gpu 5242fae158 其他管理
2026-01-18 11:18:09 +08:00

18 KiB
Raw Blame History

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

  • 1. 后端单页管理API开发

    • 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

    • 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

    • 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

    • 1.4 注册单页管理服务

      • 在 ServiceCollectionExtensions.cs 注册 IDanyeService 和 DanyeService
      • Requirements: 11.1

  • 2. 后端悬浮球API开发

    • 2.1 创建悬浮球Models

      • 在 HoneyBox.Admin.Business/Models/FloatBall/ 创建目录
      • 创建 FloatBallModels.cs 定义请求和响应模型
      • 定义 FloatBallListRequest 列表查询请求（Page, PageSize）
      • 定义 FloatBallResponse 响应模型（所有字段）
      • 定义 FloatBallCreateRequest 新增请求模型
      • 定义 FloatBallUpdateRequest 更新请求模型
      • 定义 FloatBallStatusRequest 状态切换请求模型
      • Requirements: 11.2

    • 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

    • 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

    • 2.4 注册悬浮球服务

      • 在 ServiceCollectionExtensions.cs 注册 IFloatBallService 和 FloatBallService
      • Requirements: 11.2

  • 3. 后端福利屋API开发

    • 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

    • 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

    • 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

    • 3.4 注册福利屋服务

      • 在 ServiceCollectionExtensions.cs 注册 IWelfareHouseService 和 WelfareHouseService
      • Requirements: 11.3

  • 4. Checkpoint - 后端API验证

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

  • 5. 前端API层开发

    • 5.1 创建单页管理API模块

      • 创建 src/api/business/danye.ts
      • 定义 TypeScript 接口（DanyeResponse, DanyeDetailResponse, DanyeUpdateRequest）
      • 实现 getDanyeList 列表查询API调用
      • 实现 getDanyeById 详情查询API调用
      • 实现 updateDanye 更新API调用
      • 实现 toggleImageOptimizer 切换图片优化API调用
      • Requirements: 11.1

    • 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

    • 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

  • 6. 前端单页管理页面开发

    • 6.1 创建单页列表主页面

      • 创建 src/views/business/danye/list.vue
      • 实现页面布局（表格区）
      • 集成表格组件
      • 实现编辑操作
      • 实现图片优化开关切换
      • Requirements: 1.1, 1.2, 1.3, 1.4

    • 6.2 创建单页表格组件

      • 创建 src/views/business/danye/components/DanyeTable.vue
      • 实现表格列配置（ID、标题、图片优化开关、更新时间、操作）
      • 实现图片优化开关组件
      • 实现编辑按钮
      • Requirements: 1.1, 1.4

    • 6.3 创建单页编辑弹窗

      • 创建 src/views/business/danye/components/DanyeFormDialog.vue
      • 实现标题输入框（ID 2-20 禁用）
      • 集成富文本编辑器
      • 实现表单验证
      • 实现提交逻辑
      • Requirements: 2.1, 2.2, 2.3, 2.4

  • 7. 前端悬浮球页面开发

    • 7.1 创建悬浮球列表主页面

      • 创建 src/views/business/floatball/list.vue
      • 实现页面布局（新增按钮 + 表格区）
      • 集成表格组件
      • 实现分页逻辑
      • 实现新增、编辑、删除操作
      • Requirements: 3.1, 3.4

    • 7.2 创建悬浮球表格组件

      • 创建 src/views/business/floatball/components/FloatBallTable.vue
      • 实现表格列配置（ID、标题、图片、背景图、详情图、类型、链接、位置、尺寸、特效、状态、创建时间、操作）
      • 实现图片预览功能
      • 实现状态开关组件
      • 实现操作按钮（编辑、删除）
      • 实现删除确认弹窗
      • Requirements: 3.1, 3.2, 3.3, 6.1, 6.2

    • 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

    • 7.4 实现悬浮球类型条件显示

      • 当类型为"展示图片"时，隐藏跳转链接输入
      • 当类型为"跳转页面"时，显示跳转链接输入
      • Requirements: 4.5

  • 8. 前端福利屋页面开发

    • 8.1 创建福利屋列表主页面

      • 创建 src/views/business/welfarehouse/list.vue
      • 实现页面布局（新增按钮 + 表格区）
      • 集成表格组件
      • 实现分页逻辑
      • 实现新增、编辑、删除操作
      • Requirements: 7.1, 7.4

    • 8.2 创建福利屋表格组件

      • 创建 src/views/business/welfarehouse/components/WelfareHouseTable.vue
      • 实现表格列配置（ID、名称、图片、链接、排序、状态、创建时间、操作）
      • 实现图片预览功能
      • 实现状态开关组件
      • 实现操作按钮（编辑、删除）
      • 实现删除确认弹窗
      • Requirements: 7.1, 7.2, 7.3, 10.1, 10.2

    • 8.3 创建福利屋表单弹窗

      • 创建 src/views/business/welfarehouse/components/WelfareHouseFormDialog.vue
      • 实现名称输入
      • 实现图片上传
      • 实现跳转链接输入
      • 实现排序输入
      • 实现状态开关
      • 实现表单验证
      • 实现提交逻辑
      • Requirements: 8.1, 8.2, 8.3, 8.4, 9.1, 9.2, 9.3

    • 8.4 实现福利屋排序功能

      • 列表按排序值升序显示
      • Requirements: 7.2

  • 9. Checkpoint - 前端页面验证

    • 确保单页管理列表页面正常显示
    • 确保单页编辑功能正常（富文本编辑器）
    • 确保图片优化开关功能正常
    • 确保悬浮球列表页面正常显示
    • 确保悬浮球新增、编辑、删除功能正常
    • 确保悬浮球类型条件显示正常
    • 确保福利屋列表页面正常显示
    • 确保福利屋新增、编辑、删除功能正常
    • 测试分页功能

  • 10. 路由和菜单配置

    • 10.1 配置路由

      • 在 src/router/modules/business.ts 添加内容管理路由配置
      • 配置单页管理路由 /business/danye/list
      • 配置悬浮球配置路由 /business/floatball/list
      • 配置福利屋入口路由 /business/welfarehouse/list
      • 配置权限标识
      • Requirements: 12.1, 12.2, 12.3

    • 10.2 创建菜单SQL脚本并执行

      • 在 HoneyBox/scripts/ 创建 seed_content_auxiliary_menus.sql
      • 添加"内容管理"菜单组
      • 添加单页管理菜单项
      • 添加悬浮球配置菜单项
      • 添加福利屋入口菜单项
      • 添加相关权限配置
      • 执行SQL脚本
      • Requirements: 12.1, 12.2, 12.3

  • 11. Checkpoint - 完整功能验证

    • 确保所有页面正常访问
    • 测试完整的单页管理流程
    • 测试完整的悬浮球配置流程
    • 测试完整的福利屋入口流程
    • 验证权限控制正常工作
    • 验证菜单显示正常

  • 12. 属性测试

    • 12.1 编写分页参数传递属性测试

      • Property 1: 分页参数正确传递
      • 验证悬浮球和福利屋列表分页参数正确传递
      • Validates: Requirements 3.4, 7.4

    • 12.2 编写表单必填字段验证属性测试

      • Property 2: 表单必填字段验证
      • 验证悬浮球表单必填字段（类型、图片、位置、尺寸、特效）
      • 验证福利屋表单必填字段（名称、图片、链接、排序）
      • Validates: Requirements 4.2, 8.2

    • 12.3 编写条件显示字段属性测试

      • Property 3: 条件显示字段正确切换
      • 验证悬浮球类型切换时跳转链接字段的显示/隐藏
      • Validates: Requirements 4.5

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

      • Property 4: API响应格式一致性
      • 验证所有API返回统一的响应格式
      • Validates: Requirements 11.4, 11.5

  • 13. Final Checkpoint - 最终验证

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

验收检查清单

功能验收

  • 单页管理列表正常显示
  • 单页编辑功能正常（富文本编辑器）
  • 单页标题编辑限制正常（ID 2-20 不可编辑）
  • 图片优化开关功能正常
  • 悬浮球列表正常显示，支持分页
  • 悬浮球新增功能正常
  • 悬浮球编辑功能正常
  • 悬浮球删除功能正常（有二次确认）
  • 悬浮球状态切换功能正常
  • 悬浮球类型条件显示正常
  • 福利屋列表正常显示，支持分页
  • 福利屋新增功能正常
  • 福利屋编辑功能正常
  • 福利屋删除功能正常（有二次确认）
  • 福利屋状态切换功能正常
  • 福利屋排序功能正常

非功能验收

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

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