docs: add .pi/SYSTEM.md with project overview

This commit is contained in:
2026-07-23 23:01:47 +08:00
parent 68082afc78
commit 02ce825c53
+121
View File
@@ -0,0 +1,121 @@
# 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)
```