# 🚀 快速开始指南

## ✅ 重构完成清单

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

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

---

## 🎯 立即使用

### 1. 启动项目
```bash
cd bxztApp
pnpm dev:screen
```

### 2. 添加路由（如果还未添加）
在路由配置文件中添加：
```javascript
{
  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`

---

## 🎨 组件使用示例

```vue
<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` - 重构详情

---

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