93 lines
2.5 KiB
Markdown
93 lines
2.5 KiB
Markdown
|
# 图片资源说明
|
|||
|
|
|
|||
|
|
## 📁 图片资源已迁移
|
|||
|
|
|
|||
|
|
已将原始目录的 **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/` - 原始图片目录（保留作为备份）
|