# 图片迁移检查清单

## ✅ 已完成的工作

### 1. 创建图片工具
- ✅ 创建 `src/utils/imageHelper.ts` 工具类
- ✅ 配置预定义图片映射 `BIG_IMAGES`
- ✅ 提供多种使用方式：`getBigImage()`, `getBigImageUrl()`, `getBigImagesUrl()`
- ✅ 添加图片预加载功能 `preloadImages()`

### 2. 更新代码引用
- ✅ `src/components/EmptyData/index.tsx` - 空数据组件
- ✅ `src/pages/index/index.tsx` - 首页轮播图和卡片
- ✅ `src/pages/user/index.tsx` - 用户页面背景
- ✅ `src/pageStore/storeDetail/index.tsx` - 门店详情轮播图
- ✅ `src/pages/message/index.tsx` - 消息页面图片和空数据
- ✅ `src/pagesUser/orderList/index.tsx` - 订单列表空数据
- ✅ `src/pagesOrder/rechargeDetail/index.tsx` - 充值详情空数据
- ✅ `src/pagesOrder/accountBalance/components/OpenRecordList.tsx` - 开台记录空数据
- ✅ `src/pagesOrder/accountBalance/components/RechargeRecordList.tsx` - 充值记录空数据
- ✅ `src/pagesOrder/accountBalance/components/BalanceList.tsx` - 余额记录空数据

### 3. 构建测试
- ✅ 修复所有语法错误
- ✅ 成功构建微信小程序
- ✅ 生成的代码正确使用图片工具

## 🔄 需要你完成的工作

### 1. 服务器图片检查
确保以下图片已上传到服务器 `http://39.101.75.71:8888/img/MiniBgImage/`：

- [ ] `noData.png` - 空数据占位图
- [ ] `swBG.png` - 轮播背景图
- [ ] `user_bg.png` - 用户页面背景
- [ ] `fjmd.png` - 附近门店功能图
- [ ] `smkt.png` - 扫码开台功能图
- [ ] `tghx.png` - 团购核销功能图

### 2. 图片访问测试
在浏览器中测试以下 URL 是否可以正常访问：

- [ ] http://39.101.75.71:8888/img/MiniBgImage/noData.png
- [ ] http://39.101.75.71:8888/img/MiniBgImage/swBG.png
- [ ] http://39.101.75.71:8888/img/MiniBgImage/user_bg.png
- [ ] http://39.101.75.71:8888/img/MiniBgImage/fjmd.png
- [ ] http://39.101.75.71:8888/img/MiniBgImage/smkt.png
- [ ] http://39.101.75.71:8888/img/MiniBgImage/tghx.png

### 3. 小程序测试
- [ ] 在微信开发者工具中预览小程序
- [ ] 检查所有页面的图片是否正常显示
- [ ] 测试网络较慢时的图片加载体验
- [ ] 检查图片加载失败时的表现

### 4. 性能优化（可选）
- [ ] 在 `app.tsx` 中添加关键图片预加载
- [ ] 为图片组件添加 `onError` 错误处理
- [ ] 考虑添加图片懒加载

## 📝 使用示例

### 基础用法
```typescript
import { getBigImage } from '@/utils/imageHelper'

// 在组件中使用
<Image src={getBigImage('NO_DATA')} mode="aspectFit" />
```

### 预加载关键图片
```typescript
import { preloadImages, getBigImage } from '@/utils/imageHelper'

// 在应用启动时预加载
const keyImages = [
  getBigImage('NO_DATA'),
  getBigImage('SW_BG'),
  getBigImage('USER_BG')
]

preloadImages(keyImages).then(() => {
  console.log('关键图片预加载完成')
})
```

### 添加新图片
1. 上传图片到服务器：`http://39.101.75.71:8888/img/MiniBgImage/新图片.png`
2. 在 `BIG_IMAGES` 中添加映射：
```typescript
export const BIG_IMAGES = {
  // 现有图片...
  NEW_IMAGE: '新图片.png',
} as const
```
3. 在代码中使用：`getBigImage('NEW_IMAGE')`

## ⚠️ 注意事项

1. **网络依赖**：图片加载现在依赖网络，首次加载会有延迟
2. **缓存机制**：小程序会自动缓存网络图片
3. **错误处理**：建议为重要图片添加加载失败的兜底处理
4. **包体积**：本地大图已移除，小程序包体积显著减少

## 🚀 预期收益

- ✅ **包体积减少**：移除本地大图，预计减少包体积 500KB+
- ✅ **便于管理**：图片统一在服务器管理，更新无需重新发布
- ✅ **加载灵活**：可以动态更新图片内容
- ✅ **代码整洁**：统一的图片引用方式，便于维护