# 停车模拟器

**Repository Path**: picksan/parking-simulator

## Basic Information

- **Project Name**: 停车模拟器
- **Description**: 模拟汽车停车场景。可以观察汽车的扫过路径。测试汽车怎么才能不碰到障碍物。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-17
- **Last Updated**: 2026-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 停车场景网页模拟器

一个基于 `React + TypeScript + Vite` 的 2D 停车场景模拟器，用来手动模拟车辆在地下车库中的入库、出库和挪车过程，辅助判断是否会蹭到柱子、墙体或车位边界。

## 功能特点

- 2D 俯视图模拟车辆运动轨迹
- 实时显示车辆轮廓、历史轨迹和扫掠包络
- 显示车辆与关键障碍物之间的最近距离
- 可视化车头、车尾、前轮转角，以及 A / B / C 柱位置
- 支持鼠标拖动车辆位置
- 支持键盘控制车辆前进、倒车和转向
- 支持调整车辆参数、车位尺寸、通道宽度、柱子尺寸
- 支持本地缓存、JSON 导入导出

## 适用场景

- 地下车库倒车入库
- 地下车库出库前的空间判断
- 判断车头、后角、A 柱附近是否接近柱子
- 粗略评估不同车型在同一车位中的挪车难度

说明：
当前版本定位为“工程参考级”几何模拟工具，用于空间判断和刮蹭风险预估，不替代真实车辆官方转弯数据或专业 CAD 工具。

## 技术栈

- React 18
- TypeScript
- Vite
- Canvas 2D
- Vitest

## 本地运行

先安装依赖：

```bash
npm install
```

启动开发环境：

```bash
npm run dev
```

默认开发地址通常为：

```text
http://127.0.0.1:5173/
```

## 构建生产版本

```bash
npm run build
```

构建产物会输出到：

```text
dist/
```

本地预览构建结果：

```bash
npm run preview
```

## 用 Python 运行构建后的网页

先构建：

```bash
npm run build
```

再进入 `dist` 目录启动静态文件服务：

```bash
cd dist
python -m http.server 8000
```

浏览器打开：

```text
http://127.0.0.1:8000
```

如果要让局域网其他设备访问：

```bash
python -m http.server 8000 --bind 0.0.0.0
```

## 交互说明

### 画布操作

- 直接拖动车辆可调整当前车辆位置
- 拖动障碍物可微调柱子位置
- 车辆前方的旋转手柄用于调整车辆朝向

### 键盘控制

- `W` / `↑`：前进一步
- `S` / `↓`：倒车一步
- `A` / `←`：左打方向
- `D` / `→`：右打方向
- `Space`：回正
- `Backspace`：撤销一步
- `R`：重置轨迹

支持长按连续控制。

### 面板功能

- `清除轨迹`：仅清除历史轨迹和扫掠包络，车辆保持当前位置
- `重置轨迹`：回到场景起始车位
- `初始化场景`：清除缓存并恢复默认配置
- `导出 JSON`：导出当前场景、车辆参数和操作历史
- `导入 JSON`：恢复之前导出的配置

## 测试

运行单元测试：

```bash
npm test
```

## 发布到网上

这是一个纯静态前端项目，可以直接把 `dist/` 发布到静态托管平台：

- Netlify
- Vercel
- Gitee Pages
- 阿里云 OSS 静态网站托管
- 腾讯云静态网站托管

如果发布到 GitHub Pages 的独立项目仓库（例如 `https://github.com/<user>/<repo>`），当前项目已经内置了 GitHub Actions 发布工作流，并会在生产构建时自动使用 `/<repo>/` 作为资源基础路径，适合部署到：

```text
https://<user>.github.io/<repo>/
```

推荐流程：

1. `npm run build`
2. 上传 `dist/`
3. 获取公网地址后发给别人使用

## 目录结构

```text
src/
  components/
    SimulationCanvas.tsx
  lib/
    geometry.ts
    scenarios.ts
    simulation.ts
    simulation.test.ts
    storage.ts
  App.tsx
  main.tsx
  styles.css
  types.ts
```

## 后续可扩展方向

- 增加更多真实车库模板
- 增加侧方停车模板
- 增加更精确的 A / B / C 柱参数模型
- 支持保存多个车库方案
- 增加移动端优化