# 农具档案图片上传功能使用指南

## ✅ 功能概述

农具档案管理现已支持图片上传功能，可以在新增或编辑农具时上传多张设备图片。

## 📋 功能特性

### 1. **图片上传**
- ✅ 支持单张或多张图片上传
- ✅ 支持常见图片格式（jpg, png, gif等）
- ✅ 推荐尺寸：800x600

### 2. **图片管理**
- ✅ 实时预览上传的图片
- ✅ 4列网格布局展示
- ✅ 鼠标悬停显示删除按钮
- ✅ 一键删除不需要的图片

### 3. **图片查看**
- ✅ 在详情页面查看所有图片
- ✅ 点击图片可在新窗口查看大图
- ✅ 自动识别图片格式

## 🚀 使用步骤

### 新增农具时上传图片

1. **打开新增对话框**
   - 导航到：资产管理 → 资产基础数据 → 农具档案管理
   - 点击"新增农具"按钮

2. **填写基本信息**
   - 输入农具名称、类型、型号等必填信息
   - 滚动到"农具图片"部分

3. **上传图片**
   - 点击"上传图片"按钮
   - 选择一张或多张图片
   - 图片会立即显示在预览区

4. **管理图片**
   - 鼠标悬停在图片上，会显示删除按钮（X）
   - 点击删除按钮可移除不需要的图片
   - 可以继续添加更多图片

5. **保存**
   - 确认信息无误后，点击"保存"按钮
   - 图片会随农具信息一起保存

### 编辑农具时管理图片

1. **打开编辑对话框**
   - 在农具列表中找到要编辑的农具
   - 点击"编辑"按钮

2. **查看现有图片**
   - 编辑对话框会自动加载该农具的所有图片
   - 显示在"农具图片"预览区

3. **添加或删除图片**
   - 可以继续上传新图片
   - 删除不需要的图片
   - 修改其他信息

4. **保存更改**
   - 点击"更新"按钮保存修改

### 查看农具图片

1. **打开详情页**
   - 点击农具列表中的"查看"按钮

2. **浏览图片**
   - 在详情页面底部会显示"设备图片"卡片
   - 显示图片数量：如"设备图片 (3张)"
   - 4列网格布局展示所有图片

3. **查看大图**
   - 鼠标悬停时图片会轻微变暗
   - 点击图片在新窗口中打开大图

## 💡 使用技巧

### 图片选择建议
- **清晰度**：选择清晰、光线充足的照片
- **角度**：多角度拍摄（正面、侧面、细节等）
- **数量**：建议2-4张，全面展示设备状态
- **文件大小**：建议单张图片不超过5MB

### 最佳实践
1. **新设备入库**：拍摄设备外观、铭牌、关键部件
2. **维修记录**：拍摄损坏部位、维修前后对比
3. **资产盘点**：定期更新设备现状照片
4. **交接管理**：记录设备当前状态

## 📊 数据示例

### 模拟数据中的图片
系统已为部分农具准备了示例图片数据：

- **东方红拖拉机**：2张图片（tractor1.jpg, tractor2.jpg）
- **旋耕机**：1张图片（rotary1.jpg）
- **收割机**：3张图片（harvester1.jpg, harvester2.jpg, harvester3.jpg）
- **播种机**：1张图片（seeder1.jpg）

### 图片存储说明
- 当前为前端演示版本，图片使用Base64格式存储
- 实际生产环境应上传到服务器或云存储
- 建议使用CDN加速图片加载

## 🔧 技术实现

### 图片上传流程
```
用户选择图片
    ↓
FileReader读取文件
    ↓
转换为Base64格式
    ↓
添加到images数组
    ↓
实时预览显示
    ↓
保存时存储到农具数据
```

### 图片删除流程
```
用户点击删除按钮
    ↓
从images数组中移除
    ↓
重新渲染预览区
    ↓
保存时更新数据
```

## ⚠️ 注意事项

1. **浏览器兼容性**
   - 需要支持FileReader API的现代浏览器
   - 推荐使用Chrome、Firefox、Edge最新版本

2. **图片格式**
   - 支持：jpg, jpeg, png, gif, webp
   - 不支持：svg, bmp等特殊格式

3. **存储限制**
   - Base64格式会增加约33%的存储空间
   - 大量图片可能影响页面性能
   - 建议每个农具不超过10张图片

4. **数据迁移**
   - 切换到生产环境时需要更新图片上传逻辑
   - 将Base64改为服务器上传接口
   - 保存图片URL而非完整数据

## 🎯 快速测试

### 测试场景1：新增农具上传图片
1. 打开新增对话框
2. 填写：名称"小型旋耕机"，类型"耕作机械"
3. 点击上传图片，选择2-3张图片
4. 预览确认图片正确
5. 保存并查看详情

### 测试场景2：编辑时管理图片
1. 编辑已有农具（如"东方红拖拉机"）
2. 查看现有的2张图片
3. 删除1张图片
4. 上传1张新图片
5. 保存并查看详情，确认图片已更新

### 测试场景3：查看大图
1. 打开任意有图片的农具详情
2. 滚动到"设备图片"部分
3. 点击任意图片
4. 确认在新窗口中打开

## 📝 开发者注意

### 迁移到生产环境
更新图片上传处理函数：

```typescript
// 替换 handleToolImageUpload 函数
const handleToolImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
  const files = e.target.files;
  if (!files || files.length === 0) return;

  // 上传到服务器
  const formData = new FormData();
  Array.from(files).forEach(file => {
    formData.append('images', file);
  });

  try {
    const response = await fetch('/api/upload/tool-images', {
      method: 'POST',
      body: formData,
    });
    const data = await response.json();
    
    // 获取图片URL
    const imageUrls = data.urls; // 服务器返回的URL数组
    
    setToolFormData({
      ...toolFormData,
      images: [...toolFormData.images, ...imageUrls],
    });
    
    toast.success(`已上传 ${imageUrls.length} 张图片`);
  } catch (error) {
    toast.error('图片上传失败');
  }
};
```

## ✨ 总结

农具档案图片上传功能已完整实现，支持新增、编辑、查看全流程管理。通过可视化的图片展示，可以更直观地管理农具资产，提升资产管理效率。
