137 lines
3.0 KiB
Markdown
137 lines
3.0 KiB
Markdown
|
# 🚀 快速开始指南
|
|||
|
|
|
|||
|
|
## ✅ 重构完成清单
|
|||
|
|
|
|||
|
|
- [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` - 重构详情
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**重构完成！立即启动项目体验全新代码结构！** 🎉
|