developer
47 lines
1.8 KiB
Markdown
47 lines
1.8 KiB
Markdown
# LPT 前端规范
|
||
|
||
## 技术栈
|
||
- Vue 3 + TypeScript + Vite
|
||
- Element Plus UI
|
||
- Axios（`src/utils/request.ts`）
|
||
- mind-elixir（思维导图）
|
||
|
||
## 认证与请求
|
||
- axios `withCredentials: true`，Cookie `satoken` 自动携带
|
||
- 401 处理（`handleError`）：HTTP 层和业务层双重检测，清 `localStorage.isLoggedIn` → `router.push("/login")`
|
||
- `validateResponse`：`code !== 200` → reject
|
||
|
||
## Markdown 学习材料
|
||
- 编辑：textarea 输入，支持 `[文字](url)` 和裸 URL
|
||
- 预览/展示：`renderMarkdown(raw)` 同步函数
|
||
- 使用占位符 `__LINK_N__` 避免正则二次匹配产生嵌套 HTML
|
||
- `[文字](url)` → `<a>` 标签
|
||
- 裸 URL → `<a>` 标签（展示时用 getUrlTitle 获取标题）
|
||
- 保存：`convertMaterialUrls()` 在 createTask/updateTask 前异步拉取标题，替换裸 URL 为 `[标题](url)`
|
||
- `getUrlTitle(url)`：调 `/utils/fetch-title`，内存缓存 + 请求去重
|
||
|
||
## 应用场景
|
||
- TaskForm 编辑页：弹窗形式（el-dialog），列表展示用 `getUrlTitle` 获取链接标题
|
||
- Study 详情页：同上
|
||
|
||
## 样式规范
|
||
- 链接：绿色系（`var(--green-600)`），虚线下划线，hover 变实线
|
||
- 区块分隔：`.detail-block` 有 `border-top` + `padding-top`，首个除外
|
||
- 小字提示：12px `var(--text-secondary)`
|
||
|
||
## 任务清单分页
|
||
- Study.vue：每页 20 条，`el-pagination` 在列表底部
|
||
|
||
## 学习会话页面
|
||
- StartTask.vue 展示学习材料（可点击链接），支持弹窗编辑
|
||
- 编辑时先 GET 任务详情，合并后 PUT 更新（保护其他字段不被覆盖）
|
||
|
||
## 思维导图
|
||
- MindMapViewer 封装 mind-elixir
|
||
- selectable 模式：点击节点 emit `node-select`
|
||
- ReviewRecall 中 standardExpanded 展开后节点可点击选复习起点
|
||
|
||
## 编译
|
||
- `npx vite build`
|
||
- `npx vue-tsc --noEmit`（类型检查）
|