# 快速启动指南

## 第一步：安装依赖

```bash
npm install
```

## 第二步：准备GLB模型文件

将您的GLB模型文件放入 `public/models/` 目录，文件名需要与 `src/data/data.json` 中的 `modelName` 对应。

例如：
- `交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`
- `交流棒形悬式复合绝缘子，FXBW-10/70.glb`
- `10kV 三相隔离开关.glb`

**注意：** 如果暂时没有模型文件，系统会显示加载失败提示，但不影响其他功能测试。

## 第三步：启动开发服务器

```bash
npm run serve
```

浏览器会自动打开 http://localhost:8080

## 功能测试

### 1. 列表页
- 查看所有模型列表
- 点击任意模型卡片进入详情页

### 2. 详情页（PC端）
- 左侧：3D模型展示区
- 右侧：检测内容表格
- 点击模型上的标注点，右侧表格会自动高亮对应项

### 3. 详情页（移动端）
- 顶部：模型名称
- 中间：3D模型展示区
- 底部：检测内容表格
- 点击标注点会弹出抽屉显示详细信息

### 4. 测试响应式
- 调整浏览器窗口大小
- 宽度 ≤ 768px 时切换为移动端布局
- 宽度 > 768px 时切换为PC端布局

## 常见问题

### Q: 模型加载失败？
A: 请确认：
1. GLB文件已放入 `public/models/` 目录
2. 文件名与 data.json 中的 modelName 完全一致
3. 文件格式是 .glb（不是 .gltf）

### Q: 标注点位置不准确？
A: 标注点位置采用圆形分布算法自动计算，可以在 `src/components/ThreeViewer.vue` 的 `createAnnotations` 方法中调整坐标。

### Q: 如何添加新模型？
A: 
1. 将GLB文件放入 `public/models/`
2. 在 `src/data/data.json` 中添加对应的数据配置
3. 刷新页面即可看到新模型

## 生产部署

```bash
npm run build
```

构建完成后，将 `dist` 目录部署到Web服务器即可。

## 技术支持

如有问题，请查看：
- README.md - 完整文档
- public/models/README.md - 模型文件说明