Compare commits
23
Commits
fe45ec0f76
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
99a1b16196 | ||
|
|
132cb706d7 | ||
|
|
66c3c68394 | ||
|
|
c638f7d9c1 | ||
|
|
5a32ad00ed | ||
|
|
939a135519 | ||
|
|
854a94d7a3 | ||
|
|
d9a0b55da0 | ||
|
|
5a382d95e4 | ||
|
|
38243eac82 | ||
|
|
fae27e7c20 | ||
|
|
cc4c20e77b | ||
|
|
1254e3d5d0 | ||
|
|
5569921df6 | ||
|
|
8c8924d652 | ||
|
|
b96cad9683 | ||
|
|
c898c0a8c7 | ||
|
|
45e6663568 | ||
|
|
d33bc11014 | ||
|
|
f1fcae0dac | ||
|
|
468bba8670 | ||
|
|
96cc57ae06 | ||
|
|
f37a92c240 |
@@ -0,0 +1,4 @@
|
||||
# 行尾规范:文本文件统一 LF,Windows 批处理保留 CRLF
|
||||
* text=auto eol=lf
|
||||
*.bat text eol=crlf
|
||||
*.cmd text eol=crlf
|
||||
@@ -85,12 +85,27 @@ lpt-fe/src/
|
||||
|
||||
### 按钮规范
|
||||
|
||||
- 页面主操作 / 卡片 CTA:`size="large"`,如 Study 开始任务、TaskForm 保存、Welcome 快速入口。
|
||||
- 区块工具栏 / 页内操作:默认尺寸,如 Review 刷新、ReviewRecall 面板操作、历史记录。
|
||||
- 表格/列表行内操作:`size="small"`,主操作实底 `type="success"`,次操作 `text`;如 Review 卡片中「回忆复习」为主、「查看记录」为次。
|
||||
- 主操作 / 卡片 CTA:`size="large"`(实测 40px 高、15px 字),如 Study 开始任务、Welcome 快速入口。
|
||||
- 区块工具栏 / 页内操作:默认尺寸(32px 高、14px 字),如 Review 刷新、ReviewRecall 面板操作。
|
||||
- 表格/列表行内操作:`size="small"`(28px 高、13px 字;不得再调小)。
|
||||
- 弹窗 footer:默认尺寸;确认按钮 `type="success"`,取消按钮默认;危险操作统一 `type="danger"`。
|
||||
- 正向/保存语义统一 `success`,次级编辑语义可用 `primary`,不要在同一功能上混用。
|
||||
- 窄屏(`max-width: 768px`)操作区按钮纵向全宽,全局规则位于 `src/assets/main.css` 的 `.action-row / .edit-actions / .fragment-edit-actions / .task-actions`;`.task-actions` 中主操作在上、次操作在下(如 Review 的回忆复习/查看记录)。
|
||||
- 窄屏(`max-width: 768px`)操作区按钮纵向全宽,全局规则位于 `src/assets/main.css` 的 `.action-row / .edit-actions / .fragment-edit-actions / .task-actions`。
|
||||
|
||||
### 颜色与主题
|
||||
|
||||
- 禁止在组件内写颜色字面量:新增颜色先加到 `src/assets/base.css` 的 `:root`,组件只用 `var(--x)`。语义色已提供 `--accent-warning / --accent-warning-soft / --accent-warning-strong / --accent-success-soft / --accent-success-softer / --accent-success-strong / --accent-success-text`。
|
||||
- Element Plus 主题色在 `src/assets/main.css` 的 `:root` 覆盖(`--el-color-success` / `--el-color-primary` 指向 `--green-700`),全站按钮/标签/开关自动生效,不要在组件里逐个覆盖 EP 组件色。
|
||||
- `src/main.ts` 中自定义样式必须写在 `import 'element-plus/dist/index.css'` **之后**,否则主题覆盖会被 EP 覆盖。
|
||||
- 实底主色统一用满足 WCAG AA(白字对比度 ≥4.5:1)的 `--green-700`;`--green-600` 仅用于文字/链接。
|
||||
- 颜色字面量不得出现在 JS/模板表达式里(如 `:color="'#xxx'"` 引 CSS 变量会失效),需要动态色时保留字面量或改用 CSS 类。
|
||||
|
||||
### 卡片列表交互
|
||||
|
||||
- 卡片列表的卡片整体可点击进入详情:外层加 `role="link" tabindex="0"` 与 `aria-label`,并绑定 `@click` 及 `@keydown.enter/@keydown.space.prevent`。
|
||||
- 卡片内的附加按钮必须 `@click.stop`,避免被卡片点击吞掉(如 Review 的「回忆复习」)。
|
||||
- 卡片操作使用右对齐操作簇(`justify-content: flex-end`),**禁止用 `space-between` 把两个按钮拉到卡片两端**。
|
||||
- 加载失败必须区分于空数据:保留一个 `loadFailed` 状态,失败时给出可读提示 + 重试按钮,重试前先重置该状态;不要只靠 `finally` 关 loading 导致空白页。
|
||||
|
||||
### 移动端适配
|
||||
|
||||
@@ -109,15 +124,52 @@ lpt-fe/src/
|
||||
- 组件公开 props/events 只在有实际消费者时保留,例如 MindMapViewer 通过 `toOutline()` 导出编辑内容,不依赖无人监听的 change 事件。
|
||||
- Vite 模板遗留文件(示例组件、icon、logo)不进入业务代码。
|
||||
|
||||
### 测试规范
|
||||
### 请求层与类型规范
|
||||
|
||||
- 所有接口封装必须放在 `src/api/`,组件内禁止直接拼 URL 调用 `request`(历史遗留的裸调用在改动到时迁移)。
|
||||
- request 层统一返回 `Promise<ApiResponse<T>>`:新增接口必须显式标注泛型 `T`,组件消费 `res.data` 时应有明确类型,禁止把后端字段拼错暴露到运行期。
|
||||
- 默认超时 30 秒;AI 聚合类接口(残片生成、思维导图生成/对比、报告草稿、结束会话)在 api 层显式覆写 `{ timeout: 300_000 }`,不要调大全局默认值。
|
||||
- 组件解构响应时使用 `res?.data` 判空兜底;`ApiResponse` 从 `@/utils/request` 导入复用。
|
||||
|
||||
### 组合式函数复用
|
||||
|
||||
- “已等待 N 秒”类秒表计时统一使用 `useElapsedSeconds`,禁止组件内手写 `setInterval` 秒数递增。
|
||||
- 页面新增功能域时先抽 composable(参考 `useSessionHistory` / `useSummaryReport` / `useSessionExpectation`),不要继续膨胀 StartTask 等大页面组件。
|
||||
- 通用解析器、格式化工具放 `src/utils/`,不埋在组件内(如大纲文本转树应放 utils)。
|
||||
|
||||
### 测试规范(分层策略)
|
||||
|
||||
测试按「金字塔」分层组织,新增功能优先补中间层:
|
||||
|
||||
| 层 | 位置 | 职责 | 风格 |
|
||||
|----|------|------|------|
|
||||
| 逻辑单测 | `src/__tests__/{api,composables,utils,router}/` | 纯函数、composable、request 封装 | 直接调用,快、准 |
|
||||
| **交互式集成测试** | `src/__tests__/integration/` | 页面关键用户路径 | 真实挂载 + 模拟点击 + DOM 断言 |
|
||||
| E2E | `e2e/` | 真实浏览器回归 | Playwright + `page.route` 拦后端 |
|
||||
|
||||
### 交互式集成测试要求
|
||||
|
||||
- 必须真实挂载组件(不 `shallow`),通过 `trigger('click')`、`setValue()`、`find('…')` 模拟并断言用户可见行为;禁止 `wrapper.vm.xxx()` 直调内部方法作为主要测试手段(历史遗留的 vm 直调在改动到时迁移)。
|
||||
- 页面关键路径必须有集成测试:登录、学习会话暂停/继续、任务创建/更新、回忆对比等新增关键流程同步补 `integration/*.spec.ts`。
|
||||
- 只断言应用自身行为(API 调用参数、提示、路由、状态文案),不要重复验证 Element Plus 内部行为;jsdom 下 EP 的 callback 式表单校验不可靠(空表单也可能判有效),「校验拦截」类断言由 e2e 在真实浏览器覆盖。
|
||||
- 已知兼容问题:`el-tag` 在 jsdom + VTU 全量挂载时 vnode mounted 钩子崩溃(EP 2.8),集成测试统一 `stubs: { ElTag: true }`;依赖 mind-elixir 的 `MindMapViewer` 用可编程 stub(提供 `toOutline`)。
|
||||
- E2E 定位优先使用角色与可访问名称(`getByRole('button', { name })`、`getByPlaceholder`),仅断言 EP 内部 UI(校验错误、消息弹层)时才用类选择器;改文案不应导致大面积碎测。
|
||||
|
||||
### 逻辑单测要求
|
||||
|
||||
- 单元测试必须直接测试真实代码:直接调用 composable、挂载真实组件、使用真实路由;禁止把组件或 composable 的逻辑复制到测试里再自测。
|
||||
- 测试中可以 mock 外部依赖(API、Element Plus 服务、Audio 等),但被测逻辑本身必须来自生产模块。
|
||||
- `script setup` 内部状态需要测试访问时,通过 `defineExpose` 暴露,而不是在测试里重写一份相同逻辑。
|
||||
|
||||
### 覆盖率
|
||||
|
||||
- `npm run test:coverage` 输出 v8 覆盖率报告(`coverage/`),阈值配置在 `vite.config.ts`,作为棘轮只升不降:任何低于阈值的改动不允许提交。
|
||||
- 提升覆盖率优先补集成测试与零覆盖模块(当前缺口:Review、ReviewDetail、fetchTitle、markdown 渲染分支),不为凑数写快照式断言。
|
||||
|
||||
### 提交前检查
|
||||
|
||||
- 运行 `npx vue-tsc --noEmit`、`npm run test`、`npm run build`。
|
||||
- 运行 `npm run type-check`、`npm run lint`(0 error 才可提交;`no-explicit-any` 允许存量警告,新代码避免 any)、`npm run test`、`npm run build`。
|
||||
- **不要用 `npx vue-tsc --noEmit` 作为检查手段**:`tsconfig.json` 是 solution 风格(`files: []` + 仅 `references`),该命令会解析到根配置而检查 0 个源文件,永远假绿。Docker 构建跑的是 `npm run type-check`(`vue-tsc --build --force`,走 project references),只有它才真正校验。
|
||||
- 提交信息按 Git 提交规范使用中文短句;样式类改动用 `style:`,清理类用 `refactor:` / `chore:`。
|
||||
|
||||
## 开发配置
|
||||
@@ -134,14 +186,16 @@ npm run dev
|
||||
npm run build
|
||||
npm run test
|
||||
npm run test:e2e
|
||||
npx vue-tsc --noEmit
|
||||
npm run type-check
|
||||
npm run lint
|
||||
npm run test:coverage
|
||||
```
|
||||
|
||||
编译检查也可以使用:
|
||||
|
||||
```bash
|
||||
npx vite build
|
||||
npx vue-tsc --noEmit
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## Docker
|
||||
|
||||
+8
-8
@@ -17,11 +17,11 @@ test.describe('Login page', () => {
|
||||
// Element Plus inputs
|
||||
const inputs = page.locator('.el-input');
|
||||
await expect(inputs).toHaveCount(2);
|
||||
await expect(page.locator('.submit-btn')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: '进入系统' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows validation errors when fields are empty', async ({ page }) => {
|
||||
await page.locator('.submit-btn').click();
|
||||
await page.getByRole('button', { name: '进入系统' }).click();
|
||||
// Element Plus validation shows error messages
|
||||
await expect(page.locator('.el-form-item__error').first()).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
@@ -42,11 +42,11 @@ test.describe('Login page', () => {
|
||||
);
|
||||
|
||||
// Fill in inputs using Element Plus el-input inner input
|
||||
const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
|
||||
const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
|
||||
const usernameInput = page.getByPlaceholder('请输入账号');
|
||||
const passwordInput = page.getByPlaceholder('请输入密码');
|
||||
await usernameInput.fill('wronguser');
|
||||
await passwordInput.fill('wrongpass');
|
||||
await page.locator('.submit-btn').click();
|
||||
await page.getByRole('button', { name: '进入系统' }).click();
|
||||
|
||||
// Element Plus error message appears in a popup
|
||||
await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 });
|
||||
@@ -67,11 +67,11 @@ test.describe('Login page', () => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
|
||||
);
|
||||
|
||||
const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
|
||||
const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
|
||||
const usernameInput = page.getByPlaceholder('请输入账号');
|
||||
const passwordInput = page.getByPlaceholder('请输入密码');
|
||||
await usernameInput.fill('admin');
|
||||
await passwordInput.fill('password123');
|
||||
await page.locator('.submit-btn').click();
|
||||
await page.getByRole('button', { name: '进入系统' }).click();
|
||||
|
||||
await expect(page).toHaveURL(/\/welcome/, { timeout: 10_000 });
|
||||
const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
|
||||
|
||||
+37
-3
@@ -41,12 +41,14 @@ test.describe('Review page', () => {
|
||||
await page.waitForSelector('.review-page', { timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('displays summary metrics and task table', async ({ page }) => {
|
||||
test('displays summary metrics and task list', async ({ page }) => {
|
||||
await expect(page.locator('.metric-card')).toHaveCount(3);
|
||||
// Check metric values
|
||||
await expect(page.locator('.metric-card').first().locator('strong')).toContainText('2');
|
||||
// Check table rows
|
||||
await expect(page.locator('.el-table__row')).toHaveCount(2);
|
||||
// 任务以卡片列表展示(不再是 el-table)
|
||||
await expect(page.locator('.task-card')).toHaveCount(2);
|
||||
await expect(page.getByText('学习 Vue3')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: '回忆复习' })).toHaveCount(2);
|
||||
});
|
||||
|
||||
test('shows empty state when no tasks', async ({ page }) => {
|
||||
@@ -61,5 +63,37 @@ test.describe('Review page', () => {
|
||||
await page.goto('/review');
|
||||
await page.waitForSelector('.review-page', { timeout: 10_000 });
|
||||
await expect(page.locator('.metric-card').first().locator('strong')).toContainText('0');
|
||||
await expect(page.getByText('暂无复习任务')).toBeVisible();
|
||||
});
|
||||
|
||||
test('接口失败时提示加载失败而不是显示空列表', async ({ page }) => {
|
||||
await page.route('**/api/review/tasks**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ code: 500, message: '服务异常', data: null }),
|
||||
}),
|
||||
);
|
||||
|
||||
await page.goto('/review');
|
||||
await page.waitForSelector('.review-page', { timeout: 10_000 });
|
||||
|
||||
await expect(page.getByText('复习数据加载失败,请稍后重试')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: '重新加载' })).toBeVisible();
|
||||
await expect(page.getByText('暂无复习任务')).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('详情页返回按钮为「返回总览」并回到复习总览', async ({ page }) => {
|
||||
await page.route('**/api/review/task/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 200, data: [] }) }),
|
||||
);
|
||||
|
||||
await page.locator('.task-card').first().click();
|
||||
await expect(page).toHaveURL(/\/review\/detail\/task\/T001/, { timeout: 5000 });
|
||||
|
||||
const backBtn = page.locator('.head .back-btn');
|
||||
await expect(backBtn).toHaveText('← 返回总览');
|
||||
await backBtn.click();
|
||||
await expect(page).toHaveURL(/\/review$/, { timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -115,7 +115,7 @@ test.describe('StartTask - 暂停后继续', () => {
|
||||
await expect(page.locator('.status-text')).toContainText('进行中');
|
||||
|
||||
// 点击暂停按钮
|
||||
await page.locator('button', { hasText: '暂停' }).click();
|
||||
await page.getByRole('button', { name: '暂停' }).click();
|
||||
|
||||
// 验证暂停 API 被调用
|
||||
expect(apiCalls).toContain('pause');
|
||||
@@ -124,7 +124,7 @@ test.describe('StartTask - 暂停后继续', () => {
|
||||
await expect(page.locator('.status-text')).toContainText('已暂停');
|
||||
|
||||
// 点击开始按钮
|
||||
await page.locator('button', { hasText: '开始' }).click();
|
||||
await page.getByRole('button', { name: '开始' }).click();
|
||||
|
||||
// 验证 continue API 被调用
|
||||
expect(apiCalls).toContain('continue');
|
||||
@@ -159,7 +159,7 @@ test.describe('StartTask - 暂停后继续', () => {
|
||||
await expect(page.locator('.status-text')).toContainText('进行中');
|
||||
|
||||
// ONGOING 状态下,开始按钮是 disabled 的,不应触发 continue
|
||||
const startBtn = page.locator('button', { hasText: '开始' });
|
||||
const startBtn = page.getByRole('button', { name: '开始' });
|
||||
await expect(startBtn).toBeDisabled();
|
||||
|
||||
// continue API 不应被调用
|
||||
@@ -187,18 +187,18 @@ test.describe('StartTask - 暂停后继续', () => {
|
||||
await page.waitForSelector('.start-page', { timeout: 10_000 });
|
||||
|
||||
// 暂停
|
||||
await page.locator('button', { hasText: '暂停' }).click();
|
||||
await page.getByRole('button', { name: '暂停' }).click();
|
||||
await expect(page.locator('.status-text')).toContainText('已暂停');
|
||||
|
||||
// 结束会话
|
||||
await page.locator('button', { hasText: '结束会话' }).click();
|
||||
await page.getByRole('button', { name: '结束会话' }).click();
|
||||
|
||||
// 在弹窗中输入总结内容
|
||||
await page.locator('.el-dialog textarea').fill('测试总结');
|
||||
await page.locator('.el-dialog button', { hasText: '确认结束' }).click();
|
||||
await page.getByRole('dialog').getByRole('button', { name: '确认结束' }).click();
|
||||
|
||||
// 确认第二个弹窗("确定要结束本次学习会话吗?")
|
||||
const confirmBtn = page.locator('.el-message-box__btns button', { hasText: '确定' });
|
||||
const confirmBtn = page.getByRole('dialog').getByRole('button', { name: '确定' });
|
||||
await confirmBtn.waitFor({ timeout: 5000 });
|
||||
await confirmBtn.click();
|
||||
|
||||
|
||||
+4
-4
@@ -76,12 +76,12 @@ test.describe('Study page', () => {
|
||||
});
|
||||
|
||||
test('clicking add navigates to add-task form', async ({ page }) => {
|
||||
await page.locator('.action-card').locator('button', { hasText: '添加任务' }).click();
|
||||
await page.getByRole('button', { name: '添加任务' }).click();
|
||||
await expect(page).toHaveURL(/\/add-task/);
|
||||
});
|
||||
|
||||
test('clicking update navigates to update-task form', async ({ page }) => {
|
||||
await page.locator('.action-card').locator('button', { hasText: '更新任务' }).click();
|
||||
await page.getByRole('button', { name: '更新任务' }).click();
|
||||
await expect(page).toHaveURL(/\/update-task/);
|
||||
});
|
||||
|
||||
@@ -97,9 +97,9 @@ test.describe('Study page', () => {
|
||||
});
|
||||
});
|
||||
|
||||
await page.locator('.action-card').locator('button', { hasText: '删除任务' }).click();
|
||||
await page.getByRole('button', { name: '删除任务' }).click();
|
||||
// 处理确认弹窗
|
||||
const confirmBtn = page.locator('.el-message-box__btns button:has-text("确定删除")');
|
||||
const confirmBtn = page.getByRole('dialog').getByRole('button', { name: '确定删除' });
|
||||
await confirmBtn.waitFor({ timeout: 3000 });
|
||||
await confirmBtn.click();
|
||||
await expect(page.locator('.task-list-item')).toHaveCount(1, { timeout: 5000 });
|
||||
|
||||
@@ -20,7 +20,7 @@ test.describe('Task form', () => {
|
||||
await loginAndGo(page, '/add-task');
|
||||
await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('');
|
||||
await expect(page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea')).toHaveValue('');
|
||||
await expect(page.locator('.action-row button').first()).toContainText('添加');
|
||||
await expect(page.getByRole('button', { name: '添加', exact: true })).toBeVisible();
|
||||
});
|
||||
|
||||
test('submitting add-task sends POST and navigates to /study', async ({ page }) => {
|
||||
@@ -36,9 +36,9 @@ test.describe('Task form', () => {
|
||||
});
|
||||
await loginAndGo(page, '/add-task');
|
||||
|
||||
await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('新学习任务');
|
||||
await page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea').fill('这是一个测试任务');
|
||||
await page.locator('.action-row button').first().click();
|
||||
await page.getByPlaceholder('例如:Vue3 组件通信实践').fill('新学习任务');
|
||||
await page.getByPlaceholder('请输入任务描述').fill('这是一个测试任务');
|
||||
await page.getByRole('button', { name: '添加', exact: true }).click();
|
||||
|
||||
await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
|
||||
});
|
||||
@@ -75,18 +75,18 @@ test.describe('Task form', () => {
|
||||
});
|
||||
|
||||
await loginAndGo(page, '/update-task/1');
|
||||
await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('已有任务');
|
||||
await expect(page.locator('.action-row button').first()).toContainText('更新');
|
||||
await expect(page.getByPlaceholder('例如:Vue3 组件通信实践')).toHaveValue('已有任务');
|
||||
await expect(page.getByRole('button', { name: '更新', exact: true })).toBeVisible();
|
||||
|
||||
await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('更新后的任务');
|
||||
await page.locator('.action-row button').first().click();
|
||||
await page.getByPlaceholder('例如:Vue3 组件通信实践').fill('更新后的任务');
|
||||
await page.getByRole('button', { name: '添加', exact: true }).click();
|
||||
|
||||
await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('cancel navigates back to /study', async ({ page }) => {
|
||||
await loginAndGo(page, '/add-task');
|
||||
await page.locator('.action-row button').nth(1).click();
|
||||
await page.getByRole('button', { name: '取消' }).click();
|
||||
await expect(page).toHaveURL(/\/study/);
|
||||
});
|
||||
});
|
||||
|
||||
+2
-2
@@ -23,12 +23,12 @@ test.describe('Welcome page', () => {
|
||||
});
|
||||
|
||||
test('clicking start study navigates to /study', async ({ page }) => {
|
||||
await page.locator('.quick-card').first().locator('button').click();
|
||||
await page.getByRole('button', { name: '开始学习' }).click();
|
||||
await expect(page).toHaveURL(/\/study/);
|
||||
});
|
||||
|
||||
test('clicking start review navigates to /review', async ({ page }) => {
|
||||
await page.locator('.quick-card').nth(1).locator('button').click();
|
||||
await page.getByRole('button', { name: '开始复习' }).click();
|
||||
await expect(page).toHaveURL(/\/review/);
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import js from '@eslint/js'
|
||||
import pluginVue from 'eslint-plugin-vue'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default [
|
||||
{
|
||||
ignores: [
|
||||
'dist/**',
|
||||
'node_modules/**',
|
||||
'test-results/**',
|
||||
'playwright-report/**',
|
||||
'env.d.ts',
|
||||
],
|
||||
},
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...pluginVue.configs['flat/essential'],
|
||||
{
|
||||
files: ['**/*.vue'],
|
||||
languageOptions: {
|
||||
parserOptions: { parser: tseslint.parser },
|
||||
},
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
// 页面级组件与路由表同名(Study/Review/Login…),命名约定见 AGENTS.md
|
||||
'vue/multi-word-component-names': 'off',
|
||||
// 渐进收敛:存量代码仍有 any,新代码约束见 AGENTS.md
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
},
|
||||
},
|
||||
]
|
||||
Generated
+2908
-46
File diff suppressed because it is too large
Load Diff
@@ -10,10 +10,13 @@
|
||||
"build:production": "vite build --mode production",
|
||||
"build": "vite build --mode production",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src",
|
||||
"lint:fix": "eslint src --fix",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"test:e2e": "npx playwright test",
|
||||
"test:e2e:ui": "playwright test --ui"
|
||||
},
|
||||
@@ -28,16 +31,22 @@
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.5",
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/jsdom": "^28.0.3",
|
||||
"@types/node": "^20.17.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"@vitest/coverage-v8": "^2.1.9",
|
||||
"@vue/test-utils": "^2.4.10",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^9.39.5",
|
||||
"eslint-plugin-vue": "^9.33.0",
|
||||
"globals": "^17.11.0",
|
||||
"jsdom": "^24.1.3",
|
||||
"tsx": "^4.23.0",
|
||||
"typescript": "~5.6.0",
|
||||
"typescript-eslint": "^8.68.0",
|
||||
"vite": "^5.4.10",
|
||||
"vitest": "^2.1.9",
|
||||
"vue-tsc": "^2.1.6"
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ const route = useRoute();
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</el-main>
|
||||
<el-footer class="shell-footer">
|
||||
<el-footer v-if="route.path === '/login'" class="shell-footer">
|
||||
<MyFooter />
|
||||
</el-footer>
|
||||
</el-container>
|
||||
|
||||
@@ -22,10 +22,14 @@ describe('reportFragments API', () => {
|
||||
it('createFragments sends POST with sessionNum and content', async () => {
|
||||
mockedRequest.post.mockResolvedValue({ code: 200, data: { id: 1 } })
|
||||
const result = await createFragments('S001', '学习了递归')
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith('/report-fragments', {
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith(
|
||||
'/report-fragments',
|
||||
{
|
||||
sessionNum: 'S001',
|
||||
content: '学习了递归',
|
||||
})
|
||||
},
|
||||
{ timeout: 300000 },
|
||||
)
|
||||
expect(result).toEqual({ code: 200, data: { id: 1 } })
|
||||
})
|
||||
})
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
continueSession,
|
||||
pauseSession,
|
||||
endSession,
|
||||
abortSession,
|
||||
startOrContinueStudySession,
|
||||
getSessionDetail,
|
||||
} from '@/api/studySessions'
|
||||
@@ -57,7 +58,8 @@ describe('studySessions API', () => {
|
||||
await endSession('S001')
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith(
|
||||
'/study-sessions/S001/study-sessions/ended',
|
||||
{ content: '任务结束' }
|
||||
{ content: '任务结束' },
|
||||
{ timeout: 300000 }
|
||||
)
|
||||
})
|
||||
|
||||
@@ -66,7 +68,16 @@ describe('studySessions API', () => {
|
||||
await endSession('S001', '自定义结束')
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith(
|
||||
'/study-sessions/S001/study-sessions/ended',
|
||||
{ content: '自定义结束' }
|
||||
{ content: '自定义结束' },
|
||||
{ timeout: 300000 }
|
||||
)
|
||||
})
|
||||
it('abortSession sends POST with confirmation phrase', async () => {
|
||||
mockedRequest.post.mockResolvedValue({ code: 200, data: null })
|
||||
await abortSession('S001', '我误操作导致开启了本次学习')
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith(
|
||||
'/study-sessions/S001/study-sessions/abort',
|
||||
{ confirmation: '我误操作导致开启了本次学习' }
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -22,6 +22,13 @@ async function mountAt(path: string) {
|
||||
})
|
||||
}
|
||||
|
||||
// 真实挂载:shallow 会存根化 el-button 且不渲染插槽,无法断言按钮文案与点击行为
|
||||
async function mountRealAt(path: string) {
|
||||
await router.push(path)
|
||||
await router.isReady()
|
||||
return mount(MyHead, { global: { plugins: [ElementPlus, router] } })
|
||||
}
|
||||
|
||||
describe('MyHead.vue', () => {
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks()
|
||||
@@ -30,6 +37,49 @@ describe('MyHead.vue', () => {
|
||||
await router.isReady()
|
||||
})
|
||||
|
||||
it('默认返回首页,复习详情按路由 meta 返回总览', async () => {
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
|
||||
const studyWrapper = await mountRealAt('/study')
|
||||
expect(studyWrapper.find('.back-btn').text()).toBe('← 返回首页')
|
||||
await studyWrapper.find('.back-btn').trigger('click')
|
||||
await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/welcome'))
|
||||
studyWrapper.unmount()
|
||||
|
||||
const taskDetailWrapper = await mountRealAt('/review/detail/task/T1')
|
||||
expect(taskDetailWrapper.find('.back-btn').text()).toBe('← 返回总览')
|
||||
await taskDetailWrapper.find('.back-btn').trigger('click')
|
||||
await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/review'))
|
||||
taskDetailWrapper.unmount()
|
||||
})
|
||||
|
||||
it('多入口详情页优先返回来路,无历史时兜底到上级', async () => {
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
const backSpy = vi.spyOn(router, 'back').mockImplementation(() => {})
|
||||
|
||||
// 从回忆复习页进入:存在历史,回退到实际来路
|
||||
await mountRealAt('/review/recall/T1')
|
||||
const fromRecall = await mountRealAt('/review/detail/report/9')
|
||||
expect(fromRecall.find('.back-btn').text()).toBe('← 返回上一页')
|
||||
await fromRecall.find('.back-btn').trigger('click')
|
||||
expect(backSpy).toHaveBeenCalledTimes(1)
|
||||
fromRecall.unmount()
|
||||
|
||||
// 直接深链或刷新进入:没有历史,回退到该页声明的上级
|
||||
window.history.replaceState(
|
||||
{ back: null, current: '/review/detail/report/9', forward: null, position: 0 },
|
||||
'',
|
||||
)
|
||||
const deepLink = mount(MyHead, { global: { plugins: [ElementPlus, router] } })
|
||||
expect(deepLink.find('.back-btn').text()).toBe('← 返回上一页')
|
||||
await deepLink.find('.back-btn').trigger('click')
|
||||
expect(backSpy).toHaveBeenCalledTimes(1)
|
||||
await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/review'))
|
||||
deepLink.unmount()
|
||||
|
||||
backSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('derives route-based computed properties from real route', async () => {
|
||||
const loginWrapper = await mountAt('/login')
|
||||
expect(loginWrapper.vm.isLoginRoute).toBe(true)
|
||||
@@ -46,8 +96,7 @@ describe('MyHead.vue', () => {
|
||||
expect(welcomeWrapper.vm.pageTitle).toBeUndefined()
|
||||
})
|
||||
|
||||
it('clears login state and navigates to login on logout', async () => {
|
||||
vi.mocked(logout).mockResolvedValue({ code: 200 } as any)
|
||||
it('clears login state and navigates to login on logout', async () => { vi.mocked(logout).mockResolvedValue({ code: 200 } as any)
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
const wrapper = await mountAt('/study')
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import StartTask from '@/components/StartTask.vue'
|
||||
import router from '@/router'
|
||||
import {
|
||||
abortSession,
|
||||
continueSession,
|
||||
endSession,
|
||||
getActiveSession,
|
||||
@@ -17,6 +18,7 @@ import {
|
||||
import { getFragmentsBySession } from '@/api/reportFragments'
|
||||
|
||||
vi.mock('@/api/studySessions', () => ({
|
||||
abortSession: vi.fn(),
|
||||
continueSession: vi.fn(),
|
||||
endSession: vi.fn(),
|
||||
getActiveSession: vi.fn(),
|
||||
@@ -111,6 +113,8 @@ describe('StartTask.vue', () => {
|
||||
expect(wrapper.vm.taskInfo.sessionState).toBe('PAUSED')
|
||||
expect(wrapper.vm.taskInfo.actualTime).toBe(10)
|
||||
expect(wrapper.vm.taskInfo.effectiveTime).toBe(20)
|
||||
// 后端返回 0.8,UI 统一按百分比展示
|
||||
expect(wrapper.vm.taskInfo.effectivenessRatio).toBe('80.0%')
|
||||
expect(wrapper.vm.timerRunning).toBe(false)
|
||||
wrapper.unmount()
|
||||
})
|
||||
@@ -222,4 +226,44 @@ describe('StartTask.vue', () => {
|
||||
expect(pauseSession).toHaveBeenCalledTimes(2)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('confirmAbort aborts session with correct phrase and navigates to study page', async () => {
|
||||
vi.mocked(abortSession).mockResolvedValue({ code: 200, message: '请求成功' } as any)
|
||||
const wrapper = await mountTask()
|
||||
|
||||
wrapper.vm.abortConfirmation = '我误操作导致开启了本次学习'
|
||||
await wrapper.vm.confirmAbort()
|
||||
|
||||
expect(abortSession).toHaveBeenCalledWith('SESSION_001', '我误操作导致开启了本次学习')
|
||||
expect(ElMessage.success).toHaveBeenCalledWith('本次学习已关闭,未产生任何数据')
|
||||
expect(localStorage.getItem('activeSession')).toBeNull()
|
||||
expect(router.currentRoute.value.path).toBe('/study')
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('confirmAbort refuses wrong phrase without calling API', async () => {
|
||||
const wrapper = await mountTask()
|
||||
|
||||
wrapper.vm.abortConfirmation = '不是确认语'
|
||||
await wrapper.vm.confirmAbort()
|
||||
|
||||
expect(ElMessage.warning).toHaveBeenCalledWith('确认语输入不正确,请重新输入')
|
||||
expect(abortSession).not.toHaveBeenCalled()
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('confirmAbort shows backend message when session has fragments and stays on page', async () => {
|
||||
vi.mocked(abortSession).mockRejectedValue({
|
||||
code: 400,
|
||||
message: '这次学习已经产生了学习残片,不能按误操作结束了哦',
|
||||
} as any)
|
||||
const wrapper = await mountTask()
|
||||
|
||||
wrapper.vm.abortConfirmation = '我误操作导致开启了本次学习'
|
||||
await wrapper.vm.confirmAbort()
|
||||
|
||||
expect(ElMessage.error).toHaveBeenCalledWith('这次学习已经产生了学习残片,不能按误操作结束了哦')
|
||||
expect(router.currentRoute.value.path).not.toBe('/study')
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import Welcome from '@/components/Welcome.vue'
|
||||
import { getReviewFeed } from '@/api/review'
|
||||
import { BASE_SPEED_PX_PER_SEC, NARROW_SPEED_FACTOR } from '@/utils/autoScroll'
|
||||
|
||||
vi.mock('@/api/review', () => ({
|
||||
getReviewFeed: vi.fn(),
|
||||
getTaskReview: vi.fn(),
|
||||
}))
|
||||
|
||||
const makeFragment = (id: number) => ({
|
||||
id,
|
||||
sessionNum: `SESSION_${id}`,
|
||||
taskName: `任务${id}`,
|
||||
taskNum: `T${id}`,
|
||||
sourceType: 'FRAGMENT',
|
||||
content: `残片内容${id}`,
|
||||
})
|
||||
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: { template: '<div />' } },
|
||||
{ path: '/welcome', component: { template: '<div />' } },
|
||||
{ path: '/study', component: { template: '<div />' } },
|
||||
{ path: '/review', component: { template: '<div />' } },
|
||||
],
|
||||
})
|
||||
|
||||
/** jsdom 不实现 Web Animations API,用可控桩替代 */
|
||||
interface AnimStub {
|
||||
keyframes: unknown
|
||||
options: { duration: number; iterations: number; easing: string }
|
||||
currentTime: number
|
||||
paused: boolean
|
||||
cancel: ReturnType<typeof vi.fn>
|
||||
pause: ReturnType<typeof vi.fn>
|
||||
play: ReturnType<typeof vi.fn>
|
||||
}
|
||||
|
||||
let animations: AnimStub[] = []
|
||||
let animateSpy: ReturnType<typeof vi.fn>
|
||||
|
||||
/**
|
||||
* jsdom 不做布局,用宽度桩模拟渲染结果:
|
||||
* scrollWidth = 单份内容宽 × 当前已渲染份数(由 DOM 里的 chip 数量推得),
|
||||
* clientWidth = 轨道宽度。
|
||||
*/
|
||||
const stubLayout = (perCopyWidth: number, trackWidth: number) => {
|
||||
Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
|
||||
configurable: true,
|
||||
get(this: HTMLElement) {
|
||||
if (!this.classList?.contains('review-scroll-content')) return 0
|
||||
const renderedChips = this.querySelectorAll('.review-chip').length
|
||||
return perCopyWidth * (renderedChips / SOURCE_CHIP_COUNT)
|
||||
},
|
||||
})
|
||||
Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
|
||||
configurable: true,
|
||||
get(this: HTMLElement) {
|
||||
return this.classList?.contains('review-scroll-track') ? trackWidth : 0
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** mock 数据里的残留条数,用于把“份数”换算回“条数” */
|
||||
const SOURCE_CHIP_COUNT = 2
|
||||
/** 从渲染结果反推当前份数 */
|
||||
const renderedRepeatCount = (wrapper: { findAll: (s: string) => unknown[] }) =>
|
||||
wrapper.findAll('.review-chip').length / SOURCE_CHIP_COUNT
|
||||
|
||||
const mountWelcome = async () => {
|
||||
const wrapper = mount(Welcome, { global: { plugins: [router, ElementPlus] } })
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
animations = []
|
||||
animateSpy = vi.fn((keyframes: unknown, options: AnimStub['options']) => {
|
||||
const anim: AnimStub = {
|
||||
keyframes,
|
||||
options,
|
||||
currentTime: 0,
|
||||
paused: false,
|
||||
cancel: vi.fn(),
|
||||
pause: vi.fn(function (this: AnimStub) { this.paused = true }),
|
||||
play: vi.fn(function (this: AnimStub) { this.paused = false }),
|
||||
}
|
||||
animations.push(anim)
|
||||
return anim as unknown as Animation
|
||||
})
|
||||
Element.prototype.animate = animateSpy as unknown as Element['animate']
|
||||
vi.mocked(getReviewFeed).mockResolvedValue({ code: 200, data: [makeFragment(1), makeFragment(2)] })
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
// @ts-expect-error 清理原型上的自定义布局桩
|
||||
delete HTMLElement.prototype.scrollWidth
|
||||
// @ts-expect-error 清理原型上的自定义布局桩
|
||||
delete HTMLElement.prototype.clientWidth
|
||||
})
|
||||
|
||||
describe('Welcome 首页滚动条', () => {
|
||||
it('内容超过一屏时按基准速度建立动画,时长由恒速换算', async () => {
|
||||
stubLayout(4000, 1000) // 单份 4000px,60px/s → 66666ms
|
||||
await mountWelcome()
|
||||
|
||||
expect(animateSpy).toHaveBeenCalledTimes(1)
|
||||
const options = animations[0].options
|
||||
expect(options.iterations).toBe(Infinity)
|
||||
expect(options.easing).toBe('linear')
|
||||
expect(options.duration).toBeCloseTo((4000 / BASE_SPEED_PX_PER_SEC) * 1000)
|
||||
})
|
||||
|
||||
it('速度与内容量无关:内容翻倍只让时长翻倍', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
await mountWelcome()
|
||||
const few = animations[0].options.duration
|
||||
|
||||
animations = []
|
||||
animateSpy.mockClear()
|
||||
stubLayout(40000, 1000)
|
||||
await mountWelcome()
|
||||
const many = animations[0].options.duration
|
||||
|
||||
expect(many / few).toBeCloseTo(10)
|
||||
})
|
||||
|
||||
it('内容不足一屏时仍然滚动,且按单份宽度换算时长', async () => {
|
||||
stubLayout(300, 1000) // 单份 300px,远小于轨道
|
||||
await mountWelcome()
|
||||
|
||||
expect(animateSpy).toHaveBeenCalled()
|
||||
expect(animations[animations.length - 1].options.duration)
|
||||
.toBeCloseTo((300 / BASE_SPEED_PX_PER_SEC) * 1000)
|
||||
})
|
||||
|
||||
it('内容比轨道窄时补足份数后重建动画,避免循环露白', async () => {
|
||||
stubLayout(300, 1000) // 单份 300px、轨道 1000px → ceil(1000/300)+1 = 5 份
|
||||
const wrapper = await mountWelcome()
|
||||
|
||||
expect(renderedRepeatCount(wrapper)).toBe(5)
|
||||
expect(animateSpy).toHaveBeenCalledTimes(1)
|
||||
// 位移按份数换算:100% / 5 = 20%
|
||||
expect(animations[0].keyframes).toEqual([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-20%)' },
|
||||
])
|
||||
})
|
||||
|
||||
it('内容足够宽时保持最少两份,不会反复重建', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
|
||||
expect(renderedRepeatCount(wrapper)).toBe(2)
|
||||
expect(animateSpy).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('窄屏(手机)按系数降速', async () => {
|
||||
stubLayout(4000, 375)
|
||||
await mountWelcome()
|
||||
|
||||
const speed = 4000 / (animations[0].options.duration / 1000)
|
||||
expect(speed).toBeCloseTo(BASE_SPEED_PX_PER_SEC * NARROW_SPEED_FACTOR)
|
||||
})
|
||||
|
||||
it('滚轮按速度换算手动位移,并夹在一轮时长内', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
const track = wrapper.find('.review-scroll-track')
|
||||
|
||||
await track.trigger('wheel', { deltaY: BASE_SPEED_PX_PER_SEC, deltaMode: 0 })
|
||||
// 滚动 60px = 1 秒动画时间
|
||||
expect(animations[0].currentTime).toBeCloseTo(1000)
|
||||
|
||||
await track.trigger('wheel', { deltaY: -100000, deltaMode: 0 })
|
||||
expect(animations[0].currentTime).toBe(0)
|
||||
})
|
||||
|
||||
it('手指左右拖动共用同一套换算,拖动后恢复播放', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
const track = wrapper.find('.review-scroll-track')
|
||||
|
||||
await track.trigger('touchstart', { touches: [{ clientX: 300 }] })
|
||||
expect(animations[0].paused).toBe(true)
|
||||
|
||||
await track.trigger('touchmove', { touches: [{ clientX: 360 }] })
|
||||
expect(animations[0].currentTime).toBeCloseTo(1000)
|
||||
|
||||
await track.trigger('touchend')
|
||||
expect(animations[0].paused).toBe(false)
|
||||
})
|
||||
|
||||
it('拖动后松开不会误触打开回忆卡片', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
const track = wrapper.find('.review-scroll-track')
|
||||
|
||||
await track.trigger('touchstart', { touches: [{ clientX: 300 }] })
|
||||
await track.trigger('touchmove', { touches: [{ clientX: 400 }] })
|
||||
await wrapper.find('.review-chip').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.recall-question').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('点击残片(未拖动)会打开回忆卡片', async () => {
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
|
||||
await wrapper.find('.review-chip').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.recall-question').exists()).toBe(true)
|
||||
expect(wrapper.find('.recall-snippet').text()).toContain('残片内容1')
|
||||
})
|
||||
|
||||
it('卸载时取消动画并移除窗口监听', async () => {
|
||||
const removeSpy = vi.spyOn(window, 'removeEventListener')
|
||||
stubLayout(4000, 1000)
|
||||
const wrapper = await mountWelcome()
|
||||
|
||||
wrapper.unmount()
|
||||
|
||||
expect(animations[0].cancel).toHaveBeenCalled()
|
||||
expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
|
||||
removeSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,78 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { useElapsedSeconds } from '@/components/composables/useElapsedSeconds'
|
||||
|
||||
describe('useElapsedSeconds', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
})
|
||||
|
||||
it('start 从 0 开始每秒递增', () => {
|
||||
const { seconds, start, stop } = useElapsedSeconds()
|
||||
|
||||
start()
|
||||
expect(seconds.value).toBe(0)
|
||||
|
||||
vi.advanceTimersByTime(3000)
|
||||
expect(seconds.value).toBe(3)
|
||||
stop()
|
||||
})
|
||||
|
||||
it('重复 start 会归零并重新计时', () => {
|
||||
const { seconds, start, stop } = useElapsedSeconds()
|
||||
|
||||
start()
|
||||
vi.advanceTimersByTime(5000)
|
||||
|
||||
start()
|
||||
expect(seconds.value).toBe(0)
|
||||
vi.advanceTimersByTime(1000)
|
||||
expect(seconds.value).toBe(1)
|
||||
stop()
|
||||
})
|
||||
|
||||
it('stop 停止递增但保留秒数', () => {
|
||||
const { seconds, start, stop } = useElapsedSeconds()
|
||||
|
||||
start()
|
||||
vi.advanceTimersByTime(2000)
|
||||
stop()
|
||||
expect(seconds.value).toBe(2)
|
||||
|
||||
vi.advanceTimersByTime(5000)
|
||||
expect(seconds.value).toBe(2)
|
||||
})
|
||||
|
||||
it('reset 停止并归零', () => {
|
||||
const { seconds, start, reset } = useElapsedSeconds()
|
||||
|
||||
start()
|
||||
vi.advanceTimersByTime(2000)
|
||||
reset()
|
||||
expect(seconds.value).toBe(0)
|
||||
|
||||
vi.advanceTimersByTime(5000)
|
||||
expect(seconds.value).toBe(0)
|
||||
})
|
||||
|
||||
it('在组件内使用时卸载自动清理定时器', async () => {
|
||||
const { mount } = await import('@vue/test-utils')
|
||||
const { defineComponent, h } = await import('vue')
|
||||
|
||||
let exposed!: ReturnType<typeof useElapsedSeconds>
|
||||
const Host = defineComponent({
|
||||
setup() {
|
||||
exposed = useElapsedSeconds()
|
||||
return () => h('div')
|
||||
},
|
||||
})
|
||||
const wrapper = mount(Host)
|
||||
|
||||
exposed.start()
|
||||
vi.advanceTimersByTime(2000)
|
||||
expect(exposed.seconds.value).toBe(2)
|
||||
|
||||
wrapper.unmount()
|
||||
vi.advanceTimersByTime(5000)
|
||||
expect(exposed.seconds.value).toBe(2)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,71 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus, { ElMessage } from 'element-plus'
|
||||
import Login from '@/components/Login.vue'
|
||||
import router from '@/router'
|
||||
import { login } from '@/api/login'
|
||||
|
||||
vi.mock('@/api/login', () => ({
|
||||
login: vi.fn(),
|
||||
logout: vi.fn(),
|
||||
}))
|
||||
|
||||
/**
|
||||
* 交互式集成测试:真实挂载 Login,通过 setValue / trigger('click') 模拟用户行为,
|
||||
* 断言提交链路(凭证传递、成功/失败分支、localStorage 与路由结果)。
|
||||
*
|
||||
* 注意:jsdom 下 Element Plus 的 callback 式表单校验不可靠(空表单也可能判有效),
|
||||
* “空账号被校验拦截”这类行为由 e2e/login.spec 在真实浏览器中覆盖,此处不重复断言。
|
||||
*/
|
||||
describe('Login 交互流程(集成)', () => {
|
||||
beforeEach(async () => {
|
||||
vi.clearAllMocks()
|
||||
localStorage.clear()
|
||||
await router.push('/login')
|
||||
await router.isReady()
|
||||
})
|
||||
|
||||
const mountLogin = async () => {
|
||||
const wrapper = mount(Login, {
|
||||
global: { plugins: [ElementPlus, router] },
|
||||
})
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
const findSubmitButton = (wrapper: ReturnType<typeof mount> extends Promise<infer T> ? T : never) =>
|
||||
wrapper.findAll('button').find((b) => b.text().includes('进入系统'))!
|
||||
|
||||
it('填写账号密码后点击“进入系统”,提交凭证并跳转 /welcome', async () => {
|
||||
vi.mocked(login).mockResolvedValue({ code: 200, message: '登录成功' } as any)
|
||||
const wrapper = await mountLogin()
|
||||
|
||||
await wrapper.find('input[placeholder="请输入账号"]').setValue('admin')
|
||||
await wrapper.find('input[placeholder="请输入密码"]').setValue('123456')
|
||||
await findSubmitButton(wrapper).trigger('click')
|
||||
// /welcome 是懒加载路由,动态 import 需要宏任务,用 waitFor 轮询等待到达
|
||||
await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/welcome'))
|
||||
|
||||
expect(login).toHaveBeenCalledWith('admin', '123456')
|
||||
expect(localStorage.getItem('isLoggedIn')).toBe('true')
|
||||
expect(ElMessage.success).toHaveBeenCalledWith('登录成功')
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('后端返回失败时提示错误、不写登录标记、不跳转', async () => {
|
||||
vi.mocked(login).mockResolvedValue({ code: 500, message: '账号或密码错误' } as any)
|
||||
const wrapper = await mountLogin()
|
||||
|
||||
await wrapper.find('input[placeholder="请输入账号"]').setValue('admin')
|
||||
await wrapper.find('input[placeholder="请输入密码"]').setValue('wrong-pass')
|
||||
await findSubmitButton(wrapper).trigger('click')
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(login).toHaveBeenCalledWith('admin', 'wrong-pass')
|
||||
expect(ElMessage.error).toHaveBeenCalledWith('账号或密码错误')
|
||||
expect(localStorage.getItem('isLoggedIn')).toBeNull()
|
||||
expect(router.currentRoute.value.path).toBe('/login')
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,143 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import Review from '@/components/Review.vue'
|
||||
import { getReviewTaskStats } from '@/api/review'
|
||||
|
||||
vi.mock('@/api/review', () => ({
|
||||
getReviewTaskStats: vi.fn(),
|
||||
getReviewFeed: vi.fn(),
|
||||
getTaskReview: vi.fn(),
|
||||
}))
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
taskNum: 'T001',
|
||||
taskName: '学习 Vue3 组合式 API',
|
||||
reportCount: 3,
|
||||
fragmentCount: 5,
|
||||
effectiveTime: 9000,
|
||||
},
|
||||
{
|
||||
taskNum: 'T002',
|
||||
taskName: 'TypeScript 类型体操',
|
||||
reportCount: 1,
|
||||
fragmentCount: 2,
|
||||
effectiveTime: 4500,
|
||||
},
|
||||
]
|
||||
|
||||
/**
|
||||
* 交互式集成测试:真实挂载 Review 总览页,
|
||||
* 覆盖卡片进入详情、回忆复习跳转、加载失败提示三条用户可见路径。
|
||||
*/
|
||||
describe('Review 交互流程(集成)', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
const mountReview = async () => {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [
|
||||
{ path: '/review', name: 'review', component: Review },
|
||||
{ path: '/review/detail/task/:taskNum', name: 'review-detail', component: { template: '<div />' } },
|
||||
{ path: '/review/recall/:taskNum', name: 'review-recall', component: { template: '<div />' } },
|
||||
],
|
||||
})
|
||||
await router.push('/review')
|
||||
await router.isReady()
|
||||
|
||||
const wrapper = mount(Review, {
|
||||
global: {
|
||||
plugins: [ElementPlus, router],
|
||||
// el-tag 在 jsdom + VTU 下 vnode mounted 钩子崩溃(EP 2.8 已知问题),纯视觉组件,stub 掉
|
||||
stubs: { ElTag: true },
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
return { wrapper, router }
|
||||
}
|
||||
|
||||
it('点击卡片空白处进入该任务的复习详情', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockResolvedValue({ code: 200, data: tasks })
|
||||
const { wrapper, router } = await mountReview()
|
||||
|
||||
expect(wrapper.findAll('.task-card')).toHaveLength(2)
|
||||
await wrapper.findAll('.task-card')[1].trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(router.currentRoute.value.path).toBe('/review/detail/task/T002')
|
||||
})
|
||||
|
||||
it('键盘 Enter 与 Space 也能进入详情', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockResolvedValue({ code: 200, data: tasks })
|
||||
const { wrapper, router } = await mountReview()
|
||||
|
||||
await wrapper.findAll('.task-card')[0].trigger('keydown', { key: 'Enter' })
|
||||
await flushPromises()
|
||||
expect(router.currentRoute.value.path).toBe('/review/detail/task/T001')
|
||||
|
||||
await router.push('/review')
|
||||
await flushPromises()
|
||||
await wrapper.findAll('.task-card')[0].trigger('keydown', { key: ' ' })
|
||||
await flushPromises()
|
||||
expect(router.currentRoute.value.path).toBe('/review/detail/task/T001')
|
||||
})
|
||||
|
||||
it('点击「回忆复习」进入回忆页,且不被卡片点击覆盖', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockResolvedValue({ code: 200, data: tasks })
|
||||
const { wrapper, router } = await mountReview()
|
||||
|
||||
await wrapper.find('.recall-button').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(router.currentRoute.value.path).toBe('/review/recall/T001')
|
||||
})
|
||||
|
||||
it('卡片暴露 role 与 aria-label,具备可访问语义', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockResolvedValue({ code: 200, data: tasks })
|
||||
const { wrapper } = await mountReview()
|
||||
|
||||
const card = wrapper.findAll('.task-card')[0]
|
||||
expect(card.attributes('role')).toBe('link')
|
||||
expect(card.attributes('tabindex')).toBe('0')
|
||||
expect(card.attributes('aria-label')).toContain('学习 Vue3 组合式 API')
|
||||
})
|
||||
|
||||
it('接口失败时提示加载失败并提供重试,而不是显示空列表', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockRejectedValue({ code: 500, message: '服务异常' })
|
||||
const { wrapper } = await mountReview()
|
||||
|
||||
expect(wrapper.text()).toContain('复习数据加载失败,请稍后重试')
|
||||
expect(wrapper.text()).not.toContain('暂无复习任务')
|
||||
expect(wrapper.find('button').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('重试按钮会重新请求接口,成功后展示卡片列表', async () => {
|
||||
vi.mocked(getReviewTaskStats)
|
||||
.mockRejectedValueOnce({ code: 500, message: '服务异常' })
|
||||
.mockResolvedValueOnce({ code: 200, data: tasks })
|
||||
const { wrapper } = await mountReview()
|
||||
|
||||
expect(wrapper.text()).toContain('复习数据加载失败,请稍后重试')
|
||||
|
||||
const retry = wrapper.findAll('button').find(b => b.text().includes('重新加载'))
|
||||
expect(retry).toBeTruthy()
|
||||
await retry!.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(getReviewTaskStats).toHaveBeenCalledTimes(2)
|
||||
expect(wrapper.findAll('.task-card')).toHaveLength(2)
|
||||
expect(wrapper.text()).not.toContain('复习数据加载失败')
|
||||
})
|
||||
|
||||
it('无任务时展示空列表文案,不显示失败提示', async () => {
|
||||
vi.mocked(getReviewTaskStats).mockResolvedValue({ code: 200, data: [] })
|
||||
const { wrapper } = await mountReview()
|
||||
|
||||
expect(wrapper.text()).toContain('暂无复习任务')
|
||||
expect(wrapper.text()).not.toContain('复习数据加载失败')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,127 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus, { ElMessage } from 'element-plus'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import ReviewRecall from '@/components/ReviewRecall.vue'
|
||||
import {
|
||||
getStandardMindMap,
|
||||
listRecallRecords,
|
||||
recallCompare,
|
||||
} from '@/api/standardMindMap'
|
||||
|
||||
vi.mock('@/api/standardMindMap', () => ({
|
||||
findNode: vi.fn(),
|
||||
getStandardMindMap: vi.fn(),
|
||||
listRecallRecords: vi.fn(),
|
||||
recallCompare: vi.fn(),
|
||||
regenerateStandardMindMap: vi.fn(),
|
||||
updateStandardMindMap: vi.fn(),
|
||||
}))
|
||||
|
||||
const ok = (data: any = null) => ({ code: 200, message: '请求成功', data })
|
||||
|
||||
const standardMap = {
|
||||
id: 1,
|
||||
taskNum: 'T001',
|
||||
title: '测试任务',
|
||||
content: JSON.stringify({ title: '根主题', children: [{ title: '子节点' }] }),
|
||||
outline: '根主题\n- 子节点',
|
||||
summary: '',
|
||||
generator: 'AI',
|
||||
sourceReportCount: 1,
|
||||
}
|
||||
|
||||
/** MindMapViewer 依赖 mind-elixir(无法在 jsdom 运行),用可编程 stub 模拟导出的大纲 */
|
||||
const toOutline = vi.fn((): string => '根主题\n- 子节点')
|
||||
const MindMapViewerStub = {
|
||||
name: 'MindMapViewerStub',
|
||||
props: ['modelValue', 'nodeSelectable', 'colorByCompare', 'readonly'],
|
||||
template: '<div class="mindmap-stub" />',
|
||||
methods: { toOutline },
|
||||
}
|
||||
|
||||
/**
|
||||
* 交互式集成测试:真实挂载 ReviewRecall,
|
||||
* 点击“提交对比”模拟回忆对比流,断言 API 参数与对比结果渲染。
|
||||
*/
|
||||
describe('ReviewRecall 交互流程(集成)', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
localStorage.clear()
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
|
||||
vi.mocked(getStandardMindMap).mockResolvedValue(ok(standardMap))
|
||||
vi.mocked(listRecallRecords).mockResolvedValue(
|
||||
ok([
|
||||
{
|
||||
id: 11,
|
||||
taskNum: 'T001',
|
||||
standardMapId: 1,
|
||||
recallContent: '根主题',
|
||||
compareResult: JSON.stringify({
|
||||
matchedTree: { title: '根主题', children: [] },
|
||||
recallRatio: 0.6,
|
||||
matchedCount: 3,
|
||||
missedCount: 2,
|
||||
extraCount: 0,
|
||||
}),
|
||||
recallRatio: 0.6,
|
||||
matchedCount: 3,
|
||||
missedCount: 2,
|
||||
extraCount: 0,
|
||||
createdTime: '2026-08-27 10:00:00',
|
||||
},
|
||||
]),
|
||||
)
|
||||
vi.mocked(recallCompare).mockResolvedValue(ok(standardMap))
|
||||
})
|
||||
|
||||
const mountPage = async () => {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [{ path: '/review/recall/:taskNum', component: ReviewRecall, meta: { wide: true } }],
|
||||
})
|
||||
await router.push('/review/recall/T001')
|
||||
await router.isReady()
|
||||
|
||||
const wrapper = mount(ReviewRecall, {
|
||||
global: {
|
||||
plugins: [ElementPlus, router],
|
||||
stubs: { ElTag: true, MindMapViewer: MindMapViewerStub },
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
return { wrapper }
|
||||
}
|
||||
|
||||
it('加载后展示标准导图标题,点击“提交对比”调用对比接口并渲染结果', async () => {
|
||||
const { wrapper } = await mountPage()
|
||||
// 默认折叠标准导图(防剧透),回忆面板可见
|
||||
expect(wrapper.text()).toContain('你的回忆')
|
||||
const submit = wrapper.findAll('button').find((b) => b.text().trim() === '提交对比')!
|
||||
expect(submit).toBeTruthy()
|
||||
await submit.trigger('click')
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(recallCompare).toHaveBeenCalledWith('T001', '根主题\n- 子节点', undefined)
|
||||
expect(ElMessage.success).toHaveBeenCalledWith('回忆对比完成')
|
||||
// 对比完成后出现“清空重写”入口(v-if=hasCompared)
|
||||
expect(wrapper.findAll('button').some((b) => b.text().trim() === '清空重写')).toBe(true)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('回忆导图内容为单行时点击“提交对比”,提示先添加节点且不调接口', async () => {
|
||||
const { wrapper } = await mountPage()
|
||||
toOutline.mockReturnValue('只有一个根')
|
||||
|
||||
const submit = wrapper.findAll('button').find((b) => b.text().trim() === '提交对比')!
|
||||
await submit.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
const { ElMessage: Msg } = await import('element-plus')
|
||||
expect(Msg.warning).toHaveBeenCalledWith('请先在回忆导图中添加节点(选中节点后按 Tab 加子节点)')
|
||||
expect(recallCompare).not.toHaveBeenCalled()
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,150 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import StartTask from '@/components/StartTask.vue'
|
||||
import {
|
||||
continueSession,
|
||||
endSession,
|
||||
getActiveSession,
|
||||
getExpectation,
|
||||
getReportDraft,
|
||||
getSessionDetail,
|
||||
pauseSession,
|
||||
startOrContinueStudySession,
|
||||
} from '@/api/studySessions'
|
||||
import { getFragmentsBySession } from '@/api/reportFragments'
|
||||
|
||||
vi.mock('@/api/studySessions', () => ({
|
||||
abortSession: vi.fn(),
|
||||
continueSession: vi.fn(),
|
||||
endSession: vi.fn(),
|
||||
getActiveSession: vi.fn(),
|
||||
getExpectation: vi.fn(),
|
||||
getReportDraft: vi.fn(),
|
||||
getSessionDetail: vi.fn(),
|
||||
getTaskFragments: vi.fn(),
|
||||
getTaskReports: vi.fn(),
|
||||
pauseSession: vi.fn(),
|
||||
startOrContinueStudySession: vi.fn(),
|
||||
upsertExpectation: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/api/reportFragments', () => ({
|
||||
createFragments: vi.fn(),
|
||||
getFragmentsBySession: vi.fn(),
|
||||
updateFragments: vi.fn(),
|
||||
}))
|
||||
|
||||
const sessionOngoing = {
|
||||
sessionNum: 'SESSION_001',
|
||||
sessionState: 'ONGOING',
|
||||
taskName: '测试任务',
|
||||
taskNum: 'T001',
|
||||
taskId: 1,
|
||||
startTime: '2026-08-27 10:00:00',
|
||||
endTime: '',
|
||||
lastStartTime: '2026-08-27 10:00:00',
|
||||
actualTime: 0,
|
||||
effectiveTime: 0,
|
||||
effectivenessRatio: '--',
|
||||
pointerPosition: 1_500_000,
|
||||
systemMessage: '',
|
||||
}
|
||||
|
||||
const ok = (data: any = null) => ({ code: 200, message: '请求成功', data })
|
||||
|
||||
/**
|
||||
* 交互式集成测试:真实挂载 StartTask(不 shallow),
|
||||
* 通过 trigger('click') 模拟“暂停 → 开始”完整用户流,断言 DOM 状态与 API 调用序列。
|
||||
*/
|
||||
describe('StartTask 交互流程(集成)', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
localStorage.clear()
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
|
||||
vi.mocked(getActiveSession).mockResolvedValue(ok(null))
|
||||
vi.mocked(startOrContinueStudySession).mockResolvedValue(ok(sessionOngoing))
|
||||
vi.mocked(getExpectation).mockResolvedValue(ok({ description: '本次学习预期' }))
|
||||
vi.mocked(getFragmentsBySession).mockResolvedValue(ok([]))
|
||||
vi.mocked(pauseSession).mockResolvedValue(ok())
|
||||
vi.mocked(continueSession).mockResolvedValue(ok())
|
||||
})
|
||||
|
||||
const mountPage = async () => {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [
|
||||
{ path: '/start-task/:taskNum', component: StartTask },
|
||||
{ path: '/study', component: { template: '<div />' } },
|
||||
],
|
||||
})
|
||||
await router.push('/start-task/T001')
|
||||
await router.isReady()
|
||||
|
||||
const wrapper = mount(StartTask, {
|
||||
global: {
|
||||
plugins: [ElementPlus, router],
|
||||
// el-tag 在 jsdom + VTU 下 vnode mounted 钩子崩溃(EP 2.8 已知问题),纯视觉组件,stub 掉
|
||||
stubs: { ElTag: true },
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
return { wrapper, router }
|
||||
}
|
||||
|
||||
const findButton = (wrapper: any, text: string) =>
|
||||
wrapper.findAll('button').find((b: any) => b.text().trim() === text)
|
||||
|
||||
it('进行中的会话:点击“暂停”同步后端状态,再点“开始”触发 continue 并恢复进行中', async () => {
|
||||
// 暂停后从详情接口同步回 PAUSED 状态
|
||||
vi.mocked(getSessionDetail).mockResolvedValue(
|
||||
ok({ ...sessionOngoing, sessionState: 'PAUSED', actualTime: 10, effectiveTime: 20 }),
|
||||
)
|
||||
|
||||
const { wrapper } = await mountPage()
|
||||
expect(wrapper.find('.status-text').text()).toContain('进行中')
|
||||
|
||||
// 点击暂停:调用 pause API,页面状态变为已暂停
|
||||
const pauseBtn = findButton(wrapper, '暂停')
|
||||
expect(pauseBtn).toBeTruthy()
|
||||
await pauseBtn.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(pauseSession).toHaveBeenCalledWith('SESSION_001')
|
||||
expect(wrapper.find('.status-text').text()).toContain('已暂停')
|
||||
|
||||
// 点击开始:会话为 PAUSED,应触发 continue API 并恢复进行中
|
||||
const startBtn = findButton(wrapper, '开始')
|
||||
expect(startBtn).toBeTruthy()
|
||||
await startBtn.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(continueSession).toHaveBeenCalledWith('SESSION_001')
|
||||
expect(wrapper.find('.status-text').text()).toContain('进行中')
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('点击“结束会话”打开总结弹窗,无内容时确认结束被拦截', async () => {
|
||||
const { wrapper } = await mountPage()
|
||||
|
||||
const endBtn = findButton(wrapper, '结束会话')
|
||||
await endBtn.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
// 总结弹窗出现(无残片 → 不触发 AI 草稿等待)
|
||||
expect(wrapper.text()).toContain('结束会话总结')
|
||||
expect(getReportDraft).not.toHaveBeenCalled()
|
||||
|
||||
// 总结内容为空时点击确认结束:弹警示、不调接口
|
||||
const confirmEnd = findButton(wrapper, '确认结束')
|
||||
await confirmEnd.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
const { ElMessage } = await import('element-plus')
|
||||
expect(ElMessage.warning).toHaveBeenCalledWith('请输入学习总结内容')
|
||||
expect(endSession).not.toHaveBeenCalled()
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import ElementPlus, { ElMessage } from 'element-plus'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import TaskForm from '@/components/TaskForm.vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
vi.mock('@/utils/request', () => ({
|
||||
default: {
|
||||
get: vi.fn().mockResolvedValue({ code: 200, data: null }),
|
||||
post: vi.fn(),
|
||||
put: vi.fn().mockResolvedValue({ code: 200, data: null }),
|
||||
del: vi.fn().mockResolvedValue({ code: 200, data: null }),
|
||||
},
|
||||
}))
|
||||
|
||||
const mockedPost = vi.mocked(request.post)
|
||||
|
||||
/**
|
||||
* 交互式集成测试:真实挂载 TaskForm(add 模式),
|
||||
* 填写任务名称 → 点击“添加”提交 → 断言请求载荷、成功提示与路由跳转。
|
||||
*/
|
||||
describe('TaskForm 交互流程(集成)', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
localStorage.clear()
|
||||
localStorage.setItem('isLoggedIn', 'true')
|
||||
})
|
||||
|
||||
const mountAddForm = async () => {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/add-task',
|
||||
name: 'add-task',
|
||||
component: TaskForm,
|
||||
meta: { requiresAuth: true, title: '创建学习任务', action: 'add', buttonText: '添加' },
|
||||
},
|
||||
{ path: '/study', name: 'study', component: { template: '<div />' } },
|
||||
],
|
||||
})
|
||||
await router.push('/add-task')
|
||||
await router.isReady()
|
||||
|
||||
const wrapper = mount(TaskForm, {
|
||||
global: {
|
||||
plugins: [ElementPlus, router],
|
||||
// el-tag 在 jsdom + VTU 下 vnode mounted 钩子崩溃(EP 2.8 已知问题),纯视觉组件,stub 掉
|
||||
stubs: { ElTag: true },
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
return { wrapper, router }
|
||||
}
|
||||
|
||||
it('填写任务名称后点击“添加”,提交 POST /tasks 并跳转学习任务页', async () => {
|
||||
mockedPost.mockResolvedValue({ code: 200, data: null } as any)
|
||||
const { wrapper, router } = await mountAddForm()
|
||||
|
||||
const nameInput = wrapper.find('input[placeholder="例如:Vue3 组件通信实践"]')
|
||||
expect(nameInput.exists()).toBe(true)
|
||||
await nameInput.setValue('集成测试任务')
|
||||
|
||||
const submit = wrapper.findAll('button').find((b) => b.text().trim() === '添加')!
|
||||
expect(submit).toBeTruthy()
|
||||
await submit.trigger('click')
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(mockedPost).toHaveBeenCalledWith(
|
||||
'/tasks',
|
||||
expect.objectContaining({
|
||||
taskName: '集成测试任务',
|
||||
taskDescription: '',
|
||||
materialUrl: '',
|
||||
}),
|
||||
)
|
||||
expect(ElMessage.success).toHaveBeenCalledWith('创建任务成功')
|
||||
expect(router.currentRoute.value.path).toBe('/study')
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('优先级维度区块展示取值范围与各维度含义说明', async () => {
|
||||
const { wrapper } = await mountAddForm()
|
||||
|
||||
const hint = wrapper.find('.priority-hint')
|
||||
expect(hint.exists()).toBe(true)
|
||||
expect(hint.text()).toContain('取值范围均为 0')
|
||||
expect(hint.text()).toContain('紧急性代表时间压力')
|
||||
expect(hint.text()).toContain('主观优先级是你的直觉判断')
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('后端返回失败时提示错误、不跳转', async () => {
|
||||
mockedPost.mockResolvedValue({ code: 500, message: '任务名称重复' } as any)
|
||||
const { wrapper, router } = await mountAddForm()
|
||||
|
||||
await wrapper.find('input[placeholder="例如:Vue3 组件通信实践"]').setValue('重复任务')
|
||||
const submit = wrapper.findAll('button').find((b) => b.text().trim() === '添加')!
|
||||
await submit.trigger('click')
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(ElMessage.error).toHaveBeenCalledWith('任务创建失败:任务名称重复')
|
||||
expect(router.currentRoute.value.path).toBe('/add-task')
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import {
|
||||
BASE_SPEED_PX_PER_SEC,
|
||||
MAX_REPEAT_COUNT,
|
||||
MAX_SPEED_PX_PER_SEC,
|
||||
MIN_REPEAT_COUNT,
|
||||
MIN_SPEED_PX_PER_SEC,
|
||||
NARROW_SPEED_FACTOR,
|
||||
clampAutoScrollTime,
|
||||
getRepeatCount,
|
||||
getScrollSpeedPxPerSec,
|
||||
measureAutoScroll,
|
||||
pxToTimeOffset,
|
||||
} from '@/utils/autoScroll'
|
||||
|
||||
const DESKTOP = 1440
|
||||
|
||||
describe('getScrollSpeedPxPerSec', () => {
|
||||
it('桌面端使用基准速度', () => {
|
||||
expect(getScrollSpeedPxPerSec(DESKTOP)).toBe(BASE_SPEED_PX_PER_SEC)
|
||||
})
|
||||
|
||||
it('正好 768px 属于手机端,769px 回到桌面速度', () => {
|
||||
expect(getScrollSpeedPxPerSec(768)).toBeCloseTo(BASE_SPEED_PX_PER_SEC * NARROW_SPEED_FACTOR)
|
||||
expect(getScrollSpeedPxPerSec(769)).toBe(BASE_SPEED_PX_PER_SEC)
|
||||
})
|
||||
|
||||
it('手机端是桌面速度的固定倍数', () => {
|
||||
const narrow = getScrollSpeedPxPerSec(375)
|
||||
expect(narrow).toBeCloseTo(BASE_SPEED_PX_PER_SEC * NARROW_SPEED_FACTOR)
|
||||
expect(narrow).toBeLessThan(getScrollSpeedPxPerSec(DESKTOP))
|
||||
})
|
||||
|
||||
it('桌面速度始终夹在上下限内', () => {
|
||||
;[0, 769, 1024, 1440, 2560].forEach(width => {
|
||||
const speed = getScrollSpeedPxPerSec(width)
|
||||
expect(speed).toBeGreaterThanOrEqual(MIN_SPEED_PX_PER_SEC)
|
||||
expect(speed).toBeLessThanOrEqual(MAX_SPEED_PX_PER_SEC)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('measureAutoScroll', () => {
|
||||
it('一轮距离为单份内容宽度,时长由恒速换算', () => {
|
||||
// 单份 2000px;60px/s → 33.3s
|
||||
const metrics = measureAutoScroll(2000, DESKTOP)
|
||||
expect(metrics).not.toBeNull()
|
||||
expect(metrics!.loopWidth).toBe(2000)
|
||||
expect(metrics!.speed).toBe(BASE_SPEED_PX_PER_SEC)
|
||||
expect(metrics!.duration).toBeCloseTo((2000 / BASE_SPEED_PX_PER_SEC) * 1000)
|
||||
})
|
||||
|
||||
it('速度恒定:内容量翻倍只改变时长,不改变速度', () => {
|
||||
const few = measureAutoScroll(2000, DESKTOP)!
|
||||
const many = measureAutoScroll(20000, DESKTOP)!
|
||||
expect(few.speed).toBe(many.speed)
|
||||
expect(many.duration / few.duration).toBeCloseTo(10)
|
||||
})
|
||||
|
||||
it('内容为空或宽度异常时返回 null', () => {
|
||||
expect(measureAutoScroll(0, DESKTOP)).toBeNull()
|
||||
expect(measureAutoScroll(-100, DESKTOP)).toBeNull()
|
||||
expect(measureAutoScroll(Number.NaN, DESKTOP)).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('getRepeatCount', () => {
|
||||
it('内容再多也用最少两份', () => {
|
||||
expect(getRepeatCount(5000, 1000)).toBe(MIN_REPEAT_COUNT)
|
||||
})
|
||||
|
||||
it('内容比轨道窄时补足到能铺满并预留衔接份', () => {
|
||||
// 单份 300px、轨道 1000px:ceil(1000/300)+1 = 5
|
||||
expect(getRepeatCount(300, 1000)).toBe(5)
|
||||
// 刚好铺满也要多一份用于衔接
|
||||
expect(getRepeatCount(1000, 1000)).toBe(2)
|
||||
})
|
||||
|
||||
it('份数不超过上限', () => {
|
||||
expect(getRepeatCount(1, 100000)).toBe(MAX_REPEAT_COUNT)
|
||||
})
|
||||
|
||||
it('宽度非法时回退到最少份数', () => {
|
||||
expect(getRepeatCount(0, 1000)).toBe(MIN_REPEAT_COUNT)
|
||||
expect(getRepeatCount(Number.NaN, 1000)).toBe(MIN_REPEAT_COUNT)
|
||||
expect(getRepeatCount(300, 0)).toBe(MIN_REPEAT_COUNT)
|
||||
})
|
||||
|
||||
it('measureAutoScroll 会带上份数', () => {
|
||||
expect(measureAutoScroll(300, 1000)!.repeatCount).toBe(5)
|
||||
})
|
||||
})
|
||||
|
||||
describe('pxToTimeOffset', () => {
|
||||
it('按速度把位移换算成时间', () => {
|
||||
expect(pxToTimeOffset(BASE_SPEED_PX_PER_SEC, BASE_SPEED_PX_PER_SEC)).toBe(1000)
|
||||
expect(pxToTimeOffset(30, 60)).toBe(500)
|
||||
})
|
||||
|
||||
it('速度为 0 或参数非法时返回 0', () => {
|
||||
expect(pxToTimeOffset(100, 0)).toBe(0)
|
||||
expect(pxToTimeOffset(Number.NaN, 60)).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('clampAutoScrollTime', () => {
|
||||
it('夹在 0 与一轮时长之间', () => {
|
||||
expect(clampAutoScrollTime(-500, 1000)).toBe(0)
|
||||
expect(clampAutoScrollTime(1500, 1000)).toBe(1000)
|
||||
expect(clampAutoScrollTime(400, 1000)).toBe(400)
|
||||
})
|
||||
|
||||
it('参数非法时归零', () => {
|
||||
expect(clampAutoScrollTime(Number.NaN, 1000)).toBe(0)
|
||||
expect(clampAutoScrollTime(100, 0)).toBe(0)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { formatRatio } from '@/utils/format'
|
||||
|
||||
describe('formatRatio', () => {
|
||||
it('把 0~1 的比率格式化为一位小数的百分比', () => {
|
||||
expect(formatRatio(0.8)).toBe('80.0%')
|
||||
expect(formatRatio(0.8571)).toBe('85.7%')
|
||||
expect(formatRatio(1)).toBe('100.0%')
|
||||
expect(formatRatio(0)).toBe('0.0%')
|
||||
})
|
||||
|
||||
it('兼容后端返回字符串形式的比率', () => {
|
||||
expect(formatRatio('0.8')).toBe('80.0%')
|
||||
})
|
||||
|
||||
it('空值与非法值统一显示 "-"', () => {
|
||||
expect(formatRatio()).toBe('-')
|
||||
expect(formatRatio(null)).toBe('-')
|
||||
expect(formatRatio('')).toBe('-')
|
||||
expect(formatRatio('abc')).toBe('-')
|
||||
})
|
||||
})
|
||||
@@ -1,12 +1,15 @@
|
||||
// src/api/reportFragments.ts
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 残片生成走 AI 聚合,耗时较长,放宽到 5 分钟(默认全局 30s)
|
||||
const AI_TIMEOUT = { timeout: 300_000 };
|
||||
|
||||
export const createFragments = (sessionNum: string, content: string) => {
|
||||
return request.post(`/report-fragments`, {sessionNum, content})
|
||||
return request.post(`/report-fragments`, { sessionNum, content }, AI_TIMEOUT)
|
||||
}
|
||||
|
||||
export const updateFragments = (id: number, content: string) => {
|
||||
return request.put(`/report-fragments/${id}`, {content})
|
||||
return request.put(`/report-fragments/${id}`, { content })
|
||||
}
|
||||
|
||||
export const getFragmentsBySession = (sessionNum: string) => {
|
||||
|
||||
+3
-3
@@ -24,15 +24,15 @@ export interface ReviewTaskStats {
|
||||
}
|
||||
|
||||
export const getReviewFeed = (limit: number = 30, mode: "recent" | "random" | "smart" = "recent") => {
|
||||
return request.get("/review/feed", { limit, mode });
|
||||
return request.get<ReviewFeedItem[]>("/review/feed", { limit, mode });
|
||||
};
|
||||
|
||||
export const getReviewTaskStats = () => {
|
||||
return request.get("/review/tasks");
|
||||
return request.get<ReviewTaskStats[]>("/review/tasks");
|
||||
};
|
||||
|
||||
export const getReviewTaskStatsByTask = (taskNum: string) => {
|
||||
return request.get(`/review/tasks/${taskNum}`);
|
||||
return request.get<ReviewTaskStats>(`/review/tasks/${taskNum}`);
|
||||
};
|
||||
|
||||
export const getReportDetail = (id: number) => {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import request from "@/utils/request";
|
||||
import type { ApiResponse } from "@/utils/request";
|
||||
|
||||
// ============ 标准思维导图 ============
|
||||
|
||||
@@ -31,14 +32,17 @@ export interface RecallRecord {
|
||||
createdTime: string;
|
||||
}
|
||||
|
||||
/** 获取/自动生成标准思维导图 */
|
||||
// AI 聚合类接口耗时较长,统一放宽到 5 分钟(默认全局 30s)
|
||||
const AI_TIMEOUT = { timeout: 300_000 };
|
||||
|
||||
/** 获取/自动生成标准思维导图(首次访问会触发 AI 生成) */
|
||||
export const getStandardMindMap = (taskNum: string) => {
|
||||
return request.get(`/review/standard-mind-map/${taskNum}`);
|
||||
return request.get<StandardMindMap>(`/review/standard-mind-map/${taskNum}`, {}, AI_TIMEOUT);
|
||||
};
|
||||
|
||||
/** 强制重新生成标准思维导图(全量或增量) */
|
||||
export const regenerateStandardMindMap = (taskNum: string, mode: "full" | "incremental" = "full") => {
|
||||
return request.post(`/review/standard-mind-map/${taskNum}/regenerate?mode=${mode}`);
|
||||
return request.post<StandardMindMap>(`/review/standard-mind-map/${taskNum}/regenerate?mode=${mode}`, null, AI_TIMEOUT);
|
||||
};
|
||||
|
||||
/** 用户编辑标准思维导图(大纲文本) */
|
||||
@@ -47,18 +51,22 @@ export const updateStandardMindMap = (taskNum: string, outline: string) => {
|
||||
};
|
||||
|
||||
/** 用户提交回忆大纲,与标准导图对比(可选指定起始节点路径) */
|
||||
export const recallCompare = (taskNum: string, recallOutline: string, focusPath?: string) => {
|
||||
export const recallCompare = (
|
||||
taskNum: string,
|
||||
recallOutline: string,
|
||||
focusPath?: string,
|
||||
): Promise<ApiResponse<StandardMindMap>> => {
|
||||
const body: Record<string, any> = { recallOutline };
|
||||
if (focusPath) body.focusPath = focusPath;
|
||||
return request.post(`/review/standard-mind-map/${taskNum}/recall`, body);
|
||||
return request.post(`/review/standard-mind-map/${taskNum}/recall`, body, AI_TIMEOUT);
|
||||
};
|
||||
|
||||
/** 在标准导图中查找与内容最匹配的节点 */
|
||||
export const findNode = (taskNum: string, content: string) => {
|
||||
return request.post(`/review/standard-mind-map/${taskNum}/find-node`, { content });
|
||||
return request.post<{ path: string }>(`/review/standard-mind-map/${taskNum}/find-node`, { content });
|
||||
};
|
||||
|
||||
/** 获取该任务的所有回忆对比记录 */
|
||||
export const listRecallRecords = (taskNum: string) => {
|
||||
return request.get(`/review/standard-mind-map/${taskNum}/recall-records`);
|
||||
return request.get<RecallRecord[]>(`/review/standard-mind-map/${taskNum}/recall-records`);
|
||||
};
|
||||
|
||||
+52
-12
@@ -1,6 +1,40 @@
|
||||
// src/api/studySession.ts
|
||||
// src/api/studySessions.ts
|
||||
import request from "@/utils/request";
|
||||
|
||||
/** 学习会话详情(start-or-continue / detail 接口返回的会话核心字段) */
|
||||
export interface SessionDetail {
|
||||
sessionNum: string;
|
||||
sessionState: "ONGOING" | "PAUSED" | "ENDED";
|
||||
taskNum: string;
|
||||
taskId: number;
|
||||
taskName?: string;
|
||||
materialUrl?: string;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
lastStartTime?: string;
|
||||
actualTime?: number;
|
||||
effectiveTime?: number;
|
||||
effectivenessRatio?: number | string;
|
||||
pointerPosition?: number;
|
||||
systemMessage?: string;
|
||||
}
|
||||
|
||||
/** 当前活跃会话摘要(跨页面恢复用) */
|
||||
export interface ActiveSessionInfo {
|
||||
taskNum: string;
|
||||
sessionNum: string;
|
||||
taskName?: string;
|
||||
}
|
||||
|
||||
/** 后端 MyBatis-Plus 分页包装 */
|
||||
export interface PagedResult<T> {
|
||||
records: T[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
// AI 聚合类接口耗时较长,统一放宽到 5 分钟(默认全局 30s)
|
||||
const AI_TIMEOUT = { timeout: 300_000 };
|
||||
|
||||
export const continueSession = (sessionNum: string) => {
|
||||
return request.post(`/study-sessions/${sessionNum}/study-sessions/continue`);
|
||||
};
|
||||
@@ -10,21 +44,27 @@ export const pauseSession = (sessionNum: string, endTime?: Date) => {
|
||||
return request.post(`/study-sessions/${sessionNum}/study-sessions/pause`, null, { params });
|
||||
};
|
||||
|
||||
/** 结束会话会触发后端报告生成,耗时较长 */
|
||||
export const endSession = (sessionNum: string, content: string = "任务结束") => {
|
||||
return request.post(`/study-sessions/${sessionNum}/study-sessions/ended`, { content });
|
||||
return request.post(`/study-sessions/${sessionNum}/study-sessions/ended`, { content }, AI_TIMEOUT);
|
||||
};
|
||||
|
||||
/** 误操作结束学习会话:需输入确认语,严格零数据关闭(删除会话与预期) */
|
||||
export const abortSession = (sessionNum: string, confirmation: string) => {
|
||||
return request.post(`/study-sessions/${sessionNum}/study-sessions/abort`, { confirmation });
|
||||
};
|
||||
|
||||
export const startOrContinueStudySession = (taskNum: string) => {
|
||||
return request.get(`/tasks/${taskNum}/study-sessions/start-or-continue`);
|
||||
return request.get<SessionDetail>(`/tasks/${taskNum}/study-sessions/start-or-continue`);
|
||||
};
|
||||
|
||||
export const getSessionDetail = (sessionNum: string) => {
|
||||
return request.get(`/study-sessions/${sessionNum}`);
|
||||
return request.get<SessionDetail>(`/study-sessions/${sessionNum}`);
|
||||
};
|
||||
|
||||
/** 获取会话的学习预期 */
|
||||
export const getExpectation = (sessionNum: string) => {
|
||||
return request.get(`/study-sessions/${sessionNum}/expectation`);
|
||||
return request.get<{ description: string } | null>(`/study-sessions/${sessionNum}/expectation`);
|
||||
};
|
||||
|
||||
/** 创建/更新会话的学习预期 */
|
||||
@@ -32,28 +72,28 @@ export const upsertExpectation = (sessionNum: string, description: string) => {
|
||||
return request.put(`/study-sessions/${sessionNum}/expectation`, { description });
|
||||
};
|
||||
|
||||
/** 获取报告草稿(AI 聚合残片,不可用时为拼接) */
|
||||
/** 获取报告草稿(AI 聚合残片,不可用时为拼接),生成失败不阻塞手写总结 */
|
||||
export const getReportDraft = (sessionNum: string) => {
|
||||
return request.get(`/study-sessions/${sessionNum}/report-draft`);
|
||||
return request.get<string>(`/study-sessions/${sessionNum}/report-draft`, {}, AI_TIMEOUT);
|
||||
};
|
||||
|
||||
/** 查询当前是否有活跃会话 */
|
||||
export const getActiveSession = (excludeTaskNum?: string) => {
|
||||
const params: Record<string, any> = {};
|
||||
if (excludeTaskNum) params.excludeTaskNum = excludeTaskNum;
|
||||
return request.get('/study-sessions/active', params);
|
||||
return request.get<ActiveSessionInfo | null>('/study-sessions/active', params);
|
||||
};
|
||||
|
||||
/** 分页查询任务的历史残片 */
|
||||
export const getTaskFragments = (taskNum: string, page: number, size: number, keyword?: string) => {
|
||||
export const getTaskFragments = <T = any>(taskNum: string, page: number, size: number, keyword?: string) => {
|
||||
const params: Record<string, any> = { page, size };
|
||||
if (keyword) params.keyword = keyword;
|
||||
return request.get(`/study-sessions/tasks/${taskNum}/fragments`, params);
|
||||
return request.get<PagedResult<T>>(`/study-sessions/tasks/${taskNum}/fragments`, params);
|
||||
};
|
||||
|
||||
/** 分页查询任务的历史报告 */
|
||||
export const getTaskReports = (taskNum: string, page: number, size: number, keyword?: string) => {
|
||||
export const getTaskReports = <T = any>(taskNum: string, page: number, size: number, keyword?: string) => {
|
||||
const params: Record<string, any> = { page, size };
|
||||
if (keyword) params.keyword = keyword;
|
||||
return request.get(`/study-sessions/tasks/${taskNum}/reports`, params);
|
||||
return request.get<PagedResult<T>>(`/study-sessions/tasks/${taskNum}/reports`, params);
|
||||
};
|
||||
|
||||
+5
-5
@@ -12,7 +12,7 @@ export interface TaskApplication {
|
||||
}
|
||||
|
||||
export const getTaskApplications = (taskNum: string) => {
|
||||
return request.get(`/tasks/${taskNum}/applications`);
|
||||
return request.get<TaskApplication[]>(`/tasks/${taskNum}/applications`);
|
||||
};
|
||||
|
||||
export const createTaskApplication = (
|
||||
@@ -24,7 +24,7 @@ export const createTaskApplication = (
|
||||
status?: TaskApplication["status"];
|
||||
},
|
||||
) => {
|
||||
return request.post(`/tasks/${taskNum}/applications`, payload);
|
||||
return request.post<TaskApplication>(`/tasks/${taskNum}/applications`, payload);
|
||||
};
|
||||
|
||||
export const updateTaskApplication = (
|
||||
@@ -36,7 +36,7 @@ export const updateTaskApplication = (
|
||||
status?: TaskApplication["status"];
|
||||
},
|
||||
) => {
|
||||
return request.put(`/tasks/applications/${id}`, payload);
|
||||
return request.put<TaskApplication>(`/tasks/applications/${id}`, payload);
|
||||
};
|
||||
|
||||
export const deleteTaskApplication = (id: number) => {
|
||||
@@ -54,10 +54,10 @@ export interface PriorityWeights {
|
||||
}
|
||||
|
||||
export const getPriorityWeights = () => {
|
||||
return request.get("/tasks/priority-weights");
|
||||
return request.get<PriorityWeights>("/tasks/priority-weights");
|
||||
};
|
||||
|
||||
/** 保存权重配置并触发全部任务优先级重算 */
|
||||
export const savePriorityWeights = (weights: PriorityWeights) => {
|
||||
return request.put("/tasks/priority-weights", weights);
|
||||
return request.put<PriorityWeights>("/tasks/priority-weights", weights);
|
||||
};
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
:root {
|
||||
--green-900: #123d2d;
|
||||
--green-800: #1a5a42;
|
||||
--green-700: #237556;
|
||||
--green-600: #2f8f68;
|
||||
--green-500: #43a879;
|
||||
--green-200: #d9f1e5;
|
||||
--green-100: #eef9f3;
|
||||
--surface: #f7fbf8;
|
||||
--surface-strong: #ffffff;
|
||||
--text-primary: #1b2a23;
|
||||
--text-secondary: #4b6156;
|
||||
--border-soft: #d6e6dc;
|
||||
--shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
|
||||
--shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
|
||||
radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
|
||||
linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
|
||||
font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
+107
-1
@@ -1,4 +1,84 @@
|
||||
@import "./base.css";
|
||||
:root {
|
||||
--green-900: #123d2d;
|
||||
--green-800: #1a5a42;
|
||||
--green-700: #237556;
|
||||
--green-600: #2f8f68;
|
||||
--green-500: #43a879;
|
||||
--green-100: #eef9f3;
|
||||
--surface: #f7fbf8;
|
||||
--surface-strong: #ffffff;
|
||||
--text-primary: #1b2a23;
|
||||
--text-secondary: #4b6156;
|
||||
--border-soft: #d6e6dc;
|
||||
--shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
|
||||
--shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);
|
||||
|
||||
/* 残片/提醒语义色(对应 EP warning 色系,避免各组件硬编码) */
|
||||
--accent-warning: #e6a23c;
|
||||
--accent-warning-soft: #fff8e1;
|
||||
--accent-warning-strong: #b8860b;
|
||||
/* 成功/命中语义的浅底与深字(统计卡片、标签共用) */
|
||||
--accent-success-soft: #e8f5e9;
|
||||
--accent-success-softer: #f1f8e9;
|
||||
--accent-success-strong: #2e7d32;
|
||||
--accent-success-text: #856404;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
|
||||
radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
|
||||
linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
|
||||
font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
* Element Plus 主题对齐
|
||||
*
|
||||
* EP 默认 success 是黄绿 #67c23a,与本站墨绿主题色相不一致,
|
||||
* 且白字压在其上对比度仅 2.24:1(低于 WCAG AA 4.5:1)。
|
||||
* 这里统一改写 EP 的 success / primary 色阶,使全站按钮、标签、
|
||||
* 开关等组件自动使用主题绿。
|
||||
*
|
||||
* 注意:本文件在 main.ts 中必须导入在 element-plus 样式之后,
|
||||
* 否则同特异度下会被 EP 默认值覆盖。
|
||||
* ------------------------------------------------------------------ */
|
||||
:root {
|
||||
/* primary 与 success 同源:本站正向语义统一走 success,primary 仅次级编辑 */
|
||||
--el-color-primary: var(--green-700);
|
||||
--el-color-primary-light-3: #4a8f74;
|
||||
--el-color-primary-light-5: #6ba98f;
|
||||
--el-color-primary-light-7: #9cc7b5;
|
||||
--el-color-primary-light-8: #bcd9cc;
|
||||
--el-color-primary-light-9: #eef9f3;
|
||||
--el-color-primary-dark-2: var(--green-800);
|
||||
|
||||
--el-color-success: var(--green-700);
|
||||
--el-color-success-light-3: #4a8f74;
|
||||
--el-color-success-light-5: #6ba98f;
|
||||
--el-color-success-light-7: #9cc7b5;
|
||||
--el-color-success-light-8: #bcd9cc;
|
||||
--el-color-success-light-9: #eef9f3;
|
||||
--el-color-success-dark-2: var(--green-800);
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
@@ -35,6 +115,32 @@ a:hover {
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
* 按钮尺寸收敛
|
||||
*
|
||||
* EP 默认 large / default / small 三档实测高度为 32 / 32 / 24px:
|
||||
* large 与 default 在视觉上无法区分,行内 small 的 24px 又低于触屏
|
||||
* 舒适点击区。这里保持两个视觉层级:
|
||||
* 主操作 large → 40px 高
|
||||
* 常规/行内 default、small → 至少 28px 高(保留 small 的紧凑感)
|
||||
* 字号统一 13px 上限,避免行内按钮字号过小(原为 12px)。
|
||||
* ------------------------------------------------------------------ */
|
||||
.el-button--large {
|
||||
--el-button-size: 40px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-button--small {
|
||||
--el-button-size: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-button--small.is-text,
|
||||
.el-button--small.is-link {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 按钮操作区统一规范:窄屏下操作按钮纵向全宽 */
|
||||
.action-row .el-button,
|
||||
.edit-actions .el-button,
|
||||
|
||||
@@ -82,7 +82,7 @@ const rendered = computed(() => {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
border-left: 3px solid var(--green-600, #2f8f68);
|
||||
background: #f1f8e9;
|
||||
background: var(--accent-success-softer);
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@@ -121,7 +121,7 @@ const rendered = computed(() => {
|
||||
}
|
||||
|
||||
.markdown-body :deep(th) {
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,6 +57,31 @@ const countAllDescendants = (node: MindMapTreeNode): number => {
|
||||
const COLOR_MATCHED = { background: "#c8e6c9", color: "#1b5e20" };
|
||||
const COLOR_MISSED = { background: "#ffcdd2", color: "#b71c1c" };
|
||||
|
||||
/**
|
||||
* 浅色主题:基于内置 Latte,画布/节点配色对齐全站薄荷绿主题(base.css 变量值)。
|
||||
* 注意:mind-elixir 主题只接受字面量,不能引用 CSS 变量,此处保留字面量。
|
||||
*/
|
||||
const LPT_LIGHT_THEME = {
|
||||
...MindElixir.THEME,
|
||||
name: "LPT Light",
|
||||
palette: ["#237556", "#2f8f68", "#43a879", "#1a5a42", "#5cb88a", "#7cc9a3"],
|
||||
cssVar: {
|
||||
...MindElixir.THEME.cssVar,
|
||||
"--bgcolor": "#f7fbf8",
|
||||
"--color": "#4b6156",
|
||||
"--root-bgcolor": "#237556",
|
||||
"--root-color": "#ffffff",
|
||||
"--main-color": "#1b2a23",
|
||||
"--main-bgcolor": "#ffffff",
|
||||
"--main-bgcolor-transparent": "rgba(255, 255, 255, 0.85)",
|
||||
"--selected": "#43a879",
|
||||
"--accent-color": "#237556",
|
||||
"--panel-color": "#1b2a23",
|
||||
"--panel-bgcolor": "#ffffff",
|
||||
"--panel-border-color": "#d6e6dc",
|
||||
},
|
||||
};
|
||||
|
||||
const compareStatus = (notes?: string): "MATCHED" | "MISSED" | null => {
|
||||
if (!notes) return null;
|
||||
if (notes.startsWith("MATCHED|")) return "MATCHED";
|
||||
@@ -149,6 +174,7 @@ const render = () => {
|
||||
contextMenu: !!props.editable,
|
||||
toolBar: true,
|
||||
keypress: !!props.editable,
|
||||
theme: LPT_LIGHT_THEME,
|
||||
});
|
||||
instance.init(toElixirData(props.tree));
|
||||
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
v-if="showBackButton"
|
||||
text
|
||||
class="back-btn"
|
||||
@click="router.push('/welcome')"
|
||||
@click="goBack"
|
||||
>
|
||||
← 返回首页
|
||||
← {{ backLabel }}
|
||||
</el-button>
|
||||
<template v-if="pageTitle">
|
||||
<h1 class="head-title">{{ pageTitle }}</h1>
|
||||
@@ -39,8 +39,21 @@ const route = useRoute();
|
||||
const isLoginRoute = computed(() => route.path === "/login");
|
||||
const showBackButton = computed(() => route.path !== "/login" && route.path !== "/welcome");
|
||||
const pageTitle = computed(() => route.meta?.title as string | undefined);
|
||||
// 返回目标由路由 meta 声明,未声明时回首页
|
||||
const backTo = computed(() => (route.meta?.backTo as string | undefined) || "/welcome");
|
||||
const backLabel = computed(() => (route.meta?.backLabel as string | undefined) || "返回首页");
|
||||
// 有多个入口的页面(如复习详情)优先回到用户来路,无历史时回退到声明的上级
|
||||
const backUseHistory = computed(() => route.meta?.backUseHistory === true);
|
||||
const loggingOut = ref(false);
|
||||
|
||||
const goBack = () => {
|
||||
if (backUseHistory.value && window.history.state?.back) {
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
router.push(backTo.value);
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
if (loggingOut.value) return;
|
||||
loggingOut.value = true;
|
||||
@@ -58,7 +71,7 @@ const handleLogout = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ isLoginRoute, showBackButton, pageTitle, loggingOut, handleLogout });
|
||||
defineExpose({ isLoginRoute, showBackButton, pageTitle, backTo, backLabel, loggingOut, goBack, handleLogout });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
+60
-18
@@ -9,6 +9,7 @@ import {
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const loadFailed = ref(false);
|
||||
const tasks = ref<ReviewTaskStats[]>([]);
|
||||
|
||||
const summary = computed(() => ({
|
||||
@@ -28,9 +29,13 @@ const formatEffectiveTime = (seconds: number | string): string => {
|
||||
|
||||
const loadTasks = async () => {
|
||||
loading.value = true;
|
||||
loadFailed.value = false;
|
||||
try {
|
||||
const res = await getReviewTaskStats();
|
||||
tasks.value = res?.data || [];
|
||||
} catch {
|
||||
// 请求层已提示具体错误,这里只保证不把失败当作空列表展示
|
||||
loadFailed.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -48,9 +53,8 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<section class="review-page">
|
||||
<div class="table-toolbar">
|
||||
<span class="toolbar-placeholder"></span>
|
||||
<el-button type="success" plain :loading="loading" @click="loadTasks">刷新</el-button>
|
||||
<div class="page-toolbar">
|
||||
<el-button :loading="loading" @click="loadTasks">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<div class="summary-grid">
|
||||
@@ -73,6 +77,12 @@ onMounted(() => {
|
||||
v-for="row in tasks"
|
||||
:key="row.taskNum"
|
||||
class="surface-card task-card"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
:aria-label="`查看 ${row.taskName} 的学习记录`"
|
||||
@click="openTaskReview(row)"
|
||||
@keydown.enter.prevent="openTaskReview(row)"
|
||||
@keydown.space.prevent="openTaskReview(row)"
|
||||
>
|
||||
<div class="task-head">
|
||||
<strong>{{ row.taskName }}</strong>
|
||||
@@ -84,27 +94,27 @@ onMounted(() => {
|
||||
<span>学习报告数量:{{ row.reportCount || 0 }}</span>
|
||||
<span>学习残片数量:{{ row.fragmentCount || 0 }}</span>
|
||||
</div>
|
||||
<!-- 卡片整体已可进详情,这里只保留「回忆复习」作为明确的主操作 -->
|
||||
<div class="task-actions">
|
||||
<el-button
|
||||
text
|
||||
type="success"
|
||||
size="small"
|
||||
@click="openTaskReview(row)"
|
||||
>
|
||||
查看记录
|
||||
</el-button>
|
||||
<span class="detail-hint">查看详情 →</span>
|
||||
<el-button
|
||||
class="recall-button"
|
||||
type="success"
|
||||
size="small"
|
||||
@click="router.push(`/review/recall/${row.taskNum}`)"
|
||||
@click.stop="router.push(`/review/recall/${row.taskNum}`)"
|
||||
>
|
||||
回忆复习
|
||||
</el-button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<el-empty v-if="!loading && tasks.length === 0" description="暂无复习任务" />
|
||||
<el-empty
|
||||
v-if="!loading && loadFailed"
|
||||
description="复习数据加载失败,请稍后重试"
|
||||
>
|
||||
<el-button type="success" plain @click="loadTasks">重新加载</el-button>
|
||||
</el-empty>
|
||||
<el-empty v-else-if="!loading && tasks.length === 0" description="暂无复习任务" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -115,7 +125,7 @@ onMounted(() => {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.table-toolbar {
|
||||
.page-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -154,6 +164,32 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.task-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--green-500, #43a879);
|
||||
box-shadow: var(--shadow-strong, var(--shadow-soft));
|
||||
}
|
||||
|
||||
.task-card:focus-visible {
|
||||
outline: 2px solid var(--green-700);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.detail-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.task-card:hover .detail-hint,
|
||||
.task-card:focus-visible .detail-hint {
|
||||
opacity: 1;
|
||||
color: var(--green-600);
|
||||
}
|
||||
|
||||
.task-head strong {
|
||||
@@ -174,9 +210,9 @@ onMounted(() => {
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -186,8 +222,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.task-actions .recall-button {
|
||||
order: -1;
|
||||
/* 窄屏只保留一个主操作,不需要纵向堆叠与顺序调整 */
|
||||
.task-actions {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.task-actions .el-button {
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,9 @@ import {
|
||||
type ReviewFeedItem,
|
||||
} from "@/api/review";
|
||||
import { getSessionDetail } from "@/api/studySessions";
|
||||
import type { SessionDetail } from "@/api/studySessions";
|
||||
import { updateFragments } from "@/api/reportFragments";
|
||||
import { formatRatio } from "@/utils/format";
|
||||
import { ElMessage } from "element-plus";
|
||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||
|
||||
@@ -42,14 +44,7 @@ const isEditing = ref(false);
|
||||
const editContent = ref("");
|
||||
const saving = ref(false);
|
||||
|
||||
const sessionInfo = ref<{
|
||||
taskName: string;
|
||||
sessionNum: string;
|
||||
actualTime?: number;
|
||||
effectiveTime?: number;
|
||||
effectivenessRatio?: number;
|
||||
startTime?: string;
|
||||
} | null>(null);
|
||||
const sessionInfo = ref<SessionDetail | null>(null);
|
||||
|
||||
const taskSessions = ref<{
|
||||
sessionNum: string;
|
||||
@@ -68,11 +63,6 @@ const formatDuration = (seconds?: number): string => {
|
||||
return `${s}秒`;
|
||||
};
|
||||
|
||||
const formatRatio = (ratio?: number): string => {
|
||||
if (ratio == null) return "-";
|
||||
return `${(ratio * 100).toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const loadTaskHistory = async (tn: string) => {
|
||||
try {
|
||||
const res = await getTaskReview(tn);
|
||||
@@ -402,7 +392,7 @@ watch(
|
||||
}
|
||||
|
||||
.history-session.is-current {
|
||||
background: #f1f8e9;
|
||||
background: var(--accent-success-softer);
|
||||
margin: 0 -10px;
|
||||
padding: 14px 10px;
|
||||
border-radius: 8px;
|
||||
@@ -456,7 +446,7 @@ watch(
|
||||
}
|
||||
|
||||
.clickable-text.active {
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
border-left: 3px solid var(--green-600);
|
||||
}
|
||||
|
||||
@@ -471,13 +461,13 @@ watch(
|
||||
}
|
||||
|
||||
.report-tag {
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
color: var(--green-700);
|
||||
}
|
||||
|
||||
.fragment-tag {
|
||||
background: #fff8e1;
|
||||
color: #b8860b;
|
||||
background: var(--accent-warning-soft);
|
||||
color: var(--accent-warning-strong);
|
||||
}
|
||||
|
||||
.edit-area {
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
} from "@/api/standardMindMap";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import MindMapViewer, { type MindMapTreeNode } from "@/components/MindMapViewer.vue";
|
||||
import { useElapsedSeconds } from "@/components/composables/useElapsedSeconds";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -21,12 +22,20 @@ const taskNum = computed(() => route.params.taskNum as string);
|
||||
const loading = ref(false);
|
||||
const standard = ref<StandardMindMap | null>(null);
|
||||
const comparing = ref(false);
|
||||
const comparingSeconds = ref(0);
|
||||
let comparingTimer: ReturnType<typeof setInterval> | null = null;
|
||||
const {
|
||||
seconds: comparingSeconds,
|
||||
start: startComparingTimer,
|
||||
stop: stopComparingTimer,
|
||||
} = useElapsedSeconds();
|
||||
|
||||
// 重新生成标准导图
|
||||
const regenerating = ref(false);
|
||||
const regeneratingSeconds = ref(0);
|
||||
let regeneratingTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const {
|
||||
seconds: regeneratingSeconds,
|
||||
start: startRegeneratingTimer,
|
||||
stop: stopRegeneratingTimer,
|
||||
} = useElapsedSeconds();
|
||||
const lastResult = ref<any>(null);
|
||||
const hasCompared = ref(false);
|
||||
|
||||
@@ -127,7 +136,7 @@ const loadData = async () => {
|
||||
// 匹配失败时仍可进入回忆页
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
} catch {
|
||||
standard.value = null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
@@ -201,8 +210,7 @@ const handleRegenerate = async () => {
|
||||
|
||||
// 开始生成
|
||||
regenerating.value = true;
|
||||
regeneratingSeconds.value = 0;
|
||||
regeneratingTimer = setInterval(() => { regeneratingSeconds.value++; }, 1000);
|
||||
startRegeneratingTimer();
|
||||
try {
|
||||
const res = await regenerateStandardMindMap(taskNum.value, mode);
|
||||
standard.value = res?.data || null;
|
||||
@@ -211,7 +219,7 @@ const handleRegenerate = async () => {
|
||||
ElMessage.error(e.message || "重新生成失败");
|
||||
} finally {
|
||||
regenerating.value = false;
|
||||
if (regeneratingTimer) { clearInterval(regeneratingTimer); regeneratingTimer = null; }
|
||||
stopRegeneratingTimer();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -223,8 +231,7 @@ const handleRecallCompare = async () => {
|
||||
return;
|
||||
}
|
||||
comparing.value = true;
|
||||
comparingSeconds.value = 0;
|
||||
comparingTimer = setInterval(() => { comparingSeconds.value++; }, 1000);
|
||||
startComparingTimer();
|
||||
try {
|
||||
const res = await recallCompare(taskNum.value, outline, focusPath.value || undefined);
|
||||
standard.value = res?.data || null;
|
||||
@@ -248,7 +255,7 @@ const handleRecallCompare = async () => {
|
||||
ElMessage.error(e.message || "对比失败");
|
||||
} finally {
|
||||
comparing.value = false;
|
||||
if (comparingTimer) { clearInterval(comparingTimer); comparingTimer = null; }
|
||||
stopComparingTimer();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -396,9 +403,9 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<section class="recall-page" v-loading="loading">
|
||||
<!-- 顶部操作栏 -->
|
||||
<!-- 顶部操作栏(页面标题由 MyHead 提供,这里只保留操作) -->
|
||||
<div class="page-header">
|
||||
<h2>回忆复习</h2>
|
||||
<span class="header-spacer"></span>
|
||||
<el-button :loading="historyLoading" @click="loadHistory">
|
||||
{{ showHistory ? "收起历史" : "历史记录" }}
|
||||
</el-button>
|
||||
@@ -512,7 +519,6 @@ onMounted(() => {
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="standardExpanded"
|
||||
type="warning"
|
||||
:loading="regenerating"
|
||||
@click="handleRegenerate"
|
||||
>
|
||||
@@ -624,11 +630,8 @@ onMounted(() => {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
color: var(--green-900);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.focus-confirm-text {
|
||||
@@ -650,7 +653,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);
|
||||
background: linear-gradient(135deg, var(--accent-success-softer) 0%, var(--accent-success-soft) 100%);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
@@ -669,8 +672,8 @@ onMounted(() => {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.highlight { color: #2e7d32; }
|
||||
.matched { color: #2e7d32; }
|
||||
.highlight { color: var(--accent-success-strong); }
|
||||
.matched { color: var(--accent-success-strong); }
|
||||
.missed { color: #c62828; }
|
||||
.extra { color: #1565c0; }
|
||||
|
||||
@@ -703,7 +706,7 @@ onMounted(() => {
|
||||
|
||||
.ai-waiting {
|
||||
font-size: 13px;
|
||||
color: #e6a23c;
|
||||
color: var(--accent-warning);
|
||||
margin: 4px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -715,7 +718,7 @@ onMounted(() => {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #f3d19e;
|
||||
border-top-color: #e6a23c;
|
||||
border-top-color: var(--accent-warning);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
@@ -844,7 +847,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background: #f1f8e9;
|
||||
background: var(--accent-success-softer);
|
||||
}
|
||||
|
||||
.history-time {
|
||||
@@ -884,12 +887,12 @@ onMounted(() => {
|
||||
|
||||
.start-guide {
|
||||
padding: 14px 22px;
|
||||
background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
|
||||
background: linear-gradient(135deg, var(--accent-warning-soft) 0%, #fff3cd 100%);
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #856404;
|
||||
color: var(--accent-success-text);
|
||||
}
|
||||
|
||||
.start-guide p {
|
||||
@@ -898,7 +901,7 @@ onMounted(() => {
|
||||
|
||||
.select-hint {
|
||||
font-size: 13px;
|
||||
color: #856404;
|
||||
color: var(--accent-success-text);
|
||||
margin: 0 0 8px;
|
||||
padding: 6px 12px;
|
||||
background: #fdf6ec;
|
||||
|
||||
+134
-155
@@ -5,6 +5,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import request from "@/utils/request";
|
||||
import { useTimer } from "@/components/composables/useTimer";
|
||||
import {
|
||||
abortSession,
|
||||
continueSession,
|
||||
endSession,
|
||||
getActiveSession,
|
||||
@@ -14,10 +15,13 @@ import {
|
||||
} from "@/api/studySessions";
|
||||
import { useStudyFragment } from "@/components/composables/fragment";
|
||||
import { getFragmentsBySession, updateFragments } from "@/api/reportFragments";
|
||||
import { getExpectation, getReportDraft, getTaskFragments, getTaskReports, upsertExpectation } from "@/api/studySessions";
|
||||
import router from "@/router";
|
||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { formatRatio } from "@/utils/format";
|
||||
import { useSessionHistory } from "@/components/composables/useSessionHistory";
|
||||
import { useSummaryReport } from "@/components/composables/useSummaryReport";
|
||||
import { useSessionExpectation } from "@/components/composables/useSessionExpectation";
|
||||
|
||||
const {
|
||||
fragmentsDialogVisible,
|
||||
@@ -31,19 +35,38 @@ const {
|
||||
const pageLoading = ref(true);
|
||||
const timerActionLoading = ref(false);
|
||||
const endingSession = ref(false);
|
||||
// 误操作结束(零数据关闭)
|
||||
const MISOPERATION_PHRASE = "我误操作导致开启了本次学习";
|
||||
const abortDialogVisible = ref(false);
|
||||
const abortConfirmation = ref("");
|
||||
const abortingSession = ref(false);
|
||||
const canAbortSession = computed(
|
||||
() => taskInfo.value.sessionState !== "ENDED" && fragmentsList.value.length === 0,
|
||||
);
|
||||
|
||||
const summaryDialogVisible = ref(false);
|
||||
const summaryContent = ref("");
|
||||
const summaryPreview = ref(false);
|
||||
const summaryLoading = ref(false);
|
||||
const summaryLoadingSeconds = ref(0);
|
||||
let summaryLoadingTimer: ReturnType<typeof setInterval> | null = null;
|
||||
// 结束会话总结弹窗(有残片时先取 AI 草稿,等待期间展示已等待秒数)
|
||||
const {
|
||||
summaryDialogVisible,
|
||||
summaryContent,
|
||||
summaryPreview,
|
||||
summaryLoading,
|
||||
summaryLoadingSeconds,
|
||||
openSummaryDialog,
|
||||
closeSummaryDialog,
|
||||
} = useSummaryReport({
|
||||
getSessionNum: () => taskInfo.value.sessionNum,
|
||||
hasFragments: () => fragmentsList.value.length > 0,
|
||||
});
|
||||
|
||||
// 学习预期
|
||||
const expectationDialogVisible = ref(false);
|
||||
const expectationContent = ref("");
|
||||
const expectationSaved = ref("");
|
||||
const savingExpectation = ref(false);
|
||||
// 学习预期:会话必须有预期才能开始计时
|
||||
const {
|
||||
expectationDialogVisible,
|
||||
expectationContent,
|
||||
expectationSaved,
|
||||
savingExpectation,
|
||||
loadExpectation,
|
||||
saveExpectation,
|
||||
} = useSessionExpectation(() => taskInfo.value.sessionNum);
|
||||
|
||||
// 当前会话碎片列表
|
||||
interface FragmentItem {
|
||||
@@ -55,88 +78,27 @@ const editingFragmentId = ref<number | null>(null);
|
||||
const editFragmentContent = ref("");
|
||||
const savingFragment = ref(false);
|
||||
|
||||
// 历史学习记录
|
||||
const showHistory = ref(false);
|
||||
const historyTab = ref("fragments");
|
||||
const historyKeyword = ref("");
|
||||
let historyDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
const loadingHistory = ref(false);
|
||||
const historyFragments = ref<any[]>([]);
|
||||
const fragmentsTotal = ref(0);
|
||||
const fragmentsPage = ref(1);
|
||||
const historyReports = ref<any[]>([]);
|
||||
const reportsTotal = ref(0);
|
||||
const reportsPage = ref(1);
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
watch(showHistory, (val) => {
|
||||
if (val) {
|
||||
// 展开时立即加载当前 tab 的数据
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
}
|
||||
});
|
||||
|
||||
const loadHistoryFragments = async () => {
|
||||
loadingHistory.value = true;
|
||||
try {
|
||||
const res = await getTaskFragments(taskNum, fragmentsPage.value, PAGE_SIZE, historyKeyword.value || undefined);
|
||||
const data = res?.data;
|
||||
historyFragments.value = data?.records || [];
|
||||
fragmentsTotal.value = data?.total || 0;
|
||||
} catch {
|
||||
historyFragments.value = [];
|
||||
fragmentsTotal.value = 0;
|
||||
} finally {
|
||||
loadingHistory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadHistoryReports = async () => {
|
||||
loadingHistory.value = true;
|
||||
try {
|
||||
const res = await getTaskReports(taskNum, reportsPage.value, PAGE_SIZE, historyKeyword.value || undefined);
|
||||
const data = res?.data;
|
||||
historyReports.value = data?.records || [];
|
||||
reportsTotal.value = data?.total || 0;
|
||||
} catch {
|
||||
historyReports.value = [];
|
||||
reportsTotal.value = 0;
|
||||
} finally {
|
||||
loadingHistory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const searchHistory = () => {
|
||||
if (historyDebounce) clearTimeout(historyDebounce);
|
||||
historyDebounce = setTimeout(() => {
|
||||
fragmentsPage.value = 1;
|
||||
reportsPage.value = 1;
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onHistoryTabChange = () => {
|
||||
fragmentsPage.value = 1;
|
||||
reportsPage.value = 1;
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
};
|
||||
|
||||
const onFragmentsPageChange = (p: number) => {
|
||||
fragmentsPage.value = p;
|
||||
loadHistoryFragments();
|
||||
};
|
||||
|
||||
const onReportsPageChange = (p: number) => {
|
||||
reportsPage.value = p;
|
||||
loadHistoryReports();
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
const taskNum = route.params.taskNum as string;
|
||||
|
||||
// 历史学习记录面板(分页查询、搜索防抖、tab 切换)
|
||||
const {
|
||||
showHistory,
|
||||
historyTab,
|
||||
historyKeyword,
|
||||
loadingHistory,
|
||||
historyFragments,
|
||||
fragmentsTotal,
|
||||
fragmentsPage,
|
||||
historyReports,
|
||||
reportsTotal,
|
||||
reportsPage,
|
||||
searchHistory,
|
||||
onHistoryTabChange,
|
||||
onFragmentsPageChange,
|
||||
onReportsPageChange,
|
||||
} = useSessionHistory(taskNum);
|
||||
|
||||
const taskInfo = ref({
|
||||
sessionNum: "",
|
||||
sessionState: "--",
|
||||
@@ -149,7 +111,7 @@ const taskInfo = ref({
|
||||
lastStartTime: "",
|
||||
actualTime: 0,
|
||||
effectiveTime: 0,
|
||||
effectivenessRatio: "--",
|
||||
effectivenessRatio: "-",
|
||||
pointerPosition: 0,
|
||||
systemMessage: "",
|
||||
});
|
||||
@@ -345,7 +307,7 @@ const stopTimer = async () => {
|
||||
taskInfo.value.sessionState = d.sessionState ?? "PAUSED";
|
||||
taskInfo.value.actualTime = d.actualTime ?? 0;
|
||||
taskInfo.value.effectiveTime = d.effectiveTime ?? 0;
|
||||
taskInfo.value.effectivenessRatio = d.effectivenessRatio ?? 0;
|
||||
taskInfo.value.effectivenessRatio = formatRatio(d.effectivenessRatio);
|
||||
taskInfo.value.startTime = d.startTime ?? taskInfo.value.startTime;
|
||||
taskInfo.value.endTime = d.endTime ?? "";
|
||||
taskInfo.value.lastStartTime = d.lastStartTime ?? "";
|
||||
@@ -407,30 +369,40 @@ const endTimer = async (content: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const openSummaryDialog = async () => {
|
||||
summaryDialogVisible.value = true;
|
||||
// 有残片且未填写过总结时,用 AI 聚合草稿作为编辑起点
|
||||
if (!summaryContent.value.trim() && fragmentsList.value.length > 0) {
|
||||
summaryLoading.value = true;
|
||||
summaryLoadingSeconds.value = 0;
|
||||
summaryLoadingTimer = setInterval(() => { summaryLoadingSeconds.value++; }, 1000);
|
||||
try {
|
||||
const res = await getReportDraft(taskInfo.value.sessionNum);
|
||||
if (res?.code === 200 && res.data) {
|
||||
summaryContent.value = res.data;
|
||||
}
|
||||
} catch {
|
||||
// 草稿失败不阻塞手写
|
||||
} finally {
|
||||
summaryLoading.value = false;
|
||||
if (summaryLoadingTimer) { clearInterval(summaryLoadingTimer); summaryLoadingTimer = null; }
|
||||
}
|
||||
}
|
||||
const openAbortDialog = () => {
|
||||
abortConfirmation.value = "";
|
||||
abortDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const closeSummaryDialog = () => {
|
||||
summaryDialogVisible.value = false;
|
||||
if (summaryLoadingTimer) { clearInterval(summaryLoadingTimer); summaryLoadingTimer = null; }
|
||||
const closeExpectationAndOpenAbort = () => {
|
||||
expectationDialogVisible.value = false;
|
||||
openAbortDialog();
|
||||
};
|
||||
|
||||
const confirmAbort = async () => {
|
||||
if (abortConfirmation.value.trim() !== MISOPERATION_PHRASE) {
|
||||
ElMessage.warning("确认语输入不正确,请重新输入");
|
||||
return;
|
||||
}
|
||||
if (abortingSession.value) return;
|
||||
abortingSession.value = true;
|
||||
try {
|
||||
const res = await abortSession(taskInfo.value.sessionNum, abortConfirmation.value.trim());
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("本次学习已关闭,未产生任何数据");
|
||||
clear();
|
||||
clearBreakState();
|
||||
localStorage.removeItem("activeSession");
|
||||
await router.push("/study");
|
||||
} else {
|
||||
ElMessage.error(res.message || "误操作结束失败");
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.message || "误操作结束失败,请重试");
|
||||
}
|
||||
finally {
|
||||
abortingSession.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const restTimer = async () => {
|
||||
@@ -526,41 +498,6 @@ const loadTaskSession = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 学习预期:会话必须有预期才能开始计时
|
||||
const loadExpectation = async () => {
|
||||
if (!taskInfo.value.sessionNum) return;
|
||||
try {
|
||||
const res = await getExpectation(taskInfo.value.sessionNum);
|
||||
expectationSaved.value = res?.data?.description || "";
|
||||
} catch {
|
||||
expectationSaved.value = "";
|
||||
}
|
||||
if (!expectationSaved.value) {
|
||||
expectationDialogVisible.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const saveExpectation = async () => {
|
||||
if (!expectationContent.value.trim()) {
|
||||
ElMessage.warning("学习预期不可为空");
|
||||
return;
|
||||
}
|
||||
savingExpectation.value = true;
|
||||
try {
|
||||
const res = await upsertExpectation(taskInfo.value.sessionNum, expectationContent.value);
|
||||
if (res?.code === 200) {
|
||||
expectationSaved.value = expectationContent.value;
|
||||
expectationDialogVisible.value = false;
|
||||
} else {
|
||||
ElMessage.error(res?.message || "保存失败");
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e.message || "请求失败");
|
||||
} finally {
|
||||
savingExpectation.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const initPage = async () => {
|
||||
try {
|
||||
const hasPermission = await checkAudioPermission();
|
||||
@@ -649,6 +586,9 @@ defineExpose({
|
||||
startTimer,
|
||||
stopTimer,
|
||||
endTimer,
|
||||
openAbortDialog,
|
||||
confirmAbort,
|
||||
abortConfirmation,
|
||||
syncDisplay,
|
||||
clear,
|
||||
});
|
||||
@@ -766,6 +706,7 @@ defineExpose({
|
||||
<el-button v-if="timerIsOver" plain type="success" @click="restTimer" :loading="timerActionLoading">休息</el-button>
|
||||
</template>
|
||||
<el-button type="danger" plain @click="openSummaryDialog">结束会话</el-button>
|
||||
<el-button v-if="canAbortSession" text type="danger" @click="openAbortDialog">误操作结束</el-button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -866,6 +807,7 @@ defineExpose({
|
||||
:rows="4"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button v-if="!expectationSaved" text type="danger" @click="closeExpectationAndOpenAbort">误操作结束</el-button>
|
||||
<el-button v-if="expectationSaved" @click="expectationDialogVisible = false">取消</el-button>
|
||||
<el-button type="success" :loading="savingExpectation" @click="saveExpectation">确定</el-button>
|
||||
</template>
|
||||
@@ -909,6 +851,32 @@ defineExpose({
|
||||
<el-button type="success" :loading="endingSession" @click="endTimer(summaryContent)">确认结束</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="abortDialogVisible"
|
||||
title="误操作结束"
|
||||
width="520px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<p class="dialog-hint">本次学习会话尚未产生学习残片,可以零数据关闭。关闭后会话与学习预期将被删除,不会留下任何学习记录。</p>
|
||||
<p class="dialog-hint">如果是误操作开启了本次学习,请输入以下内容以确认:</p>
|
||||
<div class="abort-phrase">{{ MISOPERATION_PHRASE }}</div>
|
||||
<el-input
|
||||
v-model="abortConfirmation"
|
||||
placeholder="请输入上方确认语"
|
||||
@keyup.enter="confirmAbort"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button @click="abortDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="abortingSession"
|
||||
:disabled="abortConfirmation.trim() !== MISOPERATION_PHRASE"
|
||||
@click="confirmAbort"
|
||||
>确认误操作结束</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -937,7 +905,7 @@ defineExpose({
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--green-700);
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -964,7 +932,7 @@ defineExpose({
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--green-700);
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -1001,7 +969,7 @@ defineExpose({
|
||||
|
||||
.ai-waiting {
|
||||
font-size: 13px;
|
||||
color: #e6a23c;
|
||||
color: var(--accent-warning);
|
||||
margin: 0 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1013,7 +981,7 @@ defineExpose({
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #f3d19e;
|
||||
border-top-color: #e6a23c;
|
||||
border-top-color: var(--accent-warning);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
@@ -1271,7 +1239,7 @@ defineExpose({
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: var(--green-700);
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
@@ -1298,4 +1266,15 @@ defineExpose({
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.abort-phrase {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
border: 1px dashed var(--el-color-danger);
|
||||
border-radius: 6px;
|
||||
color: var(--el-color-danger);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -235,7 +235,7 @@ const removeTask = async () => {
|
||||
// ============ 优先级权重配置 ============
|
||||
const weightsDialogVisible = ref(false);
|
||||
const savingWeights = ref(false);
|
||||
const weightItems = ref([
|
||||
const weightItems = ref<{ key: keyof PriorityWeights; label: string; value: number }[]>([
|
||||
{ key: "urgencyWeight", label: "紧急性", value: 35 },
|
||||
{ key: "importanceWeight", label: "重要性", value: 25 },
|
||||
{ key: "contentDifficultyWeight", label: "内容难度", value: 20 },
|
||||
@@ -274,9 +274,11 @@ const saveWeights = async () => {
|
||||
}
|
||||
savingWeights.value = true;
|
||||
try {
|
||||
const payload = Object.fromEntries(
|
||||
weightItems.value.map((item) => [item.key, item.value / 100])
|
||||
) as unknown as PriorityWeights;
|
||||
// weightItems 的 key 已由 keyof PriorityWeights 约束,循环后必然覆盖全部维度
|
||||
const payload = {} as PriorityWeights;
|
||||
for (const item of weightItems.value) {
|
||||
payload[item.key] = item.value / 100;
|
||||
}
|
||||
const res = await savePriorityWeights(payload);
|
||||
if (res?.code === 200) {
|
||||
weightsDialogVisible.value = false;
|
||||
@@ -662,7 +664,7 @@ onMounted(() => {
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -670,17 +672,27 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
background: var(--accent-success-softer);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
color: var(--green-900);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.application-list {
|
||||
|
||||
@@ -382,7 +382,7 @@ defineExpose({
|
||||
<div class="group">
|
||||
<h3>优先级维度</h3>
|
||||
<div class="priority-grid" :class="{ mobile: isMobile }">
|
||||
<el-form-item label="急迫性">
|
||||
<el-form-item label="紧急性">
|
||||
<el-select v-model="priority.urgency">
|
||||
<el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
@@ -412,6 +412,9 @@ defineExpose({
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<p class="priority-hint">
|
||||
五个维度取值范围均为 0–5,数值越大表示程度越高,0 表示不适用或未评估。紧急性代表时间压力,重要性代表对当前目标的权重,内容难度代表学习该内容的困难程度,未来价值代表对长期目标的价值,主观优先级是你的直觉判断。系统综合这些维度排序,更倾向「重要但不紧急」的任务,紧急性作为兜底。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
|
||||
@@ -553,6 +556,13 @@ defineExpose({
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.priority-hint {
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.application-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+152
-35
@@ -1,12 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
import router from "@/router";
|
||||
import { getReviewFeed, getTaskReview, type ReviewFeedItem } from "@/api/review";
|
||||
import {
|
||||
clampAutoScrollTime,
|
||||
measureAutoScroll,
|
||||
pxToTimeOffset,
|
||||
type AutoScrollMetrics,
|
||||
} from "@/utils/autoScroll";
|
||||
|
||||
const reviewItems = ref<ReviewFeedItem[]>([]);
|
||||
const contentRef = ref<HTMLElement | null>(null);
|
||||
const AUTO_SCROLL_DURATION = 150_000;
|
||||
const trackRef = ref<HTMLElement | null>(null);
|
||||
let autoScroll: Animation | null = null;
|
||||
let autoScrollMetrics: AutoScrollMetrics | null = null;
|
||||
/** 当前渲染的内容份数:内容比轨道窄时要多铺几份,否则循环时会露白 */
|
||||
const repeatCount = ref(2);
|
||||
|
||||
interface FragmentChip {
|
||||
id: number;
|
||||
@@ -32,8 +41,10 @@ const fragmentChips = computed<FragmentChip[]>(() =>
|
||||
})),
|
||||
);
|
||||
|
||||
// 复制一份实现无缝循环
|
||||
const duplicatedChips = computed(() => [...fragmentChips.value, ...fragmentChips.value]);
|
||||
// 复制多份实现无缝循环,份数按轨道宽度动态补足
|
||||
const duplicatedChips = computed(() =>
|
||||
Array.from({ length: repeatCount.value }, () => fragmentChips.value).flat(),
|
||||
);
|
||||
|
||||
const loadReviewFeed = async () => {
|
||||
try {
|
||||
@@ -41,6 +52,10 @@ const loadReviewFeed = async () => {
|
||||
reviewItems.value = res?.data || [];
|
||||
} catch {
|
||||
// feed 加载失败不影响页面主体功能
|
||||
} finally {
|
||||
// 残片宽度依赖真实内容,必须等 DOM 更新后再按实际宽度重建动画
|
||||
await nextTick();
|
||||
startAutoScroll();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -124,27 +139,117 @@ const startReview = () => {
|
||||
router.push("/review");
|
||||
};
|
||||
|
||||
const handleTrackWheel = (event: WheelEvent) => {
|
||||
const anim = autoScroll;
|
||||
/** 按当前内容宽度与轨道宽度(重新)建立动画 */
|
||||
const startAutoScroll = () => {
|
||||
const content = contentRef.value;
|
||||
if (!anim || !content) return;
|
||||
const track = trackRef.value;
|
||||
if (!content || !track) return;
|
||||
|
||||
anim.pause();
|
||||
// 保留手动滚动后的位置:重建动画前把当前进度换成比例
|
||||
const elapsed = autoScroll && typeof autoScroll.currentTime === "number"
|
||||
? autoScroll.currentTime
|
||||
: 0;
|
||||
const prevDuration = autoScrollMetrics?.duration ?? 0;
|
||||
const progress = prevDuration > 0 ? elapsed / prevDuration : 0;
|
||||
autoScroll?.cancel();
|
||||
autoScroll = null;
|
||||
autoScrollMetrics = null;
|
||||
|
||||
// 渲染总宽 / 当前份数 = 单份内容的实际宽度
|
||||
const singleCopyWidth = content.scrollWidth / Math.max(repeatCount.value, 1);
|
||||
const metrics = measureAutoScroll(singleCopyWidth, track.clientWidth);
|
||||
if (!metrics) return;
|
||||
|
||||
// 份数不足时先补足再重新测量,下一轮才是准确的循环宽度
|
||||
if (metrics.repeatCount !== repeatCount.value) {
|
||||
repeatCount.value = metrics.repeatCount;
|
||||
nextTick(() => startAutoScroll());
|
||||
return;
|
||||
}
|
||||
|
||||
autoScrollMetrics = metrics;
|
||||
const anim = content.animate(
|
||||
[
|
||||
{ transform: "translateX(0)" },
|
||||
{ transform: `translateX(-${100 / repeatCount.value}%)` },
|
||||
],
|
||||
{ duration: metrics.duration, iterations: Infinity, easing: "linear" },
|
||||
);
|
||||
anim.currentTime = progress * metrics.duration;
|
||||
autoScroll = anim;
|
||||
};
|
||||
|
||||
/** 滚轮与手指拖动共用的手动位移 */
|
||||
const scrollByPixels = (deltaPx: number) => {
|
||||
const anim = autoScroll;
|
||||
const metrics = autoScrollMetrics;
|
||||
if (!anim || !metrics) return;
|
||||
const current = anim.currentTime;
|
||||
if (typeof current !== "number") return;
|
||||
anim.currentTime = clampAutoScrollTime(
|
||||
current + pxToTimeOffset(deltaPx, metrics.speed),
|
||||
metrics.duration,
|
||||
);
|
||||
};
|
||||
|
||||
const handleTrackWheel = (event: WheelEvent) => {
|
||||
if (!autoScrollMetrics) return;
|
||||
autoScroll?.pause();
|
||||
|
||||
const rawDelta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
|
||||
const delta = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? rawDelta * 16 : rawDelta;
|
||||
if (!delta) return;
|
||||
scrollByPixels(delta);
|
||||
};
|
||||
|
||||
// 一屏内容的宽度对应一轮自动滚动
|
||||
const loopWidth = content.scrollWidth / 2;
|
||||
if (!loopWidth) return;
|
||||
let touchLastX = 0;
|
||||
let touchMovedDistance = 0;
|
||||
const TOUCH_TAP_THRESHOLD = 6;
|
||||
|
||||
const current = anim.currentTime;
|
||||
if (typeof current !== "number") return;
|
||||
anim.currentTime = Math.min(
|
||||
Math.max(current + (delta / loopWidth) * AUTO_SCROLL_DURATION, 0),
|
||||
AUTO_SCROLL_DURATION,
|
||||
);
|
||||
const handleTouchStart = (event: TouchEvent) => {
|
||||
if (!autoScrollMetrics) return;
|
||||
const touch = event.touches[0];
|
||||
if (!touch) return;
|
||||
touchLastX = touch.clientX;
|
||||
touchMovedDistance = 0;
|
||||
autoScroll?.pause();
|
||||
};
|
||||
|
||||
const handleTouchMove = (event: TouchEvent) => {
|
||||
if (!autoScrollMetrics) return;
|
||||
const touch = event.touches[0];
|
||||
if (!touch) return;
|
||||
const deltaX = touch.clientX - touchLastX;
|
||||
touchLastX = touch.clientX;
|
||||
touchMovedDistance += Math.abs(deltaX);
|
||||
if (!deltaX) return;
|
||||
scrollByPixels(deltaX);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
autoScroll?.play();
|
||||
};
|
||||
|
||||
/** 拖动过就吞掉这次 click,避免误触打开回忆卡片 */
|
||||
const handleChipClick = (fragment: FragmentChip, event: MouseEvent) => {
|
||||
if (touchMovedDistance > TOUCH_TAP_THRESHOLD) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
touchMovedDistance = 0;
|
||||
return;
|
||||
}
|
||||
touchMovedDistance = 0;
|
||||
openRecallCard(fragment);
|
||||
};
|
||||
|
||||
/** 视口跨过断点时速度会变,需重新测量时长并保持当前进度 */
|
||||
let resizeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const handleViewportResize = () => {
|
||||
if (resizeTimer) clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
resizeTimer = null;
|
||||
startAutoScroll();
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const pauseAutoScroll = () => {
|
||||
@@ -157,17 +262,14 @@ const resumeAutoScroll = () => {
|
||||
|
||||
onMounted(() => {
|
||||
loadReviewFeed();
|
||||
autoScroll = contentRef.value?.animate(
|
||||
[
|
||||
{ transform: "translateX(0)" },
|
||||
{ transform: "translateX(-50%)" },
|
||||
],
|
||||
{ duration: AUTO_SCROLL_DURATION, iterations: Infinity, easing: "linear" },
|
||||
) || null;
|
||||
window.addEventListener("resize", handleViewportResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
autoScroll?.cancel();
|
||||
autoScroll = null;
|
||||
window.removeEventListener("resize", handleViewportResize);
|
||||
if (resizeTimer) clearTimeout(resizeTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -176,15 +278,27 @@ onBeforeUnmount(() => {
|
||||
<section class="welcome-page">
|
||||
<div class="review-scroll-section surface-card">
|
||||
<div class="review-scroll-header">
|
||||
<span class="color-legend">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="left"
|
||||
:show-after="200"
|
||||
content="学习残片(知识碎片)是学习过程中随手记下的不完整内容,不要求是完整总结,只记录刚学到、想到或需要记住的内容。它是学习记录的主要单元,后续由你或 AI 汇总为学习报告与思维导图。"
|
||||
>
|
||||
<span class="color-legend" tabindex="0">
|
||||
<span class="dot dot-fragment"></span> 学习残片
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
ref="trackRef"
|
||||
class="review-scroll-track"
|
||||
@mouseenter="pauseAutoScroll"
|
||||
@mouseleave="resumeAutoScroll"
|
||||
@wheel.prevent="handleTrackWheel"
|
||||
@touchstart.passive="handleTouchStart"
|
||||
@touchmove.passive="handleTouchMove"
|
||||
@touchend="handleTouchEnd"
|
||||
@touchcancel="handleTouchEnd"
|
||||
>
|
||||
<div
|
||||
ref="contentRef"
|
||||
@@ -194,7 +308,7 @@ onBeforeUnmount(() => {
|
||||
v-for="(chip, index) in duplicatedChips"
|
||||
:key="index"
|
||||
class="review-chip fragment-chip"
|
||||
@click="openRecallCard(chip)"
|
||||
@click="handleChipClick(chip, $event)"
|
||||
>
|
||||
<strong class="chip-task">{{ chip.taskName }}</strong>
|
||||
<span class="chip-content">{{ chip.content }}</span>
|
||||
@@ -343,6 +457,8 @@ onBeforeUnmount(() => {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: help;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dot {
|
||||
@@ -354,11 +470,13 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.dot-fragment {
|
||||
background: #e6a23c;
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.review-scroll-track {
|
||||
overflow: hidden;
|
||||
/* 限制横向手势交给脚本处理,避免拖动时页面跟着晃 */
|
||||
touch-action: pan-y;
|
||||
mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
|
||||
}
|
||||
@@ -376,7 +494,6 @@ onBeforeUnmount(() => {
|
||||
padding: 8px 16px;
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-left: 3px solid #e6a23c;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, box-shadow 0.2s;
|
||||
@@ -386,7 +503,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
.review-chip:hover {
|
||||
box-shadow: var(--shadow-soft);
|
||||
background: #fff8e1;
|
||||
background: var(--accent-success-softer);
|
||||
}
|
||||
|
||||
.chip-task {
|
||||
@@ -415,7 +532,7 @@ onBeforeUnmount(() => {
|
||||
margin: 0 0 14px;
|
||||
padding: 12px 16px;
|
||||
border-left: 3px solid var(--green-600);
|
||||
background: #f1f8e9;
|
||||
background: var(--accent-success-softer);
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
@@ -449,8 +566,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.recall-full-item.is-clicked {
|
||||
background: #fff8e1;
|
||||
border-color: #e6a23c;
|
||||
background: var(--accent-warning-soft);
|
||||
border-color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.recall-item-tag {
|
||||
@@ -462,13 +579,13 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.tag-report {
|
||||
background: #e8f5e9;
|
||||
background: var(--accent-success-soft);
|
||||
color: var(--green-700);
|
||||
}
|
||||
|
||||
.tag-fragment {
|
||||
background: #fff8e1;
|
||||
color: #b8860b;
|
||||
background: var(--accent-warning-soft);
|
||||
color: var(--accent-warning-strong);
|
||||
}
|
||||
|
||||
.recall-item-content {
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
// src/components/composables/useElapsedSeconds.ts
|
||||
import { getCurrentInstance, onUnmounted, ref } from 'vue';
|
||||
|
||||
/**
|
||||
* 统一的秒表计时:记录异步操作已耗时秒数,用于“已等待 N 秒”等界面提示。
|
||||
* - start():归零并开始每秒递增(重复调用会先停止上一次计时)
|
||||
* - stop():停止计时,保留当前秒数
|
||||
* - reset():停止并归零
|
||||
* 组件卸载时自动清理定时器;在组件外部调用仅作纯状态机使用。
|
||||
*/
|
||||
export function useElapsedSeconds() {
|
||||
const seconds = ref(0);
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const stop = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
stop();
|
||||
seconds.value = 0;
|
||||
timer = setInterval(() => {
|
||||
seconds.value++;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
stop();
|
||||
seconds.value = 0;
|
||||
};
|
||||
|
||||
if (getCurrentInstance()) {
|
||||
onUnmounted(stop);
|
||||
}
|
||||
|
||||
return { seconds, start, stop, reset };
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getExpectation, upsertExpectation } from '@/api/studySessions';
|
||||
|
||||
/**
|
||||
* 学习会话的学习预期:会话必须有预期才能开始计时。
|
||||
* - loadExpectation:读取已保存预期,无预期时自动弹出填写弹窗
|
||||
* - saveExpectation:保存预期并关闭弹窗
|
||||
*/
|
||||
export function useSessionExpectation(getSessionNum: () => string) {
|
||||
const expectationDialogVisible = ref(false);
|
||||
const expectationContent = ref("");
|
||||
const expectationSaved = ref("");
|
||||
const savingExpectation = ref(false);
|
||||
|
||||
const loadExpectation = async () => {
|
||||
if (!getSessionNum()) return;
|
||||
try {
|
||||
const res = await getExpectation(getSessionNum());
|
||||
expectationSaved.value = res?.data?.description || "";
|
||||
} catch {
|
||||
expectationSaved.value = "";
|
||||
}
|
||||
if (!expectationSaved.value) {
|
||||
expectationDialogVisible.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const saveExpectation = async () => {
|
||||
if (!expectationContent.value.trim()) {
|
||||
ElMessage.warning("学习预期不可为空");
|
||||
return;
|
||||
}
|
||||
savingExpectation.value = true;
|
||||
try {
|
||||
const res = await upsertExpectation(getSessionNum(), expectationContent.value);
|
||||
if (res?.code === 200) {
|
||||
expectationSaved.value = expectationContent.value;
|
||||
expectationDialogVisible.value = false;
|
||||
} else {
|
||||
ElMessage.error(res?.message || "保存失败");
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e.message || "请求失败");
|
||||
} finally {
|
||||
savingExpectation.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
expectationDialogVisible,
|
||||
expectationContent,
|
||||
expectationSaved,
|
||||
savingExpectation,
|
||||
loadExpectation,
|
||||
saveExpectation,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ref, watch } from 'vue';
|
||||
import { getTaskFragments, getTaskReports } from '@/api/studySessions';
|
||||
|
||||
/** 历史残片 / 历史报告共用的列表项形状(模板只消费这些字段) */
|
||||
export interface SessionHistoryRecord {
|
||||
id: number;
|
||||
sessionNum: string;
|
||||
content: string;
|
||||
sessionExpectation?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 学习会话页的“历史学习记录”面板:按任务分页查询历史残片与报告,
|
||||
* 支持关键字搜索(300ms 防抖)与 tab 切换。
|
||||
*/
|
||||
export function useSessionHistory(taskNum: string) {
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const showHistory = ref(false);
|
||||
const historyTab = ref("fragments");
|
||||
const historyKeyword = ref("");
|
||||
let historyDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
const loadingHistory = ref(false);
|
||||
const historyFragments = ref<SessionHistoryRecord[]>([]);
|
||||
const fragmentsTotal = ref(0);
|
||||
const fragmentsPage = ref(1);
|
||||
const historyReports = ref<SessionHistoryRecord[]>([]);
|
||||
const reportsTotal = ref(0);
|
||||
const reportsPage = ref(1);
|
||||
|
||||
watch(showHistory, (val) => {
|
||||
if (val) {
|
||||
// 展开时立即加载当前 tab 的数据
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
}
|
||||
});
|
||||
|
||||
const loadHistoryFragments = async () => {
|
||||
loadingHistory.value = true;
|
||||
try {
|
||||
const res = await getTaskFragments(taskNum, fragmentsPage.value, PAGE_SIZE, historyKeyword.value || undefined);
|
||||
const data = res?.data;
|
||||
historyFragments.value = data?.records || [];
|
||||
fragmentsTotal.value = data?.total || 0;
|
||||
} catch {
|
||||
historyFragments.value = [];
|
||||
fragmentsTotal.value = 0;
|
||||
} finally {
|
||||
loadingHistory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadHistoryReports = async () => {
|
||||
loadingHistory.value = true;
|
||||
try {
|
||||
const res = await getTaskReports(taskNum, reportsPage.value, PAGE_SIZE, historyKeyword.value || undefined);
|
||||
const data = res?.data;
|
||||
historyReports.value = data?.records || [];
|
||||
reportsTotal.value = data?.total || 0;
|
||||
} catch {
|
||||
historyReports.value = [];
|
||||
reportsTotal.value = 0;
|
||||
} finally {
|
||||
loadingHistory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const searchHistory = () => {
|
||||
if (historyDebounce) clearTimeout(historyDebounce);
|
||||
historyDebounce = setTimeout(() => {
|
||||
fragmentsPage.value = 1;
|
||||
reportsPage.value = 1;
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onHistoryTabChange = () => {
|
||||
fragmentsPage.value = 1;
|
||||
reportsPage.value = 1;
|
||||
if (historyTab.value === "fragments") loadHistoryFragments();
|
||||
else loadHistoryReports();
|
||||
};
|
||||
|
||||
const onFragmentsPageChange = (p: number) => {
|
||||
fragmentsPage.value = p;
|
||||
loadHistoryFragments();
|
||||
};
|
||||
|
||||
const onReportsPageChange = (p: number) => {
|
||||
reportsPage.value = p;
|
||||
loadHistoryReports();
|
||||
};
|
||||
|
||||
return {
|
||||
PAGE_SIZE,
|
||||
showHistory,
|
||||
historyTab,
|
||||
historyKeyword,
|
||||
loadingHistory,
|
||||
historyFragments,
|
||||
fragmentsTotal,
|
||||
fragmentsPage,
|
||||
historyReports,
|
||||
reportsTotal,
|
||||
reportsPage,
|
||||
searchHistory,
|
||||
onHistoryTabChange,
|
||||
onFragmentsPageChange,
|
||||
onReportsPageChange,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { ref } from 'vue';
|
||||
import { getReportDraft } from '@/api/studySessions';
|
||||
import { useElapsedSeconds } from './useElapsedSeconds';
|
||||
|
||||
/**
|
||||
* “结束会话总结”弹窗:编辑/预览总结内容。
|
||||
* 有学习残片且尚未填写内容时,先取 AI 聚合草稿作为编辑起点(失败不阻塞手写),
|
||||
* 等待期间展示“已等待 N 秒”提示。
|
||||
*/
|
||||
export function useSummaryReport(options: {
|
||||
getSessionNum: () => string;
|
||||
hasFragments: () => boolean;
|
||||
}) {
|
||||
const summaryDialogVisible = ref(false);
|
||||
const summaryContent = ref("");
|
||||
const summaryPreview = ref(false);
|
||||
const summaryLoading = ref(false);
|
||||
const { seconds: summaryLoadingSeconds, start: startLoadingTimer, stop: stopLoadingTimer } = useElapsedSeconds();
|
||||
|
||||
const openSummaryDialog = async () => {
|
||||
summaryDialogVisible.value = true;
|
||||
// 有残片且未填写过总结时,用 AI 聚合草稿作为编辑起点
|
||||
if (!summaryContent.value.trim() && options.hasFragments()) {
|
||||
summaryLoading.value = true;
|
||||
startLoadingTimer();
|
||||
try {
|
||||
const res = await getReportDraft(options.getSessionNum());
|
||||
if (res?.code === 200 && res.data) {
|
||||
summaryContent.value = res.data;
|
||||
}
|
||||
} catch {
|
||||
// 草稿失败不阻塞手写
|
||||
} finally {
|
||||
summaryLoading.value = false;
|
||||
stopLoadingTimer();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const closeSummaryDialog = () => {
|
||||
summaryDialogVisible.value = false;
|
||||
stopLoadingTimer();
|
||||
};
|
||||
|
||||
return {
|
||||
summaryDialogVisible,
|
||||
summaryContent,
|
||||
summaryPreview,
|
||||
summaryLoading,
|
||||
summaryLoadingSeconds,
|
||||
openSummaryDialog,
|
||||
closeSummaryDialog,
|
||||
};
|
||||
}
|
||||
+5
-4
@@ -1,13 +1,14 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'normalize.css'
|
||||
// 必须在 EP 样式之后:同特异度下靠加载顺序覆盖 EP 主题变量
|
||||
import './assets/main.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from "@/router"
|
||||
import 'normalize.css'
|
||||
|
||||
var app = createApp(App)
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
||||
+11
-3
@@ -30,12 +30,18 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/review/detail/task/:taskNum",
|
||||
component: () => import("@/components/ReviewDetail.vue"),
|
||||
meta: { requiresAuth: true, title: "复习详情" },
|
||||
meta: { requiresAuth: true, title: "复习详情", backTo: "/review", backLabel: "返回总览" },
|
||||
},
|
||||
{
|
||||
path: "/review/detail/:type/:id",
|
||||
component: () => import("@/components/ReviewDetail.vue"),
|
||||
meta: { requiresAuth: true, title: "复习详情" },
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: "复习详情",
|
||||
backTo: "/review",
|
||||
backLabel: "返回上一页",
|
||||
backUseHistory: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/review/recall/:taskNum",
|
||||
@@ -103,7 +109,9 @@ router.beforeEach((to) => {
|
||||
if (taskNum) {
|
||||
return `/start-task/${encodeURIComponent(taskNum)}?resume=true`;
|
||||
}
|
||||
} catch {}
|
||||
} catch {
|
||||
// activeSession 内容异常时不恢复会话
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* 无缝横向跑马灯的恒速换算。
|
||||
*
|
||||
* 滚动内容复制多份,动画从 translateX(0) 走到 translateX(-100%/份数),
|
||||
* 因此一"轮"的距离就是单份内容的宽度。
|
||||
*
|
||||
* 速度恒定(与内容量无关):同样的 px/s 在任何数据量、任何环境下观感一致;
|
||||
* 上下限只作为安全边界,避免以后有人把基准值改坏导致完全不可用。
|
||||
*
|
||||
* 说明:内容不足一屏时仍然滚动——轨道右侧有渐变遮罩,不滚动就看不到后面的内容。
|
||||
*/
|
||||
|
||||
/** 桌面基准速度:60px/s,一屏 1000px 内容约 17 秒走完 */
|
||||
export const BASE_SPEED_PX_PER_SEC = 60;
|
||||
|
||||
/** 桌面基准速度的安全上限:内容再怪也不超过这个速度 */
|
||||
export const MAX_SPEED_PX_PER_SEC = 85;
|
||||
|
||||
/** 桌面基准速度的安全下限:再慢也不会显得像卡住了 */
|
||||
export const MIN_SPEED_PX_PER_SEC = 45;
|
||||
|
||||
/** 窄屏(手机)相对桌面的速度系数:视口窄,同 px/s 的视觉速度更快 */
|
||||
export const NARROW_SPEED_FACTOR = 0.6;
|
||||
|
||||
/** 移动端断点,与仓库样式约定保持一致 */
|
||||
export const NARROW_MAX_WIDTH = 768;
|
||||
|
||||
/** 最少复制份数:一份用于展示,一份用于无缝衔接 */
|
||||
export const MIN_REPEAT_COUNT = 2;
|
||||
|
||||
/** 复制份数上限,避免内容异常时渲染过多节点 */
|
||||
export const MAX_REPEAT_COUNT = 24;
|
||||
|
||||
export interface AutoScrollMetrics {
|
||||
/** 一轮滚动距离(px),即单份内容的宽度 */
|
||||
loopWidth: number;
|
||||
/** 轨道可视宽度(px) */
|
||||
viewportWidth: number;
|
||||
/** 实际使用速度(px/s) */
|
||||
speed: number;
|
||||
/** 一轮动画时长(ms) */
|
||||
duration: number;
|
||||
/** 需要渲染的内容份数 */
|
||||
repeatCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 按视口宽度取速度(px/s)。
|
||||
* 上下限只约束桌面基准速度(防止基准值被改坏),移动端系数在其后生效,
|
||||
* 这样手机端才是真正的桌面 0.6 倍。
|
||||
*/
|
||||
export function getScrollSpeedPxPerSec(viewportWidth: number): number {
|
||||
const baseSpeed = Math.min(Math.max(BASE_SPEED_PX_PER_SEC, MIN_SPEED_PX_PER_SEC), MAX_SPEED_PX_PER_SEC);
|
||||
const isNarrow = viewportWidth > 0 && viewportWidth <= NARROW_MAX_WIDTH;
|
||||
return baseSpeed * (isNarrow ? NARROW_SPEED_FACTOR : 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 需要渲染多少份内容。
|
||||
* 动画把内容向前推一份的宽度,若总宽不够,循环后半段轨道右侧会露白,
|
||||
* 所以至少要能铺满「可视宽度 + 无缝衔接的那一份」。
|
||||
*/
|
||||
export function getRepeatCount(singleCopyWidth: number, viewportWidth: number): number {
|
||||
if (!Number.isFinite(singleCopyWidth) || singleCopyWidth <= 0) return MIN_REPEAT_COUNT;
|
||||
if (!Number.isFinite(viewportWidth) || viewportWidth <= 0) return MIN_REPEAT_COUNT;
|
||||
const needed = Math.ceil(viewportWidth / singleCopyWidth) + 1;
|
||||
return Math.min(Math.max(needed, MIN_REPEAT_COUNT), MAX_REPEAT_COUNT);
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算一轮滚动的距离、速度与时长。
|
||||
* `singleCopyWidth` 是单份内容宽度(调用方按实际用量总宽折算)。
|
||||
* 无法计算时返回 null,调用方据此不启动动画。
|
||||
*/
|
||||
export function measureAutoScroll(
|
||||
singleCopyWidth: number,
|
||||
viewportWidth: number,
|
||||
): AutoScrollMetrics | null {
|
||||
const speed = getScrollSpeedPxPerSec(viewportWidth);
|
||||
if (!Number.isFinite(singleCopyWidth) || singleCopyWidth <= 0) return null;
|
||||
if (!Number.isFinite(speed) || speed <= 0) return null;
|
||||
return {
|
||||
loopWidth: singleCopyWidth,
|
||||
viewportWidth,
|
||||
speed,
|
||||
duration: (singleCopyWidth / speed) * 1000,
|
||||
repeatCount: getRepeatCount(singleCopyWidth, viewportWidth),
|
||||
};
|
||||
}
|
||||
|
||||
/** 把位移(px)换算成动画时间(ms),滚轮与手指拖动共用同一套换算 */
|
||||
export function pxToTimeOffset(deltaPx: number, speed: number): number {
|
||||
if (!Number.isFinite(deltaPx) || !Number.isFinite(speed) || speed <= 0) return 0;
|
||||
return (deltaPx / speed) * 1000;
|
||||
}
|
||||
|
||||
/** 把动画时间夹在 [0, duration] 内,配合 iterations: Infinity 保持循环连续 */
|
||||
export function clampAutoScrollTime(time: number, duration: number): number {
|
||||
if (!Number.isFinite(time)) return 0;
|
||||
if (!Number.isFinite(duration) || duration <= 0) return 0;
|
||||
return Math.min(Math.max(time, 0), duration);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* 把 0~1 的比率格式化为百分比文案。
|
||||
* 后端可能返回数字或字符串,空值与非法值统一显示 "-"。
|
||||
*/
|
||||
export const formatRatio = (ratio?: number | string | null): string => {
|
||||
if (ratio == null || ratio === "") return "-";
|
||||
const value = Number(ratio);
|
||||
if (Number.isNaN(value)) return "-";
|
||||
return `${(value * 100).toFixed(1)}%`;
|
||||
};
|
||||
+40
-30
@@ -2,11 +2,21 @@ import axios from 'axios';
|
||||
import { ElMessage } from "element-plus";
|
||||
import router from "@/router";
|
||||
|
||||
const basic_url = import.meta.env.VITE_BASE_URL;
|
||||
/** 后端统一响应包装:code === 200 表示业务成功 */
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
message?: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
const baseURL = import.meta.env.VITE_BASE_URL;
|
||||
|
||||
// 默认 30s:普通 CRUD 足够;AI 聚合等长耗时接口需在 api 层显式覆写 timeout
|
||||
const DEFAULT_TIMEOUT = 30_000;
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: basic_url,
|
||||
timeout: 600000,
|
||||
baseURL,
|
||||
timeout: DEFAULT_TIMEOUT,
|
||||
withCredentials: true
|
||||
});
|
||||
|
||||
@@ -51,43 +61,43 @@ const validateResponse = (res: any) => {
|
||||
return result;
|
||||
};
|
||||
|
||||
function get(url: string, params: Record<string, any>): Promise<any>;
|
||||
function get(url: string): Promise<any>;
|
||||
|
||||
function get(url: string, params: Record<string, any> = {}) {
|
||||
return axiosInstance.get(url, { params })
|
||||
const get = <T = any>(
|
||||
url: string,
|
||||
params: Record<string, any> = {},
|
||||
config: Record<string, any> = {},
|
||||
): Promise<ApiResponse<T>> =>
|
||||
axiosInstance.get(url, { params, ...config })
|
||||
.then(validateResponse)
|
||||
.catch(handleError);
|
||||
}
|
||||
|
||||
const post = (url: string, data: any = null, config: any = {}) => {
|
||||
|
||||
if (config.params) {
|
||||
// 如果传入 config.params,则作为 URL 参数
|
||||
return axiosInstance.post(url, data, { params: config.params, ...config })
|
||||
const post = <T = any>(
|
||||
url: string,
|
||||
data: any = null,
|
||||
config: Record<string, any> = {},
|
||||
): Promise<ApiResponse<T>> =>
|
||||
axiosInstance.post(url, data, config)
|
||||
.then(validateResponse)
|
||||
.catch(handleError);
|
||||
} else {
|
||||
// 默认 POST JSON
|
||||
return axiosInstance.post(url, data, config)
|
||||
|
||||
const put = <T = any>(
|
||||
url: string,
|
||||
data: any,
|
||||
config: Record<string, any> = {},
|
||||
): Promise<ApiResponse<T>> =>
|
||||
axiosInstance.put(url, data, config)
|
||||
.then(validateResponse)
|
||||
.catch(handleError);
|
||||
}
|
||||
};
|
||||
|
||||
const put = (url: string, data: any, config: any = {}) => {
|
||||
return axiosInstance.put(url, data, config)
|
||||
const del = <T = any>(
|
||||
url: string,
|
||||
params: Record<string, any> = {},
|
||||
config: Record<string, any> = {},
|
||||
): Promise<ApiResponse<T>> =>
|
||||
axiosInstance.delete(url, { params, ...config })
|
||||
.then(validateResponse)
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
const del = (url: string, params: Record<string, any> = {}, config: any = {}) => {
|
||||
return axiosInstance.delete(url, { params, ...config })
|
||||
.then(validateResponse)
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
const requestNotImplemented = (method: string) => {
|
||||
const requestNotImplemented = () => {
|
||||
ElMessage.error("该功能暂不可用,请刷新后重试");
|
||||
throw new Error("该功能暂不可用,请刷新后重试");
|
||||
};
|
||||
@@ -98,7 +108,7 @@ const request = (method: string, url: string, paramsOrData: any) => {
|
||||
case 'post': return post(url, paramsOrData);
|
||||
case 'put': return put(url, paramsOrData);
|
||||
case 'delete': return del(url, paramsOrData);
|
||||
default: return requestNotImplemented(method);
|
||||
default: return requestNotImplemented();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -29,5 +29,19 @@ export default defineConfig({
|
||||
environment: 'jsdom',
|
||||
setupFiles: ['./src/__tests__/setup.ts'],
|
||||
include: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'html'],
|
||||
reportsDirectory: 'coverage',
|
||||
include: ['src/**'],
|
||||
exclude: ['src/__tests__/**', 'src/main.ts', 'src/env.d.ts'],
|
||||
thresholds: {
|
||||
// 棘轮基线(2026-08 首次接入实测:lines 62.4 / funcs 47.7 / stmts 62.4 / branches 73.5),只升不降
|
||||
lines: 60,
|
||||
functions: 45,
|
||||
statements: 60,
|
||||
branches: 72,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user