# 图片资源说明

## 📁 图片资源已迁移

已将原始目录的 **119 个图片文件** 复制到当前目录。

## 🗂️ 图片使用方式

### 方式 1：使用图片索引（推荐）

我们创建了 `index.js` 文件来管理所有图片资源，提供语义化的名称：

```vue
<script setup>
import images from '../../assets/images/index.js'
</script>

<template>
  <img :src="images.mapBackground" alt="map" />
  <img :src="images.disasterTypeIcon" alt="disaster" />
</template>
```

### 方式 2：直接引用原始文件名

如果不想使用索引文件，可以直接引用原始文件名：

```vue
<template>
  <img src="../../assets/images/SketchPng6af9a2a9b178bf00e6f7a65fc219a900c3b362f4ce5656b4f996a54a2b49450c.png" />
</template>
```

## 📋 图片资源分类

### 背景图片（7个）
- `mapBackground` - 地图背景
- `leftPanelBg` - 左侧面板背景
- `rightPanelBg` - 右侧面板背景
- `headerBg` - 顶部导航背景
- `panelHeaderBg` - 面板标题背景
- `popupBg` - 弹窗背景

### 图标类（50+个）
- 导航图标：返回、设置、场景等
- 功能图标：位置、下拉、计划等
- 数据图标：灾害类型、伤亡、车辆等
- 操作图标：喊话、音频、放大等

### 装饰性图片（20+个）
- 各种装饰性边框、分割线、角标等

### 标记点（5个）
- 地图标记、应急人员、应急中心等

## 🔧 图片优化建议

1. **重命名图片**（可选）：
   ```bash
   # 将 SketchPng... 重命名为有意义的名称
   mv SketchPng6af9a2a9... disaster-type-icon.png
   ```

2. **图片压缩**：
   - 使用 TinyPNG 或 ImageOptim 压缩图片
   - 预计可减少 30-50% 的文件体积

3. **图片格式转换**：
   - 装饰性图片：PNG → WebP
   - 简单图标：PNG → SVG（如果可能）

## 📊 图片统计

| 类型 | 数量 | 说明 |
|------|------|------|
| 背景图 | 7 | 页面和面板背景 |
| 功能图标 | 30+ | 交互功能图标 |
| 装饰图 | 20+ | 边框、分割线等 |
| 其他 | 60+ | 合并图、占位图等 |
| **总计** | **119** | 已全部复制到此目录 |

## ⚠️ 注意事项

1. 图片资源较多，建议使用 `index.js` 统一管理
2. 原始文件名无意义，建议通过索引文件访问
3. 部分图片可能重复或未使用，可在实际开发中清理
4. 如需新增图片，请同步更新 `index.js` 文件

## 🔗 相关文件

- `index.js` - 图片资源索引文件
- `../../../3DSituationalAwarenessCopy/assets/img/` - 原始图片目录（保留作为备份）