🔥 提交
This commit is contained in:
menft
parent
f1881865de
commit
d5bfe994be
@ -1,207 +0,0 @@
|
|||||||
[根目录](../../CLAUDE.md) > **app/backend**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 管理后台前端（PlayEdu Backend）
|
|
||||||
|
|
||||||
## 变更记录 (Changelog)
|
|
||||||
|
|
||||||
### 2025-11-24 22:45:26
|
|
||||||
- 初始化模块文档
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 模块职责
|
|
||||||
|
|
||||||
PlayEdu 管理后台是供平台管理员使用的 Web 应用，提供：
|
|
||||||
- 课程管理（线上课程、线下课程、实验课程、软件模块）
|
|
||||||
- 教材与知识点管理
|
|
||||||
- 考试与题库管理
|
|
||||||
- 学员与部门管理
|
|
||||||
- 资源库管理（视频、文档、音频、图片、附件）
|
|
||||||
- AI 知识库管理
|
|
||||||
- 系统配置与权限管理
|
|
||||||
- 数据统计与日志查看
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 入口与启动
|
|
||||||
|
|
||||||
**主入口文件**：`src/main.tsx`
|
|
||||||
|
|
||||||
**启动命令**：
|
|
||||||
```bash
|
|
||||||
cd app/backend
|
|
||||||
npm install
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
**构建命令**：
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
**开发服务器**：`http://localhost:5173`（Vite 默认端口）
|
|
||||||
|
|
||||||
**生产构建输出**：`dist/`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 对外接口
|
|
||||||
|
|
||||||
### API 通信
|
|
||||||
- **API Base URL**：配置在 `src/api/internal/httpClient.ts`
|
|
||||||
- **认证方式**：Bearer Token（存储在 localStorage）
|
|
||||||
|
|
||||||
### ⚠️ httpClient 响应数据结构（重要）
|
|
||||||
|
|
||||||
**httpClient 已经解包了一层**，调用 `client.get/post/put` 返回的是 `response.data`，即：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 后端原始响应
|
|
||||||
{ "code": 0, "msg": "", "data": [...] }
|
|
||||||
|
|
||||||
// httpClient.get() 返回的 res 就是上面这个对象
|
|
||||||
const res = await client.get('/api/xxx');
|
|
||||||
// res = { code: 0, msg: "", data: [...] }
|
|
||||||
// res.data = [...] ✅ 正确
|
|
||||||
// res.data.data ❌ 错误！多解了一层
|
|
||||||
```
|
|
||||||
|
|
||||||
**正确用法**：
|
|
||||||
```typescript
|
|
||||||
const res: any = await someApi.getData();
|
|
||||||
const items = res.data || []; // ✅ 直接用 res.data
|
|
||||||
```
|
|
||||||
|
|
||||||
**错误用法**：
|
|
||||||
```typescript
|
|
||||||
const res: any = await someApi.getData();
|
|
||||||
const items = res.data.data || []; // ❌ 多解了一层，永远是 undefined
|
|
||||||
```
|
|
||||||
|
|
||||||
### 主要 API 模块（位于 `src/api/`）：
|
|
||||||
- `login.ts` - 管理员登录与认证
|
|
||||||
- `course.ts` - 课程管理
|
|
||||||
- `paper.ts` / `question.ts` - 考试与题库
|
|
||||||
- `user.ts` / `department.ts` - 学员与部门
|
|
||||||
- `resource.ts` / `resource-category.ts` - 资源管理
|
|
||||||
- `knowledge-*.ts` - AI 知识库
|
|
||||||
- `system.ts` / `app-config.ts` - 系统配置
|
|
||||||
- `upload.ts` - 文件上传（支持 S3/OSS）
|
|
||||||
|
|
||||||
### 路由结构
|
|
||||||
- **公开路由**：`/login` - 登录页
|
|
||||||
- **管理员路由**（需认证）：
|
|
||||||
- `/dashboard` - 数据看板
|
|
||||||
- `/course/*` - 课程管理
|
|
||||||
- `/offline-course/*` - 线下课程
|
|
||||||
- `/lab-course/*` - 实验课程
|
|
||||||
- `/textbook/*` - 教材管理
|
|
||||||
- `/exam/*` - 考试管理
|
|
||||||
- `/question/*` - 题库管理
|
|
||||||
- `/resource/*` - 资源库
|
|
||||||
- `/repository/*` - 仓库管理
|
|
||||||
- `/knowledge/*` - AI 知识库
|
|
||||||
- `/user/*` - 学员管理
|
|
||||||
- `/department/*` - 部门管理
|
|
||||||
- `/system/*` - 系统配置
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 关键依赖与配置
|
|
||||||
|
|
||||||
### 技术栈
|
|
||||||
- **框架**：React 18.2 + TypeScript 4.9
|
|
||||||
- **构建工具**：Vite 7.1.3
|
|
||||||
- **UI 库**：Ant Design 5.12.2
|
|
||||||
- **状态管理**：Redux Toolkit + React-Redux
|
|
||||||
- **路由**：React Router DOM 6.9
|
|
||||||
- **HTTP 客户端**：Axios 1.3.4
|
|
||||||
- **富文本编辑器**：Quill 2.0.3 + Braft Editor
|
|
||||||
- **图表**：ECharts 5.4.2 + ECharts for React
|
|
||||||
- **视频播放器**：XGPlayer 3.0.13 + HLS 支持
|
|
||||||
- **文件上传**：Uppy 4.x（支持 AWS S3）
|
|
||||||
- **国际化**：i18next + react-i18next
|
|
||||||
- **工具库**：Day.js、Moment.js、Lodash、XLSX、FileSaver
|
|
||||||
|
|
||||||
### 配置文件
|
|
||||||
- `package.json` - 依赖与脚本定义
|
|
||||||
- `vite.config.ts` - Vite 构建配置（未找到，可能使用默认配置）
|
|
||||||
- `tsconfig.json` - TypeScript 配置
|
|
||||||
- `eslint.config.js` - ESLint 配置（使用 Prettier 集成）
|
|
||||||
|
|
||||||
### 代码规范工具
|
|
||||||
- ESLint 9.x（@typescript-eslint/eslint-plugin）
|
|
||||||
- Prettier 3.6.2
|
|
||||||
- 格式化命令：`npm run format`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 数据模型
|
|
||||||
|
|
||||||
### Redux Store 结构（`src/store/`）
|
|
||||||
- `user.ts` / `userSlice` - 当前管理员信息
|
|
||||||
- `system.ts` / `systemSlice` - 系统配置（API URL、logo、名称等）
|
|
||||||
- `resource.ts` / `resourceSlice` - 资源 URL 映射
|
|
||||||
|
|
||||||
### 本地存储（localStorage）
|
|
||||||
- `token` - 认证 Token
|
|
||||||
- `api_url` - API 服务器地址
|
|
||||||
- `system_name` - 系统名称
|
|
||||||
- `language` - 界面语言（zh-CN / zh-TC）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 测试与质量
|
|
||||||
|
|
||||||
- **代码检查**：ESLint（`npm run lint` / `npm run lint:quiet`）
|
|
||||||
- **代码格式化**：Prettier（`npm run format`）
|
|
||||||
- **类型检查**：TypeScript 严格模式
|
|
||||||
- **浏览器兼容性**：通过 Vite 自动处理 polyfills
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 常见问题 (FAQ)
|
|
||||||
|
|
||||||
### Q1：如何添加新的管理页面？
|
|
||||||
1. 在 `src/pages/` 下创建新页面组件
|
|
||||||
2. 在路由配置中添加路由（通常在 `App.tsx` 或独立的路由文件中）
|
|
||||||
3. 添加对应的 API 调用（在 `src/api/` 中）
|
|
||||||
4. 更新导航菜单（如果需要）
|
|
||||||
|
|
||||||
### Q2：如何配置 API 服务器地址？
|
|
||||||
- 开发环境：在 `src/api/internal/httpClient.ts` 中配置 `baseURL`
|
|
||||||
- 生产环境：通过环境变量或运行时配置
|
|
||||||
|
|
||||||
### Q3：文件上传如何工作？
|
|
||||||
- 使用 Uppy 组件（`@uppy/react`）
|
|
||||||
- 支持直传到 S3/OSS（通过 `@uppy/aws-s3`）
|
|
||||||
- 上传接口：`POST /backend/v1/upload/*`
|
|
||||||
|
|
||||||
### Q4：如何支持国际化？
|
|
||||||
- 配置文件：`src/i18n/config.ts`
|
|
||||||
- 语言包：`src/i18n/locales/` 目录
|
|
||||||
- 使用 `useTranslation()` Hook 进行翻译
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 相关文件清单
|
|
||||||
|
|
||||||
### 配置文件
|
|
||||||
- `app/backend/package.json` - NPM 依赖配置
|
|
||||||
- `app/backend/README.md` - 模块说明
|
|
||||||
|
|
||||||
### 核心代码
|
|
||||||
- `src/main.tsx` - 应用入口
|
|
||||||
- `src/App.tsx` - 根组件与路由配置
|
|
||||||
- `src/api/` - API 接口定义
|
|
||||||
- `src/store/` - Redux 状态管理
|
|
||||||
- `src/pages/` - 页面组件
|
|
||||||
- `src/compenents/` - 可复用组件
|
|
||||||
- `src/assets/` - 静态资源（图片、字体、样式）
|
|
||||||
|
|
||||||
### 样式文件
|
|
||||||
- `src/index.less` - 全局样式
|
|
||||||
- `src/App.module.less` - 根组件样式
|
|
||||||
- 组件样式：`*.module.less` / `*.module.scss`
|
|
||||||
Loading…
Reference in New Issue
Block a user