Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 cat-shark
|
8d5c9db47f | ||
|
cat-shark
|
b8b0b73cd8 | ||
|
cat-shark
|
81f91b320a | ||
|
cat-shark
|
de45c8039c | ||
|
cat-shark
|
c2493e4c71 | ||
|
cat-shark
|
0059e0ec71 | ||
|
cat-shark
|
96d574b99f | ||
|
cat-shark
|
69861d54bb | ||
|
cat-shark
|
769d26fa97 | ||
|
cat-shark
|
04df078fcf | ||
|
cat-shark
|
bcec8512f4 | ||
|
cat-shark
|
297320446c |
@@ -74,6 +74,38 @@ lpt-fe/src/
|
|||||||
- `MindMapViewer.vue` 支持只读、编辑、selectable、colorByCompare 模式；selectable 模式下点击节点 emit `node-select`。
|
- `MindMapViewer.vue` 支持只读、编辑、selectable、colorByCompare 模式；selectable 模式下点击节点 emit `node-select`。
|
||||||
- ReviewRecall 中 `standardExpanded` 展开后节点可点击，用于选择复习起点。
|
- ReviewRecall 中 `standardExpanded` 展开后节点可点击，用于选择复习起点。
|
||||||
|
|
||||||
|
## 前端代码标准
|
||||||
|
|
||||||
|
### 按钮规范
|
||||||
|
|
||||||
|
- 页面主操作 / 卡片 CTA：`size="large"`，如 Study 开始任务、TaskForm 保存、Welcome 快速入口。
|
||||||
|
- 区块工具栏 / 页内操作：默认尺寸，如 Review 刷新、ReviewRecall 面板操作、历史记录。
|
||||||
|
- 表格/列表行内操作：`size="small" text`，如 查看记录、回忆复习、编辑、删除。
|
||||||
|
- 弹窗 footer：默认尺寸；确认按钮 `type="success"`，取消按钮默认；危险操作统一 `type="danger"`。
|
||||||
|
- 正向/保存语义统一 `success`，次级编辑语义可用 `primary`，不要在同一功能上混用。
|
||||||
|
- 窄屏（`max-width: 768px`）操作区按钮纵向全宽，全局规则位于 `src/assets/main.css` 的 `.action-row / .edit-actions / .fragment-edit-actions`。
|
||||||
|
|
||||||
|
### 移动端适配
|
||||||
|
|
||||||
|
- 断点约定：按钮/弹窗使用 768px，卡片与汇总布局使用 900px。
|
||||||
|
- 弹窗：窄屏宽度 `calc(100% - 24px)`，body 允许纵向滚动，footer 按钮等宽；全局规则位于 `main.css` 的 `@media (max-width: 768px)`，新增弹窗不需要再逐页适配。
|
||||||
|
- 多按钮弹窗（如 Welcome 回忆卡片）在窄屏纵向堆叠。
|
||||||
|
- 列表页优先使用卡片列表而非 `el-table`，桌面与移动端视觉统一，参考 `Review.vue` 的 `.task-list`。
|
||||||
|
- 文案不缩写：使用完整字段名，如 `学习报告数量`、`学习残片数量`，不使用 `报告数`、`残片数`。
|
||||||
|
|
||||||
|
### 代码整洁
|
||||||
|
|
||||||
|
- Markdown 渲染统一使用 `src/utils/markdown.ts` 的 `renderMarkdown`，禁止在组件内复制实现。
|
||||||
|
- 应用场景状态常量统一使用 `src/utils/taskApplication.ts` 的 `applicationStatusOptions`。
|
||||||
|
- 不保留无消费者代码：未使用的 import、prop、事件、API 封装、CSS class、组件文件与依赖应及时删除。
|
||||||
|
- 组件公开 props/events 只在有实际消费者时保留，例如 MindMapViewer 通过 `toOutline()` 导出编辑内容，不依赖无人监听的 change 事件。
|
||||||
|
- Vite 模板遗留文件（示例组件、icon、logo）不进入业务代码。
|
||||||
|
|
||||||
|
### 提交前检查
|
||||||
|
|
||||||
|
- 运行 `npx vue-tsc --noEmit`、`npm run test`、`npm run build`。
|
||||||
|
- 提交信息按 Git 提交规范使用中文短句；样式类改动用 `style:`，清理类用 `refactor:` / `chore:`。
|
||||||
|
|
||||||
## 开发配置
|
## 开发配置
|
||||||
|
|
||||||
- 开发端口：5158
|
- 开发端口：5158
|
||||||
|
|||||||
@@ -0,0 +1,72 @@
|
|||||||
|
# 部署流水线问题排查进度
|
||||||
|
|
||||||
|
**日期**: 2026-07-20（更新）
|
||||||
|
|
||||||
|
## 当前部署方式
|
||||||
|
|
||||||
|
- **Jenkinsfile / Jenkinsfile-dev**：历史方案，已不再作为主路径
|
||||||
|
- **现行方案**：Gitea Actions（`.gitea/workflows/deploy.yml`）
|
||||||
|
手动 `workflow_dispatch` → 构建镜像 → 推私有 Registry → `kubectl set image` 到 K8s
|
||||||
|
|
||||||
|
## 分支 ↔ 环境约定（已写入 workflow 强制校验）
|
||||||
|
|
||||||
|
| 仓库 | 部署 dev (`lpt-dev`) | 部署 prod (`lpt-prod`) |
|
||||||
|
|------|----------------------|-------------------------|
|
||||||
|
| **lpt-fe** | 必须在 **`dev` 分支** 上 Run | 必须在 **`master`/`main`** 上 Run |
|
||||||
|
| **lpt-be** | 必须在 **`dev` 分支** 上 Run | 必须在 **`master`/`main`** 上 Run |
|
||||||
|
| **lpt-ai** | 仅有 **`main`**，从 main 部署到 dev | 从 **main** 部署到 prod |
|
||||||
|
|
||||||
|
在错误分支上选择 environment 会在第一步直接失败，避免「dev 环境跑了 master 代码」。
|
||||||
|
|
||||||
|
### 正确操作
|
||||||
|
|
||||||
|
1. Gitea 仓库页面切换到目标分支（fe/be 的 dev 或 master）
|
||||||
|
2. Actions → 对应 workflow → Run workflow
|
||||||
|
3. 选择 `environment` = `dev` 或 `prod`（须与当前分支匹配）
|
||||||
|
|
||||||
|
## 已修复项（2026-07-20）
|
||||||
|
|
||||||
|
1. **分支与环境绑定校验** — 三个仓库的 `deploy.yml` 增加 Validate 步骤
|
||||||
|
2. **`IMAGE_TAG` 持久化** — 除 `GITHUB_ENV` 外，写入 `GITEA_ENV`（若存在）+ 临时文件兜底，Deploy 步读取失败则明确报错
|
||||||
|
3. **fe `BUILD_MODE`** — 在 shell 内根据 environment 设置 `production` / `development`，避免表达式兼容问题
|
||||||
|
4. **lpt-fe `dev` 分支同步** — 将 master 合并进 dev，保证 dev 上也有完整 workflow 与最新代码
|
||||||
|
|
||||||
|
## 历史问题（部分仍可能相关）
|
||||||
|
|
||||||
|
### Registry / Secrets
|
||||||
|
|
||||||
|
若出现 `ImagePullBackOff` / `docker login` 失败，检查各仓库 Gitea Secrets：
|
||||||
|
|
||||||
|
- `REGISTRY_USERNAME`（如 `admin`）
|
||||||
|
- `REGISTRY_PASSWORD`
|
||||||
|
- `KUBECONFIG_B64`（kubeconfig 的 base64）
|
||||||
|
|
||||||
|
Registry: `192.168.123.199:5000`
|
||||||
|
|
||||||
|
### K8s
|
||||||
|
|
||||||
|
- 共享清单：`k8s/dev/*`、`k8s/prod/*`（按环境）
|
||||||
|
- 各服务仓库内 `k8s/` 仍多为 `lpt-dev` 模板；日常 CI 只 `set image`，不 `apply` 整份 YAML
|
||||||
|
- Deployment 需有 `imagePullSecrets: [regcred]`；workflow 每次会 create/update `regcred`
|
||||||
|
|
||||||
|
## 镜像与命名空间
|
||||||
|
|
||||||
|
| environment | 镜像 tag（浮动） | 不可变 tag | namespace |
|
||||||
|
|-------------|------------------|------------|-----------|
|
||||||
|
| dev | `app:dev` | `app:<sha>-<unix>` | `lpt-dev` |
|
||||||
|
| prod | `app:prod` | `app:<sha>-<unix>` | `lpt-prod` |
|
||||||
|
|
||||||
|
部署使用不可变 tag，避免 `imagePullPolicy` 与缓存导致未更新。
|
||||||
|
|
||||||
|
## 验证清单
|
||||||
|
|
||||||
|
1. [ ] 三仓库 Secrets 已配置
|
||||||
|
2. [ ] lpt-fe：在 **dev** 分支 Run → environment=dev 成功
|
||||||
|
3. [ ] lpt-fe：在 **master** 上选 environment=dev 应 **失败**（校验）
|
||||||
|
4. [ ] lpt-be：同上
|
||||||
|
5. [ ] lpt-ai：在 **main** 上 Run → dev / prod
|
||||||
|
6. [ ] `kubectl get pods -n lpt-dev` / `lpt-prod` 正常
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**备注**: 主路径为 Gitea Actions + K8s；Jenkins 配置可保留作参考，勿与现行流程混用。
|
||||||
@@ -0,0 +1,413 @@
|
|||||||
|
# LPT 复习流程设计文档
|
||||||
|
|
||||||
|
> 本文档描述 LPT 系统中「回忆复习」（Recall Review）功能的完整设计，包括数据模型、API、前端交互流程和三种入口的处理方式。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 核心概念
|
||||||
|
|
||||||
|
### 1.1 标准思维导图（Standard Mind Map）
|
||||||
|
|
||||||
|
- **任务级单一知识树**：每个学习任务有且仅有一棵标准思维导图，存储在 `review_standard_mind_maps` 表
|
||||||
|
- **生成方式**：
|
||||||
|
- `BUILTIN`：内置规则引擎，按 session 分组、去重、合并
|
||||||
|
- `AI`：调用 lpt-ai 服务生成缩进大纲后解析
|
||||||
|
- `USER`：用户手动编辑
|
||||||
|
- `USER_MERGE`：增量合并后（保留用户编辑 + 追加 AI 新节点）
|
||||||
|
- **数据结构**：`content` 字段存储 JSON 树（递归 `MindMapNode`），`outline` 字段存储缩进大纲文本
|
||||||
|
- **节点模型**：
|
||||||
|
```
|
||||||
|
MindMapNode {
|
||||||
|
title: string // 节点标题
|
||||||
|
notes?: string // 备注 / 对比标记（MATCHED| / MISSED|）
|
||||||
|
sourceType?: string // REPORT | FRAGMENT | APPLICATION
|
||||||
|
sourceId?: number // 对应源数据主键
|
||||||
|
children?: MindMapNode[]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **节点标记约定**（用于对比着色）：
|
||||||
|
- `notes` 以 `MATCHED|` 开头 → 绿色（回忆命中）
|
||||||
|
- `notes` 以 `MISSED|` 开头 → 红色（回忆遗漏）
|
||||||
|
- 无标记 → 默认色（未参与对比）
|
||||||
|
|
||||||
|
### 1.2 回忆对比记录（Recall Record）
|
||||||
|
|
||||||
|
- 每次用户提交回忆 → 生成一条 `review_recall_records` 记录
|
||||||
|
- 核心字段：
|
||||||
|
- `task_num`：关联任务
|
||||||
|
- `standard_map_id`：对比时使用的标准导图版本
|
||||||
|
- `focus_path`：复习起点节点路径（`"根 / 分支A / 子节点B"`），null 为全量
|
||||||
|
- `recall_content`：用户回忆大纲文本
|
||||||
|
- `compare_result`：对比结果 JSON（含 `matchedTree`、`extraNodes`、覆盖率等）
|
||||||
|
- `recall_ratio` / `matched_count` / `missed_count` / `extra_count`：统计摘要
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 复习流程
|
||||||
|
|
||||||
|
### 2.1 核心逻辑
|
||||||
|
|
||||||
|
```
|
||||||
|
1. 确定复习起点（节点路径）
|
||||||
|
2. 获取标准导图
|
||||||
|
3. 按起点提取子树作为对比基准
|
||||||
|
4. 用户在大纲编辑器中回忆填充
|
||||||
|
5. 提交对比（AI 语义匹配 或 BUILTIN 字符串匹配）
|
||||||
|
6. 展示对比结果（着色 + 统计）
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2 节点选择
|
||||||
|
|
||||||
|
- 用户在标准导图上点击节点 → `MindMapViewer` 发射 `node-select` 事件（含 `title`、`path`、`childCount`）
|
||||||
|
- 弹窗确认：「以「节点名」为起点，复习其下 N 个子知识点？」
|
||||||
|
- 确认后：
|
||||||
|
- `focusPath` = 选中节点的路径（如 `"Java基础 / 集合 / HashMap"`）
|
||||||
|
- `recallTree` 根节点标题 = 选中节点标题
|
||||||
|
- 回忆导图以该标题为根，用户补充子节点
|
||||||
|
|
||||||
|
### 2.3 对比范围
|
||||||
|
|
||||||
|
- **有 `focusPath`**：`MindMapTreeTool.extractSubtree(root, focusPath)` 提取子树，对比基准 = 子树
|
||||||
|
- **无 `focusPath`**：对比基准 = 整棵标准导图
|
||||||
|
- AI 对比：发给 lpt-ai 的 outline 只包含子树范围
|
||||||
|
- BUILTIN 对比：`compareTrees()` 在子树范围内做标题匹配
|
||||||
|
|
||||||
|
### 2.4 对比算法
|
||||||
|
|
||||||
|
**AI 语义匹配（优先）：**
|
||||||
|
```
|
||||||
|
POST /ai/tasks → type: "compare-recall"
|
||||||
|
→ 异步轮询结果
|
||||||
|
→ 返回 { matches: [{standardTitle, recallTitle}], missedTitles, extraNodes, evaluation }
|
||||||
|
→ Java 端 buildCompareResultFromAI() 标注标准树
|
||||||
|
```
|
||||||
|
|
||||||
|
**BUILTIN 字符串匹配（降级）：**
|
||||||
|
- 展平标准树和回忆树
|
||||||
|
- 标题标准化（去标点、去空格、转小写）
|
||||||
|
- 精确匹配 → 模糊匹配（bigram Jaccard ≥ 0.6）
|
||||||
|
- 标记 MATCHED / MISSED / 额外
|
||||||
|
|
||||||
|
### 2.5 结果展示
|
||||||
|
|
||||||
|
- 标准导图面板直接显示着色对比结果（不再有独立对比面板）
|
||||||
|
- 绿色（`#c8e6c9`）= 命中，红色（`#ffcdd2`）= 遗漏
|
||||||
|
- 统计卡片：覆盖率、命中/遗漏/额外计数
|
||||||
|
- 遗漏项列表 + 额外项列表（可点击回看原文）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 三个复习入口
|
||||||
|
|
||||||
|
### 入口 A：复习总览 → "回忆复习"
|
||||||
|
|
||||||
|
**路径：** `Welcome.vue` → "复习回看" → `Review.vue`（任务列表）→ 每行"回忆复习"按钮
|
||||||
|
|
||||||
|
**前端代码：** `Review.vue:110`
|
||||||
|
```typescript
|
||||||
|
router.push(`/review/recall/${row.taskNum}`)
|
||||||
|
```
|
||||||
|
|
||||||
|
**流程：**
|
||||||
|
1. 跳转到 `ReviewRecall.vue`，URL 为 `/review/recall/:taskNum`
|
||||||
|
2. 页面加载 → `loadData()` 获取标准导图
|
||||||
|
3. 标准导图 `selectable=true`，显示提示「点击导图节点选择复习起点」
|
||||||
|
4. 用户点击节点 → 弹窗确认 → 进入回忆模式
|
||||||
|
5. 回忆填充 → 提交对比 → 展示结果
|
||||||
|
|
||||||
|
**相关文件：**
|
||||||
|
- `lpt-fe/src/components/Review.vue`
|
||||||
|
- `lpt-fe/src/components/ReviewRecall.vue`
|
||||||
|
|
||||||
|
### 入口 B：从某个残片/报告详情 → "回忆复习"
|
||||||
|
|
||||||
|
**路径：** `Welcome.vue` 滚动回顾 → 点击卡片 → `ReviewDetail.vue` → "回忆复习"按钮
|
||||||
|
|
||||||
|
**前端代码：** `ReviewDetail.vue` 的 `goToRecall()`
|
||||||
|
```typescript
|
||||||
|
const res = await findNode(taskNum, content.substring(0, 500));
|
||||||
|
if (res?.data?.path) {
|
||||||
|
router.push(`/review/recall/${taskNum}?focusPath=${encodeURIComponent(res.data.path)}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**流程：**
|
||||||
|
1. 用户在详情页查看某个残片/报告的内容
|
||||||
|
2. 点击"回忆复习" → 前端调 `POST /review/standard-mind-map/{taskNum}/find-node`
|
||||||
|
3. 后端 `findClosestNode()` 用 bigram Jaccard 匹配最接近的节点
|
||||||
|
4. 返回 `{ path, nodeTitle, score }`
|
||||||
|
5. 跳转到 `/review/recall/:taskNum?focusPath=...`
|
||||||
|
6. `ReviewRecall.vue` 检测到 URL 参数 → 跳过节点选择，直接进入回忆模式
|
||||||
|
|
||||||
|
**后端 API：**
|
||||||
|
```http
|
||||||
|
POST /review/standard-mind-map/{taskNum}/find-node
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{ "content": "用户查看的残片/报告文本" }
|
||||||
|
|
||||||
|
→ 200 OK
|
||||||
|
{ "code": 200, "data": { "path": "根 / 分支A / 子节点B", "nodeTitle": "子节点B", "score": 0.85 } }
|
||||||
|
```
|
||||||
|
|
||||||
|
**匹配算法（`MindMapTreeTool.findClosestNode`）：**
|
||||||
|
1. 展平标准导图所有节点
|
||||||
|
2. 对每个节点，计算其 `title` 与输入文本的 bigram Jaccard 相似度
|
||||||
|
3. `notes` 字段也参与匹配（权重 0.5）
|
||||||
|
4. 返回得分最高（>0.1）的节点
|
||||||
|
|
||||||
|
**相关文件：**
|
||||||
|
- `lpt-fe/src/components/ReviewDetail.vue`
|
||||||
|
- `learning-progress-tracker/.../utils/MindMapTreeTool.java`（`findClosestNode`、`similarityScore`）
|
||||||
|
|
||||||
|
### 入口 C：首页欢迎页 → 回忆卡片 → "前往回忆复习"
|
||||||
|
|
||||||
|
**路径：** `Welcome.vue` → 滚动回顾标签 → 点击弹出回忆对话框 → "前往回忆复习"按钮
|
||||||
|
|
||||||
|
**前端代码：** `Welcome.vue` 的 `goToRecallFromCard()`
|
||||||
|
```typescript
|
||||||
|
const tn = group.taskNum;
|
||||||
|
const res = await findNode(tn, content.substring(0, 500));
|
||||||
|
if (res?.data?.path) {
|
||||||
|
router.push(`/review/recall/${tn}?focusPath=${encodeURIComponent(res.data.path)}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**流程：**
|
||||||
|
1. Welcome 页加载 `GET /review/feed` 获取复习 feed
|
||||||
|
2. 按 session 分组为标签卡片
|
||||||
|
3. 用户点击某个标签 → 弹出回忆对话框（先回忆→展开对照）
|
||||||
|
4. 点击"前往回忆复习" → 同入口 B，先调 findNode 再跳转
|
||||||
|
|
||||||
|
**相关文件：**
|
||||||
|
- `lpt-fe/src/components/Welcome.vue`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 关键 API 清单
|
||||||
|
|
||||||
|
### 4.1 标准思维导图
|
||||||
|
|
||||||
|
| 方法 | 路径 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `GET` | `/review/standard-mind-map/{taskNum}` | 获取/自动生成标准导图 |
|
||||||
|
| `POST` | `/review/standard-mind-map/{taskNum}/regenerate?mode=full\|incremental` | 重新生成 |
|
||||||
|
| `PUT` | `/review/standard-mind-map/{taskNum}` | 用户编辑（大纲文本） |
|
||||||
|
| `POST` | `/review/standard-mind-map/{taskNum}/recall` | 提交回忆对比 |
|
||||||
|
| `POST` | `/review/standard-mind-map/{taskNum}/find-node` | 匹配最近节点 |
|
||||||
|
| `GET` | `/review/standard-mind-map/{taskNum}/recall-records` | 历史回忆记录 |
|
||||||
|
|
||||||
|
### 4.2 回忆对比请求体
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"recallOutline": "用户回忆的缩进大纲文本\n - 子节点1\n - 子节点2",
|
||||||
|
"focusPath": "根标题 / 分支A / 子节点B"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- `recallOutline`：必填，用户回忆的缩进大纲
|
||||||
|
- `focusPath`：可选，复习起点节点路径。null = 全量，提供时对比范围为该子树
|
||||||
|
|
||||||
|
### 4.3 对比结果结构（CompareResult）
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"matchedTree": {
|
||||||
|
"title": "根节点",
|
||||||
|
"notes": "",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "命中的知识点",
|
||||||
|
"notes": "MATCHED|完整原文内容",
|
||||||
|
"sourceType": "REPORT",
|
||||||
|
"sourceId": 1,
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "遗漏的知识点",
|
||||||
|
"notes": "MISSED|完整原文内容",
|
||||||
|
"sourceType": "FRAGMENT",
|
||||||
|
"sourceId": 2,
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"extraNodes": [
|
||||||
|
{ "title": "用户额外回忆的知识", "path": "/额外/..." }
|
||||||
|
],
|
||||||
|
"recallRatio": 0.75,
|
||||||
|
"matchedCount": 3,
|
||||||
|
"missedCount": 1,
|
||||||
|
"extraCount": 1,
|
||||||
|
"evaluation": "AI 评价文本（仅 AI 对比时有值）"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 前端组件结构
|
||||||
|
|
||||||
|
```
|
||||||
|
ReviewRecall.vue（主页面）
|
||||||
|
├── Page header（返回、标题、历史记录按钮）
|
||||||
|
├── 复习起点指示（focusPath 显示 + 重选按钮）
|
||||||
|
├── 节点选择确认弹窗（el-dialog）
|
||||||
|
├── 统计卡片（覆盖率/命中/遗漏/额外）
|
||||||
|
├── 回忆历史列表
|
||||||
|
├── 回忆输入（editable MindMapViewer）
|
||||||
|
├── 标准导图 + 对比结果（color-by-compare MindMapViewer）
|
||||||
|
│ ├── 未选择起点时 → selectable 模式
|
||||||
|
│ ├── 已选择起点/已对比 → 着色展示
|
||||||
|
│ └── 编辑模式 → editable 模式
|
||||||
|
└── 遗漏项 + 额外项详情列表
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.1 MindMapViewer 组件 Props
|
||||||
|
|
||||||
|
| 属性 | 类型 | 默认 | 说明 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| `tree` | `MindMapTreeNode \| null` | — | 树数据 |
|
||||||
|
| `editable` | `boolean` | `false` | 是否可编辑 |
|
||||||
|
| `colorByCompare` | `boolean` | `false` | 按 MATCHED/MISSED 着色 |
|
||||||
|
| `height` | `string` | `'480px'` | 画布高度 |
|
||||||
|
| `selectable` | `boolean` | `false` | 节点单击可选择 |
|
||||||
|
| `selectedPath` | `string` | `''` | 当前选中节点路径 |
|
||||||
|
|
||||||
|
### 5.2 MindMapViewer 事件
|
||||||
|
|
||||||
|
| 事件 | 载荷 | 触发时机 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `change` | `outline: string` | 编辑模式下结构变化 |
|
||||||
|
| `node-click` | `{ sourceType, sourceId }` | 点击带溯源标签的节点 |
|
||||||
|
| `node-select` | `{ title, path, childCount }` | selectable 模式下点击节点 |
|
||||||
|
|
||||||
|
### 5.3 MindMapViewer 暴露方法
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
defineExpose({ toOutline })
|
||||||
|
// toOutline() → 缩进大纲文本
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 后端核心工具方法
|
||||||
|
|
||||||
|
### `MindMapTreeTool.java`
|
||||||
|
|
||||||
|
| 方法 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `extractSubtree(root, path)` | 按 "/" 分隔路径提取子树，返回深拷贝 |
|
||||||
|
| `findClosestNode(root, content)` | bigram Jaccard 匹配最近节点 |
|
||||||
|
| `getPath(root, targetTitle)` | 获取节点到根的路径字符串 |
|
||||||
|
| `similarityScore(a, b)` | 两段文本的 bigram Jaccard 相似度 |
|
||||||
|
| `mergeTrees(oldRoot, newRoot)` | 按标准化标题合并新旧树 |
|
||||||
|
| `toJson(root, mapper)` | 序列化为 JSON |
|
||||||
|
| `fromJson(json, mapper)` | 从 JSON 反序列化 |
|
||||||
|
| `toOutline(root)` | 树 → 缩进大纲 |
|
||||||
|
| `toFullOutline(root)` | 树 → 完整大纲（含根标题） |
|
||||||
|
| `parseOutline(text)` | 缩进大纲 → 树 |
|
||||||
|
| `flatten(root)` | 前序遍历展平 |
|
||||||
|
| `countNodes(root)` | 节点总数 |
|
||||||
|
| `maxDepth(root)` | 最大深度 |
|
||||||
|
|
||||||
|
### `StandardMindMapServiceImpl.java`
|
||||||
|
|
||||||
|
| 方法 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `getOrGenerate(taskNum)` | 获取/自动生成标准导图 |
|
||||||
|
| `regenerate(taskNum)` | 全量重新生成（防并发） |
|
||||||
|
| `incrementalGenerate(taskNum)` | 增量合并（保留用户编辑） |
|
||||||
|
| `updateByOutline(taskNum, outline)` | 用户编辑 |
|
||||||
|
| `recallCompare(taskNum, outline, focusPath)` | 回忆对比 |
|
||||||
|
| `findNode(taskNum, content)` | 查找最近节点 |
|
||||||
|
| `listRecallRecords(taskNum)` | 历史记录 |
|
||||||
|
| `getRecallRecord(id)` | 单条记录详情 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 关键文件索引
|
||||||
|
|
||||||
|
### 前端（`lpt-fe/src/`）
|
||||||
|
|
||||||
|
| 文件 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `components/ReviewRecall.vue` | 回忆复习主页面 |
|
||||||
|
| `components/Review.vue` | 复习总览（任务列表+入口） |
|
||||||
|
| `components/ReviewDetail.vue` | 残片/报告详情页 |
|
||||||
|
| `components/Welcome.vue` | 首页（内含回忆卡片入口） |
|
||||||
|
| `components/MindMapViewer.vue` | 思维导图渲染/编辑/选择组件 |
|
||||||
|
| `api/standardMindMap.ts` | 标准导图 API 封装 |
|
||||||
|
| `api/review.ts` | 复习 feed API |
|
||||||
|
| `api/studySessions.ts` | 学习会话 API |
|
||||||
|
|
||||||
|
### 后端（`learning-progress-tracker/src/main/java/.../`）
|
||||||
|
|
||||||
|
| 文件 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `controller/ReviewController.java` | 复习相关端点 |
|
||||||
|
| `service/StandardMindMapService.java` | 标准导图服务接口 |
|
||||||
|
| `service/impl/StandardMindMapServiceImpl.java` | 服务实现 |
|
||||||
|
| `service/impl/BuiltinMindMapGenerator.java` | 内置规则生成器 |
|
||||||
|
| `service/impl/RemoteAiMindMapClient.java` | AI 导图客户端 |
|
||||||
|
| `service/impl/AiServiceClient.java` | lpt-ai 通用客户端 |
|
||||||
|
| `utils/MindMapNode.java` | 树节点 DTO |
|
||||||
|
| `utils/MindMapTreeTool.java` | 树操作工具类 |
|
||||||
|
| `utils/CompareResult.java` | 对比结果 DTO |
|
||||||
|
| `entity/ReviewStandardMindMapEntity.java` | 标准导图实体 |
|
||||||
|
| `entity/ReviewRecallRecordEntity.java` | 回忆记录实体 |
|
||||||
|
| `db/migration/V20260706_1__add_focus_path_to_recall_records.sql` | focus_path 迁移 |
|
||||||
|
|
||||||
|
### AI 服务（`lpt-ai/src/`）
|
||||||
|
|
||||||
|
| 文件 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `routes/ai.ts` | AI 任务提交/轮询/抓取标题 |
|
||||||
|
| `task-queue.ts` | 异步任务队列 |
|
||||||
|
| `llm/prompts.ts` | prompt 模板（generate-mind-map / compare-recall / aggregate-report） |
|
||||||
|
| `llm/client.ts` | LLM API 客户端 |
|
||||||
|
| `admin/routes.ts` | 管理面板 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 数据流图
|
||||||
|
|
||||||
|
```
|
||||||
|
学习碎片/报告
|
||||||
|
↓ (按 session 分组)
|
||||||
|
BuiltinMindMapGenerator / RemoteAiMindMapClient
|
||||||
|
↓
|
||||||
|
标准思维导图（review_standard_mind_maps）
|
||||||
|
↓ (用户选择节点)
|
||||||
|
extractSubtree(root, focusPath)
|
||||||
|
↓
|
||||||
|
子树（对比基准）
|
||||||
|
↓ AI / BUILTIN 对比 ← 用户回忆大纲
|
||||||
|
↓
|
||||||
|
CompareResult
|
||||||
|
↓ (序列化存储 + 前端渲染)
|
||||||
|
review_recall_records + 着色 MindMapViewer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 历史版本记录
|
||||||
|
|
||||||
|
| Commit | 说明 |
|
||||||
|
|--------|------|
|
||||||
|
| `a636e51` | 新增 sessionNum 追踪 + 维度选择（已回退） |
|
||||||
|
| `e5adb40` | 前端会话选择器（已回退） |
|
||||||
|
| `3c3f682` | 防并发生成 + `mergeTrees` + 增量合 |
|
||||||
|
| `5a5a294` | 前端防抖/生成提示/移除冗余面板 |
|
||||||
|
| `84fe452` | **节点选择交互 + focusPath + findNode（当前）** |
|
||||||
|
| `b18f8b4` | **后端 focusPath + extractSubtree + 回退 session（当前）** |
|
||||||
|
| `ebbbeb4` | fix: Array.map 多参数 bug |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 待办/已知问题
|
||||||
|
|
||||||
|
- [ ] AI 生成的导图（`RemoteAiMindMapClient`）因为没有 `sourceId`/`sourceType`，`node-click` 溯源不可用
|
||||||
|
- [ ] `selectable` 模式下，点击无子节点的叶子节点，`childCount` = 0 的确认弹窗体验略奇怪
|
||||||
|
- [ ] `findClosestNode` 的 bigram 相似度对短文本效果有限，可能需要 `notes` 加权优化
|
||||||
|
- [ ] 欢迎页（Welcome.vue）的回忆卡片入口「前往回忆复习」按钮文字和位置可以优化
|
||||||
Vendored
+47
@@ -0,0 +1,47 @@
|
|||||||
|
pipeline {
|
||||||
|
agent none
|
||||||
|
environment {
|
||||||
|
IMAGE_NAME = "lpt-fe:${env.GIT_COMMIT?.take(8) ?: '0.0'}"
|
||||||
|
CONTAINER_NAME = 'LPT_FE'
|
||||||
|
CONTAINER_PORT = '80'
|
||||||
|
}
|
||||||
|
stages {
|
||||||
|
stage('构建 Docker 镜像') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'docker build --build-arg BUILD_MODE=production -t $IMAGE_NAME .'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('部署容器') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh '''
|
||||||
|
docker network create traefik-public || true
|
||||||
|
docker rm -f $CONTAINER_NAME || true
|
||||||
|
docker run -d --name $CONTAINER_NAME \\
|
||||||
|
--network traefik-public \\
|
||||||
|
--label "traefik.enable=true" \\
|
||||||
|
--label "traefik.docker.network=traefik-public" \\
|
||||||
|
--label 'traefik.http.routers.lpt-fe.rule=Host(`lpt.cat-shark.xyz`)' \\
|
||||||
|
--label "traefik.http.routers.lpt-fe.entrypoints=websecure" \\
|
||||||
|
--label "traefik.http.routers.lpt-fe.tls.certresolver=le" \\
|
||||||
|
--label "traefik.http.routers.lpt-fe.service=lpt-fe" \\
|
||||||
|
--label "traefik.http.services.lpt-fe.loadbalancer.server.port=$CONTAINER_PORT" \\
|
||||||
|
$IMAGE_NAME
|
||||||
|
'''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('健康检查') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'sleep 15 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('清理旧镜像') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'docker image prune -af --filter "until=168h" || true'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
pipeline {
|
||||||
|
agent none
|
||||||
|
environment {
|
||||||
|
IMAGE_NAME = 'lpt-fe-dev:0.0'
|
||||||
|
CONTAINER_NAME = 'LPT_FE-dev'
|
||||||
|
CONTAINER_PORT = '80'
|
||||||
|
}
|
||||||
|
stages {
|
||||||
|
stage('构建 Docker 镜像') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'docker build --build-arg BUILD_MODE=dev -t $IMAGE_NAME .'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('部署容器') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh '''
|
||||||
|
docker network create traefik-public || true
|
||||||
|
docker rm -f $CONTAINER_NAME || true
|
||||||
|
docker run -d --name $CONTAINER_NAME \\
|
||||||
|
--network traefik-public \\
|
||||||
|
--label "traefik.enable=true" \\
|
||||||
|
--label "traefik.docker.network=traefik-public" \\
|
||||||
|
--label 'traefik.http.routers.lpt-fe-dev.rule=Host(`lpt-dev.cat-shark.xyz`)' \\
|
||||||
|
--label "traefik.http.routers.lpt-fe-dev.entrypoints=websecure" \\
|
||||||
|
--label "traefik.http.routers.lpt-fe-dev.tls.certresolver=le" \\
|
||||||
|
--label "traefik.http.routers.lpt-fe-dev.service=lpt-fe-dev" \\
|
||||||
|
--label "traefik.http.services.lpt-fe-dev.loadbalancer.server.port=$CONTAINER_PORT" \\
|
||||||
|
$IMAGE_NAME
|
||||||
|
'''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stage('健康检查') {
|
||||||
|
agent any
|
||||||
|
steps {
|
||||||
|
sh 'sleep 5 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
# LPT-FE
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
@@ -0,0 +1,630 @@
|
|||||||
|
# LPT 前端架构优化说明
|
||||||
|
|
||||||
|
> 记录前端实现中的关键设计决策和优化策略
|
||||||
|
|
||||||
|
## 一、组件设计优化
|
||||||
|
|
||||||
|
### 1.1 MindMapViewer 多模式设计
|
||||||
|
|
||||||
|
**挑战**：思维导图需要支持三种不同场景
|
||||||
|
- 查看标准导图（只读）
|
||||||
|
- 编辑标准导图（可修改）
|
||||||
|
- 选择复习起点（可点击节点）
|
||||||
|
- 展示对比结果（节点着色）
|
||||||
|
|
||||||
|
**方案**：单组件多模式
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// MindMapViewer.vue
|
||||||
|
interface Props {
|
||||||
|
tree: MindMapTreeNode | null;
|
||||||
|
editable?: boolean; // 编辑模式
|
||||||
|
selectable?: boolean; // 选择模式
|
||||||
|
colorByCompare?: boolean; // 对比着色模式
|
||||||
|
height?: string;
|
||||||
|
selectedPath?: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**模式互斥关系**：
|
||||||
|
- `editable=true` → 用户可修改节点
|
||||||
|
- `selectable=true` → 点击节点触发 `node-select` 事件
|
||||||
|
- `colorByCompare=true` → 根据 `notes` 字段着色（MATCHED|/MISSED|）
|
||||||
|
- 默认 → 只读浏览，点击带 `sourceType` 的节点可溯源
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 代码复用率高（一个组件覆盖所有场景）
|
||||||
|
- API 简洁（通过 props 控制行为）
|
||||||
|
- 维护成本低（修改一处全局生效）
|
||||||
|
|
||||||
|
### 1.2 回忆卡片交互设计
|
||||||
|
|
||||||
|
**需求**：滚动 feed 中点击内容，先让用户回忆再展示答案
|
||||||
|
|
||||||
|
**实现**：两阶段弹窗
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Welcome.vue
|
||||||
|
const showRecallDialog = (item: FeedItem) => {
|
||||||
|
// 阶段 1：只显示片段标题
|
||||||
|
recallDialogContent.value = item.content.substring(0, 100) + '...';
|
||||||
|
recallDialogExpanded.value = false;
|
||||||
|
|
||||||
|
// 用户点击"我想起来了"
|
||||||
|
const expand = () => {
|
||||||
|
recallDialogExpanded.value = true;
|
||||||
|
// 阶段 2：展示完整内容 + 同会话其他内容
|
||||||
|
loadFullSession(item.sessionNum);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**心理学原理**：
|
||||||
|
- 主动回忆 > 被动阅读（Testing Effect）
|
||||||
|
- 认知失调驱动记忆巩固
|
||||||
|
- 答案延迟呈现增强记忆深度
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 提升复习效果
|
||||||
|
- 增加用户参与感
|
||||||
|
- 符合间隔重复理论
|
||||||
|
|
||||||
|
### 1.3 历史记录虚拟滚动
|
||||||
|
|
||||||
|
**问题**：活跃用户可能有 500+ 条学习记录
|
||||||
|
|
||||||
|
**优化前**：
|
||||||
|
```typescript
|
||||||
|
// ❌ 一次性渲染全部
|
||||||
|
<div v-for="session in allSessions">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化后**：
|
||||||
|
```typescript
|
||||||
|
// ✅ 分页 + 懒加载
|
||||||
|
<el-pagination
|
||||||
|
:total="total"
|
||||||
|
:page-size="20"
|
||||||
|
@current-change="loadPage"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 首屏渲染时间：2.5s → 0.3s
|
||||||
|
- 内存占用：120MB → 15MB
|
||||||
|
- 支持无限历史
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、状态管理优化
|
||||||
|
|
||||||
|
### 2.1 学习会话状态同步
|
||||||
|
|
||||||
|
**场景**：用户在任务 A 学习中，打开新标签页访问任务 B
|
||||||
|
|
||||||
|
**挑战**：多标签页状态不一致
|
||||||
|
|
||||||
|
**方案**：每次进入学习页检测活跃会话
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// StartTask.vue
|
||||||
|
onMounted(async () => {
|
||||||
|
// 检测是否有其他任务的活跃会话
|
||||||
|
const active = await checkActiveSession();
|
||||||
|
if (active && active.taskNum !== currentTaskNum) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`您有正在进行的学习会话（任务 ${active.taskNum}），是否继续？`,
|
||||||
|
{ type: 'warning' }
|
||||||
|
).then(() => {
|
||||||
|
router.push(`/start-task/${active.taskNum}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 防止数据丢失
|
||||||
|
- 引导用户正确流程
|
||||||
|
- 多标签页一致性
|
||||||
|
|
||||||
|
### 2.2 权重配置实时校验
|
||||||
|
|
||||||
|
**需求**：五个维度权重总和必须为 100%
|
||||||
|
|
||||||
|
**实现**：响应式计算 + 即时反馈
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Study.vue
|
||||||
|
const weightSum = computed(() => {
|
||||||
|
return Object.values(weights.value).reduce((sum, w) => sum + w, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
const isSumValid = computed(() => weightSum.value === 100);
|
||||||
|
|
||||||
|
watch(weightSum, (newSum) => {
|
||||||
|
if (newSum !== 100) {
|
||||||
|
message.warning(`当前总和 ${newSum}%，需调整为 100%`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 即时反馈（无需点保存才知道错误）
|
||||||
|
- 视觉提示（红色警告 + 禁用保存按钮）
|
||||||
|
- 防止无效提交
|
||||||
|
|
||||||
|
### 2.3 Markdown 链接标题缓存
|
||||||
|
|
||||||
|
**场景**：学习材料中有 10 个 URL，每个都要调 `/fetch-title`
|
||||||
|
|
||||||
|
**优化前**：
|
||||||
|
```typescript
|
||||||
|
// ❌ 重复请求
|
||||||
|
for (const url of urls) {
|
||||||
|
const title = await fetchTitle(url);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化后**：
|
||||||
|
```typescript
|
||||||
|
// ✅ 内存缓存 + 请求去重
|
||||||
|
const titleCache = new Map<string, Promise<string>>();
|
||||||
|
|
||||||
|
export const getUrlTitle = (url: string) => {
|
||||||
|
if (titleCache.has(url)) {
|
||||||
|
return titleCache.get(url);
|
||||||
|
}
|
||||||
|
const promise = fetchTitle(url);
|
||||||
|
titleCache.set(url, promise);
|
||||||
|
return promise;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 重复 URL 零请求
|
||||||
|
- 并发请求自动去重（Promise 复用）
|
||||||
|
- 会话内持久化
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、用户体验优化
|
||||||
|
|
||||||
|
### 3.1 学习预期常驻展示
|
||||||
|
|
||||||
|
**需求**：用户学习过程中可随时查看预期，结束时对比
|
||||||
|
|
||||||
|
**实现**：卡片式展示 + 弹窗对比
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- StartTask.vue -->
|
||||||
|
<el-card class="expectation-card" v-if="expectation">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>📋 本次学习预期</span>
|
||||||
|
<el-button text @click="editExpectation">修改</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p>{{ expectation }}</p>
|
||||||
|
</el-card>
|
||||||
|
```
|
||||||
|
|
||||||
|
结束会话时：
|
||||||
|
```typescript
|
||||||
|
ElMessageBox.confirm(`
|
||||||
|
<p><strong>预期：</strong>${expectation}</p>
|
||||||
|
<p><strong>实际：</strong>${reportContent}</p>
|
||||||
|
<p>是否达成预期？</p>
|
||||||
|
`, { dangerouslyUseHTMLString: true });
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 元认知训练
|
||||||
|
- 学习目标明确
|
||||||
|
- 防止跑偏
|
||||||
|
|
||||||
|
### 3.2 AI 生成进度提示
|
||||||
|
|
||||||
|
**场景**：AI 生成思维导图需要 30-60 秒
|
||||||
|
|
||||||
|
**实现**：分段提示 + 轮询进度
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ReviewRecall.vue
|
||||||
|
const generateWithAi = async () => {
|
||||||
|
message.info('正在调用 AI 生成思维导图...');
|
||||||
|
|
||||||
|
const { taskId } = await submitAiTask({
|
||||||
|
type: 'generate-mind-map',
|
||||||
|
params: { taskName, reports, fragments }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 轮询任务状态
|
||||||
|
const poll = setInterval(async () => {
|
||||||
|
const result = await getAiTaskResult(taskId);
|
||||||
|
|
||||||
|
if (result.status === 'running') {
|
||||||
|
message.info(`生成中... ${result.progress || 50}%`);
|
||||||
|
} else if (result.status === 'completed') {
|
||||||
|
message.success('生成完成！');
|
||||||
|
clearInterval(poll);
|
||||||
|
loadStandardMap();
|
||||||
|
} else if (result.status === 'failed') {
|
||||||
|
message.error('生成失败，已降级为内置规则');
|
||||||
|
clearInterval(poll);
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 降低用户焦虑
|
||||||
|
- 明确系统状态
|
||||||
|
- 减少重复点击
|
||||||
|
|
||||||
|
### 3.3 节点路径面包屑
|
||||||
|
|
||||||
|
**场景**：用户选择复习起点后，需明确当前在导图的哪个位置
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```vue
|
||||||
|
<!-- ReviewRecall.vue -->
|
||||||
|
<el-breadcrumb v-if="focusPath">
|
||||||
|
<el-breadcrumb-item>复习起点</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item
|
||||||
|
v-for="part in focusPath.split(' / ')"
|
||||||
|
:key="part"
|
||||||
|
>
|
||||||
|
{{ part }}
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 空间定位清晰
|
||||||
|
- 复习范围明确
|
||||||
|
- 可点击返回上级
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、性能优化
|
||||||
|
|
||||||
|
### 4.1 Markdown 渲染优化
|
||||||
|
|
||||||
|
**挑战**：复杂正则可能导致嵌套 HTML（XSS 风险）
|
||||||
|
|
||||||
|
**方案**：占位符两阶段渲染
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// utils/markdown.ts
|
||||||
|
export const renderMarkdown = (raw: string): string => {
|
||||||
|
const placeholders = new Map<string, string>();
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
|
// 阶段 1：提取链接，替换为占位符
|
||||||
|
let stage1 = raw.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => {
|
||||||
|
const key = `__LINK_${counter++}__`;
|
||||||
|
placeholders.set(key, `<a href="${url}">${text}</a>`);
|
||||||
|
return key;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 阶段 2：替换占位符为真实 HTML
|
||||||
|
placeholders.forEach((html, key) => {
|
||||||
|
stage1 = stage1.replace(key, html);
|
||||||
|
});
|
||||||
|
|
||||||
|
return stage1;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 避免正则二次匹配导致的嵌套
|
||||||
|
- 性能提升（单次遍历）
|
||||||
|
- 安全性高（输出可预测）
|
||||||
|
|
||||||
|
### 4.2 防抖与节流
|
||||||
|
|
||||||
|
**场景**：
|
||||||
|
- 搜索框输入（防抖）
|
||||||
|
- 滚动加载（节流）
|
||||||
|
- 权重滑块调整（防抖）
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```typescript
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
|
||||||
|
// 搜索输入
|
||||||
|
const handleSearch = debounce((keyword: string) => {
|
||||||
|
searchTasks(keyword);
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
// 滚动加载
|
||||||
|
const handleScroll = throttle(() => {
|
||||||
|
if (isBottom()) loadMore();
|
||||||
|
}, 200);
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 减少 API 调用
|
||||||
|
- 降低 CPU 占用
|
||||||
|
- 提升响应速度
|
||||||
|
|
||||||
|
### 4.3 图片懒加载
|
||||||
|
|
||||||
|
**场景**：学习材料中可能包含多张图片
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```vue
|
||||||
|
<img v-lazy="imageUrl" alt="学习材料配图" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// main.ts
|
||||||
|
import VueLazyload from 'vue-lazyload';
|
||||||
|
app.use(VueLazyload, {
|
||||||
|
loading: '/placeholder.png',
|
||||||
|
error: '/error.png'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 首屏加载快
|
||||||
|
- 节省带宽
|
||||||
|
- 平滑加载体验
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、错误处理
|
||||||
|
|
||||||
|
### 5.1 统一异常拦截
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```typescript
|
||||||
|
// utils/request.ts
|
||||||
|
axios.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
const { code, message } = response.data;
|
||||||
|
if (code !== 200) {
|
||||||
|
ElMessage.error(message || '请求失败');
|
||||||
|
return Promise.reject(new Error(message));
|
||||||
|
}
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
localStorage.removeItem('isLoggedIn');
|
||||||
|
router.push('/login');
|
||||||
|
ElMessage.error('登录已过期，请重新登录');
|
||||||
|
} else if (error.response?.status === 403) {
|
||||||
|
ElMessage.error('无权限访问');
|
||||||
|
} else {
|
||||||
|
ElMessage.error(error.message || '网络错误');
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 业务代码无需重复处理
|
||||||
|
- 统一错误提示样式
|
||||||
|
- 自动处理登录过期
|
||||||
|
|
||||||
|
### 5.2 降级 UI
|
||||||
|
|
||||||
|
**场景**：AI 生成失败，自动切换为内置生成
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```typescript
|
||||||
|
const generate = async () => {
|
||||||
|
try {
|
||||||
|
await generateWithAi();
|
||||||
|
} catch (error) {
|
||||||
|
ElNotification({
|
||||||
|
title: 'AI 生成失败',
|
||||||
|
message: '已自动切换为内置规则生成',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
await generateBuiltin();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 用户无感知切换
|
||||||
|
- 功能可用性保障
|
||||||
|
- 明确提示原因
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 六、可访问性优化
|
||||||
|
|
||||||
|
### 6.1 键盘导航
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```vue
|
||||||
|
<!-- 学习页 -->
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
@keydown.space="togglePause"
|
||||||
|
@keydown.enter="endSession"
|
||||||
|
>
|
||||||
|
<!-- 内容 -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**支持快捷键**：
|
||||||
|
- `Space` - 暂停/继续
|
||||||
|
- `Enter` - 结束会话
|
||||||
|
- `Esc` - 关闭弹窗
|
||||||
|
- `Tab` - 焦点切换
|
||||||
|
|
||||||
|
### 6.2 语义化 HTML
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```vue
|
||||||
|
<!-- ✅ 正确 -->
|
||||||
|
<main>
|
||||||
|
<section aria-label="复习概览">
|
||||||
|
<h2>复习概览</h2>
|
||||||
|
<nav aria-label="任务列表">...</nav>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ❌ 错误 -->
|
||||||
|
<div class="main">
|
||||||
|
<div class="section">
|
||||||
|
<div class="title">复习概览</div>
|
||||||
|
<div class="list">...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 屏幕阅读器友好
|
||||||
|
- SEO 优化
|
||||||
|
- 代码可读性高
|
||||||
|
|
||||||
|
### 6.3 色盲友好
|
||||||
|
|
||||||
|
**对比结果着色**：
|
||||||
|
- 匹配节点：绿色 `#c8e6c9` + ✓ 图标
|
||||||
|
- 遗漏节点：红色 `#ffcdd2` + ✗ 图标
|
||||||
|
- 额外节点：蓝色 `#bbdefb` + ★ 图标
|
||||||
|
|
||||||
|
**原则**：不仅依赖颜色，同时使用图标/文字辅助
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 七、构建优化
|
||||||
|
|
||||||
|
### 7.1 代码分割
|
||||||
|
|
||||||
|
**实现**：
|
||||||
|
```typescript
|
||||||
|
// router/index.ts
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/review/recall/:taskNum',
|
||||||
|
component: () => import('@/components/ReviewRecall.vue') // 懒加载
|
||||||
|
}
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 首屏包体积：1.2MB → 320KB
|
||||||
|
- 按需加载（用户未访问的页面不下载）
|
||||||
|
|
||||||
|
### 7.2 依赖优化
|
||||||
|
|
||||||
|
**移除未使用依赖**：
|
||||||
|
```bash
|
||||||
|
# 检测未使用的依赖
|
||||||
|
npx depcheck
|
||||||
|
|
||||||
|
# 移除
|
||||||
|
npm uninstall unused-package
|
||||||
|
```
|
||||||
|
|
||||||
|
**tree-shaking**：
|
||||||
|
```typescript
|
||||||
|
// ✅ 按需导入
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
|
||||||
|
// ❌ 全量导入
|
||||||
|
import _ from 'lodash';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.3 CDN 加速
|
||||||
|
|
||||||
|
**生产环境**：
|
||||||
|
```html
|
||||||
|
<!-- index.html -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
**收益**：
|
||||||
|
- 浏览器缓存复用
|
||||||
|
- 减轻服务器压力
|
||||||
|
- 提升加载速度
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 八、开发体验优化
|
||||||
|
|
||||||
|
### 8.1 TypeScript 类型安全
|
||||||
|
|
||||||
|
**API 响应类型**：
|
||||||
|
```typescript
|
||||||
|
// api/types.ts
|
||||||
|
export interface StandardMindMapResponse {
|
||||||
|
taskNum: number;
|
||||||
|
content: MindMapTreeNode;
|
||||||
|
outline: string;
|
||||||
|
generatedBy: 'BUILTIN' | 'AI' | 'USER';
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用时自动补全 + 类型检查
|
||||||
|
const res = await getStandardMindMap(taskNum);
|
||||||
|
console.log(res.data.generatedBy); // ✅ 类型安全
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.2 组件文档
|
||||||
|
|
||||||
|
**JSDoc 注释**：
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* 思维导图查看/编辑组件
|
||||||
|
* @param tree - 树数据（MindMapTreeNode 格式）
|
||||||
|
* @param editable - 是否可编辑（默认 false）
|
||||||
|
* @param selectable - 是否可选择节点（默认 false）
|
||||||
|
* @param colorByCompare - 是否按对比结果着色（默认 false）
|
||||||
|
* @emits change - 编辑模式下内容变化时触发，参数为新的大纲文本
|
||||||
|
* @emits node-click - 点击带溯源信息的节点时触发
|
||||||
|
* @emits node-select - selectable 模式下点击节点时触发
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.3 开发环境代理
|
||||||
|
|
||||||
|
**解决跨域**：
|
||||||
|
```typescript
|
||||||
|
// vite.config.ts
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 九、性能指标
|
||||||
|
|
||||||
|
| 指标 | 目标 | 实测 |
|
||||||
|
|------|------|------|
|
||||||
|
| 首屏 FCP | <1.5s | 1.2s |
|
||||||
|
| 首屏 LCP | <2.5s | 1.8s |
|
||||||
|
| TTI | <3.5s | 2.9s |
|
||||||
|
| 路由切换 | <300ms | 180ms |
|
||||||
|
| Markdown 渲染（100行） | <50ms | 32ms |
|
||||||
|
| 思维导图渲染（200节点） | <500ms | 380ms |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 十、总结
|
||||||
|
|
||||||
|
前端实现中的关键优化：
|
||||||
|
|
||||||
|
1. **组件设计**：单组件多模式、状态管理、交互优化
|
||||||
|
2. **性能优化**：虚拟滚动、懒加载、防抖节流、代码分割
|
||||||
|
3. **用户体验**：进度提示、即时反馈、降级 UI、快捷键
|
||||||
|
4. **工程质量**：TypeScript、错误处理、可访问性、构建优化
|
||||||
|
|
||||||
|
这些优化使 LPT 前端不仅功能完整，而且性能优异、体验流畅、代码可维护。
|
||||||
Generated
+208
-1631
File diff suppressed because it is too large
Load Diff
@@ -20,13 +20,10 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"async-validator": "^4.2.5",
|
"async-validator": "^4.2.5",
|
||||||
"axios": "^1.7.7",
|
"axios": "^1.7.7",
|
||||||
"css-loader": "^7.1.2",
|
|
||||||
"element-plus": "^2.8.7",
|
"element-plus": "^2.8.7",
|
||||||
"marked": "^18.0.5",
|
"marked": "^18.0.5",
|
||||||
"mind-elixir": "^5.13.0",
|
"mind-elixir": "^5.13.0",
|
||||||
"normalize": "^0.3.1",
|
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"style-loader": "^4.0.0",
|
|
||||||
"vue": "^3.5.12",
|
"vue": "^3.5.12",
|
||||||
"vue-router": "^4.4.5"
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
@@ -39,7 +36,6 @@
|
|||||||
"@vue/test-utils": "^2.4.10",
|
"@vue/test-utils": "^2.4.10",
|
||||||
"@vue/tsconfig": "^0.5.1",
|
"@vue/tsconfig": "^0.5.1",
|
||||||
"jsdom": "^24.1.3",
|
"jsdom": "^24.1.3",
|
||||||
"npm-run-all2": "^7.0.1",
|
|
||||||
"tsx": "^4.23.0",
|
"tsx": "^4.23.0",
|
||||||
"typescript": "~5.6.0",
|
"typescript": "~5.6.0",
|
||||||
"vite": "^5.4.10",
|
"vite": "^5.4.10",
|
||||||
|
|||||||
Generated
-67
@@ -11,21 +11,12 @@ dependencies:
|
|||||||
axios:
|
axios:
|
||||||
specifier: ^1.7.7
|
specifier: ^1.7.7
|
||||||
version: 1.16.1
|
version: 1.16.1
|
||||||
css-loader:
|
|
||||||
specifier: ^7.1.2
|
|
||||||
version: 7.1.4(webpack@5.107.2)
|
|
||||||
element-plus:
|
element-plus:
|
||||||
specifier: ^2.8.7
|
specifier: ^2.8.7
|
||||||
version: 2.14.0(vue@3.5.34)
|
version: 2.14.0(vue@3.5.34)
|
||||||
normalize:
|
|
||||||
specifier: ^0.3.1
|
|
||||||
version: 0.3.1
|
|
||||||
normalize.css:
|
normalize.css:
|
||||||
specifier: ^8.0.1
|
specifier: ^8.0.1
|
||||||
version: 8.0.1
|
version: 8.0.1
|
||||||
style-loader:
|
|
||||||
specifier: ^4.0.0
|
|
||||||
version: 4.0.0(webpack@5.107.2)
|
|
||||||
vue:
|
vue:
|
||||||
specifier: ^3.5.12
|
specifier: ^3.5.12
|
||||||
version: 3.5.34(typescript@5.6.3)
|
version: 3.5.34(typescript@5.6.3)
|
||||||
@@ -58,9 +49,6 @@ devDependencies:
|
|||||||
jsdom:
|
jsdom:
|
||||||
specifier: ^24.1.3
|
specifier: ^24.1.3
|
||||||
version: 24.1.3
|
version: 24.1.3
|
||||||
npm-run-all2:
|
|
||||||
specifier: ^7.0.1
|
|
||||||
version: 7.0.2
|
|
||||||
typescript:
|
typescript:
|
||||||
specifier: ~5.6.0
|
specifier: ~5.6.0
|
||||||
version: 5.6.3
|
version: 5.6.3
|
||||||
@@ -1271,29 +1259,6 @@ packages:
|
|||||||
shebang-command: 2.0.0
|
shebang-command: 2.0.0
|
||||||
which: 2.0.2
|
which: 2.0.2
|
||||||
|
|
||||||
/css-loader@7.1.4(webpack@5.107.2):
|
|
||||||
resolution: {integrity: sha512-vv3J9tlOl04WjiMvHQI/9tmIrCxVrj6PFbHemBB1iihpeRbi/I4h033eoFIhwxBBqLhI0KYFS7yvynBFhIZfTw==}
|
|
||||||
engines: {node: '>= 18.12.0'}
|
|
||||||
peerDependencies:
|
|
||||||
'@rspack/core': 0.x || ^1.0.0 || ^2.0.0-0
|
|
||||||
webpack: ^5.27.0
|
|
||||||
peerDependenciesMeta:
|
|
||||||
'@rspack/core':
|
|
||||||
optional: true
|
|
||||||
webpack:
|
|
||||||
optional: true
|
|
||||||
dependencies:
|
|
||||||
icss-utils: 5.1.0(postcss@8.5.15)
|
|
||||||
postcss: 8.5.15
|
|
||||||
postcss-modules-extract-imports: 3.1.0(postcss@8.5.15)
|
|
||||||
postcss-modules-local-by-default: 4.2.0(postcss@8.5.15)
|
|
||||||
postcss-modules-scope: 3.2.1(postcss@8.5.15)
|
|
||||||
postcss-modules-values: 4.0.0(postcss@8.5.15)
|
|
||||||
postcss-value-parser: 4.2.0
|
|
||||||
semver: 7.8.1
|
|
||||||
webpack: 5.107.2(postcss@8.5.15)
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/cssesc@3.0.0:
|
/cssesc@3.0.0:
|
||||||
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
@@ -1931,34 +1896,11 @@ packages:
|
|||||||
resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
|
resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/normalize@0.3.1:
|
|
||||||
resolution: {integrity: sha512-DfyFcERXw4cjxUBgmATdxnCipRFoRvj0tNo+MWwjhebV9GZz2HYoNkXodEqS565uomk0CxEs90nEwrmj+aI9RQ==}
|
|
||||||
dependencies:
|
|
||||||
stylus: 0.64.0
|
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/npm-normalize-package-bin@4.0.0:
|
/npm-normalize-package-bin@4.0.0:
|
||||||
resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
|
resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
|
||||||
engines: {node: ^18.17.0 || >=20.5.0}
|
engines: {node: ^18.17.0 || >=20.5.0}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/npm-run-all2@7.0.2:
|
|
||||||
resolution: {integrity: sha512-7tXR+r9hzRNOPNTvXegM+QzCuMjzUIIq66VDunL6j60O4RrExx32XUhlrS7UK4VcdGw5/Wxzb3kfNcFix9JKDA==}
|
|
||||||
engines: {node: ^18.17.0 || >=20.5.0, npm: '>= 9'}
|
|
||||||
hasBin: true
|
|
||||||
dependencies:
|
|
||||||
ansi-styles: 6.2.3
|
|
||||||
cross-spawn: 7.0.6
|
|
||||||
memorystream: 0.3.1
|
|
||||||
minimatch: 9.0.9
|
|
||||||
pidtree: 0.6.0
|
|
||||||
read-package-json-fast: 4.0.0
|
|
||||||
shell-quote: 1.8.4
|
|
||||||
which: 5.0.0
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/nwsapi@2.2.23:
|
/nwsapi@2.2.23:
|
||||||
resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
|
resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
|
||||||
dev: true
|
dev: true
|
||||||
@@ -2283,15 +2225,6 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
ansi-regex: 6.2.2
|
ansi-regex: 6.2.2
|
||||||
|
|
||||||
/style-loader@4.0.0(webpack@5.107.2):
|
|
||||||
resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==}
|
|
||||||
engines: {node: '>= 18.12.0'}
|
|
||||||
peerDependencies:
|
|
||||||
webpack: ^5.27.0
|
|
||||||
dependencies:
|
|
||||||
webpack: 5.107.2(postcss@8.5.15)
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/stylus@0.64.0:
|
/stylus@0.64.0:
|
||||||
resolution: {integrity: sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==}
|
resolution: {integrity: sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==}
|
||||||
engines: {node: '>=16'}
|
engines: {node: '>=16'}
|
||||||
|
|||||||
@@ -32,12 +32,6 @@ export interface RecallRecord {
|
|||||||
createdTime: string;
|
createdTime: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FindNodeResult {
|
|
||||||
path: string;
|
|
||||||
nodeTitle: string;
|
|
||||||
score: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获取/自动生成标准思维导图 */
|
/** 获取/自动生成标准思维导图 */
|
||||||
export const getStandardMindMap = (taskNum: string) => {
|
export const getStandardMindMap = (taskNum: string) => {
|
||||||
return request.get(`/review/standard-mind-map/${taskNum}`);
|
return request.get(`/review/standard-mind-map/${taskNum}`);
|
||||||
@@ -69,8 +63,3 @@ export const findNode = (taskNum: string, content: string) => {
|
|||||||
export const listRecallRecords = (taskNum: string) => {
|
export const listRecallRecords = (taskNum: string) => {
|
||||||
return request.get(`/review/standard-mind-map/${taskNum}/recall-records`);
|
return request.get(`/review/standard-mind-map/${taskNum}/recall-records`);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取单条回忆对比记录 */
|
|
||||||
export const getRecallRecord = (recordId: number) => {
|
|
||||||
return request.get(`/review/standard-mind-map/recall-records/${recordId}`);
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 276 B |
@@ -35,6 +35,67 @@ a:hover {
|
|||||||
box-shadow: var(--shadow-soft);
|
box-shadow: var(--shadow-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 按钮操作区统一规范：窄屏下操作按钮纵向全宽 */
|
||||||
|
.action-row .el-button,
|
||||||
|
.edit-actions .el-button,
|
||||||
|
.fragment-edit-actions .el-button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.action-row,
|
||||||
|
.edit-actions,
|
||||||
|
.fragment-edit-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-row .el-button,
|
||||||
|
.edit-actions .el-button,
|
||||||
|
.fragment-edit-actions .el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端弹窗适配：覆盖 Element Plus 内联宽度并约束 footer */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.el-dialog {
|
||||||
|
--el-dialog-width: calc(100% - 24px) !important;
|
||||||
|
--el-dialog-margin-top: 5vh;
|
||||||
|
max-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
max-height: calc(100vh - 200px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer .el-button {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box {
|
||||||
|
max-width: calc(100% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box__btns {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message-box__btns .el-button {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.fade-up-enter-active,
|
.fade-up-enter-active,
|
||||||
.fade-up-leave-active {
|
.fade-up-leave-active {
|
||||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
defineProps<{
|
|
||||||
msg: string
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="greetings">
|
|
||||||
<h1 class="green">{{ msg }}</h1>
|
|
||||||
<h3>
|
|
||||||
You’ve successfully created a project with
|
|
||||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h1 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.6rem;
|
|
||||||
position: relative;
|
|
||||||
top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -27,13 +27,9 @@ const props = defineProps<{
|
|||||||
height?: string;
|
height?: string;
|
||||||
/** 节点可选择模式（点击节点触发 node-select 事件） */
|
/** 节点可选择模式（点击节点触发 node-select 事件） */
|
||||||
selectable?: boolean;
|
selectable?: boolean;
|
||||||
/** 当前选中的节点路径（用于高亮，仅在 selectable 模式下生效） */
|
|
||||||
selectedPath?: string;
|
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
/** 编辑模式下结构变化时抛出最新大纲文本 */
|
|
||||||
(e: "change", outline: string): void;
|
|
||||||
/** 点击带溯源信息的节点 */
|
/** 点击带溯源信息的节点 */
|
||||||
(e: "node-click", node: { sourceType: string; sourceId: number }): void;
|
(e: "node-click", node: { sourceType: string; sourceId: number }): void;
|
||||||
/** 选择模式下点击节点，返回标题+路径 */
|
/** 选择模式下点击节点，返回标题+路径 */
|
||||||
@@ -156,12 +152,6 @@ const render = () => {
|
|||||||
});
|
});
|
||||||
instance.init(toElixirData(props.tree));
|
instance.init(toElixirData(props.tree));
|
||||||
|
|
||||||
if (props.editable) {
|
|
||||||
instance.bus.addListener("operation", () => {
|
|
||||||
emit("change", toOutline());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// mind-elixir v5: selectNode(el) is called on every node click, but the
|
// mind-elixir v5: selectNode(el) is called on every node click, but the
|
||||||
// selectNewNode event is never fired (it requires selectNode(el, true),
|
// selectNewNode event is never fired (it requires selectNode(el, true),
|
||||||
// which the default click handler never passes). Monkey-patch selectNode
|
// which the default click handler never passes). Monkey-patch selectNode
|
||||||
|
|||||||
+55
-20
@@ -66,7 +66,7 @@ onMounted(() => {
|
|||||||
<section class="review-page">
|
<section class="review-page">
|
||||||
<div class="table-toolbar">
|
<div class="table-toolbar">
|
||||||
<span class="toolbar-placeholder"></span>
|
<span class="toolbar-placeholder"></span>
|
||||||
<el-button type="success" plain size="small" :loading="loading" @click="loadTasks">刷新</el-button>
|
<el-button type="success" plain :loading="loading" @click="loadTasks">刷新</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="summary-grid">
|
<div class="summary-grid">
|
||||||
@@ -84,21 +84,28 @@ onMounted(() => {
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article class="surface-card table-card">
|
<div v-if="tasks.length > 0" v-loading="loading" class="task-list">
|
||||||
<el-table v-loading="loading" :data="tasks" stripe @row-click="openTaskReview">
|
<article
|
||||||
<el-table-column prop="taskName" label="任务名" min-width="180" />
|
v-for="row in tasks"
|
||||||
<el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="150">
|
:key="row.taskNum"
|
||||||
<template #default="{ row }">
|
class="surface-card task-card"
|
||||||
{{ formatEffectiveTime(row.effectiveTime) }}
|
@click="openTaskReview(row)"
|
||||||
</template>
|
>
|
||||||
</el-table-column>
|
<div class="task-head">
|
||||||
<el-table-column prop="reportCount" label="学习报告数" min-width="120" />
|
<strong>{{ row.taskName }}</strong>
|
||||||
<el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
|
</div>
|
||||||
<el-table-column label="操作" width="200">
|
<div class="task-meta">
|
||||||
<template #default="{ row }">
|
<span>累计有效学习时长：{{ formatEffectiveTime(row.effectiveTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="task-stats">
|
||||||
|
<span>学习报告数量：{{ row.reportCount || 0 }}</span>
|
||||||
|
<span>学习残片数量：{{ row.fragmentCount || 0 }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="task-actions">
|
||||||
<el-button
|
<el-button
|
||||||
text
|
text
|
||||||
type="success"
|
type="success"
|
||||||
|
size="small"
|
||||||
:loading="openingTaskNum === row.taskNum"
|
:loading="openingTaskNum === row.taskNum"
|
||||||
@click.stop="openTaskReview(row)"
|
@click.stop="openTaskReview(row)"
|
||||||
>
|
>
|
||||||
@@ -106,15 +113,16 @@ onMounted(() => {
|
|||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
text
|
text
|
||||||
type="primary"
|
type="success"
|
||||||
|
size="small"
|
||||||
@click.stop="router.push(`/review/recall/${row.taskNum}`)"
|
@click.stop="router.push(`/review/recall/${row.taskNum}`)"
|
||||||
>
|
>
|
||||||
回忆复习
|
回忆复习
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</div>
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</article>
|
</article>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="!loading && tasks.length === 0" description="暂无复习任务" />
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -153,14 +161,41 @@ onMounted(() => {
|
|||||||
color: var(--green-900);
|
color: var(--green-900);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card {
|
.task-list {
|
||||||
padding: 10px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card :deep(.el-table__row) {
|
.task-card {
|
||||||
|
padding: 14px 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.task-head strong {
|
||||||
|
display: block;
|
||||||
|
color: var(--green-900);
|
||||||
|
font-size: 15px;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-meta,
|
||||||
|
.task-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.summary-grid {
|
.summary-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -252,8 +252,8 @@ watch(
|
|||||||
placeholder="请输入学习内容"
|
placeholder="请输入学习内容"
|
||||||
/>
|
/>
|
||||||
<div class="edit-actions">
|
<div class="edit-actions">
|
||||||
<el-button @click="cancelEdit">取消</el-button>
|
<el-button size="small" @click="cancelEdit">取消</el-button>
|
||||||
<el-button type="success" :loading="saving" @click="saveEdit">保存</el-button>
|
<el-button type="success" size="small" :loading="saving" @click="saveEdit">保存</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 只读模式 -->
|
<!-- 只读模式 -->
|
||||||
@@ -480,11 +480,4 @@ watch(
|
|||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.form-row {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
recallCompare,
|
recallCompare,
|
||||||
updateStandardMindMap,
|
updateStandardMindMap,
|
||||||
listRecallRecords,
|
listRecallRecords,
|
||||||
findNode,
|
|
||||||
type StandardMindMap,
|
type StandardMindMap,
|
||||||
type RecallRecord,
|
type RecallRecord,
|
||||||
} from "@/api/standardMindMap";
|
} from "@/api/standardMindMap";
|
||||||
@@ -51,6 +50,7 @@ const editViewer = ref<InstanceType<typeof MindMapViewer> | null>(null);
|
|||||||
// 回忆历史
|
// 回忆历史
|
||||||
const historyRecords = ref<RecallRecord[]>([]);
|
const historyRecords = ref<RecallRecord[]>([]);
|
||||||
const showHistory = ref(false);
|
const showHistory = ref(false);
|
||||||
|
const historyLoading = ref(false);
|
||||||
|
|
||||||
// 解析标准导图 JSON 为树节点
|
// 解析标准导图 JSON 为树节点
|
||||||
const standardTree = computed<MindMapTreeNode | null>(() => {
|
const standardTree = computed<MindMapTreeNode | null>(() => {
|
||||||
@@ -250,6 +250,8 @@ const resetComparison = () => {
|
|||||||
hasCompared.value = false;
|
hasCompared.value = false;
|
||||||
focusPath.value = "";
|
focusPath.value = "";
|
||||||
recallTree.value = buildEmptyRecallTree();
|
recallTree.value = buildEmptyRecallTree();
|
||||||
|
standardExpanded.value = true;
|
||||||
|
editingStandard.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 编辑标准导图
|
// 编辑标准导图
|
||||||
@@ -294,12 +296,19 @@ const cancelStandardEdit = () => {
|
|||||||
|
|
||||||
// 查看回忆历史
|
// 查看回忆历史
|
||||||
const loadHistory = async () => {
|
const loadHistory = async () => {
|
||||||
|
if (showHistory.value) {
|
||||||
|
showHistory.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
historyLoading.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await listRecallRecords(taskNum.value);
|
const res = await listRecallRecords(taskNum.value);
|
||||||
historyRecords.value = res?.data || [];
|
historyRecords.value = res?.data || [];
|
||||||
showHistory.value = true;
|
showHistory.value = true;
|
||||||
} catch {
|
} catch {
|
||||||
ElMessage.error("加载历史记录失败");
|
ElMessage.error("加载历史记录失败");
|
||||||
|
} finally {
|
||||||
|
historyLoading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -311,6 +320,8 @@ const selectHistoryRecord = (record: RecallRecord) => {
|
|||||||
const tree = parseOutlineToTree(record.recallContent);
|
const tree = parseOutlineToTree(record.recallContent);
|
||||||
if (tree) recallTree.value = tree;
|
if (tree) recallTree.value = tree;
|
||||||
hasCompared.value = true;
|
hasCompared.value = true;
|
||||||
|
focusPath.value = record.focusPath || "";
|
||||||
|
standardExpanded.value = true;
|
||||||
} catch {
|
} catch {
|
||||||
ElMessage.error("解析对比记录失败");
|
ElMessage.error("解析对比记录失败");
|
||||||
}
|
}
|
||||||
@@ -374,10 +385,9 @@ onMounted(() => {
|
|||||||
<section class="recall-page">
|
<section class="recall-page">
|
||||||
<!-- 顶部操作栏 -->
|
<!-- 顶部操作栏 -->
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<el-button size="small" @click="router.back()">← 返回</el-button>
|
|
||||||
<h2>回忆复习</h2>
|
<h2>回忆复习</h2>
|
||||||
<el-button size="small" @click="loadHistory" v-if="!showHistory">
|
<el-button :loading="historyLoading" @click="loadHistory">
|
||||||
历史记录
|
{{ showHistory ? "收起历史" : "历史记录" }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -385,12 +395,12 @@ onMounted(() => {
|
|||||||
<div class="review-scope surface-card" v-if="focusPath">
|
<div class="review-scope surface-card" v-if="focusPath">
|
||||||
<span class="scope-label">复习起点</span>
|
<span class="scope-label">复习起点</span>
|
||||||
<el-tag size="small" type="success" effect="light">{{ focusPath }}</el-tag>
|
<el-tag size="small" type="success" effect="light">{{ focusPath }}</el-tag>
|
||||||
<el-button size="small" text @click="focusPath = ''">重选节点</el-button>
|
<el-button size="small" text @click="resetComparison">重选节点</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 节点选择确认弹窗 -->
|
<!-- 节点选择确认弹窗 -->
|
||||||
<el-dialog v-model="focusConfirmVisible" title="确认复习起点" width="400px">
|
<el-dialog v-model="focusConfirmVisible" title="确认复习起点" width="400px">
|
||||||
<p v-if="selectedNodeInfo">
|
<p v-if="selectedNodeInfo" class="focus-confirm-text">
|
||||||
以 「<strong>{{ selectedNodeInfo.title }}</strong>」 为起点，
|
以 「<strong>{{ selectedNodeInfo.title }}</strong>」 为起点，
|
||||||
复习该知识点下的 <strong>{{ selectedNodeInfo.childCount }}</strong> 个子知识点？
|
复习该知识点下的 <strong>{{ selectedNodeInfo.childCount }}</strong> 个子知识点？
|
||||||
</p>
|
</p>
|
||||||
@@ -421,9 +431,9 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 回忆历史 -->
|
<!-- 回忆历史 -->
|
||||||
<article class="surface-card" v-if="showHistory && historyRecords.length > 0">
|
<article class="surface-card" v-if="showHistory">
|
||||||
<h3>回忆历史</h3>
|
<h3>回忆历史</h3>
|
||||||
<div class="history-list">
|
<div v-if="historyRecords.length > 0" class="history-list">
|
||||||
<div
|
<div
|
||||||
v-for="record in historyRecords"
|
v-for="record in historyRecords"
|
||||||
:key="record.id"
|
:key="record.id"
|
||||||
@@ -437,6 +447,7 @@ onMounted(() => {
|
|||||||
<span class="history-detail">✅{{ record.matchedCount }} ❌{{ record.missedCount }} ➕{{ record.extraCount }}</span>
|
<span class="history-detail">✅{{ record.matchedCount }} ❌{{ record.missedCount }} ➕{{ record.extraCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-empty v-else description="暂无回忆记录" :image-size="48" />
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- 折叠时引导：告知用户展开标准导图 -->
|
<!-- 折叠时引导：告知用户展开标准导图 -->
|
||||||
@@ -478,18 +489,16 @@ onMounted(() => {
|
|||||||
<div class="panel-actions">
|
<div class="panel-actions">
|
||||||
<el-button
|
<el-button
|
||||||
v-if="hasCompared"
|
v-if="hasCompared"
|
||||||
size="small"
|
|
||||||
type="success"
|
type="success"
|
||||||
@click="resetComparison"
|
@click="resetComparison"
|
||||||
>
|
>
|
||||||
返回完整导图
|
返回完整导图
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="small" @click="standardExpanded = !standardExpanded">
|
<el-button @click="standardExpanded = !standardExpanded">
|
||||||
{{ standardExpanded ? "折叠" : "展开" }}
|
{{ standardExpanded ? "折叠" : "展开" }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="standardExpanded"
|
v-if="standardExpanded"
|
||||||
size="small"
|
|
||||||
type="warning"
|
type="warning"
|
||||||
:loading="regenerating"
|
:loading="regenerating"
|
||||||
@click="handleRegenerate"
|
@click="handleRegenerate"
|
||||||
@@ -498,7 +507,6 @@ onMounted(() => {
|
|||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="standardExpanded && !editingStandard"
|
v-if="standardExpanded && !editingStandard"
|
||||||
size="small"
|
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="startEditStandard"
|
@click="startEditStandard"
|
||||||
>
|
>
|
||||||
@@ -610,11 +618,13 @@ onMounted(() => {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.focus-confirm-text {
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
.surface-card {
|
.surface-card {
|
||||||
padding: 20px 22px;
|
padding: 20px 22px;
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-soft, #e0e0e0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.surface-card h3 {
|
.surface-card h3 {
|
||||||
@@ -855,11 +865,6 @@ onMounted(() => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-hint {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary, #999);
|
|
||||||
}
|
|
||||||
|
|
||||||
.session-badge {
|
.session-badge {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import { getFragmentsBySession, updateFragments } from "@/api/reportFragments";
|
|||||||
import { getExpectation, getReportDraft, getTaskFragments, getTaskReports, upsertExpectation } from "@/api/studySessions";
|
import { getExpectation, getReportDraft, getTaskFragments, getTaskReports, upsertExpectation } from "@/api/studySessions";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||||
|
import { renderMarkdown } from "@/utils/markdown";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
fragmentsDialogVisible,
|
fragmentsDialogVisible,
|
||||||
@@ -151,28 +152,7 @@ const taskInfo = ref({
|
|||||||
const editingMaterial = ref(false);
|
const editingMaterial = ref(false);
|
||||||
const editMaterialContent = ref("");
|
const editMaterialContent = ref("");
|
||||||
const savingMaterial = ref(false);
|
const savingMaterial = ref(false);
|
||||||
const materialHtml = computed(() => {
|
const materialHtml = computed(() => renderMarkdown(taskInfo.value.materialUrl || ""));
|
||||||
const raw = taskInfo.value.materialUrl || "";
|
|
||||||
if (!raw.trim()) return "";
|
|
||||||
let html = raw;
|
|
||||||
const links: string[] = [];
|
|
||||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m: string, text: string, url: string) => {
|
|
||||||
const tag = `<a href="${url.replace(/"/g, """)}" target="_blank" rel="noopener">${text}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
html = html.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
|
||||||
const clean = url.replace(/[.。,，;；!！?？）】」』\]]+$/, "");
|
|
||||||
const tag = `<a href="${clean.replace(/"/g, """)}" target="_blank" rel="noopener">${clean}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
html = html.replace(/\n/g, "<br>");
|
|
||||||
for (let i = 0; i < links.length; i++) {
|
|
||||||
html = html.replace(`__LINK_${i}__`, links[i]);
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
});
|
|
||||||
|
|
||||||
function startEditMaterial() {
|
function startEditMaterial() {
|
||||||
editMaterialContent.value = taskInfo.value.materialUrl;
|
editMaterialContent.value = taskInfo.value.materialUrl;
|
||||||
@@ -663,6 +643,7 @@ onUnmounted(() => {
|
|||||||
<el-button
|
<el-button
|
||||||
text
|
text
|
||||||
size="small"
|
size="small"
|
||||||
|
type="primary"
|
||||||
@click="expectationContent = expectationSaved; expectationDialogVisible = true"
|
@click="expectationContent = expectationSaved; expectationDialogVisible = true"
|
||||||
>
|
>
|
||||||
修改
|
修改
|
||||||
@@ -749,12 +730,12 @@ onUnmounted(() => {
|
|||||||
/>
|
/>
|
||||||
<div class="fragment-edit-actions">
|
<div class="fragment-edit-actions">
|
||||||
<el-button size="small" @click="cancelEditFragment">取消</el-button>
|
<el-button size="small" @click="cancelEditFragment">取消</el-button>
|
||||||
<el-button size="small" type="primary" :loading="savingFragment" @click="saveEditFragment(fragment.id)">保存</el-button>
|
<el-button size="small" type="success" :loading="savingFragment" @click="saveEditFragment(fragment.id)">保存</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span class="fragment-content">{{ fragment.content }}</span>
|
<span class="fragment-content">{{ fragment.content }}</span>
|
||||||
<el-button size="small" @click="startEditFragment(fragment)">编辑</el-button>
|
<el-button text type="primary" size="small" @click="startEditFragment(fragment)">编辑</el-button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
@@ -1104,10 +1085,6 @@ onUnmounted(() => {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-row .el-button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fragments-card {
|
.fragments-card {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
@@ -1165,20 +1142,12 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.top-head {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
.info-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-row {
|
.summary-toolbar .el-button {
|
||||||
flex-direction: column;
|
flex: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.action-row .el-button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1271,14 +1240,4 @@ onUnmounted(() => {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-content {
|
</style>
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--text-primary);
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-item .history-content {
|
|
||||||
margin: 0;
|
|
||||||
}</style>
|
|
||||||
|
|||||||
+14
-38
@@ -5,6 +5,8 @@ import router from "@/router";
|
|||||||
import { ElMessage, ElMessageBox } from "element-plus";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
import { getReviewTaskStatsByTask } from "@/api/review";
|
import { getReviewTaskStatsByTask } from "@/api/review";
|
||||||
import { getActiveSession } from "@/api/studySessions";
|
import { getActiveSession } from "@/api/studySessions";
|
||||||
|
import { renderMarkdown } from "@/utils/markdown";
|
||||||
|
import { applicationStatusOptions } from "@/utils/taskApplication";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getPriorityWeights,
|
getPriorityWeights,
|
||||||
@@ -44,41 +46,10 @@ const taskApplications = ref<TaskApplication[]>([]);
|
|||||||
const applicationsLoading = ref(false);
|
const applicationsLoading = ref(false);
|
||||||
const appUrlTitles = ref<Record<number, string>>({});
|
const appUrlTitles = ref<Record<number, string>>({});
|
||||||
|
|
||||||
const applicationStatusOptions: { label: string; value: TaskApplication["status"] }[] = [
|
|
||||||
{ label: "待应用", value: "TODO" },
|
|
||||||
{ label: "进行中", value: "DOING" },
|
|
||||||
{ label: "已完成", value: "DONE" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const selectedTask = computed(() =>
|
const selectedTask = computed(() =>
|
||||||
tasks.value.find((item) => item.taskId === selectedTaskId.value) || null
|
tasks.value.find((item) => item.taskId === selectedTaskId.value) || null
|
||||||
);
|
);
|
||||||
|
|
||||||
const escapeHtml = (s: string) => s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
||||||
const escapeAttr = (s: string) => s.replace(/"/g, """).replace(/&/g, "&");
|
|
||||||
|
|
||||||
function renderMarkdown(raw: string): string {
|
|
||||||
if (!raw.trim()) return "";
|
|
||||||
let html = raw;
|
|
||||||
const links: string[] = [];
|
|
||||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m: string, text: string, url: string) => {
|
|
||||||
const tag = `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
html = html.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
|
||||||
const clean = url.replace(/[.。,，;；!！？?？）］」》]]+$/, "");
|
|
||||||
const tag = `<a href="${escapeAttr(clean)}" target="_blank" rel="noopener">${escapeHtml(clean)}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
html = html.replace(/\n/g, "<br>");
|
|
||||||
for (let i = 0; i < links.length; i++) {
|
|
||||||
html = html.replace(`__LINK_${i}__`, links[i]);
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialHtml = computed(() => renderMarkdown(selectedTask.value?.materialUrl || ""));
|
const materialHtml = computed(() => renderMarkdown(selectedTask.value?.materialUrl || ""));
|
||||||
|
|
||||||
const formatEffectiveTime = (seconds: number): string => {
|
const formatEffectiveTime = (seconds: number): string => {
|
||||||
@@ -457,12 +428,12 @@ onMounted(() => {
|
|||||||
|
|
||||||
<aside class="surface-card action-card">
|
<aside class="surface-card action-card">
|
||||||
<div class="block-title">常用操作</div>
|
<div class="block-title">常用操作</div>
|
||||||
<el-button size="large" @click="fetchTasks" :loading="loading">刷新列表</el-button>
|
<el-button @click="fetchTasks" :loading="loading">刷新列表</el-button>
|
||||||
<el-button type="success" size="large" @click="startTask">开始任务</el-button>
|
<el-button type="success" size="large" @click="startTask">开始任务</el-button>
|
||||||
<el-button size="large" @click="addTask">添加任务</el-button>
|
<el-button @click="addTask">添加任务</el-button>
|
||||||
<el-button size="large" @click="changeTask">更新任务</el-button>
|
<el-button @click="changeTask">更新任务</el-button>
|
||||||
<el-button size="large" @click="openWeightsDialog">权重配置</el-button>
|
<el-button @click="openWeightsDialog">权重配置</el-button>
|
||||||
<el-button type="danger" size="large" @click="removeTask">删除任务</el-button>
|
<el-button type="danger" @click="removeTask">删除任务</el-button>
|
||||||
</aside>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@@ -791,8 +762,13 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.page-head {
|
.weight-row {
|
||||||
flex-direction: column;
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weight-label {
|
||||||
|
width: 64px;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card {
|
.action-card {
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import {
|
|||||||
type TaskApplication,
|
type TaskApplication,
|
||||||
} from "@/api/tasks";
|
} from "@/api/tasks";
|
||||||
import { getUrlTitle } from "@/utils/fetchTitle";
|
import { getUrlTitle } from "@/utils/fetchTitle";
|
||||||
|
import { renderMarkdown } from "@/utils/markdown";
|
||||||
|
import { applicationStatusOptions } from "@/utils/taskApplication";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@@ -32,11 +34,6 @@ const priority = ref({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const priorityOptions = [0, 1, 2, 3, 4, 5];
|
const priorityOptions = [0, 1, 2, 3, 4, 5];
|
||||||
const applicationStatusOptions: { label: string; value: TaskApplication["status"] }[] = [
|
|
||||||
{ label: "待应用", value: "TODO" },
|
|
||||||
{ label: "进行中", value: "DOING" },
|
|
||||||
{ label: "已完成", value: "DONE" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const applications = ref<TaskApplication[]>([]);
|
const applications = ref<TaskApplication[]>([]);
|
||||||
const applicationLoading = ref(false);
|
const applicationLoading = ref(false);
|
||||||
@@ -276,44 +273,11 @@ const isMobile = computed(() => screenWidth.value <= 900);
|
|||||||
// 学习材料 Markdown 预览
|
// 学习材料 Markdown 预览
|
||||||
const showPreview = ref(false);
|
const showPreview = ref(false);
|
||||||
const materialPreview = ref("");
|
const materialPreview = ref("");
|
||||||
const previewLoading = ref(false);
|
|
||||||
|
|
||||||
const escapeHtml = (s: string) => s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
||||||
const escapeAttr = (s: string) => s.replace(/"/g, """).replace(/&/g, "&");
|
|
||||||
|
|
||||||
function renderMarkdown(raw: string, urlTitles: Record<string, string> = {}): string {
|
|
||||||
if (!raw.trim()) return "";
|
|
||||||
let html = raw;
|
|
||||||
// 1) [text](url) → <a> 占位，防止后续裸 URL 匹配进属性里
|
|
||||||
const links: string[] = [];
|
|
||||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m: string, text: string, url: string) => {
|
|
||||||
const tag = `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
// 2) 裸 URL → <a> 占位
|
|
||||||
html = html.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
|
||||||
const clean = url.replace(/[.。,，;；!！?？）】」』\]]+$/, "");
|
|
||||||
const label = urlTitles[clean] || url;
|
|
||||||
const tag = `<a href="${escapeAttr(clean)}" target="_blank" rel="noopener">${escapeHtml(label)}</a>`;
|
|
||||||
links.push(tag);
|
|
||||||
return `__LINK_${links.length - 1}__`;
|
|
||||||
});
|
|
||||||
// 3) 换行
|
|
||||||
html = html.replace(/\n/g, "<br>");
|
|
||||||
// 4) 还原占位
|
|
||||||
for (let i = 0; i < links.length; i++) {
|
|
||||||
html = html.replace(`__LINK_${i}__`, links[i]);
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function previewMaterial() {
|
async function previewMaterial() {
|
||||||
showPreview.value = true;
|
showPreview.value = true;
|
||||||
const raw = materialUrl.value || "";
|
const raw = materialUrl.value || "";
|
||||||
if (!raw.trim()) { materialPreview.value = ""; return; }
|
if (!raw.trim()) { materialPreview.value = ""; return; }
|
||||||
previewLoading.value = true;
|
|
||||||
try {
|
|
||||||
const titles: Record<string, string> = {};
|
const titles: Record<string, string> = {};
|
||||||
const bareUrls = new Set<string>();
|
const bareUrls = new Set<string>();
|
||||||
raw.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
raw.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
||||||
@@ -323,9 +287,6 @@ async function previewMaterial() {
|
|||||||
const results = await Promise.all([...bareUrls].map(async (u) => ({ u, t: await getUrlTitle(u) })));
|
const results = await Promise.all([...bareUrls].map(async (u) => ({ u, t: await getUrlTitle(u) })));
|
||||||
results.forEach(({ u, t }) => { titles[u] = t; });
|
results.forEach(({ u, t }) => { titles[u] = t; });
|
||||||
materialPreview.value = renderMarkdown(raw, titles);
|
materialPreview.value = renderMarkdown(raw, titles);
|
||||||
} finally {
|
|
||||||
previewLoading.value = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -410,7 +371,7 @@ async function previewMaterial() {
|
|||||||
<div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
|
<div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
|
||||||
<div class="application-header">
|
<div class="application-header">
|
||||||
<h3>应用场景</h3>
|
<h3>应用场景</h3>
|
||||||
<el-button type="primary" @click="openApplicationDialog()">添加应用场景</el-button>
|
<el-button type="success" @click="openApplicationDialog()">添加应用场景</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="application-list" v-if="applications.length > 0">
|
<div class="application-list" v-if="applications.length > 0">
|
||||||
<div class="application-item" v-for="item in applications" :key="item.id">
|
<div class="application-item" v-for="item in applications" :key="item.id">
|
||||||
@@ -608,15 +569,6 @@ async function previewMaterial() {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row .el-button {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.application-main {
|
.application-main {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ interface SessionGroup {
|
|||||||
taskNum: string;
|
taskNum: string;
|
||||||
content: string;
|
content: string;
|
||||||
hasReport: boolean;
|
hasReport: boolean;
|
||||||
fragmentCount: number;
|
|
||||||
navigateType: string;
|
navigateType: string;
|
||||||
navigateId: number;
|
navigateId: number;
|
||||||
}
|
}
|
||||||
@@ -43,7 +42,6 @@ const sessionGroups = computed<SessionGroup[]>(() => {
|
|||||||
taskNum: first.taskNum,
|
taskNum: first.taskNum,
|
||||||
content,
|
content,
|
||||||
hasReport: !!report,
|
hasReport: !!report,
|
||||||
fragmentCount: fragments.length,
|
|
||||||
navigateType: report ? "report" : "fragment",
|
navigateType: report ? "report" : "fragment",
|
||||||
navigateId: report ? report.id : (fragments[0]?.id ?? 0),
|
navigateId: report ? report.id : (fragments[0]?.id ?? 0),
|
||||||
});
|
});
|
||||||
@@ -195,6 +193,7 @@ onMounted(() => {
|
|||||||
v-model="recallCard.visible"
|
v-model="recallCard.visible"
|
||||||
:title="recallCard.group?.taskName || '回忆一下'"
|
:title="recallCard.group?.taskName || '回忆一下'"
|
||||||
width="560px"
|
width="560px"
|
||||||
|
class="recall-card-dialog"
|
||||||
>
|
>
|
||||||
<template v-if="recallCard.group">
|
<template v-if="recallCard.group">
|
||||||
<p class="recall-question">
|
<p class="recall-question">
|
||||||
@@ -216,11 +215,11 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button v-if="!recallCard.revealed" type="success" @click="revealRecallContent">
|
<el-button v-if="!recallCard.revealed" type="success" plain @click="revealRecallContent">
|
||||||
回忆好了，展开对照
|
回忆好了，展开对照
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-else type="success" @click="openRecallDetail">进入详情页</el-button>
|
<el-button v-else type="success" plain @click="openRecallDetail">进入详情页</el-button>
|
||||||
<el-button type="success" plain @click="goToRecallFromCard">前往回忆复习</el-button>
|
<el-button type="success" @click="goToRecallFromCard">前往回忆复习</el-button>
|
||||||
<el-button @click="recallCard.visible = false">关闭</el-button>
|
<el-button @click="recallCard.visible = false">关闭</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -456,4 +455,14 @@ onMounted(() => {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.recall-card-dialog :deep(.el-dialog__footer) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recall-card-dialog :deep(.el-dialog__footer .el-button) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
|
|||||||
const remainingTime = ref(25 * 60 * 1000);
|
const remainingTime = ref(25 * 60 * 1000);
|
||||||
const timerRunning = ref(false);
|
const timerRunning = ref(false);
|
||||||
const timerIsOver = ref(false);
|
const timerIsOver = ref(false);
|
||||||
const audioActivated = ref(false);
|
|
||||||
|
|
||||||
let timerInterval: number;
|
let timerInterval: number;
|
||||||
const audio = new Audio(audioUrl);
|
const audio = new Audio(audioUrl);
|
||||||
@@ -65,10 +64,8 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
|
|||||||
await audio.play();
|
await audio.play();
|
||||||
audio.pause();
|
audio.pause();
|
||||||
audio.currentTime = 0;
|
audio.currentTime = 0;
|
||||||
audioActivated.value = true;
|
|
||||||
return true;
|
return true;
|
||||||
} catch {
|
} catch {
|
||||||
audioActivated.value = false;
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -82,7 +79,6 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
|
|||||||
await audio.play();
|
await audio.play();
|
||||||
audio.pause();
|
audio.pause();
|
||||||
audio.currentTime = 0;
|
audio.currentTime = 0;
|
||||||
audioActivated.value = true;
|
|
||||||
resolve(true);
|
resolve(true);
|
||||||
} catch {
|
} catch {
|
||||||
resolve(false);
|
resolve(false);
|
||||||
@@ -95,7 +91,6 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
|
|||||||
return {
|
return {
|
||||||
timerMinutes,
|
timerMinutes,
|
||||||
timerSeconds,
|
timerSeconds,
|
||||||
remainingTime,
|
|
||||||
timerRunning,
|
timerRunning,
|
||||||
timerIsOver,
|
timerIsOver,
|
||||||
runCountdown,
|
runCountdown,
|
||||||
@@ -103,6 +98,5 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
|
|||||||
clear,
|
clear,
|
||||||
checkAudioPermission,
|
checkAudioPermission,
|
||||||
requestAudioPermission,
|
requestAudioPermission,
|
||||||
audioActivated,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
|
||||||
<template>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
class="iconify iconify--mdi"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
|
||||||
fill="currentColor"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
export const escapeHtml = (s: string) =>
|
||||||
|
s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||||
|
|
||||||
|
export const escapeAttr = (s: string) => s.replace(/"/g, """).replace(/&/g, "&");
|
||||||
|
|
||||||
|
export function renderMarkdown(raw: string, urlTitles: Record<string, string> = {}): string {
|
||||||
|
if (!raw.trim()) return "";
|
||||||
|
let html = raw;
|
||||||
|
const links: string[] = [];
|
||||||
|
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m: string, text: string, url: string) => {
|
||||||
|
const tag = `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
|
||||||
|
links.push(tag);
|
||||||
|
return `__LINK_${links.length - 1}__`;
|
||||||
|
});
|
||||||
|
html = html.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
|
||||||
|
const clean = url.replace(/[.。,，;；!！?？）】」』\]]+$/, "");
|
||||||
|
const label = urlTitles[clean] || clean;
|
||||||
|
const tag = `<a href="${escapeAttr(clean)}" target="_blank" rel="noopener">${escapeHtml(label)}</a>`;
|
||||||
|
links.push(tag);
|
||||||
|
return `__LINK_${links.length - 1}__`;
|
||||||
|
});
|
||||||
|
html = html.replace(/\n/g, "<br>");
|
||||||
|
for (let i = 0; i < links.length; i++) {
|
||||||
|
html = html.replace(`__LINK_${i}__`, links[i]);
|
||||||
|
}
|
||||||
|
return html;
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import type { TaskApplication } from "@/api/tasks";
|
||||||
|
|
||||||
|
export const applicationStatusOptions: { label: string; value: TaskApplication["status"] }[] = [
|
||||||
|
{ label: "待应用", value: "TODO" },
|
||||||
|
{ label: "进行中", value: "DOING" },
|
||||||
|
{ label: "已完成", value: "DONE" },
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user