fix: 首页滚动条始终渲染 DOM，消除加载生硬感

去掉 v-if 和 visibility 条件控制，滚动区域结构在页面加载时即存在于 DOM 中，芯片通过 v-for 响应式插入，避免数据到达时整块 DOM 节点创建/销毁导致的跳变
fix: 首页滚动条防闪烁与颜色标注修正
2026-05-23 23:08:35 +08:00 · 2026-05-23 22:55:08 +08:00 · 2026-05-23 22:55:06 +08:00 · 2026-05-23 22:55:03 +08:00 · 2026-05-23 22:55:01 +08:00 · 2026-05-23 22:54:58 +08:00
26 changed files with 2163 additions and 725 deletions
@@ -1 +1 @@
-VITE_BASE_URL = 'http://localhost:5157'
+VITE_BASE_URL=/api
@@ -1 +1 @@
-VITE_BASE_URL = 'https://lpt.cat-shark.xyz/api'
+VITE_BASE_URL=/api
@@ -0,0 +1 @@
+VITE_BASE_URL=/api
@@ -4,7 +4,7 @@ FROM nginx:alpine
 RUN apk add --no-cache curl

 COPY dist/ /usr/share/nginx/html/
-
+RUN chmod -R 755 /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf

 EXPOSE 80
@@ -3,7 +3,6 @@ pipeline {
    environment {
 		IMAGE_NAME = 'lpt-fe:0.0'
        CONTAINER_NAME = 'LPT_FE'
-        HOST_PORT = '5158'
        CONTAINER_PORT = '80'
    }
    stages {
@@ -50,9 +49,17 @@ pipeline {
 			agent any
            steps {
 				sh '''
+                  docker network create traefik-public || true
                  docker rm -f $CONTAINER_NAME || true
                  docker run -d --name $CONTAINER_NAME \\
-                    -p $HOST_PORT:$CONTAINER_PORT \\
+                    --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" \\
                    --health-cmd="curl -f http://localhost:80 || exit 1" \\
                    --health-interval=5s \\
                    --health-retries=3 \\
@@ -0,0 +1,96 @@
+pipeline {
+	agent none  // 全局不指定，局部单独声明
+    environment {
+		IMAGE_NAME = 'lpt-fe-dev:0.0'
+        CONTAINER_NAME = 'LPT_FE-dev'
+        CONTAINER_PORT = '80'
+    }
+    stages {
+		stage('Install Dependencies') {
+			agent {
+				docker {
+					image 'node:20-alpine'
+                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
+                }
+            }
+            steps {
+				sh '''
+                  npm config set cache /.npm
+                  npm install
+                '''
+            }
+        }
+
+        stage('Type Check & Build') {
+			agent {
+				docker {
+					image 'node:20-alpine'
+                    args '-v ${WORKSPACE}/.npm:/.npm -v ${WORKSPACE}/node_modules:/app/node_modules'
+                }
+            }
+            steps {
+				sh '''
+                  npm run type-check
+                  npm run build:dev
+                '''
+            }
+        }
+
+        stage('Build Docker Image') {
+			agent any  // Jenkins默认节点，有Docker命令
+            steps {
+				sh '''
+                  docker build -t $IMAGE_NAME .
+                '''
+            }
+        }
+
+        stage('Run Docker Container') {
+			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" \\
+                    --health-cmd="curl -f http://localhost:80 || exit 1" \\
+                    --health-interval=5s \\
+                    --health-retries=3 \\
+                    --restart=always \\
+                    $IMAGE_NAME
+                '''
+            }
+        }
+
+        stage('Check Docker Status') {
+            agent any
+            steps {
+                script {
+                    def lastStatus = ''
+                    timeout(time: 60, unit: 'SECONDS') {
+                        waitUntil {
+                            def status = sh(
+                                script: "docker inspect -f '{{.State.Health.Status}}' $CONTAINER_NAME || echo 'unhealthy'",
+                                returnStdout: true
+                            ).trim()
+
+                            if (status != lastStatus) {
+                                echo "Container health: ${status}"
+                                lastStatus = status
+                            }
+
+                            return (status == 'healthy')
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
@@ -5,6 +5,7 @@
  "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",
@@ -1,50 +1,100 @@
 <script setup lang="ts">
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 </script>

 <template>
-  <div class="login">
-    <el-container class="common-layout">
-      <el-header class="header">
+  <div class="app-shell">
+    <div class="bg-orb bg-orb-left"></div>
+    <div class="bg-orb bg-orb-right"></div>
+    <el-container class="shell-container">
+      <el-header class="shell-header">
        <MyHead />
      </el-header>
-      <el-main class="main-content">
-          <RouterView />
+      <el-main class="shell-main">
+        <Transition name="fade-up" mode="out-in">
+          <RouterView :key="route.fullPath" />
+        </Transition>
      </el-main>
-      <el-footer class="footer">
-        <MyFooter/>
+      <el-footer class="shell-footer">
+        <MyFooter />
      </el-footer>
    </el-container>
  </div>
 </template>

 <style scoped>
-#app {
-  margin: 0px 0px;
-}
-
-*{
-  padding:0px
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-size: cover;
-}
-
-.common-layout {
-  min-width: 100vw;
+.app-shell {
+  position: relative;
  min-height: 100vh;
+  overflow: hidden;
 }

-.main-content {
+.shell-container {
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.shell-header {
+  height: auto;
+  padding: 18px 20px 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--surface);
+}
+
+.shell-main {
+  max-width: 1240px;
+  width: 100%;
  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
+  padding: 18px 20px 24px;
 }

+.shell-footer {
+  height: auto;
+  padding: 0 20px 18px;
+}
+
+.bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(1px);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-orb-left {
+  width: 300px;
+  height: 300px;
+  top: -120px;
+  left: -90px;
+  background: radial-gradient(circle at center, rgba(47, 143, 104, 0.35), transparent 70%);
+}
+
+.bg-orb-right {
+  width: 360px;
+  height: 360px;
+  right: -130px;
+  bottom: -170px;
+  background: radial-gradient(circle at center, rgba(67, 168, 121, 0.3), transparent 70%);
+}
+
+@media (max-width: 768px) {
+  .shell-header {
+    padding: 12px 12px 0;
+  }
+
+  .shell-main {
+    padding: 12px 12px 18px;
+  }
+
+  .shell-footer {
+    padding: 0 12px 12px;
+  }
+}
 </style>
@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export const login = (username: string, password: string) => {
+  return request.post("/login", { username, password });
+};
+
+export const logout = () => {
+  return request.post("/logout");
+};
@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+export interface ReviewFeedItem {
+  id: number;
+  sessionNum: string;
+  taskNum: string;
+  taskName: string;
+  sourceType: "REPORT" | "FRAGMENT";
+  content: string;
+  createdTime: string;
+}
+
+export const getReviewFeed = (limit: number = 30) => {
+  return request.get("/review/feed", { limit });
+};
+
+export const getReportDetail = (id: number) => {
+  return request.get(`/review/report/${id}`);
+};
+
+export const getFragmentDetail = (id: number) => {
+  return request.get(`/review/fragment/${id}`);
+};
+
+export const getTaskReview = (taskNum: string) => {
+  return request.get(`/review/task/${taskNum}`);
+};
@@ -17,3 +17,7 @@ export const endSession = (sessionNum: string, content: string = "任务结束")
 export const startOrContinueStudySession = (taskNum: string) => {
    return request.get(`/tasks/${taskNum}/study-sessions/start-or-continue`);
 };
+
+export const getSessionDetail = (sessionNum: string) => {
+    return request.get(`/study-sessions/${sessionNum}`);
+};
@@ -1,86 +1,41 @@
-/* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
+  --green-900: #123d2d;
+  --green-800: #1a5a42;
+  --green-700: #237556;
+  --green-600: #2f8f68;
+  --green-500: #43a879;
+  --green-200: #d9f1e5;
+  --green-100: #eef9f3;
+  --surface: #f7fbf8;
+  --surface-strong: #ffffff;
+  --text-primary: #1b2a23;
+  --text-secondary: #4b6156;
+  --border-soft: #d6e6dc;
+  --shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
+  --shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);
 }

 *,
 *::before,
 *::after {
  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
 }

 body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
+  margin: 0;
+  color: var(--text-primary);
+  background:
+    radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
+    radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
+    linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
+  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -1,35 +1,45 @@
-@import './base.css';
+@import "./base.css";

 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+  width: 100%;
 }

-a,
-.green {
+a {
+  color: var(--green-700);
  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
 }

-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+a:hover {
+  color: var(--green-800);
 }

-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+.page-title {
+  margin: 0;
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.2;
+  letter-spacing: 0.4px;
+}
+
+.page-subtitle {
+  margin: 10px 0 0;
+  color: var(--text-secondary);
+  font-size: 15px;
+}
+
+.surface-card {
+  background: var(--surface-strong);
+  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);
 }
@@ -1,37 +1,27 @@
 <script setup lang="ts">
-import {reactive, ref} from "vue";
-import {ElMessage, type FormInstance, type FormRules} from "element-plus";
-import type {InternalRuleItem, Value} from "async-validator";
-import request from "@/utils/request";
+import { reactive, ref } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import type { InternalRuleItem, Value } from "async-validator";
 import router from "@/router";
-import {routes} from "vue-router/auto-routes";
+import { login } from "@/api/login";

 interface RegisterData {
-  username: string
-  password: string
+  username: string;
+  password: string;
 }

 const registerData = reactive<RegisterData>({
  username: "",
-  password: ""
+  password: "",
 });

 const loginForm = ref<FormInstance>();
+const loading = ref(false);
+
 const rules = reactive<FormRules<RegisterData>>({
-      password: [
-        {
-          validator: isNotEmpty,
-          message:"请输入密码！"
-        }
-      ],
-      username: [
-        {
-          validator: isNotEmpty,
-          message:"请输入账号！"
-        }
-      ]
-    }
-)
+  password: [{ validator: isNotEmpty, message: "请输入密码！" }],
+  username: [{ validator: isNotEmpty, message: "请输入账号！" }],
+});

 function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
  if (!value) {
@@ -42,54 +32,157 @@ function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
 }

 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log(registerData)
-      request.post("/login", {password:registerData.password,username:registerData.username}).then(result =>{
-        console.log(result)
-        if (result.code === 200) {
-          ElMessage.success(result.message)
-          router.push("./welcome")
-        } else {
-          ElMessage.error(result.message)
-        }
-      })
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
+  if (!formEl || loading.value) return;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    loading.value = true;
+    try {
+      const result = await login(registerData.username, registerData.password);
+      if (result.code === 200) {
+        localStorage.setItem("isLoggedIn", "true");
+        ElMessage.success(result.message);
+        await router.push("/welcome");
+      } else {
+        ElMessage.error(result.message);
+      }
+    } finally {
+      loading.value = false;
    }
-  })
-}
-
+  });
+};
 </script>

-
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model = "registerData">
-      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">
-        <el-input v-model= "registerData.username"/>
-      </el-form-item>
-      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">
-        <el-input v-model= "registerData.password" type="password"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <section class="login-page">
+    <div class="login-panel surface-card">
+      <div class="hero">
+        <p class="hero-kicker">LPT · Focus Flow</p>
+        <h1>今天的学习，从一次清晰登录开始</h1>
+        <p>
+          你将看到任务优先级、学习会话和复习数据在同一个系统里自然衔接。
+        </p>
+        <ul class="hero-points">
+          <li>明确学习任务</li>
+          <li>记录会话与残片</li>
+          <li>持续复盘</li>
+        </ul>
+      </div>
+
+      <div class="form-area">
+        <h2>账号登录</h2>
+        <el-form ref="loginForm" :model="registerData" class="login-form">
+          <el-form-item label="账号" :rules="rules.username" prop="username">
+            <el-input
+              v-model="registerData.username"
+              placeholder="请输入账号"
+              @keyup.enter="submitForm(loginForm)"
+            />
+          </el-form-item>
+          <el-form-item label="密码" :rules="rules.password" prop="password">
+            <el-input
+              v-model="registerData.password"
+              type="password"
+              show-password
+              placeholder="请输入密码"
+              @keyup.enter="submitForm(loginForm)"
+            />
+          </el-form-item>
+          <el-button
+            type="success"
+            class="submit-btn"
+            :loading="loading"
+            @click="submitForm(loginForm)"
+          >
+            进入系统
+          </el-button>
+        </el-form>
+      </div>
+    </div>
+  </section>
 </template>

 <style scoped>
-*{
-  margin: 0;
-  padding: 0;
+.login-page {
+  min-height: calc(100vh - 240px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

-.login {
-  min-height: 25vh;
-  min-width: 30vw;
-  background: #22b9fa;
+.login-panel {
+  width: min(980px, 100%);
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 0;
+  overflow: hidden;
+}
+
+.hero {
+  padding: 36px;
+  background: linear-gradient(150deg, var(--green-800) 0%, var(--green-600) 100%);
+  color: #effcf4;
+}
+
+.hero-kicker {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 1.4px;
+  opacity: 0.85;
+}
+
+.hero h1 {
+  margin: 14px 0 10px;
+  line-height: 1.35;
+  font-size: clamp(22px, 2.6vw, 32px);
+}
+
+.hero p {
+  margin: 0;
+  opacity: 0.88;
+}
+
+.hero-points {
+  margin: 20px 0 0;
+  padding-left: 18px;
+}
+
+.hero-points li {
+  margin-top: 6px;
+}
+
+.form-area {
+  background: var(--surface-strong);
+  padding: 32px 30px;
+}
+
+.form-area h2 {
+  margin: 0 0 16px;
+  color: var(--green-900);
+}
+
+.login-form :deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+
+.submit-btn {
+  width: 100%;
+  margin-top: 8px;
+}
+
+@media (max-width: 900px) {
+  .login-panel {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    min-height: auto;
+  }
+
+  .hero,
+  .form-area {
+    padding: 22px 16px;
+  }
 }
 </style>
@@ -1,17 +1,32 @@
 <template>
-  <div class="footer">
-    Footer123
+  <div class="footer surface-card">
+    <span>学习是一条可重复走通的路径：计划、执行、复盘、再出发</span>
+    <span class="footer-tag">LPT-FE</span>
  </div>
 </template>

 <style scoped>
-*{
-  margin: 20px;
-  padding:0px;
-}
 .footer {
-  text-align: center;
-  min-height: 8vh;
-  background-color: green;
+  padding: 12px 16px;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-secondary);
 }
-</style>
+
+.footer-tag {
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  color: var(--green-700);
+}
+
+@media (max-width: 768px) {
+  .footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>
@@ -1,23 +1,112 @@
 <template>
-  <div class="head">学习进度跟踪系统
-  <el-button v-if="!isLoginRoute">退出登录</el-button>
+  <div class="head surface-card">
+    <el-button
+      v-if="showBackButton"
+      text
+      class="back-btn"
+      @click="router.push('/welcome')"
+    >
+      ← 返回首页
+    </el-button>
+    <template v-if="pageTitle">
+      <h1 class="head-title">{{ pageTitle }}</h1>
+    </template>
+    <div v-else class="brand-block">
+      <p class="brand-title">学习进度跟踪系统</p>
+      <p class="brand-subtitle">把学习变成可记录、可回顾、可持续的日常流程</p>
+    </div>
+    <el-button
+      v-if="!isLoginRoute"
+      type="success"
+      plain
+      class="logout-btn"
+      @click="handleLogout"
+    >
+      退出登录
+    </el-button>
  </div>
 </template>

 <script setup lang="ts">
-import {computed} from "vue";
-import {useRoute} from "vue-router";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import router from "@/router";
+import { logout } from "@/api/login";

-var route = useRoute();
+const route = useRoute();
+const isLoginRoute = computed(() => route.path === "/login");
+const showBackButton = computed(() => route.path !== "/login" && route.path !== "/welcome");
+const pageTitle = computed(() => route.meta?.title as string | undefined);

-const isLoginRoute = computed(()=>route.path === '/login');
+const handleLogout = async () => {
+  try {
+    await logout();
+  } catch {
+    // 后端退出失败时，仍然清理前端登录态，避免用户被卡住。
+  } finally {
+    localStorage.removeItem("isLoggedIn");
+    ElMessage.success("已退出登录");
+    await router.push("/login");
+  }
+};
 </script>

 <style scoped>
 .head {
-  font-size: 30px;
-  text-align: center;
-  background: green;
-  min-height: 7vh;
+  min-height: 82px;
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
-</style>
+
+.brand-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: clamp(18px, 2.4vw, 24px);
+  letter-spacing: 0.3px;
+  color: var(--green-900);
+}
+
+.brand-subtitle {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.head-title {
+  margin: 0;
+  font-size: clamp(18px, 2.4vw, 24px);
+  font-weight: 700;
+  color: var(--green-900);
+  flex: 1;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: var(--green-700);
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+.back-btn:hover {
+  color: var(--green-900);
+}
+
+.logout-btn {
+  border-color: var(--green-600);
+  color: var(--green-700);
+}
+
+@media (max-width: 768px) {
+  .head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .logout-btn {
+    width: 100%;
+  }
+}
+</style>
@@ -1,11 +1,120 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import request from "@/utils/request";

+interface ReviewTask {
+  taskNum: string;
+  taskName: string;
+  reportCount: number | string;
+  fragmentCount: number | string;
+  effectiveTime: number | string;
+}
+
+const loading = ref(false);
+const tasks = ref<ReviewTask[]>([]);
+
+const summary = computed(() => ({
+  totalTasks: tasks.value.length,
+  totalReports: tasks.value.reduce((acc, item) => acc + Number(item.reportCount || 0), 0),
+  totalFragments: tasks.value.reduce((acc, item) => acc + Number(item.fragmentCount || 0), 0),
+}));
+
+const loadTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((item: any) => ({
+      taskNum: item.taskNum,
+      taskName: item.taskName,
+      reportCount: item.reportCount ?? "-",
+      fragmentCount: item.fragmentCount ?? "-",
+      effectiveTime: item.effectiveTime ?? "-",
+    }));
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadTasks();
+});
 </script>

 <template>
-复习页面
+  <section class="review-page">
+    <div class="table-toolbar">
+      <span class="toolbar-placeholder"></span>
+      <el-button type="success" plain size="small" :loading="loading" @click="loadTasks">刷新</el-button>
+    </div>
+
+    <div class="summary-grid">
+      <article class="surface-card metric-card">
+        <span>任务数</span>
+        <strong>{{ summary.totalTasks }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习报告总数</span>
+        <strong>{{ summary.totalReports }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习残片总数</span>
+        <strong>{{ summary.totalFragments }}</strong>
+      </article>
+    </div>
+
+    <article class="surface-card table-card">
+      <el-table v-loading="loading" :data="tasks" stripe>
+        <el-table-column prop="taskName" label="任务名" min-width="180" />
+        <el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="150" />
+        <el-table-column prop="reportCount" label="学习报告数" min-width="120" />
+        <el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
+      </el-table>
+    </article>
+  </section>
 </template>

 <style scoped>
+.review-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}

-</style>
+.table-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  padding: 16px 18px;
+}
+
+.metric-card span {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.metric-card strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 30px;
+  line-height: 1;
+  color: var(--green-900);
+}
+
+.table-card {
+  padding: 10px;
+}
+
+@media (max-width: 900px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
@@ -0,0 +1,345 @@
+<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";
+
+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 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}`);
+};
+
+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>
+      </div>
+
+      <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>
+    </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 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">残片</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;
+}
+
+</style>
@@ -1,12 +1,15 @@
-<!-- src/views/StudyTimer.vue -->
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import {ElMessage, ElMessageBox} from 'element-plus';
-import { useTimer } from '@/components/composables/useTimer';
-import { continueSession, pauseSession, endSession, startOrContinueStudySession } from '@/api/studySessions';
-import { useStudyFragment } from '@/components/composables/fragment';
-import {routes} from "vue-router/auto-routes";
+import { computed, onMounted, onUnmounted, ref } 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 router from "@/router";

 const {
@@ -14,70 +17,138 @@ const {
  fragmentContent,
  openFragmentDialog,
  closeFragmentDialog,
-  confirmGenerateFragment
+  confirmGenerateFragment,
 } = useStudyFragment();

 const summaryDialogVisible = ref(false);
-const summaryContent = ref('');
+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 globalTimer = ref(Date.now());
+const progress = computed(() => ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100);
+const nowTimestamp = ref(Date.now());

-const currentCycle = computed(() =>
-    Math.floor(taskInfo.value.effectiveTime / 60 / 25) + 1
-);
+let displayInterval: number | undefined;

-const elapsedTime = computed(() => {
-  if (!taskInfo.value.startTime || !timerRunning.value) return { hours: 0, minutes: 0, seconds: 0 };
-  const start = new Date(taskInfo.value.startTime).getTime();
-  const now = globalTimer.value;
-  const diff = Math.max(Math.floor((now - start) / 1000), 0);
-  return {
-    hours: Math.floor(diff / 3600),
-    minutes: Math.floor((diff % 3600) / 60),
-    seconds: diff % 60,
-  };
+const formatDuration = (value: number | string) => {
+  const totalSeconds = Math.max(0, Math.floor(Number(value) || 0));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}小时 ${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  if (minutes > 0) {
+    return `${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  return `${seconds}秒`;
+};
+
+const toDate = (value: unknown): Date | null => {
+  if (value == null || value === "") return null;
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === "number") {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (Array.isArray(value)) {
+    const [year, month, day, hour = 0, minute = 0, second = 0] = value.map(Number);
+    if (!year || !month || !day) return null;
+    const date = new Date(year, month - 1, day, hour, minute, second);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (typeof value === "string") {
+    const normalized = value.includes("T") ? value : value.replace(" ", "T");
+    const date = new Date(normalized);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  return null;
+};
+
+const toSeconds = (start: Date, endTimestamp: number) => {
+  return Math.max(0, Math.floor((endTimestamp - start.getTime()) / 1000));
+};
+
+const actualTimeSeconds = computed(() => {
+  const fallback = Math.max(0, Math.floor(Number(taskInfo.value.actualTime) || 0));
+  const startDate = toDate(taskInfo.value.startTime);
+  if (!startDate) return fallback;
+
+  // 实际用时：开始后持续计时，暂停时也继续累计，结束后冻结。
+  if (taskInfo.value.sessionState === "ENDED") {
+    const endDate = toDate(taskInfo.value.endTime);
+    if (!endDate) return fallback;
+    return toSeconds(startDate, endDate.getTime());
+  }
+
+  return toSeconds(startDate, nowTimestamp.value);
 });

-const formatTime = (t: { hours: number; minutes: number; seconds: number }) =>
-    `${t.hours}时${t.minutes}分${t.seconds}秒`;
+const effectiveTimeSeconds = computed(() => {
+  const base = Math.max(0, Math.floor(Number(taskInfo.value.effectiveTime) || 0));
+  if (taskInfo.value.sessionState !== "ONGOING") return base;

-const progress = computed(() =>
-    ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100
-);
+  const lastStartDate = toDate(taskInfo.value.lastStartTime);
+  if (!lastStartDate) return base;
+  return base + toSeconds(lastStartDate, nowTimestamp.value);
+});
+
+const actualTimeText = computed(() => formatDuration(actualTimeSeconds.value));
+const effectiveTimeText = computed(() => formatDuration(effectiveTimeSeconds.value));
+
+const statusText = computed(() => {
+  switch (taskInfo.value.sessionState) {
+    case "ONGOING":
+      return "进行中";
+    case "PAUSED":
+      return "已暂停";
+    case "ENDED":
+      return "已结束";
+    default:
+      return "未开始";
+  }
+});

 const startTimer = async () => {
  if (taskInfo.value.sessionState === "PAUSED") {
    const res = await continueSession(taskInfo.value.sessionNum);
-    if (res.code === 200) ElMessage.success('任务继续');
+    if (res.code === 200) ElMessage.success("任务继续");
    await loadTaskSession();
  }
  const duration = taskInfo.value.pointerPosition || 25 * 60 * 1000;
@@ -86,41 +157,47 @@ const startTimer = async () => {

 const stopTimer = async () => {
  const res = await pauseSession(taskInfo.value.sessionNum);
-  if (res.code === 200) ElMessage.success('任务暂停');
+  if (res.code === 200) ElMessage.success("任务暂停");
  clear();
 };

 const endTimer = async (content: string) => {
  if (!content) {
-    ElMessage.warning('请输入学习总结内容');
+    ElMessage.warning("请输入学习总结内容");
    return;
  }
-  ElMessageBox.confirm('确定要结束吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info',
-  }).then(async () => {
+  try {
+    await ElMessageBox.confirm("确定要结束本次学习会话吗？", "结束确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+  } catch {
+    // 用户取消结束会话，不做任何操作
+    return;
+  }
+
+  try {
    const res = await endSession(taskInfo.value.sessionNum, content);
-    if (res.code === 200) ElMessage.success('任务结束');
-    router.back();
+    if (res.code === 200) {
+      ElMessage.success("任务结束");
+    } else {
+      ElMessage.error(res.message || "结束会话失败");
+    }
    clear();
-  })
+    await router.push("/study");
+  } catch {
+    ElMessage.error("结束会话失败，请重试");
+  }
 };

-const openSummaryDialog = async () => {
+const openSummaryDialog = () => {
  summaryDialogVisible.value = true;
-}
+};

-const closeSummaryDialog = async () => {
-  ElMessageBox.alert('确定取消吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    summaryDialogVisible.value = false;
-    ElMessage.info('已取消结束操作')
-  })
-}
+const closeSummaryDialog = () => {
+  summaryDialogVisible.value = false;
+};

 const restTimer = async () => {
  await stopTimer();
@@ -131,14 +208,13 @@ 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();
-    }
-    if (taskInfo.value.systemMessage) {
-      ElMessage.warning(taskInfo.value.systemMessage);
+    } else {
+      syncDisplay(taskInfo.value.pointerPosition || 25 * 60 * 1000);
    }
  } catch (err: any) {
-    ElMessage.error(err.message || '加载任务失败');
+    ElMessage.error(err.message || "加载任务失败");
  }
 };

@@ -146,94 +222,230 @@ const initPage = async () => {
  const hasPermission = await checkAudioPermission();
  if (!hasPermission) {
    const activated = await requestAudioPermission();
-    if (!activated) {
-      console.warn('用户拒绝或未能激活权限');
-      return;
-    }
+    if (!activated) return;
  }
  await loadTaskSession();
-
-  setInterval(() => {
-    globalTimer.value = Date.now();
-  }, 1000);
 };

 onMounted(() => {
+  displayInterval = window.setInterval(() => {
+    nowTimestamp.value = Date.now();
+  }, 1000);
  initPage();
 });
+
+onUnmounted(() => {
+  if (displayInterval) {
+    clearInterval(displayInterval);
+  }
+  clear();
+});
 </script>

 <template>
-  <div class="task-container">
-    <div class="task-info">
-      <p>当前任务【{{ taskInfo.taskName }}】</p>
-      <p>当前循环：{{ currentCycle }}</p>
-      <p>有效时间：{{ taskInfo.effectiveTime / 60 }}分钟</p>
-      <p>本次运行时间：{{ formatTime(elapsedTime) }}</p>
+  <section class="start-page">
+    <div class="task-info-bar">
+      <el-tag type="success" effect="plain">任务编号：{{ taskInfo.taskNum }}</el-tag>
+      <span class="status-text">状态：{{ statusText }}</span>
    </div>
-    <div class="timer-section">
-      <el-progress type="circle" :percentage="progress" :width="200">
-        <div>
-          {{ timerMinutes.toString().padStart(2, '0') }} :
-          {{ timerSeconds.toString().padStart(2, '0') }}
+
+    <el-alert
+      v-if="taskInfo.systemMessage"
+      :title="taskInfo.systemMessage"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+
+    <div class="session-grid">
+      <article class="surface-card timer-card">
+        <p class="timer-title">当前计时</p>
+        <el-progress type="dashboard" :percentage="progress" :stroke-width="14" :width="250" color="#2f8f68">
+          <div class="timer-number">
+            {{ timerMinutes.toString().padStart(2, "0") }}:{{ timerSeconds.toString().padStart(2, "0") }}
+          </div>
+        </el-progress>
+        <p class="timer-tip">番茄钟默认 25 分钟，休息计时 5 分钟</p>
+      </article>
+
+      <article class="surface-card info-card">
+        <h3>会话数据</h3>
+        <div class="info-grid">
+          <div class="metric">
+            <span>实际用时</span>
+            <strong>{{ actualTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效学习时长</span>
+            <strong>{{ effectiveTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效时间比</span>
+            <strong>{{ taskInfo.effectivenessRatio }}</strong>
+          </div>
+          <div class="metric">
+            <span>会话状态</span>
+            <strong>{{ statusText }}</strong>
+          </div>
        </div>
-      </el-progress>
+
+        <div class="action-row">
+          <el-button type="success" @click="startTimer" :disabled="timerRunning">开始</el-button>
+          <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
+          <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成残片</el-button>
+          <el-button v-if="timerIsOver" plain type="success" @click="restTimer">休息</el-button>
+          <el-button type="danger" plain @click="openSummaryDialog">结束会话</el-button>
+        </div>
+      </article>
    </div>
-    <div class="actions">
-      <el-button @click="startTimer" :disabled="timerRunning">开始</el-button>
-      <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
-      <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成学习残片</el-button>
-      <el-button @click="restTimer" v-if="timerIsOver">休息</el-button>
-      <el-button @click="openSummaryDialog">结束</el-button>
-    </div>
-  </div>
-  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="500px">
+  </section>
+
+  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="520px">
    <el-input
-        type="textarea"
-        v-model="fragmentContent"
-        placeholder="请输入本次学习的内容"
-        rows="5"
+      type="textarea"
+      v-model="fragmentContent"
+      placeholder="请输入本次学习内容"
+      :rows="5"
    />
    <template #footer>
-    <span>
-      <el-button @click="closeFragmentDialog">取消生成</el-button>
-      <el-button type="primary" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
-    </span>
+      <el-button @click="closeFragmentDialog">取消</el-button>
+      <el-button type="success" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
    </template>
  </el-dialog>
-  <el-dialog v-model="summaryDialogVisible" title="本次学习内容总结" width="500px">
+
+  <el-dialog v-model="summaryDialogVisible" title="结束会话总结" width="520px">
    <el-input
-        type="textarea"
-        v-model="summaryContent"
-        placeholder="请输入本次学习的内容总结"
-        rows="5"
+      type="textarea"
+      v-model="summaryContent"
+      placeholder="请输入本次学习内容总结"
+      :rows="5"
    />
    <template #footer>
-    <span>
      <el-button @click="closeSummaryDialog">取消</el-button>
-      <el-button type="primary" @click="endTimer(summaryContent)">确定</el-button>
-    </span>
+      <el-button type="success" @click="endTimer(summaryContent)">确认结束</el-button>
    </template>
  </el-dialog>
 </template>

 <style scoped>
-.task-container {
+.start-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.task-info-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.session-grid {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 14px;
+}
+
+.timer-card {
+  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  margin: 20px;
 }
-.task-info {
-  font-size: 18px;
-  margin-bottom: 30px;
+
+.timer-title {
+  margin: 0;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.timer-section {
-  margin: 20px;
+
+.timer-number {
+  font-size: 28px;
+  letter-spacing: 1px;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.actions {
-  display: flex;
+
+.timer-tip {
+  margin: 14px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.info-card {
+  padding: 20px;
+}
+
+.info-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.info-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
 }
+
+.metric {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fbfefc;
+}
+
+.metric span {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.metric strong {
+  margin-top: 6px;
+  display: block;
+  font-size: 18px;
+  color: var(--green-900);
+}
+
+.action-row {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.action-row .el-button {
+  margin: 0;
+}
+
+@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>
@@ -1,58 +1,82 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import request from '@/utils/request';
+import { computed, onMounted, ref } from "vue";
+import request from "@/utils/request";
 import router from "@/router";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";

-const tasks = reactive([] as any[]);
+interface TaskItem {
+  title: string;
+  description: string;
+  materialURL: string;
+  lastLearningStatus: string;
+  priority: number | string;
+  taskNum: string;
+  taskId: number;
+}

-const selectedTask = ref<any>(null);
+const tasks = ref<TaskItem[]>([]);
+const selectedTaskId = ref<number | null>(null);
+const loading = ref(false);

-const fetchTasks = () => {
-  request.get('/tasks', { pageSize: 100, pageNum: 1 })
-      .then((res) => {
-        /* 此处暂时不开发分页模式，数据量应该不会很大，但仍然保留了分页形式的接口 */
-        tasks.splice(0, tasks.length, ...res.data.records.map((record: any) => ({
-          title: record.taskName,
-          description: record.taskDescription || '',
-          lastLearningStatus: record.lastLearningStatus || '未开始',
-          priority: Math.round(record.taskPriority),
-          taskNum: record.taskNum,
-          taskId: record.id,
-        })));
-        selectedTask.value = tasks[0] || null;
-      });
-};
+const selectedTask = computed(() =>
+  tasks.value.find((item) => item.taskId === selectedTaskId.value) || null
+);

-const startTask = () => {
-  router.push({name:'start-task',params:{taskNum:selectedTask.value.taskNum}});
-  console.log('任务已开始：', selectedTask.value);
-};
-
-const addTask = () => {
-  router.push({name:"add-task"});
-};
-
-const changeTask = () =>{
-  router.push({name:"update-task",params:{"taskId":selectedTask.value.taskId}})
-};
-
-const removeTask = () => {
-  request.del(`/tasks/${selectedTask.value.taskId}`,{}).then(res=>{
-    if (res.code == '200'){
-      ElMessage.success(`任务${selectedTask.value.title}删除成功`)
-    }
-  });
-
-  const index = tasks.indexOf(selectedTask.value);
-  if (index > -1) {
-    tasks.splice(index, 1);
-    selectedTask.value = tasks[0] || null;
+const fetchTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((record: any) => ({
+      title: record.taskName,
+      description: record.taskDescription || "",
+      materialURL: record.materialURL || record.materialUrl || "",
+      lastLearningStatus: record.lastLearningStatus || "未开始",
+      priority: Number.isFinite(record.taskPriority) ? Math.round(record.taskPriority) : "-",
+      taskNum: record.taskNum,
+      taskId: record.id,
+    }));
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  } catch (error: any) {
+    tasks.value = [];
+    selectedTaskId.value = null;
+    ElMessage.error(error?.message || "任务列表加载失败，请重试");
+  } finally {
+    loading.value = false;
  }
 };

-const selectTask = (task: any) => {
-  selectedTask.value = task;
+const startTask = () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  router.push(`/start-task/${encodeURIComponent(selectedTask.value.taskNum)}`);
+};
+
+const addTask = () => {
+  router.push({ name: "add-task" });
+};
+
+const changeTask = () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  router.push({ name: "update-task", params: { taskId: selectedTask.value.taskId } });
+};
+
+const removeTask = async () => {
+  if (!selectedTask.value) {
+    ElMessage.warning("请先选择一个任务");
+    return;
+  }
+  const target = selectedTask.value;
+  const res = await request.del(`/tasks/${target.taskId}`, {});
+  if (res.code === 200) {
+    ElMessage.success(`任务 ${target.title} 删除成功`);
+    tasks.value = tasks.value.filter((item) => item.taskId !== target.taskId);
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  }
 };

 onMounted(() => {
@@ -61,95 +85,200 @@ onMounted(() => {
 </script>

 <template>
-  <el-row :gutter="5" class="task-layout">
-    <el-col :span="6">
-      <el-card class="task-card" :body-style="{ padding: '0' }">
-        <div class="task-header">任务列表</div>
-        <el-scrollbar height="300px">
-          <el-menu class="task-menu" @select="(key:any) => selectTask(tasks[key])">
-            <el-menu-item
-                v-for="(task, index) in tasks"
-                :key="index"
-                :index="index.toString()"
-                class="task-item"
-            >
-              {{ task.title }}
-            </el-menu-item>
-          </el-menu>
+  <section class="study-page">
+    <div class="layout-grid">
+      <aside class="surface-card task-list">
+        <div class="block-title">任务清单</div>
+        <el-scrollbar height="420px">
+          <div
+            v-for="item in tasks"
+            :key="item.taskId"
+            class="task-list-item"
+            :class="{ active: selectedTaskId === item.taskId }"
+            @click="selectedTaskId = item.taskId"
+          >
+            <p class="task-name">{{ item.title }}</p>
+            <p class="task-meta">状态：{{ item.lastLearningStatus }}</p>
+          </div>
        </el-scrollbar>
-      </el-card>
-    </el-col>
+      </aside>

-    <el-col :span="13">
-      <el-card class="task-card">
-        <div v-if="selectedTask">
-          <h3>任务描述</h3>
-          <el-input type="textarea" v-model="selectedTask.description" :rows="4" />
+      <main class="content-zone">
+        <article class="surface-card detail-card" v-loading="loading">
+          <template v-if="selectedTask">
+            <div class="detail-head">
+              <h3>{{ selectedTask.title }}</h3>
+              <el-tag type="success" effect="plain">优先级 {{ selectedTask.priority }}</el-tag>
+            </div>

-          <h3 class="section-title">任务优先级</h3>
-          <el-radio-group v-model="selectedTask.priority">
-            <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
-          </el-radio-group>
+            <div class="detail-block">
+              <p class="label">任务描述</p>
+              <el-input type="textarea" :model-value="selectedTask.description" :rows="4" readonly />
+            </div>

-          <h3 class="section-title">上次该任务学习情况</h3>
-          <el-descriptions border column="1">
-            <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
-            <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
-            <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
-            <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
-          </el-descriptions>
-        </div>
-        <div v-else>
-          <p>请选择任务或等待任务加载完成。</p>
-        </div>
-      </el-card>
-    </el-col>
-    <el-col :span="5">
-      <el-space class="action-buttons">
-        <el-button type="primary" @click="startTask">开始任务</el-button>
-        <el-button @click="addTask">添加任务</el-button>
-        <el-button @click="changeTask">更新任务</el-button>
-        <el-button type="danger" @click="removeTask">删除任务</el-button>
-        <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
-      </el-space>
-    </el-col>
-  </el-row>
+            <div class="detail-block">
+              <p class="label">学习材料</p>
+              <el-link
+                v-if="selectedTask.materialURL"
+                :href="selectedTask.materialURL"
+                target="_blank"
+                type="primary"
+              >
+                {{ selectedTask.materialURL }}
+              </el-link>
+              <p v-else class="empty-text">暂未填写材料地址</p>
+            </div>
+          </template>
+          <el-empty v-else description="暂无任务，请先创建任务" />
+        </article>
+
+        <aside class="surface-card action-card">
+          <div class="block-title">常用操作</div>
+          <el-button size="large" @click="fetchTasks" :loading="loading">刷新列表</el-button>
+          <el-button type="success" size="large" @click="startTask">开始任务</el-button>
+          <el-button size="large" @click="addTask">添加任务</el-button>
+          <el-button size="large" @click="changeTask">更新任务</el-button>
+          <el-button type="danger" size="large" @click="removeTask">删除任务</el-button>
+        </aside>
+      </main>
+    </div>
+  </section>
 </template>

 <style scoped>
-.task-layout {
-  width: 100%;
-  overflow-x: hidden;
-}
-.task-card {
-  padding: 0;
-}
-.task-header {
-  padding: 10px;
-  font-size: 16px;
-  font-weight: bold;
-  background-color: #f5f7fa;
-  border-bottom: 1px solid #ebeef5;
-}
-.task-menu {
-  width: 100%;
-  padding: 0;
-}
-.task-item {
-  padding: 10px 12px;
-  white-space: normal;
-  word-break: break-word;
-}
-.section-title {
-  margin-top: 20px;
-}
-.action-buttons {
+.study-page {
+  display: flex;
  flex-direction: column;
-  margin-top: 20px;
+  gap: 14px;
 }
-.action-buttons .el-button {
-  width: 8vw;
-  min-width: 70px;
-  margin-top: 5px;
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 14px;
+}
+
+.task-list {
+  padding: 16px;
+}
+
+.block-title {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--green-900);
+}
+
+.task-list-item {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 12px;
+  cursor: pointer;
+  background: #fbfefc;
+  transition: all 0.2s ease;
+}
+
+.task-list-item + .task-list-item {
+  margin-top: 10px;
+}
+
+.task-list-item:hover {
+  border-color: #b9d9c8;
+}
+
+.task-list-item.active {
+  border-color: var(--green-600);
+  background: var(--green-100);
+  box-shadow: inset 0 0 0 1px rgba(47, 143, 104, 0.2);
+}
+
+.task-name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.task-meta {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.content-zone {
+  display: grid;
+  grid-template-columns: 1fr 220px;
+  gap: 14px;
+}
+
+.detail-card {
+  padding: 18px 20px;
+}
+
+.detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.detail-head h3 {
+  margin: 0;
+  font-size: 22px;
+}
+
+.detail-block {
+  margin-top: 16px;
+}
+
+.label {
+  margin: 0 0 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.empty-text {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.action-card {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.action-card .el-button {
+  margin: 0;
+}
+
+@media (max-width: 1100px) {
+  .layout-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .content-zone {
+    grid-template-columns: 1fr;
+  }
+
+  .action-card {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  .action-card .block-title {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-head {
+    flex-direction: column;
+  }
+
+  .action-card {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from 'vue';
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import request from "@/utils/request";
-import {ElMessage} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import { ElMessage } from "element-plus";
+import { useRoute, useRouter } from "vue-router";

 const router = useRouter();
+const route = useRoute();

-const route = useRoute()
 const taskId = route.params.taskId ? Number(route.params.taskId) : null;
-const buttonName = route.meta.buttonText;
+const buttonName = route.meta.buttonText as string;

-
-const taskName = ref('');
-const taskDescription = ref('');
+const taskName = ref("");
+const taskDescription = ref("");
+const materialURL = ref("");
 const priority = ref({
  urgency: 0,
  importance: 0,
@@ -24,34 +24,31 @@ const priority = ref({
 const priorityOptions = [0, 1, 2, 3, 4, 5];

 const createTask = () => {
-  console.log('创建任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  request.post("/tasks", {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    ...priority.value
-  }).then(result => {
-    if (result.code == 200) {
-      ElMessage.success("创建任务成功，任务id：" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务创建失败，错误原因：" + result.message)
-    }
-  })
+  request
+    .post("/tasks", {
+      taskName: taskName.value,
+      taskDescription: taskDescription.value,
+      materialURL: materialURL.value,
+      ...priority.value,
+    })
+    .then((result) => {
+      if (result.code === 200) {
+        ElMessage.success("创建任务成功");
+        router.push({ name: "study" });
+      } else {
+        ElMessage.error("任务创建失败：" + result.message);
+      }
+    });
 };

 const loadTask = () => {
-  console.info("开始加载任务信息")
  if (taskId !== null) {
-    request.get(`/tasks/${taskId}`, {}).then(result => {
+    request.get(`/tasks/${taskId}`, {}).then((result) => {
      if (result.code === 200) {
        const data = result.data;
        taskName.value = data.taskName;
        taskDescription.value = data.taskDescription;
+        materialURL.value = data.materialURL || data.materialUrl || "";
        priority.value = {
          urgency: data.urgency,
          importance: data.importance,
@@ -67,45 +64,41 @@ const loadTask = () => {
 };

 const updateTask = () => {
-  console.log('更新任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  request.put("/tasks/" + taskId, {
-    id: taskId,
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    ...priority.value
-  }).then(result => {
-    if (result.code == 200) {
-      ElMessage.success("更新任务成功" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务更新失败，错误原因：" + result.message)
-    }
-  })
+  request
+    .put("/tasks/" + taskId, {
+      id: taskId,
+      taskName: taskName.value,
+      taskDescription: taskDescription.value,
+      materialURL: materialURL.value,
+      ...priority.value,
+    })
+    .then((result) => {
+      if (result.code === 200) {
+        ElMessage.success("更新任务成功");
+        router.push({ name: "study" });
+      } else {
+        ElMessage.error("任务更新失败：" + result.message);
+      }
+    });
 };

 const cancelTask = () => {
-  ElMessage.success("已取消创建")
-  router.back()
+  ElMessage.info("已取消操作");
+  router.push({ name: "study" });
 };

-
 const submitTask = () => {
  switch (route.name) {
-    case 'add-task':
+    case "add-task":
      createTask();
      break;
-    case 'update-task':
+    case "update-task":
      updateTask();
      break;
    default:
-      ElMessage.error('未知操作类型');
+      ElMessage.error("未知操作类型");
  }
-}
+};

 const screenWidth = ref(window.innerWidth);

@@ -113,119 +106,125 @@ const updateWidth = () => {
  screenWidth.value = window.innerWidth;
 };

-
 onMounted(() => {
-  window.addEventListener('resize', updateWidth)
-  if (route.meta.action === 'update' && taskId !== null) {
+  window.addEventListener("resize", updateWidth);
+  if (route.meta.action === "update" && taskId !== null) {
    loadTask();
  }
 });
-onUnmounted(() => window.removeEventListener('resize', updateWidth));

-const columnSpan = computed(() => {
-  return screenWidth.value <= 768 ? 20 : 8;
-});
+onUnmounted(() => window.removeEventListener("resize", updateWidth));
+
+const isMobile = computed(() => screenWidth.value <= 900);
 </script>

 <template>
-  <el-form label-width="100px">
-    <el-form-item label="任务名:">
-      <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
-    </el-form-item>
+  <section class="task-form-page">
+    <el-form label-position="top" class="surface-card form-shell">
+      <div class="group">
+        <h3>基础信息</h3>
+        <el-form-item label="任务名称">
+          <el-input v-model="taskName" placeholder="例如：Vue3 组件通信实践" />
+        </el-form-item>
+        <el-form-item label="任务描述">
+          <el-input v-model="taskDescription" type="textarea" :rows="5" placeholder="请输入任务描述" />
+        </el-form-item>
+        <el-form-item label="学习材料地址">
+          <el-input v-model="materialURL" placeholder="例如：https://..." />
+        </el-form-item>
+      </div>

-    <el-form-item label="任务描述:">
-      <el-input
-          v-model="taskDescription"
-          type="textarea"
-          placeholder="请输入任务描述"
-          rows="6"
-      ></el-input>
-    </el-form-item>
-
-    <el-form-item label="优先级:">
-      <el-row :gutter="10">
-        <el-col :span="columnSpan">
+      <div class="group">
+        <h3>优先级维度</h3>
+        <div class="priority-grid" :class="{ mobile: isMobile }">
          <el-form-item label="急迫性">
            <el-select v-model="priority.urgency">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
-        </el-col>

-        <el-col :span="columnSpan">
          <el-form-item label="重要性">
            <el-select v-model="priority.importance">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'i' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
-        </el-col>

-        <el-col :span="columnSpan">
          <el-form-item label="内容难度">
            <el-select v-model="priority.contentDifficulty">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'d' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
-        </el-col>

-        <el-col :span="columnSpan">
          <el-form-item label="未来价值">
            <el-select v-model="priority.futureValue">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'f' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
-        </el-col>

-        <el-col :span="columnSpan">
          <el-form-item label="主观优先级">
            <el-select v-model="priority.subjectivePriority">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'s' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form-item>
+        </div>
+      </div>

-    <el-form-item>
-      <el-button type="primary" @click="submitTask">{{ buttonName }}</el-button>
-      <el-button @click="cancelTask">取消</el-button>
-    </el-form-item>
-  </el-form>
+      <div class="action-row">
+        <el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
+        <el-button size="large" @click="cancelTask">取消</el-button>
+      </div>
+    </el-form>
+  </section>
 </template>

 <style scoped>
-.el-form-item {
-  margin-bottom: 15px;
+.task-form-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-shell {
+  padding: 22px;
+}
+
+.group + .group {
+  margin-top: 12px;
+}
+
+.group h3 {
+  margin: 0 0 12px;
+  color: var(--green-900);
+}
+
+.priority-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 14px;
+}
+
+.priority-grid.mobile {
+  grid-template-columns: 1fr;
+}
+
+.action-row {
+  margin-top: 8px;
+  display: flex;
+  gap: 10px;
 }

@media (max-width: 768px) {
-  .el-col {
-    width: 100% !important;
+  .form-shell {
+    padding: 16px;
+  }
+
+  .action-row {
+    flex-direction: column;
+  }
+
+  .action-row .el-button {
+    width: 100%;
+    margin: 0;
  }
 }
 </style>
@@ -1,5 +1,78 @@
 <script setup lang="ts">
-import router from "@/router/index.js";
+import { computed, onMounted, ref } from "vue";
+import router from "@/router";
+import { getReviewFeed, type ReviewFeedItem } from "@/api/review";
+
+const reviewItems = ref<ReviewFeedItem[]>([]);
+const isHovering = ref(false);
+
+interface SessionGroup {
+  sessionNum: string;
+  taskName: string;
+  taskNum: string;
+  content: string;
+  hasReport: boolean;
+  fragmentCount: number;
+  navigateType: string;
+  navigateId: number;
+}
+
+// 按 sessionNum 分组，一个会话展示为一个 chip
+const sessionGroups = computed<SessionGroup[]>(() => {
+  const map = new Map<string, ReviewFeedItem[]>();
+  for (const item of reviewItems.value) {
+    const list = map.get(item.sessionNum) || [];
+    list.push(item);
+    map.set(item.sessionNum, list);
+  }
+
+  const groups: SessionGroup[] = [];
+  for (const [sessionNum, items] of map) {
+    const first = items[0];
+    const report = items.find(i => i.sourceType === "REPORT");
+    const fragments = items.filter(i => i.sourceType === "FRAGMENT");
+
+    const rawContent = report?.content || fragments.map(f => f.content).join("；");
+    const content = rawContent.length > 120
+      ? rawContent.substring(0, 120) + "..."
+      : rawContent;
+
+    groups.push({
+      sessionNum,
+      taskName: first.taskName,
+      taskNum: first.taskNum,
+      content,
+      hasReport: !!report,
+      fragmentCount: fragments.length,
+      navigateType: report ? "report" : "fragment",
+      navigateId: report ? report.id : (fragments[0]?.id ?? 0),
+    });
+  }
+
+  groups.sort((a, b) => {
+    const aItem = reviewItems.value.find(i => i.sessionNum === a.sessionNum);
+    const bItem = reviewItems.value.find(i => i.sessionNum === b.sessionNum);
+    return (bItem?.createdTime || "").localeCompare(aItem?.createdTime || "");
+  });
+
+  return groups;
+});
+
+// 复制一份实现无缝循环
+const duplicatedGroups = computed(() => [...sessionGroups.value, ...sessionGroups.value]);
+
+const loadReviewFeed = async () => {
+  try {
+    const res = await getReviewFeed(100);
+    reviewItems.value = res?.data || [];
+  } catch {
+    // feed 加载失败不影响页面主体功能
+  }
+};
+
+const goToReviewDetail = (group: SessionGroup) => {
+  router.push(`/review/detail/${group.navigateType}/${group.navigateId}`);
+};

 const startStudy = () => {
  router.push("/study");
@@ -8,103 +81,257 @@ const startStudy = () => {
 const startReview = () => {
  router.push("/review");
 };
+
+onMounted(() => {
+  loadReviewFeed();
+});
 </script>
+
 <template>
-  <el-container class="container">
-    <el-header class="header">
-<!--      <div class="marquee-wrapper">-->
-<!--        <div class="marquee-content">-->
-          FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
-<!--        </div>-->
-<!--      </div>-->
-    </el-header>
+  <section class="welcome-page">
+    <div class="review-scroll-section surface-card">
+      <div class="review-scroll-header">
+        <span class="color-legend">
+          <span class="dot dot-report"></span> 学习报告
+          <span class="dot dot-fragment"></span> 学习残片
+        </span>
+      </div>
+      <div class="review-scroll-track">
+        <div
+          class="review-scroll-content"
+          :class="{ paused: isHovering }"
+          @mouseenter="isHovering = true"
+          @mouseleave="isHovering = false"
+        >
+          <span
+            v-for="(group, index) in duplicatedGroups"
+            :key="index"
+            class="review-chip"
+            :class="group.hasReport ? 'has-report' : 'fragments-only'"
+            @click="goToReviewDetail(group)"
+          >
+            <strong class="chip-task">{{ group.taskName }}</strong>
+            <span class="chip-content">{{ group.content }}</span>
+          </span>
+        </div>
+      </div>
+    </div>

+    <div class="welcome-banner surface-card">
+      <div>
+        <h1 class="page-title">欢迎回来，准备好继续学习了吗？</h1>
+        <p class="page-subtitle">
+          先挑选任务开始一次会话，再在复习页回顾你的学习轨迹。
+        </p>
+      </div>
+      <el-tag type="success" effect="dark" size="large">今日模式：稳步推进</el-tag>
+    </div>

-    <el-main>
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-card class="progress-card" shadow="always">
-            <div class="progress-text">学习进度总揽</div>
-          </el-card>
-        </el-col>
+    <div class="quick-grid">
+      <article class="quick-card surface-card">
+        <h3>学习会话</h3>
+        <p>进入任务列表，选择当前最重要的一项并开始学习计时。</p>
+        <el-button type="success" size="large" @click="startStudy">开始学习</el-button>
+      </article>

-        <el-col :span="3">
-          <div class="button-group">
-            <el-button type="success" size="large" @click="startStudy" plain>开始学习</el-button>
-            <el-button type="primary" size="large" @click="startReview" plain>开始复习</el-button>
-          </div>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+      <article class="quick-card surface-card">
+        <h3>复习回看</h3>
+        <p>查看学习报告与残片数量，明确哪些内容需要优先复习。</p>
+        <el-button plain type="success" size="large" @click="startReview">开始复习</el-button>
+      </article>
+    </div>
+
+    <div class="tips-board surface-card">
+      <h3>建议流程</h3>
+      <ol>
+        <li>进入学习页，确认任务材料地址与优先级。</li>
+        <li>开始会话并在休息时记录学习残片。</li>
+        <li>结束会话后填写总结，再回到复习页检视数据。</li>
+      </ol>
+    </div>
+  </section>
 </template>

 <style scoped>
-*{
-  margin: 0px;
-  /*padding: 0;*/
-}
-.container {
-  min-height: 100vh;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-}
-
-.header {
-  text-align: center;
-  font-size: 16px;
-  font-weight: bold;
-  border-bottom: 1px solid #ebeef5;
-  padding: 20px;
-}
-
-.progress-card {
-  height: 400px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-text {
-  font-size: 18px;
-  color: #333;
-}
-
-.button-group {
+.welcome-page {
  display: flex;
  flex-direction: column;
-  gap: 20px;
-  margin-top: 80px;
-  align-items: center;
-}
-.button-group .el-button {
-  margin-left: 0;
+  gap: 16px;
 }

+.welcome-banner {
+  padding: 20px 22px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}

- /*滚动样式*/
-.marquee-wrapper {
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.quick-card {
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.quick-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.quick-card p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.quick-card .el-button {
+  margin-top: auto;
+  width: 100%;
+}
+
+/* 复习滚动条区域 */
+.review-scroll-section {
+  padding: 14px 22px;
  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-  height: 40px;
 }

-.marquee-content {
+.review-scroll-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.color-legend {
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dot {
  display: inline-block;
-  position: absolute;
-  white-space: nowrap;
-  will-change: transform;
-  animation: scroll-left 15s linear infinite;
-  font-size: 16px;
-  font-weight: bold;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 3px;
 }

-@keyframes scroll-left {
+.dot-report {
+  background: var(--green-600);
+}
+
+.dot-fragment {
+  background: #e6a23c;
+}
+
+.review-scroll-track {
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
+}
+
+.review-scroll-content {
+  display: inline-flex;
+  gap: 14px;
+  white-space: nowrap;
+  animation: review-ticker 150s linear infinite;
+}
+
+.review-scroll-content.paused {
+  animation-play-state: paused;
+}
+
+@keyframes review-ticker {
  0% {
-    transform: translateX(100%);
+    transform: translateX(0);
  }
  100% {
-    transform: translateX(-100%);
+    transform: translateX(-50%);
+  }
+}
+
+.review-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  background: var(--surface-strong);
+  border: 1px solid var(--border-soft);
+  border-left: 3px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s, box-shadow 0.2s;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.review-chip.has-report {
+  border-left-color: var(--green-600);
+}
+
+.review-chip.fragments-only {
+  border-left-color: #e6a23c;
+}
+
+.review-chip:hover {
+  box-shadow: var(--shadow-soft);
+}
+
+.review-chip.has-report:hover {
+  background: #e8f5e9;
+}
+
+.review-chip.fragments-only:hover {
+  background: #fff8e1;
+}
+
+.chip-task {
+  color: var(--green-700);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.chip-content {
+  color: var(--text-secondary);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 320px;
+}
+
+.tips-board {
+  padding: 20px 22px;
+}
+
+.tips-board h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.tips-board ol {
+  margin: 10px 0 0;
+  padding-left: 20px;
+  color: var(--text-secondary);
+}
+
+.tips-board li + li {
+  margin-top: 8px;
+}
+
+@media (max-width: 900px) {
+  .welcome-banner {
+    flex-direction: column;
+  }
+
+  .quick-grid {
+    grid-template-columns: 1fr;
  }
 }
 </style>
@@ -18,6 +18,14 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
        timerRunning.value = false;
    };

+    const syncDisplay = (durationMs: number) => {
+        const safeDuration = Math.max(durationMs, 0);
+        remainingTime.value = safeDuration;
+        timerMinutes.value = Math.floor(safeDuration / 1000 / 60);
+        timerSeconds.value = Math.floor((safeDuration / 1000) % 60);
+        timerIsOver.value = safeDuration === 0;
+    };
+
    const handleCountdownComplete = () => {
        audio.loop = true;
        audio.play();
@@ -91,6 +99,7 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
        timerRunning,
        timerIsOver,
        runCountdown,
+        syncDisplay,
        clear,
        checkAudioPermission,
        requestAudioPermission,
@@ -1,56 +1,90 @@
-import {createRouter,createWebHistory} from 'vue-router'
-import Login from "@/components/Login.vue";
-import Study from "@/components/Study.vue";
-import Welcome from "@/components/Welcome.vue";
-import Review from "@/components/Review.vue";
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import StartTask from "@/components/StartTask.vue";
-import TaskForm from "@/components/TaskForm.vue";
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: "/login",
+  },
+  {
+    path: "/login",
+    component: () => import("@/components/Login.vue"),
+    meta: { requiresAuth: false },
+  },
+  {
+    path: "/welcome",
+    component: () => import("@/components/Welcome.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/study",
+    name: "study",
+    component: () => import("@/components/Study.vue"),
+    meta: { requiresAuth: true, title: "学习任务" },
+  },
+  {
+    path: "/review",
+    component: () => import("@/components/Review.vue"),
+    meta: { requiresAuth: true, title: "复习总览" },
+  },
+  {
+    path: "/review/detail/:type/:id",
+    component: () => import("@/components/ReviewDetail.vue"),
+    meta: { requiresAuth: true, title: "复习详情" },
+  },
+  {
+    path: "/start-task/:taskNum",
+    name: "start-task",
+    component: StartTask,
+    meta: { requiresAuth: true, title: "学习会话" },
+  },
+  {
+    path: "/add-task",
+    name: "add-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      title: "创建学习任务",
+      action: "add",
+      buttonText: "添加",
+    },
+  },
+  {
+    path: "/update-task/:taskId",
+    name: "update-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      title: "更新学习任务",
+      action: "update",
+      buttonText: "更新",
+    },
+  },
+];

 const router = createRouter({
-    history: createWebHistory(),
-    routes:[
-        {
-          path:'/',
-          redirect:'/login',
-        },
-        {
-            path:'/login',
-            component:Login
-        },
-        {
-            path:'/welcome',
-            component: Welcome
-        },
-        {
-            path:'/study',
-            component: Study
-        },
-        {
-            path:'/review',
-            component: Review
-        },
-        {
-            path:'/start-task/:taskNum',
-            name:'start-task',
-            component: StartTask
-        },
-        {
-            path:'/add-task',
-            name:'add-task',
-            component: TaskForm,
-            meta:{
-                action: 'add', buttonText: '添加'
-            }
-        },
-        {
-            path:'/update-task/:taskId',
-            name:'update-task',
-            component: TaskForm,
-            meta:{
-                action: 'update', buttonText: '更新'
-            }
-        }
-    ]
+  history: createWebHistory(),
+  routes,
 });

-export default router;
+router.onError((error, to) => {
+  const message = String((error as Error)?.message || "");
+  const isChunkLoadError =
+    message.includes("Failed to fetch dynamically imported module") ||
+    message.includes("Importing a module script failed") ||
+    message.includes("Loading chunk");
+  if (isChunkLoadError && typeof window !== "undefined") {
+    window.location.assign(to.fullPath);
+  }
+});
+
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth === false) return true;
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+  if (!isLoggedIn) {
+    return "/login";
+  }
+  return true;
+});
+
+export default router;
@@ -5,15 +5,25 @@ const basic_url = import.meta.env.VITE_BASE_URL;

 const axiosInstance = axios.create({
    baseURL: basic_url,
-    timeout: 5000
+    timeout: 5000,
+    withCredentials: true
 });

 const handleError = (error: any) => {
    console.log(error);
+
+    // 业务异常由 validateResponse 负责提示，这里透传，避免被网络错误文案覆盖。
+    if (error && typeof error === "object" && "code" in error) {
+        return Promise.reject(error);
+    }
+
    if (error.response) {
-        ElMessage.error(`请求失败，服务器返回: ${error.response.data}`);
+        const backendMessage = error.response?.data?.message || JSON.stringify(error.response?.data);
+        ElMessage.error(`请求失败，服务器返回: ${backendMessage}`);
    } else if (error.request) {
        ElMessage.error("请求未收到响应，请检查接口运行状态");
+    } else {
+        ElMessage.error(error.message || "请求失败");
    }
    throw new Error("网络不通畅，请检查您的网络连接或服务器状态");
 };
@@ -42,27 +52,27 @@ const post = (url: string, data: any = null, config: any = {}) => {

    if (config.params) {
        // 如果传入 config.params，则作为 URL 参数
-        return axiosInstance.post(url, data, { params: config.params })
+        return axiosInstance.post(url, data, { params: config.params, ...config })
            .then(validateResponse)
            .catch(handleError);
    } else {
        // 默认 POST JSON
-        return axiosInstance.post(url, data)
+        return axiosInstance.post(url, data, config)
            .then(validateResponse)
            .catch(handleError);
    }
 };

-const put = (url: string, data: any) => {
+const put = (url: string, data: any, config: any = {}) => {
    console.log("开始PUT请求", basic_url + url, "参数：", data);
-    return axiosInstance.put(url, data)
+    return axiosInstance.put(url, data, config)
        .then(validateResponse)
        .catch(handleError);
 };

-const del = (url: string, params: {}) => {
+const del = (url: string, params: Record<string, any> = {}, config: any = {}) => {
    console.log("开始DELETE请求", basic_url + url, "参数：", params);
-    return axiosInstance.delete(url, { params })
+    return axiosInstance.delete(url, { params, ...config })
        .then(validateResponse)
        .catch(handleError);
 };
@@ -15,6 +15,13 @@ export default defineConfig({
  },
  server: {
    host: '0.0.0.0',
-    port: 5158
+    port: 5158,
+    proxy: {
+      "/api": {
+        target: "http://localhost:5157",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
  }
 })
Author	SHA1	Message	Date
cat-shark	e2f7276b92	fix: 首页滚动条始终渲染 DOM，消除加载生硬感去掉 v-if 和 visibility 条件控制，滚动区域结构在页面加载时即存在于 DOM 中，芯片通过 v-for 响应式插入，避免数据到达时整块 DOM 节点创建/销毁导致的跳变	2026-05-23 23:08:35 +08:00
cat-shark	ad2561981d	fix: 首页滚动条防闪烁与颜色标注修正 - v-if 改为容器始终渲染 + min-height，避免数据加载后布局跳动 - 颜色标注改为"学习报告"/"学习残片"，准确描述元素类型	2026-05-23 22:55:08 +08:00
cat-shark	4abc316311	fix: ReviewDetail 内容居中与文字换行 - 页面内容 margin: 0 auto 居中 - 内容区和历史记录添加 word-break 防止长文本溢出 - 移除已删除的 .detail-head 死 CSS 和页面 header	2026-05-23 22:55:06 +08:00
cat-shark	fce4ba194b	fix: 完善任务导航与结束会话错误处理 - 结束会话 API 异常时显示错误，不导航（可重试） - 结束会话硬跳转改为软导航 router.push - TaskForm 创建/更新/取消后跳转任务列表页 - 移除 TaskForm 页面内大标题	2026-05-23 22:55:03 +08:00
cat-shark	43e8cd4965	refactor: 移除 Study 和 Review 页面大标题 - 页面标题统一由全局页头展示，移除各页面内 h1 - 刷新按钮迁移至操作区/工具栏，功能不变 - Study 页开始任务改为软导航 router.push	2026-05-23 22:55:01 +08:00
cat-shark	f586332ab2	feat: 页头动态标题与返回首页按钮 - 子页面显示对应路由标题，首页/登录页保留品牌信息 - 非首页非登录页显示"← 返回首页"按钮	2026-05-23 22:54:58 +08:00
cat-shark	ad847973bc	feat: 添加路由标题元数据，固定页头为 sticky - 为所有子页面路由添加 meta.title 供页头动态展示 - 页头改为 position: sticky，滚动时固定在顶部	2026-05-23 22:54:55 +08:00
cat-shark	749d9752fd	feat: add task learning history to review detail page	2026-05-23 21:00:59 +08:00
cat-shark	70d347e06e	fix(review): 优化复习滚动条展示方式 - 去除"复习滚动条"模块标题，改用右侧小字颜色图例 - 按 session 维度分组展示，一次学习的报告和残片合并为一个条目 - 移除类型标签（报告/残片），改用左边框颜色区分（绿色=有报告，黄色=仅残片） - 展示内容从 50 字增加到 120 字 - 滚动动画从 80s 放慢到 150s	2026-05-23 20:35:53 +08:00
cat-shark	c535548793	fix(review): 将复习滚动条移至页面上方	2026-05-23 19:58:36 +08:00
cat-shark	52045ecbeb	feat(review): 实现复习内容滚动展示与交互 - Welcome.vue 新增复习内容水平滚动条，展示报告/残片摘要 - 新增 ReviewDetail.vue 复习详情页，展示完整内容及会话上下文 - 新增 review.ts API 模块，路由注册 /review/detail/:type/:id	2026-05-23 19:26:22 +08:00
cat-shark	3a3a96da3c	chore(uat): 前端 UAT 环境改为同域 /api	2026-04-12 18:54:54 +08:00
cat-shark	f4d6bcff23	chore(dev): 前端开发环境接入 Traefik 域名路由	2026-04-12 18:54:45 +08:00
cat-shark	73ed40609c	更新生产环境部署配置	2026-04-12 16:19:59 +08:00
cat-shark	6137f6f102	更新生产环境部署配置	2026-04-12 16:04:27 +08:00
cat-shark	eb9b1f6b95	更新生产环境部署配置	2026-04-12 16:01:27 +08:00
cat-shark	6d05b37399	更新生产环境部署配置 - 修改 VITE_BASE_URL 配置为相对路径 /api - 移除 Jenkinsfile 中的 HOST_PORT 环境变量 - 添加 Docker 网络创建命令到 Jenkins 构建步骤 - 配置 Traefik 标签实现服务路由和 TLS 证书 - 设置容器网络模式替代端口映射 - 添加健康检查配置确保服务可用性	2026-04-12 15:42:36 +08:00
cat-shark	af30b7b316	Merge remote-tracking branch 'origin/dev' into dev # Conflicts: # Jenkinsfile-dev	2026-04-12 14:19:04 +08:00
cat-shark	c84d30e287	修复学习流程路由切换与计时展示稳定性	2026-04-12 13:05:23 +08:00
cat-shark	cef3192ba5	优化登录与任务管理相关页面交互	2026-04-12 13:05:00 +08:00
cat-shark	5c0f7e932f	重构前端公共布局与基础样式	2026-04-12 13:04:48 +08:00
cat-shark	cff4989072	Merge remote-tracking branch 'origin/master' # Conflicts: # .env.development	2026-04-12 10:38:27 +08:00
cat-shark	56f94f384d	配置(开发环境): 增加Vite代理以解决本地CORS	2026-04-12 10:37:35 +08:00
cat-shark	82c06d29fe	功能(任务与复习): 增加材料地址与复习总览表格	2026-04-12 10:37:26 +08:00
cat-shark	0f2f0460df	重构(学习页): 前端仅展示并修复运行稳定性问题	2026-04-12 10:36:59 +08:00
cat-shark	4c73991d64	功能(鉴权): 增加前端登录态守卫与退出流程	2026-04-12 10:36:38 +08:00
cat-shark	3150b2d89e	feat(N/A):配置Dockerfile	2025-11-02 21:58:38 +08:00
cat-shark	e750c36345	feat(N/A):配置Dockerfile	2025-11-02 21:45:58 +08:00
cat-shark	d09849a41c	feat(N/A):配置dev的容器名	2025-10-26 14:10:31 +08:00
cat-shark	39c9d14c9c	feat(N/A):配置prod的运行端口	2025-10-26 13:37:20 +08:00
cat-shark	d418d463de	feat(N/A):配置环境	2025-10-26 13:37:19 +08:00
cat-shark	134b09780b	feat(N/A):配置环境	2025-10-26 13:37:18 +08:00
cat-shark	7e7f40efd3	feat(N/A):配置环境	2025-10-26 13:37:17 +08:00
cat-shark	2d3512ac4c	feat(N/A):配置环境	2025-10-26 13:37:16 +08:00
cat-shark	b51a57b57f	feat(N/A):配置prod的运行端口	2025-10-26 13:36:47 +08:00
cat-shark	b5e1ae0f6f	feat(N/A):配置环境	2025-10-26 13:10:28 +08:00
cat-shark	385662e628	feat(N/A):配置环境	2025-10-26 13:06:08 +08:00
cat-shark	da7611c9a1	feat(N/A):配置环境	2025-10-26 13:02:54 +08:00
cat-shark	2553c059c3	feat(N/A):配置环境	2025-10-26 12:55:14 +08:00
cat-shark	c9f57ab8ef	feat(N/A):配置环境	2025-10-26 12:51:51 +08:00
cat-shark	cb618807fc	fix(10): 修复token认证问题（登录后，后续请求携带认证信息进行请求）	2025-10-03 09:39:18 +08:00