# 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`（类型检查）