bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/README.md

图片资源说明

📁 图片资源已迁移

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

🗂️ 图片使用方式

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

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

<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：直接引用原始文件名

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

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

📋 图片资源分类

背景图片（7个）

• mapBackground - 地图背景
• leftPanelBg - 左侧面板背景
• rightPanelBg - 右侧面板背景
• headerBg - 顶部导航背景
• panelHeaderBg - 面板标题背景
• popupBg - 弹窗背景

图标类（50+个）

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

装饰性图片（20+个）

• 各种装饰性边框、分割线、角标等

标记点（5个）

• 地图标记、应急人员、应急中心等

🔧 图片优化建议

1. 重命名图片（可选）：

   # 将 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/ - 原始图片目录（保留作为备份）