176 lines
6.3 KiB
Markdown
176 lines
6.3 KiB
Markdown
# Implementation Plan: 图片上传功能
|
||
|
||
## Overview
|
||
|
||
实现后台管理系统的图片上传功能，包括后端上传接口（支持本地存储和腾讯云COS）、前端上传组件优化、以及业务页面改造。
|
||
|
||
## Tasks
|
||
|
||
- [x] 1. 后端基础设施搭建
|
||
- [x] 1.1 创建上传相关的数据模型
|
||
- 创建 `UploadResponse` 响应模型
|
||
- 创建 `UploadResult` 内部结果模型
|
||
- 位置: `HoneyBox.Admin.Business/Models/Upload/`
|
||
- _Requirements: 1.1_
|
||
|
||
- [x] 1.2 创建存储提供者接口 IStorageProvider
|
||
- 定义 `StorageType` 属性
|
||
- 定义 `UploadAsync` 方法
|
||
- 定义 `DeleteAsync` 方法
|
||
- 位置: `HoneyBox.Admin.Business/Services/Interfaces/`
|
||
- _Requirements: 2.1, 3.1_
|
||
|
||
- [x] 1.3 创建上传服务接口 IUploadService
|
||
- 定义 `UploadImageAsync` 方法
|
||
- 定义 `UploadImagesAsync` 方法
|
||
- 位置: `HoneyBox.Admin.Business/Services/Interfaces/`
|
||
- _Requirements: 1.1_
|
||
|
||
- [x] 2. 本地存储实现
|
||
- [x] 2.1 实现 LocalStorageProvider
|
||
- 实现文件保存到 wwwroot/uploads/{yyyy}/{MM}/{dd}/
|
||
- 实现目录自动创建
|
||
- 实现唯一文件名生成
|
||
- 返回相对URL路径
|
||
- 位置: `HoneyBox.Admin.Business/Services/Storage/`
|
||
- _Requirements: 2.1, 2.2, 2.3, 2.4, 1.5_
|
||
|
||
- [x] 2.2 编写 LocalStorageProvider 单元测试
|
||
- 测试目录创建
|
||
- 测试文件保存
|
||
- 测试URL生成格式
|
||
- **Property 4: 存储策略一致性 - 本地存储URL格式**
|
||
- **Validates: Requirements 2.3**
|
||
|
||
- [x] 3. 腾讯云COS存储实现
|
||
- [x] 3.1 添加腾讯云COS SDK依赖
|
||
- 添加 `Tencent.QCloud.Cos.Sdk` NuGet包
|
||
- _Requirements: 3.1_
|
||
|
||
- [x] 3.2 实现 TencentCosProvider
|
||
- 从配置读取COS参数
|
||
- 实现文件上传到COS
|
||
- 实现按日期创建对象路径
|
||
- 返回Domain拼接的完整URL
|
||
- 位置: `HoneyBox.Admin.Business/Services/Storage/`
|
||
- _Requirements: 3.1, 3.2, 3.3, 3.5_
|
||
|
||
- [x] 3.3 编写 TencentCosProvider 单元测试
|
||
- 测试配置读取
|
||
- 测试URL生成格式
|
||
- 测试错误处理
|
||
- **Property 4: 存储策略一致性 - COS URL格式**
|
||
- **Validates: Requirements 3.3, 3.4**
|
||
|
||
- [x] 4. 上传服务实现
|
||
- [x] 4.1 实现 UploadService
|
||
- 实现文件格式验证（jpg, jpeg, png, gif, webp）
|
||
- 实现文件大小验证（最大10MB）
|
||
- 实现根据配置选择存储提供者
|
||
- 实现默认使用本地存储的降级逻辑
|
||
- 位置: `HoneyBox.Admin.Business/Services/`
|
||
- _Requirements: 1.2, 1.3, 1.4, 4.1, 4.2, 4.3_
|
||
|
||
- [x] 4.2 编写 UploadService 单元测试
|
||
- **Property 1: 文件格式验证**
|
||
- **Property 2: 文件大小验证**
|
||
- **Property 3: 文件名唯一性**
|
||
- **Validates: Requirements 1.2, 1.3, 1.4, 1.5**
|
||
|
||
- [x] 5. 上传API控制器
|
||
- [x] 5.1 创建 UploadController
|
||
- 实现 POST /api/admin/upload/image 单文件上传
|
||
- 实现 POST /api/admin/upload/images 批量上传
|
||
- 添加权限验证
|
||
- 位置: `HoneyBox.Admin.Business/Controllers/`
|
||
- _Requirements: 1.1_
|
||
|
||
- [x] 5.2 注册服务到依赖注入容器
|
||
- 注册 IUploadService
|
||
- 注册 IStorageProvider 实现
|
||
- 位置: `HoneyBox.Admin.Business/Modules/`
|
||
- _Requirements: 4.1_
|
||
|
||
- [x] 6. Checkpoint - 后端功能验证
|
||
- 确保所有后端测试通过
|
||
- 使用Postman或Swagger测试上传接口
|
||
- 验证本地存储和COS存储都能正常工作
|
||
- 如有问题请询问用户
|
||
|
||
- [x] 7. 前端上传组件优化
|
||
- [x] 7.1 优化 ImageUpload 组件
|
||
- 添加文件类型前端校验
|
||
- 添加文件大小前端校验
|
||
- 优化上传失败的错误提示
|
||
- 位置: `admin-web/src/components/ImageUpload/index.vue`
|
||
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7_
|
||
|
||
- [x] 8. 业务页面改造 - 商品管理
|
||
- [x] 8.1 改造 GoodsAddDialog.vue
|
||
- 将 imgUrl 输入改为 ImageUpload 组件
|
||
- 将 imgUrlDetail 输入改为 ImageUpload 组件
|
||
- 删除原有的 image-upload-wrapper 样式
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 8.2 改造 GoodsEditDialog.vue
|
||
- 将 imgUrl 输入改为 ImageUpload 组件
|
||
- 将 imgUrlDetail 输入改为 ImageUpload 组件
|
||
- 删除原有的 image-upload-wrapper 样式
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 8.3 改造 PrizeAddDialog.vue
|
||
- 将 imgUrl 输入改为 ImageUpload 组件
|
||
- 将 imgUrlDetail 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 8.4 改造 PrizeEditDialog.vue
|
||
- 将 imgUrl 输入改为 ImageUpload 组件
|
||
- 将 imgUrlDetail 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 9. 业务页面改造 - 钻石充值
|
||
- [x] 9.1 改造 DiamondFormDialog.vue
|
||
- 将 normalImage 输入改为 ImageUpload 组件
|
||
- 将 normalSelectImage 输入改为 ImageUpload 组件
|
||
- 将 firstChargeImage 输入改为 ImageUpload 组件
|
||
- 将 firstSelectChargeImage 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 10. 业务页面改造 - 内容辅助模块
|
||
- [x] 10.1 改造 FloatBallFormDialog.vue
|
||
- 将 image 输入改为 ImageUpload 组件
|
||
- 将 imageBj 输入改为 ImageUpload 组件
|
||
- 将 imageDetails 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 10.2 改造 AdvertFormDialog.vue
|
||
- 将 imageUrl 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 10.3 改造 WelfareHouseFormDialog.vue
|
||
- 将 image 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 11. 业务页面改造 - 系统配置
|
||
- [x] 11.1 改造 SignConfigFormDialog.vue
|
||
- 将 icon 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 11.2 改造 base.vue (基础配置)
|
||
- 将 erweima 输入改为 ImageUpload 组件
|
||
- 将 share_image 输入改为 ImageUpload 组件
|
||
- _Requirements: 6.1, 6.2, 6.3_
|
||
|
||
- [x] 12. Final Checkpoint - 完整功能验证
|
||
- 确保所有改造的页面正常工作
|
||
- 验证图片上传、预览、删除功能
|
||
- 验证已有图片URL数据能正常显示
|
||
- 如有问题请询问用户
|
||
|
||
## Notes
|
||
|
||
- 所有任务均为必需，包括测试任务
|
||
- 后端使用策略模式，方便后续扩展其他存储提供者（如阿里云OSS）
|
||
- 前端 ImageUpload 组件已创建基础版本，需要根据后端接口进行优化
|
||
- 业务页面改造时需保持原有表单验证逻辑不变
|