# 企业微信拖拽图片功能使用指南

## 功能说明

在"确认需求"阶段的AI设计分析区域，现已支持从企业微信群聊中直接拖拽图片到上传区域。

## 使用方法

### 1. 拖拽上传
1. 打开项目详情 → 进入"确认需求"阶段
2. 找到"AI设计分析"卡片
3. 从企业微信群聊中选择图片
4. 直接拖拽到"上传参考文件"区域
5. 系统会自动处理并显示预览

### 2. 支持的格式
- **图片格式**: JPG, JPEG, PNG, GIF, WebP, BMP, TIFF
- **单张图片大小**: 最大 50MB（超过5MB会自动压缩）
- **数量限制**: 最多同时上传 20 张图片

### 3. 多张图片上传
- 可以一次拖拽多张图片
- 可以多次拖拽，逐步添加图片
- 每张图片都会显示文件名和大小

## 数据结构日志

当您拖拽图片时，浏览器控制台会自动打印详细的数据结构信息：

### 打开控制台
1. 按 `F12` 或 `Ctrl + Shift + I` 打开开发者工具
2. 切换到"Console"（控制台）标签页
3. 执行拖拽操作

### 日志示例

```
🎯 ========== 拖拽事件触发 ==========
📋 事件类型: drop
📋 DataTransfer对象: DataTransfer {...}

📦 DataTransfer详细信息:
  - dropEffect: none
  - effectAllowed: all
  - files数量: 2
  - items数量: 2
  - types: ['Files']

📄 Items详细信息:
  Item 1: {kind: 'file', type: 'image/jpeg', webkitGetAsEntry: '支持'}
  Item 2: {kind: 'file', type: 'image/png', webkitGetAsEntry: '支持'}

📁 Files详细信息:
  File 1: {
    name: '客厅效果图.jpg',
    type: 'image/jpeg',
    size: '1024.50 KB',
    lastModified: '2025/12/2 23:45:30'
  }
  File 2: {
    name: '卧室效果图.png',
    type: 'image/png',
    size: '2048.75 KB',
    lastModified: '2025/12/2 23:45:35'
  }

✅ 通过标准files API获取到文件，共 2 个
📤 准备处理文件: 客厅效果图.jpg, 大小: 1.00MB
🔄 将图片转换为base64格式...
✅ 图片已转换为base64，大小: 1365.33KB
💾 已保存图片: 客厅效果图.jpg
📤 准备处理文件: 卧室效果图.png, 大小: 2.00MB
🔄 将图片转换为base64格式...
✅ 图片已转换为base64，大小: 2731.67KB
💾 已保存图片: 卧室效果图.png
✅ 已处理2个文件
🎯 所有图片已转为base64，可直接进行AI分析
```

## 数据结构说明

### DataTransfer 对象
```typescript
{
  dropEffect: string,        // 拖放效果 (none/copy/move/link)
  effectAllowed: string,     // 允许的效果 (all/copy/move/link)
  files: FileList,          // 文件列表
  items: DataTransferItemList, // 数据项列表
  types: string[]           // 数据类型数组
}
```

### DataTransferItem 对象
```typescript
{
  kind: 'file' | 'string',  // 数据类型
  type: string,             // MIME类型 (如 'image/jpeg')
  webkitGetAsEntry: boolean // 是否支持目录拖拽
}
```

### File 对象
```typescript
{
  name: string,             // 文件名
  type: string,             // MIME类型
  size: number,             // 文件大小（字节）
  lastModified: number      // 最后修改时间戳
}
```

### 上传后的文件记录
```typescript
{
  url: string,              // base64数据URL
  name: string,             // 文件名
  type: string,             // MIME类型
  size: number,             // 原始文件大小
  extension: string,        // 文件扩展名 (jpg/png/...)
  isBase64: true            // 标记为base64格式
}
```

## 企业微信特殊处理

系统会尝试两种方式获取文件：

### 方式1: 标准 files API
```javascript
const files = event.dataTransfer.files;
```

### 方式2: items API（企业微信备用方案）
```javascript
const items = event.dataTransfer.items;
for (let i = 0; i < items.length; i++) {
  if (items[i].kind === 'file') {
    const file = items[i].getAsFile();
  }
}
```

## 常见问题

### Q: 拖拽后没有反应？
**A**: 请检查控制台日志：
- 如果看到"未能从拖拽事件中提取到文件"，请尝试点击上传按钮
- 确认拖拽的是图片文件而非文件夹

### Q: 为什么有些图片拖拽失败？
**A**: 可能的原因：
- 文件格式不支持（只支持图片格式）
- 文件超过50MB限制
- 网络连接问题

### Q: 如何查看详细的错误信息？
**A**: 
1. 打开浏览器控制台（F12）
2. 查看红色错误信息
3. 截图控制台日志，联系技术支持

## 技术实现

### 文件处理流程
```
拖拽事件触发
  ↓
提取文件对象（files/items API）
  ↓
验证文件格式和大小
  ↓
大文件自动压缩（>5MB）
  ↓
转换为base64格式
  ↓
保存到内存数组
  ↓
显示预览
  ↓
可进行AI分析
```

### 压缩策略
- **5MB以下**: 直接使用
- **5MB-50MB**: 自动压缩（质量0.8，最大宽度3000px）
- **50MB以上**: 拒绝上传，提示用户使用专业工具压缩

## 相关文件

- **组件**: `stage-requirements.component.ts`
- **模板**: `stage-requirements.component.html`
- **服务**: `design-analysis-ai.service.ts`

## 更新日志

**2025-12-02**
- ✅ 支持企业微信拖拽图片
- ✅ 添加详细的数据结构日志
- ✅ 支持多张图片同时拖拽
- ✅ 自动压缩大文件
- ✅ 实时显示上传进度