# 安装和开发

## 技术栈

- **前端**：Vue 3 + TypeScript + Vite
- **3D引擎**：Babylon.js
- **后端**：Node.js + Express
- **数据库**：SQLite with better-sqlite3

## 环境要求

- Node.js (版本 ^20.19.0 || >=22.12.0)
- npm 或 yarn 包管理器

## 安装

1. 克隆仓库：
```bash
git clone <repository-url>
cd motionDataViewer
```

2. 安装依赖：
```bash
npm install
```

## 开发

### 启动开发服务器

同时运行前端和后端服务器：
```bash
npm run dev:full
```

或者分别启动：
```bash
# 仅前端
npm run dev

# 仅后端
npm run server
```

## 生产构建

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 开发工具

### 类型检查

```bash
npm run type-check
```

### 代码检查

```bash
npm run lint
```

### 代码格式化

```bash
npm run format
```

## 项目结构

```
motionDataViewer/
├── public/                 # 静态资源
│   ├── glbs/              # 3D模型文件 (.glb)
│   └── *.json             # 物理模拟元数据文件
├── src/
│   ├── components/        # Vue组件
│   │   └── dataViewer.vue # 主3D查看器组件
│   ├── utils/             # 工具函数
|   |   ├── AnimationGroup.ts # 动作数据类
|   |   ├── tools.ts       # 工具函数
│   │   ├── database.ts    # 数据库管理
│   │   ├── loadMotion.ts  # 动作数据加载
│   │   └── translations.ts # 中英切换支持
│   └── assets/            # CSS和静态资源
├── server.js              # Express后端服务器
└── config.env             # 环境配置
```

## 使用方法

1. 使用 `npm run dev:full` 启动应用程序
2. 打开浏览器并导航到localhost:5173
3. 使用控制面板在不同动作数据文件之间导航
4. 使用搜索面板按各种条件过滤动作数据
5. 在3D视角观察动作数据
6. 查看数据可视化和图表进行详细分析

## 下载动作数据库

1. **下载动作数据库：**
   - **Google Drive**：访问 [动作数据库下载链接](https://drive.google.com/file/d/112pnjuIuNqADS-fAT6RUIAVPtb3VlWlq/view?usp=drive_link)
   - **百度网盘**：访问 [动作数据库下载链接](https://pan.baidu.com/s/1YCisRewRQQdYT-GzCZxu-w)（提取码：`wwqm`）
   - 根据您的网络情况选择合适的下载方式，下载压缩的动作数据库文件

2. **解压并组织数据：**
   - 将下载的文件解压到项目根目录

## 配置

编辑 `config.env` 来配置数据库设置和其他环境变量。确保数据库设置为下载的文件的目录。