lpt-fe/CLAUDE.md

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