# 中道救援培训系统 - 前端

## 技术栈

- Vue 3.4 + Composition API + `<script setup>`
- TypeScript 5
- Vite 5
- Pinia 2 + pinia-plugin-persistedstate
- Vue Router 4
- Element Plus 2
- Axios
- SCSS

## 目录结构

```
src/
  api/           # API 接口层（按模块拆分，不写状态、不写UI）
  assets/        # 静态资源、SCSS 变量与全局样式
  components/    # 业务组件（不写API）
    Layout/      # 布局：AppLayout / Sidebar / Header / Breadcrumb
    common/      # 通用：StatCard / PageCard / StatusBadge / EmptyState
  composables/   # 组合式函数（复杂逻辑抽取）
  router/        # 路由配置 + 导航守卫
  stores/        # Pinia 状态管理（不写UI）
  types/         # TypeScript 类型定义
  utils/         # 工具函数（纯函数，无副作用）
  views/         # 页面容器（只组装，不写业务逻辑）
```

## 分层原则

| 层级 | 职责 | 禁止 |
|------|------|------|
| views | 页面组装、布局占位 | 直接调用 API、操作 localStorage |
| components | UI 渲染、props/emit | 调用 API、访问 store（Layout 除外） |
| composables | 业务逻辑组装、数据流转 | 操作 DOM、直接渲染 UI |
| stores | 状态管理、跨组件共享 | 写 UI、调 DOM |
| api | HTTP 请求、数据转换 | 写状态、写 UI |
| utils | 纯函数工具、常量 | 副作用、API 调用 |

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产环境
npm run build
```

## 部署

构建产物位于 `dist/` 目录，通过 Nginx 独立部署：

```nginx
server {
  listen 80;
  server_name training.example.com;
  root /var/www/training-frontend/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://backend:8080;
  }
}
```