bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/QUICK_START.md

🚀 快速开始指南

✅ 重构完成清单

• 20 个 Vue 组件（模块化、语义化）
• 3 个 Composables（状态管理）
• 119 个图片资源（已复制并更新路径）
• 公共样式和常量配置
• 完整的项目文档

总计：148 个文件，重构 100% 完成！ ✨

---

🎯 立即使用

1. 启动项目

cd bxztApp
pnpm dev:screen

2. 添加路由（如果还未添加）

在路由配置文件中添加：

{
  path: '/3d-situational-awareness',
  component: () => import('@/views/3DSituationalAwarenessRefactor/index.vue')
}

3. 访问页面

浏览器打开：http://localhost:xxxx/3d-situational-awareness

---

📂 核心文件位置

文件	路径	说明
主页面	index.vue	入口文件
左侧面板	components/LeftPanel/	5个组件
右侧面板	components/RightPanel/	5个组件
地图区域	components/MapViewer/	2个组件
公共组件	components/shared/	3个组件
状态管理	composables/	3个JS文件
图片资源	assets/images/	119个PNG

---

📚 文档导航

1. 📖 完整项目说明 → README.md（组件使用、样式规范、开发指南）

2. 📊 重构总结报告 → REFACTORING_SUMMARY.md（对比分析、最佳实践）

3. 🖼️ 图片资源说明 → assets/images/README.md（图片使用方式）

4. 🗺️ 图片路径映射 → assets/images/IMAGE_MAPPING.md（文件名对照表）

---

🔥 核心改进

指标	原始代码	重构后
文件数量	1个	148个
单文件行数	792行	<200行
命名方式	group_1	DisasterAnalysis
响应式	固定像素	vw/vh/fs
可维护性	❌ 差	✅ 优秀

---

⚡ 快速定位问题

如果页面不显示

1. 检查路由配置是否正确
2. 确认图片路径是否正确
3. 查看浏览器控制台错误

如果图片不显示

1. 确认图片文件已复制（119个）
2. 检查图片路径（使用 SketchPng... 格式）
3. 查看 assets/images/IMAGE_MAPPING.md

如果样式错误

1. 确认 @/styles/mixins.scss 存在
2. 检查 vw/vh/fs 函数定义
3. 查看 assets/styles/common.scss

---

🎨 组件使用示例

<script setup>
import { useDisasterData } from './composables/useDisasterData'

// 使用状态管理
const { disasterInfo, forcePreset } = useDisasterData()
</script>

<template>
  <!-- 使用公共组件 -->
  <PanelHeader title="快速感知" subtitle="「灾害分析」" />

  <DataField
    label="灾害类型"
    :value="disasterInfo.type"
    color-type="danger"
  />

  <ActionButton
    text="一键启动"
    type="primary"
    @click="handleStart"
  />
</template>

---

📞 需要帮助？

查看详细文档：

• README.md - 完整使用指南
• REFACTORING_SUMMARY.md - 重构详情

---

重构完成！立即启动项目体验全新代码结构！ 🎉