feat(N/A):配置环境

.dockerignore

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

.env.development

@@ -1 +1 @@
-VITE_BASE_URL=/api
+VITE_BASE_URL = 'http://192.168.123.199:5155'

.env.production

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

.env.uat

@@ -1 +1 @@
-VITE_BASE_URL=/api
+VITE_BASE_URL = 'http://192.168.123.199:5156'

.gitignore

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

.npmrc

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

Dockerfile

@@ -1,21 +1,10 @@
-# --- 构建阶段 ---
-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 --from=builder /app/dist/ /usr/share/nginx/html/
-RUN chmod -R 755 /usr/share/nginx/html
+
+COPY dist/ /usr/share/nginx/html/
+
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
 EXPOSE 80

Jenkinsfile

@@ -1,40 +1,88 @@
 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('构建 Docker 镜像') {
-            agent any
+		stage('Install Dependencies') {
+			agent {
+				docker {
+					image 'node:20-alpine'
+                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
+                }
+            }
             steps {
-                sh 'docker build --build-arg BUILD_MODE=production -t $IMAGE_NAME .'
+				sh '''
+                  npm config set cache /.npm
+                  npm install
+                '''
             }
         }
-        stage('部署容器') {
-            agent any
+
+        stage('Type Check & Build') {
+			agent {
+				docker {
+					image 'node:20-alpine'
+                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
+                }
+            }
             steps {
-                sh '''
-                  docker network create traefik-public || true
+				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 '''
                   docker rm -f $CONTAINER_NAME || true
                   docker run -d --name $CONTAINER_NAME \\
-                    --network traefik-public \\
-                    --label "traefik.enable=true" \\
-                    --label "traefik.docker.network=traefik-public" \\
-                    --label 'traefik.http.routers.lpt-fe.rule=Host(`lpt.cat-shark.xyz`)' \\
-                    --label "traefik.http.routers.lpt-fe.entrypoints=websecure" \\
-                    --label "traefik.http.routers.lpt-fe.tls.certresolver=le" \\
-                    --label "traefik.http.routers.lpt-fe.service=lpt-fe" \\
-                    --label "traefik.http.services.lpt-fe.loadbalancer.server.port=$CONTAINER_PORT" \\
+                    -p $HOST_PORT:$CONTAINER_PORT \\
+                    --health-cmd="curl -f http://localhost:80 || exit 1" \\
+                    --health-interval=5s \\
+                    --health-retries=3 \\
+                    --restart=always \\
                     $IMAGE_NAME
                 '''
             }
         }
-        stage('健康检查') {
+
+        stage('Check Docker Status') {
             agent any
             steps {
-                sh 'sleep 5 && docker exec $CONTAINER_NAME curl -f http://localhost:$CONTAINER_PORT/ || (docker logs $CONTAINER_NAME && exit 1)'
+                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')
+                        }
+                    }
+                }
             }
         }
     }

Jenkinsfile-dev

@@ -1,41 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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,15 +5,10 @@
   "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",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
     "async-validator": "^4.2.5",
@@ -27,18 +22,13 @@
     "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

@@ -1,29 +0,0 @@
-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,99 +1,20 @@
 <script setup lang="ts">
+import '@/components/css/app.css'
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
 </script>
 
 <template>
-  <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="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="shell-footer">
-        <MyFooter />
-      </el-footer>
-    </el-container>
+  <div class="common-layout">
+    <my-head/>
+    <div class="router-view">
+      <RouterView/>
+    </div>
+    <my-footer/>
   </div>
+
 </template>
 
 <style scoped>
-.app-shell {
-  position: relative;
-  min-height: 100vh;
-  overflow: hidden;
-}
 
-.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;
-  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

@@ -1,35 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,276 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,12 +3,4 @@ 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

@@ -1,27 +0,0 @@
-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,7 +17,3 @@ 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,41 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --green-900: #123d2d;
-  --green-800: #1a5a42;
-  --green-700: #237556;
-  --green-600: #2f8f68;
-  --green-500: #43a879;
-  --green-200: #d9f1e5;
-  --green-100: #eef9f3;
-  --surface: #f7fbf8;
-  --surface-strong: #ffffff;
-  --text-primary: #1b2a23;
-  --text-secondary: #4b6156;
-  --border-soft: #d6e6dc;
-  --shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
-  --shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);
+  --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);
+  }
 }
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-  min-height: 100%;
+  margin: 0;
+  font-weight: normal;
 }
 
 body {
-  margin: 0;
-  color: var(--text-primary);
-  background:
-    radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
-    radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
-    linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
-  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
   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,47 +1,35 @@
-@import "./base.css";
+@import './base.css';
 
 #app {
-  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
 }
 
-a {
-  color: var(--green-700);
+a,
+.green {
   text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
 }
 
-a:hover {
-  color: var(--green-800);
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
 }
 
-.page-title {
-  margin: 0;
-  font-size: clamp(24px, 3vw, 34px);
-  line-height: 1.2;
-  letter-spacing: 0.4px;
-}
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
 
-.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);
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
 }

src/components/Login.vue

@@ -1,27 +1,38 @@
 <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 '@/components/css/login.css'
+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 router from "@/router";
-import { login } from "@/api/login";
+import {routes} from "vue-router/auto-routes";
 
 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) {
@@ -32,157 +43,46 @@ function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
 }
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  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;
+  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)
     }
-  });
-};
+  })
+}
+
 </script>
 
-<template>
-  <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>
+  <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>
 </template>
 
 <style scoped>
-.login-page {
-  min-height: calc(100vh - 240px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
-.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,32 +1,12 @@
 <template>
-  <div class="footer surface-card">
-    <span>学习是一条可重复走通的路径：计划、执行、复盘、再出发</span>
-    <span class="footer-tag">LPT-FE</span>
+  <div class="footer">
+    Footer123
   </div>
 </template>
 
 <style scoped>
-.footer {
-  padding: 12px 16px;
-  min-height: 58px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.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>
+
+<script setup lang="ts">
+import '@/components/css/myFooter.css'
+</script>

src/components/MyHead.vue

@@ -1,112 +1,21 @@
 <template>
-  <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 class="head">学习进度跟踪系统
+  <el-button v-if="!isLoginRoute">退出登录</el-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { ElMessage } from "element-plus";
-import router from "@/router";
-import { logout } from "@/api/login";
+import '@/components/css/myHead.css'
+import {computed} from "vue";
+import {useRoute} from "vue-router";
 
-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);
+var route = useRoute();
 
-const handleLogout = async () => {
-  try {
-    await logout();
-  } catch {
-    // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
-  } finally {
-    localStorage.removeItem("isLoggedIn");
-    ElMessage.success("已退出登录");
-    await router.push("/login");
-  }
-};
+const isLoginRoute = computed(()=>route.path === '/login');
 </script>
 
 <style scoped>
 .head {
-  min-height: 82px;
-  padding: 14px 18px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
 
-.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>
+</style>

src/components/Review.vue

@@ -1,120 +1,11 @@
 <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;
-}
 
-.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>
+</style>

src/components/ReviewDetail.vue

@@ -1,423 +0,0 @@
-<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,16 +1,12 @@
+<!-- src/views/StudyTimer.vue -->
 <script setup lang="ts">
-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 { 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 router from "@/router";
 
 const {
@@ -18,148 +14,70 @@ const {
   fragmentContent,
   openFragmentDialog,
   closeFragmentDialog,
-  confirmGenerateFragment,
+  confirmGenerateFragment
 } = useStudyFragment();
 
 const summaryDialogVisible = ref(false);
-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 summaryContent = ref('');
 
 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 progress = computed(() => ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100);
-const nowTimestamp = ref(Date.now());
+const globalTimer = ref(Date.now());
 
-let displayInterval: number | undefined;
+const currentCycle = computed(() =>
+    Math.floor(taskInfo.value.effectiveTime / 60 / 25) + 1
+);
 
-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 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 effectiveTimeSeconds = computed(() => {
-  const base = Math.max(0, Math.floor(Number(taskInfo.value.effectiveTime) || 0));
-  if (taskInfo.value.sessionState !== "ONGOING") return base;
+const formatTime = (t: { hours: number; minutes: number; seconds: number }) =>
+    `${t.hours}时${t.minutes}分${t.seconds}秒`;
 
-  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 progress = computed(() =>
+    ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100
+);
 
 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;
@@ -168,54 +86,41 @@ const startTimer = async () => {
 
 const stopTimer = async () => {
   const res = await pauseSession(taskInfo.value.sessionNum);
-  if (res.code === 200) {
-    ElMessage.success("任务暂停");
-    taskInfo.value.sessionState = "PAUSED";
-  }
+  if (res.code === 200) ElMessage.success('任务暂停');
   clear();
 };
 
 const endTimer = async (content: string) => {
   if (!content) {
-    ElMessage.warning("请输入学习总结内容");
+    ElMessage.warning('请输入学习总结内容');
     return;
   }
-  try {
-    await ElMessageBox.confirm("确定要结束本次学习会话吗？", "结束确认", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    });
-  } catch {
-    // 用户取消结束会话，不做任何操作
-    return;
-  }
-
-  try {
+  ElMessageBox.confirm('确定要结束吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'info',
+  }).then(async () => {
     const res = await endSession(taskInfo.value.sessionNum, content);
-    if (res.code === 200) {
-      if (res.message && res.message !== "请求成功") {
-        ElMessage.warning(res.message);
-      } else {
-        ElMessage.success("任务结束");
-      }
-    } else {
-      ElMessage.error(res.message || "结束会话失败");
-    }
+    if (res.code === 200) ElMessage.success('任务结束');
+    router.back();
     clear();
-    await router.push("/study");
-  } catch {
-    ElMessage.error("结束会话失败，请重试");
-  }
+  })
 };
 
-const openSummaryDialog = () => {
+const openSummaryDialog = async () => {
   summaryDialogVisible.value = true;
-};
+}
 
-const closeSummaryDialog = () => {
-  summaryDialogVisible.value = false;
-};
+const closeSummaryDialog = async () => {
+  ElMessageBox.alert('确定取消吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    summaryDialogVisible.value = false;
+    ElMessage.info('已取消结束操作')
+  })
+}
 
 const restTimer = async () => {
   await stopTimer();
@@ -226,14 +131,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);
     }
-    loadFragments();
+    if (taskInfo.value.systemMessage) {
+      ElMessage.warning(taskInfo.value.systemMessage);
+    }
   } catch (err: any) {
-    ElMessage.error(err.message || "加载任务失败");
+    ElMessage.error(err.message || '加载任务失败');
   }
 };
 
@@ -241,364 +146,94 @@ const initPage = async () => {
   const hasPermission = await checkAudioPermission();
   if (!hasPermission) {
     const activated = await requestAudioPermission();
-    if (!activated) return;
+    if (!activated) {
+      console.warn('用户拒绝或未能激活权限');
+      return;
+    }
   }
   await loadTaskSession();
-};
 
-// 碎片列表
-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;
-  }
+  setInterval(() => {
+    globalTimer.value = Date.now();
+  }, 1000);
 };
 
 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>
-  <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 class="task-container">
+    <div class="task-info">
+      <p>当前任务【{{ taskInfo.taskName }}】</p>
+      <p>当前循环：{{ currentCycle }}</p>
+      <p>有效时间：{{ taskInfo.effectiveTime / 60 }}分钟</p>
+      <p>本次运行时间：{{ formatTime(elapsedTime) }}</p>
     </div>
-
-    <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 class="timer-section">
+      <el-progress type="circle" :percentage="progress" :width="200">
+        <div>
+          {{ timerMinutes.toString().padStart(2, '0') }} :
+          {{ timerSeconds.toString().padStart(2, '0') }}
         </div>
-
-        <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>
+      </el-progress>
+    </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>
-
-    <!-- 当前会话学习残片 -->
-    <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"
-    />
-    <template #footer>
-      <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="520px">
-    <el-input
-      type="textarea"
-      v-model="summaryContent"
-      placeholder="请输入本次学习内容总结"
-      :rows="5"
-    />
-    <template #footer>
-      <el-button @click="closeSummaryDialog">取消</el-button>
-      <el-button type="success" @click="endTimer(summaryContent)">确认结束</el-button>
-    </template>
-  </el-dialog>
   </div>
+  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="500px">
+    <el-input
+        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>
+    </template>
+  </el-dialog>
+  <el-dialog v-model="summaryDialogVisible" title="本次学习内容总结" width="500px">
+    <el-input
+        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>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>
-.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;
+.task-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin: 20px;
 }
-
-.timer-title {
-  margin: 0;
-  color: var(--green-900);
-  font-weight: 700;
+.task-info {
+  font-size: 18px;
+  margin-bottom: 30px;
 }
-
-.timer-number {
-  font-size: 28px;
-  letter-spacing: 1px;
-  color: var(--green-900);
-  font-weight: 700;
+.timer-section {
+  margin: 20px;
 }
-
-.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));
+.actions {
+  display: flex;
   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,284 +1,155 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import request from "@/utils/request";
+import { ref, reactive, onMounted } from 'vue';
+import request from '@/utils/request';
 import router from "@/router";
-import { ElMessage } from "element-plus";
+import {ElMessage} from "element-plus";
 
-interface TaskItem {
-  title: string;
-  description: string;
-  materialURL: string;
-  lastLearningStatus: string;
-  priority: number | string;
-  taskNum: string;
-  taskId: number;
-}
+const tasks = reactive([] as any[]);
 
-const tasks = ref<TaskItem[]>([]);
-const selectedTaskId = ref<number | null>(null);
-const loading = ref(false);
+const selectedTask = ref<any>(null);
 
-const selectedTask = computed(() =>
-  tasks.value.find((item) => item.taskId === selectedTaskId.value) || 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 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 startTask = () => {
-  if (!selectedTask.value) {
-    ElMessage.warning("请先选择一个任务");
-    return;
-  }
-  router.push(`/start-task/${encodeURIComponent(selectedTask.value.taskNum)}`);
+  router.push({name:'start-task',params:{taskNum:selectedTask.value.taskNum}});
+  console.log('任务已开始：', selectedTask.value);
 };
 
 const addTask = () => {
-  router.push({ name: "add-task" });
+  router.push({name:"add-task"});
 };
 
-const changeTask = () => {
-  if (!selectedTask.value) {
-    ElMessage.warning("请先选择一个任务");
-    return;
-  }
-  router.push({ name: "update-task", params: { taskId: selectedTask.value.taskId } });
+const changeTask = () =>{
+  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;
+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 selectTask = (task: any) => {
+  selectedTask.value = task;
+};
+
 onMounted(() => {
   fetchTasks();
 });
 </script>
 
 <template>
-  <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-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>
         </el-scrollbar>
-      </aside>
+      </el-card>
+    </el-col>
 
-      <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>
+    <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" />
 
-            <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-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-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>
+          <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>
 </template>
 
 <style scoped>
-.study-page {
-  display: flex;
+.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 {
   flex-direction: column;
-  gap: 14px;
+  margin-top: 20px;
 }
-
-.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;
-  }
+.action-buttons .el-button {
+  width: 8vw;
+  min-width: 70px;
+  margin-top: 5px;
 }
 </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 as string;
+const buttonName = route.meta.buttonText;
 
-const taskName = ref("");
-const taskDescription = ref("");
-const materialURL = ref("");
+
+const taskName = ref('');
+const taskDescription = ref('');
 const priority = ref({
   urgency: 0,
   importance: 0,
@@ -24,31 +24,34 @@ const priority = ref({
 const priorityOptions = [0, 1, 2, 3, 4, 5];
 
 const createTask = () => {
-  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);
-      }
-    });
+  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)
+    }
+  })
 };
 
 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,
@@ -64,41 +67,45 @@ const loadTask = () => {
 };
 
 const updateTask = () => {
-  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);
-      }
-    });
+  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)
+    }
+  })
 };
 
 const cancelTask = () => {
-  ElMessage.info("已取消操作");
-  router.push({ name: "study" });
+  ElMessage.success("已取消创建")
+  router.back()
 };
 
+
 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);
 
@@ -106,125 +113,119 @@ 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));
 
-onUnmounted(() => window.removeEventListener("resize", updateWidth));
-
-const isMobile = computed(() => screenWidth.value <= 900);
+const columnSpan = computed(() => {
+  return screenWidth.value <= 768 ? 20 : 8;
+});
 </script>
 
 <template>
-  <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 label-width="100px">
+    <el-form-item label="任务名:">
+      <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
+    </el-form-item>
 
-      <div class="group">
-        <h3>优先级维度</h3>
-        <div class="priority-grid" :class="{ mobile: isMobile }">
+    <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">
           <el-form-item label="急迫性">
             <el-select v-model="priority.urgency">
-              <el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
             </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="'i' + item" :label="item" :value="item" />
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
             </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="'d' + item" :label="item" :value="item" />
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
             </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="'f' + item" :label="item" :value="item" />
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
             </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="'s' + item" :label="item" :value="item" />
+              <el-option
+                  v-for="item in priorityOptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              ></el-option>
             </el-select>
           </el-form-item>
-        </div>
-      </div>
+        </el-col>
+      </el-row>
+    </el-form-item>
 
-      <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>
+    <el-form-item>
+      <el-button type="primary" @click="submitTask">{{ buttonName }}</el-button>
+      <el-button @click="cancelTask">取消</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <style scoped>
-.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;
+.el-form-item {
+  margin-bottom: 15px;
 }
 
 @media (max-width: 768px) {
-  .form-shell {
-    padding: 16px;
-  }
-
-  .action-row {
-    flex-direction: column;
-  }
-
-  .action-row .el-button {
-    width: 100%;
-    margin: 0;
+  .el-col {
+    width: 100% !important;
   }
 }
 </style>

src/components/Test.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+test
+</template>
+
+<style scoped>
+
+</style>

src/components/Welcome.vue

@@ -1,78 +1,5 @@
 <script setup lang="ts">
-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}`);
-};
+import router from "@/router/index.js";
 
 const startStudy = () => {
   router.push("/study");
@@ -81,257 +8,103 @@ const startStudy = () => {
 const startReview = () => {
   router.push("/review");
 };
-
-onMounted(() => {
-  loadReviewFeed();
-});
 </script>
-
 <template>
-  <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>
+  <el-container class="container">
+    <el-header class="header">
+<!--      <div class="marquee-wrapper">-->
+<!--        <div class="marquee-content">-->
+          FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
+<!--        </div>-->
+<!--      </div>-->
+    </el-header>
 
-    <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>
 
-    <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-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>
 
-      <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>
+        <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>
 </template>
 
 <style scoped>
-.welcome-page {
+*{
+  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;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.welcome-banner {
-  padding: 20px 22px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.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;
-}
-
-.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;
+  justify-content: center;
 }
 
-.dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
-  margin-right: 3px;
+.progress-text {
+  font-size: 18px;
+  color: #333;
 }
 
-.dot-report {
-  background: var(--green-600);
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 80px;
+  align-items: center;
+}
+.button-group .el-button {
+  margin-left: 0;
 }
 
-.dot-fragment {
-  background: #e6a23c;
-}
 
-.review-scroll-track {
+ /*滚动样式*/
+.marquee-wrapper {
   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;
+  position: relative;
+  height: 40px;
 }
 
-.review-scroll-content.paused {
-  animation-play-state: paused;
+.marquee-content {
+  display: inline-block;
+  position: absolute;
+  white-space: nowrap;
+  will-change: transform;
+  animation: scroll-left 15s linear infinite;
+  font-size: 16px;
+  font-weight: bold;
 }
 
-@keyframes review-ticker {
+@keyframes scroll-left {
   0% {
-    transform: translateX(0);
+    transform: translateX(100%);
   }
   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;
+    transform: translateX(-100%);
   }
 }
 </style>

src/components/composables/fragment.ts

@@ -25,37 +25,34 @@ export const useStudyFragment = () => {
             });
     };
 
-    const confirmGenerateFragment = async (sessionNum: string): Promise<boolean> => {
+    const confirmGenerateFragment = async (sessionNum: string) => {
         if (!fragmentContent.value.trim()) {
             ElMessage.warning('请输入学习内容！');
-            return false;
+            return;
         }
 
-        try {
-            await ElMessageBox.confirm('确定要生成学习残片吗？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'info',
+        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('已取消生成');
             });
-        } 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,14 +18,6 @@ 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();
@@ -99,7 +91,6 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
         timerRunning,
         timerIsOver,
         runCountdown,
-        syncDisplay,
         clear,
         checkAudioPermission,
         requestAudioPermission,

src/components/css/app.css

@@ -0,0 +1,23 @@
+html, body, #app {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+}
+
+.common-layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100vw;
+    background: url("@/assets/background.webp") center center / cover no-repeat;
+}
+
+.router-view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 0;
+    /*background: #ebeef5;*/
+}

src/components/css/login.css

@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+/* 玻璃+边缘羽化 */
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* 建议给点内边距和圆角，效果更柔和 */
+    min-width: 20vw;
+    max-width: 40vw;
+
+    min-height: 40vh;
+    max-height: 80vh;
+
+    border-radius: 16px;
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+    /* 关键：对自身做“羽化”遮罩，让四周渐隐，看起来像边缘被柔化/模糊 */
+    /* 72% 可自行调节，越小羽化范围越大 */
+    mask-image: radial-gradient(100% 100% at 50% 50%, #000 72%, transparent 100%);
+}

src/components/css/myFooter.css

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+.footer {
+    text-align: center;
+    /*min-height: 100%;*/
+    /*min-width: 100%;*/
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+}

src/components/css/myHead.css

@@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+
+.head {
+    font-size: 30px;
+    text-align: center;
+    /*background: green;*/
+    /*min-height: 7vh;*/
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    /*-webkit-backdrop-filter: blur(16px) saturate(130%);*/
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+}

src/router/index.ts

@@ -1,90 +1,56 @@
-import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+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 StartTask from "@/components/StartTask.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: "更新",
-    },
-  },
-];
+import TaskForm from "@/components/TaskForm.vue";
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
+    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: '更新'
+            }
+        }
+    ]
 });
 
-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;
+export default router;

src/utils/request.ts

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

vite.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
@@ -15,19 +15,6 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0',
-    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'],
-  },
+    port: 5158
+  }
 })