# 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 组件已创建基础版本，需要根据后端接口进行优化
- 业务页面改造时需保持原有表单验证逻辑不变