test: 新增 StartTask E2E 测试 (3 cases)

覆盖场景：暂停后点击开始触发 continue API、
ONGOING 状态开始按钮 disabled、结束会话展示后端提示
注：需 Node.js >= 18.19 运行 Playwright

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+.git
+.gitignore
+*.md
+.DS_Store
+coverage
+.nyc_output
+playwright-report
+test-results

.env.development

@@ -1 +1 @@
-VITE_BASE_URL = 'http://localhost:5157'
+VITE_BASE_URL=/api

.env.production

@@ -1 +1 @@
-VITE_BASE_URL = 'https://lpt.cat-shark.xyz/api'
+VITE_BASE_URL=/api

.env.uat

@@ -0,0 +1 @@
+VITE_BASE_URL=/api

.gitignore

@@ -28,3 +28,7 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+
+# Test artifacts
+test-results/
+playwright-report/

.npmrc

@@ -0,0 +1 @@
+store-dir=/Users/guoxingyu/Library/pnpm/store/v3

Dockerfile

@@ -1,10 +1,21 @@
+# --- 构建阶段 ---
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+ARG BUILD_MODE=production
+
+# 先复制依赖描述文件，利用层缓存
+COPY package.json package-lock.json ./
+RUN npm install
+
+# 再复制源码，构建
+COPY . .
+RUN npm run type-check && npm run build:${BUILD_MODE}
+
+# --- 生产阶段 ---
 FROM nginx:alpine
-
-# 安装 curl 用于健康检查
 RUN apk add --no-cache curl
-
-COPY dist/ /usr/share/nginx/html/
-
+COPY --from=builder /app/dist/ /usr/share/nginx/html/
+RUN chmod -R 755 /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-
 EXPOSE 80

Jenkinsfile

