# 商品图片压缩功能使用说明

## 功能概述

一键压缩数据库全部商品图片功能，可以批量压缩所有商品的封面图，提高页面加载速度，减少服务器存储空间。

## 文件结构

```
src/
├── utils/
│   ├── imageCompressor.ts          # 基础图片压缩工具
│   └── goodsImageCompressor.ts     # 商品图片压缩服务
├── api/shop/
│   └── goods.ts                    # 商品API（已添加获取所有商品方法）
└── views/shop/goods/
    └── index.vue                   # 商品管理页面（已添加压缩按钮和功能）
```

## 功能特性

### 1. 批量获取商品
- 自动分页获取所有商品数据
- 每页获取100条记录
- 智能判断数据是否获取完成

### 2. 智能压缩
- 支持自定义压缩质量（高质量/中等质量/高压缩）
- 可配置最大宽度和高度（默认980x980）
- 仅压缩图片文件，非图片文件自动跳过
- 压缩失败时使用原文件

### 3. 实时进度显示
- 显示总商品数、当前处理进度
- 显示成功数、失败数、跳过数
- 实时进度条和状态提示
- 每个商品的处理状态实时反馈

### 4. 自动上传更新
- 压缩后自动上传到服务器
- 自动更新商品信息的封面图URL
- 保留原图片作为备份

## 使用方法

### 在商品管理页面操作

1. 进入 **店铺管理 > 商品管理** 页面
2. 点击顶部工具栏的 **"一键压缩图片"** 按钮
3. 确认操作提示（注意：此操作可能需要较长时间）
4. 等待压缩完成，查看进度和结果

### 压缩配置

默认压缩配置：
- 质量：中等质量（0.8）
- 最大宽度：980像素
- 最大高度：980像素

如需修改配置，可编辑 `src/views/shop/goods/index.vue` 中的 `handleCompressAllImages` 函数：

```typescript
const results = await compressAllGoodsImages({
  quality: ImageQuality.HIGH,  // 可选：HIGH | MEDIUM | LOW
  maxWidth: 1280,              // 可自定义最大宽度
  maxHeight: 1280,             // 可自定义最大高度
  onProgress: (progress) => {
    compressProgress.value = progress;
  }
});
```

## 质量级别说明

| 级别 | 值 | 适用场景 |
|------|----|----------|
| 高质量 | 0.9 | 产品图、头像等需要高清晰度的图片 |
| 中等质量 | 0.8 | 一般场景（推荐） |
| 高压缩 | 0.6 | 缩略图、证明材料等 |

## 进度信息说明

- **总商品数**：需要处理的商品总数（有封面图）
- **当前处理**：正在处理第几个商品
- **成功**：压缩并更新成功的商品数
- **失败**：压缩或上传失败的商品数
- **跳过**：没有封面图或无需处理的商品数

## 注意事项

### ⚠️ 重要提示

1. **备份建议**：操作前建议先备份商品数据和图片文件
2. **网络要求**：确保网络稳定，压缩过程需要多次上传
3. **时间预估**：根据商品数量，可能需要几分钟到几十分钟
4. **权限要求**：需要 `shop:goods:write` 权限才能执行压缩

### 处理逻辑

1. 扫描所有商品，筛选出有封面图的商品
2. 逐个下载商品封面图
3. 压缩图片（质量、尺寸调整）
4. 上传压缩后的图片到服务器
5. 更新商品信息中的封面图URL
6. 记录处理结果和错误信息

### 错误处理

- 单个商品压缩失败不会影响其他商品
- 失败信息会实时显示在控制台
- 可以在浏览器开发者工具中查看详细错误
- 支持断点续传（刷新页面后可重新执行）

## 开发者指南

### 自定义压缩参数

编辑 `src/utils/goodsImageCompressor.ts` 文件中的 `compressGoodsImage` 函数，可以自定义更多压缩选项：

```typescript
const { file: compressedFile, compressed } = await compressImageSafe(file, {
  quality: 0.8,              // 压缩质量 0-1
  maxWidth: 980,             // 最大宽度
  maxHeight: 980,            // 最大高度
  resize: 'cover',           // 调整大小模式
  crop: false,               // 是否裁剪
  rotate: 0,                 // 旋转角度
  blur: 0,                   // 模糊半径
  grayscale: false,          // 是否转为灰度图
  output: 'blob'             // 输出类型
});
```

### 调试模式

压缩过程中的详细信息会输出到浏览器控制台，包括：
- 商品处理进度
- 成功/失败的商品列表
- 错误详情和原因
- 压缩前后的文件大小对比

### 扩展功能

可以基于此功能扩展以下功能：
1. 批量压缩商品详情页图片
2. 添加图片格式转换（如转为WebP）
3. 添加图片水印功能
4. 添加压缩前后对比功能

## 故障排除

### 常见问题

**Q: 压缩过程中出现网络错误怎么办？**
A: 单个图片失败不会影响整体流程，可以重新点击按钮对失败的商品进行二次压缩。

**Q: 压缩后图片模糊怎么办？**
A: 调整压缩质量为 `ImageQuality.HIGH`，或增大 `maxWidth/maxHeight` 参数。

**Q: 可以压缩指定分类的商品吗？**
A: 目前是压缩所有商品，如需指定分类，可以修改 `getAllGoods` 函数添加分类过滤条件。

**Q: 压缩后的图片存储在哪里？**
A: 压缩后的图片通过 `/file/upload` 接口上传到服务器，存储路径由后端配置决定。

## 更新日志

### v1.0.0
- 初始版本
- 支持一键压缩所有商品图片
- 实时进度显示
- 自动上传和更新功能
- 错误处理和重试机制