2026-05-12

training/codes/training-system-frontend/README.md

@@ -0,0 +1,74 @@
+# 中道救援培训系统 - 前端
+
+## 技术栈
+
+- 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;
+  }
+}
+```