@@ -1,88 +1,40 @@
 pipeline {
-	agent none  // 全局不指定，局部单独声明
+    agent none
     environment {
-		IMAGE_NAME = 'lpt-fe:0.0'
+        IMAGE_NAME = 'lpt-fe:0.0'
         CONTAINER_NAME = 'LPT_FE'
-        HOST_PORT = '5158'
         CONTAINER_PORT = '80'
     }
     stages {
-		stage('Install Dependencies') {
-			agent {
-				docker {
-					image 'node:20-alpine'
-                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
-                }
-            }
+        stage('构建 Docker 镜像') {
+            agent any
             steps {
-				sh '''
-                  npm config set cache /.npm
-                  npm install
-                '''
+                sh 'docker build --build-arg BUILD_MODE=production -t $IMAGE_NAME .'
             }
         }
-
-        stage('Type Check & Build') {
-			agent {
-				docker {
-					image 'node:20-alpine'
-                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
-                }
-            }
+        stage('部署容器') {
+            agent any
             steps {
-				sh '''
-                  npm run type-check
-                  npm run build
-                '''
-            }
-        }
-
-        stage('Build Docker Image') {
-			agent any  // Jenkins默认节点，有Docker命令
-            steps {
-				sh '''
-                  docker build -t $IMAGE_NAME .
-                '''
-            }
-        }
-
-        stage('Run Docker Container') {
-			agent any
-            steps {
-				sh '''
+                sh '''
+                  docker network create traefik-public || true
                   docker rm -f $CONTAINER_NAME || true
                   docker run -d --name $CONTAINER_NAME \\
-                    -p $HOST_PORT:$CONTAINER_PORT \\
-                    --health-cmd="curl -f http://localhost:80 || exit 1" \\
-                    --health-interval=5s \\
-                    --health-retries=3 \\
-                    --restart=always \\
+                    --network traefik-public \\
+                    --label "traefik.enable=true" \\
+                    --label "traefik.docker.network=traefik-public" \\
+                    --label 'traefik.http.routers.lpt-fe.rule=Host(`lpt.cat-shark.xyz`)' \\
+                    --label "traefik.http.routers.lpt-fe.entrypoints=websecure" \\
+                    --label "traefik.http.routers.lpt-fe.tls.certresolver=le" \\
+                    --label "traefik.http.routers.lpt-fe.service=lpt-fe" \\
+                    --label "traefik.http.services.lpt-fe.loadbalancer.server.port=$CONTAINER_PORT" \\
                     $IMAGE_NAME
                 '''
             }
         }
-
-        stage('Check Docker Status') {
+        stage('健康检查') {
             agent any
             steps {
-                script {
-                    def lastStatus = ''
-                    timeout(time: 60, unit: 'SECONDS') {
-                        waitUntil {
-                            def status = sh(
-                                script: "docker inspect -f '{{.State.Health.Status}}' $CONTAINER_NAME || echo 'unhealthy'",
-                                returnStdout: true
-                            ).trim()
-
-                            if (status != lastStatus) {
-                                echo "Container health: ${status}"
-                                lastStatus = status
-                            }
-
-                            return (status == 'healthy')
-                        }
-                    }
-                }
+                sh 'sleep 5 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
             }
         }
     }

Jenkinsfile-dev

@@ -0,0 +1,41 @@
+pipeline {
+    agent none
+    environment {
+        IMAGE_NAME = 'lpt-fe-dev:0.0'
+        CONTAINER_NAME = 'LPT_FE-dev'
+        CONTAINER_PORT = '80'
+    }
+    stages {
+        stage('构建 Docker 镜像') {
+            agent any
+            steps {
+                sh 'docker build --build-arg BUILD_MODE=dev -t $IMAGE_NAME .'
+            }
+        }
+        stage('部署容器') {
+            agent any
+            steps {
+                sh '''
+                  docker network create traefik-public || true
+                  docker rm -f $CONTAINER_NAME || true
+                  docker run -d --name $CONTAINER_NAME \\
+                    --network traefik-public \\
+                    --label "traefik.enable=true" \\
+                    --label "traefik.docker.network=traefik-public" \\
+                    --label 'traefik.http.routers.lpt-fe-dev.rule=Host(`lpt-dev.cat-shark.xyz`)' \\
+                    --label "traefik.http.routers.lpt-fe-dev.entrypoints=websecure" \\
+                    --label "traefik.http.routers.lpt-fe-dev.tls.certresolver=le" \\
+                    --label "traefik.http.routers.lpt-fe-dev.service=lpt-fe-dev" \\
+                    --label "traefik.http.services.lpt-fe-dev.loadbalancer.server.port=$CONTAINER_PORT" \\
+                    $IMAGE_NAME
+                '''
+            }
+        }
+        stage('健康检查') {
+            agent any
+            steps {
+                sh 'sleep 5 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
+            }
+        }
+    }
+}

e2e/auth-guard.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Auth guard', () => {
+  test('redirects to /login when not authenticated', async ({ page }) => {
+    // Ensure no auth state
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.removeItem('isLoggedIn'));
+    await page.goto('/welcome');
+
+    await expect(page).toHaveURL(/\/login/);
+    await expect(page.locator('.login-page')).toBeVisible();
+  });
+
+  test('redirects / to /login when not authenticated', async ({ page }) => {
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.removeItem('isLoggedIn'));
+    await page.goto('/');
+
+    await expect(page).toHaveURL(/\/login/);
+  });
+
+  test('allows access to /welcome when authenticated', async ({ page }) => {
+    await page.route('**/api/review/feed', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, data: [] }),
+      }),
+    );
+
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/welcome');
+
+    await expect(page).toHaveURL(/\/welcome/);
+    await expect(page.locator('.welcome-page')).toBeVisible();
+  });
+});

e2e/login.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+
+const mockLoginSuccess = { code: 200, message: '登录成功' };
+const mockLoginFailure = { code: 401, message: '账号或密码错误' };
+const mockTasks = { code: 200, data: { records: [] } };
+const mockFeed = { code: 200, data: [] };
+
+test.describe('Login page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/login');
+    await page.waitForSelector('.login-page', { timeout: 10_000 });
+  });
+
+  test('renders the login form with title and inputs', async ({ page }) => {
+    await expect(page.locator('h2')).toContainText('账号登录');
+    await expect(page.locator('.login-form')).toBeVisible();
+    // Element Plus inputs
+    const inputs = page.locator('.el-input');
+    await expect(inputs).toHaveCount(2);
+    await expect(page.locator('.submit-btn')).toBeVisible();
+  });
+
+  test('shows validation errors when fields are empty', async ({ page }) => {
+    await page.locator('.submit-btn').click();
+    // Element Plus validation shows error messages
+    await expect(page.locator('.el-form-item__error').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('shows error on invalid credentials', async ({ page }) => {
+    await page.route('**/api/login**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockLoginFailure),
+      }),
+    );
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+
+    // 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');
+    await usernameInput.fill('wronguser');
+    await passwordInput.fill('wrongpass');
+    await page.locator('.submit-btn').click();
+
+    // Element Plus error message appears in a popup
+    await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 });
+  });
+
+  test('successful login navigates to /welcome', async ({ page }) => {
+    await page.route('**/api/login**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockLoginSuccess),
+      }),
+    );
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      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');
+    await usernameInput.fill('admin');
+    await passwordInput.fill('password123');
+    await page.locator('.submit-btn').click();
+
+    await expect(page).toHaveURL(/\/welcome/, { timeout: 10_000 });
+    const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
+    expect(isLoggedIn).toBe('true');
+  });
+});

e2e/navigation.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+const mockTasks = { code: 200, data: { records: [] } };
+const mockFeed = { code: 200, data: [] };
+
+test.describe('Header navigation', () => {
+  test('shows brand title on login page', async ({ page }) => {
+    await page.goto('/login');
+    await expect(page.locator('.login-page')).toBeVisible({ timeout: 10_000 });
+    await expect(page.locator('.login-panel h1')).toBeVisible();
+  });
+
+  test('shows logout button on authenticated pages', async ({ page }) => {
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/welcome');
+    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
+    await expect(page.locator('.head .logout-btn')).toBeVisible();
+  });
+
+  test('logout clears auth and redirects to /login', async ({ page }) => {
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/welcome');
+    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
+    await page.locator('.head .logout-btn').click();
+    await expect(page).toHaveURL(/\/login/, { timeout: 5000 });
+    const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
+    expect(isLoggedIn).toBeNull();
+  });
+
+  test('back button shows on sub-pages and navigates to /welcome', async ({ page }) => {
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/study');
+    await page.waitForSelector('.study-page', { timeout: 10_000 });
+    await expect(page.locator('.head .back-btn')).toBeVisible();
+    await page.locator('.head .back-btn').click();
+    await expect(page).toHaveURL(/\/welcome/);
+  });
+
+  test('no back button on welcome page', async ({ page }) => {
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/welcome');
+    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
+    await expect(page.locator('.head .back-btn')).not.toBeVisible();
+  });
+});

e2e/review.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+
+const mockTasksData = {
+  code: 200,
+  data: {
+    records: [
+      {
+        taskNum: 'T001',
+        taskName: '学习 Vue3',
+        reportCount: 3,
+        fragmentCount: 5,
+        effectiveTime: '2h 30m',
+      },
+      {
+        taskNum: 'T002',
+        taskName: '学习 TypeScript',
+        reportCount: 1,
+        fragmentCount: 2,
+        effectiveTime: '1h 15m',
+      },
+    ],
+  },
+};
+const mockTasksEmpty = { code: 200, data: { records: [] } };
+const mockFeed = { code: 200, data: [] };
+
+test.describe('Review page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTasksData),
+      }),
+    );
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/review');
+    await page.waitForSelector('.review-page', { timeout: 10_000 });
+  });
+
+  test('displays summary metrics and task table', 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);
+  });
+
+  test('shows empty state when no tasks', async ({ page }) => {
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTasksEmpty),
+      }),
+    );
+
+    await page.goto('/review');
+    await page.waitForSelector('.review-page', { timeout: 10_000 });
+    await expect(page.locator('.metric-card').first().locator('strong')).toContainText('0');
+  });
+});

e2e/start-task.spec.ts

@@ -0,0 +1,180 @@
+import { test, expect } from '@playwright/test';
+
+const mockSessionOngoing = {
+  code: 200,
+  data: {
+    sessionNum: 'SESSION_001',
+    sessionState: 'ONGOING',
+    taskName: '学习 Vue3',
+    taskNum: 'T001',
+    startTime: '2026-05-30T10:00:00',
+    endTime: null,
+    lastStartTime: '2026-05-30T10:00:00',
+    actualTime: 0,
+    effectiveTime: 0,
+    effectivenessRatio: '--',
+    pointerPosition: 1500000,
+    systemMessage: '',
+  },
+};
+
+const mockSessionPaused = {
+  code: 200,
+  data: {
+    ...mockSessionOngoing.data,
+    sessionState: 'PAUSED',
+    lastStartTime: '2026-05-30T10:05:00',
+    actualTime: 300,
+    effectiveTime: 300,
+  },
+};
+
+const mockApiResponse = (code = 200, data: any = null, message = '请求成功') => ({
+  code,
+  message,
+  data,
+});
+
+test.describe('StartTask - 暂停后继续', () => {
+  test.beforeEach(async ({ page }) => {
+    // 模拟登录
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+
+    // mock startOrContinue API（初始加载返回 ONGOING 状态）
+    await page.route('**/api/tasks/*/study-sessions/start-or-continue', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockSessionOngoing),
+      }),
+    );
+
+    // mock fragments API
+    await page.route('**/api/study-sessions/*/all-fragments', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse(200, [])),
+      }),
+    );
+  });
+
+  test('暂停后点击开始，应触发 continue API', async ({ page }) => {
+    // 记录 API 调用
+    const apiCalls: string[] = [];
+
+    // mock pause API
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/pause', (route) => {
+      apiCalls.push('pause');
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse()),
+      });
+    });
+
+    // mock continue API
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/continue', (route) => {
+      apiCalls.push('continue');
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse()),
+      });
+    });
+
+    // 进入 start-task 页面
+    await page.goto('/start-task/T001');
+    await page.waitForSelector('.start-page', { timeout: 10_000 });
+
+    // 等待计时器启动
+    await expect(page.locator('.status-text')).toContainText('进行中');
+
+    // 点击暂停按钮
+    await page.locator('button', { hasText: '暂停' }).click();
+
+    // 验证暂停 API 被调用
+    expect(apiCalls).toContain('pause');
+
+    // 验证状态变为已暂停
+    await expect(page.locator('.status-text')).toContainText('已暂停');
+
+    // 点击开始按钮
+    await page.locator('button', { hasText: '开始' }).click();
+
+    // 验证 continue API 被调用
+    expect(apiCalls).toContain('continue');
+
+    // 验证状态恢复为进行中
+    await expect(page.locator('.status-text')).toContainText('进行中');
+  });
+
+  test('暂停后点击开始，不暂停时开始不应触发 continue API', async ({ page }) => {
+    const apiCalls: string[] = [];
+
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/pause', (route) => {
+      apiCalls.push('pause');
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse()),
+      });
+    });
+
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/continue', (route) => {
+      apiCalls.push('continue');
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse()),
+      });
+    });
+
+    await page.goto('/start-task/T001');
+    await page.waitForSelector('.start-page', { timeout: 10_000 });
+    await expect(page.locator('.status-text')).toContainText('进行中');
+
+    // ONGOING 状态下，开始按钮是 disabled 的，不应触发 continue
+    const startBtn = page.locator('button', { hasText: '开始' });
+    await expect(startBtn).toBeDisabled();
+
+    // continue API 不应被调用
+    expect(apiCalls).not.toContain('continue');
+  });
+
+  test('暂停后结束会话，应正确调用 ended API 并展示提示', async ({ page }) => {
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/pause', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse()),
+      }),
+    );
+
+    await page.route('**/api/study-sessions/SESSION_001/study-sessions/ended', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockApiResponse(200, null, '本次有效学习时间不足10分钟，不计入总学习时间')),
+      }),
+    );
+
+    await page.goto('/start-task/T001');
+    await page.waitForSelector('.start-page', { timeout: 10_000 });
+
+    // 暂停
+    await page.locator('button', { hasText: '暂停' }).click();
+    await expect(page.locator('.status-text')).toContainText('已暂停');
+
+    // 结束会话
+    await page.locator('button', { hasText: '结束会话' }).click();
+
+    // 在弹窗中输入总结内容
+    await page.locator('.el-dialog textarea').fill('测试总结');
+    await page.locator('.el-dialog button', { hasText: '确认结束' }).click();
+
+    // 应看到 warning 提示（有效时间不足）
+    await expect(page.locator('.el-message--warning')).toBeVisible({ timeout: 5000 });
+  });
+});

e2e/study.spec.ts

@@ -0,0 +1,111 @@
+import { test, expect } from '@playwright/test';
+
+const mockTasks = {
+  code: 200,
+  data: {
+    records: [
+      {
+        id: 1,
+        taskNum: 'T001',
+        taskName: '学习 Vue3 组合式 API',
+        taskDescription: '掌握 Composition API 的核心概念',
+        taskPriority: 5,
+        materialUrl: 'https://vuejs.org/guide',
+        lastLearningStatus: '进行中',
+      },
+      {
+        id: 2,
+        taskNum: 'T002',
+        taskName: 'TypeScript 类型体操',
+        taskDescription: '练习 TypeScript 高级类型',
+        taskPriority: 3,
+        materialUrl: '',
+        lastLearningStatus: '未开始',
+      },
+    ],
+  },
+};
+const mockTasksEmpty = { code: 200, data: { records: [] } };
+const mockFeed = { code: 200, data: [] };
+
+const authAndNavigate = async (page: any) => {
+  await page.goto('/login');
+  await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+};
+
+test.describe('Study page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/tasks**', (route) => {
+      const url = route.request().url();
+      if (url.includes('/tasks') && !url.includes('/tasks/')) {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(mockTasks),
+        });
+      }
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, data: {} }),
+      });
+    });
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+
+    await authAndNavigate(page);
+    await page.goto('/study');
+    await page.waitForSelector('.study-page', { timeout: 10_000 });
+  });
+
+  test('displays task list with names and priorities', async ({ page }) => {
+    const taskItems = page.locator('.task-list-item');
+    await expect(taskItems).toHaveCount(2);
+    await expect(taskItems.first().locator('.task-name')).toContainText('学习 Vue3 组合式 API');
+    await expect(taskItems.nth(1).locator('.task-name')).toContainText('TypeScript 类型体操');
+  });
+
+  test('selecting a task shows its details', async ({ page }) => {
+    const taskItems = page.locator('.task-list-item');
+    await taskItems.nth(1).click();
+    await expect(page.locator('.detail-head h3')).toContainText('TypeScript 类型体操');
+  });
+
+  test('clicking add navigates to add-task form', async ({ page }) => {
+    await page.locator('.action-card').locator('button', { hasText: '添加任务' }).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 expect(page).toHaveURL(/\/update-task/);
+  });
+
+  test('delete task removes it from the list', async ({ page }) => {
+    await page.route('**/api/tasks/1', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, message: '删除成功' }),
+      }),
+    );
+
+    await page.locator('.action-card').locator('button', { hasText: '删除任务' }).click();
+    await expect(page.locator('.task-list-item')).toHaveCount(1, { timeout: 5000 });
+  });
+
+  test('shows empty state when no tasks', async ({ page }) => {
+    await page.route('**/api/tasks**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTasksEmpty),
+      }),
+    );
+
+    await page.goto('/study');
+    await page.waitForSelector('.study-page', { timeout: 10_000 });
+    await expect(page.locator('.el-empty')).toBeVisible({ timeout: 5000 });
+  });
+});

e2e/task-form.spec.ts

@@ -0,0 +1,92 @@
+import { test, expect } from '@playwright/test';
+
+const mockFeed = { code: 200, data: [] };
+
+const loginAndGo = async (page: any, url: string) => {
+  await page.goto('/login');
+  await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+  await page.goto(url);
+  await page.waitForSelector('.task-form-page', { timeout: 10_000 });
+};
+
+test.describe('Task form', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/review/feed**', (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
+    );
+  });
+
+  test('add-task form renders empty fields and "添加" button', async ({ page }) => {
+    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('添加');
+  });
+
+  test('submitting add-task sends POST and navigates to /study', async ({ page }) => {
+    await page.route('**/api/tasks', (route) => {
+      if (route.request().method() === 'POST') {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ code: 200, message: '创建成功' }),
+        });
+      }
+      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 200, data: { records: [] } }) });
+    });
+    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 expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
+  });
+
+  test('update-task loads existing data and submits PUT', async ({ page }) => {
+    const mockTask = {
+      code: 200,
+      data: {
+        id: 1,
+        taskName: '已有任务',
+        taskDescription: '已有描述',
+        materialURL: 'https://example.com',
+        urgency: 3,
+        importance: 4,
+        contentDifficulty: 2,
+        futureValue: 5,
+        subjectivePriority: 1,
+      },
+    };
+
+    await page.route('**/api/tasks/1', (route) => {
+      if (route.request().method() === 'PUT') {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ code: 200, message: '更新成功' }),
+        });
+      }
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTask),
+      });
+    });
+
+    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 page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('更新后的任务');
+    await page.locator('.action-row button').first().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 expect(page).toHaveURL(/\/study/);
+  });
+});

e2e/welcome.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Welcome page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/review/feed', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, data: [] }),
+      }),
+    );
+
+    await page.goto('/login');
+    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
+    await page.goto('/welcome');
+    await page.waitForSelector('.welcome-page', { timeout: 10_000 });
+  });
+
+  test('shows welcome banner and quick action cards', async ({ page }) => {
+    await expect(page.locator('.page-title')).toContainText('欢迎回来');
+    await expect(page.locator('.page-subtitle')).toBeVisible();
+    await expect(page.locator('.quick-card')).toHaveCount(2);
+  });
+
+  test('clicking start study navigates to /study', async ({ page }) => {
+    await page.locator('.quick-card').first().locator('button').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 expect(page).toHaveURL(/\/review/);
+  });
+});

package.json

@@ -5,10 +5,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
+    "build:dev": "vite build --mode development",
     "build": "vite build --mode production",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
+    "type-check": "vue-tsc --build --force",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "async-validator": "^4.2.5",
@@ -22,13 +27,18 @@
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
+    "@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",
+    "@vue/test-utils": "^2.4.10",
     "@vue/tsconfig": "^0.5.1",
+    "jsdom": "^24.1.3",
     "npm-run-all2": "^7.0.1",
     "typescript": "~5.6.0",
     "vite": "^5.4.10",
+    "vitest": "^2.1.9",
     "vue-tsc": "^2.1.6"
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:5158',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+      },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5158',
+    reuseExistingServer: !process.env.CI,
+    timeout: 30_000,
+  },
+});

src/App.vue

@@ -1,50 +1,99 @@
 <script setup lang="ts">
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 </script>
 
 <template>
-  <div class="login">
-    <el-container class="common-layout">
-      <el-header class="header">
+  <div class="app-shell">
+    <div class="bg-orb bg-orb-left"></div>
+    <div class="bg-orb bg-orb-right"></div>
+    <el-container class="shell-container">
+      <el-header class="shell-header">
         <MyHead />
       </el-header>
-      <el-main class="main-content">
-          <RouterView />
+      <el-main class="shell-main">
+        <RouterView v-slot="{ Component }">
+          <Transition name="fade-up" mode="out-in">
+            <component :is="Component" :key="route.fullPath" />
+          </Transition>
+        </RouterView>
       </el-main>
-      <el-footer class="footer">
-        <MyFooter/>
+      <el-footer class="shell-footer">
+        <MyFooter />
       </el-footer>
     </el-container>
   </div>
 </template>
 
 <style scoped>
-#app {
-  margin: 0px 0px;
-}
-
-*{
-  padding:0px
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-size: cover;
-}
-
-.common-layout {
-  min-width: 100vw;
+.app-shell {
+  position: relative;
   min-height: 100vh;
+  overflow: hidden;
 }
 
-.main-content {
+.shell-container {
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.shell-header {
+  height: auto;
+  padding: 18px 20px 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}.shell-main {
+  max-width: 1240px;
+  width: 100%;
   margin: 0 auto;
-  display: flex;
-  flex-direction: column;
+  padding: 18px 20px 24px;
 }
 
+.shell-footer {
+  height: auto;
+  padding: 0 20px 18px;
+}
+
+.bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(1px);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-orb-left {
+  width: 300px;
+  height: 300px;
+  top: -120px;
+  left: -90px;
+  background: radial-gradient(circle at center, rgba(47, 143, 104, 0.35), transparent 70%);
+}
+
+.bg-orb-right {
+  width: 360px;
+  height: 360px;
+  right: -130px;
+  bottom: -170px;
+  background: radial-gradient(circle at center, rgba(67, 168, 121, 0.3), transparent 70%);
+}
+
+@media (max-width: 768px) {
+  .shell-header {
+    padding: 12px 12px 0;
+  }
+
+  .shell-main {
+    padding: 12px 12px 18px;
+  }
+
+  .shell-footer {
+    padding: 0 12px 12px;
+  }
+}
 </style>

src/__tests__/api/login.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('@/utils/request', () => ({
+  default: {
+    post: vi.fn(),
+    get: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import request from '@/utils/request'
+import { login, logout } from '@/api/login'
+
+const mockedRequest = vi.mocked(request)
+
+describe('login API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('login sends POST to /login with credentials', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, message: 'OK' })
+    const result = await login('admin', '123456')
+    expect(mockedRequest.post).toHaveBeenCalledWith('/login', { username: 'admin', password: '123456' })
+    expect(result).toEqual({ code: 200, message: 'OK' })
+  })
+
+  it('logout sends POST to /logout', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, message: '已退出' })
+    const result = await logout()
+    expect(mockedRequest.post).toHaveBeenCalledWith('/logout')
+    expect(result).toEqual({ code: 200, message: '已退出' })
+  })
+})

src/__tests__/api/reportFragments.spec.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('@/utils/request', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import request from '@/utils/request'
+import { createFragments } from '@/api/reportFragments'
+
+const mockedRequest = vi.mocked(request)
+
+describe('reportFragments API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  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', {
+      sessionNum: 'S001',
+      content: '学习了递归',
+    })
+    expect(result).toEqual({ code: 200, data: { id: 1 } })
+  })
+})

src/__tests__/api/review.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('@/utils/request', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import request from '@/utils/request'
+import { getReviewFeed, getReportDetail, getFragmentDetail, getTaskReview } from '@/api/review'
+
+const mockedRequest = vi.mocked(request)
+
+describe('review API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('getReviewFeed calls GET /review/feed with limit', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
+    const result = await getReviewFeed(10)
+    expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 10 })
+    expect(result).toEqual({ code: 200, data: [] })
+  })
+
+  it('getReviewFeed uses default limit of 30', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
+    await getReviewFeed()
+    expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 30 })
+  })
+
+  it('getReportDetail calls GET /review/report/:id', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: { id: 1 } })
+    const result = await getReportDetail(1)
+    expect(mockedRequest.get).toHaveBeenCalledWith('/review/report/1')
+    expect(result).toEqual({ code: 200, data: { id: 1 } })
+  })
+
+  it('getFragmentDetail calls GET /review/fragment/:id', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: { id: 5 } })
+    await getFragmentDetail(5)
+    expect(mockedRequest.get).toHaveBeenCalledWith('/review/fragment/5')
+  })
+
+  it('getTaskReview calls GET /review/task/:taskNum', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: {} })
+    await getTaskReview('T001')
+    expect(mockedRequest.get).toHaveBeenCalledWith('/review/task/T001')
+  })
+})

src/__tests__/api/studySessions.spec.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('@/utils/request', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import request from '@/utils/request'
+import {
+  continueSession,
+  pauseSession,
+  endSession,
+  startOrContinueStudySession,
+  getSessionDetail,
+} from '@/api/studySessions'
+
+const mockedRequest = vi.mocked(request)
+
+describe('studySessions API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('continueSession sends POST to correct endpoint', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, data: null })
+    await continueSession('S001')
+    expect(mockedRequest.post).toHaveBeenCalledWith('/study-sessions/S001/study-sessions/continue')
+  })
+
+  it('pauseSession sends POST with endTime param when provided', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, data: null })
+    const endTime = new Date('2024-01-15T10:30:00Z')
+    await pauseSession('S001', endTime)
+    expect(mockedRequest.post).toHaveBeenCalledWith(
+      '/study-sessions/S001/study-sessions/pause',
+      null,
+      { params: { endTime: endTime.toISOString() } }
+    )
+  })
+
+  it('pauseSession sends POST with null params when endTime not provided', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, data: null })
+    await pauseSession('S001')
+    expect(mockedRequest.post).toHaveBeenCalledWith(
+      '/study-sessions/S001/study-sessions/pause',
+      null,
+      { params: null }
+    )
+  })
+
+  it('endSession sends POST with default content', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, data: null })
+    await endSession('S001')
+    expect(mockedRequest.post).toHaveBeenCalledWith(
+      '/study-sessions/S001/study-sessions/ended',
+      { content: '任务结束' }
+    )
+  })
+
+  it('endSession sends POST with custom content', async () => {
+    mockedRequest.post.mockResolvedValue({ code: 200, data: null })
+    await endSession('S001', '自定义结束')
+    expect(mockedRequest.post).toHaveBeenCalledWith(
+      '/study-sessions/S001/study-sessions/ended',
+      { content: '自定义结束' }
+    )
+  })
+
+  it('startOrContinueStudySession sends GET to correct endpoint', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: { sessionNum: 'S002' } })
+    const result = await startOrContinueStudySession('T001')
+    expect(mockedRequest.get).toHaveBeenCalledWith('/tasks/T001/study-sessions/start-or-continue')
+    expect(result).toEqual({ code: 200, data: { sessionNum: 'S002' } })
+  })
+
+  it('getSessionDetail sends GET to correct endpoint', async () => {
+    mockedRequest.get.mockResolvedValue({ code: 200, data: { id: 1 } })
+    await getSessionDetail('S001')
+    expect(mockedRequest.get).toHaveBeenCalledWith('/study-sessions/S001')
+  })
+})

src/__tests__/components/Login.spec.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import { reactive, ref } from 'vue'
+
+// Mock API
+vi.mock('@/api/login', () => ({
+  login: vi.fn(),
+  logout: vi.fn(),
+}))
+
+// Mock Element Plus
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+import { login } from '@/api/login'
+import { ElMessage } from 'element-plus'
+
+function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/login', component: { template: '<div/>' } },
+      { path: '/welcome', component: { template: '<div/>' } },
+    ],
+  })
+}
+
+describe('Login.vue logic', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  describe('isNotEmpty validator', () => {
+    it('calls callback with error message when value is empty', () => {
+      const callback = vi.fn()
+      const rule = { message: '请输入账号！' }
+      // isNotEmpty logic
+      const value = ''
+      if (!value) {
+        callback(rule.message)
+      } else {
+        callback()
+      }
+      expect(callback).toHaveBeenCalledWith('请输入账号！')
+    })
+
+    it('calls callback without error when value is present', () => {
+      const callback = vi.fn()
+      const rule = { message: '请输入账号！' }
+      const value = 'admin'
+      if (!value) {
+        callback(rule.message)
+      } else {
+        callback()
+      }
+      expect(callback).toHaveBeenCalledWith()
+    })
+  })
+
+  describe('submitForm logic', () => {
+    it('sets localStorage and navigates on successful login', async () => {
+      vi.mocked(login).mockResolvedValue({ code: 200, message: '登录成功' } as any)
+      const router = createTestRouter()
+      await router.push('/login')
+      await router.isReady()
+
+      // Simulate submitForm logic
+      const username = 'admin'
+      const password = '123456'
+      const result = await login(username, password)
+
+      if (result.code === 200) {
+        localStorage.setItem('isLoggedIn', 'true')
+        ElMessage.success(result.message)
+        await router.push('/welcome')
+      }
+
+      expect(localStorage.getItem('isLoggedIn')).toBe('true')
+      expect(ElMessage.success).toHaveBeenCalledWith('登录成功')
+      expect(router.currentRoute.value.path).toBe('/welcome')
+    })
+
+    it('shows error message on failed login', async () => {
+      vi.mocked(login).mockResolvedValue({ code: 401, message: '密码错误' } as any)
+
+      const result = await login('admin', 'wrong')
+      if (result.code !== 200) {
+        ElMessage.error(result.message)
+      }
+
+      expect(ElMessage.error).toHaveBeenCalledWith('密码错误')
+      expect(localStorage.getItem('isLoggedIn')).toBeNull()
+    })
+
+    it('does not submit when already loading', async () => {
+      const loading = ref(true)
+      // Simulate guard: if (!formEl || loading.value) return;
+      if (loading.value) {
+        // Early return - no API call
+      }
+      expect(login).not.toHaveBeenCalled()
+    })
+  })
+})

src/__tests__/components/MyHead.spec.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { computed, ref } from 'vue'
+
+vi.mock('@/api/login', () => ({
+  login: vi.fn(),
+  logout: vi.fn().mockResolvedValue({ code: 200 }),
+}))
+
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+import { logout } from '@/api/login'
+import { ElMessage } from 'element-plus'
+
+describe('MyHead.vue logic', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  describe('route-based computed properties', () => {
+    it('isLoginRoute is true when path is /login', () => {
+      const routePath = ref('/login')
+      const isLoginRoute = computed(() => routePath.value === '/login')
+      expect(isLoginRoute.value).toBe(true)
+    })
+
+    it('isLoginRoute is false for other paths', () => {
+      const routePath = ref('/welcome')
+      const isLoginRoute = computed(() => routePath.value === '/login')
+      expect(isLoginRoute.value).toBe(false)
+    })
+
+    it('showBackButton is true for non-login, non-welcome routes', () => {
+      const routePath = ref('/study')
+      const showBackButton = computed(() => routePath.value !== '/login' && routePath.value !== '/welcome')
+      expect(showBackButton.value).toBe(true)
+    })
+
+    it('showBackButton is false on welcome route', () => {
+      const routePath = ref('/welcome')
+      const showBackButton = computed(() => routePath.value !== '/login' && routePath.value !== '/welcome')
+      expect(showBackButton.value).toBe(false)
+    })
+
+    it('showBackButton is false on login route', () => {
+      const routePath = ref('/login')
+      const showBackButton = computed(() => routePath.value !== '/login' && routePath.value !== '/welcome')
+      expect(showBackButton.value).toBe(false)
+    })
+
+    it('pageTitle is derived from route meta', () => {
+      const meta = { title: '学习任务' }
+      const pageTitle = computed(() => meta?.title as string | undefined)
+      expect(pageTitle.value).toBe('学习任务')
+    })
+
+    it('pageTitle is undefined when no meta title', () => {
+      const meta = {}
+      const pageTitle = computed(() => meta?.title as string | undefined)
+      expect(pageTitle.value).toBeUndefined()
+    })
+  })
+
+  describe('handleLogout logic', () => {
+    it('clears login state and navigates to login', async () => {
+      localStorage.setItem('isLoggedIn', 'true')
+
+      // Simulate handleLogout
+      try {
+        await logout()
+      } catch {
+        // Backend failure shouldn't block logout
+      } finally {
+        localStorage.removeItem('isLoggedIn')
+        ElMessage.success('已退出登录')
+      }
+
+      expect(localStorage.getItem('isLoggedIn')).toBeNull()
+      expect(ElMessage.success).toHaveBeenCalledWith('已退出登录')
+    })
+
+    it('clears login state even when API call fails', async () => {
+      vi.mocked(logout).mockRejectedValue(new Error('Network error'))
+      localStorage.setItem('isLoggedIn', 'true')
+
+      try {
+        await logout()
+      } catch {
+        // Expected
+      } finally {
+        localStorage.removeItem('isLoggedIn')
+        ElMessage.success('已退出登录')
+      }
+
+      expect(localStorage.getItem('isLoggedIn')).toBeNull()
+      expect(ElMessage.success).toHaveBeenCalledWith('已退出登录')
+    })
+  })
+})

src/__tests__/components/StartTask.spec.ts

@@ -0,0 +1,276 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref, reactive } from 'vue'
+
+// Mock API
+vi.mock('@/api/studySessions', () => ({
+  continueSession: vi.fn(),
+  pauseSession: vi.fn(),
+  endSession: vi.fn(),
+  startOrContinueStudySession: vi.fn(),
+  getSessionDetail: vi.fn(),
+}))
+
+vi.mock('@/api/reportFragments', () => ({
+  getFragmentsBySession: vi.fn(),
+  updateFragments: vi.fn(),
+}))
+
+import {
+  continueSession,
+  pauseSession,
+  endSession,
+  startOrContinueStudySession,
+} from '@/api/studySessions'
+
+const mockedContinueSession = vi.mocked(continueSession)
+const mockedPauseSession = vi.mocked(pauseSession)
+const mockedEndSession = vi.mocked(endSession)
+const mockedStartOrContinue = vi.mocked(startOrContinueStudySession)
+
+// 模拟 StartTask.vue 中的核心状态和方法
+function createSessionSimulator() {
+  const taskInfo = reactive({
+    sessionNum: 'SESSION_001',
+    sessionState: 'ONGOING' as string,
+    taskName: '测试任务',
+    taskNum: 'T001',
+    startTime: '',
+    endTime: '',
+    lastStartTime: '',
+    actualTime: 0,
+    effectiveTime: 0,
+    effectivenessRatio: '--',
+    pointerPosition: 1500000,
+    systemMessage: '',
+  })
+
+  const timerRunning = ref(true)
+
+  const clear = () => {
+    timerRunning.value = false
+  }
+
+  const runCountdown = (duration: number) => {
+    timerRunning.value = true
+  }
+
+  // 从 StartTask.vue 提取的 stopTimer 逻辑
+  const stopTimer = async () => {
+    const res = await pauseSession(taskInfo.sessionNum)
+    if (res.code === 200) {
+      taskInfo.sessionState = 'PAUSED'
+    }
+    clear()
+  }
+
+  // 从 StartTask.vue 提取的 startTimer 逻辑
+  const startTimer = async () => {
+    if (taskInfo.sessionState === 'PAUSED') {
+      const res = await continueSession(taskInfo.sessionNum)
+      if (res.code === 200) {
+        // ElMessage.success("任务继续")
+      }
+      // loadTaskSession 模拟
+      const sessionRes = await startOrContinueStudySession(taskInfo.taskNum)
+      Object.assign(taskInfo, sessionRes.data)
+    }
+    const duration = taskInfo.pointerPosition || 25 * 60 * 1000
+    runCountdown(duration)
+  }
+
+  // 从 StartTask.vue 提取的 endTimer 逻辑（简化版，跳过 confirm）
+  const endTimer = async (content: string) => {
+    if (!content) return
+    const res = await endSession(taskInfo.sessionNum, content)
+    if (res.code === 200) {
+      if (res.message && res.message !== '请求成功') {
+        // ElMessage.warning(res.message)
+      }
+    }
+    clear()
+  }
+
+  return { taskInfo, timerRunning, stopTimer, startTimer, endTimer, clear }
+}
+
+describe('StartTask.vue 暂停/继续逻辑', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('stopTimer - 暂停', () => {
+    it('调用 pauseSession API', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      const { stopTimer } = createSessionSimulator()
+
+      await stopTimer()
+
+      expect(mockedPauseSession).toHaveBeenCalledWith('SESSION_001')
+    })
+
+    it('暂停成功后 sessionState 应更新为 PAUSED', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      const { taskInfo, stopTimer } = createSessionSimulator()
+
+      expect(taskInfo.sessionState).toBe('ONGOING')
+      await stopTimer()
+      expect(taskInfo.sessionState).toBe('PAUSED')
+    })
+
+    it('暂停后 timerRunning 应为 false', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      const { timerRunning, stopTimer } = createSessionSimulator()
+
+      expect(timerRunning.value).toBe(true)
+      await stopTimer()
+      expect(timerRunning.value).toBe(false)
+    })
+  })
+
+  describe('startTimer - 继续', () => {
+    it('PAUSED 状态下点击开始，应调用 continueSession API', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedContinueSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedStartOrContinue.mockResolvedValue({
+        code: 200,
+        data: {
+          sessionNum: 'SESSION_001',
+          sessionState: 'ONGOING',
+          pointerPosition: 1500000,
+        },
+      } as any)
+
+      const { taskInfo, stopTimer, startTimer } = createSessionSimulator()
+
+      // 先暂停
+      await stopTimer()
+      expect(taskInfo.sessionState).toBe('PAUSED')
+
+      // 再开始
+      await startTimer()
+
+      expect(mockedContinueSession).toHaveBeenCalledWith('SESSION_001')
+    })
+
+    it('PAUSED 状态下点击开始，应调用 loadTaskSession 刷新数据', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedContinueSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedStartOrContinue.mockResolvedValue({
+        code: 200,
+        data: {
+          sessionNum: 'SESSION_001',
+          sessionState: 'ONGOING',
+          pointerPosition: 1200000,
+        },
+      } as any)
+
+      const { taskInfo, stopTimer, startTimer } = createSessionSimulator()
+
+      await stopTimer()
+      await startTimer()
+
+      expect(mockedStartOrContinue).toHaveBeenCalledWith('T001')
+      expect(taskInfo.sessionState).toBe('ONGOING')
+    })
+
+    it('ONGOING 状态下点击开始，不应调用 continueSession API', async () => {
+      mockedStartOrContinue.mockResolvedValue({
+        code: 200,
+        data: { sessionState: 'ONGOING', pointerPosition: 1500000 },
+      } as any)
+
+      const { taskInfo, startTimer } = createSessionSimulator()
+
+      // 直接在 ONGOING 状态调用 startTimer
+      expect(taskInfo.sessionState).toBe('ONGOING')
+      await startTimer()
+
+      expect(mockedContinueSession).not.toHaveBeenCalled()
+    })
+
+    it('开始后 timerRunning 应为 true', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedContinueSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedStartOrContinue.mockResolvedValue({
+        code: 200,
+        data: { sessionState: 'ONGOING', pointerPosition: 1500000 },
+      } as any)
+
+      const { timerRunning, stopTimer, startTimer } = createSessionSimulator()
+
+      await stopTimer()
+      expect(timerRunning.value).toBe(false)
+
+      await startTimer()
+      expect(timerRunning.value).toBe(true)
+    })
+  })
+
+  describe('endTimer - 结束会话', () => {
+    it('调用 endSession API 并传递 content', async () => {
+      mockedEndSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      const { endTimer } = createSessionSimulator()
+
+      await endTimer('学习总结内容')
+
+      expect(mockedEndSession).toHaveBeenCalledWith('SESSION_001', '学习总结内容')
+    })
+
+    it('后端返回 warning 消息时，message 应包含提示信息', async () => {
+      mockedEndSession.mockResolvedValue({
+        code: 200,
+        message: '本次有效学习时间不足10分钟，不计入总学习时间',
+      } as any)
+
+      const { endTimer } = createSessionSimulator()
+      const res = await endSession('SESSION_001', '内容')
+
+      expect(res.message).toBe('本次有效学习时间不足10分钟，不计入总学习时间')
+      expect(res.message).not.toBe('请求成功')
+    })
+
+    it('content 为空时不调用 API', async () => {
+      const { endTimer } = createSessionSimulator()
+
+      await endTimer('')
+
+      expect(mockedEndSession).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('完整暂停→继续→暂停流程', () => {
+    it('多次暂停/继续应正确更新状态和调用 API', async () => {
+      mockedPauseSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedContinueSession.mockResolvedValue({ code: 200, message: '请求成功' } as any)
+      mockedStartOrContinue.mockResolvedValue({
+        code: 200,
+        data: { sessionState: 'ONGOING', pointerPosition: 1500000 },
+      } as any)
+
+      const { taskInfo, stopTimer, startTimer } = createSessionSimulator()
+
+      // 初始状态
+      expect(taskInfo.sessionState).toBe('ONGOING')
+
+      // 第一次暂停
+      await stopTimer()
+      expect(taskInfo.sessionState).toBe('PAUSED')
+      expect(mockedPauseSession).toHaveBeenCalledTimes(1)
+
+      // 继续
+      await startTimer()
+      expect(taskInfo.sessionState).toBe('ONGOING')
+      expect(mockedContinueSession).toHaveBeenCalledTimes(1)
+
+      // 第二次暂停
+      await stopTimer()
+      expect(taskInfo.sessionState).toBe('PAUSED')
+      expect(mockedPauseSession).toHaveBeenCalledTimes(2)
+
+      // 再次继续
+      await startTimer()
+      expect(taskInfo.sessionState).toBe('ONGOING')
+      expect(mockedContinueSession).toHaveBeenCalledTimes(2)
+    })
+  })
+})

src/__tests__/components/TaskForm.spec.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref, reactive } from 'vue'
+
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+import { ElMessage } from 'element-plus'
+
+describe('TaskForm.vue logic', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('priorityOptions', () => {
+    it('contains values 0-5', () => {
+      const priorityOptions = [0, 1, 2, 3, 4, 5]
+      expect(priorityOptions).toEqual([0, 1, 2, 3, 4, 5])
+      expect(priorityOptions.length).toBe(6)
+    })
+  })
+
+  describe('priority state management', () => {
+    it('initializes with all zeros', () => {
+      const priority = reactive({
+        urgency: 0,
+        importance: 0,
+        contentDifficulty: 0,
+        futureValue: 0,
+        subjectivePriority: 0,
+      })
+
+      expect(priority.urgency).toBe(0)
+      expect(priority.importance).toBe(0)
+      expect(priority.contentDifficulty).toBe(0)
+      expect(priority.futureValue).toBe(0)
+      expect(priority.subjectivePriority).toBe(0)
+    })
+
+    it('updates individual priority fields', () => {
+      const priority = reactive({
+        urgency: 0,
+        importance: 0,
+        contentDifficulty: 0,
+        futureValue: 0,
+        subjectivePriority: 0,
+      })
+
+      priority.urgency = 3
+      priority.importance = 5
+
+      expect(priority.urgency).toBe(3)
+      expect(priority.importance).toBe(5)
+      expect(priority.contentDifficulty).toBe(0)
+    })
+  })
+
+  describe('task payload construction', () => {
+    it('builds correct create payload', () => {
+      const taskName = ref('学习递归')
+      const taskDescription = ref('理解递归的基本概念')
+      const materialURL = ref('https://example.com/recursion')
+      const priority = reactive({
+        urgency: 3,
+        importance: 4,
+        contentDifficulty: 2,
+        futureValue: 5,
+        subjectivePriority: 3,
+      })
+
+      const payload = {
+        taskName: taskName.value,
+        taskDescription: taskDescription.value,
+        materialURL: materialURL.value,
+        ...priority,
+      }
+
+      expect(payload).toEqual({
+        taskName: '学习递归',
+        taskDescription: '理解递归的基本概念',
+        materialURL: 'https://example.com/recursion',
+        urgency: 3,
+        importance: 4,
+        contentDifficulty: 2,
+        futureValue: 5,
+        subjectivePriority: 3,
+      })
+    })
+
+    it('builds correct update payload with id', () => {
+      const taskId = 42
+      const taskName = ref('更新后的任务')
+      const taskDescription = ref('')
+      const materialURL = ref('')
+      const priority = reactive({
+        urgency: 1,
+        importance: 2,
+        contentDifficulty: 0,
+        futureValue: 3,
+        subjectivePriority: 4,
+      })
+
+      const payload = {
+        id: taskId,
+        taskName: taskName.value,
+        taskDescription: taskDescription.value,
+        materialURL: materialURL.value,
+        ...priority,
+      }
+
+      expect(payload.id).toBe(42)
+      expect(payload.taskName).toBe('更新后的任务')
+    })
+  })
+
+  describe('loadTask data mapping', () => {
+    it('maps API response to form fields correctly', () => {
+      const apiData = {
+        taskName: '学习DP',
+        taskDescription: '动态规划',
+        materialUrl: 'https://example.com/dp',
+        urgency: 4,
+        importance: 5,
+        contentDifficulty: 3,
+        futureValue: 4,
+        subjectivePriority: 2,
+      }
+
+      const taskName = ref('')
+      const taskDescription = ref('')
+      const materialURL = ref('')
+      const priority = reactive({
+        urgency: 0,
+        importance: 0,
+        contentDifficulty: 0,
+        futureValue: 0,
+        subjectivePriority: 0,
+      })
+
+      // Simulate loadTask mapping
+      taskName.value = apiData.taskName
+      taskDescription.value = apiData.taskDescription
+      materialURL.value = apiData.materialURL || apiData.materialUrl || ''
+      priority.urgency = apiData.urgency
+      priority.importance = apiData.importance
+      priority.contentDifficulty = apiData.contentDifficulty
+      priority.futureValue = apiData.futureValue
+      priority.subjectivePriority = apiData.subjectivePriority
+
+      expect(taskName.value).toBe('学习DP')
+      expect(materialURL.value).toBe('https://example.com/dp')
+      expect(priority.urgency).toBe(4)
+      expect(priority.importance).toBe(5)
+    })
+
+    it('handles materialURL with camelCase variant', () => {
+      const apiData = { materialURL: 'https://example.com/a', materialUrl: 'https://example.com/b' }
+      const result = apiData.materialURL || apiData.materialUrl || ''
+      expect(result).toBe('https://example.com/a')
+    })
+
+    it('falls back to empty string when no material URL', () => {
+      const apiData = {} as any
+      const result = apiData.materialURL || apiData.materialUrl || ''
+      expect(result).toBe('')
+    })
+  })
+
+  describe('redirect after successful action', () => {
+    it('navigates to study page after create/update', () => {
+      const pushTarget = '/study'
+      expect(pushTarget).toBe('/study')
+    })
+  })
+})

src/__tests__/composables/fragment.spec.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+
+const mockInfo = vi.fn()
+const mockSuccess = vi.fn()
+const mockError = vi.fn()
+const mockWarning = vi.fn()
+const mockConfirm = vi.fn()
+
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: mockSuccess,
+    error: mockError,
+    warning: mockWarning,
+    info: mockInfo,
+  },
+  ElMessageBox: {
+    confirm: (...args: any[]) => mockConfirm(...args),
+  },
+}))
+
+vi.mock('@/api/reportFragments', () => ({
+  createFragments: vi.fn(),
+}))
+
+import { createFragments } from '@/api/reportFragments'
+
+describe('useStudyFragment composable logic', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockConfirm.mockResolvedValue('confirm')
+  })
+
+  it('openFragmentDialog resets content and shows dialog', () => {
+    const fragmentContent = ref('old content')
+    const fragmentsDialogVisible = ref(false)
+
+    fragmentContent.value = ''
+    fragmentsDialogVisible.value = true
+
+    expect(fragmentContent.value).toBe('')
+    expect(fragmentsDialogVisible.value).toBe(true)
+  })
+
+  it('closeFragmentDialog hides dialog on confirm', async () => {
+    const fragmentsDialogVisible = ref(true)
+
+    await mockConfirm('确定取消生成吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      fragmentsDialogVisible.value = false
+      mockInfo('已取消生成')
+    })
+
+    expect(fragmentsDialogVisible.value).toBe(false)
+    expect(mockInfo).toHaveBeenCalledWith('已取消生成')
+  })
+
+  it('closeFragmentDialog keeps dialog open on cancel', async () => {
+    const fragmentsDialogVisible = ref(true)
+    mockConfirm.mockRejectedValue('cancel')
+
+    try {
+      await mockConfirm('确定取消生成吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        fragmentsDialogVisible.value = false
+      })
+    } catch {
+      // User cancelled
+    }
+
+    expect(fragmentsDialogVisible.value).toBe(true)
+  })
+
+  it('confirmGenerateFragment warns if content is empty', async () => {
+    const fragmentContent = ref('   ')
+
+    if (!fragmentContent.value.trim()) {
+      mockWarning('请输入学习内容！')
+    }
+
+    expect(mockWarning).toHaveBeenCalledWith('请输入学习内容！')
+    expect(createFragments).not.toHaveBeenCalled()
+  })
+
+  it('confirmGenerateFragment calls API and shows success', async () => {
+    vi.mocked(createFragments).mockResolvedValue({ code: 200 } as any)
+    const fragmentContent = ref('学习了递归算法')
+    const fragmentsDialogVisible = ref(true)
+
+    if (fragmentContent.value.trim()) {
+      await mockConfirm('确定要生成学习残片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info',
+      }).then(async () => {
+        const res = await createFragments('S001', fragmentContent.value)
+        if (res.code === 200) {
+          mockSuccess('学习残片生成成功！')
+          fragmentsDialogVisible.value = false
+        }
+      })
+    }
+
+    expect(createFragments).toHaveBeenCalledWith('S001', '学习了递归算法')
+    expect(mockSuccess).toHaveBeenCalledWith('学习残片生成成功！')
+    expect(fragmentsDialogVisible.value).toBe(false)
+  })
+
+  it('confirmGenerateFragment handles API failure', async () => {
+    vi.mocked(createFragments).mockResolvedValue({ code: 500, message: '生成失败' } as any)
+    const fragmentContent = ref('学习内容')
+
+    if (fragmentContent.value.trim()) {
+      await mockConfirm('确定要生成学习残片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info',
+      }).then(async () => {
+        const res = await createFragments('S001', fragmentContent.value)
+        if (res.code !== 200) {
+          mockError(res.message || '生成学习残片失败')
+        }
+      })
+    }
+
+    expect(mockError).toHaveBeenCalledWith('生成失败')
+  })
+
+  it('confirmGenerateFragment handles network error', async () => {
+    vi.mocked(createFragments).mockRejectedValue(new Error('网络超时'))
+    const fragmentContent = ref('学习内容')
+
+    if (fragmentContent.value.trim()) {
+      await mockConfirm('确定要生成学习残片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info',
+      }).then(async () => {
+        try {
+          await createFragments('S001', fragmentContent.value)
+        } catch (error: any) {
+          mockError(error.message || '请求失败')
+        }
+      })
+    }
+
+    expect(mockError).toHaveBeenCalledWith('网络超时')
+  })
+})

src/__tests__/composables/useTimer.spec.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+// We test the timer composable logic directly since it's a pure Vue composable
+// Extract the logic to test it in isolation
+
+describe('useTimer', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  // Test the core timer logic that the composable uses
+  it('formatTime converts seconds to HH:MM:SS', () => {
+    const formatTime = (totalSeconds: number): string => {
+      const hours = Math.floor(totalSeconds / 3600)
+      const minutes = Math.floor((totalSeconds % 3600) / 60)
+      const seconds = totalSeconds % 60
+      return [hours, minutes, seconds].map(v => String(v).padStart(2, '0')).join(':')
+    }
+
+    expect(formatTime(0)).toBe('00:00:00')
+    expect(formatTime(61)).toBe('00:01:01')
+    expect(formatTime(3661)).toBe('01:01:01')
+    expect(formatTime(59)).toBe('00:00:59')
+    expect(formatTime(3600)).toBe('01:00:00')
+  })
+
+  it('formatTime handles large values', () => {
+    const formatTime = (totalSeconds: number): string => {
+      const hours = Math.floor(totalSeconds / 3600)
+      const minutes = Math.floor((totalSeconds % 3600) / 60)
+      const seconds = totalSeconds % 60
+      return [hours, minutes, seconds].map(v => String(v).padStart(2, '0')).join(':')
+    }
+
+    expect(formatTime(86399)).toBe('23:59:59')
+    expect(formatTime(100000)).toBe('27:46:40')
+  })
+
+  it('timer increments elapsedSeconds over time', () => {
+    let elapsed = 0
+    const interval = setInterval(() => {
+      elapsed++
+    }, 1000)
+
+    vi.advanceTimersByTime(3000)
+    expect(elapsed).toBe(3)
+
+    vi.advanceTimersByTime(2000)
+    expect(elapsed).toBe(5)
+
+    clearInterval(interval)
+  })
+
+  it('timer can be paused and resumed', () => {
+    let elapsed = 0
+    let intervalId: ReturnType<typeof setInterval> | null = null
+
+    const start = () => {
+      if (!intervalId) {
+        intervalId = setInterval(() => { elapsed++ }, 1000)
+      }
+    }
+    const pause = () => {
+      if (intervalId) {
+        clearInterval(intervalId)
+        intervalId = null
+      }
+    }
+
+    start()
+    vi.advanceTimersByTime(2000)
+    expect(elapsed).toBe(2)
+
+    pause()
+    vi.advanceTimersByTime(3000)
+    expect(elapsed).toBe(2) // Should not change while paused
+
+    start()
+    vi.advanceTimersByTime(2000)
+    expect(elapsed).toBe(4)
+
+    pause()
+  })
+})

src/__tests__/router/guard.spec.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createRouter, createMemoryHistory } from 'vue-router'
+
+// We test the guard logic by importing the router and simulating navigation
+// The router in src/router/index.ts uses createWebHistory which requires DOM,
+// so we'll test the guard logic by recreating the key patterns.
+
+describe('route guards', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.restoreAllMocks()
+  })
+
+  function buildRouter() {
+    return createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/login', component: { template: '<div/>' }, meta: { requiresAuth: false } },
+        { path: '/welcome', component: { template: '<div/>' }, meta: { requiresAuth: true } },
+        { path: '/study', component: { template: '<div/>' }, meta: { requiresAuth: true } },
+        { path: '/', redirect: '/login' },
+      ],
+    })
+  }
+
+  it('redirects unauthenticated user from protected route to /login', async () => {
+    const router = buildRouter()
+    router.beforeEach((to, _from, next) => {
+      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+      if (to.meta.requiresAuth && !isLoggedIn) {
+        next({ path: '/login' })
+      } else {
+        next()
+      }
+    })
+
+    await router.push('/welcome')
+    await router.isReady()
+    expect(router.currentRoute.value.path).toBe('/login')
+  })
+
+  it('allows authenticated user to access protected route', async () => {
+    localStorage.setItem('isLoggedIn', 'true')
+    const router = buildRouter()
+    router.beforeEach((to, _from, next) => {
+      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+      if (to.meta.requiresAuth && !isLoggedIn) {
+        next({ path: '/login' })
+      } else {
+        next()
+      }
+    })
+
+    await router.push('/welcome')
+    await router.isReady()
+    expect(router.currentRoute.value.path).toBe('/welcome')
+  })
+
+  it('allows unauthenticated access to /login', async () => {
+    const router = buildRouter()
+    router.beforeEach((to, _from, next) => {
+      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+      if (to.meta.requiresAuth && !isLoggedIn) {
+        next({ path: '/login' })
+      } else {
+        next()
+      }
+    })
+
+    await router.push('/login')
+    await router.isReady()
+    expect(router.currentRoute.value.path).toBe('/login')
+  })
+
+  it('root path redirects to /login', async () => {
+    const router = buildRouter()
+    router.beforeEach((to, _from, next) => {
+      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
+      if (to.meta.requiresAuth && !isLoggedIn) {
+        next({ path: '/login' })
+      } else {
+        next()
+      }
+    })
+
+    await router.push('/')
+    await router.isReady()
+    expect(router.currentRoute.value.path).toBe('/login')
+  })
+})

src/__tests__/setup.ts

@@ -0,0 +1,14 @@
+import { vi } from 'vitest'
+
+// Mock Element Plus components globally
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+  ElMessageBox: {
+    confirm: vi.fn().mockResolvedValue('confirm'),
+  },
+}))

src/__tests__/utils/request.spec.ts

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const { mockGet, mockPost, mockPut, mockDel } = vi.hoisted(() => ({
+  mockGet: vi.fn(),
+  mockPost: vi.fn(),
+  mockPut: vi.fn(),
+  mockDel: vi.fn(),
+}))
+
+vi.mock('axios', () => ({
+  default: {
+    create: vi.fn(() => ({
+      get: mockGet,
+      post: mockPost,
+      put: mockPut,
+      delete: mockDel,
+      interceptors: {
+        request: { use: vi.fn() },
+        response: { use: vi.fn() },
+      },
+    })),
+  },
+}))
+
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+import request from '@/utils/request'
+
+describe('request utility', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('get', () => {
+    it('should call axios.get with url and params wrapped', async () => {
+      mockGet.mockResolvedValue({ data: { code: 200, data: 'test' } })
+      const result = await request.get('/test', { id: 1 })
+      expect(mockGet).toHaveBeenCalledWith('/test', { params: { id: 1 } })
+      expect(result).toEqual({ code: 200, data: 'test' })
+    })
+
+    it('should default to empty params object', async () => {
+      mockGet.mockResolvedValue({ data: { code: 200, data: 'test' } })
+      await request.get('/test')
+      expect(mockGet).toHaveBeenCalledWith('/test', { params: {} })
+    })
+
+    it('should reject when response code is not 200', async () => {
+      mockGet.mockResolvedValue({ data: { code: 400, message: 'Bad request' } })
+      await expect(request.get('/test')).rejects.toEqual({ code: 400, message: 'Bad request' })
+    })
+  })
+
+  describe('post', () => {
+    it('should call axios.post with url, data, and empty config', async () => {
+      mockPost.mockResolvedValue({ data: { code: 200, data: 'created' } })
+      const result = await request.post('/test', { name: 'foo' })
+      expect(mockPost).toHaveBeenCalledWith('/test', { name: 'foo' }, {})
+      expect(result).toEqual({ code: 200, data: 'created' })
+    })
+
+    it('should pass config when provided', async () => {
+      mockPost.mockResolvedValue({ data: { code: 200, data: 'ok' } })
+      await request.post('/test', null, { params: { id: 1 } })
+      expect(mockPost).toHaveBeenCalledWith('/test', null, { params: { id: 1 } })
+    })
+
+    it('should reject when response code is not 200', async () => {
+      mockPost.mockResolvedValue({ data: { code: 500, message: 'Server error' } })
+      await expect(request.post('/test')).rejects.toEqual({ code: 500, message: 'Server error' })
+    })
+  })
+
+  describe('put', () => {
+    it('should call axios.put with url, data, and empty config', async () => {
+      mockPut.mockResolvedValue({ data: { code: 200, data: 'updated' } })
+      const result = await request.put('/test/1', { name: 'bar' })
+      expect(mockPut).toHaveBeenCalledWith('/test/1', { name: 'bar' }, {})
+      expect(result).toEqual({ code: 200, data: 'updated' })
+    })
+  })
+
+  describe('del', () => {
+    it('should call axios.delete with url and params wrapped', async () => {
+      mockDel.mockResolvedValue({ data: { code: 200, data: 'deleted' } })
+      const result = await request.del('/test/1')
+      expect(mockDel).toHaveBeenCalledWith('/test/1', { params: {} })
+      expect(result).toEqual({ code: 200, data: 'deleted' })
+    })
+
+    it('should merge params into config spread for axios.delete', async () => {
+      mockDel.mockResolvedValue({ data: { code: 200, data: 'ok' } })
+      // del(url, params={reason:'test'}, config={timeout:1000})
+      // => axios.delete(url, { params: { reason:'test' }, timeout: 1000 })
+      await request.del('/test/1', { reason: 'test' }, { timeout: 1000 })
+      expect(mockDel).toHaveBeenCalledWith('/test/1', { params: { reason: 'test' }, timeout: 1000 })
+    })
+  })
+
+  describe('generic request', () => {
+    it('should dispatch GET with params', async () => {
+      mockGet.mockResolvedValue({ data: { code: 200, data: 'ok' } })
+      const result = await request.request('get', '/test', { id: 1 })
+      expect(mockGet).toHaveBeenCalledWith('/test', { params: { id: 1 } })
+      expect(result).toEqual({ code: 200, data: 'ok' })
+    })
+
+    it('should dispatch POST with data', async () => {
+      mockPost.mockResolvedValue({ data: { code: 200, data: 'ok' } })
+      await request.request('post', '/test', { name: 'foo' })
+      expect(mockPost).toHaveBeenCalledWith('/test', { name: 'foo' }, {})
+    })
+
+    it('should dispatch DELETE with params', async () => {
+      mockDel.mockResolvedValue({ data: { code: 200, data: 'ok' } })
+      await request.request('delete', '/test/1', null)
+      expect(mockDel).toHaveBeenCalledWith('/test/1', { params: null })
+    })
+
+    it('should throw for unsupported method', () => {
+      expect(() => request.request('patch', '/test', null)).toThrow('请求方法 patch 未实现')
+    })
+  })
+})

src/api/login.ts

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export const login = (username: string, password: string) => {
+  return request.post("/login", { username, password });
+};
+
+export const logout = () => {
+  return request.post("/logout");
+};

src/api/reportFragments.ts

@@ -3,4 +3,12 @@ import request from "@/utils/request";
 
 export const createFragments = (sessionNum: string, content: string) => {
     return request.post(`/report-fragments`, {sessionNum, content})
+}
+
+export const updateFragments = (id: number, content: string) => {
+    return request.put(`/report-fragments/${id}`, {content})
+}
+
+export const getFragmentsBySession = (sessionNum: string) => {
+    return request.get(`/report-fragments/session/${sessionNum}`)
 }

src/api/review.ts

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+export interface ReviewFeedItem {
+  id: number;
+  sessionNum: string;
+  taskNum: string;
+  taskName: string;
+  sourceType: "REPORT" | "FRAGMENT";
+  content: string;
+  createdTime: string;
+}
+
+export const getReviewFeed = (limit: number = 30) => {
+  return request.get("/review/feed", { limit });
+};
+
+export const getReportDetail = (id: number) => {
+  return request.get(`/review/report/${id}`);
+};
+
+export const getFragmentDetail = (id: number) => {
+  return request.get(`/review/fragment/${id}`);
+};
+
+export const getTaskReview = (taskNum: string) => {
+  return request.get(`/review/task/${taskNum}`);
+};

src/api/studySessions.ts

@@ -17,3 +17,7 @@ export const endSession = (sessionNum: string, content: string = "任务结束")
 export const startOrContinueStudySession = (taskNum: string) => {
     return request.get(`/tasks/${taskNum}/study-sessions/start-or-continue`);
 };
+
+export const getSessionDetail = (sessionNum: string) => {
+    return request.get(`/study-sessions/${sessionNum}`);
+};

src/assets/base.css

@@ -1,86 +1,41 @@
-/* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
+  --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;
-  margin: 0;
-  font-weight: normal;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
 }
 
 body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
+  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;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/assets/main.css

@@ -1,35 +1,47 @@
-@import './base.css';
+@import "./base.css";
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  width: 100%;
 }
 
-a,
-.green {
+a {
+  color: var(--green-700);
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+a:hover {
+  color: var(--green-800);
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+.page-title {
+  margin: 0;
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.2;
+  letter-spacing: 0.4px;
+}
+
+.page-subtitle {
+  margin: 10px 0 0;
+  color: var(--text-secondary);
+  font-size: 15px;
+}
+
+.surface-card {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-soft);
+  border-radius: 18px;
+  box-shadow: var(--shadow-soft);
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.fade-up-enter-from,
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
 }

src/components/Login.vue

@@ -1,37 +1,27 @@
 <script setup lang="ts">
-import {reactive, ref} from "vue";
-import {ElMessage, type FormInstance, type FormRules} from "element-plus";
-import type {InternalRuleItem, Value} from "async-validator";
-import request from "@/utils/request";
+import { reactive, ref } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import type { InternalRuleItem, Value } from "async-validator";
 import router from "@/router";
-import {routes} from "vue-router/auto-routes";
+import { login } from "@/api/login";
 
 interface RegisterData {
-  username: string
-  password: string
+  username: string;
+  password: string;
 }
 
 const registerData = reactive<RegisterData>({
   username: "",
-  password: ""
+  password: "",
 });
 
 const loginForm = ref<FormInstance>();
+const loading = ref(false);
+
 const rules = reactive<FormRules<RegisterData>>({
-      password: [
-        {
-          validator: isNotEmpty,
-          message:"请输入密码！"
-        }
-      ],
-      username: [
-        {
-          validator: isNotEmpty,
-          message:"请输入账号！"
-        }
-      ]
-    }
-)
+  password: [{ validator: isNotEmpty, message: "请输入密码！" }],
+  username: [{ validator: isNotEmpty, message: "请输入账号！" }],
+});
 
 function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
   if (!value) {
@@ -42,54 +32,157 @@ function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
 }
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log(registerData)
-      request.post("/login", {password:registerData.password,username:registerData.username}).then(result =>{
-        console.log(result)
-        if (result.code === 200) {
-          ElMessage.success(result.message)
-          router.push("./welcome")
-        } else {
-          ElMessage.error(result.message)
-        }
-      })
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
+  if (!formEl || loading.value) return;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    loading.value = true;
+    try {
+      const result = await login(registerData.username, registerData.password);
+      if (result.code === 200) {
+        localStorage.setItem("isLoggedIn", "true");
+        ElMessage.success(result.message);
+        await router.push("/welcome");
+      } else {
+        ElMessage.error(result.message);
+      }
+    } finally {
+      loading.value = false;
     }
-  })
-}
-
+  });
+};
 </script>
 
-
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model = "registerData">
-      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">
-        <el-input v-model= "registerData.username"/>
-      </el-form-item>
-      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">
-        <el-input v-model= "registerData.password" type="password"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <section class="login-page">
+    <div class="login-panel surface-card">
+      <div class="hero">
+        <p class="hero-kicker">LPT · Focus Flow</p>
+        <h1>今天的学习，从一次清晰登录开始</h1>
+        <p>
+          你将看到任务优先级、学习会话和复习数据在同一个系统里自然衔接。
+        </p>
+        <ul class="hero-points">
+          <li>明确学习任务</li>
+          <li>记录会话与残片</li>
+          <li>持续复盘</li>
+        </ul>
+      </div>
+
+      <div class="form-area">
+        <h2>账号登录</h2>
+        <el-form ref="loginForm" :model="registerData" class="login-form">
+          <el-form-item label="账号" :rules="rules.username" prop="username">
+            <el-input
+              v-model="registerData.username"
+              placeholder="请输入账号"
+              @keyup.enter="submitForm(loginForm)"
+            />
+          </el-form-item>
+          <el-form-item label="密码" :rules="rules.password" prop="password">
+            <el-input
+              v-model="registerData.password"
+              type="password"
+              show-password
+              placeholder="请输入密码"
+              @keyup.enter="submitForm(loginForm)"
+            />
+          </el-form-item>
+          <el-button
+            type="success"
+            class="submit-btn"
+            :loading="loading"
+            @click="submitForm(loginForm)"
+          >
+            进入系统
+          </el-button>
+        </el-form>
+      </div>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-*{
-  margin: 0;
-  padding: 0;
+.login-page {
+  min-height: calc(100vh - 240px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.login {
-  min-height: 25vh;
-  min-width: 30vw;
-  background: #22b9fa;
+.login-panel {
+  width: min(980px, 100%);
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 0;
+  overflow: hidden;
+}
+
+.hero {
+  padding: 36px;
+  background: linear-gradient(150deg, var(--green-800) 0%, var(--green-600) 100%);
+  color: #effcf4;
+}
+
+.hero-kicker {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 1.4px;
+  opacity: 0.85;
+}
+
+.hero h1 {
+  margin: 14px 0 10px;
+  line-height: 1.35;
+  font-size: clamp(22px, 2.6vw, 32px);
+}
+
+.hero p {
+  margin: 0;
+  opacity: 0.88;
+}
+
+.hero-points {
+  margin: 20px 0 0;
+  padding-left: 18px;
+}
+
+.hero-points li {
+  margin-top: 6px;
+}
+
+.form-area {
+  background: var(--surface-strong);
+  padding: 32px 30px;
+}
+
+.form-area h2 {
+  margin: 0 0 16px;
+  color: var(--green-900);
+}
+
+.login-form :deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+
+.submit-btn {
+  width: 100%;
+  margin-top: 8px;
+}
+
+@media (max-width: 900px) {
+  .login-panel {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    min-height: auto;
+  }
+
+  .hero,
+  .form-area {
+    padding: 22px 16px;
+  }
 }
 </style>

src/components/MyFooter.vue

@@ -1,17 +1,32 @@
 <template>
-  <div class="footer">
-    Footer123
+  <div class="footer surface-card">
+    <span>学习是一条可重复走通的路径：计划、执行、复盘、再出发</span>
+    <span class="footer-tag">LPT-FE</span>
   </div>
 </template>
 
 <style scoped>
-*{
-  margin: 20px;
-  padding:0px;
-}
 .footer {
-  text-align: center;
-  min-height: 8vh;
-  background-color: green;
+  padding: 12px 16px;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-secondary);
 }
-</style>
+
+.footer-tag {
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  color: var(--green-700);
+}
+
+@media (max-width: 768px) {
+  .footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>

src/components/MyHead.vue

@@ -1,23 +1,112 @@
 <template>
-  <div class="head">学习进度跟踪系统
-  <el-button v-if="!isLoginRoute">退出登录</el-button>
+  <div class="head surface-card">
+    <el-button
+      v-if="showBackButton"
+      text
+      class="back-btn"
+      @click="router.push('/welcome')"
+    >
+      ← 返回首页
+    </el-button>
+    <template v-if="pageTitle">
+      <h1 class="head-title">{{ pageTitle }}</h1>
+    </template>
+    <div v-else class="brand-block">
+      <p class="brand-title">学习进度跟踪系统</p>
+      <p class="brand-subtitle">把学习变成可记录、可回顾、可持续的日常流程</p>
+    </div>
+    <el-button
+      v-if="!isLoginRoute"
+      type="success"
+      plain
+      class="logout-btn"
+      @click="handleLogout"
+    >
+      退出登录
+    </el-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed} from "vue";
-import {useRoute} from "vue-router";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import router from "@/router";
+import { logout } from "@/api/login";
 
-var route = useRoute();
+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);
 
-const isLoginRoute = computed(()=>route.path === '/login');
+const handleLogout = async () => {
+  try {
+    await logout();
+  } catch {
+    // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
+  } finally {
+    localStorage.removeItem("isLoggedIn");
+    ElMessage.success("已退出登录");
+    await router.push("/login");
+  }
+};
 </script>
 
 <style scoped>
 .head {
-  font-size: 30px;
-  text-align: center;
-  background: green;
-  min-height: 7vh;
+  min-height: 82px;
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
-</style>
+
+.brand-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: clamp(18px, 2.4vw, 24px);
+  letter-spacing: 0.3px;
+  color: var(--green-900);
+}
+
+.brand-subtitle {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.head-title {
+  margin: 0;
+  font-size: clamp(18px, 2.4vw, 24px);
+  font-weight: 700;
+  color: var(--green-900);
+  flex: 1;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: var(--green-700);
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+.back-btn:hover {
+  color: var(--green-900);
+}
+
+.logout-btn {
+  border-color: var(--green-600);
+  color: var(--green-700);
+}
+
+@media (max-width: 768px) {
+  .head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .logout-btn {
+    width: 100%;
+  }
+}
+</style>

src/components/Review.vue

@@ -1,11 +1,120 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import request from "@/utils/request";
 
+interface ReviewTask {
+  taskNum: string;
+  taskName: string;
+  reportCount: number | string;
+  fragmentCount: number | string;
+  effectiveTime: number | string;
+}
+
+const loading = ref(false);
+const tasks = ref<ReviewTask[]>([]);
+
+const summary = computed(() => ({
+  totalTasks: tasks.value.length,
+  totalReports: tasks.value.reduce((acc, item) => acc + Number(item.reportCount || 0), 0),
+  totalFragments: tasks.value.reduce((acc, item) => acc + Number(item.fragmentCount || 0), 0),
+}));
+
+const loadTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((item: any) => ({
+      taskNum: item.taskNum,
+      taskName: item.taskName,
+      reportCount: item.reportCount ?? "-",
+      fragmentCount: item.fragmentCount ?? "-",
+      effectiveTime: item.effectiveTime ?? "-",
+    }));
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadTasks();
+});
 </script>
 
 <template>
-复习页面
+  <section class="review-page">
+    <div class="table-toolbar">
+      <span class="toolbar-placeholder"></span>
+      <el-button type="success" plain size="small" :loading="loading" @click="loadTasks">刷新</el-button>
+    </div>
+
+    <div class="summary-grid">
+      <article class="surface-card metric-card">
+        <span>任务数</span>
+        <strong>{{ summary.totalTasks }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习报告总数</span>
+        <strong>{{ summary.totalReports }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习残片总数</span>
+        <strong>{{ summary.totalFragments }}</strong>
+      </article>
+    </div>
+
+    <article class="surface-card table-card">
+      <el-table v-loading="loading" :data="tasks" stripe>
+        <el-table-column prop="taskName" label="任务名" min-width="180" />
+        <el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="150" />
+        <el-table-column prop="reportCount" label="学习报告数" min-width="120" />
+        <el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
+      </el-table>
+    </article>
+  </section>
 </template>
 
 <style scoped>
+.review-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
 
-</style>
+.table-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  padding: 16px 18px;
+}
+
+.metric-card span {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.metric-card strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 30px;
+  line-height: 1;
+  color: var(--green-900);
+}
+
+.table-card {
+  padding: 10px;
+}
+
+@media (max-width: 900px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/components/ReviewDetail.vue

@@ -0,0 +1,423 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getReportDetail, getFragmentDetail, getTaskReview, type ReviewFeedItem } from "@/api/review";
+import { getSessionDetail } from "@/api/studySessions";
+import { updateFragments } from "@/api/reportFragments";
+import { ElMessage } from "element-plus";
+
+const route = useRoute();
+const router = useRouter();
+
+const contentType = computed(() => route.params.type as string);
+const contentId = computed(() => Number(route.params.id));
+
+const loading = ref(true);
+const content = ref("");
+const sourceTypeLabel = ref("");
+const taskNum = ref("");
+
+// 编辑状态
+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);
+
+// 该任务下的所有学习记录（按 session 分组）
+const taskSessions = ref<{
+  sessionNum: string;
+  startTime: string;
+  report: ReviewFeedItem | null;
+  fragments: ReviewFeedItem[];
+}[]>([]);
+
+const formatDuration = (seconds: number): string => {
+  if (seconds == null) return "-";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}小时${m}分钟`;
+  if (m > 0) return `${m}分钟${s}秒`;
+  return `${s}秒`;
+};
+
+const loadDetail = async () => {
+  loading.value = true;
+  try {
+    let res;
+    if (contentType.value === "report") {
+      res = await getReportDetail(contentId.value);
+      sourceTypeLabel.value = "学习报告";
+    } else {
+      res = await getFragmentDetail(contentId.value);
+      sourceTypeLabel.value = "学习残片";
+    }
+    const data = res?.data;
+    content.value = data?.content || "";
+
+    const sessionNum = data?.sessionNum;
+    if (sessionNum) {
+      try {
+        const sessionRes = await getSessionDetail(sessionNum);
+        const info = sessionRes?.data;
+        sessionInfo.value = info || null;
+        taskNum.value = info?.taskNum || "";
+
+        // 加载该任务下的所有报告和残片
+        if (info?.taskNum) {
+          await loadTaskHistory(info.taskNum, sessionNum);
+        }
+      } catch {
+        // 非关键数据
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadTaskHistory = async (tn: string, currentSessionNum: string) => {
+  try {
+    const res = await getTaskReview(tn);
+    const items: ReviewFeedItem[] = res?.data || [];
+
+    // 按 sessionNum 分组
+    const map = new Map<string, { report: ReviewFeedItem | null; fragments: ReviewFeedItem[]; startTime: string }>();
+    for (const item of items) {
+      const entry = map.get(item.sessionNum) || { report: null, fragments: [], startTime: item.createdTime };
+      if (item.sourceType === "REPORT") {
+        entry.report = item;
+      } else {
+        entry.fragments.push(item);
+      }
+      if (!map.has(item.sessionNum)) {
+        map.set(item.sessionNum, entry);
+      }
+    }
+
+    taskSessions.value = Array.from(map.entries())
+      .map(([sessionNum, data]) => ({
+        sessionNum,
+        startTime: data.startTime,
+        report: data.report,
+        fragments: data.fragments,
+      }))
+      .sort((a, b) => b.startTime.localeCompare(a.startTime));
+  } catch {
+    // 非关键数据
+  }
+};
+
+const goToDetail = (type: string, id: number) => {
+  router.push(`/review/detail/${type}/${id}`);
+};
+
+const enterEdit = () => {
+  editContent.value = content.value;
+  isEditing.value = true;
+};
+
+const cancelEdit = () => {
+  isEditing.value = false;
+  editContent.value = "";
+};
+
+const saveEdit = async () => {
+  if (!editContent.value.trim()) {
+    ElMessage.warning("内容不能为空");
+    return;
+  }
+  if (editContent.value === content.value) {
+    isEditing.value = false;
+    return;
+  }
+  saving.value = true;
+  try {
+    const res = await updateFragments(contentId.value, editContent.value);
+    if (res?.code === 200) {
+      content.value = editContent.value;
+      isEditing.value = false;
+      ElMessage.success("保存成功");
+    } else {
+      ElMessage.error(res?.message || "保存失败");
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || "请求失败");
+  } finally {
+    saving.value = false;
+  }
+};
+
+onMounted(() => {
+  loadDetail();
+});
+</script>
+
+<template>
+  <section class="review-detail-page">
+    <!-- 当前条目内容 -->
+    <article class="surface-card content-card" v-loading="loading">
+      <div class="content-meta">
+        <el-tag
+          :type="contentType === 'report' ? 'success' : 'warning'"
+          effect="dark"
+          size="small"
+        >
+          {{ sourceTypeLabel }}
+        </el-tag>
+        <span v-if="sessionInfo" class="meta-task-name">
+          任务：{{ sessionInfo.taskName }}
+        </span>
+        <span v-if="sessionInfo?.startTime" class="meta-time">
+          学习时间：{{ sessionInfo.startTime?.replace("T", " ")?.substring(0, 16) }}
+        </span>
+        <el-button
+          v-if="contentType === 'fragment' && !isEditing"
+          type="primary"
+          size="small"
+          @click="enterEdit"
+        >
+          编辑
+        </el-button>
+      </div>
+
+      <!-- 编辑模式 -->
+      <div v-if="isEditing" class="edit-area">
+        <el-input
+          v-model="editContent"
+          type="textarea"
+          :rows="6"
+          placeholder="请输入学习内容"
+        />
+        <div class="edit-actions">
+          <el-button @click="cancelEdit">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="saveEdit">保存</el-button>
+        </div>
+      </div>
+      <!-- 只读模式 -->
+      <template v-else>
+        <div class="content-body" v-if="content">
+          <p v-for="(line, idx) in content.split('\n')" :key="idx">
+            {{ line || " " }}
+          </p>
+        </div>
+        <div v-else class="empty-content">暂无内容</div>
+      </template>
+    </article>
+
+    <!-- 该任务下的所有学习记录 -->
+    <article class="surface-card history-card" v-if="taskSessions.length > 0">
+      <h3>该任务下的所有学习记录</h3>
+      <div
+        v-for="session in taskSessions"
+        :key="session.sessionNum"
+        class="history-session"
+        :class="{ 'is-current': session.sessionNum === sessionInfo?.sessionNum }"
+      >
+        <div class="session-header">
+          <span class="session-date">
+            {{ session.startTime?.replace("T", " ")?.substring(0, 16) }}
+          </span>
+          <span class="session-badge" v-if="session.sessionNum === sessionInfo?.sessionNum">当前</span>
+        </div>
+
+        <div class="session-report" v-if="session.report">
+          <span
+            class="clickable-text"
+            :class="{ active: contentType === 'report' && session.report.id === contentId }"
+            @click="goToDetail('report', session.report!.id)"
+          >
+            <span class="label-tag report-tag">报告</span>
+            {{ session.report.content.length > 150 ? session.report.content.substring(0, 150) + "..." : session.report.content }}
+          </span>
+        </div>
+
+        <div class="session-fragments" v-if="session.fragments.length > 0">
+          <span
+            v-for="(f, idx) in session.fragments"
+            :key="f.id"
+            class="clickable-text"
+            :class="{ active: contentType === 'fragment' && f.id === contentId }"
+            @click="goToDetail('fragment', f.id)"
+          >
+            <span class="label-tag fragment-tag">残片{{ idx + 1 }}</span>
+            {{ f.content.length > 150 ? f.content.substring(0, 150) + "..." : f.content }}
+          </span>
+        </div>
+      </div>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.review-detail-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.content-card {
+  padding: 22px;
+  min-height: 120px;
+}
+
+.content-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.meta-task-name {
+  font-weight: 600;
+  color: var(--green-800);
+  font-size: 14px;
+}
+
+.meta-time {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.content-body {
+  line-height: 1.8;
+  color: var(--text-primary);
+  font-size: 15px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.content-body p {
+  margin: 0;
+  min-height: 1em;
+}
+
+.empty-content {
+  color: var(--text-secondary);
+  text-align: center;
+  padding: 40px 0;
+}
+
+/* 历史记录卡片 */
+.history-card {
+  padding: 20px 22px;
+}
+
+.history-card h3 {
+  margin: 0 0 16px;
+  color: var(--green-900);
+  font-size: 16px;
+}
+
+.history-session {
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.history-session:last-child {
+  border-bottom: none;
+}
+
+.history-session.is-current {
+  background: #f1f8e9;
+  margin: 0 -10px;
+  padding: 14px 10px;
+  border-radius: 8px;
+}
+
+.session-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.session-date {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.session-badge {
+  font-size: 11px;
+  background: var(--green-600);
+  color: #fff;
+  padding: 1px 8px;
+  border-radius: 10px;
+}
+
+.session-report {
+  margin-bottom: 6px;
+}
+
+.session-fragments {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.clickable-text {
+  display: block;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background 0.15s;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.clickable-text:hover {
+  background: var(--surface-strong);
+}
+
+.clickable-text.active {
+  background: #e8f5e9;
+  border-left: 3px solid var(--green-600);
+}
+
+.label-tag {
+  display: inline-block;
+  font-size: 11px;
+  padding: 0 6px;
+  border-radius: 3px;
+  margin-right: 6px;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+.report-tag {
+  background: #e8f5e9;
+  color: var(--green-700);
+}
+
+.fragment-tag {
+  background: #fff8e1;
+  color: #b8860b;
+}
+
+.edit-area {
+  margin-top: 12px;
+}
+
+.edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+</style>

src/components/StartTask.vue

@@ -1,12 +1,16 @@
-<!-- src/views/StudyTimer.vue -->
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import {ElMessage, ElMessageBox} from 'element-plus';
-import { useTimer } from '@/components/composables/useTimer';
-import { continueSession, pauseSession, endSession, startOrContinueStudySession } from '@/api/studySessions';
-import { useStudyFragment } from '@/components/composables/fragment';
-import {routes} from "vue-router/auto-routes";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useTimer } from "@/components/composables/useTimer";
+import {
+  continueSession,
+  endSession,
+  pauseSession,
+  startOrContinueStudySession,
+} from "@/api/studySessions";
+import { useStudyFragment } from "@/components/composables/fragment";
+import { getFragmentsBySession, updateFragments } from "@/api/reportFragments";
 import router from "@/router";
 
 const {
@@ -14,70 +18,148 @@ const {
   fragmentContent,
   openFragmentDialog,
   closeFragmentDialog,
-  confirmGenerateFragment
+  confirmGenerateFragment,
 } = useStudyFragment();
 
 const summaryDialogVisible = ref(false);
-const summaryContent = ref('');
+const summaryContent = ref("");
+
+// 当前会话碎片列表
+interface FragmentItem {
+  id: number;
+  content: string;
+}
+const fragmentsList = ref<FragmentItem[]>([]);
+const editingFragmentId = ref<number | null>(null);
+const editFragmentContent = ref("");
+const savingFragment = ref(false);
 
 const route = useRoute();
 const taskNum = route.params.taskNum as string;
 
 const taskInfo = ref({
-  sessionNum: '',
-  sessionState: '--',
-  taskName: '',
+  sessionNum: "",
+  sessionState: "--",
+  taskName: "",
   taskNum,
-  startTime: '',
-  endTime: '',
-  lastStartTime: '',
+  startTime: "",
+  endTime: "",
+  lastStartTime: "",
   actualTime: 0,
   effectiveTime: 0,
-  effectivenessRatio: '--',
+  effectivenessRatio: "--",
   pointerPosition: 0,
-  systemMessage: '',
+  systemMessage: "",
 });
 
 const {
   timerMinutes,
   timerSeconds,
   runCountdown,
+  syncDisplay,
   clear,
   timerRunning,
   timerIsOver,
   checkAudioPermission,
-  requestAudioPermission
+  requestAudioPermission,
 } = useTimer();
 
-const globalTimer = ref(Date.now());
+const progress = computed(() => ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100);
+const nowTimestamp = ref(Date.now());
 
-const currentCycle = computed(() =>
-    Math.floor(taskInfo.value.effectiveTime / 60 / 25) + 1
-);
+let displayInterval: number | undefined;
 
-const elapsedTime = computed(() => {
-  if (!taskInfo.value.startTime || !timerRunning.value) return { hours: 0, minutes: 0, seconds: 0 };
-  const start = new Date(taskInfo.value.startTime).getTime();
-  const now = globalTimer.value;
-  const diff = Math.max(Math.floor((now - start) / 1000), 0);
-  return {
-    hours: Math.floor(diff / 3600),
-    minutes: Math.floor((diff % 3600) / 60),
-    seconds: diff % 60,
-  };
+const formatDuration = (value: number | string) => {
+  const totalSeconds = Math.max(0, Math.floor(Number(value) || 0));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}小时 ${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  if (minutes > 0) {
+    return `${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  return `${seconds}秒`;
+};
+
+const toDate = (value: unknown): Date | null => {
+  if (value == null || value === "") return null;
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === "number") {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (Array.isArray(value)) {
+    const [year, month, day, hour = 0, minute = 0, second = 0] = value.map(Number);
+    if (!year || !month || !day) return null;
+    const date = new Date(year, month - 1, day, hour, minute, second);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (typeof value === "string") {
+    const normalized = value.includes("T") ? value : value.replace(" ", "T");
+    const date = new Date(normalized);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  return null;
+};
+
+const toSeconds = (start: Date, endTimestamp: number) => {
+  return Math.max(0, Math.floor((endTimestamp - start.getTime()) / 1000));
+};
+
+const actualTimeSeconds = computed(() => {
+  const fallback = Math.max(0, Math.floor(Number(taskInfo.value.actualTime) || 0));
+  const startDate = toDate(taskInfo.value.startTime);
+  if (!startDate) return fallback;
+
+  // 实际用时：开始后持续计时，暂停时也继续累计，结束后冻结。
+  if (taskInfo.value.sessionState === "ENDED") {
+    const endDate = toDate(taskInfo.value.endTime);
+    if (!endDate) return fallback;
+    return toSeconds(startDate, endDate.getTime());
+  }
+
+  return toSeconds(startDate, nowTimestamp.value);
 });
 
-const formatTime = (t: { hours: number; minutes: number; seconds: number }) =>
-    `${t.hours}时${t.minutes}分${t.seconds}秒`;
+const effectiveTimeSeconds = computed(() => {
+  const base = Math.max(0, Math.floor(Number(taskInfo.value.effectiveTime) || 0));
+  if (taskInfo.value.sessionState !== "ONGOING") return base;
 
-const progress = computed(() =>
-    ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100
-);
+  const lastStartDate = toDate(taskInfo.value.lastStartTime);
+  if (!lastStartDate) return base;
+  return base + toSeconds(lastStartDate, nowTimestamp.value);
+});
+
+const actualTimeText = computed(() => formatDuration(actualTimeSeconds.value));
+const effectiveTimeText = computed(() => formatDuration(effectiveTimeSeconds.value));
+
+const statusText = computed(() => {
+  switch (taskInfo.value.sessionState) {
+    case "ONGOING":
+      return "进行中";
+    case "PAUSED":
+      return "已暂停";
+    case "ENDED":
+      return "已结束";
+    default:
+      return "未开始";
+  }
+});
 
 const startTimer = async () => {
   if (taskInfo.value.sessionState === "PAUSED") {
     const res = await continueSession(taskInfo.value.sessionNum);
-    if (res.code === 200) ElMessage.success('任务继续');
+    if (res.code === 200) ElMessage.success("任务继续");
     await loadTaskSession();
   }
   const duration = taskInfo.value.pointerPosition || 25 * 60 * 1000;
@@ -86,41 +168,54 @@ const startTimer = async () => {
 
 const stopTimer = async () => {
   const res = await pauseSession(taskInfo.value.sessionNum);
-  if (res.code === 200) ElMessage.success('任务暂停');
+  if (res.code === 200) {
+    ElMessage.success("任务暂停");
+    taskInfo.value.sessionState = "PAUSED";
+  }
   clear();
 };
 
 const endTimer = async (content: string) => {
   if (!content) {
-    ElMessage.warning('请输入学习总结内容');
+    ElMessage.warning("请输入学习总结内容");
     return;
   }
-  ElMessageBox.confirm('确定要结束吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info',
-  }).then(async () => {
+  try {
+    await ElMessageBox.confirm("确定要结束本次学习会话吗？", "结束确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+  } catch {
+    // 用户取消结束会话，不做任何操作
+    return;
+  }
+
+  try {
     const res = await endSession(taskInfo.value.sessionNum, content);
-    if (res.code === 200) ElMessage.success('任务结束');
-    router.back();
+    if (res.code === 200) {
+      if (res.message && res.message !== "请求成功") {
+        ElMessage.warning(res.message);
+      } else {
+        ElMessage.success("任务结束");
+      }
+    } else {
+      ElMessage.error(res.message || "结束会话失败");
+    }
     clear();
-  })
+    await router.push("/study");
+  } catch {
+    ElMessage.error("结束会话失败，请重试");
+  }
 };
 
-const openSummaryDialog = async () => {
+const openSummaryDialog = () => {
   summaryDialogVisible.value = true;
-}
+};
 
-const closeSummaryDialog = async () => {
-  ElMessageBox.alert('确定取消吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    summaryDialogVisible.value = false;
-    ElMessage.info('已取消结束操作')
-  })
-}
+const closeSummaryDialog = () => {
+  summaryDialogVisible.value = false;
+};
 
 const restTimer = async () => {
   await stopTimer();
@@ -131,14 +226,14 @@ const loadTaskSession = async () => {
   try {
     const res = await startOrContinueStudySession(taskNum);
     Object.assign(taskInfo.value, res.data);
-    if (taskInfo.value.sessionState === 'ONGOING') {
+    if (taskInfo.value.sessionState === "ONGOING") {
       startTimer();
+    } else {
+      syncDisplay(taskInfo.value.pointerPosition || 25 * 60 * 1000);
     }
-    if (taskInfo.value.systemMessage) {
-      ElMessage.warning(taskInfo.value.systemMessage);
-    }
+    loadFragments();
   } catch (err: any) {
-    ElMessage.error(err.message || '加载任务失败');
+    ElMessage.error(err.message || "加载任务失败");
   }
 };
 
@@ -146,94 +241,364 @@ const initPage = async () => {
   const hasPermission = await checkAudioPermission();
   if (!hasPermission) {
     const activated = await requestAudioPermission();
-    if (!activated) {
-      console.warn('用户拒绝或未能激活权限');
-      return;
-    }
+    if (!activated) return;
   }
   await loadTaskSession();
+};
 
-  setInterval(() => {
-    globalTimer.value = Date.now();
-  }, 1000);
+// 碎片列表
+const loadFragments = async () => {
+  if (!taskInfo.value.sessionNum) return;
+  try {
+    const res = await getFragmentsBySession(taskInfo.value.sessionNum);
+    if (res?.code === 200) {
+      fragmentsList.value = res.data || [];
+    }
+  } catch {
+    // 非关键数据
+  }
+};
+
+const startEditFragment = (fragment: FragmentItem) => {
+  editingFragmentId.value = fragment.id;
+  editFragmentContent.value = fragment.content;
+};
+
+const cancelEditFragment = () => {
+  editingFragmentId.value = null;
+  editFragmentContent.value = "";
+};
+
+const saveEditFragment = async (id: number) => {
+  if (!editFragmentContent.value.trim()) {
+    ElMessage.warning("内容不能为空");
+    return;
+  }
+  savingFragment.value = true;
+  try {
+    const res = await updateFragments(id, editFragmentContent.value);
+    if (res?.code === 200) {
+      const item = fragmentsList.value.find((f) => f.id === id);
+      if (item) item.content = editFragmentContent.value;
+      editingFragmentId.value = null;
+      editFragmentContent.value = "";
+      ElMessage.success("保存成功");
+    } else {
+      ElMessage.error(res?.message || "保存失败");
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || "请求失败");
+  } finally {
+    savingFragment.value = false;
+  }
 };
 
 onMounted(() => {
+  displayInterval = window.setInterval(() => {
+    nowTimestamp.value = Date.now();
+  }, 1000);
   initPage();
 });
+
+// 碎片创建成功后刷新列表
+watch(fragmentsDialogVisible, (newVal, oldVal) => {
+  if (oldVal === true && newVal === false) {
+    loadFragments();
+  }
+});
+
+onUnmounted(() => {
+  if (displayInterval) {
+    clearInterval(displayInterval);
+  }
+  clear();
+});
 </script>
 
 <template>
-  <div class="task-container">
-    <div class="task-info">
-      <p>当前任务【{{ taskInfo.taskName }}】</p>
-      <p>当前循环：{{ currentCycle }}</p>
-      <p>有效时间：{{ taskInfo.effectiveTime / 60 }}分钟</p>
-      <p>本次运行时间：{{ formatTime(elapsedTime) }}</p>
+  <div>
+  <section class="start-page">
+    <div class="task-info-bar">
+      <el-tag type="success" effect="plain">任务编号：{{ taskInfo.taskNum }}</el-tag>
+      <span class="status-text">状态：{{ statusText }}</span>
     </div>
-    <div class="timer-section">
-      <el-progress type="circle" :percentage="progress" :width="200">
-        <div>
-          {{ timerMinutes.toString().padStart(2, '0') }} :
-          {{ timerSeconds.toString().padStart(2, '0') }}
+
+    <el-alert
+      v-if="taskInfo.systemMessage"
+      :title="taskInfo.systemMessage"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+
+    <div class="session-grid">
+      <article class="surface-card timer-card">
+        <p class="timer-title">当前计时</p>
+        <el-progress type="dashboard" :percentage="progress" :stroke-width="14" :width="250" color="#2f8f68">
+          <div class="timer-number">
+            {{ timerMinutes.toString().padStart(2, "0") }}:{{ timerSeconds.toString().padStart(2, "0") }}
+          </div>
+        </el-progress>
+        <p class="timer-tip">番茄钟默认 25 分钟，休息计时 5 分钟</p>
+      </article>
+
+      <article class="surface-card info-card">
+        <h3>会话数据</h3>
+        <div class="info-grid">
+          <div class="metric">
+            <span>实际用时</span>
+            <strong>{{ actualTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效学习时长</span>
+            <strong>{{ effectiveTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效时间比</span>
+            <strong>{{ taskInfo.effectivenessRatio }}</strong>
+          </div>
+          <div class="metric">
+            <span>会话状态</span>
+            <strong>{{ statusText }}</strong>
+          </div>
         </div>
-      </el-progress>
+
+        <div class="action-row">
+          <el-button type="success" @click="startTimer" :disabled="timerRunning">开始</el-button>
+          <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
+          <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成残片</el-button>
+          <el-button v-if="timerIsOver" plain type="success" @click="restTimer">休息</el-button>
+          <el-button type="danger" plain @click="openSummaryDialog">结束会话</el-button>
+        </div>
+      </article>
     </div>
-    <div class="actions">
-      <el-button @click="startTimer" :disabled="timerRunning">开始</el-button>
-      <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
-      <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成学习残片</el-button>
-      <el-button @click="restTimer" v-if="timerIsOver">休息</el-button>
-      <el-button @click="openSummaryDialog">结束</el-button>
-    </div>
-  </div>
-  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="500px">
+
+    <!-- 当前会话学习残片 -->
+    <article class="surface-card fragments-card" v-if="fragmentsList.length > 0">
+      <h3>当前会话学习残片</h3>
+      <div
+        v-for="(fragment, index) in fragmentsList"
+        :key="fragment.id"
+        class="fragment-item"
+      >
+        <span class="fragment-index">{{ index + 1 }}</span>
+        <template v-if="editingFragmentId === fragment.id">
+          <el-input
+            v-model="editFragmentContent"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入学习内容"
+          />
+          <div class="fragment-edit-actions">
+            <el-button size="small" @click="cancelEditFragment">取消</el-button>
+            <el-button size="small" type="primary" :loading="savingFragment" @click="saveEditFragment(fragment.id)">保存</el-button>
+          </div>
+        </template>
+        <template v-else>
+          <span class="fragment-content">{{ fragment.content }}</span>
+          <el-button size="small" @click="startEditFragment(fragment)">编辑</el-button>
+        </template>
+      </div>
+    </article>
+  </section>
+
+  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="520px">
     <el-input
-        type="textarea"
-        v-model="fragmentContent"
-        placeholder="请输入本次学习的内容"
-        rows="5"
+      type="textarea"
+      v-model="fragmentContent"
+      placeholder="请输入本次学习内容"
+      :rows="5"
     />
     <template #footer>
-    <span>
-      <el-button @click="closeFragmentDialog">取消生成</el-button>
-      <el-button type="primary" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
-    </span>
+      <el-button @click="closeFragmentDialog">取消</el-button>
+      <el-button type="success" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
     </template>
   </el-dialog>
-  <el-dialog v-model="summaryDialogVisible" title="本次学习内容总结" width="500px">
+
+  <el-dialog v-model="summaryDialogVisible" title="结束会话总结" width="520px">
     <el-input
-        type="textarea"
-        v-model="summaryContent"
-        placeholder="请输入本次学习的内容总结"
-        rows="5"
+      type="textarea"
+      v-model="summaryContent"
+      placeholder="请输入本次学习内容总结"
+      :rows="5"
     />
     <template #footer>
-    <span>
       <el-button @click="closeSummaryDialog">取消</el-button>
-      <el-button type="primary" @click="endTimer(summaryContent)">确定</el-button>
-    </span>
+      <el-button type="success" @click="endTimer(summaryContent)">确认结束</el-button>
     </template>
   </el-dialog>
+  </div>
 </template>
 
 <style scoped>
-.task-container {
+.start-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.task-info-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.session-grid {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 14px;
+}
+
+.timer-card {
+  padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 20px;
 }
-.task-info {
-  font-size: 18px;
-  margin-bottom: 30px;
+
+.timer-title {
+  margin: 0;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.timer-section {
-  margin: 20px;
+
+.timer-number {
+  font-size: 28px;
+  letter-spacing: 1px;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.actions {
-  display: flex;
+
+.timer-tip {
+  margin: 14px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.info-card {
+  padding: 20px;
+}
+
+.info-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.info-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
+
+.metric {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fbfefc;
+}
+
+.metric span {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.metric strong {
+  margin-top: 6px;
+  display: block;
+  font-size: 18px;
+  color: var(--green-900);
+}
+
+.action-row {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.action-row .el-button {
+  margin: 0;
+}
+
+.fragments-card {
+  padding: 20px;
+}
+
+.fragments-card h3 {
+  margin: 0 0 14px;
+  color: var(--green-900);
+}
+
+.fragment-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.fragment-item:last-child {
+  border-bottom: none;
+}
+
+.fragment-index {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--green-600);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fragment-content {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.fragment-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+@media (max-width: 1100px) {
+  .session-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .top-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-row {
+    flex-direction: column;
+  }
+
+  .action-row .el-button {
+    width: 100%;
+  }
+}
 </style>

src/components/Study.vue

@@ -1,58 +1,82 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import request from '@/utils/request';
+import { computed, onMounted, ref } from "vue";
+import request from "@/utils/request";
 import router from "@/router";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 
-const tasks = reactive([] as any[]);
+interface TaskItem {
+  title: string;
+  description: string;
+  materialURL: string;
+  lastLearningStatus: string;
+  priority: number | string;
+  taskNum: string;
+  taskId: number;
+}
 
-const selectedTask = ref<any>(null);
+const tasks = ref<TaskItem[]>([]);
+const selectedTaskId = ref<number | null>(null);
+const loading = ref(false);
 
-const fetchTasks = () => {
-  request.get('/tasks', { pageSize: 100, pageNum: 1 })
-      .then((res) => {
-        /* 此处暂时不开发分页模式，数据量应该不会很大，但仍然保留了分页形式的接口 */
-        tasks.splice(0, tasks.length, ...res.data.records.map((record: any) => ({
-          title: record.taskName,
-          description: record.taskDescription || '',
-          lastLearningStatus: record.lastLearningStatus || '未开始',
-          priority: Math.round(record.taskPriority),
-          taskNum: record.taskNum,
-          taskId: record.id,
-        })));
-        selectedTask.value = tasks[0] || null;
-      });
-};
+const selectedTask = computed(() =>
+  tasks.value.find((item) => item.taskId === selectedTaskId.value) || null
+);
 
-const startTask = () => {
-  router.push({name:'start-task',params:{taskNum:selectedTask.value.taskNum}});
-  console.log('任务已开始：', selectedTask.value);
-};
-
-const addTask = () => {
-  router.push({name:"add-task"});
-};
-
-const changeTask = () =>{
-  router.push({name:"update-task",params:{"taskId":selectedTask.value.taskId}})
-};
-
-const removeTask = () => {
-  request.del(`/tasks/${selectedTask.value.taskId}`,{}).then(res=>{
-    if (res.code == '200'){
-      ElMessage.success(`任务${selectedTask.value.title}删除成功`)
-    }
-  });
-
-  const index = tasks.indexOf(selectedTask.value);
-  if (index > -1) {
-    tasks.splice(index, 1);
-    selectedTask.value = tasks[0] || null;
+const fetchTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((record: any) => ({
+      title: record.taskName,
+      description: record.taskDescription || "",
+      materialURL: record.materialURL || record.materialUrl || "",
+      lastLearningStatus: record.lastLearningStatus || "未开始",
+      priority: Number.isFinite(record.taskPriority) ? Math.round(record.taskPriority) : "-",
+      taskNum: record.taskNum,
+      taskId: record.id,
+    }));
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  } catch (error: any) {
+    tasks.value = [];
+    selectedTaskId.value = null;
+    ElMessage.error(error?.message || "任务列表加载失败，请重试");
+  } finally {
+    loading.value = false;
   }
 };
 
-const selectTask = (task: any) => {
-  selectedTask.value = task;
+const startTask = () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  router.push(`/start-task/${encodeURIComponent(selectedTask.value.taskNum)}`);
+};
+
+const addTask = () => {
+  router.push({ name: "add-task" });
+};
+
+const changeTask = () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  router.push({ name: "update-task", params: { taskId: selectedTask.value.taskId } });
+};
+
+const removeTask = async () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  const target = selectedTask.value;
+  const res = await request.del(`/tasks/${target.taskId}`, {});
+  if (res.code === 200) {
+    ElMessage.success(`任务 ${target.title} 删除成功`);
+    tasks.value = tasks.value.filter((item) => item.taskId !== target.taskId);
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  }
 };
 
 onMounted(() => {
@@ -61,95 +85,200 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-row :gutter="5" class="task-layout">
-    <el-col :span="6">
-      <el-card class="task-card" :body-style="{ padding: '0' }">
-        <div class="task-header">任务列表</div>
-        <el-scrollbar height="300px">
-          <el-menu class="task-menu" @select="(key:any) => selectTask(tasks[key])">
-            <el-menu-item
-                v-for="(task, index) in tasks"
-                :key="index"
-                :index="index.toString()"
-                class="task-item"
-            >
-              {{ task.title }}
-            </el-menu-item>
-          </el-menu>
+  <section class="study-page">
+    <div class="layout-grid">
+      <aside class="surface-card task-list">
+        <div class="block-title">任务清单</div>
+        <el-scrollbar height="420px">
+          <div
+            v-for="item in tasks"
+            :key="item.taskId"
+            class="task-list-item"
+            :class="{ active: selectedTaskId === item.taskId }"
+            @click="selectedTaskId = item.taskId"
+          >
+            <p class="task-name">{{ item.title }}</p>
+            <p class="task-meta">状态：{{ item.lastLearningStatus }}</p>
+          </div>
         </el-scrollbar>
-      </el-card>
-    </el-col>
+      </aside>
 
-    <el-col :span="13">
-      <el-card class="task-card">
-        <div v-if="selectedTask">
-          <h3>任务描述</h3>
-          <el-input type="textarea" v-model="selectedTask.description" :rows="4" />
+      <main class="content-zone">
+        <article class="surface-card detail-card" v-loading="loading">
+          <template v-if="selectedTask">
+            <div class="detail-head">
+              <h3>{{ selectedTask.title }}</h3>
+              <el-tag type="success" effect="plain">优先级 {{ selectedTask.priority }}</el-tag>
+            </div>
 
-          <h3 class="section-title">任务优先级</h3>
-          <el-radio-group v-model="selectedTask.priority">
-            <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
-          </el-radio-group>
+            <div class="detail-block">
+              <p class="label">任务描述</p>
+              <el-input type="textarea" :model-value="selectedTask.description" :rows="4" readonly />
+            </div>
 
-          <h3 class="section-title">上次该任务学习情况</h3>
-          <el-descriptions border column="1">
-            <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
-            <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
-            <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
-            <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
-          </el-descriptions>
-        </div>
-        <div v-else>
-          <p>请选择任务或等待任务加载完成。</p>
-        </div>
-      </el-card>
-    </el-col>
-    <el-col :span="5">
-      <el-space class="action-buttons">
-        <el-button type="primary" @click="startTask">开始任务</el-button>
-        <el-button @click="addTask">添加任务</el-button>
-        <el-button @click="changeTask">更新任务</el-button>
-        <el-button type="danger" @click="removeTask">删除任务</el-button>
-        <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
-      </el-space>
-    </el-col>
-  </el-row>
+            <div class="detail-block">
+              <p class="label">学习材料</p>
+              <el-link
+                v-if="selectedTask.materialURL"
+                :href="selectedTask.materialURL"
+                target="_blank"
+                type="primary"
+              >
+                {{ selectedTask.materialURL }}
+              </el-link>
+              <p v-else class="empty-text">暂未填写材料地址</p>
+            </div>
+          </template>
+          <el-empty v-else description="暂无任务，请先创建任务" />
+        </article>
+
+        <aside class="surface-card action-card">
+          <div class="block-title">常用操作</div>
+          <el-button size="large" @click="fetchTasks" :loading="loading">刷新列表</el-button>
+          <el-button type="success" size="large" @click="startTask">开始任务</el-button>
+          <el-button size="large" @click="addTask">添加任务</el-button>
+          <el-button size="large" @click="changeTask">更新任务</el-button>
+          <el-button type="danger" size="large" @click="removeTask">删除任务</el-button>
+        </aside>
+      </main>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-.task-layout {
-  width: 100%;
-  overflow-x: hidden;
-}
-.task-card {
-  padding: 0;
-}
-.task-header {
-  padding: 10px;
-  font-size: 16px;
-  font-weight: bold;
-  background-color: #f5f7fa;
-  border-bottom: 1px solid #ebeef5;
-}
-.task-menu {
-  width: 100%;
-  padding: 0;
-}
-.task-item {
-  padding: 10px 12px;
-  white-space: normal;
-  word-break: break-word;
-}
-.section-title {
-  margin-top: 20px;
-}
-.action-buttons {
+.study-page {
+  display: flex;
   flex-direction: column;
-  margin-top: 20px;
+  gap: 14px;
 }
-.action-buttons .el-button {
-  width: 8vw;
-  min-width: 70px;
-  margin-top: 5px;
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 14px;
+}
+
+.task-list {
+  padding: 16px;
+}
+
+.block-title {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--green-900);
+}
+
+.task-list-item {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 12px;
+  cursor: pointer;
+  background: #fbfefc;
+  transition: all 0.2s ease;
+}
+
+.task-list-item + .task-list-item {
+  margin-top: 10px;
+}
+
+.task-list-item:hover {
+  border-color: #b9d9c8;
+}
+
+.task-list-item.active {
+  border-color: var(--green-600);
+  background: var(--green-100);
+  box-shadow: inset 0 0 0 1px rgba(47, 143, 104, 0.2);
+}
+
+.task-name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.task-meta {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.content-zone {
+  display: grid;
+  grid-template-columns: 1fr 220px;
+  gap: 14px;
+}
+
+.detail-card {
+  padding: 18px 20px;
+}
+
+.detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.detail-head h3 {
+  margin: 0;
+  font-size: 22px;
+}
+
+.detail-block {
+  margin-top: 16px;
+}
+
+.label {
+  margin: 0 0 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.empty-text {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.action-card {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.action-card .el-button {
+  margin: 0;
+}
+
+@media (max-width: 1100px) {
+  .layout-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .content-zone {
+    grid-template-columns: 1fr;
+  }
+
+  .action-card {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  .action-card .block-title {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-head {
+    flex-direction: column;
+  }
+
+  .action-card {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

src/components/TaskForm.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from 'vue';
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import request from "@/utils/request";
-import {ElMessage} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import { ElMessage } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
 
 const router = useRouter();
+const route = useRoute();
 
-const route = useRoute()
 const taskId = route.params.taskId ? Number(route.params.taskId) : null;
-const buttonName = route.meta.buttonText;
+const buttonName = route.meta.buttonText as string;
 
-
-const taskName = ref('');
-const taskDescription = ref('');
+const taskName = ref("");
+const taskDescription = ref("");
+const materialURL = ref("");
 const priority = ref({
   urgency: 0,
   importance: 0,
@@ -24,34 +24,31 @@ const priority = ref({
 const priorityOptions = [0, 1, 2, 3, 4, 5];
 
 const createTask = () => {
-  console.log('创建任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  request.post("/tasks", {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    ...priority.value
-  }).then(result => {
-    if (result.code == 200) {
-      ElMessage.success("创建任务成功，任务id：" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务创建失败，错误原因：" + result.message)
-    }
-  })
+  request
+    .post("/tasks", {
+      taskName: taskName.value,
+      taskDescription: taskDescription.value,
+      materialURL: materialURL.value,
+      ...priority.value,
+    })
+    .then((result) => {
+      if (result.code === 200) {
+        ElMessage.success("创建任务成功");
+        router.push({ name: "study" });
+      } else {
+        ElMessage.error("任务创建失败：" + result.message);
+      }
+    });
 };
 
 const loadTask = () => {
-  console.info("开始加载任务信息")
   if (taskId !== null) {
-    request.get(`/tasks/${taskId}`, {}).then(result => {
+    request.get(`/tasks/${taskId}`, {}).then((result) => {
       if (result.code === 200) {
         const data = result.data;
         taskName.value = data.taskName;
         taskDescription.value = data.taskDescription;
+        materialURL.value = data.materialURL || data.materialUrl || "";
         priority.value = {
           urgency: data.urgency,
           importance: data.importance,
@@ -67,45 +64,41 @@ const loadTask = () => {
 };
 
 const updateTask = () => {
-  console.log('更新任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  request.put("/tasks/" + taskId, {
-    id: taskId,
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    ...priority.value
-  }).then(result => {
-    if (result.code == 200) {
-      ElMessage.success("更新任务成功" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务更新失败，错误原因：" + result.message)
-    }
-  })
+  request
+    .put("/tasks/" + taskId, {
+      id: taskId,
+      taskName: taskName.value,
+      taskDescription: taskDescription.value,
+      materialURL: materialURL.value,
+      ...priority.value,
+    })
+    .then((result) => {
+      if (result.code === 200) {
+        ElMessage.success("更新任务成功");
+        router.push({ name: "study" });
+      } else {
+        ElMessage.error("任务更新失败：" + result.message);
+      }
+    });
 };
 
 const cancelTask = () => {
-  ElMessage.success("已取消创建")
-  router.back()
+  ElMessage.info("已取消操作");
+  router.push({ name: "study" });
 };
 
-
 const submitTask = () => {
   switch (route.name) {
-    case 'add-task':
+    case "add-task":
       createTask();
       break;
-    case 'update-task':
+    case "update-task":
       updateTask();
       break;
     default:
-      ElMessage.error('未知操作类型');
+      ElMessage.error("未知操作类型");
   }
-}
+};
 
 const screenWidth = ref(window.innerWidth);
 
@@ -113,119 +106,125 @@ const updateWidth = () => {
   screenWidth.value = window.innerWidth;
 };
 
-
 onMounted(() => {
-  window.addEventListener('resize', updateWidth)
-  if (route.meta.action === 'update' && taskId !== null) {
+  window.addEventListener("resize", updateWidth);
+  if (route.meta.action === "update" && taskId !== null) {
     loadTask();
   }
 });
-onUnmounted(() => window.removeEventListener('resize', updateWidth));
 
-const columnSpan = computed(() => {
-  return screenWidth.value <= 768 ? 20 : 8;
-});
+onUnmounted(() => window.removeEventListener("resize", updateWidth));
+
+const isMobile = computed(() => screenWidth.value <= 900);
 </script>
 
 <template>
-  <el-form label-width="100px">
-    <el-form-item label="任务名:">
-      <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
-    </el-form-item>
+  <section class="task-form-page">
+    <el-form label-position="top" class="surface-card form-shell">
+      <div class="group">
+        <h3>基础信息</h3>
+        <el-form-item label="任务名称">
+          <el-input v-model="taskName" placeholder="例如：Vue3 组件通信实践" />
+        </el-form-item>
+        <el-form-item label="任务描述">
+          <el-input v-model="taskDescription" type="textarea" :rows="5" placeholder="请输入任务描述" />
+        </el-form-item>
+        <el-form-item label="学习材料地址">
+          <el-input v-model="materialURL" placeholder="例如：https://..." />
+        </el-form-item>
+      </div>
 
-    <el-form-item label="任务描述:">
-      <el-input
-          v-model="taskDescription"
-          type="textarea"
-          placeholder="请输入任务描述"
-          rows="6"
-      ></el-input>
-    </el-form-item>
-
-    <el-form-item label="优先级:">
-      <el-row :gutter="10">
-        <el-col :span="columnSpan">
+      <div class="group">
+        <h3>优先级维度</h3>
+        <div class="priority-grid" :class="{ mobile: isMobile }">
           <el-form-item label="急迫性">
             <el-select v-model="priority.urgency">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="重要性">
             <el-select v-model="priority.importance">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'i' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="内容难度">
             <el-select v-model="priority.contentDifficulty">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'d' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="未来价值">
             <el-select v-model="priority.futureValue">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'f' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="主观优先级">
             <el-select v-model="priority.subjectivePriority">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'s' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form-item>
+        </div>
+      </div>
 
-    <el-form-item>
-      <el-button type="primary" @click="submitTask">{{ buttonName }}</el-button>
-      <el-button @click="cancelTask">取消</el-button>
-    </el-form-item>
-  </el-form>
+      <div class="action-row">
+        <el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
+        <el-button size="large" @click="cancelTask">取消</el-button>
+      </div>
+    </el-form>
+  </section>
 </template>
 
 <style scoped>
-.el-form-item {
-  margin-bottom: 15px;
+.task-form-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-shell {
+  padding: 22px;
+}
+
+.group + .group {
+  margin-top: 12px;
+}
+
+.group h3 {
+  margin: 0 0 12px;
+  color: var(--green-900);
+}
+
+.priority-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 14px;
+}
+
+.priority-grid.mobile {
+  grid-template-columns: 1fr;
+}
+
+.action-row {
+  margin-top: 8px;
+  display: flex;
+  gap: 10px;
 }
 
 @media (max-width: 768px) {
-  .el-col {
-    width: 100% !important;
+  .form-shell {
+    padding: 16px;
+  }
+
+  .action-row {
+    flex-direction: column;
+  }
+
+  .action-row .el-button {
+    width: 100%;
+    margin: 0;
   }
 }
 </style>

src/components/Welcome.vue

@@ -1,5 +1,78 @@
 <script setup lang="ts">
-import router from "@/router/index.js";
+import { computed, onMounted, ref } from "vue";
+import router from "@/router";
+import { getReviewFeed, type ReviewFeedItem } from "@/api/review";
+
+const reviewItems = ref<ReviewFeedItem[]>([]);
+const isHovering = ref(false);
+
+interface SessionGroup {
+  sessionNum: string;
+  taskName: string;
+  taskNum: string;
+  content: string;
+  hasReport: boolean;
+  fragmentCount: number;
+  navigateType: string;
+  navigateId: number;
+}
+
+// 按 sessionNum 分组，一个会话展示为一个 chip
+const sessionGroups = computed<SessionGroup[]>(() => {
+  const map = new Map<string, ReviewFeedItem[]>();
+  for (const item of reviewItems.value) {
+    const list = map.get(item.sessionNum) || [];
+    list.push(item);
+    map.set(item.sessionNum, list);
+  }
+
+  const groups: SessionGroup[] = [];
+  for (const [sessionNum, items] of map) {
+    const first = items[0];
+    const report = items.find(i => i.sourceType === "REPORT");
+    const fragments = items.filter(i => i.sourceType === "FRAGMENT");
+
+    const rawContent = report?.content || fragments.map(f => f.content).join("；");
+    const content = rawContent.length > 120
+      ? rawContent.substring(0, 120) + "..."
+      : rawContent;
+
+    groups.push({
+      sessionNum,
+      taskName: first.taskName,
+      taskNum: first.taskNum,
+      content,
+      hasReport: !!report,
+      fragmentCount: fragments.length,
+      navigateType: report ? "report" : "fragment",
+      navigateId: report ? report.id : (fragments[0]?.id ?? 0),
+    });
+  }
+
+  groups.sort((a, b) => {
+    const aItem = reviewItems.value.find(i => i.sessionNum === a.sessionNum);
+    const bItem = reviewItems.value.find(i => i.sessionNum === b.sessionNum);
+    return (bItem?.createdTime || "").localeCompare(aItem?.createdTime || "");
+  });
+
+  return groups;
+});
+
+// 复制一份实现无缝循环
+const duplicatedGroups = computed(() => [...sessionGroups.value, ...sessionGroups.value]);
+
+const loadReviewFeed = async () => {
+  try {
+    const res = await getReviewFeed(100);
+    reviewItems.value = res?.data || [];
+  } catch {
+    // feed 加载失败不影响页面主体功能
+  }
+};
+
+const goToReviewDetail = (group: SessionGroup) => {
+  router.push(`/review/detail/${group.navigateType}/${group.navigateId}`);
+};
 
 const startStudy = () => {
   router.push("/study");
@@ -8,103 +81,257 @@ const startStudy = () => {
 const startReview = () => {
   router.push("/review");
 };
+
+onMounted(() => {
+  loadReviewFeed();
+});
 </script>
+
 <template>
-  <el-container class="container">
-    <el-header class="header">
-<!--      <div class="marquee-wrapper">-->
-<!--        <div class="marquee-content">-->
-          FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
-<!--        </div>-->
-<!--      </div>-->
-    </el-header>
+  <section class="welcome-page">
+    <div class="review-scroll-section surface-card">
+      <div class="review-scroll-header">
+        <span class="color-legend">
+          <span class="dot dot-report"></span> 学习报告
+          <span class="dot dot-fragment"></span> 学习残片
+        </span>
+      </div>
+      <div class="review-scroll-track">
+        <div
+          class="review-scroll-content"
+          :class="{ paused: isHovering }"
+          @mouseenter="isHovering = true"
+          @mouseleave="isHovering = false"
+        >
+          <span
+            v-for="(group, index) in duplicatedGroups"
+            :key="index"
+            class="review-chip"
+            :class="group.hasReport ? 'has-report' : 'fragments-only'"
+            @click="goToReviewDetail(group)"
+          >
+            <strong class="chip-task">{{ group.taskName }}</strong>
+            <span class="chip-content">{{ group.content }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
 
+    <div class="welcome-banner surface-card">
+      <div>
+        <h1 class="page-title">欢迎回来，准备好继续学习了吗？</h1>
+        <p class="page-subtitle">
+          先挑选任务开始一次会话，再在复习页回顾你的学习轨迹。
+        </p>
+      </div>
+      <el-tag type="success" effect="dark" size="large">今日模式：稳步推进</el-tag>
+    </div>
 
-    <el-main>
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-card class="progress-card" shadow="always">
-            <div class="progress-text">学习进度总揽</div>
-          </el-card>
-        </el-col>
+    <div class="quick-grid">
+      <article class="quick-card surface-card">
+        <h3>学习会话</h3>
+        <p>进入任务列表，选择当前最重要的一项并开始学习计时。</p>
+        <el-button type="success" size="large" @click="startStudy">开始学习</el-button>
+      </article>
 
-        <el-col :span="3">
-          <div class="button-group">
-            <el-button type="success" size="large" @click="startStudy" plain>开始学习</el-button>
-            <el-button type="primary" size="large" @click="startReview" plain>开始复习</el-button>
-          </div>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+      <article class="quick-card surface-card">
+        <h3>复习回看</h3>
+        <p>查看学习报告与残片数量，明确哪些内容需要优先复习。</p>
+        <el-button plain type="success" size="large" @click="startReview">开始复习</el-button>
+      </article>
+    </div>
+
+    <div class="tips-board surface-card">
+      <h3>建议流程</h3>
+      <ol>
+        <li>进入学习页，确认任务材料地址与优先级。</li>
+        <li>开始会话并在休息时记录学习残片。</li>
+        <li>结束会话后填写总结，再回到复习页检视数据。</li>
+      </ol>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-*{
-  margin: 0px;
-  /*padding: 0;*/
-}
-.container {
-  min-height: 100vh;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-}
-
-.header {
-  text-align: center;
-  font-size: 16px;
-  font-weight: bold;
-  border-bottom: 1px solid #ebeef5;
-  padding: 20px;
-}
-
-.progress-card {
-  height: 400px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-text {
-  font-size: 18px;
-  color: #333;
-}
-
-.button-group {
+.welcome-page {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 80px;
-  align-items: center;
-}
-.button-group .el-button {
-  margin-left: 0;
+  gap: 16px;
 }
 
+.welcome-banner {
+  padding: 20px 22px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
 
- /*滚动样式*/
-.marquee-wrapper {
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.quick-card {
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.quick-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.quick-card p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.quick-card .el-button {
+  margin-top: auto;
+  width: 100%;
+}
+
+/* 复习滚动条区域 */
+.review-scroll-section {
+  padding: 14px 22px;
   overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-  height: 40px;
 }
 
-.marquee-content {
+.review-scroll-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.color-legend {
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dot {
   display: inline-block;
-  position: absolute;
-  white-space: nowrap;
-  will-change: transform;
-  animation: scroll-left 15s linear infinite;
-  font-size: 16px;
-  font-weight: bold;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 3px;
 }
 
-@keyframes scroll-left {
+.dot-report {
+  background: var(--green-600);
+}
+
+.dot-fragment {
+  background: #e6a23c;
+}
+
+.review-scroll-track {
+  overflow: hidden;
+  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);
+}
+
+.review-scroll-content {
+  display: inline-flex;
+  gap: 14px;
+  white-space: nowrap;
+  animation: review-ticker 150s linear infinite;
+}
+
+.review-scroll-content.paused {
+  animation-play-state: paused;
+}
+
+@keyframes review-ticker {
   0% {
-    transform: translateX(100%);
+    transform: translateX(0);
   }
   100% {
-    transform: translateX(-100%);
+    transform: translateX(-50%);
+  }
+}
+
+.review-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  background: var(--surface-strong);
+  border: 1px solid var(--border-soft);
+  border-left: 3px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s, box-shadow 0.2s;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.review-chip.has-report {
+  border-left-color: var(--green-600);
+}
+
+.review-chip.fragments-only {
+  border-left-color: #e6a23c;
+}
+
+.review-chip:hover {
+  box-shadow: var(--shadow-soft);
+}
+
+.review-chip.has-report:hover {
+  background: #e8f5e9;
+}
+
+.review-chip.fragments-only:hover {
+  background: #fff8e1;
+}
+
+.chip-task {
+  color: var(--green-700);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.chip-content {
+  color: var(--text-secondary);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 320px;
+}
+
+.tips-board {
+  padding: 20px 22px;
+}
+
+.tips-board h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.tips-board ol {
+  margin: 10px 0 0;
+  padding-left: 20px;
+  color: var(--text-secondary);
+}
+
+.tips-board li + li {
+  margin-top: 8px;
+}
+
+@media (max-width: 900px) {
+  .welcome-banner {
+    flex-direction: column;
+  }
+
+  .quick-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>

src/components/composables/fragment.ts

@@ -25,34 +25,37 @@ export const useStudyFragment = () => {
             });
     };
 
-    const confirmGenerateFragment = async (sessionNum: string) => {
+    const confirmGenerateFragment = async (sessionNum: string): Promise<boolean> => {
         if (!fragmentContent.value.trim()) {
             ElMessage.warning('请输入学习内容！');
-            return;
+            return false;
         }
 
-        ElMessageBox.confirm('确定要生成学习残片吗？', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'info',
-        })
-            .then(async () => {
-                try {
-                    const res = await createFragments(sessionNum, fragmentContent.value);
-
-                    if (res.code === 200) {
-                        ElMessage.success('学习残片生成成功！');
-                        fragmentsDialogVisible.value = false;
-                    } else {
-                        ElMessage.error(res.message || '生成学习残片失败');
-                    }
-                } catch (error: any) {
-                    ElMessage.error(error.message || '请求失败');
-                }
-            })
-            .catch(() => {
-                ElMessage.info('已取消生成');
+        try {
+            await ElMessageBox.confirm('确定要生成学习残片吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'info',
             });
+        } catch {
+            ElMessage.info('已取消生成');
+            return false;
+        }
+
+        try {
+            const res = await createFragments(sessionNum, fragmentContent.value);
+            if (res.code === 200) {
+                ElMessage.success('学习残片生成成功！');
+                fragmentsDialogVisible.value = false;
+                return true;
+            } else {
+                ElMessage.error(res.message || '生成学习残片失败');
+                return false;
+            }
+        } catch (error: any) {
+            ElMessage.error(error.message || '请求失败');
+            return false;
+        }
     };
 
     return {

src/components/composables/useTimer.ts

@@ -18,6 +18,14 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
         timerRunning.value = false;
     };
 
+    const syncDisplay = (durationMs: number) => {
+        const safeDuration = Math.max(durationMs, 0);
+        remainingTime.value = safeDuration;
+        timerMinutes.value = Math.floor(safeDuration / 1000 / 60);
+        timerSeconds.value = Math.floor((safeDuration / 1000) % 60);
+        timerIsOver.value = safeDuration === 0;
+    };
+
     const handleCountdownComplete = () => {
         audio.loop = true;
         audio.play();
@@ -91,6 +99,7 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
         timerRunning,
         timerIsOver,
         runCountdown,
+        syncDisplay,
         clear,
         checkAudioPermission,
         requestAudioPermission,

src/router/index.ts

@@ -1,56 +1,90 @@
-import {createRouter,createWebHistory} from 'vue-router'
-import Login from "@/components/Login.vue";
-import Study from "@/components/Study.vue";
-import Welcome from "@/components/Welcome.vue";
-import Review from "@/components/Review.vue";
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import StartTask from "@/components/StartTask.vue";
-import TaskForm from "@/components/TaskForm.vue";
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: "/login",
+  },
+  {
+    path: "/login",
+    component: () => import("@/components/Login.vue"),
+    meta: { requiresAuth: false },
+  },
+  {
+    path: "/welcome",
+    component: () => import("@/components/Welcome.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/study",
+    name: "study",
+    component: () => import("@/components/Study.vue"),
+    meta: { requiresAuth: true, title: "学习任务" },
+  },
+  {
+    path: "/review",
+    component: () => import("@/components/Review.vue"),
+    meta: { requiresAuth: true, title: "复习总览" },
+  },
+  {
+    path: "/review/detail/:type/:id",
+    component: () => import("@/components/ReviewDetail.vue"),
+    meta: { requiresAuth: true, title: "复习详情" },
+  },
+  {
+    path: "/start-task/:taskNum",
+    name: "start-task",
+    component: StartTask,
+    meta: { requiresAuth: true, title: "学习会话" },
+  },
+  {
+    path: "/add-task",
+    name: "add-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      title: "创建学习任务",
+      action: "add",
+      buttonText: "添加",
+    },
+  },
+  {
+    path: "/update-task/:taskId",
+    name: "update-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      title: "更新学习任务",
+      action: "update",
+      buttonText: "更新",
+    },
+  },
+];
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes:[
-        {
-          path:'/',
-          redirect:'/login',
-        },
-        {
-            path:'/login',
-            component:Login
-        },
-        {
-            path:'/welcome',
-            component: Welcome
-        },
-        {
-            path:'/study',
-            component: Study
-        },
-        {
-            path:'/review',
-            component: Review
-        },
-        {
-            path:'/start-task/:taskNum',
-            name:'start-task',
-            component: StartTask
-        },
-        {
-            path:'/add-task',
-            name:'add-task',
-            component: TaskForm,
-            meta:{
-                action: 'add', buttonText: '添加'
-            }
-        },
-        {
-            path:'/update-task/:taskId',
-            name:'update-task',
-            component: TaskForm,
-            meta:{
-                action: 'update', buttonText: '更新'
-            }
-        }
-    ]
+  history: createWebHistory(),
+  routes,
 });
 
-export default router;
+router.onError((error, to) => {
+  const message = String((error as Error)?.message || "");
+  const isChunkLoadError =
+    message.includes("Failed to fetch dynamically imported module") ||
+    message.includes("Importing a module script failed") ||
+    message.includes("Loading chunk");
+  if (isChunkLoadError && typeof window !== "undefined") {
+    window.location.assign(to.fullPath);
+  }
+});
+
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth === false) return true;
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+  if (!isLoggedIn) {
+    return "/login";
+  }
+  return true;
+});
+
+export default router;

src/utils/request.ts

@@ -5,15 +5,25 @@ const basic_url = import.meta.env.VITE_BASE_URL;
 
 const axiosInstance = axios.create({
     baseURL: basic_url,
-    timeout: 5000
+    timeout: 5000,
+    withCredentials: true
 });
 
 const handleError = (error: any) => {
     console.log(error);
+
+    // 业务异常由 validateResponse 负责提示，这里透传，避免被网络错误文案覆盖。
+    if (error && typeof error === "object" && "code" in error) {
+        return Promise.reject(error);
+    }
+
     if (error.response) {
-        ElMessage.error(`请求失败，服务器返回: ${error.response.data}`);
+        const backendMessage = error.response?.data?.message || JSON.stringify(error.response?.data);
+        ElMessage.error(`请求失败，服务器返回: ${backendMessage}`);
     } else if (error.request) {
         ElMessage.error("请求未收到响应，请检查接口运行状态");
+    } else {
+        ElMessage.error(error.message || "请求失败");
     }
     throw new Error("网络不通畅，请检查您的网络连接或服务器状态");
 };
@@ -42,27 +52,27 @@ const post = (url: string, data: any = null, config: any = {}) => {
 
     if (config.params) {
         // 如果传入 config.params，则作为 URL 参数
-        return axiosInstance.post(url, data, { params: config.params })
+        return axiosInstance.post(url, data, { params: config.params, ...config })
             .then(validateResponse)
             .catch(handleError);
     } else {
         // 默认 POST JSON
-        return axiosInstance.post(url, data)
+        return axiosInstance.post(url, data, config)
             .then(validateResponse)
             .catch(handleError);
     }
 };
 
-const put = (url: string, data: any) => {
+const put = (url: string, data: any, config: any = {}) => {
     console.log("开始PUT请求", basic_url + url, "参数：", data);
-    return axiosInstance.put(url, data)
+    return axiosInstance.put(url, data, config)
         .then(validateResponse)
         .catch(handleError);
 };
 
-const del = (url: string, params: {}) => {
+const del = (url: string, params: Record<string, any> = {}, config: any = {}) => {
     console.log("开始DELETE请求", basic_url + url, "参数：", params);
-    return axiosInstance.delete(url, { params })
+    return axiosInstance.delete(url, { params, ...config })
         .then(validateResponse)
         .catch(handleError);
 };

vite.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
@@ -15,6 +15,19 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0',
-    port: 5158
-  }
+    port: 5158,
+    proxy: {
+      "/api": {
+        target: "http://localhost:5157",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/__tests__/setup.ts'],
+    include: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
+  },
 })