122 lines
4.0 KiB
Markdown
122 lines
4.0 KiB
Markdown
# LPT 前端应用（lpt-fe）
|
||
|
||
> Vue 3 + TypeScript + Vite 单页应用
|
||
|
||
---
|
||
|
||
## 技术栈
|
||
- **框架**: Vue 3 + TypeScript + Vite 5
|
||
- **UI 库**: Element Plus 2.8
|
||
- **HTTP**: Axios（`withCredentials: true`，自动携带 Cookie `satoken`）
|
||
- **思维导图**: mind-elixir 5.13
|
||
- **Markdown**: marked 18.0
|
||
- **测试**: Vitest + Playwright
|
||
|
||
---
|
||
|
||
## 项目结构
|
||
```
|
||
lpt-fe/src/
|
||
├── api/ → API 接口层（6个模块）
|
||
│ ├── login.ts
|
||
│ ├── reportFragments.ts
|
||
│ ├── review.ts
|
||
│ ├── standardMindMap.ts
|
||
│ ├── studySessions.ts
|
||
│ └── tasks.ts
|
||
├── components/ → 页面组件
|
||
│ ├── Login.vue → 登录页
|
||
│ ├── Welcome.vue → 首页（滚动 feed + 回忆卡片）
|
||
│ ├── Study.vue → 学习任务列表 + 权重配置
|
||
│ ├── StartTask.vue → 学习会话（预期 + AI 草稿）
|
||
│ ├── Review.vue → 复习总览
|
||
│ ├── ReviewDetail.vue → 复习详情（报告/残片 + 溯源）
|
||
│ ├── ReviewRecall.vue → 回忆复习主页面
|
||
│ ├── TaskForm.vue → 任务编辑（Markdown 学习材料）
|
||
│ ├── MindMapViewer.vue → 思维导图渲染/编辑/选择
|
||
│ ├── MarkdownRenderer.vue → Markdown 渲染
|
||
│ ├── MyHead.vue → 顶部导航
|
||
│ └── MyFooter.vue → 底部
|
||
├── composables/ → 组合式函数
|
||
│ ├── fragment.ts → 残片管理
|
||
│ └── useTimer.ts → 计时器
|
||
├── router/ → 路由配置
|
||
├── utils/ → 工具函数
|
||
│ ├── request.ts → Axios 封装
|
||
│ └── fetchTitle.ts → 链接标题抓取
|
||
└── __tests__/ → 单元测试
|
||
```
|
||
|
||
---
|
||
|
||
## 路由表
|
||
|
||
| 路径 | 组件 | 说明 |
|
||
|------|------|------|
|
||
| `/login` | Login.vue | 登录页（无需认证） |
|
||
| `/welcome` | Welcome.vue | 首页 |
|
||
| `/study` | Study.vue | 学习任务列表 |
|
||
| `/start-task/:taskNum` | StartTask.vue | 学习会话 |
|
||
| `/add-task` | TaskForm.vue | 创建任务 |
|
||
| `/update-task/:taskId` | TaskForm.vue | 更新任务 |
|
||
| `/review` | Review.vue | 复习总览 |
|
||
| `/review/detail/:type/:id` | ReviewDetail.vue | 复习详情 |
|
||
| `/review/recall/:taskNum` | ReviewRecall.vue | 回忆复习 |
|
||
|
||
---
|
||
|
||
## 认证与请求
|
||
- axios `withCredentials: true`，Cookie `satoken` 自动携带
|
||
- 401 处理（HTTP 层 + 业务层双重检测）：清 `localStorage.isLoggedIn` → `router.push("/login")`
|
||
- `validateResponse`：`code !== 200` → reject
|
||
- Vite 代理: `/api` → `http://localhost:5157`，自动重写去掉 `/api` 前缀
|
||
|
||
---
|
||
|
||
## Markdown 学习材料
|
||
- 编辑：textarea 输入，支持 `[文字](url)` 和裸 URL
|
||
- 预览：`renderMarkdown(raw)` 同步函数，使用占位符防止嵌套 HTML
|
||
- 保存：`convertMaterialUrls()` 异步拉取标题，替换裸 URL 为 `[标题](url)`
|
||
- `getUrlTitle(url)`：调 `/utils/fetch-title`，内存缓存 + 请求去重
|
||
|
||
---
|
||
|
||
## 开发配置
|
||
- **开发端口**: 5158
|
||
- **代理**: `/api` → `http://localhost:5157`
|
||
- **环境变量**: `.env.development` / `.env.production` / `.env.uat`
|
||
|
||
---
|
||
|
||
## 启动命令
|
||
```bash
|
||
npm install # 安装依赖
|
||
npm run dev # 启动开发服务器（端口 5158）
|
||
npm run build # 生产构建
|
||
npm run test # 单元测试
|
||
npm run test:e2e # E2E 测试
|
||
npx vue-tsc --noEmit # 类型检查
|
||
```
|
||
|
||
---
|
||
|
||
## Docker
|
||
- 多阶段构建：`node:20-alpine` 编译 → `nginx:alpine` 运行
|
||
- 暴露端口：80
|
||
- 构建参数：`BUILD_MODE`（默认 production）
|
||
|
||
---
|
||
|
||
## 关联项目
|
||
| 项目 | 路径 | 端口 | 说明 |
|
||
|------|------|------|------|
|
||
| lpt-be | `../lpt-be/` | 5157 | Spring Boot 后端，前端通过 `/api` 代理调用 |
|
||
| lpt-ai | `../lpt-ai/` | 5199 | AI 服务，前端不直接调用 |
|
||
|
||
## 调用关系
|
||
```
|
||
浏览器 → lpt-fe (5158) ──/api──→ lpt-be (5157) ──HTTP──→ lpt-ai (5199)
|
||
│
|
||
└── MySQL (8109)
|
||
```
|