diff --git a/src/frontend/src/Style.css b/src/frontend/src/Style.css
index ae06593..131f9d9 100644
--- a/src/frontend/src/Style.css
+++ b/src/frontend/src/Style.css
@@ -54,7 +54,7 @@
   /* Requirements: 4.6 - Container query units for navbar and spacing */
   /* These provide fallback values for browsers that don't support container queries */
   --cq-navbar-width-collapsed: 8cqw;
-  --cq-navbar-width-expanded: 19cqw;
+  --cq-navbar-width-expanded: 13cqw;
   --cq-navbar-spacing: 1.5cqw;
   --cq-navbar-button-size: 3.5cqw;
   
@@ -1552,7 +1552,7 @@ a:focus-visible,
   :root {
     /* Fallback navbar widths using viewport units */
     --cq-navbar-width-collapsed: 6vw;
-    --cq-navbar-width-expanded: 20vw;
+    --cq-navbar-width-expanded: 13vw;
     --cq-navbar-spacing: 1.5vw;
     --cq-navbar-button-size: 3vw;
     
diff --git a/src/frontend/src/api/auth.js b/src/frontend/src/api/auth.js
index fd2a2f5..e4ea709 100644
--- a/src/frontend/src/api/auth.js
+++ b/src/frontend/src/api/auth.js
@@ -82,10 +82,15 @@ export function authLogout() {
   })
 }
 
+/**
+ * 修改密码
+ *  _skipLogout 标志，防止旧密码错误时被强制登出
+ */
 export function authChangePassword(data) {
   return request({
     url: '/auth/change-password',
     method: 'post',
-    data
+    data,
+    _skipLogout: true
   })
 }
\ No newline at end of file
diff --git a/src/frontend/src/api/image.js b/src/frontend/src/api/image.js
index d08f7c3..9b1a6af 100644
--- a/src/frontend/src/api/image.js
+++ b/src/frontend/src/api/image.js
@@ -2,23 +2,18 @@ import request from '@/utils/request'
 import { parseMultipartMixed } from '@/utils/multipartParser'
 
 /**
- * 获取任务的图片预览数据 (二进制流版本)
+ * 获取任务的所有图片数据 (二进制流版本)
+ * 用于预览和下载
  * API: GET /api/image/binary/task/<task_id>
  */
-export async function getTaskImagePreview(taskId) {
-  // 1. 发起请求，获取原始 Response 对象以读取 Header
-  // 注意：这里需要 axios 返回完整的 response，不仅仅是 data
-  // 或者是利用 axios 的 transformResponse，但为了简单，我们在调用层处理
-  
+export async function getTaskImages(taskId) {
   try {
     const response = await request({
       url: `/image/binary/task/${taskId}`,
       method: 'get',
-      responseType: 'arraybuffer', // 关键：必须接收二进制
+      responseType: 'arraybuffer', // 接收二进制
       timeout: 120000,
-      // 告诉拦截器需要完整响应对象(如果 request.js 拦截器只返回 response.data，这里可能需要调整)
-      // 假设目前的 request.js 拦截器只返回 response.data，我们需要针对这个接口做特殊处理
-      // 或者可以直接使用 axios.get 绕过拦截器，带上 token
+      // 告诉拦截器需要完整响应对象以读取 Header
       returnRawResponse: true 
     })
     
diff --git a/src/frontend/src/api/task.js b/src/frontend/src/api/task.js
index 0c4e698..3144f98 100644
--- a/src/frontend/src/api/task.js
+++ b/src/frontend/src/api/task.js
@@ -53,19 +53,6 @@ export function getStylePresets() {
   })
 }
 
-/**
- * 获取任务结果图片
- * 用于 Page4 的“下载结果”功能，数据量可能很大 (Base64)
- * 设置 5 分钟超时
- */
-export function getTaskResultImages(taskType, taskId) {
-  return request({ 
-    url: `/image/${taskType}/${taskId}`, 
-    method: 'get',
-    // 【核心修改】设置 2 分钟超时 (120000ms)
-    timeout: 120000 
-  })
-}
 
 /**
  * 获取任务日志 (新增)
diff --git a/src/frontend/src/components/GridDistortion.vue b/src/frontend/src/components/GridDistortion.vue
index 4cbc11a..bff5a56 100644
--- a/src/frontend/src/components/GridDistortion.vue
+++ b/src/frontend/src/components/GridDistortion.vue
@@ -1,5 +1,6 @@
 <template>
-  <div ref="containerRef" :class="[className, 'kt-grid-distortion-bg']" />
+  <!-- 添加 kt-fallback-bg 类作为 WebGL 失败时的后备方案 -->
+  <div ref="containerRef" :class="[className, 'kt-grid-distortion-bg', 'kt-fallback-bg']" />
 </template>
 
 <script setup>
@@ -9,17 +10,16 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter();
 const props = defineProps({
-  gridX: { type: Number, default: 8 }, // 横向网格精度
-  gridY: { type: Number, default: 5 }, // 纵向网格精度
-  mouse: { type: Number, default: 0.1 }, // 鼠标影响范围半径
-  strength: { type: Number, default: 0.15 }, // 变形力度系数
-  relaxation: { type: Number, default: 0.9 }, // 变形恢复速度
-  imageSrc: { type: String, required: true }, // 背景图路径
-  className: { type: String, default: '' }, // 外部样式类
-  isDark: { type: Boolean, default: true } // 当前主题状态
+  gridX: { type: Number, default: 8 },
+  gridY: { type: Number, default: 5 },
+  mouse: { type: Number, default: 0.1 },
+  strength: { type: Number, default: 0.15 },
+  relaxation: { type: Number, default: 0.9 },
+  imageSrc: { type: String, required: true },
+  className: { type: String, default: '' },
+  isDark: { type: Boolean, default: true }
 });
 
-// 顶点着色器：传递纹理坐标并计算顶点位置
 const vertexShader = `
 varying vec2 vUv;
 void main() {
@@ -28,7 +28,6 @@ void main() {
 }
 `;
 
-// 片元着色器：结合数据纹理计算像素位移和整体亮度
 const fragmentShader = `
 uniform sampler2D uDataTexture;
 uniform sampler2D uTexture;
@@ -37,148 +36,141 @@ varying vec2 vUv;
 void main() {
   vec2 uv = vUv;
   vec4 offset = texture2D(uDataTexture, vUv);
-  // 利用数据纹理的 rg 通道偏移采样坐标实现扭曲
   vec4 texColor = texture2D(uTexture, uv - 0.02 * offset.rg);
-  // 输出最终颜色并叠加暗色模式亮度系数
   gl_FragColor = vec4(texColor.rgb * uBrightness, texColor.a);
 }
 `;
 
 const containerRef = ref(null);
-const imageAspectRef = ref(1); // 存储背景图原始宽高比
-let uniforms = null; // 材质统一变量引用
-let cleanupAnimation = () => {}; // 销毁逻辑回调
+const imageAspectRef = ref(1);
+let uniforms = null;
+let cleanupAnimation = () => {};
 
 const setupAnimation = () => {
   const container = containerRef.value;
   if (!container) return;
 
-  // 初始化场景与 WebGL 渲染器
-  const scene = new THREE.Scene();
-  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-  container.appendChild(renderer.domElement);
-
-  // 使用正交相机保证背景平面铺满屏幕且无透视变形
-  const camera = new THREE.OrthographicCamera(0, 0, 0, 0, -1000, 1000);
-  camera.position.z = 2;
-
-  uniforms = {
-    uTexture: { value: null }, // 背景静态纹理
-    uDataTexture: { value: null }, // 存储动态扭曲数据
-    uBrightness: { value: props.isDark ? 0.40 : 1.0 } // 初始亮度
-  };
-
-  // 异步加载纹理并更新缩放比例
-  const textureLoader = new THREE.TextureLoader();
-  textureLoader.load(props.imageSrc, (texture) => {
+  // [Bug 10 Fix] 捕获 WebGL 初始化错误，静默降级为 CSS Fallback
+  try {
+    const scene = new THREE.Scene();
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     
-    // 使用 LinearFilter 加速，并防止 mipmaps 生成时间
-    texture.minFilter = THREE.LinearFilter;
-    texture.generateMipmaps = false; 
-    
-    imageAspectRef.value = texture.image.width / texture.image.height;
-    uniforms.uTexture.value = texture;
-    handleResize();
-  });
-
-  // 创建数据纹理，用于存储每个网格点的位移向量
-  const sizeX = props.gridX;
-  const sizeY = props.gridY;
-  const data = new Float32Array(4 * sizeX * sizeY);
-  const dataTexture = new THREE.DataTexture(data, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType);
-  dataTexture.needsUpdate = true;
-  uniforms.uDataTexture.value = dataTexture;
-
-  const material = new THREE.ShaderMaterial({
-    uniforms,
-    vertexShader,
-    fragmentShader,
-    transparent: true
-  });
-  
-  // 创建与网格参数匹配的平面几何体
-  const geometry = new THREE.PlaneGeometry(1, 1, sizeX - 1, sizeY - 1);
-  const plane = new THREE.Mesh(geometry, material);
-  scene.add(plane);
-
-  // 窗口适配逻辑：保持背景图 Cover 填充模式
-  const handleResize = () => {
-    const width = container.offsetWidth;
-    const height = container.offsetHeight;
-    if (width === 0 || height === 0) return;
-    renderer.setSize(width, height);
-    const containerAspect = width / height;
-    const scale = Math.max(containerAspect / imageAspectRef.value, 1);
-    plane.scale.set(imageAspectRef.value * scale, scale, 1);
-    camera.left = -containerAspect / 2;
-    camera.right = containerAspect / 2;
-    camera.top = 0.5;
-    camera.bottom = -0.5;
-    camera.updateProjectionMatrix();
-  };
-
-  // 鼠标交互：记录当前坐标与移动速度向量
-  const mouseState = { x: 0, y: 0, prevX: 0, prevY: 0, vX: 0, vY: 0 };
-  const handleMouseMove = (e) => {
-    const rect = container.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width;
-    const y = 1 - (e.clientY - rect.top) / rect.height;
+    // 如果 renderer 创建失败（例如不支持 WebGL），这里可能会抛出异常
+    if (!renderer.domElement) throw new Error('WebGL creation failed');
+
+    container.appendChild(renderer.domElement);
+
+    const camera = new THREE.OrthographicCamera(0, 0, 0, 0, -1000, 1000);
+    camera.position.z = 2;
+
+    uniforms = {
+      uTexture: { value: null },
+      uDataTexture: { value: null },
+      uBrightness: { value: props.isDark ? 0.40 : 1.0 }
+    };
+
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.load(props.imageSrc, (texture) => {
+      texture.minFilter = THREE.LinearFilter;
+      texture.generateMipmaps = false; 
+      imageAspectRef.value = texture.image.width / texture.image.height;
+      uniforms.uTexture.value = texture;
+      handleResize();
+    });
+
+    const sizeX = props.gridX;
+    const sizeY = props.gridY;
+    const data = new Float32Array(4 * sizeX * sizeY);
+    const dataTexture = new THREE.DataTexture(data, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType);
+    dataTexture.needsUpdate = true;
+    uniforms.uDataTexture.value = dataTexture;
+
+    const material = new THREE.ShaderMaterial({
+      uniforms,
+      vertexShader,
+      fragmentShader,
+      transparent: true
+    });
     
-    mouseState.vX = x - mouseState.prevX;
-    mouseState.vY = y - mouseState.prevY;
-    Object.assign(mouseState, { x, y, prevX: x, prevY: y });
-  };
-
-  window.addEventListener('resize', handleResize);
-  window.addEventListener('mousemove', handleMouseMove);
-
-  let animationId;
-  const animate = () => {
-    animationId = requestAnimationFrame(animate);
-    const currentData = dataTexture.image.data;
-
-    // 每一帧递减偏移量，实现弹性复位效果
-    for (let i = 0; i < sizeX * sizeY; i++) {
-      currentData[i * 4] *= props.relaxation;
-      currentData[i * 4 + 1] *= props.relaxation;
-    }
-
-    // 计算鼠标对周围网格点的冲量影响
-    const gridMouseX = sizeX * mouseState.x;
-    const gridMouseY = sizeY * mouseState.y;
-    const maxDist = Math.max(sizeX, sizeY) * props.mouse;
-
-    for (let i = 0; i < sizeX; i++) {
-      for (let j = 0; j < sizeY; j++) {
-        const distSq = Math.pow(gridMouseX - i, 2) + Math.pow(gridMouseY - j, 2);
-        if (distSq < maxDist * maxDist) {
-          const index = 4 * (i + sizeX * j);
-          const power = Math.min(maxDist / Math.sqrt(distSq), 10);
-          currentData[index] += props.strength * 100 * mouseState.vX * power;
-          currentData[index + 1] -= props.strength * 100 * mouseState.vY * power;
+    const geometry = new THREE.PlaneGeometry(1, 1, sizeX - 1, sizeY - 1);
+    const plane = new THREE.Mesh(geometry, material);
+    scene.add(plane);
+
+    const handleResize = () => {
+      const width = container.offsetWidth;
+      const height = container.offsetHeight;
+      if (width === 0 || height === 0) return;
+      renderer.setSize(width, height);
+      const containerAspect = width / height;
+      const scale = Math.max(containerAspect / imageAspectRef.value, 1);
+      plane.scale.set(imageAspectRef.value * scale, scale, 1);
+      camera.left = -containerAspect / 2;
+      camera.right = containerAspect / 2;
+      camera.top = 0.5;
+      camera.bottom = -0.5;
+      camera.updateProjectionMatrix();
+    };
+
+    const mouseState = { x: 0, y: 0, prevX: 0, prevY: 0, vX: 0, vY: 0 };
+    const handleMouseMove = (e) => {
+      const rect = container.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = 1 - (e.clientY - rect.top) / rect.height;
+      mouseState.vX = x - mouseState.prevX;
+      mouseState.vY = y - mouseState.prevY;
+      Object.assign(mouseState, { x, y, prevX: x, prevY: y });
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('mousemove', handleMouseMove);
+
+    let animationId;
+    const animate = () => {
+      animationId = requestAnimationFrame(animate);
+      const currentData = dataTexture.image.data;
+
+      for (let i = 0; i < sizeX * sizeY; i++) {
+        currentData[i * 4] *= props.relaxation;
+        currentData[i * 4 + 1] *= props.relaxation;
+      }
+
+      const gridMouseX = sizeX * mouseState.x;
+      const gridMouseY = sizeY * mouseState.y;
+      const maxDist = Math.max(sizeX, sizeY) * props.mouse;
+
+      for (let i = 0; i < sizeX; i++) {
+        for (let j = 0; j < sizeY; j++) {
+          const distSq = Math.pow(gridMouseX - i, 2) + Math.pow(gridMouseY - j, 2);
+          if (distSq < maxDist * maxDist) {
+            const index = 4 * (i + sizeX * j);
+            const power = Math.min(maxDist / Math.sqrt(distSq), 10);
+            currentData[index] += props.strength * 100 * mouseState.vX * power;
+            currentData[index + 1] -= props.strength * 100 * mouseState.vY * power;
+          }
         }
       }
-    }
 
-    dataTexture.needsUpdate = true;
-    renderer.render(scene, camera);
-  };
-  animate();
-
-  // 清除事件监听与显存中的 WebGL 资源
-  cleanupAnimation = () => {
-    cancelAnimationFrame(animationId);
-    window.removeEventListener('resize', handleResize);
-    window.removeEventListener('mousemove', handleMouseMove);
-    renderer.dispose();
-    geometry.dispose();
-    material.dispose();
-    dataTexture.dispose();
-  };
+      dataTexture.needsUpdate = true;
+      renderer.render(scene, camera);
+    };
+    animate();
+
+    cleanupAnimation = () => {
+      cancelAnimationFrame(animationId);
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('mousemove', handleMouseMove);
+      renderer.dispose();
+      geometry.dispose();
+      material.dispose();
+      dataTexture.dispose();
+    };
+  } catch (err) {
+    console.warn('WebGL Initialization failed, fallback to CSS background.', err);
+    cleanupAnimation();
+  }
 };
 
-// 响应主题切换并平滑更新亮度 Uniform
 watch(() => props.isDark, (dark) => {
   if (uniforms) uniforms.uBrightness.value = dark ? 0.40 : 1.0;
 });
@@ -193,6 +185,19 @@ onUnmounted(() => cleanupAnimation());
   top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 0;
-  pointer-events: none; /* 确保背景不拦截页面内按钮等组件的点击 */
+  pointer-events: none;
+}
+
+.kt-fallback-bg {
+  background-image: url('/register_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  /* 
+     Canvas 如果正常加载会覆盖在 background-image 之上。
+     由于 renderer alpha: true，Canvas 背景是透明的，所以需要注意叠加效果。
+     这里设置背景色以确保 Canvas 加载前或者失败时有底色。
+  */
+  background-color: var(--kt-bg); 
 }
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/ImagePreviewModal.vue b/src/frontend/src/components/ImagePreviewModal.vue
index acb36b2..26dffa5 100644
--- a/src/frontend/src/components/ImagePreviewModal.vue
+++ b/src/frontend/src/components/ImagePreviewModal.vue
@@ -8,7 +8,7 @@
           <div class="kt-preview-header">
             <div class="kt-preview-header-info">
               <h3>结果预览</h3>
-              <span class="kt-preview-task-tag">Task #{{ taskId }}</span>
+              <span class="kt-preview-task-tag">Task #{{ virtualId || taskId }}</span>
               <span v-if="isFinetuneTask" class="kt-preview-mode-tag">
                 {{ isUploadFinetune ? '上传源微调 (Upload)' : '加噪源微调 (Perturbation)' }}
               </span>
@@ -49,10 +49,9 @@
 
             <!-- 
                场景1: 单栏长图报告模式 
-               适用：评估任务 (evaluate/metrics) 和 热力图任务 (heatmap)
             -->
             <div v-else-if="isEvaluateTask" class="kt-preview-report-stage">
-              <div class="kt-preview-report-container allow-scroll">
+              <div class="kt-preview-report-container">
                 <div class="kt-preview-report-header-tip">
                   <i class="fas fa-file-invoice"></i> 
                   {{ taskType === 'heatmap' ? '热力图报告 (Heatmap Report)' : '评估报告 (Evaluation Report)' }}
@@ -70,7 +69,6 @@
               <div class="kt-preview-img-box kt-preview-original">
                 <span class="kt-preview-img-label">{{ leftImageLabel }}</span>
                 
-                <!-- 页码指示器 (仅微调任务显示) -->
                 <span v-if="isFinetuneTask && finetuneLeftList.length > 0" class="kt-preview-page-indicator">
                   {{ leftIndex + 1 }} / {{ finetuneLeftList.length }}
                 </span>
@@ -78,13 +76,12 @@
                 <img :src="currentOriginalSrc" alt="Left Image" v-if="currentOriginalSrc" />
                 <div v-else class="kt-preview-no-img">
                   <span v-if="isFinetuneTask">
-                    <i class="fas fa-robot" style="display:block; font-size: var(--cq-font-2xl); margin-bottom: 1cqh; color: var(--kt-muted-fg);"></i>
+                    <i class="fas fa-robot" style="display:block; font-size: 2rem; margin-bottom: 1rem; color: var(--kt-muted-fg);"></i>
                     生成中或无数据<br>(Waiting for Generation)
                   </span>
                   <span v-else>无图片数据</span>
                 </div>
 
-                <!-- 独立翻页控件 -->
                 <div v-if="isFinetuneTask && finetuneLeftList.length > 1" class="kt-preview-nav-controls">
                   <button class="kt-preview-nav-arrow left" @click.stop="changeLeft(-1)" :disabled="leftIndex === 0">
                     <i class="fas fa-chevron-left"></i>
@@ -105,7 +102,6 @@
               <div class="kt-preview-img-box kt-preview-result">
                 <span class="kt-preview-img-label kt-preview-result-label">{{ rightImageLabel }}</span>
                 
-                <!-- 页码指示器 -->
                 <span v-if="isFinetuneTask && finetuneRightList.length > 0" class="kt-preview-page-indicator">
                   {{ rightIndex + 1 }} / {{ finetuneRightList.length }}
                 </span>
@@ -113,13 +109,12 @@
                 <img :src="currentResultSrc" alt="Result" v-if="currentResultSrc" />
                 <div v-else class="kt-preview-no-img">
                    <span v-if="isFinetuneTask">
-                    <i class="fas fa-hourglass-half" style="display:block; font-size: var(--cq-font-2xl); margin-bottom: 1cqh; color: var(--kt-muted-fg);"></i>
+                    <i class="fas fa-hourglass-half" style="display:block; font-size: 2rem; margin-bottom: 1rem; color: var(--kt-muted-fg);"></i>
                     暂无生成结果<br>(Pending / No Data)
                   </span>
                   <span v-else>暂无结果</span>
                 </div>
 
-                <!-- 独立翻页控件 -->
                 <div v-if="isFinetuneTask && finetuneRightList.length > 1" class="kt-preview-nav-controls">
                   <button class="kt-preview-nav-arrow left" @click.stop="changeRight(-1)" :disabled="rightIndex === 0">
                     <i class="fas fa-chevron-left"></i>
@@ -133,7 +128,7 @@
 
           </div>
 
-          <!-- 底部数字翻页 (仅非微调且非报告任务显示) -->
+          <!-- 底部数字翻页 -->
           <div class="kt-preview-footer" v-if="totalPairs > 1 && !isFinetuneTask && !isEvaluateTask">
             <div class="kt-preview-thumb-list">
               <div 
@@ -161,13 +156,14 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
-import { getTaskImagePreview } from '@/api/image'
+import { ref, computed, watch, onUnmounted } from 'vue' 
+import { getTaskImages } from '@/api/image'
 import ThreeDTrajectoryModal from '@/components/ThreeDTrajectoryModal.vue'
 
 const props = defineProps({
   isOpen: Boolean,
   taskId: [String, Number],
+  virtualId: [String, Number], 
   taskType: { type: String, default: '' }
 })
 
@@ -178,10 +174,9 @@ const error = ref(null)
 const previewData = ref(null)
 const show3DModal = ref(false)
 
-// 状态管理
-const currentIndex = ref(0) // 全局同步索引
-const leftIndex = ref(0)    // 左侧独立索引
-const rightIndex = ref(0)   // 右侧独立索引
+const currentIndex = ref(0) 
+const leftIndex = ref(0)    
+const rightIndex = ref(0)   
 
 const isFinetuneTask = computed(() => props.taskType === 'finetune')
 
@@ -189,7 +184,6 @@ const isEvaluateTask = computed(() => {
   return ['evaluate', 'metrics', 'heatmap'].includes(props.taskType)
 })
 
-// === 核心判断：是否为上传源的微调任务 ===
 const isUploadFinetune = computed(() => {
   if (!isFinetuneTask.value || !previewData.value?.images) return false
   if (previewData.value.images.uploaded_generate?.length > 0) return true
@@ -198,7 +192,6 @@ const isUploadFinetune = computed(() => {
   return false 
 })
 
-// === 核心数据源拆分 (微调任务专用) ===
 const finetuneLeftList = computed(() => {
   const imgs = previewData.value?.images
   if (!imgs || !isFinetuneTask.value) return []
@@ -219,7 +212,6 @@ const finetuneRightList = computed(() => {
   }
 })
 
-// === 独立翻页动作 ===
 const changeLeft = (delta) => {
   const newIndex = leftIndex.value + delta
   if (newIndex >= 0 && newIndex < finetuneLeftList.value.length) leftIndex.value = newIndex
@@ -232,22 +224,6 @@ const changeRight = (delta) => {
 
 const open3DGraph = () => { show3DModal.value = true }
 
-// 数据加载与重置
-watch(() => props.isOpen, (val) => {
-  if (val && props.taskId) {
-    fetchData()
-  } else {
-    setTimeout(() => {
-      previewData.value = null
-      currentIndex.value = 0
-      leftIndex.value = 0
-      rightIndex.value = 0
-      error.value = null
-      show3DModal.value = false
-    }, 300)
-  }
-})
-
 const clearBlobs = () => {
   if (previewData.value && previewData.value.images) {
     Object.values(previewData.value.images).forEach(list => {
@@ -260,6 +236,18 @@ const clearBlobs = () => {
   }
 }
 
+// 背景滑动问题：切换 body 的 overflow 状态
+const toggleBodyScroll = (lock) => {
+  if (typeof document !== 'undefined' && document.body) {
+    document.body.style.overflow = lock ? 'hidden' : ''
+  }
+}
+
+onUnmounted(() => {
+  clearBlobs()
+  toggleBodyScroll(false)
+})
+
 const fetchData = async () => {
   loading.value = true
   error.value = null
@@ -267,7 +255,7 @@ const fetchData = async () => {
   previewData.value = null
   
   try {
-    const res = await getTaskImagePreview(props.taskId)
+    const res = await getTaskImages(props.taskId)
     if (!res || !res.images) throw new Error("无图片数据")
     previewData.value = res 
   } catch (err) {
@@ -278,19 +266,25 @@ const fetchData = async () => {
   }
 }
 
-// 在组件销毁或关闭时清理
 watch(() => props.isOpen, (val) => {
+  // 控制背景滚动
+  toggleBodyScroll(val)
+
   if (val && props.taskId) {
     fetchData()
   } else {
     setTimeout(() => {
       clearBlobs()
       previewData.value = null
+      currentIndex.value = 0
+      leftIndex.value = 0
+      rightIndex.value = 0
+      error.value = null
+      show3DModal.value = false
     }, 300)
   }
 })
 
-// === 1. Total Pairs ===
 const totalPairs = computed(() => {
   if (isFinetuneTask.value) return 0 
   if (!previewData.value || !previewData.value.images) return 0
@@ -303,73 +297,61 @@ const totalPairs = computed(() => {
   return 0
 })
 
-// === 2. 左侧图片源 (URL) ===
 const currentOriginalSrc = computed(() => {
   const imgs = previewData.value?.images
   if (!imgs) return null
-
   if (isFinetuneTask.value) {
     const list = finetuneLeftList.value
     if (list && list[leftIndex.value]) return list[leftIndex.value].data
     return null
   }
-
   const idx = currentIndex.value
   if (imgs.original && imgs.original[idx]) return imgs.original[idx].data
   if (imgs.original_generate && imgs.original_generate[idx]) return imgs.original_generate[idx].data
-  
   return null 
 })
 
-// === 3. 右侧图片源 / 报告图源 (URL) ===
 const currentResultSrc = computed(() => {
   const imgs = previewData.value?.images
   if (!imgs) return null
-  
   if (isFinetuneTask.value) {
     const list = finetuneRightList.value
     if (list && list[rightIndex.value]) return list[rightIndex.value].data
     return null
   }
-
   const idx = currentIndex.value
   if (imgs.heatmap && imgs.heatmap[idx]) return imgs.heatmap[idx].data 
   if (imgs.report && imgs.report[idx]) return imgs.report[idx].data
   if (imgs.perturbed && imgs.perturbed[idx]) return imgs.perturbed[idx].data
   if (imgs.perturbed_generate && imgs.perturbed_generate[idx]) return imgs.perturbed_generate[idx].data
   if (imgs.uploaded_generate && imgs.uploaded_generate[idx]) return imgs.uploaded_generate[idx].data
-
   return null
 })
 
-// 4. 左侧标签
 const leftImageLabel = computed(() => {
   const imgs = previewData.value?.images
   if (!imgs) return 'Original'
-
   if (isFinetuneTask.value) {
     if (isUploadFinetune.value) return '上传原图 (Uploaded Input)'
     return '未防护微调结果 (Clean Gen)'
   }
-  
   if (imgs.original) return 'Original (原始)'
   if (imgs.perturbed_generate) return 'Protected Gen (防护后生成)'
-  
   return 'Reference'
 })
 
-// 5. 右侧标签
 const rightImageLabel = computed(() => {
   const imgs = previewData.value?.images
   if (!imgs) return 'Result'
-
   if (isFinetuneTask.value) {
     if (isUploadFinetune.value) return '微调生成 (Finetuned)'
     return '防护后微调结果 (Protected Gen)'
   }
-
-  if (imgs.uploaded_generate || imgs.perturbed_generate) return 'Finetuned (微调生成)'
-  
+  if (imgs.perturbed && imgs.perturbed.length > 0) return 'Perturbed (加噪图片)'
+  if ((imgs.uploaded_generate && imgs.uploaded_generate.length > 0) || 
+      (imgs.perturbed_generate && imgs.perturbed_generate.length > 0)) {
+    return 'Finetuned (微调生成)'
+  }
   return 'Protected (防护后)'
 })
 
@@ -380,272 +362,394 @@ const close = () => { emit('close') }
 /* ===== KT Style Image Preview Modal ===== */
 
 .kt-preview-overlay {
-  position: fixed; inset: 0;
+  position: fixed;
+  inset: 0;
   background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(0.8cqw);
+  backdrop-filter: blur(8px);
   z-index: 2000;
-  display: flex; justify-content: center; align-items: center;
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+  padding: 4vh 2vw;
+  /* 增加上下边距 */
+  overflow-y: auto;
+  /* 允许 Overlay 本身滚动，以防 Card 高度超屏幕 */
 }
 
 .kt-preview-card {
-  width: 95cqw; max-width: 140cqw; height: 85cqh;
-  min-width: 30cqw; 
-  min-height: 40cqh; 
+  /* 使用 margin: auto 实现 Flexbox 下的安全居中 (溢出时自动顶部对齐) */
+  margin: auto;
+
+  width: 90vw;
+  max-width: 1400px;
+
+  /* 使用 vh 限制高度，确保不会被撑爆 */
+  height: 85vh;
+  max-height: 900px;
+
+  min-width: 320px;
+  min-height: 400px;
+
   background: var(--kt-bg);
   border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 }
 
 @media (max-width: 900px) {
   .kt-preview-card {
-    width: 95cqw; height: 90cqh;
+    width: 95vw;
+    height: 90vh;
+    max-height: 90vh;
   }
+
   .kt-preview-image-stage {
-    flex-direction: column; 
-    overflow-y: auto; 
-    padding: 1cqw;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 1rem;
+    height: auto;
+    /* Allow grow */
   }
+
   .kt-preview-img-box {
-    width: 100%; height: 35cqh; flex: none; margin-bottom: 1cqw;
+    width: 100%;
+    /* 移动端限制图片框高度 */
+    height: 35vh;
+    min-height: 200px;
+    flex: none;
+    margin-bottom: 1rem;
+  }
+
+  .kt-preview-divider {
+    transform: rotate(90deg);
+    margin: 1rem 0;
   }
-  .kt-preview-divider { transform: rotate(90deg); margin: 1cqw 0; }
 }
 
 .kt-preview-header {
-  padding: 1.5cqw 2.5cqw;
+  padding: 1.5rem 2rem;
   border-bottom: 2px solid var(--kt-border);
-  display: flex; justify-content: space-between; align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   background: var(--kt-bg);
   flex-shrink: 0;
 }
 
-.kt-preview-header-info h3 { 
-  margin: 0; 
+.kt-preview-header-info h3 {
+  margin: 0;
   font-family: var(--kt-font);
   font-weight: 700;
-  font-size: var(--cq-font-lg); 
-  color: var(--kt-fg); 
+  font-size: 1.5rem;
+  color: var(--kt-fg);
   text-transform: uppercase;
   letter-spacing: -0.02em;
 }
 
-.kt-preview-task-tag { 
+.kt-preview-task-tag {
   font-family: var(--kt-font);
-  font-size: var(--cq-font-xs); 
-  background: var(--kt-muted); 
-  padding: 0.2cqw 0.8cqw; 
-  border-radius: var(--kt-radius); 
+  font-size: 0.8rem;
+  background: var(--kt-muted);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--kt-radius);
   border: 1px solid var(--kt-border);
-  color: var(--kt-fg); 
-  margin-top: 0.4cqw; 
-  display: inline-block; 
-  margin-right: 0.5cqw; 
+  color: var(--kt-fg);
+  margin-top: 0.4rem;
+  display: inline-block;
+  margin-right: 0.5rem;
 }
 
-.kt-preview-mode-tag { 
+.kt-preview-mode-tag {
   font-family: var(--kt-font);
-  font-size: 0.75cqw; 
-  background: var(--kt-accent); 
-  color: var(--kt-accent-fg); 
-  padding: 0.2cqw 0.8cqw; 
-  border-radius: var(--kt-radius); 
-  font-weight: 600; 
+  font-size: 0.75rem;
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--kt-radius);
+  font-weight: 600;
 }
 
-.kt-preview-header-actions { display: flex; align-items: center; gap: 1.5cqw; }
+.kt-preview-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
 
-.kt-preview-close-btn { 
-  background: var(--kt-bg); 
-  border: 2px solid var(--kt-border); 
+.kt-preview-close-btn {
+  background: var(--kt-bg);
+  border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  font-size: var(--cq-font-xl); 
-  cursor: pointer; 
-  color: var(--kt-fg); 
-  padding: 0.4cqw 0.8cqw;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--kt-fg);
+  padding: 0.4rem 0.8rem;
   transition: all var(--kt-transition-micro);
 }
 
-.kt-preview-close-btn:hover { 
-  background: var(--kt-accent); 
+.kt-preview-close-btn:hover {
+  background: var(--kt-accent);
   color: var(--kt-accent-fg);
   border-color: var(--kt-accent);
 }
 
+/* Body 负责内部滚动 */
 .kt-preview-body {
   flex: 1;
   position: relative;
   background: var(--kt-bg);
-  display: flex; justify-content: center; align-items: center;
-  padding: 0; 
-  overflow: hidden;
+  /* block 布局让 padding 生效 */
+  display: block;
+  padding: 0;
+  overflow-y: auto;
+  /* 让 Body 内部滚动 */
 }
 
-.kt-preview-loading, .kt-preview-error { 
-  width: 100%; 
-  text-align: center; 
-  color: var(--kt-fg); 
+.kt-preview-loading,
+.kt-preview-error {
+  /* 居中 loading/error */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  text-align: center;
+  color: var(--kt-fg);
   font-family: var(--kt-font);
 }
 
-.kt-preview-error { color: var(--kt-accent); }
-.kt-preview-loading i { color: var(--kt-accent); margin-bottom: 2cqw; }
+.kt-preview-error {
+  color: var(--kt-accent);
+}
+
+.kt-preview-loading i {
+  color: var(--kt-accent);
+  margin-bottom: 1rem;
+}
 
 /* === 图片展示区 === */
 .kt-preview-image-stage {
-  display: flex; align-items: center; justify-content: center;
-  width: 100%; height: 100%; gap: 2cqw;
-  padding: 2cqw; 
+  display: flex;
+  /* 移除 align-items: center，防止高度溢出时被居中裁剪 */
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  /* 使用 min-height 撑满，允许内容撑开 */
+  min-height: 100%;
+  gap: 2vw;
+  padding: 2rem;
+  /* 给足内边距，防止贴边 */
+  box-sizing: border-box;
 }
 
 .kt-preview-img-box {
-  flex: 1; height: 100%;
-  background: var(--kt-bg); 
+  flex: 1;
+  /* 移除固定高度，让它自适应 */
+  min-height: 300px;
+  background: var(--kt-bg);
   border-radius: var(--kt-radius);
-  display: flex; flex-direction: column; position: relative;
-  border: 2px solid var(--kt-border); 
-  padding: 1cqw;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border: 2px solid var(--kt-border);
+  padding: 1rem;
 }
 
 /* 导航箭头 */
 .kt-preview-nav-controls {
   position: absolute;
-  top: 50%; width: 100%; left: 0;
-  display: flex; justify-content: space-between;
+  top: 50%;
+  width: 100%;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
   transform: translateY(-50%);
-  pointer-events: none; 
-  padding: 0 1cqw;
+  pointer-events: none;
+  padding: 0 1rem;
   z-index: 10;
 }
 
 .kt-preview-nav-arrow {
   pointer-events: auto;
-  width: 4cqw; height: 4cqw;
+  width: 3rem;
+  height: 3rem;
   border-radius: var(--kt-radius);
   border: 2px solid var(--kt-border);
   background: var(--kt-bg);
   color: var(--kt-fg);
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   transition: all var(--kt-transition-micro);
   font-family: var(--kt-font);
 }
 
-.kt-preview-nav-arrow:hover { 
-  background: var(--kt-accent); 
+.kt-preview-nav-arrow:hover {
+  background: var(--kt-accent);
   color: var(--kt-accent-fg);
   border-color: var(--kt-accent);
 }
 
-.kt-preview-nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
+.kt-preview-nav-arrow:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
 
 .kt-preview-img-label {
-  position: absolute; top: 1.5cqw; left: 1.5cqw;
-  background: var(--kt-fg); color: var(--kt-bg);
-  padding: 0.4cqw 1.2cqw; 
-  border-radius: var(--kt-radius); 
-  font-size: var(--cq-font-xs); 
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background: var(--kt-fg);
+  color: var(--kt-bg);
+  padding: 0.4rem 1rem;
+  border-radius: var(--kt-radius);
+  font-size: 0.8rem;
   font-family: var(--kt-font);
   font-weight: 600;
-  z-index: 2; 
+  z-index: 2;
   border: 2px solid var(--kt-border);
   text-transform: uppercase;
 }
 
-.kt-preview-result-label { background: var(--kt-accent); color: var(--kt-accent-fg); }
+.kt-preview-result-label {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+}
 
 .kt-preview-page-indicator {
-  position: absolute; top: 1.5cqw; right: 1.5cqw;
-  background: var(--kt-muted); color: var(--kt-fg);
-  padding: 0.4cqw 1cqw; 
-  border-radius: var(--kt-radius); 
-  font-size: var(--cq-font-xs); 
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--kt-muted);
+  color: var(--kt-fg);
+  padding: 0.4rem 1rem;
+  border-radius: var(--kt-radius);
+  font-size: 0.8rem;
   font-family: var(--kt-font);
-  z-index: 2; 
+  z-index: 2;
   border: 1px solid var(--kt-border);
 }
 
 .kt-preview-img-box img {
-  width: 100%; height: 100%; object-fit: contain; border-radius: var(--kt-radius);
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--kt-radius);
+}
+
+.kt-preview-divider {
+  color: var(--kt-fg);
+  font-size: 2rem;
+  opacity: 0.5;
+  /* 垂直居中图标 */
+  align-self: center;
 }
 
-.kt-preview-divider { color: var(--kt-fg); font-size: var(--cq-font-2xl); opacity: 0.5; }
-.kt-preview-spacer { width: 1cqw; }
+.kt-preview-spacer {
+  width: 1vw;
+}
 
-.kt-preview-no-img { 
-  width: 100%; height: 100%; 
-  display: flex; align-items: center; justify-content: center; 
-  color: var(--kt-muted-fg); 
-  text-align: center; 
-  font-size: var(--cq-font-sm); 
+.kt-preview-no-img {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kt-muted-fg);
+  text-align: center;
+  font-size: 0.9rem;
   font-family: var(--kt-font);
-  line-height: 1.6; 
-  flex-direction: column; 
+  line-height: 1.6;
+  flex-direction: column;
 }
 
 /* === 报告视图 (热力图/评估报告) === */
-.kt-preview-report-stage { 
-  width: 100%; height: 100%; 
+.kt-preview-report-stage {
+  width: 100%;
+  min-height: 100%;
   background: var(--kt-bg);
-  display: flex; justify-content: center; 
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+  box-sizing: border-box;
 }
 
-.kt-preview-report-container { 
-  width: 100%; max-width: 90cqw; height: 100%; 
-  overflow-y: auto;
-  background: var(--kt-bg); 
+.kt-preview-report-container {
+  width: 100%;
+  max-width: 90vw;
+  /* 移除固定 height: 100%，让其自适应内容 */
+  overflow-y: visible;
+  background: var(--kt-bg);
   border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  padding: 2cqw; 
-  text-align: center; 
-  margin: 1cqw;
+  padding: 2rem;
+  text-align: center;
+  /* margin: 1rem; */
 }
 
-.kt-preview-report-header-tip { 
-  color: var(--kt-fg); 
-  font-size: var(--cq-font-sm); 
+.kt-preview-report-header-tip {
+  color: var(--kt-fg);
+  font-size: 1rem;
   font-family: var(--kt-font);
   font-weight: 600;
-  margin-bottom: 2cqw; padding: 1cqw 1.5cqw; 
-  background: var(--kt-muted); 
-  border-radius: var(--kt-radius); 
-  display: inline-block; 
+  margin-bottom: 2rem;
+  padding: 1rem 1.5rem;
+  background: var(--kt-muted);
+  border-radius: var(--kt-radius);
+  display: inline-block;
   border: 2px solid var(--kt-border);
   text-transform: uppercase;
 }
 
-.kt-preview-sub-tip { 
-  display: block; 
-  font-size: var(--cq-font-xs); 
-  font-weight: 400; 
-  color: var(--kt-muted-fg); 
-  margin-top: 0.4cqw; 
+.kt-preview-sub-tip {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--kt-muted-fg);
+  margin-top: 0.4rem;
   text-transform: none;
 }
 
-.kt-preview-report-img { width: 100%; height: auto; display: block; border-radius: var(--kt-radius); }
+.kt-preview-report-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--kt-radius);
+}
 
 /* 底部 */
-.kt-preview-footer { 
-  padding: 1.5cqw; 
-  background: var(--kt-bg); 
-  border-top: 2px solid var(--kt-border); 
-  display: flex; justify-content: center; flex-shrink: 0; 
+.kt-preview-footer {
+  padding: 1rem;
+  background: var(--kt-bg);
+  border-top: 2px solid var(--kt-border);
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.kt-preview-thumb-list { display: flex; gap: 1cqw; overflow-x: auto; padding: 0.5cqw; }
+.kt-preview-thumb-list {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.5rem;
+}
 
-.kt-preview-thumb-item { 
-  width: 4cqw; height: 4cqw; 
-  background: var(--kt-muted); 
+.kt-preview-thumb-item {
+  width: 3rem;
+  height: 3rem;
+  background: var(--kt-muted);
   border: 2px solid var(--kt-border);
-  border-radius: var(--kt-radius); 
-  display: flex; align-items: center; justify-content: center; 
-  cursor: pointer; 
-  font-weight: bold; 
+  border-radius: var(--kt-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: bold;
   font-family: var(--kt-font);
-  color: var(--kt-fg); 
+  color: var(--kt-fg);
   transition: all var(--kt-transition-micro);
 }
 
@@ -654,14 +758,21 @@ const close = () => { emit('close') }
   border-color: var(--kt-accent);
 }
 
-.kt-preview-thumb-item.active { 
-  background: var(--kt-accent); 
-  color: var(--kt-accent-fg); 
+.kt-preview-thumb-item.active {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
   border-color: var(--kt-accent);
 }
 
-.modal-fade-enter-active, .modal-fade-leave-active { transition: opacity 0.3s ease; }
-.modal-fade-enter-from, .modal-fade-leave-to { opacity: 0; }
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
 
 /* KT button style */
 .kt-preview-btn {
@@ -670,13 +781,13 @@ const close = () => { emit('close') }
   color: var(--kt-fg);
   border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  padding: 0.8cqh 1.6cqw;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   transition: all var(--kt-transition-micro);
   display: inline-flex;
   align-items: center;
-  gap: 0.5cqw;
-  font-size: var(--cq-font-sm);
+  gap: 0.5rem;
+  font-size: 0.9rem;
   font-weight: 600;
   text-transform: uppercase;
 }
@@ -687,12 +798,7 @@ const close = () => { emit('close') }
   border-color: var(--kt-accent);
 }
 
-/* 
-   ===========================================
-   深色模式适配 (Dark Mode)
-   ===========================================
-*/
-
+/* Dark Mode */
 html.dark-mode .kt-preview-card {
   background: var(--kt-bg);
   border-color: var(--kt-border);
@@ -728,7 +834,7 @@ html.dark-mode .kt-preview-body {
   background: var(--kt-bg);
 }
 
-html.dark-mode .kt-preview-loading, 
+html.dark-mode .kt-preview-loading,
 html.dark-mode .kt-preview-error {
   color: var(--kt-muted-fg);
 }
@@ -813,4 +919,4 @@ html.dark-mode .kt-preview-thumb-item.active {
   background: var(--kt-accent);
   color: var(--kt-accent-fg);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/KtMarquee.vue b/src/frontend/src/components/KtMarquee.vue
index 16223a0..97d36bf 100644
--- a/src/frontend/src/components/KtMarquee.vue
+++ b/src/frontend/src/components/KtMarquee.vue
@@ -1,7 +1,19 @@
 <script setup>
+/**
+ * KtMarquee - Kinetic Typography Infinite Scrolling Marquee Component
+ * 
+ * Implements infinite horizontal scrolling animation using CSS transform.
+ * Updated to use 4 copies of content to support ultra-wide screens without gaps.
+ */
 import { computed } from 'vue'
 
 const props = defineProps({
+  /**
+   * Animation speed variant
+   * - fast: 15s duration
+   * - normal: 20s duration (default)
+   * - slow: 30s duration
+   */
   speed: {
     type: String,
     default: 'normal',
@@ -15,12 +27,19 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
 <template>
   <div class="kt-marquee" :class="speedClass">
     <div class="kt-marquee__track">
-      <!-- Original content -->
-      <div class="kt-marquee__content">
-        <slot />
-      </div>
-      <!-- Duplicated content for seamless infinite scroll - aria-hidden for accessibility -->
-      <div class="kt-marquee__content" aria-hidden="true">
+      <!-- 
+        Render 4 copies of the content.
+        Why 4? 
+        If content is short and screen is wide (e.g. 4K), 2 copies might not fill the screen width.
+        4 copies ensure that even if the animation moves by 1 unit, there are still 3 units visible,
+        covering any realistic screen width.
+      -->
+      <div 
+        v-for="i in 4" 
+        :key="i"
+        class="kt-marquee__content" 
+        :aria-hidden="i > 1"
+      >
         <slot />
       </div>
     </div>
@@ -29,9 +48,7 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
 
 <style scoped>
 /* Component styles are defined in Style.css for consistency */
-/* This component uses the global .kt-marquee classes */
-
-/* Scoped overrides if needed */
+/* Scoped overrides */
 .kt-marquee {
   overflow: hidden;
   width: 100%;
@@ -43,13 +60,10 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
 
 .kt-marquee__track {
   display: flex;
-  width: max-content;
-  /* GPU-accelerated animation using transform: translateX only */
-  /* Requirements: 12.1, 12.3 - No layout-triggering properties */
+  width: max-content; /* Ensure track takes up space of all children */
+  /* GPU-accelerated animation */
   animation: kt-marquee-scroll 20s linear infinite;
-  /* Performance optimization: hint browser to use GPU layer */
   will-change: transform;
-  /* Ensure smooth rendering */
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
@@ -70,7 +84,7 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
   display: flex;
   align-items: center;
   gap: 3rem;
-  padding-right: 3rem;
+  padding-right: 3rem; /* Add spacing between duplicated blocks */
   font-family: var(--kt-font);
   font-size: var(--kt-body);
   font-weight: 700;
@@ -84,18 +98,25 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
   flex-shrink: 0;
 }
 
-/* GPU-accelerated animation using transform only */
-/* Requirements: 12.1, 12.3 - Uses only transform: translateX for 60fps performance */
+/* 
+ * Animation Logic:
+ * We have 4 identical copies: [1][2][3][4]
+ * We want to move left by the width of exactly ONE copy, then snap back to 0.
+ * Because all copies are identical, [2][3][4][...] looks exactly like [1][2][3][...] at the start.
+ * 
+ * 1 copy = 1/4 of the total track width (100%).
+ * So we translate from 0 to -25%.
+ */
 @keyframes kt-marquee-scroll {
   from {
     transform: translateX(0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translateX(-25%);
   }
 }
 
-/* Respect user's reduced motion preference - Requirements 8.6 */
+/* Respect user's reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .kt-marquee__track {
     animation: none;
@@ -103,7 +124,6 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
 }
 
 /* === Responsive Marquee Styles === */
-/* Requirements: 10.5 - Marquee persists at all breakpoints */
 
 /* Mobile (< 768px) */
 @media (max-width: 767px) {
@@ -141,4 +161,4 @@ const speedClass = computed(() => `kt-marquee--${props.speed}`)
     padding-right: 3rem;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/KtSuccessModal.vue b/src/frontend/src/components/KtSuccessModal.vue
index 42fbbeb..28f94b4 100644
--- a/src/frontend/src/components/KtSuccessModal.vue
+++ b/src/frontend/src/components/KtSuccessModal.vue
@@ -22,7 +22,7 @@
           <div v-if="taskInfo" class="kt-success-modal__info">
             <div class="kt-success-modal__info-item" v-if="taskInfo.taskName">
               <span class="kt-success-modal__info-label">任务名称</span>
-              <span class="kt-success-modal__info-value">{{ taskInfo.taskName }}</span>
+              <span class="kt-success-modal__info-value" :title="taskInfo.taskName">{{ taskInfo.taskName }}</span>
             </div>
             <div class="kt-success-modal__info-item" v-if="taskInfo.taskType">
               <span class="kt-success-modal__info-label">任务类型</span>
@@ -210,6 +210,9 @@ defineExpose({ close: handleClose })
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 0;
+  
+  /* 允许 Flex 子项收缩 */
+  min-width: 0; 
 }
 
 .kt-success-modal__info-item:not(:last-child) {
@@ -229,6 +232,13 @@ defineExpose({ close: handleClose })
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--kt-fg);
+  
+  /* 文本截断 */
+  white-space: nowrap;       /* 不换行 */
+  overflow: hidden;          /* 隐藏溢出 */
+  text-overflow: ellipsis;   /* 显示省略号 */
+  max-width: 65%;            /* 限制最大宽度 (留给 Label 35% 的空间) */
+  text-align: right;         /* 保持靠右对齐 */
 }
 
 .kt-success-modal__hint {
diff --git a/src/frontend/src/components/NavBar.vue b/src/frontend/src/components/NavBar.vue
index e31a561..42f17f9 100644
--- a/src/frontend/src/components/NavBar.vue
+++ b/src/frontend/src/components/NavBar.vue
@@ -1,5 +1,10 @@
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
+/**
+ * NavBar.vue - Kinetic Typography Navigation Bar
+ * 
+ * Update: Reverted to pixel-based JS positioning to fix browser zoom misalignment issues.
+ */
+import { ref, computed, watch, onMounted, nextTick, onUnmounted } from 'vue'
 
 const props = defineProps({
   currentSection: { type: String, default: 'home' }
@@ -7,19 +12,28 @@ const props = defineProps({
 
 const emit = defineEmits(['navigate', 'logout', 'toggle'])
 
-// Toggle State
+const isDarkMode = ref(true)
+const savedState = localStorage.getItem('kt_nav_expanded')
+const isExpanded = ref(savedState === 'true' && savedState !== null ? true : false)
 
-const isDarkMode = ref(true) // Default to dark mode for Kinetic Typography
+// DOM Refs
+const navButtonRefs = ref([]) // 存储所有导航按钮的 DOM 元素
+const navContainerRef = ref(null) // 存储导航项容器的 DOM 元素
 
-const savedState = localStorage.getItem('kt_nav_expanded')
-const isExpanded = ref(savedState === 'true' && savedState !== null ? true : false) // 默认值改为 false，或从 localStorage 读取，但让 MainFlow 决定是否展开
+// Style State
+const highlightStyle = ref({
+  top: '0px',
+  height: '0px',
+  opacity: 0 // 初始化时隐藏，计算完成后显示，避免跳动
+})
 
 watch(isExpanded, (newValue) => { 
   localStorage.setItem('kt_nav_expanded', newValue)
-  emit('toggle', newValue) 
+  emit('toggle', newValue)
+  // 展开/收起动画结束后重新计算位置
+  setTimeout(updateHighlightPosition, 300)
 })
 
-// Nav Items - Requirement 3.1: Preserve all existing navigation items
 const navItems = [
   { id: 'home', label: '首页', icon: 'fas fa-home' },
   { id: 'page1', label: '通用防护', icon: 'fas fa-shield-alt' },
@@ -33,34 +47,44 @@ const activeIndex = computed(() => {
   return idx >= 0 ? idx : 0
 })
 
-// Highlight Calculation - Requirements: 2.6
-// Formula: top = 10 + (activeIndex * (80 / navItems.length))%
-// The navigation items occupy 80% of the container height (from 10% to 90%)
-// Each item takes up (80 / navItems.length)% of the height
-const itemHeightPercent = 80 / navItems.length
-const highlightTop = computed(() => `${10 + (activeIndex.value * itemHeightPercent)}%`)
-const highlightHeight = `${itemHeightPercent}%`
-
-const handleNavClick = (id) => { emit('navigate', id) }
-const handleLogout = () => { emit('logout') }
-const handlePage5 = () => { emit('navigate', 'page5') }
 const isPage5Active = computed(() => props.currentSection === 'page5')
 
-// === Theme toggle - Requirement 3.2: Preserve theme toggle ===
-const toggleTheme = () => {
-  isDarkMode.value = !isDarkMode.value
-  if (isDarkMode.value) {
-    document.documentElement.classList.add('dark-mode')
-    localStorage.setItem('theme', 'dark')
-  } else {
-    document.documentElement.classList.remove('dark-mode')
-    localStorage.setItem('theme', 'light')
+// === 核心修复：基于像素的精准定位 ===
+const updateHighlightPosition = () => {
+  // 如果是 Page5 或 DOM 未挂载，不处理
+  if (isPage5Active.value || !navContainerRef.value || !navButtonRefs.value[activeIndex.value]) {
+    highlightStyle.value = { ...highlightStyle.value, opacity: 0 }
+    return
+  }
+
+  const container = navContainerRef.value
+  const activeBtn = navButtonRefs.value[activeIndex.value]
+
+  // 使用 getBoundingClientRect 获取精确的亚像素位置
+  const containerRect = container.getBoundingClientRect()
+  const btnRect = activeBtn.getBoundingClientRect()
+
+  // 计算相对位置
+  const top = btnRect.top - containerRect.top
+  const height = btnRect.height
+
+  highlightStyle.value = {
+    top: `${top}px`,
+    height: `${height}px`,
+    opacity: 1 // 计算完成后显示
   }
 }
 
+// 监听变化自动更新位置
+watch(() => props.currentSection, () => {
+  nextTick(updateHighlightPosition)
+})
+
+// ResizeObserver: 监听容器尺寸变化（比 window.resize 更灵敏，能捕捉缩放）
+let resizeObserver = null
+
 onMounted(() => {
   const savedTheme = localStorage.getItem('theme')
-  // Default to dark mode for Kinetic Typography
   if (savedTheme === 'light') {
     isDarkMode.value = false
     document.documentElement.classList.remove('dark-mode')
@@ -68,33 +92,78 @@ onMounted(() => {
     isDarkMode.value = true
     document.documentElement.classList.add('dark-mode')
   }
+
+  // 初始化高亮位置
+  nextTick(() => {
+    updateHighlightPosition()
+    
+    // 启动监听
+    if (navContainerRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        updateHighlightPosition()
+      })
+      resizeObserver.observe(navContainerRef.value)
+    }
+    // 同时监听 window resize 作为双重保障
+    window.addEventListener('resize', updateHighlightPosition)
+  })
+})
+
+onUnmounted(() => {
+  if (resizeObserver) resizeObserver.disconnect()
+  window.removeEventListener('resize', updateHighlightPosition)
 })
+
+const handleNavClick = (id) => { emit('navigate', id) }
+const handleLogout = () => { emit('logout') }
+const handlePage5 = () => { emit('navigate', 'page5') }
+
+const toggleTheme = () => {
+  isDarkMode.value = !isDarkMode.value
+  if (isDarkMode.value) {
+    document.documentElement.classList.add('dark-mode')
+    localStorage.setItem('theme', 'dark')
+  } else {
+    document.documentElement.classList.remove('dark-mode')
+    localStorage.setItem('theme', 'light')
+  }
+}
 </script>
 
 <template>
   <div id="navbar-container" class="kt-navbar-container">
     <input type="checkbox" id="nav-toggle" v-model="isExpanded">
 
-    <!-- 导航岛 - Kinetic Typography Style -->
+    <!-- 导航岛 -->
     <div id="nav-bar" class="kt-navbar">
-      <!-- 头部 - Requirement 3.7: Space Grotesk font -->
       <div id="nav-header" class="kt-navbar__header">
-        <a id="nav-title" class="kt-navbar__title" href="#">MUSEGUARD</a>
+        <a id="nav-title" class="kt-navbar__title" href="#">GUARD</a>
         <label for="nav-toggle"><span id="nav-toggle-burger" class="kt-navbar__burger"></span></label>
         <hr class="kt-navbar__divider">
       </div>
 
-      <!-- 导航链接 - Requirement 3.1: Preserve all navigation items -->
-      <!-- Requirements: 11.5 - Keyboard navigable -->
       <nav id="nav-content" class="kt-navbar__content" role="navigation" aria-label="主导航">
-        <!-- Requirement 3.6: Active state with acid yellow -->
-        <div v-if="!isPage5Active" id="nav-content-highlight" class="kt-navbar__highlight" :style="{ top: highlightTop, height: highlightHeight }" aria-hidden="true">
-        </div>
-        <div class="nav-items-container kt-navbar__items" role="menubar">
-          <!-- Requirement 3.4: Uppercase labels with tight tracking -->
-          <!-- Requirement 3.5: Hover scale 1.05 -->
-          <!-- Requirements: 11.5 - Keyboard navigable with tabindex and key handlers -->
-          <div v-for="item in navItems" :key="item.id" class="nav-button kt-navbar__item"
+        <!-- 
+           nav-items-container 作为定位基准 (position: absolute)
+           highlight 和 buttons 都在其中，共享坐标系
+        -->
+        <div class="nav-items-container kt-navbar__items" ref="navContainerRef" role="menubar">
+          
+          <!-- 高亮条：使用 JS 计算的像素样式 -->
+          <div 
+            v-show="!isPage5Active" 
+            id="nav-content-highlight" 
+            class="kt-navbar__highlight" 
+            :style="highlightStyle" 
+            aria-hidden="true"
+          ></div>
+
+          <!-- 导航按钮 -->
+          <div 
+            v-for="(item, index) in navItems" 
+            :key="item.id" 
+            :ref="el => navButtonRefs[index] = el"
+            class="nav-button kt-navbar__item"
             :class="{ active: currentSection === item.id, 'kt-navbar__item--active': currentSection === item.id }" 
             @click="handleNavClick(item.id)"
             @keydown.enter="handleNavClick(item.id)"
@@ -109,16 +178,12 @@ onMounted(() => {
       </nav>
     </div>
 
-    <!-- 底部按钮组 - Requirement 3.2: Preserve all action buttons -->
-    <!-- Requirements: 11.5, 11.6 - Keyboard navigable, decorative icons hidden -->
+    <!-- 底部按钮组 -->
     <div class="external-actions kt-navbar__actions" role="group" aria-label="操作按钮">
-
-      <!-- 主题切换按钮 -->
       <button class="kt-btn kt-btn--circle theme-btn" @click="toggleTheme" :title="isDarkMode ? '切换亮色模式' : '切换深色模式'" :aria-label="isDarkMode ? '切换亮色模式' : '切换深色模式'">
         <i class="fas" :class="isDarkMode ? 'fa-cloud-sun' : 'fa-moon'" aria-hidden="true"></i>
       </button>
 
-      <!-- 个人中心按钮 -->
       <button class="kt-btn kt-btn--circle kt-btn--accent page-5-btn" :class="{ 'kt-btn--active': isPage5Active }" @click="handlePage5"
         title="个人中心" aria-label="个人中心" :aria-current="isPage5Active ? 'page' : undefined">
         <i class="fas fa-user-circle" aria-hidden="true"></i>
@@ -127,7 +192,6 @@ onMounted(() => {
   </div>
 </template>
 
-
 <style scoped>
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
 
@@ -146,7 +210,7 @@ onMounted(() => {
   transition: width 0.2s linear;
 }
 
-/* === 1. 导航条 - Kinetic Typography Style (Requirement 3.3) === */
+/* === 1. 导航条 === */
 #nav-bar {
   pointer-events: auto;
   position: relative;
@@ -246,27 +310,12 @@ label[for="nav-toggle"] {
   will-change: transform, top;
 }
 
-#nav-toggle-burger::before {
-  top: -8px;
-}
-
-#nav-toggle-burger::after {
-  top: 8px;
-}
+#nav-toggle-burger::before { top: -8px; }
+#nav-toggle-burger::after { top: 8px; }
 
-#nav-toggle:checked ~ #nav-bar #nav-toggle-burger {
-  background: transparent;
-}
-
-#nav-toggle:checked ~ #nav-bar #nav-toggle-burger::before {
-  top: 0;
-  transform: rotate(45deg);
-}
-
-#nav-toggle:checked ~ #nav-bar #nav-toggle-burger::after {
-  top: 0;
-  transform: rotate(-45deg);
-}
+#nav-toggle:checked ~ #nav-bar #nav-toggle-burger { background: transparent; }
+#nav-toggle:checked ~ #nav-bar #nav-toggle-burger::before { top: 0; transform: rotate(45deg); }
+#nav-toggle:checked ~ #nav-bar #nav-toggle-burger::after { top: 0; transform: rotate(-45deg); }
 
 #nav-content {
   flex: 1;
@@ -275,32 +324,37 @@ label[for="nav-toggle"] {
   position: relative;
 }
 
-#nav-content-highlight {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  background: var(--kt-accent, #DFE104);
-  border: none;
-  border-radius: 0;
-  transition: top 0.2s ease-in-out;
-  z-index: 0;
-  will-change: top;
-}
-
+/* 导航项容器：定位基准 */
 .nav-items-container {
   position: absolute;
-  top: 10%;
+  top: 10%; /* 保持原有的垂直位置 */
   height: 80%;
   width: 100%;
   left: 0;
   display: flex;
   flex-direction: column;
+  /* 确保按钮均匀分布 */
+  justify-content: space-between; 
+}
+
+/* 高亮条：绝对定位 */
+#nav-content-highlight {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  background: var(--kt-accent, #DFE104);
+  border: none;
+  border-radius: 0;
+  /* 添加 transition 使 JS 位置变化也有动画效果 */
+  transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s ease;
+  z-index: 0; /* 位于按钮下方 */
+  pointer-events: none;
 }
 
 .nav-button {
   position: relative;
   margin-left: var(--cq-navbar-spacing, 1.5cqw);
-  flex: 1;
+  flex: 1; /* 确保每个按钮占据相同的高度空间 */
   display: flex;
   align-items: center;
   font-family: var(--kt-font, 'Space Grotesk', sans-serif);
@@ -309,7 +363,7 @@ label[for="nav-toggle"] {
   letter-spacing: -0.02em;
   color: var(--kt-fg, #FAFAFA);
   cursor: pointer;
-  z-index: 1;
+  z-index: 1; /* 位于高亮条上方 */
   transition: all var(--kt-transition-micro, 200ms ease-in-out);
   padding-left: 0;
   overflow: hidden;
@@ -326,7 +380,6 @@ label[for="nav-toggle"] {
   font-weight: 700;
 }
 
-/* Icon styling */
 .nav-button i {
   min-width: 4cqw;
   text-align: center;
@@ -341,12 +394,11 @@ label[for="nav-toggle"] {
   transition-delay: v-bind("isExpanded ? '0.15s' : '0s'");
   white-space: nowrap;
   z-index: 2;
-  font-size: 1.25rem; 
-  font-weight: 700;
+  font-size: var(--cq-font-base, 1rem);
   will-change: opacity;
 }
 
-/* === 2. 外部按钮 - Kinetic Typography Style (Requirement 3.2) === */
+/* === 2. 外部按钮 === */
 .external-actions {
   pointer-events: auto;
   position: fixed;
@@ -388,24 +440,10 @@ label[for="nav-toggle"] {
 }
 
 .kt-btn--circle {
-  width: max(4.8cqw, 48px);
-  height: max(4.8cqw, 48px);
+  width: var(--cq-navbar-button-size, 3.5cqw);
+  height: var(--cq-navbar-button-size, 3.5cqw);
   border-radius: 0;
   padding: 0;
-  font-size: clamp(1.25rem, 2.5cqw, 2.5rem); 
-  
-  /* 确保图标能够随鼠标悬停效果一起变化 */
-  transition: all var(--kt-transition-micro, 200ms ease-in-out);
-}
-
-.kt-btn--circle i {
-  /* 强制图标居中 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
 }
 
 .kt-btn--accent {
@@ -448,8 +486,7 @@ label[for="nav-toggle"] {
   font-size: var(--cq-font-sm, 0.875rem);
 }
 
-/* ===  - 顶部导航栏模式 (宽 < 900px) === */
-/* Requirements: 2.5 - Mobile layout with hidden hamburger and horizontal navigation */
+/* === 移动端适配 (宽 < 900px) === */
 @media (max-width: 900px) {
   #navbar-container {
     width: 100% !important;
@@ -477,21 +514,12 @@ label[for="nav-toggle"] {
     box-shadow: none;
   }
 
-  #nav-header {
-    display: none;
-  }
-
-  label[for="nav-toggle"] {
-    display: none !important;
-  }
-
-  #nav-toggle-burger {
-    display: none !important;
-  }
-
-  #nav-content-highlight {
-    display: none;
-  }
+  #nav-header { display: none; }
+  label[for="nav-toggle"] { display: none !important; }
+  #nav-toggle-burger { display: none !important; }
+  
+  /* 移动端不显示高亮条，使用样式激活 */
+  #nav-content-highlight { display: none; }
 
   #nav-content {
     display: flex;
@@ -509,6 +537,7 @@ label[for="nav-toggle"] {
     flex-direction: row;
     gap: var(--cq-navbar-spacing, 1.5cqw);
     align-items: center;
+    justify-content: center;
   }
 
   .nav-button {
@@ -523,9 +552,7 @@ label[for="nav-toggle"] {
     border: var(--kt-border-width, 2px) solid transparent;
   }
 
-  .nav-button span {
-    display: none !important;
-  }
+  .nav-button span { display: none !important; }
 
   .nav-button i {
     min-width: auto;
@@ -566,15 +593,8 @@ label[for="nav-toggle"] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .nav-button,
-  .kt-btn {
-    transition: none;
-  }
-  
-  .nav-button:hover,
-  .kt-btn:hover {
-    transform: none;
-  }
+  .nav-button, .kt-btn { transition: none; }
+  .nav-button:hover, .kt-btn:hover { transform: none; }
 }
 
 .nav-button:focus-visible {
@@ -592,4 +612,4 @@ label[for="nav-toggle"] {
 .kt-btn:focus:not(:focus-visible) {
   outline: none;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/TaskSideBar.vue b/src/frontend/src/components/TaskSideBar.vue
index 1d539be..afa5e7e 100644
--- a/src/frontend/src/components/TaskSideBar.vue
+++ b/src/frontend/src/components/TaskSideBar.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="kt-sidebar-card">
+  <!-- 添加 @click 事件和 title 提示 -->
+  <div class="kt-sidebar-card" @click="goToHistory" title="点击查看完整任务历史">
     <div class="kt-sidebar-header">
       <h3 class="kt-sidebar-title">任务队列</h3>
       <div class="kt-monitor-dot" :class="{ active: isLoading }"></div>
@@ -18,6 +19,11 @@
         </div>
         
         <div class="kt-task-desc">{{ task.name }}</div>
+        
+        <!-- 提交时间显示 -->
+        <div class="kt-task-time">
+          <i class="far fa-clock"></i> {{ formatTime(task.createdAt) }}
+        </div>
 
         <div v-if="task.status === 'processing' || task.status === 'running'" class="kt-progress-container">
           <div class="kt-progress-bar infinite"></div>
@@ -36,10 +42,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue' 
 import { useTaskStore } from '@/stores/taskStore'
+import { useRouter } from 'vue-router'
 
 const store = useTaskStore()
+const router = useRouter()
+
+const navigateToSection = inject('navigateToSection')
 
 const displayTasks = computed(() => store.sidebarTasks)
 const remainingSlots = computed(() => store.quota.remaining_tasks)
@@ -52,13 +62,37 @@ const formatStatusLabel = (status) => {
     'processing': '处理中',
     'running': '处理中',
     'completed': '已完成',
-    'failed': '失败'
+    'failed': '失败',
+    'cancelled': '已取消' 
   }
   return map[status] || status
 }
+
+// 时间格式化函数
+const formatTime = (isoString) => {
+  if (!isoString) return '--'
+  const date = new Date(isoString)
+  return date.toLocaleString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  })
+}
+
+const goToHistory = () => {
+  if (navigateToSection) {
+    navigateToSection('page4')
+  } else {
+    router.push('/page4')
+  }
+}
 </script>
 
 <style scoped>
+/* ===== Kinetic Typography Task Sidebar ===== */
+
 .kt-sidebar-card {
   height: 100%;
   display: flex;
@@ -67,9 +101,15 @@ const formatStatusLabel = (status) => {
   border: var(--kt-border-width) solid var(--kt-border);
   border-radius: var(--kt-radius);
   padding: 2.4cqw;
-  transition: 
-    background-color 300ms ease-in-out,
-    border-color 300ms ease-in-out;
+  transition: all 0.2s ease-in-out; 
+  cursor: pointer;
+  position: relative;
+}
+
+.kt-sidebar-card:hover {
+  border-color: var(--kt-accent);
+  box-shadow: 0 0 20px rgba(223, 225, 4, 0.1);
+  transform: translateY(-2px);
 }
 
 .kt-sidebar-header {
@@ -89,6 +129,11 @@ const formatStatusLabel = (status) => {
   color: var(--kt-fg);
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  transition: color 0.2s;
+}
+
+.kt-sidebar-card:hover .kt-sidebar-title {
+  color: var(--kt-accent);
 }
 
 .kt-monitor-dot {
@@ -145,7 +190,6 @@ const formatStatusLabel = (status) => {
 
 .kt-task-item:hover {
   background: var(--kt-bg);
-  border-color: var(--kt-accent);
 }
 
 .kt-task-header {
@@ -172,7 +216,19 @@ const formatStatusLabel = (status) => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 0.4cqw;
+}
+
+/* 时间样式 */
+.kt-task-time {
+  font-family: var(--kt-font);
+  font-size: clamp(0.5rem, 0.65cqw, 0.75rem);
+  color: var(--kt-muted-fg);
+  opacity: 0.8;
   margin-bottom: 0.8cqw;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
 }
 
 .kt-status-tag {
@@ -186,7 +242,7 @@ const formatStatusLabel = (status) => {
   font-weight: 600;
 }
 
-/* Status colors - KT palette */
+/* Status colors */
 .kt-status-tag.running, 
 .kt-status-tag.processing { 
   color: var(--kt-accent); 
@@ -213,6 +269,14 @@ const formatStatusLabel = (status) => {
   border-color: #ef4444;
 }
 
+/* Cancelled 状态样式 (灰色/中性色) */
+.kt-status-tag.cancelled {
+  color: var(--kt-muted-fg);
+  background: transparent;
+  border-color: var(--kt-muted-fg);
+  text-decoration: line-through;
+}
+
 .kt-progress-container {
   height: 0.4cqw;
   min-height: 4px;
@@ -270,7 +334,8 @@ const formatStatusLabel = (status) => {
   .kt-task-desc, 
   .kt-progress-container, 
   .kt-task-footer,
-  .kt-monitor-dot {
+  .kt-monitor-dot,
+  .kt-task-time { /* 移动端空间有限，可以隐藏时间或调整 */
     display: none;
   }
 
@@ -308,19 +373,9 @@ const formatStatusLabel = (status) => {
   }
 }
 
-/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .kt-monitor-dot.active {
-    animation: none;
-  }
-  
-  .kt-progress-bar.infinite {
-    animation: none;
-    width: 100%;
-  }
-  
-  .kt-task-item {
-    transition: none;
-  }
+  .kt-monitor-dot.active { animation: none; }
+  .kt-progress-bar.infinite { animation: none; width: 100%; }
+  .kt-task-item { transition: none; }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/ThreeDTrajectoryModal.vue b/src/frontend/src/components/ThreeDTrajectoryModal.vue
index 8c06e52..ee04a31 100644
--- a/src/frontend/src/components/ThreeDTrajectoryModal.vue
+++ b/src/frontend/src/components/ThreeDTrajectoryModal.vue
@@ -18,7 +18,7 @@
               <!-- 图例 -->
               <div class="kt-3d-legend">
                 <span class="kt-3d-dot raw"></span> 原图 (Ref)
-                <span class="kt-3d-dot smooth"></span> 训练 (Train)
+                <span class="kt-3d-dot smooth"></span> 防护 (Perturb)
               </div>
               <button class="kt-3d-close-btn" @click="close">
                 <i class="fas fa-times"></i>
@@ -71,6 +71,7 @@ const loading = ref(false)
 const error = ref(null)
 
 let scene, camera, renderer, controls, animationId
+let resizeHandler = null // [Bug 7 Fix]
 
 const TARGET_SIZE = 40 
 let globalBounds = { 
@@ -79,9 +80,6 @@ let globalBounds = {
   minZ: Infinity, maxZ: -Infinity 
 }
 
-// ==========================================
-// 1. 数据预处理算法 (Log + Smooth)
-// ==========================================
 const parseAndLogTransform = (d) => {
   const rawX = parseFloat(d.X_Feature_L2_Norm ?? d.X_LoRA_Weight_Norm ?? 0)
   const rawY = parseFloat(d.Y_Feature_Variance ?? d.Y_Grad_Norm ?? 0)
@@ -168,9 +166,6 @@ const initVisualization = async () => {
   }
 }
 
-// ==========================================
-// 2. 辅助函数：创建实体坐标轴与标签
-// ==========================================
 const createAxisLabel = (text, color, position) => {
   const canvas = document.createElement('canvas')
   const size = 128
@@ -220,9 +215,6 @@ const createThickAxis = (color, endPoint) => {
   return axisGroup
 }
 
-// ==========================================
-// 3. Three.js 渲染 (Fat Lines)
-// ==========================================
 const initThreeJS = (mainPointsData, rawPointsData) => {
   disposeThree()
   if (!canvasContainer.value) return
@@ -328,6 +320,17 @@ const initThreeJS = (mainPointsData, rawPointsData) => {
   drawFatTrajectory(rawPointsData, '#666666', '#aaaaaa')
   drawFatTrajectory(mainPointsData, '#18283b', '#FF9F1C')
 
+  // 监听
+  resizeHandler = () => {
+    if (!canvasContainer.value || !camera || !renderer) return
+    const w = canvasContainer.value.clientWidth
+    const h = canvasContainer.value.clientHeight
+    camera.aspect = w / h
+    camera.updateProjectionMatrix()
+    renderer.setSize(w, h)
+  }
+  window.addEventListener('resize', resizeHandler)
+
   animate()
 }
 
@@ -338,6 +341,12 @@ const animate = () => {
 }
 
 const disposeThree = () => {
+  // Remove resize listener
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler)
+    resizeHandler = null
+  }
+  
   if (animationId) cancelAnimationFrame(animationId)
   if (scene) {
     scene.traverse((obj) => {
@@ -371,55 +380,68 @@ onUnmounted(() => disposeThree())
 
 <style scoped>
 .kt-3d-overlay {
-  position: fixed; inset: 0;
-  background: rgba(0, 0, 0, 0.6); 
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(0.5cqw);
-  z-index: 2200; 
-  display: flex; justify-content: center; align-items: center;
+  z-index: 2200;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .kt-3d-card {
-  width: 80cqw; height: 80cqh; max-width: 100cqw;
-  background: var(--kt-bg); 
+  width: 80cqw;
+  height: 80cqh;
+  max-width: 100cqw;
+  background: var(--kt-bg);
   border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  display: flex; flex-direction: column; 
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
 .kt-3d-header {
-  padding: 1.5cqw 2.5cqw; 
+  padding: 1.5cqw 2.5cqw;
   border-bottom: 2px solid var(--kt-border);
-  display: flex; justify-content: space-between; align-items: center;
-  background: var(--kt-bg); 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--kt-bg);
   z-index: 10;
 }
 
-.kt-3d-header-info h3 { 
-  margin: 0; 
+.kt-3d-header-info h3 {
+  margin: 0;
   font-family: var(--kt-font);
   font-weight: 700;
-  font-size: var(--cq-font-lg); 
-  color: var(--kt-fg); 
+  font-size: var(--cq-font-lg);
+  color: var(--kt-fg);
   text-transform: uppercase;
   letter-spacing: -0.02em;
 }
 
-.kt-3d-subtitle { 
+.kt-3d-subtitle {
   font-family: var(--kt-font);
-  font-size: var(--cq-font-xs); 
-  color: var(--kt-fg); 
-  margin: 0.4cqw 0 0; 
-  font-weight: 600; 
+  font-size: var(--cq-font-xs);
+  color: var(--kt-fg);
+  margin: 0.4cqw 0 0;
+  font-weight: 600;
 }
 
-.kt-3d-header-controls { display: flex; align-items: center; gap: 2cqw; }
+.kt-3d-header-controls {
+  display: flex;
+  align-items: center;
+  gap: 2cqw;
+}
 
-.kt-3d-legend { 
-  display: flex; gap: 1.5cqw; 
+.kt-3d-legend {
+  display: flex;
+  gap: 1.5cqw;
   font-family: var(--kt-font);
-  font-size: var(--cq-font-xs); 
-  color: var(--kt-fg); 
+  font-size: var(--cq-font-xs);
+  color: var(--kt-fg);
   align-items: center;
   background: var(--kt-muted);
   padding: 0.5cqw 1cqw;
@@ -427,76 +449,116 @@ onUnmounted(() => disposeThree())
   border: 1px solid var(--kt-border);
 }
 
-.kt-3d-dot { 
-  width: 1cqw; height: 1cqw; 
-  border-radius: 50%; 
-  display: inline-block; 
+.kt-3d-dot {
+  width: 1cqw;
+  height: 1cqw;
+  border-radius: 50%;
+  display: inline-block;
   margin-right: 0.6cqw;
   border: 1px solid var(--kt-border);
 }
-.kt-3d-dot.raw { background: #aaaaaa; }
-.kt-3d-dot.smooth { background: linear-gradient(90deg, #18283b, #FF9F1C); }
 
-.kt-3d-close-btn { 
-  background: var(--kt-bg); 
-  border: 2px solid var(--kt-border); 
+.kt-3d-dot.raw {
+  background: #aaaaaa;
+}
+
+.kt-3d-dot.smooth {
+  background: linear-gradient(90deg, #18283b, #FF9F1C);
+}
+
+.kt-3d-close-btn {
+  background: var(--kt-bg);
+  border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
-  font-size: var(--cq-font-xl); 
-  cursor: pointer; 
-  color: var(--kt-fg); 
+  font-size: var(--cq-font-xl);
+  cursor: pointer;
+  color: var(--kt-fg);
   padding: 0.4cqw 0.8cqw;
   transition: all var(--kt-transition-micro);
 }
 
-.kt-3d-close-btn:hover { 
-  background: var(--kt-accent); 
+.kt-3d-close-btn:hover {
+  background: var(--kt-accent);
   color: var(--kt-accent-fg);
   border-color: var(--kt-accent);
 }
 
-.kt-3d-canvas-container { 
-  flex: 1; position: relative; 
-  width: 100%; height: 100%; 
+.kt-3d-canvas-container {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
   background: var(--kt-bg);
-  overflow: hidden; 
+  overflow: hidden;
 }
 
 .kt-3d-state-box {
-  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-  text-align: center; 
-  color: var(--kt-fg); 
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: var(--kt-fg);
   font-family: var(--kt-font);
   pointer-events: none;
 }
-.kt-3d-state-box i { margin-bottom: 1cqw; color: var(--kt-accent); }
-.kt-3d-state-box.error { color: var(--kt-accent); }
-.kt-3d-state-box.error i { color: var(--kt-accent); }
+
+.kt-3d-state-box i {
+  margin-bottom: 1cqw;
+  color: var(--kt-accent);
+}
+
+.kt-3d-state-box.error {
+  color: var(--kt-accent);
+}
+
+.kt-3d-state-box.error i {
+  color: var(--kt-accent);
+}
 
 .kt-3d-axis-labels {
-  position: absolute; bottom: 2cqw; left: 2cqw;
-  background: var(--kt-bg); 
+  position: absolute;
+  bottom: 2cqw;
+  left: 2cqw;
+  background: var(--kt-bg);
   padding: 1.2cqw;
-  border-radius: var(--kt-radius); 
+  border-radius: var(--kt-radius);
   font-family: var(--kt-font);
-  font-size: var(--cq-font-xs); 
+  font-size: var(--cq-font-xs);
   pointer-events: none;
-  border: 2px solid var(--kt-border); 
+  border: 2px solid var(--kt-border);
 }
 
-.kt-3d-axis-label { margin-bottom: 0.4cqw; font-weight: bold; }
-.kt-3d-axis-label:last-child { margin-bottom: 0; }
-.z-axis { color: #3366ff; }
-.y-axis { color: #00cc00; }
-.x-axis { color: #ff3333; }
+.kt-3d-axis-label {
+  margin-bottom: 0.4cqw;
+  font-weight: bold;
+}
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
+.kt-3d-axis-label:last-child {
+  margin-bottom: 0;
+}
+
+.z-axis {
+  color: #3366ff;
+}
+
+.y-axis {
+  color: #00cc00;
+}
 
-/* 
-   ===========================================
-   深色模式适配 (Dark Mode)
-   ===========================================
-*/
+.x-axis {
+  color: #ff3333;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 
 html.dark-mode .kt-3d-card {
   background: var(--kt-bg);
@@ -549,4 +611,4 @@ html.dark-mode .kt-3d-axis-labels {
   background: var(--kt-bg);
   border-color: var(--kt-border);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/stores/taskStore.js b/src/frontend/src/stores/taskStore.js
index affb10a..ffa05fe 100644
--- a/src/frontend/src/stores/taskStore.js
+++ b/src/frontend/src/stores/taskStore.js
@@ -1,5 +1,3 @@
-//负责调用 API，存储任务列表，并执行 5 秒一次的轮询。
-
 import { defineStore } from 'pinia'
 import { getTaskList, getTaskQuota } from '@/api/task'
 
@@ -16,7 +14,7 @@ export const useTaskStore = defineStore('task', {
   }),
 
   actions: {
-    // === 核心：启动轮询 ===
+    // === 启动轮询 ===
     async startPolling() {
       if (this.timer) return
       
@@ -72,38 +70,50 @@ export const useTaskStore = defineStore('task', {
   getters: {
     // === 适配 Sidebar 的数据格式 ===
     sidebarTasks: (state) => {
-      // 只取前 10 条展示在侧边栏
-      return state.tasks.slice(0, 10).map(t => {
+      // 1.先按主键 ID 升序排列，生成全局的 virtual_id
+      const allTasksWithVid = [...state.tasks]
+        .sort((a, b) => a.task_id - b.task_id)
+        .map((t, index) => ({
+          ...t,
+          virtual_id: index + 1 // 从1开始
+        }));
+
+      // 2.重新按创建时间倒序排列，以展示最新任务
+      const sortedForSidebar = allTasksWithVid.sort((a, b) => 
+        new Date(b.created_at) - new Date(a.created_at)
+      );
+
+      // 3. 只取前 10 条展示在侧边栏
+      return sortedForSidebar.slice(0, 10).map(t => {
         
         //获取任务名称
         let name = `Task #${t.task_id}` // 默认值
         
-        // 优先级 A: 用户填写的 description (通用/快速/专题防护的用户输入都存在这里)
+        // 优先级 A: 用户填写的 description
         if (t.description && t.description.trim() !== '') {
            name = t.description
         } 
-        // 优先级 B: 微调/评估/热力图的特定名称字段 (如果 description 为空)
+        // 优先级 B: 算法特定名称
         else if (t.task_type === 'finetune' && t.finetune?.finetune_name) {
           name = t.finetune.finetune_name
         } else if (t.task_type === 'evaluate' && t.evaluate?.evaluate_name) { 
           name = t.evaluate.evaluate_name
         } else if (t.task_type === 'heatmap' && t.heatmap?.heatmap_name) { 
           name = t.heatmap.heatmap_name
-        } 
-        // 优先级 C: 系统自动生成的算法名 (作为最后兜底)
-        else if (t.task_type === 'perturbation' && t.perturbation?.perturbation_name) {
+        } else if (t.task_type === 'perturbation' && t.perturbation?.perturbation_name) {
           name = t.perturbation.perturbation_name
         }
         
-        // 2. 状态映射 (数据库状态 -> 前端样式类名)
+        // 状态映射
         let status = t.status
         if (status === 'pending') status = 'waiting' 
         
-        // 3. 进度条逻辑
+        // 进度条逻辑
         const progress = status === 'completed' ? 100 : (status === 'processing' ? 50 : 0)
 
         return {
-          id: t.task_id,
+          id: t.virtual_id, 
+          original_id: t.task_id, // 保留原始ID
           status: status, 
           progress: progress,
           name: name, 
diff --git a/src/frontend/src/utils/constants.js b/src/frontend/src/utils/constants.js
index 2d984e6..69aa2e7 100644
--- a/src/frontend/src/utils/constants.js
+++ b/src/frontend/src/utils/constants.js
@@ -60,14 +60,14 @@ export const TOPIC_CONFIG = {
   // 防人脸编辑 -> ID 8
   FACE_EDIT: {
     ALGO_ID: ALGO_MAP.ANTI_FACE_EDIT, 
-    INTENSITY: 0.05,
+    INTENSITY: 12,
     DATA_TYPE_ID: DATA_TYPE_MAP.FACE,
     ALGO_NAME: 'Anti-Face-Editing'
   },
   // 防定制生成 -> ID 7
   CUSTOM_GEN: {
     ALGO_ID: ALGO_MAP.ANTI_CUSTOMIZE,
-    INTENSITY: 0.05,
+    INTENSITY: 12,
     DATA_TYPE_ID: DATA_TYPE_MAP.FACE,
     ALGO_NAME: 'Anti-Customization'
   }
diff --git a/src/frontend/src/utils/multipartParser.js b/src/frontend/src/utils/multipartParser.js
index 870fba9..7eed1c1 100644
--- a/src/frontend/src/utils/multipartParser.js
+++ b/src/frontend/src/utils/multipartParser.js
@@ -4,7 +4,7 @@
  * 解析 Multipart/Mixed 响应流
  * @param {ArrayBuffer} buffer - 原始二进制数据
  * @param {string} boundary - 分隔符
- * @returns {Object} - 解析后的图片对象，结构适配前端组件
+ * @returns {Object} - 解析后的图片对象
  */
 export function parseMultipartMixed(buffer, boundary) {
   const decoder = new TextDecoder('utf-8')
@@ -21,7 +21,6 @@ export function parseMultipartMixed(buffer, boundary) {
     }
   }
 
-  // 简单的二进制搜索实现 (也可以使用更高效的算法，但对于图片预览够用了)
   const uint8Array = new Uint8Array(buffer)
   const parts = []
   let lastIndex = 0
@@ -31,12 +30,10 @@ export function parseMultipartMixed(buffer, boundary) {
     const index = findSequence(uint8Array, boundaryBytes, lastIndex)
     if (index === -1) break
     
-    // 如果不是第一次找到，说明 lastIndex 到 index 之间是一个完整的 part
     if (lastIndex > 0) {
       // 去掉末尾的 CRLF (\r\n)
       parts.push(uint8Array.slice(lastIndex, index - 2)) 
     }
-    // 跳过 Boundary + CRLF
     lastIndex = index + boundaryBytes.length + 2
   }
 
@@ -57,21 +54,36 @@ export function parseMultipartMixed(buffer, boundary) {
       const imageType = headers['x-image-type'] || 'unknown'
       const imageId = headers['x-image-id']
       const contentType = headers['content-type'] || 'image/png'
+      
+      // 提取文件名 (Content-Disposition: attachment; filename="example.jpg")
+      let filename = `image_${imageId || Date.now()}.png`
+      const disposition = headers['content-disposition']
+      if (disposition) {
+        // 简单正则提取 filename，兼容带引号和不带引号
+        const match = disposition.match(/filename="?([^";]+)"?/)
+        if (match && match[1]) {
+          filename = match[1]
+        }
+      }
 
-      // 生成 Blob URL
+      // 生成 Blob 和 URL
       const blob = new Blob([bodyBytes], { type: contentType })
       const url = URL.createObjectURL(blob)
 
       // 构造组件需要的数据结构
       const imgObj = {
         image_id: imageId,
-        data: url, // 组件直接使用 src="img.data"
-        blob: blob // 保留 blob 对象用于后续下载或销毁
+        data: url, // Blob URL，组件直接使用 src="img.data"
+        blob: blob, // 原始 Blob 对象，用于下载打包
+        filename: filename // 文件名
       }
 
       // 归类
       if (result.images[imageType]) {
         result.images[imageType].push(imgObj)
+      } else {
+        // 如果是未定义的类型，也可以放入一个通用数组，这里暂且忽略或按需处理
+        // console.warn('Unknown image type:', imageType)
       }
     }
   })
@@ -79,7 +91,7 @@ export function parseMultipartMixed(buffer, boundary) {
   return result
 }
 
-// 辅助：在 Uint8Array 中查找序列
+// 在 Uint8Array 中查找序列
 function findSequence(data, sequence, fromIndex) {
   for (let i = fromIndex; i < data.length - sequence.length + 1; i++) {
     let found = true
@@ -94,13 +106,16 @@ function findSequence(data, sequence, fromIndex) {
   return -1
 }
 
-// 辅助：解析 Header 字符串
+// 解析 Header 字符串
 function parseHeaders(headerText) {
   const headers = {}
   headerText.split('\r\n').forEach(line => {
-    const [key, ...values] = line.split(':')
-    if (key && values) {
-      headers[key.trim().toLowerCase()] = values.join(':').trim()
+    const parts = line.split(':')
+    if (parts.length >= 2) {
+      const key = parts[0].trim().toLowerCase()
+      // 值可能包含冒号（如时间），需要重新拼接后续部分
+      const value = parts.slice(1).join(':').trim()
+      headers[key] = value
     }
   })
   return headers
diff --git a/src/frontend/src/utils/navbarHighlight.js b/src/frontend/src/utils/navbarHighlight.js
index 8996187..cb8c1b4 100644
--- a/src/frontend/src/utils/navbarHighlight.js
+++ b/src/frontend/src/utils/navbarHighlight.js
@@ -60,6 +60,7 @@ export function calculateHighlightHeight(navItemsCount) {
 export function isHighlightWithinBounds(highlightTop, highlightHeight) {
   const minTop = 10
   const maxBottom = 90
+  const epsilon = 0.0001 // 浮点数精度容差
   
-  return highlightTop >= minTop && (highlightTop + highlightHeight) <= maxBottom
+  return highlightTop >= minTop - epsilon && (highlightTop + highlightHeight) <= maxBottom + epsilon
 }
diff --git a/src/frontend/src/utils/navbarHighlight.test.js b/src/frontend/src/utils/navbarHighlight.test.js
deleted file mode 100644
index 42cce84..0000000
--- a/src/frontend/src/utils/navbarHighlight.test.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * Property-Based Tests for Navbar Highlight Position Calculation
- * 
- * Feature: ui-consistency-fix
- * Tests: Property 7 from design document
- * 
- * Requirements: 2.6
- */
-import { describe, it, expect } from 'vitest'
-import * as fc from 'fast-check'
-import {
-  calculateItemHeightPercent,
-  calculateHighlightTop,
-  calculateHighlightHeight,
-  isHighlightWithinBounds
-} from './navbarHighlight'
-
-describe('Navbar Highlight Position Property Tests', () => {
-  /**
-   * Property 7: 导航栏高亮位置计算
-   * Feature: ui-consistency-fix, Property 7: 导航栏高亮位置计算
-   * 
-   * *对于任意*活动索引（0-4），高亮指示器的 top 位置应等于 `10 + (activeIndex * (80 / navItems.length))%`。
-   * 
-   * **Validates: Requirements 2.6**
-   */
-  describe('Property 7: Navbar Highlight Position Calculation', () => {
-    it('should calculate correct top position for any valid activeIndex', () => {
-      fc.assert(
-        fc.property(
-          // Generate navItemsCount between 1 and 10
-          fc.integer({ min: 1, max: 10 }),
-          (navItemsCount) => {
-            // Test all valid indices for this navItemsCount
-            for (let activeIndex = 0; activeIndex < navItemsCount; activeIndex++) {
-              const highlightTop = calculateHighlightTop(activeIndex, navItemsCount)
-              const expectedTop = 10 + (activeIndex * (80 / navItemsCount))
-              
-              // Allow for floating point precision
-              expect(Math.abs(highlightTop - expectedTop)).toBeLessThan(0.0001)
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should calculate correct top position for standard 5-item navbar', () => {
-      const navItemsCount = 5
-      const itemHeightPercent = 80 / navItemsCount // 16%
-      
-      // Test each index (0-4)
-      for (let activeIndex = 0; activeIndex < navItemsCount; activeIndex++) {
-        const highlightTop = calculateHighlightTop(activeIndex, navItemsCount)
-        const expectedTop = 10 + (activeIndex * itemHeightPercent)
-        
-        expect(highlightTop).toBe(expectedTop)
-      }
-      
-      // Verify specific values
-      expect(calculateHighlightTop(0, 5)).toBe(10)   // 10 + 0*16 = 10
-      expect(calculateHighlightTop(1, 5)).toBe(26)   // 10 + 1*16 = 26
-      expect(calculateHighlightTop(2, 5)).toBe(42)   // 10 + 2*16 = 42
-      expect(calculateHighlightTop(3, 5)).toBe(58)   // 10 + 3*16 = 58
-      expect(calculateHighlightTop(4, 5)).toBe(74)   // 10 + 4*16 = 74
-    })
-
-    it('should keep highlight within 10%-90% bounds for any valid configuration', () => {
-      fc.assert(
-        fc.property(
-          // Generate navItemsCount between 1 and 10
-          fc.integer({ min: 1, max: 10 }),
-          (navItemsCount) => {
-            const highlightHeight = calculateHighlightHeight(navItemsCount)
-            
-            // Test all valid indices
-            for (let activeIndex = 0; activeIndex < navItemsCount; activeIndex++) {
-              const highlightTop = calculateHighlightTop(activeIndex, navItemsCount)
-              
-              // Highlight should start at or after 10%
-              expect(highlightTop).toBeGreaterThanOrEqual(10)
-              
-              // Highlight should end at or before 90%
-              expect(highlightTop + highlightHeight).toBeLessThanOrEqual(90.0001) // Allow for floating point
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should calculate item height as 80 / navItemsCount', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 1, max: 10 }),
-          (navItemsCount) => {
-            const itemHeight = calculateItemHeightPercent(navItemsCount)
-            const expectedHeight = 80 / navItemsCount
-            
-            expect(Math.abs(itemHeight - expectedHeight)).toBeLessThan(0.0001)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should have highlight height equal to item height', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 1, max: 10 }),
-          (navItemsCount) => {
-            const itemHeight = calculateItemHeightPercent(navItemsCount)
-            const highlightHeight = calculateHighlightHeight(navItemsCount)
-            
-            expect(highlightHeight).toBe(itemHeight)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should have consecutive highlights be exactly itemHeight apart', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 2, max: 10 }),
-          (navItemsCount) => {
-            const itemHeight = calculateItemHeightPercent(navItemsCount)
-            
-            // Check that consecutive items are exactly itemHeight apart
-            for (let i = 0; i < navItemsCount - 1; i++) {
-              const currentTop = calculateHighlightTop(i, navItemsCount)
-              const nextTop = calculateHighlightTop(i + 1, navItemsCount)
-              
-              expect(Math.abs((nextTop - currentTop) - itemHeight)).toBeLessThan(0.0001)
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should validate bounds correctly', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 1, max: 10 }),
-          (navItemsCount) => {
-            const highlightHeight = calculateHighlightHeight(navItemsCount)
-            
-            for (let activeIndex = 0; activeIndex < navItemsCount; activeIndex++) {
-              const highlightTop = calculateHighlightTop(activeIndex, navItemsCount)
-              
-              expect(isHighlightWithinBounds(highlightTop, highlightHeight)).toBe(true)
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should throw error for invalid navItemsCount', () => {
-      expect(() => calculateHighlightTop(0, 0)).toThrow()
-      expect(() => calculateHighlightTop(0, -1)).toThrow()
-      expect(() => calculateItemHeightPercent(0)).toThrow()
-      expect(() => calculateItemHeightPercent(-1)).toThrow()
-    })
-
-    it('should throw error for invalid activeIndex', () => {
-      expect(() => calculateHighlightTop(-1, 5)).toThrow()
-      expect(() => calculateHighlightTop(5, 5)).toThrow()
-      expect(() => calculateHighlightTop(10, 5)).toThrow()
-    })
-  })
-})
diff --git a/src/frontend/src/utils/request.js b/src/frontend/src/utils/request.js
index 469cda8..fefb0eb 100644
--- a/src/frontend/src/utils/request.js
+++ b/src/frontend/src/utils/request.js
@@ -3,33 +3,25 @@ import router from '@/router'
 import { useUserStore } from '@/stores/userStore'
 import toast from '@/utils/toast'
 
-// 创建 axios 实例
 const service = axios.create({
-  baseURL: '/api', // 配合 vite 代理转发到后端
-  timeout: 30000,
+  baseURL: '/api',
+  // 超时时间2分钟，保证大图片上传
+  timeout: 120000,
   headers: {
     'Content-Type': 'application/json;charset=utf-8'
   }
 })
 
-// === 请求拦截器 ===
 service.interceptors.request.use(
   config => {
     const userStore = useUserStore()
-    
-    // 检查是否为认证接口(登录/注册)
-    // 如果是登录或注册，不要携带 Token，防止旧 Token 失效导致后端直接返回 401
     const isAuthRequest = config.url.includes('/auth/login') || config.url.includes('/auth/register')
-
     if (userStore.token && !isAuthRequest) {
       config.headers['Authorization'] = `Bearer ${userStore.token}`
     }
-    
-    // 如果是二进制流请求，处理特殊配置
     if (config.returnRawResponse) {
       config.responseType = 'arraybuffer'
     }
-    
     return config
   },
   error => {
@@ -104,6 +96,9 @@ service.interceptors.response.use(
           if (isLoginRequest) {
             // 登录接口 401 通常是账号密码错误
             message = '用户名或密码错误';
+          } else if (error.config && error.config._skipLogout) {
+            // 【核心修改】如果配置了跳过登出，则只更新错误消息，不执行登出和跳转
+            message = serverMsg || '权限验证失败';
           } else {
             message = '登录已过期，请重新登录';
             // 如果是非登录接口的 401，执行登出逻辑
@@ -116,6 +111,7 @@ service.interceptors.response.use(
           break;
         case 403: message = serverMsg || '拒绝访问 (权限不足)'; break;
         case 404: message = serverMsg || '资源不存在'; break;
+        case 413: message = '上传文件过大 (超过服务器限制)'; break;
         case 500: message = serverMsg || '服务器内部错误'; break;
         default: message = serverMsg || `请求错误 ${status}`;
       }
@@ -124,8 +120,10 @@ service.interceptors.response.use(
     }
 
     // 如果是登录接口报错，不再弹出 Toast (交由 LoginView 页面内显示错误文字)
-    // 如果是非登录接口的 401 (Token 过期)，通常伴随跳转，也不弹窗避免干扰
-    if (!isLoginRequest && error.response?.status !== 401) {
+    // 如果是非登录接口的 401 (且没有标记 _skipLogout)，通常伴随跳转，也不弹窗避免干扰
+    const shouldSuppressToast = isLoginRequest || (error.response?.status === 401 && !error.config?._skipLogout);
+    
+    if (!shouldSuppressToast) {
       toast.error(message) 
     }
 
diff --git a/src/frontend/src/utils/scrollNavigation.test.js b/src/frontend/src/utils/scrollNavigation.test.js
deleted file mode 100644
index cc6c8b5..0000000
--- a/src/frontend/src/utils/scrollNavigation.test.js
+++ /dev/null
@@ -1,435 +0,0 @@
-/**
- * Property-Based Tests for Scroll Navigation
- * 
- * Feature: ui-consistency-fix
- * Tests: Properties 1-4 from design document
- * 
- * Requirements: 1.1-1.5
- */
-import { describe, it, expect } from 'vitest'
-import * as fc from 'fast-check'
-import {
-  SCROLL_CONFIG,
-  shouldDebounce,
-  shouldLockInput,
-  checkScrollState,
-  shouldTriggerPageSwitch,
-  isAccumulatorOverThreshold,
-  getScrollDirection,
-  getPageSwitchDirection
-} from './scrollNavigation'
-
-describe('Scroll Navigation Property Tests', () => {
-  /**
-   * Property 1: 滚动导航防抖
-   * Feature: ui-consistency-fix, Property 1: 滚动导航防抖
-   * 
-   * *对于任意*当前时间和上次事件时间，如果时间差小于冷却期，则 shouldDebounce 应返回 true。
-   * 
-   * **Validates: Requirements 1.5**
-   */
-  describe('Property 1: Scroll Navigation Debounce', () => {
-    it('should return true when time difference is less than cooldown', () => {
-      fc.assert(
-        fc.property(
-          // Generate lastEventTime as a positive integer
-          fc.integer({ min: 0, max: 1000000 }),
-          // Generate timeDiff less than cooldown
-          fc.integer({ min: 0, max: SCROLL_CONFIG.WHEEL_COOLDOWN - 1 }),
-          // Generate cooldown value
-          fc.integer({ min: 1, max: 10000 }),
-          (lastEventTime, timeDiff, cooldown) => {
-            const currentTime = lastEventTime + timeDiff
-            // When time difference is less than cooldown, should debounce
-            if (timeDiff < cooldown) {
-              expect(shouldDebounce(currentTime, lastEventTime, cooldown)).toBe(true)
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should return false when time difference is greater than or equal to cooldown', () => {
-      fc.assert(
-        fc.property(
-          // Generate lastEventTime as a positive integer
-          fc.integer({ min: 0, max: 1000000 }),
-          // Generate timeDiff greater than or equal to cooldown
-          fc.integer({ min: 0, max: 10000 }),
-          (lastEventTime, cooldown) => {
-            // Ensure cooldown is at least 1
-            const safeCooldown = Math.max(1, cooldown)
-            const currentTime = lastEventTime + safeCooldown
-            // When time difference equals cooldown, should not debounce
-            expect(shouldDebounce(currentTime, lastEventTime, safeCooldown)).toBe(false)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly apply 500ms wheel cooldown', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: 1000000 }),
-          fc.integer({ min: 0, max: 1000 }),
-          (lastEventTime, timeDiff) => {
-            const currentTime = lastEventTime + timeDiff
-            const result = shouldDebounce(currentTime, lastEventTime, SCROLL_CONFIG.WHEEL_COOLDOWN)
-            expect(result).toBe(timeDiff < SCROLL_CONFIG.WHEEL_COOLDOWN)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly apply 600ms touch cooldown', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: 1000000 }),
-          fc.integer({ min: 0, max: 1200 }),
-          (lastEventTime, timeDiff) => {
-            const currentTime = lastEventTime + timeDiff
-            const result = shouldDebounce(currentTime, lastEventTime, SCROLL_CONFIG.TOUCH_COOLDOWN)
-            expect(result).toBe(timeDiff < SCROLL_CONFIG.TOUCH_COOLDOWN)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-
-
-  /**
-   * Property 2: 动画期间输入锁定
-   * Feature: ui-consistency-fix, Property 2: 动画期间输入锁定
-   * 
-   * *对于任意*动画状态，当 isAnimating 为 true 时，shouldLockInput 应返回 true，阻止新的页面切换。
-   * 
-   * **Validates: Requirements 1.3**
-   */
-  describe('Property 2: Animation Input Locking', () => {
-    it('should return true when isAnimating is true', () => {
-      expect(shouldLockInput(true)).toBe(true)
-    })
-
-    it('should return false when isAnimating is false', () => {
-      expect(shouldLockInput(false)).toBe(false)
-    })
-
-    it('should handle various truthy/falsy values correctly', () => {
-      fc.assert(
-        fc.property(
-          fc.boolean(),
-          (isAnimating) => {
-            const result = shouldLockInput(isAnimating)
-            // When isAnimating is true, should lock input
-            if (isAnimating === true) {
-              expect(result).toBe(true)
-            } else {
-              expect(result).toBe(false)
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should only return true for strict boolean true', () => {
-      // Test that only strict true returns true
-      expect(shouldLockInput(true)).toBe(true)
-      expect(shouldLockInput(false)).toBe(false)
-      expect(shouldLockInput(1)).toBe(false)
-      expect(shouldLockInput('true')).toBe(false)
-      expect(shouldLockInput(null)).toBe(false)
-      expect(shouldLockInput(undefined)).toBe(false)
-    })
-  })
-
-
-  /**
-   * Property 3: 边界滚动检测
-   * Feature: ui-consistency-fix, Property 3: 边界滚动检测
-   * 
-   * *对于任意*滚动信息（scrollTop、clientHeight、scrollHeight），checkScrollState 应正确计算 atTop 和 atBottom 状态，容差为 5px。
-   * 
-   * **Validates: Requirements 1.4**
-   */
-  describe('Property 3: Boundary Scroll Detection', () => {
-    it('should correctly detect atTop when scrollTop <= tolerance', () => {
-      fc.assert(
-        fc.property(
-          // scrollTop within tolerance (0 to 5)
-          fc.integer({ min: 0, max: 5 }),
-          fc.integer({ min: 100, max: 1000 }),
-          fc.integer({ min: 200, max: 2000 }),
-          (scrollTop, clientHeight, scrollHeight) => {
-            // Ensure scrollHeight > clientHeight for scrollable content
-            const safeScrollHeight = Math.max(scrollHeight, clientHeight + 10)
-            const scrollInfo = { scrollTop, clientHeight, scrollHeight: safeScrollHeight }
-            const state = checkScrollState(scrollInfo)
-            
-            expect(state.atTop).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly detect not atTop when scrollTop > tolerance', () => {
-      fc.assert(
-        fc.property(
-          // scrollTop greater than tolerance
-          fc.integer({ min: 6, max: 1000 }),
-          fc.integer({ min: 100, max: 1000 }),
-          fc.integer({ min: 200, max: 2000 }),
-          (scrollTop, clientHeight, scrollHeight) => {
-            // Ensure scrollHeight > clientHeight + scrollTop for valid scroll position
-            const safeScrollHeight = Math.max(scrollHeight, clientHeight + scrollTop + 10)
-            const scrollInfo = { scrollTop, clientHeight, scrollHeight: safeScrollHeight }
-            const state = checkScrollState(scrollInfo)
-            
-            expect(state.atTop).toBe(false)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly detect atBottom when at scroll end', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 100, max: 1000 }),
-          fc.integer({ min: 200, max: 2000 }),
-          (clientHeight, scrollHeight) => {
-            // Ensure scrollHeight > clientHeight for scrollable content
-            const safeScrollHeight = Math.max(scrollHeight, clientHeight + 100)
-            // Set scrollTop to be at the bottom (within tolerance)
-            const maxScroll = safeScrollHeight - clientHeight
-            const scrollTop = maxScroll
-            
-            const scrollInfo = { scrollTop, clientHeight, scrollHeight: safeScrollHeight }
-            const state = checkScrollState(scrollInfo)
-            
-            expect(state.atBottom).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly detect isScrollable', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: 500 }),
-          fc.integer({ min: 100, max: 500 }),
-          fc.integer({ min: 100, max: 1000 }),
-          (scrollTop, clientHeight, scrollHeight) => {
-            const scrollInfo = { scrollTop, clientHeight, scrollHeight }
-            const state = checkScrollState(scrollInfo)
-            const tolerance = SCROLL_CONFIG.BOUNDARY_TOLERANCE
-            
-            // isScrollable should be true when scrollHeight > clientHeight + tolerance
-            const expectedScrollable = scrollHeight > clientHeight + tolerance
-            expect(state.isScrollable).toBe(expectedScrollable)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should use 5px tolerance for boundary detection', () => {
-      // Test exact boundary cases with 5px tolerance
-      const clientHeight = 500
-      const scrollHeight = 1000
-      const maxScroll = scrollHeight - clientHeight // 500
-      
-      // At top with tolerance
-      expect(checkScrollState({ scrollTop: 0, clientHeight, scrollHeight }).atTop).toBe(true)
-      expect(checkScrollState({ scrollTop: 5, clientHeight, scrollHeight }).atTop).toBe(true)
-      expect(checkScrollState({ scrollTop: 6, clientHeight, scrollHeight }).atTop).toBe(false)
-      
-      // At bottom with tolerance
-      expect(checkScrollState({ scrollTop: maxScroll, clientHeight, scrollHeight }).atBottom).toBe(true)
-      expect(checkScrollState({ scrollTop: maxScroll - 5, clientHeight, scrollHeight }).atBottom).toBe(true)
-      expect(checkScrollState({ scrollTop: maxScroll - 6, clientHeight, scrollHeight }).atBottom).toBe(false)
-    })
-  })
-
-
-  /**
-   * Property 4: 页面切换触发条件
-   * Feature: ui-consistency-fix, Property 4: 页面切换触发条件
-   * 
-   * *对于任意*滚动状态和方向，shouldTriggerPageSwitch 应仅在以下条件下返回 true：
-   * - 页面不可滚动，或
-   * - 向下滚动且在底部，或
-   * - 向上滚动且在顶部
-   * 
-   * **Validates: Requirements 1.1, 1.2, 1.4**
-   */
-  describe('Property 4: Page Switch Trigger Conditions', () => {
-    it('should return true when page is not scrollable', () => {
-      fc.assert(
-        fc.property(
-          fc.boolean(),
-          fc.boolean(),
-          fc.constantFrom('up', 'down'),
-          (atTop, atBottom, direction) => {
-            const scrollState = {
-              isScrollable: false,
-              atTop,
-              atBottom
-            }
-            // When not scrollable, should always allow page switch
-            expect(shouldTriggerPageSwitch(scrollState, direction)).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should return true when scrolling down and at bottom', () => {
-      fc.assert(
-        fc.property(
-          fc.boolean(),
-          (atTop) => {
-            const scrollState = {
-              isScrollable: true,
-              atTop,
-              atBottom: true
-            }
-            expect(shouldTriggerPageSwitch(scrollState, 'down')).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should return true when scrolling up and at top', () => {
-      fc.assert(
-        fc.property(
-          fc.boolean(),
-          (atBottom) => {
-            const scrollState = {
-              isScrollable: true,
-              atTop: true,
-              atBottom
-            }
-            expect(shouldTriggerPageSwitch(scrollState, 'up')).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should return false when scrolling down but not at bottom', () => {
-      const scrollState = {
-        isScrollable: true,
-        atTop: true,
-        atBottom: false
-      }
-      expect(shouldTriggerPageSwitch(scrollState, 'down')).toBe(false)
-    })
-
-    it('should return false when scrolling up but not at top', () => {
-      const scrollState = {
-        isScrollable: true,
-        atTop: false,
-        atBottom: true
-      }
-      expect(shouldTriggerPageSwitch(scrollState, 'up')).toBe(false)
-    })
-
-    it('should return false when in middle of scrollable content', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom('up', 'down'),
-          (direction) => {
-            const scrollState = {
-              isScrollable: true,
-              atTop: false,
-              atBottom: false
-            }
-            // When in middle of content, should not trigger page switch
-            expect(shouldTriggerPageSwitch(scrollState, direction)).toBe(false)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly combine scroll state and direction', () => {
-      fc.assert(
-        fc.property(
-          fc.boolean(),
-          fc.boolean(),
-          fc.boolean(),
-          fc.constantFrom('up', 'down'),
-          (isScrollable, atTop, atBottom, direction) => {
-            const scrollState = { isScrollable, atTop, atBottom }
-            const result = shouldTriggerPageSwitch(scrollState, direction)
-            
-            // Verify the logic matches the specification
-            const expected = 
-              !isScrollable ||
-              (direction === 'down' && atBottom) ||
-              (direction === 'up' && atTop)
-            
-            expect(result).toBe(expected)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-
-
-  /**
-   * Additional helper function tests
-   */
-  describe('Helper Functions', () => {
-    it('getScrollDirection should return correct direction', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: -1000, max: 1000 }),
-          (deltaY) => {
-            if (deltaY === 0) return // Skip zero case
-            const direction = getScrollDirection(deltaY)
-            expect(direction).toBe(deltaY > 0 ? 'down' : 'up')
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('getPageSwitchDirection should return correct direction', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: -1000, max: 1000 }),
-          (accumulator) => {
-            if (accumulator === 0) return // Skip zero case
-            const direction = getPageSwitchDirection(accumulator)
-            expect(direction).toBe(accumulator > 0 ? 'next' : 'prev')
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('isAccumulatorOverThreshold should correctly compare values', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: -1000, max: 1000 }),
-          fc.integer({ min: 1, max: 500 }),
-          (accumulator, threshold) => {
-            const result = isAccumulatorOverThreshold(accumulator, threshold)
-            expect(result).toBe(Math.abs(accumulator) > threshold)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-})
diff --git a/src/frontend/src/utils/subpageStyles.test.js b/src/frontend/src/utils/subpageStyles.test.js
deleted file mode 100644
index 0da4fde..0000000
--- a/src/frontend/src/utils/subpageStyles.test.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * Property-Based Tests for Subpage Style Consistency
- * 
- * Feature: ui-consistency-fix
- * Requirements: 5.1-5.7
- * 
- * Tests that subpages use Kinetic Typography (--kt-*) variables
- * instead of hand-drawn style (--hd-*) variables.
- */
-import { describe, it, expect } from 'vitest'
-import * as fc from 'fast-check'
-import {
-  KT_VARIABLE_PREFIX,
-  HD_VARIABLE_PREFIX,
-  REQUIRED_KT_VARIABLES,
-  BILINGUAL_TITLE_STRUCTURE,
-  isKTVariable,
-  isHDVariable,
-  extractCSSVariables,
-  validateCSSVariables,
-  isValidBilingualTitle,
-  validateSubpageStyle
-} from './subpageStyles'
-
-describe('Subpage Style Consistency Tests', () => {
-  /**
-   * Requirements: 5.1 - Subpages should use --kt-* variables
-   */
-  describe('CSS Variable Prefix Detection', () => {
-    it('isKTVariable should return true for --kt-* prefixed variables', () => {
-      fc.assert(
-        fc.property(
-          fc.string({ minLength: 1, maxLength: 20 }).filter(s => /^[a-zA-Z0-9-]+$/.test(s)),
-          (suffix) => {
-            const variable = `${KT_VARIABLE_PREFIX}${suffix}`
-            expect(isKTVariable(variable)).toBe(true)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-    it('isKTVariable should return false for non-kt variables', () => {
-      fc.assert(
-        fc.property(
-          fc.string().filter(s => !s.startsWith(KT_VARIABLE_PREFIX)),
-          (variable) => {
-            expect(isKTVariable(variable)).toBe(false)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-
-    it('isHDVariable should return true for --hd-* prefixed variables', () => {
-      fc.assert(
-        fc.property(
-          fc.string({ minLength: 1, maxLength: 20 }).filter(s => /^[a-zA-Z0-9-]+$/.test(s)),
-          (suffix) => {
-            const variable = `${HD_VARIABLE_PREFIX}${suffix}`
-            expect(isHDVariable(variable)).toBe(true)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-    it('isHDVariable should return false for non-hd variables', () => {
-      fc.assert(
-        fc.property(
-          fc.string().filter(s => !s.startsWith(HD_VARIABLE_PREFIX)),
-          (variable) => {
-            expect(isHDVariable(variable)).toBe(false)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-    it('KT and HD variables should be mutually exclusive', () => {
-      fc.assert(
-        fc.property(
-          fc.string(),
-          (variable) => {
-            // A variable cannot be both KT and HD
-            const isKT = isKTVariable(variable)
-            const isHD = isHDVariable(variable)
-            expect(isKT && isHD).toBe(false)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-  })
-
-  /**
-   * Requirements: 5.1 - CSS variable extraction and validation
-   */
-  describe('CSS Variable Extraction', () => {
-    it('should extract all var() references from CSS', () => {
-      const css = 'color: var(--kt-fg); background: var(--kt-bg);'
-      const variables = extractCSSVariables(css)
-      expect(variables).toContain('--kt-fg')
-      expect(variables).toContain('--kt-bg')
-      expect(variables.length).toBe(2)
-    })
-
-    it('should return empty array for CSS without variables', () => {
-      fc.assert(
-        fc.property(
-          fc.string().filter(s => !s.includes('var(--')),
-          (css) => {
-            const variables = extractCSSVariables(css)
-            expect(variables).toEqual([])
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-    it('should handle non-string input gracefully', () => {
-      expect(extractCSSVariables(null)).toEqual([])
-      expect(extractCSSVariables(undefined)).toEqual([])
-      expect(extractCSSVariables(123)).toEqual([])
-    })
-  })
-
-
-  /**
-   * Requirements: 5.1 - Validate CSS uses only KT variables
-   */
-  describe('CSS Variable Validation', () => {
-    it('should mark CSS with only KT variables as valid', () => {
-      fc.assert(
-        fc.property(
-          fc.array(
-            fc.string({ minLength: 1, maxLength: 10 }).filter(s => /^[a-zA-Z0-9-]+$/.test(s)),
-            { minLength: 1, maxLength: 5 }
-          ),
-          (suffixes) => {
-            const css = suffixes.map(s => `prop: var(--kt-${s});`).join(' ')
-            const result = validateCSSVariables(css)
-            expect(result.valid).toBe(true)
-            expect(result.hdVariables).toEqual([])
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-
-    it('should mark CSS with HD variables as invalid', () => {
-      const css = 'color: var(--hd-text); background: var(--kt-bg);'
-      const result = validateCSSVariables(css)
-      expect(result.valid).toBe(false)
-      expect(result.hdVariables).toContain('--hd-text')
-    })
-
-    it('should detect all HD variables in mixed CSS', () => {
-      fc.assert(
-        fc.property(
-          fc.array(
-            fc.string({ minLength: 1, maxLength: 10 }).filter(s => /^[a-zA-Z0-9-]+$/.test(s)),
-            { minLength: 1, maxLength: 3 }
-          ),
-          (hdSuffixes) => {
-            const css = hdSuffixes.map(s => `prop: var(--hd-${s});`).join(' ')
-            const result = validateCSSVariables(css)
-            expect(result.valid).toBe(false)
-            expect(result.hdVariables.length).toBe(hdSuffixes.length)
-          }
-        ),
-        { numRuns: 50 }
-      )
-    })
-  })
-
-  /**
-   * Requirements: 5.2 - Bilingual title structure validation
-   */
-  describe('Bilingual Title Structure', () => {
-    it('should validate complete bilingual title structure', () => {
-      const validStructure = { hasPrimaryTitle: true, hasSubtitle: true }
-      expect(isValidBilingualTitle(validStructure)).toBe(true)
-    })
-
-    it('should reject incomplete bilingual title structure', () => {
-      expect(isValidBilingualTitle({ hasPrimaryTitle: true, hasSubtitle: false })).toBe(false)
-      expect(isValidBilingualTitle({ hasPrimaryTitle: false, hasSubtitle: true })).toBe(false)
-      expect(isValidBilingualTitle({ hasPrimaryTitle: false, hasSubtitle: false })).toBe(false)
-    })
-
-    it('should handle invalid input gracefully', () => {
-      expect(isValidBilingualTitle(null)).toBe(false)
-      expect(isValidBilingualTitle(undefined)).toBe(false)
-      expect(isValidBilingualTitle('string')).toBe(false)
-      expect(isValidBilingualTitle(123)).toBe(false)
-    })
-
-    it('BILINGUAL_TITLE_STRUCTURE should have required classes', () => {
-      expect(BILINGUAL_TITLE_STRUCTURE.primaryClass).toBe('kt-subpage__title')
-      expect(BILINGUAL_TITLE_STRUCTURE.subtitleClass).toBe('kt-subpage__title-en')
-    })
-  })
-
-
-  /**
-   * Requirements: 5.1-5.7 - Full subpage style validation
-   */
-  describe('Subpage Style Validation', () => {
-    it('should validate subpage with KT variables and bilingual title', () => {
-      const subpage = {
-        cssContent: 'color: var(--kt-fg); background: var(--kt-bg);',
-        hasBilingualTitle: true
-      }
-      const result = validateSubpageStyle(subpage)
-      expect(result.valid).toBe(true)
-      expect(result.errors).toEqual([])
-    })
-
-    it('should reject subpage with HD variables', () => {
-      const subpage = {
-        cssContent: 'color: var(--hd-text);',
-        hasBilingualTitle: true
-      }
-      const result = validateSubpageStyle(subpage)
-      expect(result.valid).toBe(false)
-      expect(result.errors.length).toBeGreaterThan(0)
-    })
-
-    it('should reject subpage without bilingual title', () => {
-      const subpage = {
-        cssContent: 'color: var(--kt-fg);',
-        hasBilingualTitle: false
-      }
-      const result = validateSubpageStyle(subpage)
-      expect(result.valid).toBe(false)
-      expect(result.errors).toContain('Missing bilingual title structure')
-    })
-
-    it('should handle invalid subpage object', () => {
-      expect(validateSubpageStyle(null).valid).toBe(false)
-      expect(validateSubpageStyle(undefined).valid).toBe(false)
-      expect(validateSubpageStyle('string').valid).toBe(false)
-    })
-  })
-
-  /**
-   * Requirements: 5.1, 5.3 - Required KT variables
-   */
-  describe('Required KT Variables', () => {
-    it('REQUIRED_KT_VARIABLES should contain essential styling variables', () => {
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-bg')
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-fg')
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-border')
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-accent')
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-font')
-      expect(REQUIRED_KT_VARIABLES).toContain('--kt-radius')
-    })
-
-    it('all required variables should use KT prefix', () => {
-      for (const variable of REQUIRED_KT_VARIABLES) {
-        expect(isKTVariable(variable)).toBe(true)
-      }
-    })
-  })
-})
diff --git a/src/frontend/src/utils/theme.test.js b/src/frontend/src/utils/theme.test.js
deleted file mode 100644
index 3070a3b..0000000
--- a/src/frontend/src/utils/theme.test.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * Property-Based Tests for Theme Switching
- * 
- * Feature: ui-consistency-fix
- * Tests: Properties 5-6 from design document
- * 
- * Requirements: 3.1, 3.2, 3.5
- */
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import * as fc from 'fast-check'
-import {
-  VALID_THEMES,
-  DEFAULT_THEME,
-  LAYOUT_PROPERTIES,
-  isValidTheme,
-  normalizeTheme,
-  saveThemePreference,
-  loadThemePreference,
-  themeRoundTrip,
-  layoutPropertiesEqual
-} from './theme'
-
-// Mock localStorage for testing
-const localStorageMock = (() => {
-  let store = {}
-  return {
-    getItem: (key) => store[key] || null,
-    setItem: (key, value) => { store[key] = value.toString() },
-    removeItem: (key) => { delete store[key] },
-    clear: () => { store = {} }
-  }
-})()
-
-// Replace global localStorage with mock
-Object.defineProperty(global, 'localStorage', {
-  value: localStorageMock,
-  writable: true
-})
-
-describe('Theme Switching Property Tests', () => {
-  beforeEach(() => {
-    localStorage.clear()
-  })
-
-  afterEach(() => {
-    localStorage.clear()
-  })
-
-  /**
-   * Property 5: 主题切换布局稳定性
-   * Feature: ui-consistency-fix, Property 5: 主题切换布局稳定性
-   * 
-   * *对于任意*主题切换操作，切换前后的布局属性（width、height、padding、margin、grid-template-columns）应保持不变。
-   * 
-   * **Validates: Requirements 3.1, 3.2**
-   */
-  describe('Property 5: Theme Switch Layout Stability', () => {
-    it('should have layout properties defined for stability checking', () => {
-      // Verify that LAYOUT_PROPERTIES contains the expected properties
-      expect(LAYOUT_PROPERTIES).toContain('width')
-      expect(LAYOUT_PROPERTIES).toContain('height')
-      expect(LAYOUT_PROPERTIES).toContain('padding')
-      expect(LAYOUT_PROPERTIES).toContain('margin')
-      expect(LAYOUT_PROPERTIES).toContain('gridTemplateColumns')
-    })
-
-    it('layoutPropertiesEqual should return true for identical objects', () => {
-      fc.assert(
-        fc.property(
-          // Generate random layout property values
-          fc.record({
-            width: fc.string(),
-            height: fc.string(),
-            padding: fc.string(),
-            paddingTop: fc.string(),
-            paddingRight: fc.string(),
-            paddingBottom: fc.string(),
-            paddingLeft: fc.string(),
-            margin: fc.string(),
-            marginTop: fc.string(),
-            marginRight: fc.string(),
-            marginBottom: fc.string(),
-            marginLeft: fc.string(),
-            gridTemplateColumns: fc.string(),
-            gridTemplateRows: fc.string(),
-            gap: fc.string(),
-            fontSize: fc.string(),
-            lineHeight: fc.string(),
-            letterSpacing: fc.string()
-          }),
-          (layoutProps) => {
-            // Same object should be equal to itself
-            expect(layoutPropertiesEqual(layoutProps, layoutProps)).toBe(true)
-            
-            // Copy should be equal
-            const copy = { ...layoutProps }
-            expect(layoutPropertiesEqual(layoutProps, copy)).toBe(true)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('layoutPropertiesEqual should return false when any layout property differs', () => {
-      fc.assert(
-        fc.property(
-          // Generate two different values for a property
-          fc.string({ minLength: 1 }),
-          fc.string({ minLength: 1 }),
-          // Pick a random layout property to change
-          fc.constantFrom(...LAYOUT_PROPERTIES),
-          (value1, value2, propToChange) => {
-            // Skip if values happen to be the same
-            if (value1 === value2) return
-            
-            // Create base layout object
-            const baseLayout = {}
-            for (const prop of LAYOUT_PROPERTIES) {
-              baseLayout[prop] = 'initial'
-            }
-            
-            // Create modified layout with one property changed
-            const modifiedLayout = { ...baseLayout }
-            baseLayout[propToChange] = value1
-            modifiedLayout[propToChange] = value2
-            
-            // Should detect the difference
-            expect(layoutPropertiesEqual(baseLayout, modifiedLayout)).toBe(false)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('theme-independent layout variables should be defined in CSS', () => {
-      // This test verifies the design principle that layout variables
-      // are defined separately from theme-specific color variables
-      // The actual CSS verification would be done in integration tests
-      
-      // Verify the expected layout properties list
-      const expectedLayoutProps = [
-        'width', 'height', 'padding', 'margin', 'gridTemplateColumns'
-      ]
-      
-      for (const prop of expectedLayoutProps) {
-        expect(LAYOUT_PROPERTIES).toContain(prop)
-      }
-    })
-  })
-
-
-  /**
-   * Property 6: 主题偏好持久化往返
-   * Feature: ui-consistency-fix, Property 6: 主题偏好持久化往返
-   * 
-   * *对于任意*主题值（'dark' 或 'light'），保存到 localStorage 后再读取应返回相同的值。
-   * 
-   * **Validates: Requirements 3.5**
-   */
-  describe('Property 6: Theme Preference Persistence Round-Trip', () => {
-    it('should return same theme after save and load for valid themes', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom(...VALID_THEMES),
-          (theme) => {
-            // Save theme
-            saveThemePreference(theme)
-            
-            // Load theme
-            const loadedTheme = loadThemePreference()
-            
-            // Should be the same
-            expect(loadedTheme).toBe(theme)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('themeRoundTrip should preserve valid theme values', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom(...VALID_THEMES),
-          (theme) => {
-            const result = themeRoundTrip(theme)
-            expect(result).toBe(theme)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should normalize invalid themes to default before saving', () => {
-      fc.assert(
-        fc.property(
-          // Generate strings that are NOT valid themes
-          fc.string().filter(s => !VALID_THEMES.includes(s)),
-          (invalidTheme) => {
-            // Save invalid theme
-            saveThemePreference(invalidTheme)
-            
-            // Load should return default theme
-            const loadedTheme = loadThemePreference()
-            expect(loadedTheme).toBe(DEFAULT_THEME)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('isValidTheme should correctly identify valid themes', () => {
-      fc.assert(
-        fc.property(
-          fc.string(),
-          (theme) => {
-            const isValid = isValidTheme(theme)
-            expect(isValid).toBe(VALID_THEMES.includes(theme))
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('normalizeTheme should return valid theme for any input', () => {
-      fc.assert(
-        fc.property(
-          fc.string(),
-          (theme) => {
-            const normalized = normalizeTheme(theme)
-            expect(VALID_THEMES).toContain(normalized)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('normalizeTheme should preserve valid themes', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom(...VALID_THEMES),
-          (validTheme) => {
-            const normalized = normalizeTheme(validTheme)
-            expect(normalized).toBe(validTheme)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('normalizeTheme should return default for invalid themes', () => {
-      fc.assert(
-        fc.property(
-          fc.string().filter(s => !VALID_THEMES.includes(s)),
-          (invalidTheme) => {
-            const normalized = normalizeTheme(invalidTheme)
-            expect(normalized).toBe(DEFAULT_THEME)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('multiple round-trips should be idempotent', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom(...VALID_THEMES),
-          fc.integer({ min: 1, max: 10 }),
-          (theme, iterations) => {
-            let currentTheme = theme
-            
-            // Perform multiple round-trips
-            for (let i = 0; i < iterations; i++) {
-              currentTheme = themeRoundTrip(currentTheme)
-            }
-            
-            // Should still be the original theme
-            expect(currentTheme).toBe(theme)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-
-
-  /**
-   * Additional helper function tests
-   */
-  describe('Helper Functions', () => {
-    it('VALID_THEMES should contain dark and light', () => {
-      expect(VALID_THEMES).toContain('dark')
-      expect(VALID_THEMES).toContain('light')
-      expect(VALID_THEMES.length).toBe(2)
-    })
-
-    it('DEFAULT_THEME should be a valid theme', () => {
-      expect(VALID_THEMES).toContain(DEFAULT_THEME)
-    })
-
-    it('saveThemePreference should return true on success', () => {
-      const result = saveThemePreference('dark')
-      expect(result).toBe(true)
-    })
-
-    it('loadThemePreference should return default when localStorage is empty', () => {
-      localStorage.clear()
-      const theme = loadThemePreference()
-      expect(theme).toBe(DEFAULT_THEME)
-    })
-  })
-})
diff --git a/src/frontend/src/utils/touchTarget.test.js b/src/frontend/src/utils/touchTarget.test.js
deleted file mode 100644
index 8370244..0000000
--- a/src/frontend/src/utils/touchTarget.test.js
+++ /dev/null
@@ -1,333 +0,0 @@
-/**
- * Property-Based Tests for Touch Target Validation
- * 
- * Feature: ui-consistency-fix
- * Tests: Property 8 from design document
- * 
- * Requirements: 4.4 - Touch targets minimum 44x44px
- */
-import { describe, it, expect } from 'vitest'
-import * as fc from 'fast-check'
-import {
-  MIN_TOUCH_TARGET_SIZE,
-  INTERACTIVE_ELEMENT_SELECTORS,
-  validateTouchTargetSize,
-  cssValueMeetsMinSize,
-  validateBatchTouchTargets,
-  generateTouchTargetCSS
-} from './touchTarget'
-
-describe('Touch Target Property Tests', () => {
-  /**
-   * Property 8: 触摸目标最小尺寸
-   * Feature: ui-consistency-fix, Property 8: 触摸目标最小尺寸
-   * 
-   * *对于任意*交互元素（按钮、链接、导航项），其计算尺寸应至少为 44x44px。
-   * 
-   * **Validates: Requirements 4.4**
-   */
-  describe('Property 8: Touch Target Minimum Size', () => {
-    it('should validate dimensions >= 44px as valid', () => {
-      fc.assert(
-        fc.property(
-          // Generate dimensions that are >= MIN_TOUCH_TARGET_SIZE
-          fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 1000 }),
-          fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 1000 }),
-          (width, height) => {
-            const result = validateTouchTargetSize({ width, height })
-            
-            expect(result.isValid).toBe(true)
-            expect(result.width).toBe(width)
-            expect(result.height).toBe(height)
-            expect(result.minRequired).toBe(MIN_TOUCH_TARGET_SIZE)
-            expect(result.failureReason).toBeNull()
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should validate dimensions < 44px as invalid', () => {
-      fc.assert(
-        fc.property(
-          // Generate at least one dimension that is < MIN_TOUCH_TARGET_SIZE
-          fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-          fc.integer({ min: 0, max: 1000 }),
-          fc.boolean(),
-          (smallDim, otherDim, widthIsSmall) => {
-            const width = widthIsSmall ? smallDim : otherDim
-            const height = widthIsSmall ? otherDim : smallDim
-            
-            // At least one dimension is small
-            const result = validateTouchTargetSize({ width, height })
-            
-            // If both dimensions are >= MIN_TOUCH_TARGET_SIZE, it should be valid
-            // Otherwise, it should be invalid
-            const expectedValid = width >= MIN_TOUCH_TARGET_SIZE && height >= MIN_TOUCH_TARGET_SIZE
-            expect(result.isValid).toBe(expectedValid)
-            
-            if (!expectedValid) {
-              expect(result.failureReason).not.toBeNull()
-            }
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly identify when width is too small', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-          fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 1000 }),
-          (width, height) => {
-            const result = validateTouchTargetSize({ width, height })
-            
-            expect(result.isValid).toBe(false)
-            expect(result.failureReason).toContain('width')
-            expect(result.failureReason).toContain(`${width}px`)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly identify when height is too small', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 1000 }),
-          fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-          (width, height) => {
-            const result = validateTouchTargetSize({ width, height })
-            
-            expect(result.isValid).toBe(false)
-            expect(result.failureReason).toContain('height')
-            expect(result.failureReason).toContain(`${height}px`)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should correctly identify when both dimensions are too small', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-          fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-          (width, height) => {
-            const result = validateTouchTargetSize({ width, height })
-            
-            expect(result.isValid).toBe(false)
-            expect(result.failureReason).toContain('width')
-            expect(result.failureReason).toContain('height')
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should handle edge case of exactly 44px', () => {
-      const result = validateTouchTargetSize({ 
-        width: MIN_TOUCH_TARGET_SIZE, 
-        height: MIN_TOUCH_TARGET_SIZE 
-      })
-      
-      expect(result.isValid).toBe(true)
-      expect(result.failureReason).toBeNull()
-    })
-
-    it('should reject negative dimensions', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: -1000, max: -1 }),
-          fc.integer({ min: -1000, max: 1000 }),
-          (negDim, otherDim) => {
-            const result1 = validateTouchTargetSize({ width: negDim, height: otherDim })
-            const result2 = validateTouchTargetSize({ width: otherDim, height: negDim })
-            
-            expect(result1.isValid).toBe(false)
-            expect(result2.isValid).toBe(false)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-
-  describe('CSS Value Validation', () => {
-    it('should validate pixel values correctly', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 0, max: 200 }),
-          (pixels) => {
-            const cssValue = `${pixels}px`
-            const result = cssValueMeetsMinSize(cssValue)
-            
-            expect(result).toBe(pixels >= MIN_TOUCH_TARGET_SIZE)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should validate rem values correctly (assuming 16px base)', () => {
-      fc.assert(
-        fc.property(
-          fc.float({ min: 0, max: 10, noNaN: true }),
-          (rems) => {
-            const cssValue = `${rems.toFixed(2)}rem`
-            const pixelEquivalent = rems * 16
-            const result = cssValueMeetsMinSize(cssValue)
-            
-            expect(result).toBe(pixelEquivalent >= MIN_TOUCH_TARGET_SIZE)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should validate em values correctly (assuming 16px base)', () => {
-      fc.assert(
-        fc.property(
-          fc.float({ min: 0, max: 10, noNaN: true }),
-          (ems) => {
-            const cssValue = `${ems.toFixed(2)}em`
-            const pixelEquivalent = ems * 16
-            const result = cssValueMeetsMinSize(cssValue)
-            
-            expect(result).toBe(pixelEquivalent >= MIN_TOUCH_TARGET_SIZE)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should handle max() function with pixel fallback', () => {
-      // max(3cqw, 44px) should be valid because 44px >= 44px
-      expect(cssValueMeetsMinSize('max(3cqw, 44px)')).toBe(true)
-      expect(cssValueMeetsMinSize('max(3cqw, 48px)')).toBe(true)
-      expect(cssValueMeetsMinSize('max(3cqw, 40px)')).toBe(false)
-    })
-
-    it('should handle clamp() function', () => {
-      // clamp(44px, 3cqw, 100px) - minimum is 44px
-      expect(cssValueMeetsMinSize('clamp(44px, 3cqw, 100px)')).toBe(true)
-      expect(cssValueMeetsMinSize('clamp(48px, 3cqw, 100px)')).toBe(true)
-      expect(cssValueMeetsMinSize('clamp(40px, 3cqw, 100px)')).toBe(false)
-    })
-
-    it('should return false for invalid inputs', () => {
-      expect(cssValueMeetsMinSize(null)).toBe(false)
-      expect(cssValueMeetsMinSize(undefined)).toBe(false)
-      expect(cssValueMeetsMinSize('')).toBe(false)
-      expect(cssValueMeetsMinSize(123)).toBe(false)
-    })
-  })
-
-  describe('Batch Validation', () => {
-    it('should validate all elements in a batch', () => {
-      fc.assert(
-        fc.property(
-          fc.array(
-            fc.record({
-              width: fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 500 }),
-              height: fc.integer({ min: MIN_TOUCH_TARGET_SIZE, max: 500 })
-            }),
-            { minLength: 1, maxLength: 20 }
-          ),
-          (dimensionsList) => {
-            const result = validateBatchTouchTargets(dimensionsList)
-            
-            expect(result.allValid).toBe(true)
-            expect(result.failedCount).toBe(0)
-            expect(result.results.length).toBe(dimensionsList.length)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should count failures correctly in batch', () => {
-      fc.assert(
-        fc.property(
-          fc.array(
-            fc.record({
-              width: fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 }),
-              height: fc.integer({ min: 0, max: MIN_TOUCH_TARGET_SIZE - 1 })
-            }),
-            { minLength: 1, maxLength: 20 }
-          ),
-          (dimensionsList) => {
-            const result = validateBatchTouchTargets(dimensionsList)
-            
-            expect(result.allValid).toBe(false)
-            expect(result.failedCount).toBe(dimensionsList.length)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should handle empty array', () => {
-      const result = validateBatchTouchTargets([])
-      
-      expect(result.allValid).toBe(true)
-      expect(result.failedCount).toBe(0)
-      expect(result.results.length).toBe(0)
-    })
-
-    it('should handle invalid input', () => {
-      const result = validateBatchTouchTargets(null)
-      
-      expect(result.allValid).toBe(false)
-      expect(result.results.length).toBe(0)
-    })
-  })
-
-  describe('CSS Generation', () => {
-    it('should generate valid CSS rules', () => {
-      fc.assert(
-        fc.property(
-          fc.constantFrom(...INTERACTIVE_ELEMENT_SELECTORS),
-          (selector) => {
-            const css = generateTouchTargetCSS(selector)
-            
-            expect(css).toContain(selector)
-            expect(css).toContain(`min-width: ${MIN_TOUCH_TARGET_SIZE}px`)
-            expect(css).toContain(`min-height: ${MIN_TOUCH_TARGET_SIZE}px`)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-
-    it('should use custom minimum size when provided', () => {
-      fc.assert(
-        fc.property(
-          fc.integer({ min: 20, max: 100 }),
-          (customSize) => {
-            const css = generateTouchTargetCSS('.test', customSize)
-            
-            expect(css).toContain(`min-width: ${customSize}px`)
-            expect(css).toContain(`min-height: ${customSize}px`)
-          }
-        ),
-        { numRuns: 100 }
-      )
-    })
-  })
-
-  describe('Constants', () => {
-    it('MIN_TOUCH_TARGET_SIZE should be 44', () => {
-      expect(MIN_TOUCH_TARGET_SIZE).toBe(44)
-    })
-
-    it('INTERACTIVE_ELEMENT_SELECTORS should contain common interactive elements', () => {
-      expect(INTERACTIVE_ELEMENT_SELECTORS).toContain('button')
-      expect(INTERACTIVE_ELEMENT_SELECTORS).toContain('a')
-      expect(INTERACTIVE_ELEMENT_SELECTORS).toContain('[role="button"]')
-      expect(INTERACTIVE_ELEMENT_SELECTORS).toContain('.kt-btn')
-      expect(INTERACTIVE_ELEMENT_SELECTORS).toContain('.kt-card')
-    })
-  })
-})
diff --git a/src/frontend/src/views/LoginView.vue b/src/frontend/src/views/LoginView.vue
index dd60131..921dd9a 100644
--- a/src/frontend/src/views/LoginView.vue
+++ b/src/frontend/src/views/LoginView.vue
@@ -172,7 +172,7 @@
             <div class="kt-user-box">
               <input 
                 class="kt-input"
-                type="password" 
+                :type="showRegisterPwd ? 'text' : 'password'"
                 name="password"
                 required 
                 v-model="form.password"
@@ -180,6 +180,13 @@
               />
               <label class="kt-label">密码</label>
               <i class="fas fa-lock kt-input-icon"></i>
+              <i 
+                class="fas kt-toggle-password"
+                :class="showRegisterPwd ? 'fa-eye-slash' : 'fa-eye'"
+                @click="showRegisterPwd = !showRegisterPwd"
+                title="显示/隐藏密码"
+              ></i>
+              <p class="kt-input-hint">密码至少8位，且需包含大小写字母、数字和符号</p>
             </div>
 
             <div class="kt-user-box">
@@ -270,7 +277,7 @@
             <div class="kt-user-box">
               <input 
                 class="kt-input"
-                type="password" 
+                :type="showResetPwd ? 'text' : 'password'"
                 name="new_password"
                 required 
                 v-model="forgotForm.new_password"
@@ -278,12 +285,19 @@
               />
               <label class="kt-label">新密码</label>
               <i class="fas fa-lock kt-input-icon"></i>
+              <i 
+                class="fas kt-toggle-password"
+                :class="showResetPwd ? 'fa-eye-slash' : 'fa-eye'"
+                @click="showResetPwd = !showResetPwd"
+                title="显示/隐藏密码"
+              ></i>
+              <p class="kt-input-hint">密码至少8位，且需包含大小写字母、数字和符号</p>
             </div>
             
             <div class="kt-user-box">
               <input 
                 class="kt-input"
-                type="password" 
+                :type="showResetConfirm ? 'text' : 'password'"
                 name="confirm_password"
                 required 
                 v-model="forgotForm.confirm_password"
@@ -291,6 +305,12 @@
               />
               <label class="kt-label">确认新密码</label>
               <i class="fas fa-lock kt-input-icon"></i>
+              <i 
+                class="fas kt-toggle-password"
+                :class="showResetConfirm ? 'fa-eye-slash' : 'fa-eye'"
+                @click="showResetConfirm = !showResetConfirm"
+                title="显示/隐藏密码"
+              ></i>
             </div>
           </div>
 
@@ -328,6 +348,9 @@ const userStore = useUserStore()
 const flowMode = ref('login')
 const loading = ref(false)
 const showPassword = ref(false)
+const showRegisterPwd = ref(false)
+const showResetPwd = ref(false)
+const showResetConfirm = ref(false)
 const isDark = ref(true)
 const errorMessage = ref('') 
 
@@ -411,6 +434,25 @@ const validateEmail = (email) => {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
 }
 
+/**
+ * 校验密码强度
+ * 至少8位，包含大小写、数字、特殊符号
+ */
+const validatePasswordStrength = (pwd) => {
+  // 解析：
+  // ^                  匹配开头
+  // (?=.*[a-z])        必须包含至少一个小写字母
+  // (?=.*[A-Z])        必须包含至少一个大写字母
+  // (?=.*\d)           必须包含至少一个数字
+  // (?=.*[^A-Za-z0-9]) 必须包含至少一个特殊字符 (逻辑：只要不是字母或数字，就算特殊字符)
+  // \S{8,}             主体部分：由8个或更多的“非空白字符”组成
+  // $                  匹配结尾
+
+  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9])\S{8,}$/;
+  
+  return regex.test(pwd);
+}
+
 // 统一的发送验证码处理函数
 const handleSendCode = async (purpose) => {
   let email = ''
@@ -450,6 +492,11 @@ const handleRegister = async () => {
   if (!form.value.username || !form.value.password || !form.value.email || !form.value.code) {
     return modal.warning('请填写完整注册信息（含验证码）')
   }
+  
+  if (!validatePasswordStrength(form.value.password)) {
+    return modal.warning('密码强度不足：需至少8位且包含大小写字母、数字和符号')
+  }
+
   loading.value = true
   try {
     const payload = { ...form.value }
@@ -478,6 +525,10 @@ const handleForgotPassword = async () => {
     return modal.warning('两次输入的新密码不一致')
   }
   
+  if (!validatePasswordStrength(f.new_password)) {
+    return modal.warning('新密码强度不足：需至少8位且包含大小写字母、数字和符号')
+  }
+  
   loading.value = true
   try {
     // 调用忘记密码接口
@@ -730,7 +781,8 @@ const handleForgotPassword = async () => {
 
 .kt-input-icon {
   position: absolute;
-  top: 50%;
+  /* 修复位置：改为固定像素值，以应对下方 Hint 文字撑开容器 */
+  top: 26px; /* 52px 的一半 */
   left: 15px;
   transform: translateY(-50%);
   font-size: 1.1rem;
@@ -740,6 +792,8 @@ const handleForgotPassword = async () => {
 }
 
 .kt-register-card .kt-input-icon {
+  /* 修复位置：注册卡片输入框高 48px */
+  top: 24px;
   left: 12px;
 }
 
@@ -749,7 +803,8 @@ const handleForgotPassword = async () => {
 
 .kt-label {
   position: absolute;
-  top: 50%;
+  /* 修复位置：改为固定像素值 */
+  top: 26px;
   left: 45px; 
   transform: translateY(-50%);
   font-family: var(--kt-font);
@@ -762,12 +817,15 @@ const handleForgotPassword = async () => {
 }
 
 .kt-register-card .kt-label {
+  /* 修复位置：注册卡片输入框高 48px */
+  top: 24px; 
   left: 40px;
 }
 
+/* 浮动状态的 label 定位 */
 .kt-input:focus ~ .kt-label,
 .kt-input:not(:placeholder-shown) ~ .kt-label {
-  top: -10px;
+  top: -10px; /* 浮动到顶部外侧，不受 Box 高度影响 */
   left: 12px;
   transform: translateY(0);
   font-size: 0.85rem;
@@ -783,7 +841,8 @@ const handleForgotPassword = async () => {
 
 .kt-toggle-password {
   position: absolute;
-  top: 50%;
+  /* 修复位置：改为固定像素值 */
+  top: 26px;
   right: 15px;
   transform: translateY(-50%);
   font-size: 1.1rem;
@@ -793,6 +852,20 @@ const handleForgotPassword = async () => {
   z-index: 2;
 }
 
+.kt-register-card .kt-toggle-password {
+  /* 注册卡片高度略小 */
+  top: 24px;
+}
+
+.kt-input-hint {
+  font-family: var(--kt-font);
+  font-size: 0.75rem;
+  color: var(--kt-muted-fg);
+  margin-top: 0.4rem;
+  margin-left: 0.2rem;
+  line-height: 1.4;
+}
+
 /* ===== Code Group Layout ===== */
 .kt-code-group {
   display: flex;
diff --git a/src/frontend/src/views/MainFlow.vue b/src/frontend/src/views/MainFlow.vue
index c0e8bd4..c88db26 100644
--- a/src/frontend/src/views/MainFlow.vue
+++ b/src/frontend/src/views/MainFlow.vue
@@ -91,7 +91,6 @@ provide('navigateToSection', handleNavigate)
 
 const handleNavToggle = (expanded) => { isNavExpanded.value = expanded }
 
-// Page5 需要它来进行状态跳转，这里我们用 handleNavigate 封装，并注入
 const navigateToSection = (id) => { handleNavigate(id) }
 provide('navigateToSection', navigateToSection)
 
@@ -285,22 +284,36 @@ const checkRoute = () => {
   }
 }
 
+// 处理页面可见性变化，优化后台性能
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    // 页面不可见时停止轮询
+    taskStore.stopPolling()
+  } else {
+    // 页面恢复可见时，如果已登录，恢复轮询
+    if (userStore.isLoggedIn) {
+      taskStore.startPolling()
+    }
+  }
+}
+
 onMounted(() => {
   checkRoute()
   window.addEventListener('wheel', handleWheel, { passive: false })
   window.addEventListener('touchstart', handleTouchStart, { passive: true })
   window.addEventListener('touchmove', handleTouchMove, { passive: false })
   window.addEventListener('touchend', handleTouchEnd, { passive: true })
+  
   taskStore.startPolling()
-  // === 登录后主动触发展开动画===
+
+  // 添加可见性监听
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+
   const savedNavState = localStorage.getItem('kt_nav_expanded')
-  // 如果 localStorage 记录的是展开状态 'true'，且当前视图是收缩的，则触发一次展开
-  // MainFlow.vue 的 isNavExpanded 默认是 false，NavBar 的 isExpanded 也是从 false 启动的
   if (savedNavState === 'true') {
-     // 延迟触发，确保 DOM 渲染完成
      setTimeout(() => {
         handleNavToggle(true) 
-     }, 200) // 延迟 2s00ms
+     }, 200) 
   }
 })
 
@@ -309,6 +322,9 @@ onUnmounted(() => {
   window.removeEventListener('touchstart', handleTouchStart)
   window.removeEventListener('touchmove', handleTouchMove)
   window.removeEventListener('touchend', handleTouchEnd)
+  
+  // 移除可见性监听并停止轮询
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
   taskStore.stopPolling()
   cancelCurrentAnimation()
 })
@@ -327,7 +343,6 @@ onUnmounted(() => {
       @toggle="handleNavToggle" />
 
     <!-- 左上角按钮区域 -->
-    <!-- 增加 :class="{'is-subpage': showSubpage}" 用于 CSS 区分状态 -->
     <div class="kt-corner-btn-area" :class="{ 'is-subpage': showSubpage }">
       <button 
         v-if="!showSubpage"
@@ -458,8 +473,7 @@ onUnmounted(() => {
   grid-row: 1;
   width: 100%;
   height: 100%;
-  padding: var(--kt-container-px);
-  padding-right: calc(var(--kt-container-px) + 8px); 
+  padding: 0;
   
   --waterfall-duration: 350ms;
   --waterfall-easing: ease-out;
@@ -710,12 +724,14 @@ onUnmounted(() => {
 }
 
 .kt-corner-btn i {
-  font-size: clamp(1.2rem, 2cqw, 1.8rem);
+  font-size: 2.2cqw;
+  min-font-size: 1.2rem;
   margin-bottom: 0;
 }
 
 .kt-corner-btn__text {
-  font-size: clamp(0.65rem, 0.7cqw, 0.85rem);
+  font-size: 0.8cqw;
+  min-font-size: 0.65rem;
   white-space: nowrap;
   font-weight: 700;
 }
diff --git a/src/frontend/src/views/Page1/Page1.vue b/src/frontend/src/views/Page1/Page1.vue
index 6f94699..33e4f1d 100644
--- a/src/frontend/src/views/Page1/Page1.vue
+++ b/src/frontend/src/views/Page1/Page1.vue
@@ -37,7 +37,7 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
           <span class="kt-card__hero-line">MODE</span>
         </div>
         <div class="kt-card__content">
-          <p class="kt-card__desc">通用模式，适用于大多数场景的防护模式，提供多种可调节参数，满足不同需求。</p>
+          <p class="kt-card__desc">通用防护，适用于人脸和艺术品防护，经典模式</p>
           
           <!-- Feature Tags -->
           <div class="kt-tags">
@@ -64,11 +64,11 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
         @keydown.space.prevent="OpenQuick"
       >
         <div class="kt-card__hero-text kt-card__hero-text--small">
-          <span class="kt-card__hero-line">快速</span>
-          <span class="kt-card__hero-line">模式</span>
+          <span class="kt-card__hero-line">QUICK</span>
+          <span class="kt-card__hero-line">快速模式</span>
         </div>
         <div class="kt-card__content">
-          <p class="kt-card__desc">快速防护，系统自动推荐配置，一键上传。</p>
+          <p class="kt-card__desc">加速防护，效果不差且耗时更低。</p>
         </div>
         <span class="kt-card__arrow" aria-hidden="true">→</span>
       </article>
@@ -138,7 +138,7 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
 .kt-card--universal {
   flex-direction: column;
   align-items: flex-start;
-  padding: 3rem;
+  padding: 2.5rem;
   min-height: 300px;
 }
 
@@ -226,11 +226,11 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
   display: flex;
   align-items: center;
   gap: 2rem;
-  padding: 2rem 3rem;
+  padding: 2.5rem;
 }
 
 .kt-card__hero-text--small .kt-card__hero-line {
-  font-size: clamp(1.5rem, 5vw, 3rem);
+  font-size: clamp(2rem, 6vw, 4rem);
   line-height: 1.25;
 }
 
@@ -322,6 +322,13 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
     min-height: auto;
   }
   
+  .kt-card--quick {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+  
   .kt-card__hero-line {
     font-size: clamp(2rem, 12vw, 4rem);
   }
@@ -344,13 +351,6 @@ const OpenQuick = () => openSubpage('page1', 'QuickMode')
     justify-content: center;
   }
   
-  .kt-card--quick {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 1.5rem;
-  }
-  
   .kt-card__hero-text--small .kt-card__hero-line {
     font-size: clamp(1.25rem, 8vw, 2rem);
     line-height: 1.25;
diff --git a/src/frontend/src/views/Page1/subpages/QuickMode.vue b/src/frontend/src/views/Page1/subpages/QuickMode.vue
index 9e2159c..389f6c7 100644
--- a/src/frontend/src/views/Page1/subpages/QuickMode.vue
+++ b/src/frontend/src/views/Page1/subpages/QuickMode.vue
@@ -126,6 +126,7 @@ const fileInput = ref(null)
 const isSubmitting = ref(false)
 let specificPollTimer = null
 const MAX_UPLOAD_COUNT = 5
+const MAX_TOTAL_SIZE_MB = 15
 
 const formData = ref({
   taskName: '',
@@ -143,14 +144,51 @@ const handleStyleChange = (style) => {
 
 const triggerFileUpload = () => fileInput.value.click()
 
+// 优化文件处理：追加模式 + 容量检查
 const handleFileChange = (event) => {
-  const files = Array.from(event.target.files)
-  if (files.length > MAX_UPLOAD_COUNT) {
-    modal.warning(`单次最多允许上传 ${MAX_UPLOAD_COUNT} 张图片，已自动截取前 ${MAX_UPLOAD_COUNT} 张。`)
-    formData.value.files = files.slice(0, MAX_UPLOAD_COUNT)
-  } else if (files.length > 0) {
-    formData.value.files = files
+  const newFiles = Array.from(event.target.files)
+  if (newFiles.length === 0) return
+
+  // 1. 去重
+  const uniqueNewFiles = newFiles.filter(nf => 
+    !formData.value.files.some(ef => ef.name === nf.name && ef.size === nf.size)
+  )
+
+  if (uniqueNewFiles.length === 0) {
+    event.target.value = ''
+    return modal.info('所选文件已存在')
+  }
+
+  // 2. 数量检查
+  const currentCount = formData.value.files.length
+  const availableSlots = MAX_UPLOAD_COUNT - currentCount
+  
+  if (availableSlots <= 0) {
+    event.target.value = ''
+    return modal.warning(`已达到最大上传数量 (${MAX_UPLOAD_COUNT})`)
+  }
+
+  let filesToAdd = uniqueNewFiles
+  if (uniqueNewFiles.length > availableSlots) {
+    filesToAdd = uniqueNewFiles.slice(0, availableSlots)
+    modal.warning(`最多只能再添加 ${availableSlots} 张图片，已自动截取。`)
   }
+
+  // 3. 大小检查
+  let currentTotalSize = formData.value.files.reduce((acc, f) => acc + f.size, 0)
+  const validFiles = []
+  
+  for (const file of filesToAdd) {
+    if (currentTotalSize + file.size > MAX_TOTAL_SIZE_MB * 1024 * 1024) {
+      modal.warning(`文件总大小超过 ${MAX_TOTAL_SIZE_MB}MB，部分文件未添加。`)
+      break
+    }
+    currentTotalSize += file.size
+    validFiles.push(file)
+  }
+
+  // 4. 追加
+  formData.value.files = [...formData.value.files, ...validFiles]
   event.target.value = ''
 }
 
@@ -173,16 +211,15 @@ const submitTask = async () => {
   
   const dataTypeId = formData.value.style === 'art' ? DATA_TYPE_MAP.ART : DATA_TYPE_MAP.FACE
   
-  // 更新：使用新增的 QUICK 算法 (ID 10)
   const algoId = ALGO_MAP.QUICK || 10
-  // 更新：QUICK 算法基于 PID，使用较小的浮点强度
-  const intensity = 0.05 
+  const intensity = 12 
   
   payload.append('data_type_id', dataTypeId)
   payload.append('perturbation_configs_id', algoId)
   payload.append('perturbation_intensity', intensity)
   payload.append('description', `[快速] ${formData.value.taskName}`)
-  payload.append('perturbation_name', 'Quick-PID-0.05')
+  // 名字反映实际强度
+  payload.append('perturbation_name', `Quick-PID-${intensity}`)
   
   formData.value.files.forEach(file => {
     payload.append('files', file)
@@ -233,19 +270,74 @@ onUnmounted(() => { if (specificPollTimer) clearInterval(specificPollTimer) })
 </script>
 
 <style scoped>
-.kt-subpage__style-content { display: flex; flex-direction: column; min-width: 0; }
-.kt-subpage__upload-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
-.kt-subpage__upload-icon.success { color: var(--kt-accent); }
-.kt-subpage__upload { position: relative; }
-.kt-clear-btn { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: var(--kt-bg); color: var(--kt-accent); border: var(--kt-border-width) solid var(--kt-accent); border-radius: var(--kt-radius); display: flex; align-items: center; justify-content: center; transition: all var(--kt-transition-micro); z-index: 10; cursor: pointer; }
-.kt-clear-btn:hover { background: var(--kt-accent); color: var(--kt-accent-fg); transform: scale(1.1); }
-
-/* 锁定样式 */
+.kt-subpage__style-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.kt-subpage__upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kt-subpage__upload-icon.success {
+  color: var(--kt-accent);
+}
+
+.kt-subpage__upload {
+  position: relative;
+  border: 3px dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: var(--kt-card-padding);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  background: var(--kt-bg);
+}
+
+.kt-subpage__upload:hover {
+  border-color: var(--kt-accent);
+  background: var(--kt-muted);
+}
+
+.kt-subpage__upload.has-file {
+  border-style: solid;
+  border-color: var(--kt-accent);
+}
+
+.kt-clear-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: var(--kt-bg);
+  color: var(--kt-accent);
+  border: var(--kt-border-width) solid var(--kt-accent);
+  border-radius: var(--kt-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--kt-transition-micro);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.kt-clear-btn:hover {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  transform: scale(1.1);
+}
+
 .kt-subpage__style-option.is-locked {
   opacity: 0.6;
   filter: grayscale(0.8);
   cursor: not-allowed;
 }
+
 .kt-lock-icon {
   margin-left: 0.5rem;
   font-size: 0.9em;
diff --git a/src/frontend/src/views/Page1/subpages/UniversalMode.vue b/src/frontend/src/views/Page1/subpages/UniversalMode.vue
index e6471c5..27a11f6 100644
--- a/src/frontend/src/views/Page1/subpages/UniversalMode.vue
+++ b/src/frontend/src/views/Page1/subpages/UniversalMode.vue
@@ -113,6 +113,9 @@
                   </div>
                   <div class="kt-subpage__upload-text" v-else>
                     已选择 <span style="color: var(--kt-accent);">{{ formData.files.length }}</span> 张图片
+                    <p class="kt-small-text" v-if="formData.files.length > 0">
+                      {{ formData.files[0].name }} <span v-if="formData.files.length > 1">等...</span>
+                    </p>
                   </div>
                 </div>
               </div>
@@ -139,7 +142,7 @@ import { DATA_TYPE_MAP, ALGO_OPTIONS_Data, ALGO_MAP } from '@/utils/constants'
 import { submitPerturbationTask, getTaskStatus } from '@/api/task'
 import { useTaskStore } from '@/stores/taskStore'
 import { useUserStore } from '@/stores/userStore' 
-import { getUserConfig } from '@/api/user' // 引入获取配置接口
+import { getUserConfig } from '@/api/user' 
 import modal from '@/utils/modal'
 import KtSelect from '@/components/KtSelect.vue'
 
@@ -151,14 +154,15 @@ const isSubmitting = ref(false)
 const isCustomMode = ref(false)
 let specificPollTimer = null
 const MAX_UPLOAD_COUNT = 5
+const MAX_TOTAL_SIZE_MB = 15
 
 const formData = ref({ taskName: '', algorithm: '', strength: 12.0, style: 'face', files: [] })
 
 const algorithmSettings = computed(() => {
   const algoId = formData.value.algorithm
-  if ([ALGO_MAP.SIMAC, ALGO_MAP.ASPL, ALGO_MAP.CAAT_PRO].includes(algoId)) {
+  if ([ALGO_MAP.SIMAC, ALGO_MAP.ASPL,  ALGO_MAP.PID, ALGO_MAP.QUICK].includes(algoId)) {
     return { min: 10, max: 16, step: 1, presets: { low: 10, mid: 12, high: 16 }, default: 12 }
-  } else if ([ALGO_MAP.GLAZE, ALGO_MAP.PID, ALGO_MAP.STYLE_PROTECTION, ALGO_MAP.QUICK].includes(algoId)) {
+  } else if ([ALGO_MAP.GLAZE, ALGO_MAP.STYLE_PROTECTION, ALGO_MAP.CAAT, ALGO_MAP.CAAT_PRO].includes(algoId)) {
     return { min: 0.01, max: 0.2, step: 0.01, presets: { low: 0.03, mid: 0.05, high: 0.1 }, default: 0.05 }
   }
   return { min: 10, max: 16, step: 1, presets: { low: 10, mid: 12, high: 16 }, default: 12 }
@@ -168,10 +172,7 @@ const presetLow = computed(() => algorithmSettings.value.presets.low)
 const presetMid = computed(() => algorithmSettings.value.presets.mid)
 const presetHigh = computed(() => algorithmSettings.value.presets.high)
 
-// 监听算法切换，重置强度和模式
 watch(() => formData.value.algorithm, (newVal, oldVal) => { 
-  // 只有当用户在页面上手动切换算法时才重置
-  // 初始化加载时的变化由 loadUserDefaults 控制
   if (oldVal !== undefined && newVal !== oldVal) {
     formData.value.strength = algorithmSettings.value.default
     isCustomMode.value = false
@@ -202,15 +203,52 @@ const setDataType = (type) => {
 const selectAlgo = (algo) => { formData.value.algorithm = algo.id; isDropdownOpen.value = false }
 const triggerFileUpload = () => fileInput.value.click()
 
+// 优化文件处理：追加模式 + 容量检查
 const handleFileChange = (event) => { 
-  const files = Array.from(event.target.files)
-  if (files.length > MAX_UPLOAD_COUNT) {
-    modal.warning(`单次最多允许上传 ${MAX_UPLOAD_COUNT} 张图片，已自动截取前 ${MAX_UPLOAD_COUNT} 张。`)
-    formData.value.files = files.slice(0, MAX_UPLOAD_COUNT)
-  } else if (files.length > 0) {
-    formData.value.files = files
+  const newFiles = Array.from(event.target.files)
+  if (newFiles.length === 0) return
+
+  // 1. 去重（基于文件名和大小）
+  const uniqueNewFiles = newFiles.filter(nf => 
+    !formData.value.files.some(ef => ef.name === nf.name && ef.size === nf.size)
+  )
+
+  if (uniqueNewFiles.length === 0) {
+    event.target.value = '' // 清空 input 以便下次选择
+    return modal.info('所选文件已存在')
+  }
+
+  // 2. 数量检查
+  const currentCount = formData.value.files.length
+  const availableSlots = MAX_UPLOAD_COUNT - currentCount
+  
+  if (availableSlots <= 0) {
+    event.target.value = ''
+    return modal.warning(`已达到最大上传数量 (${MAX_UPLOAD_COUNT})`)
+  }
+
+  let filesToAdd = uniqueNewFiles
+  if (uniqueNewFiles.length > availableSlots) {
+    filesToAdd = uniqueNewFiles.slice(0, availableSlots)
+    modal.warning(`最多只能再添加 ${availableSlots} 张图片，已自动截取。`)
+  }
+
+  // 3. 大小检查
+  let currentTotalSize = formData.value.files.reduce((acc, f) => acc + f.size, 0)
+  const validFiles = []
+  
+  for (const file of filesToAdd) {
+    if (currentTotalSize + file.size > MAX_TOTAL_SIZE_MB * 1024 * 1024) {
+      modal.warning(`文件总大小超过 ${MAX_TOTAL_SIZE_MB}MB，部分文件未添加。`)
+      break
+    }
+    currentTotalSize += file.size
+    validFiles.push(file)
   }
-  event.target.value = ''
+
+  // 4. 追加文件
+  formData.value.files = [...formData.value.files, ...validFiles]
+  event.target.value = '' // 清空 input
 }
 
 const clearFiles = () => { 
@@ -268,41 +306,28 @@ const startSpecificPolling = (taskId) => {
   }, 3000)
 }
 
-// 加载默认配置
 const loadUserDefaults = async () => {
   try {
     const res = await getUserConfig()
     if (res?.config) {
       const cfg = res.config
-      
-      // 1. 设置类型
       if (cfg.data_type_id) {
         formData.value.style = (cfg.data_type_id === DATA_TYPE_MAP.ART) ? 'art' : 'face'
       }
-      
-      // 2. 设置算法
       if (cfg.perturbation_configs_id) {
         const algo = ALGO_OPTIONS_Data.find(a => a.id === cfg.perturbation_configs_id)
         if (algo && algo.type === formData.value.style) {
           formData.value.algorithm = cfg.perturbation_configs_id
         }
       }
-      
-      // 3. 设置强度并判断模式 (预设 vs 自定义)
       if (cfg.perturbation_intensity !== null && cfg.perturbation_intensity !== undefined) {
-        // 等待 algorithmSettings 根据新算法更新
         await nextTick()
-        
         formData.value.strength = cfg.perturbation_intensity
-        
-        //判断是否为预设值
         const p = algorithmSettings.value.presets
-        if (cfg.perturbation_intensity === p.low || 
-            cfg.perturbation_intensity === p.mid || 
-            cfg.perturbation_intensity === p.high) {
+        if (cfg.perturbation_intensity === p.low || cfg.perturbation_intensity === p.mid || cfg.perturbation_intensity === p.high) {
           isCustomMode.value = false
         } else {
-          isCustomMode.value = true // 如果不是预设值，切换到自定义滑块
+          isCustomMode.value = true
         }
       }
     }
@@ -320,56 +345,205 @@ onUnmounted(() => { if (specificPollTimer) clearInterval(specificPollTimer) })
 </script>
 
 <style scoped>
-/* 保持原有布局样式 */
-.kt-subpage__style-content { display: flex; flex-direction: column; min-width: 0; }
-.kt-subpage__upload-icon.success { color: var(--kt-accent); }
-.kt-dropdown-overlay { position: fixed; inset: 0; z-index: 90; }
-.kt-select-container { position: relative; width: 100%; }
-.kt-select-trigger { width: 100%; padding: 0.75rem 1rem; font-family: var(--kt-font); background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all var(--kt-transition-micro); color: var(--kt-fg); }
-.kt-select-trigger:hover, .kt-select-trigger.is-open { border-color: var(--kt-accent); }
-.kt-select-trigger .placeholder { color: var(--kt-muted-fg); }
-.kt-select-options { position: absolute; top: 110%; left: 0; width: 100%; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); z-index: 100; max-height: 25cqh; overflow-y: auto; padding: 0.5rem; }
-.kt-select-option { font-family: var(--kt-font); padding: 0.75rem 1rem; border-radius: var(--kt-radius); cursor: pointer; display: flex; justify-content: space-between; color: var(--kt-fg); transition: all var(--kt-transition-micro); }
-.kt-select-option:hover { background: var(--kt-muted); }
-.kt-select-option.selected { background: var(--kt-accent); color: var(--kt-accent-fg); }
-
-/* 强制固定高度，确保左右对齐 */
-.kt-form-header { 
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center; 
-  margin-bottom: 0.5rem; 
-  /* 右侧开关约42-44px，设置固定高度确保左侧（无开关）也被撑开同样高度 */
-  height: 44px; 
-}
-
-.kt-mode-toggle { display: flex; gap: 0.5rem; font-family: var(--kt-font); font-size: var(--kt-small); background: var(--kt-muted); padding: 0.25rem; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); }
-.kt-mode-toggle span { padding: 0.25rem 0.75rem; border-radius: var(--kt-radius); cursor: pointer; color: var(--kt-muted-fg); transition: all var(--kt-transition-micro); }
-.kt-mode-toggle span.active { background: var(--kt-bg); color: var(--kt-fg); font-weight: 700; }
-.kt-strength-selector { display: flex; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); padding: 0.25rem; }
-.kt-strength-item { flex: 1; text-align: center; padding: 0.5rem 0.5rem; border-radius: var(--kt-radius); cursor: pointer; font-family: var(--kt-font); font-size: var(--kt-small); color: var(--kt-fg); transition: all var(--kt-transition-micro); }
-.kt-strength-item:hover { background: var(--kt-muted); }
-.kt-strength-item.active { background: var(--kt-accent); color: var(--kt-accent-fg); font-weight: 600; }
-.kt-subpage__upload { position: relative; border: 3px dashed var(--kt-border); border-radius: var(--kt-radius); padding: var(--kt-card-padding); text-align: center; cursor: pointer; transition: all var(--kt-transition-micro); background: var(--kt-bg); }
-.kt-subpage__upload:hover { border-color: var(--kt-accent); background: var(--kt-muted); }
-.kt-subpage__upload.has-file { border-style: solid; border-color: var(--kt-accent); }
-.kt-clear-btn { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: var(--kt-bg); color: var(--kt-accent); border: var(--kt-border-width) solid var(--kt-accent); border-radius: var(--kt-radius); display: flex; align-items: center; justify-content: center; transition: all var(--kt-transition-micro); z-index: 10; cursor: pointer; }
-.kt-clear-btn:hover { background: var(--kt-accent); color: var(--kt-accent-fg); transform: scale(1.1); }
-
-/* 锁定状态 */
+.kt-subpage__style-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.kt-subpage__upload-icon.success {
+  color: var(--kt-accent);
+}
+
+.kt-dropdown-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+}
+
+.kt-select-container {
+  position: relative;
+  width: 100%;
+}
+
+.kt-select-trigger {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-family: var(--kt-font);
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  color: var(--kt-fg);
+}
+
+.kt-select-trigger:hover,
+.kt-select-trigger.is-open {
+  border-color: var(--kt-accent);
+}
+
+.kt-select-trigger .placeholder {
+  color: var(--kt-muted-fg);
+}
+
+.kt-select-options {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  width: 100%;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  z-index: 100;
+  max-height: 25cqh;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.kt-select-option {
+  font-family: var(--kt-font);
+  padding: 0.75rem 1rem;
+  border-radius: var(--kt-radius);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  color: var(--kt-fg);
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-select-option:hover {
+  background: var(--kt-muted);
+}
+
+.kt-select-option.selected {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+}
+
+.kt-form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  height: 44px;
+}
+
+.kt-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  background: var(--kt-muted);
+  padding: 0.25rem;
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+}
+
+.kt-mode-toggle span {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--kt-radius);
+  cursor: pointer;
+  color: var(--kt-muted-fg);
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-mode-toggle span.active {
+  background: var(--kt-bg);
+  color: var(--kt-fg);
+  font-weight: 700;
+}
+
+.kt-strength-selector {
+  display: flex;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: 0.25rem;
+}
+
+.kt-strength-item {
+  flex: 1;
+  text-align: center;
+  padding: 0.5rem 0.5rem;
+  border-radius: var(--kt-radius);
+  cursor: pointer;
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  color: var(--kt-fg);
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-strength-item:hover {
+  background: var(--kt-muted);
+}
+
+.kt-strength-item.active {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  font-weight: 600;
+}
+
+.kt-subpage__upload {
+  position: relative;
+  border: 3px dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: var(--kt-card-padding);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  background: var(--kt-bg);
+}
+
+.kt-subpage__upload:hover {
+  border-color: var(--kt-accent);
+  background: var(--kt-muted);
+}
+
+.kt-subpage__upload.has-file {
+  border-style: solid;
+  border-color: var(--kt-accent);
+}
+
+.kt-clear-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: var(--kt-bg);
+  color: var(--kt-accent);
+  border: var(--kt-border-width) solid var(--kt-accent);
+  border-radius: var(--kt-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--kt-transition-micro);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.kt-clear-btn:hover {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  transform: scale(1.1);
+}
+
 .kt-subpage__style-option.is-locked {
   opacity: 0.6;
   filter: grayscale(0.8);
   cursor: not-allowed;
 }
+
 .kt-lock-icon {
   margin-left: 0.5rem;
   font-size: 0.9em;
   color: var(--kt-muted-fg);
 }
 
-@media (max-width: 900px) { .kt-subpage__row { flex-direction: column; gap: 1.5rem; } .kt-subpage__style-selector { grid-template-columns: 1fr; } }
-
 .kt-upload-hint {
   display: block;
   font-size: 0.85em;
@@ -378,4 +552,15 @@ onUnmounted(() => { if (specificPollTimer) clearInterval(specificPollTimer) })
   margin-top: 0.25rem;
   letter-spacing: 0;
 }
+
+@media (max-width: 900px) {
+  .kt-subpage__row {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .kt-subpage__style-selector {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/views/Page2/Page2.vue b/src/frontend/src/views/Page2/Page2.vue
index 0b8ed1f..239e756 100644
--- a/src/frontend/src/views/Page2/Page2.vue
+++ b/src/frontend/src/views/Page2/Page2.vue
@@ -4,10 +4,8 @@
  */
 import { inject } from 'vue'
 
-// Inject subpage navigation from parent
 const openSubpage = inject('openSubpage')
 
-// Preserved original click handlers
 const handleOpenStyle = () => openSubpage('page2', 'style')
 const handleOpenFace = () => openSubpage('page2', 'face')
 const handleOpenCustom = () => openSubpage('page2', 'custom')
@@ -15,13 +13,11 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
 
 <template>
   <div class="kt-page kt-page2">
-    <!-- Header Section: Bilingual Title -->
     <header class="kt-header">
       <h1 class="kt-header__title-cn">专题防护</h1>
       <p class="kt-header__title-en">TOPIC PROTECTION</p>
     </header>
 
-    <!-- Main Feature Card: Style Transfer Defense -->
     <section class="kt-main-feature">
       <article 
         class="kt-card kt-card--hero kt-card--style"
@@ -30,44 +26,38 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
         @keydown.enter="handleOpenStyle"
         @keydown.space.prevent="handleOpenStyle"
       >
-        <!-- 左侧：文字信息 (40%) -->
         <div class="style-text-col">
           <div class="kt-card__hero-text">
-            <span class="kt-card__hero-line kt-card__hero-line--cn">风格防护</span>
+            <span class="kt-card__hero-line">风格<br>防护</span>
           </div>
           <div class="kt-card__content">
-            <p class="kt-card__subtitle">Style Protection</p>
-            <p class="kt-card__desc">针对艺术品防护，将AI视角的风格样式迁移到指定的无效关键词，保护原创画风不被模仿。</p>
+            <p class="kt-card__subtitle">STYLE PROTECTION</p>
+            <p class="kt-card__desc">针对画作等艺术品防护，保护原创画风不被学习。将作品的风格样误导到指定的无效风格。</p>
             <button class="kt-btn kt-btn--primary">
-              开始防护
+              进入防护配置
               <span aria-hidden="true">→</span>
             </button>
           </div>
         </div>
 
-        <!-- 右侧：视觉流 (60%) -->
         <div class="style-img-col">
           <div class="visual-flow">
-            <!-- Image 1: Unprotected Gen (左上) -->
             <div class="flow-item img-frame pos-top-left">
               <img src="/method_examples/style_trans_example/good_gen/validation_image_6.png" alt="Unprotected Gen" />
               <span class="flow-badge">GOOD_GEN</span>
             </div>
 
-            <!-- Image 2: Protected Gen (右下) -->
             <div class="flow-item img-frame frame-accent pos-bottom-right">
               <img src="/method_examples/style_trans_example/bad_gen/validation_image_7.png" alt="Protected Gen" />
-              <span class="flow-badge badge-accent">FAILED_GEN</span>
+              <span class="flow-badge badge-accent">FAILED GEN</span>
             </div>
           </div>
         </div>
       </article>
     </section>
 
-    <!-- Secondary Features: Dual-Column Cards -->
     <section class="kt-secondary-features">
       <div class="kt-features__grid">
-        <!-- Card 01: Face Edit Defense -->
         <article 
           class="kt-card kt-card--numbered"
           @click="handleOpenFace"
@@ -83,7 +73,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
           </div>
         </article>
 
-        <!-- Card 02: Custom Generation Defense -->
         <article 
           class="kt-card kt-card--numbered"
           @click="handleOpenCustom"
@@ -104,8 +93,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
 </template>
 
 <style scoped>
-/* ===== Page2 Kinetic Typography Styles ===== */
-
 .kt-page2 {
   min-height: 100%;
   display: flex;
@@ -114,7 +101,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   overflow-x: hidden;
 }
 
-/* ===== Header Section ===== */
 .kt-header {
   padding: 4rem var(--kt-container-px) 2rem;
 }
@@ -140,27 +126,22 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   margin: 0;
 }
 
-/* ===== Main Feature Section ===== */
 .kt-main-feature {
   padding: 0 var(--kt-container-px) 2rem;
 }
 
-/* 
- * ===== Style Transfer Defense Card (Split Layout) ===== 
- */
 .kt-card--style {
   display: flex;
-  flex-direction: row; 
+  flex-direction: row;
   align-items: stretch;
-  padding: 0; 
+  padding: 0;
   overflow: hidden;
   min-height: 400px;
 }
 
-/* Left Column: Text (40%) */
 .style-text-col {
-  flex: 0 0 40%;
-  padding: 4rem;
+  flex: 4;
+  padding: 2.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -169,54 +150,50 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   min-width: 0;
 }
 
-/* Right Column: Visuals (60%) */
 .style-img-col {
-  flex: 0 0 60%;
+  flex: 6;
   position: relative;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  min-height: 0;
 }
 
-/* === Visual Flow Styles (Staggered Layout) === */
 .visual-flow {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 360px;
-  padding: 0; 
+  padding: 0;
   box-sizing: border-box;
 }
 
-/* 图片通用样式 */
 .img-frame {
-  position: absolute; 
-  width: 44%; 
-  max-width: 480px;
-  min-width: 120px;
+  position: absolute;
+  width: 40%;
+  max-width: 450px;
+  min-width: 110px;
   aspect-ratio: 1;
   border: 2px solid var(--kt-border);
   border-radius: var(--kt-radius);
   background: var(--kt-bg);
   padding: 4px;
-  box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   z-index: 1;
 }
 
-/* 左上角图片位置 */
 .pos-top-left {
-  top: 8%;
-  left: 8%;
+  top: 10%;
+  left: 10%;
 }
 
-/* 右下角图片位置 */
 .pos-bottom-right {
-  bottom: 8%;
-  right: 8%;
-  z-index: 2; 
+  bottom: 10%;
+  right: 10%;
+  z-index: 2;
 }
 
 .img-frame img {
@@ -224,14 +201,13 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   height: 100%;
   object-fit: cover;
   display: block;
-  border-radius: 2px;
+  border-radius: 2px; 
 }
 
 .frame-accent {
   border-color: var(--kt-accent);
 }
 
-/* 标签样式 */
 .flow-badge {
   position: absolute;
   bottom: -12px;
@@ -256,7 +232,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   border-color: var(--kt-accent);
 }
 
-/* Hover Effects */
 .kt-card--style:hover .img-frame {
   transform: translateY(-8px);
   box-shadow: 0 30px 60px rgba(0,0,0,0.2);
@@ -274,7 +249,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   border-color: var(--kt-border) !important;
 }
 
-/* Text Styles */
 .kt-card__hero-text {
   margin-bottom: 1.5rem;
 }
@@ -282,18 +256,14 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
 .kt-card__hero-line {
   display: block;
   font-family: var(--kt-font);
-  font-size: clamp(2.5rem, 8vw, 6rem);
+  font-size: clamp(3rem, 10vw, 8rem); 
   font-weight: 700;
-  line-height: 0.9;
+  line-height: 1.1;
   letter-spacing: -0.02em;
   text-transform: uppercase;
   color: var(--kt-fg);
   transition: color var(--kt-transition-normal);
-}
-
-.kt-card__hero-line--cn {
-  letter-spacing: 0.05em;
-  line-height: 1.15; 
+  white-space: nowrap; 
 }
 
 .kt-card__content {
@@ -328,7 +298,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   margin-top: 0.5rem;
 }
 
-/* Card Hover States */
 .kt-card--style:hover .kt-card__hero-line,
 .kt-card--style:hover .kt-card__subtitle,
 .kt-card--style:hover .kt-card__desc,
@@ -346,25 +315,22 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   color: var(--kt-accent) !important;
 }
 
-/* ===== Secondary Features Section ===== */
 .kt-secondary-features {
   padding: 0 var(--kt-container-px) 2rem;
   flex: 1;
 }
 
-/* ===== Features Grid ===== */
 .kt-features__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
 }
 
-/* ===== Numbered Cards ===== */
 .kt-card--numbered {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 2rem;
+  padding: 1.5rem;
   min-height: 200px;
 }
 
@@ -374,7 +340,7 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   font-weight: 700;
   color: var(--kt-muted);
   line-height: 1;
-  margin-bottom: 1rem;
+  margin-bottom: 0.33rem;
   transition: color var(--kt-transition-normal);
 }
 
@@ -386,7 +352,7 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
 
 .kt-card__title {
   font-family: var(--kt-font);
-  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-size: clamp(1.5rem, 3vw, 2.5rem);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: -0.02em;
@@ -415,7 +381,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   transition: color var(--kt-transition-normal);
 }
 
-/* Numbered Card Hover */
 .kt-card--numbered:hover .kt-card__number,
 .kt-card--numbered:hover .kt-card__title,
 .kt-card--numbered:hover .kt-card__subtitle-en,
@@ -423,7 +388,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   color: var(--kt-accent-fg) !important;
 }
 
-/* ===== Base Card Styles ===== */
 .kt-card {
   background: var(--kt-bg);
   border: var(--kt-border-width) solid var(--kt-border);
@@ -447,7 +411,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   outline-offset: 2px;
 }
 
-/* ===== Button Styles ===== */
 .kt-btn {
   display: inline-flex;
   align-items: center;
@@ -487,7 +450,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   color: var(--kt-bg);
 }
 
-/* ===== Responsive Design ===== */
 @media (max-width: 900px) {
   .kt-header {
     padding: 2rem var(--kt-container-px) 1rem;
@@ -502,7 +464,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
     padding: 0 var(--kt-container-px) 1rem;
   }
   
-  /* Stack Style Card on Mobile */
   .kt-card--style {
     flex-direction: column;
     padding: 0;
@@ -520,7 +481,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
     background: transparent; 
   }
   
-  /* 移动端取消交错，恢复垂直排列 */
   .visual-flow {
     display: flex;
     flex-direction: column;
@@ -531,7 +491,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
     padding: 0;
   }
   
-  /* 移动端图片复位 */
   .img-frame {
     position: relative;
     width: 60%;
@@ -544,9 +503,10 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   
   .kt-card__hero-line {
     font-size: clamp(2rem, 10vw, 3.5rem);
+    white-space: normal; 
   }
   
-  .kt-card--style .kt-card__content {
+  .kt-card__content {
     gap: 0.75rem;
   }
   
@@ -575,7 +535,6 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
   }
 }
 
-/* ===== Reduced Motion ===== */
 @media (prefers-reduced-motion: reduce) {
   .kt-card {
     transition: none;
@@ -606,4 +565,4 @@ const handleOpenCustom = () => openSubpage('page2', 'custom')
     transform: none;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/frontend/src/views/Page2/subpages/SubpageContainer.vue b/src/frontend/src/views/Page2/subpages/SubpageContainer.vue
index 1633126..6c850f3 100644
--- a/src/frontend/src/views/Page2/subpages/SubpageContainer.vue
+++ b/src/frontend/src/views/Page2/subpages/SubpageContainer.vue
@@ -151,6 +151,7 @@ const loadingPresets = ref(false)
 const showLockedTip = ref(false)
 const lockedTipTimer = ref(null)
 const MAX_UPLOAD_COUNT = 5
+const MAX_TOTAL_SIZE_MB = 15
 
 const formData = ref({ taskName: '', targetStyle: '', files: [] })
 
@@ -211,6 +212,15 @@ const handleFileChange = (event) => {
   } else if (files.length > 0) {
     formData.value.files = files
   }
+  // 大小限制
+  let totalSize = 0
+  formData.value.files.forEach(f => totalSize += f.size)
+  
+  if (totalSize > MAX_TOTAL_SIZE_MB * 1024 * 1024) {
+    modal.warning(`所选图片总大小超过 ${MAX_TOTAL_SIZE_MB}MB，请压缩或减少图片数量。`)
+    clearFiles()
+    return
+  }
   event.target.value = ''
 }
 
@@ -270,34 +280,200 @@ const submitTask = async () => {
 </script>
 
 <style scoped>
-.kt-readonly-field { width: 100%; padding: 0.75rem 1rem; font-family: var(--kt-font); background: var(--kt-muted); border: var(--kt-border-width) dashed var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-muted-fg); display: flex; align-items: center; gap: 0.75rem; cursor: not-allowed; }
-.kt-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--kt-gap); }
-.kt-preset-card { background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); padding: 1rem; cursor: pointer; transition: all var(--kt-transition-micro); position: relative; }
-.kt-preset-card:hover { background: var(--kt-muted); transform: scale(1.02); }
-.kt-preset-card.active { background: var(--kt-accent); border-color: var(--kt-accent); }
-.kt-preset-card.active * { color: var(--kt-accent-fg) !important; }
-.kt-preset-name { font-family: var(--kt-font); font-weight: 700; font-size: var(--kt-small); margin-bottom: 0.25rem; color: var(--kt-fg); text-transform: uppercase; }
-.kt-preset-desc { font-family: var(--kt-font); font-size: clamp(0.625rem, 1vw, 0.75rem); color: var(--kt-muted-fg); line-height: 1.4; }
-.kt-preset-check { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--kt-accent-fg); }
-.kt-label-lock { font-size: 0.75em; color: var(--kt-muted-fg); margin-left: 0.25rem; }
-.kt-subpage__style-option.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kt-muted); border-style: dashed; }
-.kt-subpage__style-option.disabled:hover { transform: none; background: var(--kt-muted); }
-.kt-subpage__lock-mark { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--kt-muted-fg); font-size: 0.875rem; }
-.kt-subpage__hint { font-family: var(--kt-font); font-size: var(--kt-small); color: var(--kt-muted-fg); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; }
-.kt-locked-tip { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--kt-accent); color: var(--kt-accent-fg); border-radius: var(--kt-radius); font-family: var(--kt-font); font-size: var(--kt-small); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
-.kt-locked-tip i { font-size: 1rem; }
-.kt-tip-fade-enter-active, .kt-tip-fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
-.kt-tip-fade-enter-from, .kt-tip-fade-leave-to { opacity: 0; transform: translateY(-0.5rem); }
-.kt-subpage__upload { position: relative; border: 3px dashed var(--kt-border); border-radius: var(--kt-radius); padding: var(--kt-card-padding); text-align: center; cursor: pointer; transition: all var(--kt-transition-micro); background: var(--kt-bg); }
-.kt-subpage__upload:hover { border-color: var(--kt-accent); background: var(--kt-muted); }
-.kt-subpage__upload.has-file { border-style: solid; border-color: var(--kt-accent); }
-.kt-clear-btn { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: var(--kt-bg); color: var(--kt-accent); border: var(--kt-border-width) solid var(--kt-accent); border-radius: var(--kt-radius); display: flex; align-items: center; justify-content: center; transition: all var(--kt-transition-micro); z-index: 10; cursor: pointer; }
-.kt-clear-btn:hover { background: var(--kt-accent); color: var(--kt-accent-fg); transform: scale(1.1); }
+.kt-readonly-field {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-family: var(--kt-font);
+  background: var(--kt-muted);
+  border: var(--kt-border-width) dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-muted-fg);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: not-allowed;
+}
+
+.kt-preset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--kt-gap);
+}
+
+.kt-preset-card {
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: 1rem;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  position: relative;
+}
+
+.kt-preset-card:hover {
+  background: var(--kt-muted);
+  transform: scale(1.02);
+}
+
+.kt-preset-card.active {
+  background: var(--kt-accent);
+  border-color: var(--kt-accent);
+}
+
+.kt-preset-card.active * {
+  color: var(--kt-accent-fg) !important;
+}
+
+.kt-preset-name {
+  font-family: var(--kt-font);
+  font-weight: 700;
+  font-size: var(--kt-small);
+  margin-bottom: 0.25rem;
+  color: var(--kt-fg);
+  text-transform: uppercase;
+}
+
+.kt-preset-desc {
+  font-family: var(--kt-font);
+  font-size: clamp(0.625rem, 1vw, 0.75rem);
+  color: var(--kt-muted-fg);
+  line-height: 1.4;
+}
+
+.kt-preset-check {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  color: var(--kt-accent-fg);
+}
+
+.kt-label-lock {
+  font-size: 0.75em;
+  color: var(--kt-muted-fg);
+  margin-left: 0.25rem;
+}
+
+.kt-subpage__style-option.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--kt-muted);
+  border-style: dashed;
+}
+
+.kt-subpage__style-option.disabled:hover {
+  transform: none;
+  background: var(--kt-muted);
+}
+
+.kt-subpage__lock-mark {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  color: var(--kt-muted-fg);
+  font-size: 0.875rem;
+}
+
+.kt-subpage__hint {
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  color: var(--kt-muted-fg);
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kt-locked-tip {
+  margin-top: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  border-radius: var(--kt-radius);
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kt-locked-tip i {
+  font-size: 1rem;
+}
+
+.kt-tip-fade-enter-active,
+.kt-tip-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.kt-tip-fade-enter-from,
+.kt-tip-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+.kt-subpage__upload {
+  position: relative;
+  border: 3px dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: var(--kt-card-padding);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  background: var(--kt-bg);
+}
+
+.kt-subpage__upload:hover {
+  border-color: var(--kt-accent);
+  background: var(--kt-muted);
+}
+
+.kt-subpage__upload.has-file {
+  border-style: solid;
+  border-color: var(--kt-accent);
+}
+
+.kt-clear-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: var(--kt-bg);
+  color: var(--kt-accent);
+  border: var(--kt-border-width) solid var(--kt-accent);
+  border-radius: var(--kt-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--kt-transition-micro);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.kt-clear-btn:hover {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  transform: scale(1.1);
+}
+
 /* 锁定样式 */
-.kt-subpage__style-option.is-locked { opacity: 0.6; filter: grayscale(0.8); cursor: not-allowed; }
-.kt-lock-icon { margin-left: 0.5rem; color: var(--kt-muted-fg); }
+.kt-subpage__style-option.is-locked {
+  opacity: 0.6;
+  filter: grayscale(0.8);
+  cursor: not-allowed;
+}
 
-@media (max-width: 900px) { .kt-preset-grid { grid-template-columns: 1fr; } }
+.kt-lock-icon {
+  margin-left: 0.5rem;
+  color: var(--kt-muted-fg);
+}
+
+@media (max-width: 900px) {
+  .kt-preset-grid {
+    grid-template-columns: 1fr;
+  }
+}
 
 .kt-upload-hint {
   display: block;
diff --git a/src/frontend/src/views/Page3/Page3.vue b/src/frontend/src/views/Page3/Page3.vue
index 0e1d53b..15a1567 100644
--- a/src/frontend/src/views/Page3/Page3.vue
+++ b/src/frontend/src/views/Page3/Page3.vue
@@ -29,7 +29,7 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
         
         <div class="finetune-text-col">
           <div class="kt-card__hero-text">
-            <span class="kt-card__hero-line">微调生图验证</span>
+            <span class="kt-card__hero-line">微调生图<br>验证差异</span>
           </div>
           <div class="kt-card__content">
             <p class="kt-card__subtitle">FINE-TUNING VERIFICATION</p>
@@ -87,7 +87,7 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
         >
           <span class="kt-card__number" aria-hidden="true">02</span>
           <div class="kt-card__content">
-            <h2 class="kt-card__title">热力图差异分析</h2>
+            <h2 class="kt-card__title">热力图<br>差异分析</h2>
             <p class="kt-card__subtitle-en">HEATMAP</p>
             <p class="kt-card__desc">Attention Map 差异分析</p>
           </div>
@@ -144,35 +144,33 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
  */
 .kt-card--finetune {
   display: flex;
-  flex-direction: row; /* Split Layout */
+  flex-direction: row;
   align-items: stretch;
-  padding: 0; /* Remove default padding, handled by columns */
+  padding: 0;
   overflow: hidden;
   min-height: 400px;
 }
 
-/* Left Column: Text (40%) */
 .finetune-text-col {
-  flex: 0 0 40%;
-  padding: 4rem;
+  flex: 4;
+  padding: 2.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 2rem;
+  gap: 1.5rem;
   z-index: 2;
   min-width: 0;
 }
 
-/* Right Column: Visuals (60%) */
 .finetune-img-col {
-  flex: 0 0 60%; 
+  flex: 6;
   position: relative;
-  /* 透明背景，统一视觉 */
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  min-height: 0;
 }
 
 /* === Visual Flow Container === */
@@ -276,7 +274,7 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
 .kt-card__hero-line {
   display: block;
   font-family: var(--kt-font);
-  font-size: clamp(2rem, 5vw, 4rem); 
+  font-size: clamp(4rem, 6vw, 6rem); 
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.02em;
@@ -353,7 +351,7 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 2rem;
+  padding: 1.5rem;
   min-height: 200px;
 }
 
@@ -363,19 +361,19 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
   font-weight: 700;
   color: var(--kt-muted);
   line-height: 1;
-  margin-bottom: 1rem;
+  margin-bottom: 0.25rem;
   transition: color var(--kt-transition-normal);
 }
 
 .kt-card--numbered .kt-card__content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .kt-card__title {
   font-family: var(--kt-font);
-  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: -0.02em;
@@ -400,7 +398,7 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
   font-family: var(--kt-font);
   font-size: var(--kt-small);
   color: var(--kt-muted-fg);
-  margin: 0.5rem 0 0 0;
+  margin: 0.125rem 0 0 0;
   transition: color var(--kt-transition-normal);
 }
 
@@ -551,13 +549,13 @@ const handleOpenHeatmap = () => openSubpage('page3', 'heatmap')
   }
   
   .kt-card--numbered {
-    padding: 1.5rem;
+    padding: 0.5rem;
     min-height: auto;
   }
   
   .kt-card__number {
     font-size: clamp(2.5rem, 10vw, 4rem);
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.25rem;
   }
   
   .kt-card__title {
diff --git a/src/frontend/src/views/Page3/subpages/SubpageContainer.vue b/src/frontend/src/views/Page3/subpages/SubpageContainer.vue
index 82558bf..4569318 100644
--- a/src/frontend/src/views/Page3/subpages/SubpageContainer.vue
+++ b/src/frontend/src/views/Page3/subpages/SubpageContainer.vue
@@ -67,10 +67,7 @@
                     </div>
                   </div>
                 </div>
-                <div v-if="formData.sourceId && previewImage" class="kt-preview-area">
-                  <span class="kt-small-text">任务首图预览:</span>
-                  <img :src="previewImage" class="kt-preview-img" />
-                </div>
+                <!-- 移除预览区域 -->
               </div>
 
               <div v-else class="kt-subpage__form-group">
@@ -124,7 +121,11 @@
                 <label class="kt-subpage__label">自定义提示词 (可选，仅限英语描述)</label>
                 <input type="text" v-model="formData.customPrompt" class="kt-subpage__input" placeholder="补充状语，例如：standing in front of the Eiffel Tower" />
               </div>
-
+              
+              <p class="kt-input-hint">
+                <i class="fas fa-exclamation-circle"></i> 效果极度依赖提示词水平，仅作为扩展内容
+              </p>
+              
               <button class="kt-btn kt-btn--primary kt-subpage__submit-btn" @click="submitTask" :disabled="isSubmitting">
                 <i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-rocket'"></i>
                 {{ isSubmitting ? '提交中...' : '提交微调任务' }}
@@ -152,7 +153,13 @@
 
               <div v-if="subpageType === 'heatmap' && formData.sourceId" class="kt-subpage__form-group">
                 <label class="kt-subpage__label">选择目标图片</label>
-                <div class="kt-image-grid">
+                <div v-if="isLoadingImages" class="kt-loading-placeholder">
+                  <i class="fas fa-circle-notch fa-spin"></i>
+                  <span>正在加载图片资源...</span>
+                </div>
+                
+                 <div v-else class="kt-image-grid">
+                  <div v-if="taskImages.length === 0" class="kt-empty-text">暂无图片数据</div>
                   <div v-for="img in taskImages" :key="img.image_id" class="kt-image-item" :class="{ active: formData.selectedImageId === img.image_id }" @click="selectImage(img)">
                     <img :src="img.base64" loading="lazy" />
                     <div class="kt-image-check"><i class="fas fa-check"></i></div>
@@ -185,7 +192,7 @@ import TaskSideBar from '@/components/TaskSideBar.vue'
 import { useTaskStore } from '@/stores/taskStore'
 import { useUserStore } from '@/stores/userStore' 
 import { submitFinetuneFromPerturbation, submitFinetuneFromUpload, submitEvaluateTask, submitHeatmapTask, startFinetuneTask, startEvaluateTask } from '@/api/task'
-import { getTaskImagePreview } from '@/api/image'
+import { getTaskImages } from '@/api/image'
 import { FINETUNE_MAP } from '@/utils/constants'
 import modal from '@/utils/modal'
 
@@ -195,6 +202,7 @@ const userStore = useUserStore()
 const isSourceListOpen = ref(false)
 const fileInput = ref(null)
 const MAX_UPLOAD_COUNT = 5
+const MAX_TOTAL_SIZE_MB = 15
 
 const subpageType = computed(() => route.params.subpage)
 const pageTitle = computed(() => subpageType.value === 'fine-tuning' ? '微调生图验证' : (subpageType.value === 'heatmap' ? '热力图分析' : '数据指标对比'))
@@ -263,31 +271,43 @@ const selectSource = async (item) => {
   taskImages.value = []
   previewImage.value = null
   isLoadingImages.value = true
+  
   try {
-    if (subpageType.value === 'heatmap') {
-      const res = await getTaskImagePreview(item.id)
-      if (res && res.images) {
+    const res = await getTaskImages(item.id)
+    
+    if (res && res.images) {
+      if (subpageType.value === 'heatmap') {
+        // 热力图选择原图或加噪图
         const list = res.images.perturbed || res.images.original || []
-        taskImages.value = list.map(img => {
-          let rawData = img.data || img.base64 || ''
-          if (rawData && !rawData.startsWith('data:image')) rawData = `data:image/jpeg;base64,${rawData}`
-          return { ...img, image_id: img.image_id || img.id, base64: rawData }
-        })
-      }
-    } else {
-      const res = await getTaskImagePreview(item.id)
-      if (res && res.images) {
+        taskImages.value = list.map(img => ({
+          ...img,
+          image_id: img.image_id,
+          // 直接使用 Blob URL
+          base64: img.data 
+        }))
+      } else {
+        // 微调预览
         let targetImg = null
-        if (subpageType.value === 'fine-tuning') targetImg = res.images.perturbed?.[0] || res.images.original?.[0]
-        else targetImg = res.images.original_generate?.[0] || res.images.perturbed_generate?.[0] || res.images.uploaded_generate?.[0]
+        if (subpageType.value === 'fine-tuning') {
+          targetImg = (res.images.perturbed && res.images.perturbed[0]) || 
+                      (res.images.original && res.images.original[0])
+        } else {
+          targetImg = (res.images.original_generate && res.images.original_generate[0]) || 
+                      (res.images.perturbed_generate && res.images.perturbed_generate[0]) || 
+                      (res.images.uploaded_generate && res.images.uploaded_generate[0])
+        }
+        
         if (targetImg) {
-          let raw = targetImg.data || targetImg.base64 || ''
-          if (raw && !raw.startsWith('data:image')) raw = `data:image/jpeg;base64,${raw}`
-          previewImage.value = raw
+          // 直接使用 Blob URL
+          previewImage.value = targetImg.data
         }
       }
     }
-  } catch (error) { console.error('获取图片失败:', error) } finally { isLoadingImages.value = false }
+  } catch (error) { 
+    console.error('获取图片失败:', error) 
+  } finally { 
+    isLoadingImages.value = false 
+  }
 }
 
 const selectImage = (img) => formData.value.selectedImageId = img.image_id
@@ -301,6 +321,15 @@ const handleFileChange = (e) => {
   } else if (files.length > 0) {
     formData.value.files = files
   }
+  // 大小限制
+  let totalSize = 0
+  formData.value.files.forEach(f => totalSize += f.size)
+
+  if (totalSize > MAX_TOTAL_SIZE_MB * 1024 * 1024) {
+    modal.warning(`所选图片总大小超过 ${MAX_TOTAL_SIZE_MB}MB，请压缩或减少图片数量。`)
+    clearFiles()
+    return
+  }
   e.target.value = ''
 }
 
@@ -312,7 +341,6 @@ const clearFiles = () => {
 const submitTask = async () => {
   if (!formData.value.taskName) return modal.warning('请输入任务名称')
   
-  // 【功能说明】提交时二次校验权限
   if (finetuneMode.value === 'upload' && !userStore.isVip) return modal.warning('权限不足：上传微调仅限 VIP')
   if (formData.value.dataType === 2 && !userStore.isVip) return modal.warning('权限不足：艺术品微调仅限 VIP')
 
@@ -382,48 +410,254 @@ onMounted(() => taskStore.fetchTasks())
 </script>
 
 <style scoped>
-.kt-mode-tabs { display: flex; gap: 1rem; margin-bottom: 1.5rem; border-bottom: var(--kt-border-width) solid var(--kt-border); padding-bottom: 1rem; flex-wrap: wrap; }
-.kt-tab-btn { font-family: var(--kt-font); padding: 0.75rem 1.5rem; border: var(--kt-border-width) solid var(--kt-border); background: var(--kt-bg); cursor: pointer; font-size: var(--kt-small); color: var(--kt-muted-fg); font-weight: 600; border-radius: var(--kt-radius); transition: all var(--kt-transition-micro); text-transform: uppercase; letter-spacing: 0.05em; }
-.kt-tab-btn:hover { color: var(--kt-fg); transform: scale(1.02); }
-.kt-tab-btn.active { background: var(--kt-accent); color: var(--kt-accent-fg); border-color: var(--kt-accent); }
+.kt-mode-tabs {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: var(--kt-border-width) solid var(--kt-border);
+  padding-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.kt-tab-btn {
+  font-family: var(--kt-font);
+  padding: 0.75rem 1.5rem;
+  border: var(--kt-border-width) solid var(--kt-border);
+  background: var(--kt-bg);
+  cursor: pointer;
+  font-size: var(--kt-small);
+  color: var(--kt-muted-fg);
+  font-weight: 600;
+  border-radius: var(--kt-radius);
+  transition: all var(--kt-transition-micro);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.kt-tab-btn:hover {
+  color: var(--kt-fg);
+  transform: scale(1.02);
+}
+
+.kt-tab-btn.active {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  border-color: var(--kt-accent);
+}
 
 /* 锁定样式 */
-.kt-tab-btn.is-locked { opacity: 0.6; cursor: not-allowed; }
-
-.kt-source-selector { position: relative; }
-.kt-source-trigger { font-family: var(--kt-font); border: var(--kt-border-width) solid var(--kt-border); padding: 0.75rem 1rem; border-radius: var(--kt-radius); display: flex; justify-content: space-between; cursor: pointer; background: var(--kt-bg); transition: all var(--kt-transition-micro); color: var(--kt-fg); }
-.kt-source-trigger:hover { border-color: var(--kt-accent); }
-.kt-source-list { position: absolute; top: 100%; width: 100%; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); z-index: 10; max-height: 20cqh; overflow-y: auto; }
-.kt-source-item { font-family: var(--kt-font); padding: 0.75rem 1rem; cursor: pointer; display: flex; justify-content: space-between; color: var(--kt-fg); transition: all var(--kt-transition-micro); }
-.kt-source-item:hover { background: var(--kt-muted); }
-
-.kt-finetune-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
-.kt-finetune-option { position: relative; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); padding: 1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; transition: all var(--kt-transition-micro); }
-.kt-finetune-option:hover { background: var(--kt-muted); transform: scale(1.02); }
-.kt-finetune-option.active { background: var(--kt-accent); border-color: var(--kt-accent); }
-.kt-finetune-option.active * { color: var(--kt-accent-fg) !important; }
-.kt-finetune-title { font-family: var(--kt-font); font-weight: 700; font-size: var(--kt-small); color: var(--kt-fg); text-transform: uppercase; }
-.kt-finetune-desc { font-family: var(--kt-font); font-size: clamp(0.625rem, 1vw, 0.75rem); color: var(--kt-muted-fg); }
-
-.kt-preview-area { margin-top: 1rem; background: var(--kt-muted); border-radius: var(--kt-radius); padding: 1rem; border: var(--kt-border-width) dashed var(--kt-border); display: flex; align-items: center; gap: 1rem; }
-.kt-preview-img { height: 60px; width: 60px; object-fit: cover; border-radius: var(--kt-radius); border: var(--kt-border-width) solid var(--kt-border); }
-
-.kt-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 1rem; border: var(--kt-border-width) dashed var(--kt-border); border-radius: var(--kt-radius); padding: 1rem; background: var(--kt-bg); min-height: 150px; max-height: 300px; overflow-y: auto; }
-.kt-image-item { aspect-ratio: 1; border-radius: var(--kt-radius); overflow: hidden; position: relative; cursor: pointer; border: var(--kt-border-width) solid var(--kt-border); transition: all var(--kt-transition-micro); background: var(--kt-muted); }
-.kt-image-item img { width: 100%; height: 100%; object-fit: cover; }
-.kt-image-item:hover { transform: scale(1.05); }
-.kt-image-item.active { border-color: var(--kt-accent); }
-.kt-image-check { position: absolute; inset: 0; background: rgba(223, 225, 4, 0.4); display: none; align-items: center; justify-content: center; color: var(--kt-accent-fg); font-size: var(--kt-body); }
-.kt-image-item.active .kt-image-check { display: flex; }
-
-.kt-subpage__upload { position: relative; border: 3px dashed var(--kt-border); border-radius: var(--kt-radius); padding: var(--kt-card-padding); text-align: center; cursor: pointer; transition: all var(--kt-transition-micro); background: var(--kt-bg); }
-.kt-subpage__upload:hover { border-color: var(--kt-accent); background: var(--kt-muted); }
-.kt-subpage__upload.has-file { border-style: solid; border-color: var(--kt-accent); }
-
-.kt-clear-btn { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: var(--kt-bg); color: var(--kt-accent); border: var(--kt-border-width) solid var(--kt-accent); border-radius: var(--kt-radius); display: flex; align-items: center; justify-content: center; transition: all var(--kt-transition-micro); z-index: 10; cursor: pointer; }
-.kt-clear-btn:hover { background: var(--kt-accent); color: var(--kt-accent-fg); transform: scale(1.1); }
-
-@media (max-width: 900px) { .kt-mode-tabs { flex-direction: column; gap: 0.5rem; } .kt-tab-btn { width: 100%; text-align: center; } .kt-finetune-selector { grid-template-columns: 1fr; } }
+.kt-tab-btn.is-locked {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.kt-source-selector {
+  position: relative;
+}
+
+.kt-source-trigger {
+  font-family: var(--kt-font);
+  border: var(--kt-border-width) solid var(--kt-border);
+  padding: 0.75rem 1rem;
+  border-radius: var(--kt-radius);
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  background: var(--kt-bg);
+  transition: all var(--kt-transition-micro);
+  color: var(--kt-fg);
+}
+
+.kt-source-trigger:hover {
+  border-color: var(--kt-accent);
+}
+
+.kt-source-list {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  z-index: 10;
+  max-height: 20cqh;
+  overflow-y: auto;
+}
+
+.kt-source-item {
+  font-family: var(--kt-font);
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  color: var(--kt-fg);
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-source-item:hover {
+  background: var(--kt-muted);
+}
+
+.kt-finetune-selector {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+}
+
+.kt-finetune-option {
+  position: relative;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: 1rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-finetune-option:hover {
+  background: var(--kt-muted);
+  transform: scale(1.02);
+}
+
+.kt-finetune-option.active {
+  background: var(--kt-accent);
+  border-color: var(--kt-accent);
+}
+
+.kt-finetune-option.active * {
+  color: var(--kt-accent-fg) !important;
+}
+
+.kt-finetune-title {
+  font-family: var(--kt-font);
+  font-weight: 700;
+  font-size: var(--kt-small);
+  color: var(--kt-fg);
+  text-transform: uppercase;
+}
+
+.kt-finetune-desc {
+  font-family: var(--kt-font);
+  font-size: clamp(0.625rem, 1vw, 0.75rem);
+  color: var(--kt-muted-fg);
+}
+
+.kt-image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 1rem;
+  border: var(--kt-border-width) dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: 1rem;
+  background: var(--kt-bg);
+  min-height: 150px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.kt-image-item {
+  aspect-ratio: 1;
+  border-radius: var(--kt-radius);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  border: var(--kt-border-width) solid var(--kt-border);
+  transition: all var(--kt-transition-micro);
+  background: var(--kt-muted);
+}
+
+.kt-image-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kt-image-item:hover {
+  transform: scale(1.05);
+}
+
+.kt-image-item.active {
+  border-color: var(--kt-accent);
+}
+
+.kt-image-check {
+  position: absolute;
+  inset: 0;
+  background: rgba(223, 225, 4, 0.4);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--kt-accent-fg);
+  font-size: var(--kt-body);
+}
+
+.kt-image-item.active .kt-image-check {
+  display: flex;
+}
+
+.kt-subpage__upload {
+  position: relative;
+  border: 3px dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  padding: var(--kt-card-padding);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  background: var(--kt-bg);
+}
+
+.kt-subpage__upload:hover {
+  border-color: var(--kt-accent);
+  background: var(--kt-muted);
+}
+
+.kt-subpage__upload.has-file {
+  border-style: solid;
+  border-color: var(--kt-accent);
+}
+
+.kt-clear-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: var(--kt-bg);
+  color: var(--kt-accent);
+  border: var(--kt-border-width) solid var(--kt-accent);
+  border-radius: var(--kt-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--kt-transition-micro);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.kt-clear-btn:hover {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  transform: scale(1.1);
+}
+
+@media (max-width: 900px) {
+  .kt-mode-tabs {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .kt-tab-btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .kt-finetune-selector {
+    grid-template-columns: 1fr;
+  }
+}
 
 .kt-upload-hint {
   display: block;
@@ -433,4 +667,45 @@ onMounted(() => taskStore.fetchTasks())
   margin-top: 0.25rem;
   letter-spacing: 0;
 }
+
+.kt-input-hint {
+  font-family: var(--kt-font);
+  font-size: 0.85rem;
+  color: var(--kt-muted-fg);
+  margin-top: 0.25rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.kt-loading-placeholder {
+  width: 100%;
+  min-height: 150px;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) dashed var(--kt-border);
+  border-radius: var(--kt-radius);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: var(--kt-muted-fg);
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+}
+
+.kt-loading-placeholder i {
+  font-size: 2rem;
+  color: var(--kt-accent);
+}
+
+.kt-empty-text {
+  width: 100%;
+  text-align: center;
+  padding: 2rem;
+  color: var(--kt-muted-fg);
+  grid-column: 1 / -1;
+}
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/views/Page4/Page4.vue b/src/frontend/src/views/Page4/Page4.vue
index ecf79b3..85a2890 100644
--- a/src/frontend/src/views/Page4/Page4.vue
+++ b/src/frontend/src/views/Page4/Page4.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="kt-page kt-page4">
-    <!-- Header Section: Bilingual Title -->
-    <!-- Requirements: 4.7, 4.8 -->
+    <!-- Header Section -->
     <header class="kt-header">
       <div class="kt-header__content">
         <h1 class="kt-header__title-cn">任务历史</h1>
         <p class="kt-header__title-en">TASK HISTORY</p>
       </div>
       
-      <!-- Status Filter Tabs - Kinetic Typography Style -->
-      <!-- Requirements: 6.1 -->
+      <!-- Status Filter Tabs -->
       <div class="kt-filter-tabs">
         <button 
           v-for="tab in statusTabs" 
@@ -23,13 +21,11 @@
       </div>
     </header>
     
-    <!-- Main Content: Task Table Card -->
-    <!-- Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7 -->
+    <!-- Main Content -->
     <section class="kt-main-content">
       <div class="kt-table-card">
         
-        <!-- Toolbar: Search & Type Filter -->
-        <!-- Requirements: 6.2 -->
+        <!-- Toolbar -->
         <div class="kt-toolbar">
           <div class="kt-search-box">
             <i class="fas fa-search kt-search-icon" aria-hidden="true"></i>
@@ -43,99 +39,101 @@
 
           <div class="kt-type-filter">
             <i class="fas fa-filter kt-filter-icon" aria-hidden="true" style="z-index: 2;"></i>
-            <div style="width: 200px;"> <!-- 给一个宽度 -->
+            <div style="width: 200px;">
               <KtSelect 
                 v-model="selectedTaskType" 
                 :options="taskTypeOptions" 
                 placeholder="筛选类型"
               />
             </div>
-          </div> <!-- 补全闭合标签 -->
-        </div>
-
-        <!-- Desktop Table Header -->
-        <!-- Requirements: 5.1, 5.2 -->
-        <div class="kt-table-header">
-          <div class="kt-col kt-col--id kt-sortable" @click="handleSort('task_id', $event)">
-            ID <i :class="getSortIcon('task_id')" aria-hidden="true"></i>
-          </div>
-          <div class="kt-col kt-col--name kt-sortable" @click="handleSort('name', $event)">
-            任务名称 <i :class="getSortIcon('name')" aria-hidden="true"></i>
-          </div>
-          <div class="kt-col kt-col--type kt-sortable" @click="handleSort('task_type', $event)">
-            类型 <i :class="getSortIcon('task_type')" aria-hidden="true"></i>
-          </div>
-          <div class="kt-col kt-col--time kt-sortable" @click="handleSort('created_at', $event)">
-            创建时间 <i :class="getSortIcon('created_at')" aria-hidden="true"></i>
-          </div>
-          <div class="kt-col kt-col--status kt-sortable" @click="handleSort('status', $event)">
-            状态 <i :class="getSortIcon('status')" aria-hidden="true"></i>
           </div>
-          <div class="kt-col kt-col--action">操作</div>
         </div>
 
-        <!-- Table Body -->
-        <div class="kt-table-body">
-          <!-- Empty State -->
-          <div v-if="paginatedTasks.length === 0" class="kt-empty-state">
-            <i class="fas fa-inbox" aria-hidden="true"></i>
-            <p>暂无符合条件的任务</p>
+        <!-- 
+           这个容器统一处理 X轴(横向防挤压) 和 Y轴(列表滚动) 
+        -->
+        <div class="kt-table-scroll-area">
+          
+          <!-- Desktop Table Header (Sticky) -->
+          <div class="kt-table-header">
+            <div class="kt-col kt-col--id kt-sortable" @click="handleSort('virtual_id', $event)">
+              ID <i :class="getSortIcon('virtual_id')" aria-hidden="true"></i>
+            </div>
+            <div class="kt-col kt-col--name kt-sortable" @click="handleSort('name', $event)">
+              任务名称 <i :class="getSortIcon('name')" aria-hidden="true"></i>
+            </div>
+            <div class="kt-col kt-col--type kt-sortable" @click="handleSort('task_type', $event)">
+              类型 <i :class="getSortIcon('task_type')" aria-hidden="true"></i>
+            </div>
+            <div class="kt-col kt-col--time kt-sortable" @click="handleSort('created_at', $event)">
+              创建时间 <i :class="getSortIcon('created_at')" aria-hidden="true"></i>
+            </div>
+            <div class="kt-col kt-col--status kt-sortable" @click="handleSort('status', $event)">
+              状态 <i :class="getSortIcon('status')" aria-hidden="true"></i>
+            </div>
+            <div class="kt-col kt-col--action">操作</div>
           </div>
 
-          <!-- Task Rows -->
-          <div v-for="task in paginatedTasks" :key="task.task_id" class="kt-table-row">
-            
-            <!-- Mobile View -->
-            <div class="kt-mobile-view">
-              <div class="kt-mobile-header">
-                <span class="kt-id-badge">#{{ task.task_id }}</span>
-                <span class="kt-status-badge" :class="'kt-status--' + normalizeStatus(task.status)">
-                  {{ formatStatusLabel(task.status) }}
-                </span>
+          <!-- Table Body -->
+          <div class="kt-table-body">
+            <!-- Empty State -->
+            <div v-if="paginatedTasks.length === 0" class="kt-empty-state">
+              <i class="fas fa-inbox" aria-hidden="true"></i>
+              <p>暂无符合条件的任务</p>
+            </div>
+
+            <!-- Task Rows -->
+            <div v-for="task in paginatedTasks" :key="task.task_id" class="kt-table-row">
+              
+              <!-- Mobile View (Keep hidden on desktop) -->
+              <div class="kt-mobile-view">
+                <div class="kt-mobile-header">
+                  <span class="kt-id-badge">#{{ task.virtual_id }}</span>
+                  <span class="kt-status-badge" :class="'kt-status--' + normalizeStatus(task.status)">
+                    {{ formatStatusLabel(task.status) }}
+                  </span>
+                </div>
+                <div class="kt-mobile-name">{{ getTaskName(task) }}</div>
+                <div class="kt-mobile-meta">
+                  <span class="kt-type-tag">{{ formatTypeLabel(task.task_type) }}</span>
+                  <span class="kt-time-text">{{ formatDate(task.created_at) }}</span>
+                </div>
               </div>
-              <div class="kt-mobile-name">{{ getTaskName(task) }}</div>
-              <div class="kt-mobile-meta">
-                <span class="kt-type-tag">{{ formatTypeLabel(task.task_type) }}</span>
-                <span class="kt-time-text">{{ formatDate(task.created_at) }}</span>
+
+              <!-- Desktop Columns -->
+              <div class="kt-col kt-col--id kt-desktop-only">
+                <span class="kt-id-text">#{{ task.virtual_id }}</span>
               </div>
-            </div>
 
-            <!-- Desktop Columns -->
-            <div class="kt-col kt-col--id kt-desktop-only">
-              <span class="kt-id-text">#{{ task.task_id }}</span>
-            </div>
+              <div class="kt-col kt-col--name kt-desktop-only">
+                <span class="kt-task-name">{{ getTaskName(task) }}</span>
+              </div>
+              
+              <div class="kt-col kt-col--type kt-desktop-only">
+                <span class="kt-type-tag">{{ formatTypeLabel(task.task_type) }}</span>
+              </div>
 
-            <div class="kt-col kt-col--name kt-desktop-only">
-              <span class="kt-task-name">{{ getTaskName(task) }}</span>
-            </div>
-            
-            <div class="kt-col kt-col--type kt-desktop-only">
-              <span class="kt-type-tag">{{ formatTypeLabel(task.task_type) }}</span>
-            </div>
+              <div class="kt-col kt-col--time kt-desktop-only">
+                <span class="kt-time-text">{{ formatDate(task.created_at) }}</span>
+              </div>
+              
+              <div class="kt-col kt-col--status kt-desktop-only">
+                <span class="kt-status-badge" :class="'kt-status--' + normalizeStatus(task.status)">
+                  {{ formatStatusLabel(task.status) }}
+                </span>
+              </div>
 
-            <div class="kt-col kt-col--time kt-desktop-only">
-              <span class="kt-time-text">{{ formatDate(task.created_at) }}</span>
-            </div>
-            
-            <div class="kt-col kt-col--status kt-desktop-only">
-              <span class="kt-status-badge" :class="'kt-status--' + normalizeStatus(task.status)">
-                {{ formatStatusLabel(task.status) }}
-              </span>
-            </div>
+              <!-- Action Buttons -->
+              <div class="kt-col kt-col--action">
+                <button 
+                  v-if="userStore.role === 'admin'"
+                  class="kt-action-btn" 
+                  title="查看日志" 
+                  @click="handleViewLogs(task)"
+                >
+                  <i class="fas fa-terminal" aria-hidden="true"></i>
+                </button>
 
-            <!-- Action Buttons -->
-            <!-- Requirements: 6.3, 6.4, 6.5, 6.6, 6.7, 6.8 -->
-            <div class="kt-col kt-col--action">
-              <button 
-                v-if="userStore.role === 'admin'"
-                class="kt-action-btn" 
-                title="查看日志" 
-                @click="handleViewLogs(task)"
-              >
-                <i class="fas fa-terminal" aria-hidden="true"></i>
-              </button>
-
-                  <!-- 取消按钮：仅在运行中/排队中显示 -->
                 <button 
                   v-if="['pending','waiting','processing','running'].includes(task.status)" 
                   class="kt-action-btn kt-action-btn--danger" 
@@ -145,7 +143,6 @@
                   <i class="fas fa-stop" aria-hidden="true"></i>
                 </button>
                 
-                <!-- 新增：重启按钮：仅在失败/已取消显示 -->
                 <button 
                   v-if="['failed', 'cancelled'].includes(task.status)" 
                   class="kt-action-btn kt-action-btn--warning" 
@@ -155,7 +152,6 @@
                   <i class="fas fa-redo" aria-hidden="true"></i>
                 </button>
 
-                <!-- 预览/下载按钮：仅在完成/失败（如果后端有报告）显示 -->
                 <button 
                   v-if="task.status === 'completed'" 
                   class="kt-action-btn kt-action-btn--primary" 
@@ -174,21 +170,20 @@
                   <i class="fas fa-download" aria-hidden="true"></i>
                 </button>
 
-                <!-- 新增：删除按钮：在已完成/失败/已取消时显示 -->
                 <button 
-                  v-if="['completed', 'failed', 'cancelled'].includes(task.status)" 
+                  v-if="['failed', 'cancelled'].includes(task.status)" 
                   class="kt-action-btn kt-action-btn--danger" 
                   title="删除任务"
                   @click="handleDelete(task)"
                 >
                   <i class="fas fa-trash" aria-hidden="true"></i>
                 </button>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- Pagination -->
-        <!-- Requirements: 6.8 -->
         <div class="kt-pagination">
           <button 
             class="kt-page-btn" 
@@ -215,6 +210,7 @@
     <ImagePreviewModal 
       :is-open="showPreview" 
       :task-id="previewTaskId" 
+      :virtual-id="previewVirtualId" 
       :task-type="previewTaskType" 
       @close="showPreview = false" 
     />
@@ -250,24 +246,23 @@
         </div>
       </div>
     </Teleport>
-
-   
   </div>
 </template>
 
 <script setup>
 import KtSelect from '@/components/KtSelect.vue'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useTaskStore } from '@/stores/taskStore'
 import { useUserStore } from '@/stores/userStore'
-import { getTaskResultImages, cancelTask, getTaskLogs, restartTask, deleteTask } from '@/api/task'
+import { cancelTask, getTaskLogs, restartTask, deleteTask } from '@/api/task'
+import { getTaskImages } from '@/api/image'
 import JSZip from 'jszip'
 import ImagePreviewModal from '@/components/ImagePreviewModal.vue'
 import modal from '@/utils/modal'
 
 const taskTypeOptions = [
   { label: '所有类型', value: 'all' },
-  { label: '通用防护', value: 'perturbation' },
+  { label: '加噪防护', value: 'perturbation' },
   { label: '微调验证', value: 'finetune' },
   { label: '数据评估', value: 'evaluate' },
   { label: '热力图', value: 'heatmap' }
@@ -275,47 +270,57 @@ const taskTypeOptions = [
 
 const taskStore = useTaskStore()
 const userStore = useUserStore()
-
-// Filter state
 const currentStatus = ref('all')
 const searchKeyword = ref('')
 const selectedTaskType = ref('all')
 
+// 监听筛选条件变化，重置页码
+watch([searchKeyword, selectedTaskType], () => {
+  currentPage.value = 1
+})
+
 const statusTabs = [
   { key: 'all', label: '全部' },
   { key: 'running', label: '进行中' },
   { key: 'completed', label: '已完成' },
-  { key: 'failed', label: '失败' }
+  { key: 'failed', label: '失败' } 
 ]
 const sortRules = ref([{ field: 'created_at', direction: 'desc' }])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const showPreview = ref(false)
 const previewTaskId = ref(null)
+const previewVirtualId = ref(null)
 const previewTaskType = ref('') 
 
 const showLogModal = ref(false)
 const currentLogTaskId = ref(null)
 const logContent = ref('')
 
-
-
 const normalizeStatus = (status) => {
-  if (['pending', 'processing', 'waiting', 'running'].includes(status)) return 'running'
-  return status
+  const s = status ? status.toLowerCase() : ''
+  if (['pending', 'processing', 'waiting', 'running'].includes(s)) return 'running'
+  if (s === 'cancelled') return 'cancelled'
+  return s
 }
 
 const formatStatusLabel = (s) => {
+  const key = s ? s.toLowerCase() : ''
   const map = { 
-    running: '运行中', processing: '处理中', pending: '排队中', waiting: '排队中', 
-    completed: '已完成', failed: '失败' 
+    running: '运行中', 
+    processing: '处理中', 
+    pending: '排队中', 
+    waiting: '排队中', 
+    completed: '已完成', 
+    failed: '失败',
+    cancelled: '已取消'
   }
-  return map[s] || s
+  return map[key] || s
 }
 
 const formatTypeLabel = (t) => {
   const map = {
-    perturbation: '通用防护',
+    perturbation: '加噪防护',
     finetune: '微调验证',
     evaluate: '数据评估',
     heatmap: '热力图'
@@ -336,10 +341,18 @@ const formatDate = (iso) => iso ? new Date(iso).toLocaleString('zh-CN', { hour12
 const handleStatusChange = (status) => { currentStatus.value = status; currentPage.value = 1 }
 
 const filteredAndSortedTasks = computed(() => {
-  let result = [...(taskStore.tasks || [])]
+  const sortedByPk = [...(taskStore.tasks || [])].sort((a, b) => a.task_id - b.task_id);
+  let result = sortedByPk.map((t, index) => ({
+    ...t,
+    virtual_id: index + 1 
+  }));
   
   if (currentStatus.value !== 'all') {
-    result = result.filter(t => normalizeStatus(t.status) === currentStatus.value)
+    if (currentStatus.value === 'failed') {
+      result = result.filter(t => ['failed', 'cancelled'].includes(t.status?.toLowerCase()))
+    } else {
+      result = result.filter(t => normalizeStatus(t.status) === currentStatus.value)
+    }
   }
 
   if (selectedTaskType.value !== 'all') {
@@ -349,9 +362,10 @@ const filteredAndSortedTasks = computed(() => {
   if (searchKeyword.value.trim()) {
     const keyword = searchKeyword.value.toLowerCase().trim()
     result = result.filter(t => {
+      const virtualIdMatch = String(t.virtual_id).includes(keyword)
       const idMatch = String(t.task_id).includes(keyword)
       const nameMatch = getTaskName(t).toLowerCase().includes(keyword)
-      return idMatch || nameMatch
+      return virtualIdMatch || idMatch || nameMatch
     })
   }
 
@@ -387,13 +401,13 @@ const getSortIcon = (field) => {
 
 const handlePreview = (task) => {
   previewTaskId.value = task.task_id
+  previewVirtualId.value = task.virtual_id
   previewTaskType.value = task.task_type 
   showPreview.value = true
 }
 
-// handleCancel (仅取消运行中/排队中的任务)
 const handleCancel = async (task) => {
-  const confirmed = await modal.confirm(`确定要终止任务 #${task.task_id} 吗？`)
+  const confirmed = await modal.confirm(`确定要终止任务 #${task.virtual_id} 吗？`)
   if (!confirmed) return
   try {
     await cancelTask(task.task_id)
@@ -405,9 +419,8 @@ const handleCancel = async (task) => {
   }
 }
 
-// 处理任务重启
 const handleRestart = async (task) => {
-  const confirmed = await modal.confirm(`确定要重启任务 #${task.task_id} 吗？`)
+  const confirmed = await modal.confirm(`确定要重启任务 #${task.virtual_id} 吗？`)
   if (!confirmed) return
   try {
     await restartTask(task.task_id)
@@ -419,14 +432,21 @@ const handleRestart = async (task) => {
   }
 }
 
-// 处理任务删除
 const handleDelete = async (task) => {
-  const confirmed = await modal.confirm(`确定要彻底删除任务 #${task.task_id} 吗？此操作无法撤销。`)
+  const confirmed = await modal.confirm(`确定要彻底删除任务 #${task.virtual_id} 吗？此操作无法撤销。`)
   if (!confirmed) return
   try {
     await deleteTask(task.task_id)
     modal.success('任务已彻底删除')
-    taskStore.fetchTasks()
+    await taskStore.fetchTasks() // 等待更新
+    
+    //删除后如果当前页变空且不是第一页，自动前翻
+    const totalItems = filteredAndSortedTasks.value.length
+    const maxPage = Math.ceil(totalItems / pageSize.value) || 1
+    
+    if (currentPage.value > maxPage) {
+      currentPage.value = maxPage
+    }
   } catch (e) {
     console.error(e)
     modal.error('删除失败: ' + e.message)
@@ -434,7 +454,7 @@ const handleDelete = async (task) => {
 }
 
 const handleViewLogs = async (task) => {
-  currentLogTaskId.value = task.task_id
+  currentLogTaskId.value = task.virtual_id 
   logContent.value = '' 
   showLogModal.value = true
   
@@ -451,87 +471,63 @@ const handleViewLogs = async (task) => {
 }
 
 const handleDownload = async (task) => {
-  if (task.status !== 'completed') {
-    return modal.warning('任务未完成，无法下载')
-  }
-
-  modal.info('正在准备下载文件，请稍候...') // 给出反馈
-
+  if (task.status !== 'completed') return modal.warning('任务未完成')
+  
   try {
-    // 1. 调用接口获取任务结果图片数据
-    const res = await getTaskImagePreview(task.task_id)
-
-    if (!res || !res.images) {
-      return modal.warning('任务结果中未找到图片数据')
-    }
+    // 1. 调用 getTaskImages 获取解析好的对象
+    const res = await getTaskImages(task.task_id)
     
-    // 2. 整合所有图片到一个列表中
-    const allImages = []
-    // 合并所有结果图片列表（finetune, perturbation, heatmap, report）
-    Object.values(res.images).forEach(list => {
+    const zip = new JSZip()
+    const folder = zip.folder(`task_${task.virtual_id}`)
+    let hasImg = false
+
+    // 2. 遍历所有类型的图片列表
+    if (res && res.images) {
+      Object.keys(res.images).forEach(type => {
+        const list = res.images[type]
         if (Array.isArray(list)) {
-            allImages.push(...list)
+          list.forEach(img => {
+            if (img.blob) {
+              // 优先使用后端返回的文件名，如果没有则构造
+              const fileName = img.filename || `${type}_${img.image_id}.png`
+              // 直接将 Blob 放入 zip
+              folder.file(fileName, img.blob)
+              hasImg = true
+            }
+          })
         }
-    })
-
-    if (allImages.length === 0) {
-      return modal.warning('任务结果中未找到图片数据')
+      })
     }
 
-    const zip = new JSZip()
-    const folder = zip.folder(`task_${task.task_id}_${task.task_type}`)
-    
-    // 3. 将 Blob 或 Base64 数据添加到 ZIP 文件
-    for (const img of allImages) {
-      const filename = img.filename || `${img.image_type || 'unknown'}_${img.image_id}.png`
-      const dataUrl = img.data // 这里的 data 是 Blob URL 或 Base64
-
-      if (dataUrl.startsWith('blob:')) {
-        // 如果是 Blob URL，需要先 fetch 转换成 ArrayBuffer
-        const blob = await fetch(dataUrl).then(r => r.blob())
-        // ArrayBuffer 比 Base64 性能更好
-        folder.file(filename, blob, { binary: true }) 
-      } else if (dataUrl.startsWith('data:')) {
-        // 如果是 Base64 数据（包含前缀），需要提取出 Base64 字符串
-        const base64String = dataUrl.split(',')[1]
-        folder.file(filename, base64String, { base64: true })
-      }
-    }
+    if (!hasImg) return modal.warning('无图片数据')
     
-    // 4. 生成 ZIP 文件并触发下载
+    // 3. 生成 ZIP 并触发下载
     const content = await zip.generateAsync({ type: 'blob' })
     const url = URL.createObjectURL(content)
     const link = document.createElement('a')
     link.href = url
-    link.download = `museguard_task_${task.task_id}_${task.task_type}.zip`
+    link.download = `task_${task.virtual_id}.zip`
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
-    URL.revokeObjectURL(url) // 释放 Blob URL
+    URL.revokeObjectURL(url)
     
-    modal.success('文件打包完成，下载已开始')
-    
-  } catch (e) {
-    console.error('下载打包失败:', e)
-    modal.error('下载打包失败: ' + (e.message || '未知错误'))
+  } catch (e) { 
+    console.error(e)
+    modal.error('下载出错: ' + (e.message || '未知错误')) 
   }
 }
 
 onMounted(() => {
-  // 1. 检查 Session Storage 是否有过滤状态
   const savedStatus = sessionStorage.getItem('kt_task_filter_status')
-  
   if (savedStatus) {
     currentStatus.value = savedStatus
-    sessionStorage.removeItem('kt_task_filter_status') // 使用后清除，避免下次刷新保留状态
+    sessionStorage.removeItem('kt_task_filter_status')
   }
-
-  // 2. 加载任务列表
   taskStore.fetchTasks()
 })
 </script>
 
-
 <style scoped>
 .kt-page4 {
   min-height: 100%;
@@ -551,61 +547,189 @@ onMounted(() => {
   gap: 2rem;
 }
 
-.kt-header__content { flex: 1; min-width: 200px; }
-.kt-header__title-cn { font-family: var(--kt-font); font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; color: var(--kt-fg); margin: 0 0 0.5rem 0; }
-.kt-header__title-en { font-family: var(--kt-font); font-size: clamp(0.875rem, 1.5vw, 1.25rem); color: var(--kt-muted-fg); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 400; margin: 0; }
-.kt-filter-tabs { display: flex; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); overflow: hidden; }
-.kt-filter-tab { font-family: var(--kt-font); padding: 0.75rem 1.5rem; font-size: var(--kt-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kt-muted-fg); background: transparent; border: none; cursor: pointer; transition: all var(--kt-transition-micro); }
-.kt-filter-tab:hover { color: var(--kt-fg); background: var(--kt-muted); }
-.kt-filter-tab--active { background: var(--kt-fg); color: var(--kt-bg); }
-.kt-filter-tab--active:hover { background: var(--kt-fg); color: var(--kt-bg); }
-.kt-main-content { padding: 0 var(--kt-container-px); flex: 1; }
-.kt-table-card { background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); display: flex; flex-direction: column; min-height: 500px; overflow: hidden; }
-.kt-toolbar { display: flex; justify-content: flex-start; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; border-bottom: var(--kt-border-width) solid var(--kt-border); }
-.kt-search-box { position: relative; width: 300px; }
-.kt-search-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: var(--kt-muted-fg); font-size: var(--kt-small); }
-.kt-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; font-family: var(--kt-font); font-size: var(--kt-small); font-weight: 400; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-fg); outline: none; transition: border-color var(--kt-transition-micro); }
-.kt-search-input::placeholder { color: var(--kt-muted-fg); }
-.kt-search-input:focus { border-color: var(--kt-accent); }
+.kt-header__content {
+  flex: 1;
+  min-width: 200px;
+}
+
+.kt-header__title-cn {
+  font-family: var(--kt-font);
+  font-size: clamp(2.5rem, 8vw, 6rem);
+  font-weight: 700;
+  line-height: 0.9;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  color: var(--kt-fg);
+  margin: 0 0 0.5rem 0;
+}
+
+.kt-header__title-en {
+  font-family: var(--kt-font);
+  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
+  color: var(--kt-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-weight: 400;
+  margin: 0;
+}
+
+.kt-filter-tabs {
+  display: flex;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  overflow: hidden;
+}
+
+.kt-filter-tab {
+  font-family: var(--kt-font);
+  padding: 0.75rem 1.5rem;
+  font-size: var(--kt-small);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--kt-muted-fg);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-filter-tab:hover {
+  color: var(--kt-fg);
+  background: var(--kt-muted);
+}
+
+.kt-filter-tab--active {
+  background: var(--kt-fg);
+  color: var(--kt-bg);
+}
+
+.kt-filter-tab--active:hover {
+  background: var(--kt-fg);
+  color: var(--kt-bg);
+}
+
+.kt-main-content {
+  padding: 0 var(--kt-container-px);
+  flex: 1;
+}
+
+.kt-table-card {
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  display: flex;
+  flex-direction: column;
+  min-height: 500px;
+  overflow: hidden;
+}
+
+.kt-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem 2rem;
+  border-bottom: var(--kt-border-width) solid var(--kt-border);
+}
+
+.kt-search-box {
+  position: relative;
+  width: 300px;
+}
+
+.kt-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  color: var(--kt-muted-fg);
+  font-size: var(--kt-small);
+}
+
+.kt-search-input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 2.5rem;
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  font-weight: 400;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-fg);
+  outline: none;
+  transition: border-color var(--kt-transition-micro);
+}
+
+.kt-search-input::placeholder {
+  color: var(--kt-muted-fg);
+}
+
+.kt-search-input:focus {
+  border-color: var(--kt-accent);
+}
 
 .kt-type-filter {
   display: flex;
   align-items: center;
   gap: 1rem;
-  position: relative; 
+  position: relative;
 }
 
-.kt-filter-icon { 
-  position: absolute; 
-  top: 50%; 
-  left: 1rem; 
-  transform: translateY(-50%); 
-  color: var(--kt-muted-fg); 
-  font-size: var(--kt-small); 
-  pointer-events: none; 
-  /* 确保层级高于下拉框 */
-  z-index: 5; 
+.kt-filter-icon {
+  position: absolute;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  color: var(--kt-muted-fg);
+  font-size: var(--kt-small);
+  pointer-events: none;
+  z-index: 5;
 }
 
 .kt-type-filter :deep(.kt-select-trigger) {
   padding-left: 2.5rem;
 }
 
-.kt-select { font-family: var(--kt-font); padding: 0.75rem 2rem 0.75rem 2.5rem; font-size: var(--kt-small); font-weight: 400; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-fg); cursor: pointer; appearance: none; outline: none; transition: border-color var(--kt-transition-micro); }
-.kt-select:focus { border-color: var(--kt-accent); }
+.kt-select {
+  font-family: var(--kt-font);
+  padding: 0.75rem 2rem 0.75rem 2.5rem;
+  font-size: var(--kt-small);
+  font-weight: 400;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-fg);
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  transition: border-color var(--kt-transition-micro);
+}
 
-.kt-table-header {
+.kt-select:focus {
+  border-color: var(--kt-accent);
+}
+
+.kt-table-scroll-area {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.kt-table-header,
+.kt-table-row {
   display: grid;
-  grid-template-columns: 
-    minmax(60px, 0.5fr)    /* ID */
-    minmax(150px, 2.5fr)   /* Name: 减小最小宽度和权重，给右侧留空间 */
-    minmax(90px, 1fr)      /* Type: 微调 */
-    minmax(160px, 1.5fr)   /* Time */
-    minmax(100px, 1fr)     /* Status */
-    minmax(160px, 1.2fr);  /* Action: 最小宽度 160px，防止重叠 */
-  
-  padding: 1rem 2rem;
+  grid-template-columns: 80px minmax(250px, 1fr) 120px 200px 120px 240px;
+  min-width: 1100px;
   align-items: center;
+  gap: 1rem;
+}
+
+.kt-table-header {
+  padding: 1rem 2rem;
   background: var(--kt-muted);
   border-bottom: var(--kt-border-width) solid var(--kt-border);
   font-family: var(--kt-font);
@@ -614,75 +738,248 @@ onMounted(() => {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--kt-muted-fg);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  width: fit-content;
+  min-width: max(100%, 1100px);
 }
 
-.kt-sortable { cursor: pointer; user-select: none; transition: color var(--kt-transition-micro); }
-.kt-sortable:hover { color: var(--kt-fg); }
-.kt-sort-active { color: var(--kt-accent); }
-.kt-sort-dim { opacity: 0.3; }
-
 .kt-table-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: auto; /* 允许水平滚动 */
-}
-
-/* 为了确保表头和内容在极窄屏幕下不乱，给它们加个最小宽度 */
-.kt-table-header, .kt-table-row {
-  min-width: 800px; 
+  display: flex;
+  flex-direction: column;
+  min-width: fit-content;
 }
-.kt-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: var(--kt-muted-fg); font-family: var(--kt-font); font-size: var(--kt-body); }
-.kt-empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
 
 .kt-table-row {
-  display: grid;
-  grid-template-columns: 
-    minmax(60px, 0.5fr) 
-    minmax(150px, 2.5fr) 
-    minmax(90px, 1fr) 
-    minmax(160px, 1.5fr) 
-    minmax(100px, 1fr) 
-    minmax(160px, 1.2fr);
-    
   padding: 1.25rem 2rem;
-  align-items: center;
   border-bottom: var(--kt-border-width) solid var(--kt-border);
   background: var(--kt-bg);
   transition: background var(--kt-transition-micro);
 }
 
-.kt-table-row:hover { background: var(--kt-muted); }
-.kt-col { display: flex; align-items: center; }
-.kt-col--action { justify-content: flex-end; gap: 0.5rem; }
-.kt-id-text { font-family: var(--kt-font); font-size: var(--kt-small); font-weight: 600; color: var(--kt-muted-fg); }
-.kt-task-name { font-family: var(--kt-font); font-size: var(--kt-small); font-weight: 600; color: var(--kt-fg); white-space: normal; word-break: break-word; line-height: 1.4; }
-.kt-time-text { font-family: var(--kt-font); font-size: var(--kt-small); color: var(--kt-muted-fg); font-variant-numeric: tabular-nums; }
-.kt-type-tag { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-family: var(--kt-font); font-size: clamp(0.625rem, 1vw, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--kt-muted); color: var(--kt-fg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); }
-.kt-status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.75rem; font-family: var(--kt-font); font-size: clamp(0.625rem, 1vw, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); min-width: 80px; }
-.kt-status--completed { background: var(--kt-accent); color: var(--kt-accent-fg); border-color: var(--kt-accent); }
-.kt-status--running { background: transparent; color: var(--kt-accent); border-color: var(--kt-accent); }
-.kt-status--failed { background: #991b1b; color: #fef2f2; border-color: #991b1b; }
-.kt-action-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--kt-font); font-size: var(--kt-small); background: transparent; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-muted-fg); cursor: pointer; transition: all var(--kt-transition-micro); }
-.kt-action-btn:hover { background: var(--kt-muted); color: var(--kt-fg); transform: scale(1.05); }
-.kt-action-btn:active { transform: scale(0.95); }
-.kt-action-btn--primary:hover { background: var(--kt-accent); color: var(--kt-accent-fg); border-color: var(--kt-accent); }
-.kt-action-btn--success:hover { background: #22c55e; color: #000; border-color: #22c55e; }
-.kt-action-btn--danger:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
-.kt-pagination { padding: 1.5rem 2rem; display: flex; justify-content: flex-end; align-items: center; border-top: var(--kt-border-width) solid var(--kt-border); background: var(--kt-bg); }
-.kt-page-info { font-family: var(--kt-font); font-size: var(--kt-small); color: var(--kt-muted-fg); margin: 0 1rem; font-weight: 500; }
-.kt-page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-fg); cursor: pointer; transition: all var(--kt-transition-micro); }
-.kt-page-btn:hover:not(:disabled) { background: var(--kt-muted); transform: scale(1.05); }
-.kt-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-.kt-mobile-view { display: none; }
-.kt-desktop-only { display: flex; }
-
-
-
-/* 
-   ===========================================
-   Log Modal (VS Code Style) - Fixed Colors
-   ===========================================
-*/
+.kt-table-row:hover {
+  background: var(--kt-muted);
+}
+
+.kt-col {
+  display: flex;
+  align-items: center;
+}
+
+.kt-col--action {
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.kt-sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--kt-transition-micro);
+}
+
+.kt-sortable:hover {
+  color: var(--kt-fg);
+}
+
+.kt-sort-active {
+  color: var(--kt-accent);
+}
+
+.kt-sort-dim {
+  opacity: 0.3;
+}
+
+.kt-id-text {
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  font-weight: 600;
+  color: var(--kt-muted-fg);
+}
+
+.kt-task-name {
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  font-weight: 600;
+  color: var(--kt-fg);
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.kt-time-text {
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  color: var(--kt-muted-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.kt-type-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  font-family: var(--kt-font);
+  font-size: clamp(0.625rem, 1vw, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--kt-muted);
+  color: var(--kt-fg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  white-space: nowrap;
+}
+
+.kt-status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.15rem 0.5rem;
+  font-family: var(--kt-font);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  min-width: 50px;
+  width: fit-content;
+  white-space: nowrap;
+}
+
+.kt-status--completed {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  border-color: var(--kt-accent);
+}
+
+.kt-status--running {
+  background: transparent;
+  color: var(--kt-accent);
+  border-color: var(--kt-accent);
+}
+
+.kt-status--failed {
+  background: #991b1b;
+  color: #fef2f2;
+  border-color: #991b1b;
+}
+
+.kt-status--cancelled {
+  background: var(--kt-muted);
+  color: var(--kt-muted-fg);
+  border-color: var(--kt-border);
+}
+
+.kt-action-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  background: transparent;
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-muted-fg);
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+  flex-shrink: 0;
+}
+
+.kt-action-btn:hover {
+  background: var(--kt-muted);
+  color: var(--kt-fg);
+  transform: scale(1.05);
+}
+
+.kt-action-btn:active {
+  transform: scale(0.95);
+}
+
+.kt-action-btn--primary:hover {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+  border-color: var(--kt-accent);
+}
+
+.kt-action-btn--success:hover {
+  background: #22c55e;
+  color: #000;
+  border-color: #22c55e;
+}
+
+.kt-action-btn--danger:hover {
+  background: #ef4444;
+  color: #fff;
+  border-color: #ef4444;
+}
+
+.kt-action-btn--warning:hover {
+  background: #eab308;
+  color: #000;
+  border-color: #eab308;
+}
+
+.kt-pagination {
+  padding: 1.5rem 2rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: var(--kt-border-width) solid var(--kt-border);
+  background: var(--kt-bg);
+}
+
+.kt-page-info {
+  font-family: var(--kt-font);
+  font-size: var(--kt-small);
+  color: var(--kt-muted-fg);
+  margin: 0 1rem;
+  font-weight: 500;
+}
+
+.kt-page-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-fg);
+  cursor: pointer;
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-page-btn:hover:not(:disabled) {
+  background: var(--kt-muted);
+  transform: scale(1.05);
+}
+
+.kt-page-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.kt-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--kt-muted-fg);
+  font-family: var(--kt-font);
+  font-size: var(--kt-body);
+}
+
+.kt-empty-state i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
 .kt-modal-overlay {
   position: fixed;
   inset: 0;
@@ -700,18 +997,16 @@ onMounted(() => {
   height: 80vh;
   display: flex;
   flex-direction: column;
-  /* Base (Light Mode) - VS Code Light */
-  background: #ffffff; 
+  background: #ffffff;
   border: 1px solid #e5e5e5;
   border-radius: var(--kt-radius);
   overflow: hidden;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 }
 
 .kt-log-header {
   padding: 1.5rem 2rem;
-  /* Light Mode Header */
-  background: #f3f3f3; 
+  background: #f3f3f3;
   border-bottom: 1px solid #e5e5e5;
   display: flex;
   justify-content: space-between;
@@ -723,11 +1018,11 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 1rem;
-  color: #333333; /* Light Mode Title */
+  color: #333333;
 }
 
 .kt-log-title i {
-  color: #007acc; /* VS Code Blue */
+  color: #007acc;
   font-size: 1.25rem;
 }
 
@@ -752,15 +1047,14 @@ onMounted(() => {
 
 .kt-close-btn:hover {
   color: #000;
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .kt-log-body {
   flex: 1;
   position: relative;
   overflow: hidden;
-  /* Light Mode Body */
-  background: #ffffff; 
+  background: #ffffff;
 }
 
 .kt-log-content {
@@ -772,11 +1066,23 @@ onMounted(() => {
   overscroll-behavior: contain;
 }
 
-/* Light Mode Scrollbar */
-.kt-log-content::-webkit-scrollbar { width: 10px; }
-.kt-log-content::-webkit-scrollbar-track { background: #f3f3f3; }
-.kt-log-content::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 5px; border: 2px solid #f3f3f3; }
-.kt-log-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
+.kt-log-content::-webkit-scrollbar {
+  width: 10px;
+}
+
+.kt-log-content::-webkit-scrollbar-track {
+  background: #f3f3f3;
+}
+
+.kt-log-content::-webkit-scrollbar-thumb {
+  background: #d6d6d6;
+  border-radius: 5px;
+  border: 2px solid #f3f3f3;
+}
+
+.kt-log-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 
 .kt-log-content pre {
   margin: 0;
@@ -785,8 +1091,7 @@ onMounted(() => {
   font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
   font-size: 0.9rem;
   line-height: 1.6;
-  /* Light Mode Text */
-  color: #333333; 
+  color: #333333;
 }
 
 .kt-log-loading {
@@ -805,9 +1110,6 @@ onMounted(() => {
   color: #007acc;
 }
 
-/* 
-   === Dark Mode Overrides (VS Code Dark) === 
-*/
 html.dark-mode .kt-log-modal {
   background: #1e1e1e;
   border: 1px solid #333333;
@@ -823,7 +1125,7 @@ html.dark-mode .kt-log-title {
 }
 
 html.dark-mode .kt-log-title i {
-  color: #007acc; /* Keep blue or use accent */
+  color: #007acc;
 }
 
 html.dark-mode .kt-close-btn {
@@ -832,7 +1134,7 @@ html.dark-mode .kt-close-btn {
 
 html.dark-mode .kt-close-btn:hover {
   color: #ffffff;
-  background: rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.1);
 }
 
 html.dark-mode .kt-log-body {
@@ -853,38 +1155,154 @@ html.dark-mode .kt-log-content::-webkit-scrollbar-thumb:hover {
 }
 
 html.dark-mode .kt-log-content pre {
-  color: #d4d4d4; /* Default VS Code Dark Text */
+  color: #d4d4d4;
 }
 
 html.dark-mode .kt-log-loading {
   color: #cccccc;
 }
 
-/* Mobile Responsive */
+/* 默认状态（桌面端） */
+.kt-mobile-view {
+  display: none;
+}
+
+/* 移动端适配 */
 @media (max-width: 900px) {
-  .kt-header { padding: 2rem var(--kt-container-px) 1rem; }
-  .kt-list-header, .kt-desktop-only { display: none !important; }
-  .kt-mobile-view { display: block; width: 100%; }
-  .kt-table-row { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem; }
-  .kt-mobile-header { display: flex; justify-content: space-between; align-items: center; }
-  .kt-id-badge { font-family: var(--kt-font); font-size: var(--kt-small); font-weight: 700; color: var(--kt-muted-fg); background: var(--kt-muted); padding: 0.25rem 0.5rem; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); }
-  .kt-mobile-name { font-family: var(--kt-font); font-size: var(--kt-body); font-weight: 700; color: var(--kt-fg); line-height: 1.3; }
-  .kt-mobile-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--kt-small); color: var(--kt-muted-fg); }
-  .kt-col--action { margin-top: 0.5rem; padding-top: 1rem; border-top: var(--kt-border-width) solid var(--kt-border); justify-content: space-between; width: 100%; }
-  .kt-action-btn { width: 44px; height: 44px; font-size: var(--kt-body); }
-  .kt-pagination { padding: 1rem; }
-  .kt-page-btn { width: 44px; height: 44px; }
-  .kt-toolbar { flex-direction: column; align-items: stretch; padding: 1rem; gap: 1rem; }
-  .kt-search-box, .kt-select { width: 100%; }
-}
-
-.kt-filter-tab:focus-visible, .kt-search-input:focus-visible, .kt-select:focus-visible, .kt-action-btn:focus-visible, .kt-page-btn:focus-visible, .kt-close-btn:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 2px; }
-@media (prefers-reduced-motion: reduce) { .kt-filter-tab, .kt-table-row, .kt-action-btn, .kt-page-btn, .kt-close-btn, .kt-search-input, .kt-select { transition: none; } .kt-action-btn:hover, .kt-page-btn:hover:not(:disabled) { transform: none; } }
+  .kt-desktop-only {
+    display: none !important;
+  }
+
+  .kt-table-header {
+    display: none !important;
+  }
+
+  .kt-mobile-view {
+    display: block !important;
+    width: 100%;
+  }
+
+  .kt-table-row {
+    display: flex !important;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem 1rem;
+    min-width: auto !important;
+    width: 100% !important;
+    align-items: stretch;
+  }
+
+  .kt-mobile-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .kt-id-badge {
+    font-family: var(--kt-font);
+    font-size: var(--kt-small);
+    font-weight: 700;
+    color: var(--kt-muted-fg);
+    background: var(--kt-muted);
+    padding: 0.25rem 0.5rem;
+    border: var(--kt-border-width) solid var(--kt-border);
+    border-radius: var(--kt-radius);
+  }
+
+  .kt-mobile-name {
+    font-family: var(--kt-font);
+    font-size: var(--kt-body);
+    font-weight: 700;
+    color: var(--kt-fg);
+    line-height: 1.3;
+  }
+
+  .kt-mobile-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--kt-small);
+    color: var(--kt-muted-fg);
+  }
+
+  .kt-col--action {
+    margin-top: 0.5rem;
+    padding-top: 1rem;
+    border-top: var(--kt-border-width) solid var(--kt-border);
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .kt-action-btn {
+    width: 44px;
+    height: 44px;
+    font-size: var(--kt-body);
+  }
+
+  .kt-pagination {
+    padding: 1rem;
+  }
+
+  .kt-page-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .kt-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .kt-search-box,
+  .kt-select {
+    width: 100%;
+  }
+
+  .kt-type-filter {
+    width: 100%;
+  }
+
+  .kt-type-filter div {
+    width: 100% !important;
+  }
+
+  .kt-table-body {
+    min-width: 100% !important;
+    width: 100%;
+  }
+}
+
+.kt-filter-tab:focus-visible,
+.kt-search-input:focus-visible,
+.kt-select:focus-visible,
+.kt-action-btn:focus-visible,
+.kt-page-btn:focus-visible,
+.kt-close-btn:focus-visible {
+  outline: 2px solid var(--kt-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kt-filter-tab,
+  .kt-table-row,
+  .kt-action-btn,
+  .kt-page-btn,
+  .kt-close-btn,
+  .kt-search-input,
+  .kt-select {
+    transition: none;
+  }
+
+  .kt-action-btn:hover,
+  .kt-page-btn:hover:not(:disabled) {
+    transform: none;
+  }
+}
 
 .kt-type-filter :deep(.kt-select-dropdown) {
-  /* 确保所有选项(5个)直接完全展示，不再出现滚动条 */
-  max-height: 400px; 
-  /* 阻止滚动连锁*/
+  max-height: 400px;
   overscroll-behavior: contain;
 }
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/views/Page5/Page5.vue b/src/frontend/src/views/Page5/Page5.vue
index 26422f3..6c75825 100644
--- a/src/frontend/src/views/Page5/Page5.vue
+++ b/src/frontend/src/views/Page5/Page5.vue
@@ -619,12 +619,10 @@ onActivated(() => {
   border-color: var(--kt-accent);
 }
 
-/* VIP Card Style */
-.kt-setting-card--vip {
+.kt-setting-card:hover .kt-setting-icon {
+  background: var(--kt-accent);
   border-color: var(--kt-accent);
-}
-.kt-setting-card--vip:hover {
-  background: rgba(223, 225, 4, 0.05);
+  color: var(--kt-accent-fg);
 }
 
 /* ===== Transitions ===== */
diff --git a/src/frontend/src/views/Page5/subpages/SubpageContainer.vue b/src/frontend/src/views/Page5/subpages/SubpageContainer.vue
index 7f68db6..08600bf 100644
--- a/src/frontend/src/views/Page5/subpages/SubpageContainer.vue
+++ b/src/frontend/src/views/Page5/subpages/SubpageContainer.vue
@@ -1,35 +1,32 @@
 <template>
   <div class="kt-subpage-layout">
-    
+
     <!-- C. 管理员用户管理 (宽屏模式) -->
     <div v-if="subpageType === 'admin'" class="kt-modal-wrapper kt-modal-wrapper--wide">
       <div class="kt-modal-card kt-modal-card--fullscreen">
         <div class="kt-modal-header">
           <h3 class="kt-modal-title">用户管理后台 <span class="kt-modal-title-en">USER MANAGEMENT</span></h3>
-          <button class="kt-close-btn" @click="handleClose" aria-label="关闭"><i class="fas fa-times" aria-hidden="true"></i></button>
+          <button class="kt-close-btn" @click="handleClose" aria-label="关闭"><i class="fas fa-times"
+              aria-hidden="true"></i></button>
         </div>
 
         <div class="kt-modal-body">
           <div class="kt-toolbar">
-             <div class="kt-search-group">
-                <i class="fas fa-search kt-search-icon clickable" @click="handleSearch" aria-hidden="true" title="点击搜索"></i>
-                <input 
-                  type="text" 
-                  placeholder="搜索用户..." 
-                  class="kt-search-input" 
-                  v-model="searchKeyword" 
-                  @keyup.enter="handleSearch" 
-                />
-                <span class="kt-tip-text">💡支持 ID / 用户名 / 邮箱</span>
-              </div>
-             <div class="kt-btn-group">
-                <button class="kt-btn" @click="handleRefresh" :disabled="isRefreshing">
-                  <i class="fas fa-sync-alt" :class="{ 'fa-spin': isRefreshing }"></i> 刷新
-                </button>
-                <button class="kt-btn kt-btn--primary" @click="openUserForm('create')">
-                  <i class="fas fa-plus" aria-hidden="true"></i> 新建
-                </button>
-             </div>
+            <div class="kt-search-group">
+              <i class="fas fa-search kt-search-icon clickable" @click="handleSearch" aria-hidden="true"
+                title="点击搜索"></i>
+              <input type="text" placeholder="搜索用户..." class="kt-search-input" v-model="searchKeyword"
+                @keyup.enter="handleSearch" />
+              <span class="kt-tip-text">💡支持 ID / 用户名 / 邮箱</span>
+            </div>
+            <div class="kt-btn-group">
+              <button class="kt-btn" @click="handleRefresh" :disabled="isRefreshing">
+                <i class="fas fa-sync-alt" :class="{ 'fa-spin': isRefreshing }"></i> 刷新
+              </button>
+              <button class="kt-btn kt-btn--primary" @click="openUserForm('create')">
+                <i class="fas fa-plus" aria-hidden="true"></i> 新建
+              </button>
+            </div>
           </div>
 
           <div class="kt-table-wrapper">
@@ -56,7 +53,7 @@
                 <!-- 操作表头靠右 -->
                 <div class="kt-col--right">操作</div>
               </div>
-              
+
               <div v-if="paginatedUsers.length === 0" class="kt-empty-row">暂无数据</div>
 
               <!-- 列表行：比例与 Header 严格一致 -->
@@ -76,11 +73,13 @@
               </div>
             </div>
           </div>
-          
+
           <div class="kt-pagination">
-              <button class="kt-page-btn" :disabled="currentPage <= 1" @click="changePage(-1)"><i class="fas fa-chevron-left"></i></button>
-              <span class="kt-page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
-              <button class="kt-page-btn" :disabled="currentPage >= totalPages" @click="changePage(1)"><i class="fas fa-chevron-right"></i></button>
+            <button class="kt-page-btn" :disabled="currentPage <= 1" @click="changePage(-1)"><i
+                class="fas fa-chevron-left"></i></button>
+            <span class="kt-page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
+            <button class="kt-page-btn" :disabled="currentPage >= totalPages" @click="changePage(1)"><i
+                class="fas fa-chevron-right"></i></button>
           </div>
         </div>
       </div>
@@ -95,7 +94,7 @@
         </div>
         <div class="kt-modal-body">
           <div class="kt-form">
-             <div class="kt-form-group">
+            <div class="kt-form-group">
               <label class="kt-form-label">有效期 (天，整数)</label>
               <input type="number" v-model.number="vipGenForm.days" class="kt-form-input" placeholder="例如: 30" />
             </div>
@@ -128,46 +127,79 @@
         </div>
         <div class="kt-modal-body">
           <div class="kt-vip-benefits">
-            <div class="kt-benefit-item"><i class="fas fa-bolt"></i><div><div class="kt-benefit-title">极速并发</div><div class="kt-benefit-desc">最大并发任务数提升至 10 个</div></div></div>
-            <div class="kt-benefit-item"><i class="fas fa-database"></i><div><div class="kt-benefit-title">全库解锁</div><div class="kt-benefit-desc">解锁艺术品数据集防护权限</div></div></div>
-            <div class="kt-benefit-item"><i class="fas fa-magic"></i><div><div class="kt-benefit-title">高级微调</div><div class="kt-benefit-desc">允许上传自定义图片进行微调</div></div></div>
+            <div class="kt-benefit-item"><i class="fas fa-bolt"></i>
+              <div>
+                <div class="kt-benefit-title">极速并发</div>
+                <div class="kt-benefit-desc">最大并发任务数提升至 10 个</div>
+              </div>
+            </div>
+            <div class="kt-benefit-item"><i class="fas fa-database"></i>
+              <div>
+                <div class="kt-benefit-title">全库解锁</div>
+                <div class="kt-benefit-desc">解锁艺术品数据集防护权限</div>
+              </div>
+            </div>
+            <div class="kt-benefit-item"><i class="fas fa-magic"></i>
+              <div>
+                <div class="kt-benefit-title">高级微调</div>
+                <div class="kt-benefit-desc">允许上传自定义图片进行微调</div>
+              </div>
+            </div>
           </div>
           <div class="kt-divider"></div>
           <div v-if="userStore.role === 'vip' || userStore.role === 'admin'" class="kt-vip-status active">
-             <i class="fas fa-crown"></i><span>尊贵的 VIP 用户</span>
+            <i class="fas fa-crown"></i><span>尊贵的 VIP 用户</span>
           </div>
           <div v-else class="kt-form">
             <div class="kt-form-group">
               <label class="kt-form-label">输入邀请码</label>
-              <input type="text" v-model="vipUpgradeCode" class="kt-form-input" placeholder="VIP-XXXXXXXX"/>
+              <input type="text" v-model="vipUpgradeCode" class="kt-form-input" placeholder="VIP-XXXXXXXX" />
             </div>
-            <div class="kt-form-actions"><button class="kt-btn kt-btn--primary" @click="handleUpgradeVip">立即激活</button></div>
+            <div class="kt-form-actions"><button class="kt-btn kt-btn--primary"
+                @click="handleUpgradeVip">立即激活</button></div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- A/B. 普通弹窗 (修改密码/默认配置) -->
-    <div v-else class="kt-modal-wrapper">
+    <div v-else-if="subpageType === 'password' || subpageType === 'config'" class="kt-modal-wrapper">
       <div class="kt-modal-card">
         <div class="kt-modal-header">
           <h3 class="kt-modal-title">{{ modalTitle }} <span class="kt-modal-title-en">{{ modalTitleEn }}</span></h3>
-          <button class="kt-close-btn" @click="handleClose" aria-label="关闭"><i class="fas fa-times" aria-hidden="true"></i></button>
+          <button class="kt-close-btn" @click="handleClose" aria-label="关闭"><i class="fas fa-times"
+              aria-hidden="true"></i></button>
         </div>
         <div class="kt-modal-body">
           <!-- A. 修改密码 -->
           <div v-if="subpageType === 'password'" class="kt-form">
             <div class="kt-form-group">
               <label class="kt-form-label">当前密码</label>
-              <input type="password" v-model="pwdForm.oldPassword" class="kt-form-input" placeholder="输入当前密码" />
+              <div class="kt-input-wrapper">
+                <input :type="pwdVisibility.old ? 'text' : 'password'" v-model="pwdForm.oldPassword"
+                  class="kt-form-input" placeholder="输入当前密码" />
+                <i class="fas kt-input-eye" :class="pwdVisibility.old ? 'fa-eye-slash' : 'fa-eye'"
+                  @click="pwdVisibility.old = !pwdVisibility.old"></i>
+              </div>
             </div>
             <div class="kt-form-group">
               <label class="kt-form-label">新密码</label>
-              <input type="password" v-model="pwdForm.newPassword" class="kt-form-input" placeholder="输入新密码" />
+              <div class="kt-input-wrapper">
+                <input :type="pwdVisibility.new ? 'text' : 'password'" v-model="pwdForm.newPassword"
+                  class="kt-form-input" placeholder="输入新密码" />
+                <i class="fas kt-input-eye" :class="pwdVisibility.new ? 'fa-eye-slash' : 'fa-eye'"
+                  @click="pwdVisibility.new = !pwdVisibility.new"></i>
+              </div>
+              <p class="kt-input-hint">密码至少8位，且需包含大小写字母、数字和符号</p>
             </div>
             <div class="kt-form-group">
               <label class="kt-form-label">确认新密码</label>
-              <input type="password" v-model="pwdForm.confirmPassword" class="kt-form-input" placeholder="再次输入新密码" />
+              <div class="kt-input-wrapper">
+                <input :type="pwdVisibility.confirm ? 'text' : 'password'" v-model="pwdForm.confirmPassword"
+                  class="kt-form-input" placeholder="再次输入新密码" />
+                <i class="fas kt-input-eye" :class="pwdVisibility.confirm ? 'fa-eye-slash' : 'fa-eye'"
+                  @click="pwdVisibility.confirm = !pwdVisibility.confirm"></i>
+              </div>
             </div>
             <div class="kt-form-actions">
               <button class="kt-btn kt-btn--primary" @click="submitPassword">确认修改</button>
@@ -178,11 +210,12 @@
           <div v-else-if="subpageType === 'config'" class="kt-form">
             <div class="kt-form-group">
               <label class="kt-form-label">默认防护对象</label>
-              <KtSelect v-model="configForm.data_type_id" :options="dataTypeOptions" @change="onConfigDataTypeChange"/>
+              <KtSelect v-model="configForm.data_type_id" :options="dataTypeOptions"
+                @change="onConfigDataTypeChange" />
             </div>
             <div class="kt-form-group">
               <label class="kt-form-label">默认扰动算法</label>
-              <KtSelect v-model="configForm.perturbation_configs_id" :options="algoOptionsWithNone"/>
+              <KtSelect v-model="configForm.perturbation_configs_id" :options="algoOptionsWithNone" />
             </div>
             <div class="kt-form-group">
               <div class="kt-form-header">
@@ -194,11 +227,20 @@
               </div>
               <div v-if="configForm.perturbation_configs_id">
                 <div v-if="!isCustomMode" class="kt-strength-selector">
-                  <div class="kt-strength-item" :class="{ active: configForm.perturbation_intensity === presetLow }" @click="configForm.perturbation_intensity = presetLow">低</div>
-                  <div class="kt-strength-item" :class="{ active: configForm.perturbation_intensity === presetMid }" @click="configForm.perturbation_intensity = presetMid">中</div>
-                  <div class="kt-strength-item" :class="{ active: configForm.perturbation_intensity === presetHigh }" @click="configForm.perturbation_intensity = presetHigh">高</div>
+                  <div class="kt-strength-item"
+                    :class="{ active: configForm.perturbation_intensity === presetLow }"
+                    @click="configForm.perturbation_intensity = presetLow">低</div>
+                  <div class="kt-strength-item"
+                    :class="{ active: configForm.perturbation_intensity === presetMid }"
+                    @click="configForm.perturbation_intensity = presetMid">中</div>
+                  <div class="kt-strength-item"
+                    :class="{ active: configForm.perturbation_intensity === presetHigh }"
+                    @click="configForm.perturbation_intensity = presetHigh">高</div>
+                </div>
+                <div v-else>
+                  <IntensitySlider v-model="configForm.perturbation_intensity" :min="sliderConfig.min"
+                    :max="sliderConfig.max" :step="sliderConfig.step" />
                 </div>
-                <div v-else><IntensitySlider v-model="configForm.perturbation_intensity" :min="sliderConfig.min" :max="sliderConfig.max" :step="sliderConfig.step" /></div>
               </div>
               <div v-else class="kt-tip-text">请先选择算法以设置强度</div>
             </div>
@@ -216,17 +258,26 @@
         <div class="kt-modal-card kt-sub-modal-card">
           <div class="kt-modal-header">
             <h3 class="kt-modal-title">{{ userModalMode === 'create' ? '新建用户' : '编辑用户' }}</h3>
-            <button class="kt-close-btn" @click="showUserModal = false" aria-label="关闭"><i class="fas fa-times" aria-hidden="true"></i></button>
+            <button class="kt-close-btn" @click="showUserModal = false" aria-label="关闭"><i class="fas fa-times"
+                aria-hidden="true"></i></button>
           </div>
           <div class="kt-modal-body">
             <div class="kt-form">
               <div class="kt-form-group">
                 <label class="kt-form-label">用户名</label>
-                <input type="text" v-model="userForm.username" class="kt-form-input" :disabled="userModalMode === 'edit'" placeholder="输入用户名" />
+                <input type="text" v-model="userForm.username" class="kt-form-input"
+                  :disabled="userModalMode === 'edit'" placeholder="输入用户名" />
               </div>
               <div class="kt-form-group" v-if="userModalMode === 'create'">
                 <label class="kt-form-label">密码</label>
-                <input type="password" v-model="userForm.password" class="kt-form-input" placeholder="输入密码" />
+                <div class="kt-input-wrapper">
+                  <input :type="pwdVisibility.createUser ? 'text' : 'password'" v-model="userForm.password"
+                    class="kt-form-input" placeholder="输入密码" />
+                  <i class="fas kt-input-eye"
+                    :class="pwdVisibility.createUser ? 'fa-eye-slash' : 'fa-eye'"
+                    @click="pwdVisibility.createUser = !pwdVisibility.createUser"></i>
+                </div>
+                <p class="kt-input-hint">密码至少8位，且需包含大小写字母、数字和符号</p>
               </div>
               <div class="kt-form-group">
                 <label class="kt-form-label">邮箱</label>
@@ -250,108 +301,837 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive, watch, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { 
-  authChangePassword, getUserConfig, updateUserConfig, 
-  getAdminUserList, createAdminUser, updateAdminUser, deleteAdminUser 
-} from '@/api/index'
-import { upgradeToVip } from '@/api/user'
-import { generateVipCodes } from '@/api/admin'
-import { useUserStore } from '@/stores/userStore'
-import { ALGO_OPTIONS_Data, DATA_TYPE_MAP, ALGO_MAP } from '@/utils/constants'
-import modal from '@/utils/modal'
-import KtSelect from '@/components/KtSelect.vue'
-import IntensitySlider from '@/components/IntensitySlider.vue' 
-
-const props = defineProps(['subpageType'])
-const emit = defineEmits(['close'])
-const route = useRoute(); const router = useRouter(); const userStore = useUserStore()
+import { ref, computed, onMounted, reactive, watch, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  authChangePassword,
+  getUserConfig,
+  updateUserConfig,
+  getAdminUserList,
+  createAdminUser,
+  updateAdminUser,
+  deleteAdminUser,
+  authGetProfile,
+} from '@/api/index';
+import { upgradeToVip } from '@/api/user';
+import { generateVipCodes } from '@/api/admin';
+import { useUserStore } from '@/stores/userStore';
+import { ALGO_OPTIONS_Data, DATA_TYPE_MAP, ALGO_MAP } from '@/utils/constants';
+import modal from '@/utils/modal';
+import KtSelect from '@/components/KtSelect.vue';
+import IntensitySlider from '@/components/IntensitySlider.vue';
+
+const props = defineProps(['subpageType']);
+const emit = defineEmits(['close']);
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
 
 // 状态支持路由参数与 Props 混合
-const subpageType = computed(() => route.params.subpage || props.subpageType)
-const handleClose = () => { if (route.params.subpage) router.push('/'); else emit('close') }
+const subpageType = computed(() => route.params.subpage || props.subpageType);
+const handleClose = () => {
+  if (route.params.subpage) {
+    router.push('/');
+  } else {
+    emit('close');
+  }
+};
 
 const modalTitle = computed(() => {
-  const map = { password: '修改密码', config: '默认配置', admin: '用户管理后台', 'admin-vip': '邀请码管理', vip: 'VIP会员' }
-  return map[subpageType.value] || ''
-})
+  const map = {
+    password: '修改密码',
+    config: '默认配置',
+    admin: '用户管理后台',
+    'admin-vip': '邀请码管理',
+    vip: 'VIP会员',
+  };
+  return map[subpageType.value] || '';
+});
 const modalTitleEn = computed(() => {
-  const map = { password: 'CHANGE PASSWORD', config: 'DEFAULT CONFIGURATION', admin: 'USER MANAGEMENT', 'admin-vip': 'VIP CODES', vip: 'MEMBERSHIP' }
-  return map[subpageType.value] || ''
-})
+  const map = {
+    password: 'CHANGE PASSWORD',
+    config: 'DEFAULT CONFIGURATION',
+    admin: 'USER MANAGEMENT',
+    'admin-vip': 'VIP CODES',
+    vip: 'MEMBERSHIP',
+  };
+  return map[subpageType.value] || '';
+});
+
+const dataTypeOptions = [
+  { label: '通用人脸防护', value: 1 },
+  { label: '通用艺术品防护', value: 2 },
+];
+const roleOptions = [
+  { label: '普通用户 (Normal)', value: 'normal' },
+  { label: 'VIP用户', value: 'vip' },
+  { label: '管理员 (Admin)', value: 'admin' },
+];
 
-const dataTypeOptions = [{ label: '通用人脸防护', value: 1 }, { label: '通用艺术品防护', value: 2 }]
-const roleOptions = [{ label: '普通用户 (Normal)', value: 'normal' }, { label: 'VIP用户', value: 'vip' }, { label: '管理员 (Admin)', value: 'admin' }]
+// 密码可见性状态控制
+const pwdVisibility = reactive({
+  old: false,
+  new: false,
+  confirm: false,
+  createUser: false,
+});
 
-const vipUpgradeCode = ref('')
+const vipUpgradeCode = ref('');
+// VIP升级逻辑
 const handleUpgradeVip = async () => {
-  if (!vipUpgradeCode.value) return modal.warning('请输入邀请码')
-  try { const res = await upgradeToVip({ vip_code: vipUpgradeCode.value }); await modal.success(res.message || '升级成功！'); if (res.user) userStore.updateUserInfo(res.user); handleClose() } catch (e) { console.error(e) }
-}
+  if (!vipUpgradeCode.value) {
+    return modal.warning('请输入邀请码');
+  }
 
-const vipGenForm = ref({ days: 30, count: 1 }); const generatedCodes = ref([])
+  try {
+    // 1. 调用升级接口
+    await upgradeToVip({ vip_code: vipUpgradeCode.value });
+
+    // 2.成功后弹出阻塞式模态框，强制用户确认并重新登录
+    await modal.show({
+      type: 'success',
+      title: '升级成功',
+      message: '恭喜您已成功成为 VIP 用户！请重新登录以激活全部权益。',
+      confirmText: '重新登录',
+      showCancel: false,
+      closeOnOverlay: false, // 点击背景不关闭
+    });
+
+    // 3. 用户点击确认后，执行登出并跳转至登录页
+    userStore.logout();
+    router.push('/login');
+  } catch (e) {
+    console.error(e);
+    // 失败时弹出错误提示框
+    modal.error(e.message || '升级失败，请检查邀请码是否有效');
+  }
+};
+
+const vipGenForm = ref({ days: 30, count: 1 });
+const generatedCodes = ref([]);
 const handleGenerateCodes = async () => {
-  if (!Number.isInteger(vipGenForm.value.days) || vipGenForm.value.days <= 0) return modal.warning('请输入有效的正整数天数')
-  if (!Number.isInteger(vipGenForm.value.count) || vipGenForm.value.count <= 0) return modal.warning('生成数量必须为正整数')
-  try { const res = await generateVipCodes({ expires_days: vipGenForm.value.days, count: vipGenForm.value.count }); generatedCodes.value = res.codes || []; modal.success(`成功生成 ${res.codes.length} 个邀请码`) } catch (e) { console.error(e) }
-}
+  if (!Number.isInteger(vipGenForm.value.days) || vipGenForm.value.days <= 0) {
+    return modal.warning('请输入有效的正整数天数');
+  }
+  if (!Number.isInteger(vipGenForm.value.count) || vipGenForm.value.count <= 0) {
+    return modal.warning('生成数量必须为正整数');
+  }
+  if (vipGenForm.value.count > 10) {
+    return modal.warning('单次生成数量不能超过 10 个');
+  }
+  try {
+    const res = await generateVipCodes({
+      expires_days: vipGenForm.value.days,
+      count: vipGenForm.value.count,
+    });
+    generatedCodes.value = res.codes || [];
+    modal.success(`成功生成 ${res.codes.length} 个邀请码`);
+  } catch (e) {
+    console.error(e);
+  }
+};
 const copyCode = async (code) => {
-  try { if (navigator.clipboard) { await navigator.clipboard.writeText(code); modal.info('已复制到剪贴板') } else throw new Error() } catch {
-    const t = document.createElement("textarea"); t.value = code; t.style.position = "fixed"; document.body.appendChild(t); t.select();
-    if (document.execCommand('copy')) modal.info('已复制到剪贴板'); document.body.removeChild(t)
+  try {
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(code);
+      modal.info('已复制到剪贴板');
+    } else {
+      throw new Error();
+    }
+  } catch {
+    const t = document.createElement('textarea');
+    t.value = code;
+    t.style.position = 'fixed';
+    document.body.appendChild(t);
+    t.select();
+    if (document.execCommand('copy')) modal.info('已复制到剪贴板');
+    document.body.removeChild(t);
   }
-}
+};
 
-const configForm = ref({ data_type_id: 1, perturbation_configs_id: null, perturbation_intensity: null }); const isCustomMode = ref(false)
+const configForm = ref({
+  data_type_id: 1,
+  perturbation_configs_id: null,
+  perturbation_intensity: null,
+});
+const isCustomMode = ref(false);
 const algorithmSettings = computed(() => {
-  const algoId = configForm.value.perturbation_configs_id
-  if ([ALGO_MAP.SIMAC, ALGO_MAP.ASPL, ALGO_MAP.CAAT_PRO].includes(algoId)) return { min: 10, max: 16, step: 1, presets: { low: 10, mid: 12, high: 16 }, default: 12 }
-  if ([ALGO_MAP.GLAZE, ALGO_MAP.PID, ALGO_MAP.STYLE_PROTECTION, ALGO_MAP.QUICK].includes(algoId)) return { min: 0.01, max: 0.2, step: 0.01, presets: { low: 0.03, mid: 0.05, high: 0.1 }, default: 0.05 }
-  return { min: 0, max: 100, step: 1, presets: { low: 25, mid: 50, high: 75 }, default: 50 }
-})
-const sliderConfig = computed(() => ({ min: algorithmSettings.value.min, max: algorithmSettings.value.max, step: algorithmSettings.value.step }))
-const presetLow = computed(() => algorithmSettings.value.presets.low), presetMid = computed(() => algorithmSettings.value.presets.mid), presetHigh = computed(() => algorithmSettings.value.presets.high)
-watch(() => configForm.value.perturbation_configs_id, (n, o) => { if (o !== undefined && n !== o) { configForm.value.perturbation_intensity = algorithmSettings.value.default; isCustomMode.value = false } })
-const toggleStrengthMode = (c) => { isCustomMode.value = c; if (!c) configForm.value.perturbation_intensity = algorithmSettings.value.presets.mid }
-const filteredConfigAlgorithms = computed(() => ALGO_OPTIONS_Data.filter(a => a.type === (configForm.value.data_type_id === 2 ? 'art' : 'face')))
-const algoOptionsWithNone = computed(() => [{ label: '不设置默认值', value: null }, ...filteredConfigAlgorithms.value.map(a => ({ label: a.method_name, value: a.id }))])
-const onConfigDataTypeChange = () => { if (configForm.value.perturbation_configs_id) { if (ALGO_OPTIONS_Data.find(a => a.id === configForm.value.perturbation_configs_id)?.type !== (configForm.value.data_type_id === 2 ? 'art' : 'face')) configForm.value.perturbation_configs_id = null } }
-const fetchConfig = async () => { const res = await getUserConfig(); if (res?.config) { configForm.value = { data_type_id: res.config.data_type_id || 1, perturbation_configs_id: res.config.perturbation_configs_id, perturbation_intensity: res.config.perturbation_intensity }; nextTick(() => { const p = algorithmSettings.value.presets; isCustomMode.value = !(res.config.perturbation_intensity === p.low || res.config.perturbation_intensity === p.mid || res.config.perturbation_intensity === p.high) }) } }
-const submitConfig = async () => { await updateUserConfig(configForm.value); modal.success('配置已保存'); handleClose() }
-
-const pwdForm = ref({ oldPassword: '', newPassword: '', confirmPassword: '' }); const submitPassword = async () => { if (pwdForm.value.newPassword !== pwdForm.value.confirmPassword) return modal.warning('两次输入不一致'); try { await authChangePassword({ old_password: pwdForm.value.oldPassword, new_password: pwdForm.value.newPassword }); modal.success('密码修改成功'); handleClose() } catch(e) {} }
-
-const allAdminUsers = ref([]); const searchKeyword = ref(''); const currentPage = ref(1); const sortRules = ref([]); const isRefreshing = ref(false); const pageSize = 20
-const totalPages = computed(() => Math.ceil(filteredUsers.value.length / pageSize) || 1)
-const formatRole = (r) => ({ admin: '管理员', vip: 'VIP', normal: '普通' }[r] || '普通'), getRoleClass = (r) => ({ admin: 'admin', vip: 'vip', normal: 'user' }[r] || 'user')
-const fetchAdminData = async (t = false) => { if (t) isRefreshing.value = true; try { const res = await getAdminUserList({ page: 1, per_page: 10000 }); if (res?.users) allAdminUsers.value = res.users; if (t) modal.success('已刷新') } catch(e) {} finally { if (t) setTimeout(() => isRefreshing.value = false, 600) } }
-const filteredUsers = computed(() => { const k = searchKeyword.value.trim().toLowerCase(); return k ? allAdminUsers.value.filter(u => String(u.user_id).includes(k) || u.username?.toLowerCase().includes(k) || u.email?.toLowerCase().includes(k)) : allAdminUsers.value })
+  const algoId = configForm.value.perturbation_configs_id;
+  if (
+    [ALGO_MAP.SIMAC, ALGO_MAP.ASPL, ALGO_MAP.PID, ALGO_MAP.QUICK].includes(
+      algoId
+    )
+  ) {
+    return {
+      min: 10,
+      max: 16,
+      step: 1,
+      presets: { low: 10, mid: 12, high: 16 },
+      default: 12,
+    };
+  }
+  if (
+    [
+      ALGO_MAP.GLAZE,
+      ALGO_MAP.STYLE_PROTECTION,
+      ALGO_MAP.CAAT,
+      ALGO_MAP.CAAT_PRO,
+    ].includes(algoId)
+  ) {
+    return {
+      min: 0.01,
+      max: 0.2,
+      step: 0.01,
+      presets: { low: 0.03, mid: 0.05, high: 0.1 },
+      default: 0.05,
+    };
+  }
+  return {
+    min: 0,
+    max: 100,
+    step: 1,
+    presets: { low: 25, mid: 50, high: 75 },
+    default: 50,
+  };
+});
+const sliderConfig = computed(() => ({
+  min: algorithmSettings.value.min,
+  max: algorithmSettings.value.max,
+  step: algorithmSettings.value.step,
+}));
+const presetLow = computed(() => algorithmSettings.value.presets.low);
+const presetMid = computed(() => algorithmSettings.value.presets.mid);
+const presetHigh = computed(() => algorithmSettings.value.presets.high);
+watch(
+  () => configForm.value.perturbation_configs_id,
+  (n, o) => {
+    if (o !== undefined && n !== o) {
+      configForm.value.perturbation_intensity = algorithmSettings.value.default;
+      isCustomMode.value = false;
+    }
+  }
+);
+const toggleStrengthMode = (c) => {
+  isCustomMode.value = c;
+  if (!c) {
+    configForm.value.perturbation_intensity = algorithmSettings.value.presets.mid;
+  }
+};
+const filteredConfigAlgorithms = computed(() =>
+  ALGO_OPTIONS_Data.filter(
+    (a) => a.type === (configForm.value.data_type_id === 2 ? 'art' : 'face')
+  )
+);
+const algoOptionsWithNone = computed(() => [
+  { label: '不设置默认值', value: null },
+  ...filteredConfigAlgorithms.value.map((a) => ({
+    label: a.method_name,
+    value: a.id,
+  })),
+]);
+const onConfigDataTypeChange = () => {
+  if (configForm.value.perturbation_configs_id) {
+    if (
+      ALGO_OPTIONS_Data.find(
+        (a) => a.id === configForm.value.perturbation_configs_id
+      )?.type !== (configForm.value.data_type_id === 2 ? 'art' : 'face')
+    ) {
+      configForm.value.perturbation_configs_id = null;
+    }
+  }
+};
+const fetchConfig = async () => {
+  const res = await getUserConfig();
+  if (res?.config) {
+    configForm.value = {
+      data_type_id: res.config.data_type_id || 1,
+      perturbation_configs_id: res.config.perturbation_configs_id,
+      perturbation_intensity: res.config.perturbation_intensity,
+    };
+    nextTick(() => {
+      const p = algorithmSettings.value.presets;
+      isCustomMode.value = !(
+        res.config.perturbation_intensity === p.low ||
+        res.config.perturbation_intensity === p.mid ||
+        res.config.perturbation_intensity === p.high
+      );
+    });
+  }
+};
+const submitConfig = async () => {
+  await updateUserConfig(configForm.value);
+  modal.success('配置已保存');
+  handleClose();
+};
+
+// === Password Logic (成功后再跳转，失败不跳转) ===
+const pwdForm = ref({ oldPassword: '', newPassword: '', confirmPassword: '' });
+
+const validatePasswordStrength = (pwd) => {
+  const regex =
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&._-])[A-Za-z\d@$!%*?&._-]{8,}$/;
+  return regex.test(pwd);
+};
+
+const submitPassword = async () => {
+  if (
+    !pwdForm.value.oldPassword ||
+    !pwdForm.value.newPassword ||
+    !pwdForm.value.confirmPassword
+  ) {
+    return modal.warning('请填写完整的密码信息');
+  }
+  if (pwdForm.value.newPassword !== pwdForm.value.confirmPassword) {
+    return modal.warning('两次输入的新密码不一致');
+  }
+
+  if (!validatePasswordStrength(pwdForm.value.newPassword)) {
+    return modal.warning('新密码强度不足：需至少8位且包含大小写字母、数字和符号');
+  }
+
+  try {
+    await authChangePassword({
+      old_password: pwdForm.value.oldPassword,
+      new_password: pwdForm.value.newPassword,
+    });
+
+    await modal.success('密码修改成功，请使用新密码重新登录');
+
+    userStore.logout();
+    router.push('/login');
+  } catch (e) {
+    console.error('修改密码失败:', e);
+    const errorMsg = e.message || '修改失败，请检查旧密码是否正确';
+    await modal.error(errorMsg);
+  }
+};
+
+const allAdminUsers = ref([]);
+const searchKeyword = ref('');
+const currentPage = ref(1);
+const sortRules = ref([]);
+const isRefreshing = ref(false);
+const pageSize = 20;
+const totalPages = computed(
+  () => Math.ceil(filteredUsers.value.length / pageSize) || 1
+);
+const formatRole = (r) =>
+  ({ admin: '管理员', vip: 'VIP', normal: '普通' }[r] || '普通');
+const getRoleClass = (r) =>
+  ({ admin: 'admin', vip: 'vip', normal: 'user' }[r] || 'user');
+const fetchAdminData = async (t = false) => {
+  if (t) isRefreshing.value = true;
+  try {
+    const res = await getAdminUserList({ page: 1, per_page: 10000 });
+    if (res?.users) allAdminUsers.value = res.users;
+    if (t) modal.success('已刷新');
+  } catch (e) {
+    /* ignore */
+  } finally {
+    if (t) setTimeout(() => (isRefreshing.value = false), 600);
+  }
+};
+const filteredUsers = computed(() => {
+  const k = searchKeyword.value.trim().toLowerCase();
+  return k
+    ? allAdminUsers.value.filter(
+        (u) =>
+          String(u.user_id).includes(k) ||
+          u.username?.toLowerCase().includes(k) ||
+          u.email?.toLowerCase().includes(k)
+      )
+    : allAdminUsers.value;
+});
 const sortedUsers = computed(() => {
-  const d = [...filteredUsers.value], r = sortRules.value[0]; if (!r) return d
+  const d = [...filteredUsers.value];
+  const r = sortRules.value[0];
+  if (!r) return d;
   return d.sort((a, b) => {
-    let vA = a[r.field], vB = b[r.field]; if (r.field === 'user_id') return r.direction === 'asc' ? vA - vB : vB - vA
-    vA = String(vA||'').toLowerCase(); vB = String(vB||'').toLowerCase(); return (vA < vB ? -1 : 1) * (r.direction === 'asc' ? 1 : -1)
-  })
-})
-const paginatedUsers = computed(() => sortedUsers.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize))
-const handleSearch = () => currentPage.value = 1, handleRefresh = () => fetchAdminData(true), changePage = (d) => { const n = currentPage.value + d; if (n >= 1 && n <= totalPages.value) currentPage.value = n }
-const handleSort = (f, e) => { const i = sortRules.value.findIndex(r => r.field === f); if (i !== -1) { if (sortRules.value[i].direction === 'asc') sortRules.value[i].direction = 'desc'; else sortRules.value.splice(i, 1) } else { const n = { field: f, direction: 'asc' }; if (e.shiftKey) sortRules.value.push(n); else sortRules.value = [n] } }
-const getSortIcon = (f) => { const r = sortRules.value.find(x => x.field === f); return r ? (r.direction === 'asc' ? 'fas fa-sort-up active' : 'fas fa-sort-down active') : 'fas fa-sort dim' }
-
-const showUserModal = ref(false), userModalMode = ref('create'), userForm = reactive({ user_id: null, username: '', password: '', email: '', role: 'normal' })
-const openUserForm = (m, u = null) => { userModalMode.value = m; if (m === 'edit' && u) Object.assign(userForm, { user_id: u.user_id, username: u.username, email: u.email, role: u.role, password: '' }); else Object.assign(userForm, { user_id: null, username: '', password: '', email: '', role: 'normal' }); showUserModal.value = true }
-const submitUserForm = async () => { try { const p = { username: userForm.username, email: userForm.email, role: userForm.role }; if (userModalMode.value === 'create') { p.password = userForm.password; await createAdminUser(p) } else await updateAdminUser(userForm.user_id, { ...p, is_active: true }); showUserModal.value = false; fetchAdminData() } catch(e) {} }
-const handleDeleteUser = async (u) => { if (await modal.confirm(`确定要删除用户 "${u.username}" 吗？`)) { try { await deleteAdminUser(u.user_id); modal.success('已删除'); fetchAdminData() } catch (e) { console.error(e) } } }
-
-onMounted(() => { if (subpageType.value === 'config') fetchConfig(); if (subpageType.value === 'admin') fetchAdminData() })
+    let vA = a[r.field];
+    let vB = b[r.field];
+    if (r.field === 'user_id') {
+      return r.direction === 'asc' ? vA - vB : vB - vA;
+    }
+    vA = String(vA || '').toLowerCase();
+    vB = String(vB || '').toLowerCase();
+    return (vA < vB ? -1 : 1) * (r.direction === 'asc' ? 1 : -1);
+  });
+});
+const paginatedUsers = computed(() =>
+  sortedUsers.value.slice(
+    (currentPage.value - 1) * pageSize,
+    currentPage.value * pageSize
+  )
+);
+const handleSearch = () => {
+  currentPage.value = 1;
+};
+const handleRefresh = () => fetchAdminData(true);
+const changePage = (d) => {
+  const n = currentPage.value + d;
+  if (n >= 1 && n <= totalPages.value) currentPage.value = n;
+};
+const handleSort = (f, e) => {
+  const i = sortRules.value.findIndex((r) => r.field === f);
+  if (i !== -1) {
+    if (sortRules.value[i].direction === 'asc') {
+      sortRules.value[i].direction = 'desc';
+    } else {
+      sortRules.value.splice(i, 1);
+    }
+  } else {
+    const n = { field: f, direction: 'asc' };
+    if (e.shiftKey) {
+      sortRules.value.push(n);
+    } else {
+      sortRules.value = [n];
+    }
+  }
+};
+const getSortIcon = (f) => {
+  const r = sortRules.value.find((x) => x.field === f);
+  return r
+    ? r.direction === 'asc'
+      ? 'fas fa-sort-up active'
+      : 'fas fa-sort-down active'
+    : 'fas fa-sort dim';
+};
+
+const showUserModal = ref(false);
+const userModalMode = ref('create');
+const userForm = reactive({
+  user_id: null,
+  username: '',
+  password: '',
+  email: '',
+  role: 'normal',
+});
+const openUserForm = (m, u = null) => {
+  userModalMode.value = m;
+  if (m === 'edit' && u) {
+    Object.assign(userForm, {
+      user_id: u.user_id,
+      username: u.username,
+      email: u.email,
+      role: u.role,
+      password: '',
+    });
+  } else {
+    Object.assign(userForm, {
+      user_id: null,
+      username: '',
+      password: '',
+      email: '',
+      role: 'normal',
+    });
+  }
+  showUserModal.value = true;
+};
+const submitUserForm = async () => {
+  try {
+    const p = {
+      username: userForm.username,
+      email: userForm.email,
+      role: userForm.role,
+    };
+    if (userModalMode.value === 'create') {
+      p.password = userForm.password;
+      await createAdminUser(p);
+    } else {
+      await updateAdminUser(userForm.user_id, { ...p, is_active: true });
+    }
+    showUserModal.value = false;
+    fetchAdminData();
+  } catch (e) {
+    /* ignore */
+  }
+};
+const handleDeleteUser = async (u) => {
+  if (await modal.confirm(`确定要删除用户 "${u.username}" 吗？`)) {
+    try {
+      await deleteAdminUser(u.user_id);
+      modal.success('已删除');
+      fetchAdminData();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+};
+
+onMounted(() => {
+  if (subpageType.value === 'config') fetchConfig();
+  if (subpageType.value === 'admin') fetchAdminData();
+});
 </script>
 
 <style scoped>
-/* Header 与 Row 比例严格同步 */
-.kt-list-header, .kt-list-row {
+/* 样式保持不变 */
+.kt-subpage-layout {
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--kt-bg);
+}
+
+.kt-modal-wrapper {
+  width: 100%;
+  max-width: 500px;
+}
+
+.kt-modal-wrapper--wide {
+  max-width: 90vw;
+}
+
+.kt-modal-card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--kt-bg);
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+.kt-modal-card--fullscreen {
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.kt-modal-header {
+  padding: 1.5rem 2rem;
+  border-bottom: var(--kt-border-width) solid var(--kt-border);
+  background: var(--kt-muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.kt-modal-title {
+  font-family: var(--kt-font);
+  font-weight: 700;
+  color: var(--kt-fg);
+  font-size: var(--kt-body);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.kt-modal-title-en {
+  font-size: var(--kt-small);
+  color: var(--kt-muted-fg);
+  font-weight: 400;
+  letter-spacing: 0.1em;
+}
+
+.kt-close-btn {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: var(--kt-border-width) solid var(--kt-border);
+  border-radius: var(--kt-radius);
+  color: var(--kt-muted-fg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--kt-transition-micro);
+}
+
+.kt-close-btn:hover {
+  background: var(--kt-fg);
+  border-color: var(--kt-fg);
+  color: var(--kt-bg);
+}
+
+.kt-text-btn {
+  font-weight: 700;
+  color: var(--kt-muted-fg);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: 0.2s;
+  white-space: nowrap;
+}
+
+.kt-text-btn--edit:hover {
+  color: var(--kt-accent);
+}
+
+.kt-text-btn--danger {
+  color: #ef4444;
+}
+
+.kt-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.kt-btn {
+  padding: 0.8rem 1.5rem;
+  cursor: pointer;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 2px solid var(--kt-border);
+  background: none;
+  color: var(--kt-fg);
+  font-family: var(--kt-font);
+  transition: 0.2s;
+}
+
+.kt-btn--primary {
+  background: var(--kt-accent);
+  border-color: var(--kt-accent);
+  color: #000;
+}
+
+.kt-btn--primary:hover {
+  background: var(--kt-fg);
+  color: var(--kt-bg);
+  border-color: var(--kt-fg);
+}
+
+/* 确保块级堆叠 */
+.kt-modal-body {
+  padding: 2.5rem;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.kt-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.kt-form-group {
+  display: block;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.kt-form-label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-size: var(--kt-small);
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--kt-fg);
+  letter-spacing: 0.05em;
+}
+
+/* Input Wrapper 和 Icon 定位 */
+.kt-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.kt-form-input {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+  padding-right: 2.5rem;
+  /* 为眼睛图标留空 */
+  border: var(--kt-border-width) solid var(--kt-border);
+  background: var(--kt-bg);
+  color: var(--kt-fg);
+  font-family: var(--kt-font);
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.kt-form-input:focus {
+  border-color: var(--kt-accent);
+  outline: none;
+}
+
+.kt-input-eye {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  color: var(--kt-muted-fg);
+  cursor: pointer;
+  transition: color 0.2s;
+  z-index: 5;
+}
+
+.kt-input-eye:hover {
+  color: var(--kt-fg);
+}
+
+/* 提示文字样式 */
+.kt-input-hint {
+  font-family: var(--kt-font);
+  font-size: 0.75rem;
+  color: var(--kt-muted-fg);
+  margin-top: 0.5rem;
+  line-height: 1.4;
+}
+
+.kt-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+/* 7. 其他组件 */
+.kt-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.kt-search-group {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.kt-search-input {
+  width: 100%;
+  max-width: 300px;
+  padding: 0.75rem 1rem 0.75rem 2.5rem;
+  border: var(--kt-border-width) solid var(--kt-border);
+  background: var(--kt-bg);
+  color: var(--kt-fg);
+}
+
+.kt-search-icon {
+  position: absolute;
+  left: 1rem;
+  color: var(--kt-muted-fg);
+}
+
+.kt-table-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  border: var(--kt-border-width) solid var(--kt-border);
+}
+
+.kt-role-tag {
+  width: 80px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--kt-border);
+  font-weight: 700;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+}
+
+.kt-role--admin {
+  background: var(--kt-accent);
+  color: #000;
+  border-color: var(--kt-accent);
+}
+
+.kt-role--vip {
+  color: var(--kt-accent);
+  border-color: var(--kt-accent);
+}
+
+.kt-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding-top: 1rem;
+}
+
+.kt-page-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--kt-border);
+  background: none;
+  color: var(--kt-fg);
+  cursor: pointer;
+}
+
+.kt-form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  min-height: 44px;
+}
+
+.kt-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  background: var(--kt-muted);
+  padding: 0.3rem;
+}
+
+.kt-mode-toggle span {
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.kt-mode-toggle span.active {
+  background: var(--kt-bg);
+  color: var(--kt-fg);
+}
+
+.kt-strength-selector {
+  display: flex;
+  border: 1px solid var(--kt-border);
+}
+
+.kt-strength-item {
+  flex: 1;
+  text-align: center;
+  padding: 0.6rem;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.kt-strength-item.active {
+  background: var(--kt-accent);
+  color: #000;
+}
+
+.kt-sub-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 3000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(4px);
+}
+
+.kt-sub-modal-card {
+  width: 95%;
+  max-width: 500px;
+  height: auto !important;
+}
+
+/* 管理员列表样式 */
+.kt-list-header,
+.kt-list-row {
   display: grid;
-  /* ID(0.8) | 用户名(1.5) | 邮箱(2.5) | 角色(1) | 操作(1.2) */
   grid-template-columns: 0.8fr 1.5fr 2.5fr 1fr 1.2fr;
   gap: 1rem;
   align-items: center;
@@ -367,7 +1147,9 @@ onMounted(() => { if (subpageType.value === 'config') fetchConfig(); if (subpage
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-bottom: var(--kt-border-width) solid var(--kt-border);
-  position: sticky; top: 0; z-index: 10;
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 
 .kt-list-row {
@@ -376,97 +1158,79 @@ onMounted(() => { if (subpageType.value === 'config') fetchConfig(); if (subpage
   transition: background var(--kt-transition-micro);
 }
 
-.kt-list-row:hover { background: var(--kt-muted); }
+.kt-list-row:hover {
+  background: var(--kt-muted);
+}
+
+.kt-col--center {
+  justify-content: center !important;
+  text-align: center;
+}
+
+.kt-col--right {
+  justify-content: flex-end !important;
+  text-align: right;
+}
 
-/* 2. 排序标题布局：图标紧跟文字 */
 .kt-sortable {
   cursor: pointer;
-  display: inline-flex; /* 紧凑布局 */
+  display: inline-flex;
   align-items: center;
-  justify-content: flex-start;
   gap: 0.5rem;
   transition: color var(--kt-transition-micro);
   white-space: nowrap;
 }
-.kt-col--center { justify-content: center !important; text-align: center; }
-.kt-sortable--center { justify-content: center; }
-.kt-col--right { justify-content: flex-end !important; text-align: right; }
-
-.kt-sortable i { font-size: 0.75rem; }
-.active { color: var(--kt-accent); opacity: 1; }
-.dim { opacity: 0.2; }
-
-/* 3. 单元格文本处理 */
-.kt-col { display: flex; align-items: center; min-height: 1.2em; }
-.kt-username { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.kt-email { color: var(--kt-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-/* 4. 基础框架 */
-.kt-subpage-layout { width: 100%; height: 100%; padding: 2rem; display: flex; justify-content: center; align-items: center; background: var(--kt-bg); }
-.kt-modal-wrapper { width: 100%; max-width: 500px; }
-.kt-modal-wrapper--wide { max-width: 90vw; }
-.kt-modal-card { width: 100%; background: var(--kt-bg); border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
-.kt-modal-card--fullscreen { height: 80vh; display: flex; flex-direction: column; }
-.kt-modal-header { padding: 1.5rem 2rem; border-bottom: var(--kt-border-width) solid var(--kt-border); background: var(--kt-muted); display: flex; justify-content: space-between; align-items: center; }
-.kt-modal-title { font-family: var(--kt-font); font-weight: 700; color: var(--kt-fg); font-size: var(--kt-body); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; display: flex; align-items: baseline; gap: 1rem; }
-.kt-modal-title-en { font-size: var(--kt-small); color: var(--kt-muted-fg); font-weight: 400; letter-spacing: 0.1em; }
-
-/* 5. 按钮与交互 */
-.kt-close-btn { width: 40px; height: 40px; background: transparent; border: var(--kt-border-width) solid var(--kt-border); border-radius: var(--kt-radius); color: var(--kt-muted-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--kt-transition-micro); }
-.kt-close-btn:hover { background: var(--kt-fg); border-color: var(--kt-fg); color: var(--kt-bg); }
-.kt-text-btn { font-weight: 700; color: var(--kt-muted-fg); background: none; border: none; cursor: pointer; transition: 0.2s; white-space: nowrap; }
-.kt-text-btn--edit:hover { color: var(--kt-accent); }
-.kt-text-btn--danger { color: #ef4444; }
-.kt-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
-.kt-btn { padding: 0.8rem 1.5rem; cursor: pointer; font-weight: 700; text-transform: uppercase; border: 2px solid var(--kt-border); background: none; color: var(--kt-fg); font-family: var(--kt-font); transition: 0.2s; }
-.kt-btn--primary { background: var(--kt-accent); border-color: var(--kt-accent); color: #000; }
-.kt-btn--primary:hover { background: var(--kt-fg); color: var(--kt-bg); border-color: var(--kt-fg); }
 
-/* 确保块级堆叠 */
-.kt-modal-body { padding: 2.5rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2rem; }
-.kt-form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
-.kt-form-group { display: block; width: 100%; margin-bottom: 0.5rem; } /* 强制块级 */
-.kt-form-label { display: block; margin-bottom: 0.75rem; font-size: var(--kt-small); font-weight: 700; text-transform: uppercase; color: var(--kt-fg); letter-spacing: 0.05em; }
-.kt-form-input { 
-  display: block;
-  width: 100%; 
-  padding: 1rem; 
-  border: var(--kt-border-width) solid var(--kt-border); 
-  background: var(--kt-bg); 
-  color: var(--kt-fg); 
-  font-family: var(--kt-font);
-  transition: border-color 0.2s;
-  box-sizing: border-box; /* 必须包含 padding */
+@media (max-width: 900px) {
+  .kt-modal-card--fullscreen {
+    height: auto;
+  }
+
+  .kt-list-header {
+    display: none;
+  }
+
+  .kt-list-row {
+    grid-template-columns: 1fr;
+    padding: 1.5rem;
+    gap: 0.5rem;
+  }
+
+  .kt-col--right {
+    justify-content: flex-start;
+  }
+
+  .kt-actions {
+    justify-content: flex-start;
+    margin-top: 1rem;
+  }
 }
-.kt-form-input:focus { border-color: var(--kt-accent); outline: none; }
-.kt-form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
 
-/* 7. 其他组件 */
-.kt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
-.kt-search-group { position: relative; flex: 1; display: flex; align-items: center; gap: 1rem; }
-.kt-search-input { width: 100%; max-width: 300px; padding: 0.75rem 1rem 0.75rem 2.5rem; border: var(--kt-border-width) solid var(--kt-border); background: var(--kt-bg); color: var(--kt-fg); }
-.kt-search-icon { position: absolute; left: 1rem; color: var(--kt-muted-fg); }
-.kt-table-wrapper { flex: 1; overflow-y: auto; border: var(--kt-border-width) solid var(--kt-border); }
-.kt-role-tag { width: 80px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kt-border); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; }
-.kt-role--admin { background: var(--kt-accent); color: #000; border-color: var(--kt-accent); }
-.kt-role--vip { color: var(--kt-accent); border-color: var(--kt-accent); }
-.kt-pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding-top: 1rem; }
-.kt-page-btn { width: 36px; height: 36px; border: 1px solid var(--kt-border); background: none; color: var(--kt-fg); cursor: pointer; }
-.kt-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; min-height: 44px; }
-.kt-mode-toggle { display: flex; gap: 0.5rem; background: var(--kt-muted); padding: 0.3rem; }
-.kt-mode-toggle span { padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.7rem; font-weight: 700; }
-.kt-mode-toggle span.active { background: var(--kt-bg); color: var(--kt-fg); }
-.kt-strength-selector { display: flex; border: 1px solid var(--kt-border); }
-.kt-strength-item { flex: 1; text-align: center; padding: 0.6rem; cursor: pointer; font-weight: 700; }
-.kt-strength-item.active { background: var(--kt-accent); color: #000; }
-.kt-sub-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 3000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(4px); }
-.kt-sub-modal-card { width: 95%; max-width: 500px; height: auto !important; }
+.kt-close-btn:focus-visible,
+.kt-btn:focus-visible,
+.kt-form-input:focus-visible,
+.kt-form-select:focus-visible,
+.kt-text-btn:focus-visible,
+.kt-page-btn:focus-visible {
+  outline: 2px solid var(--kt-accent);
+  outline-offset: 2px;
+}
 
-@media (max-width: 900px) {
-  .kt-modal-card--fullscreen { height: auto; }
-  .kt-list-header { display: none; }
-  .kt-list-row { grid-template-columns: 1fr; padding: 1.5rem; gap: 0.5rem; }
-  .kt-col--right { justify-content: flex-start; }
-  .kt-actions { justify-content: flex-start; margin-top: 1rem; }
+@media (prefers-reduced-motion: reduce) {
+
+  .kt-close-btn,
+  .kt-btn,
+  .kt-list-row,
+  .kt-text-btn,
+  .kt-page-btn,
+  .kt-form-input,
+  .kt-form-select {
+    transition: none;
+  }
+
+  .kt-btn:hover,
+  .kt-page-btn:hover:not(:disabled) {
+    transform: none;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/views/home/HomePage.vue b/src/frontend/src/views/home/HomePage.vue
index 9e1fb9c..a17120e 100644
--- a/src/frontend/src/views/home/HomePage.vue
+++ b/src/frontend/src/views/home/HomePage.vue
@@ -191,7 +191,7 @@ onUnmounted(() => {
 
 .kt-hero__subtitle {
   font-family: var(--kt-font);
-  font-size: clamp(1.25rem, 2.5vw, 2rem); 
+  font-size: clamp(1.5rem, 3vw, 3rem); 
   color: var(--kt-fg);
   margin-top: 2rem;
   text-transform: uppercase;
@@ -246,27 +246,27 @@ onUnmounted(() => {
 }
 
 .paper-text-col {
-  /* 文字区域占比 35% */
-  flex: 0 0 35%; 
-  padding: var(--kt-card-padding);
+  flex: 4;
+  padding: 1.75rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   z-index: 2;
+  min-width: 0;
+  border-right: none;
 }
 
-/* 右侧图片容器 */
 .paper-img-col {
-  /* 图片区域占比 65% */
-  flex: 0 0 65%; 
+  flex: 6;
   position: relative;
   overflow: hidden;
-  border-left: none;
   background-color: transparent; 
   display: flex;
   flex-direction: column;
   align-items: center;     
-  justify-content: center; 
+  justify-content: center;
+  min-height: 0;
+  border-left: none;
 }
 
 /* 图片样式 */
@@ -301,7 +301,7 @@ onUnmounted(() => {
   line-height: 1;
   flex-shrink: 0;
   transition: color var(--kt-transition-normal);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .kt-card__content {
@@ -310,7 +310,7 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: flex-end; 
   width: 100%;
-  padding-top: 1rem; 
+  padding-top: 0.5rem; 
 }
 
 .kt-card__title {
@@ -344,7 +344,7 @@ onUnmounted(() => {
 
 /* 针对非 Hero 卡片的特殊处理 */
 .kt-card:not(.kt-card--paper) {
-  padding: var(--kt-card-padding);
+  padding: calc(var(--kt-card-padding) / 2);
   justify-content: space-between;
 }
 
diff --git a/src/frontend/src/views/home/subpages/PaperSupport.vue b/src/frontend/src/views/home/subpages/PaperSupport.vue
index 88ee260..325c35e 100644
--- a/src/frontend/src/views/home/subpages/PaperSupport.vue
+++ b/src/frontend/src/views/home/subpages/PaperSupport.vue
@@ -6,7 +6,6 @@
       <div class="kt-subpage__card-header">
         <h2 class="kt-subpage__title">
           论文支持
-          <span class="kt-subpage__title-en">ACADEMIC RESEARCH</span>
         </h2>
         <!-- 页码指示器 -->
         <div class="page-indicator">
@@ -56,7 +55,7 @@
                   
                   <div class="paper-authors">
                     <span class="label">AUTHORS:</span>
-                    <p>{{ currentPaper.authors }}</p>
+                    <span class="author-names">{{ currentPaper.authors }}</span>
                   </div>
 
                   <div class="paper-abstract-box">
@@ -173,7 +172,7 @@ const prevPage = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem 3rem;
+  padding: 0.75rem 0.75rem;
   border-bottom: var(--kt-border-width) solid var(--kt-border);
   flex-shrink: 0;
 }
@@ -282,7 +281,7 @@ const prevPage = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.8rem; 
+  padding: 0.2rem; 
   border-right: 1px solid rgba(0,0,0,0.1);
 }
 
@@ -306,7 +305,7 @@ const prevPage = () => {
 
 /* Right Page: Info */
 .right-page {
-  padding: 3rem;
+  padding: 1.75rem;
   display: flex;
   flex-direction: column;
   background: var(--kt-bg);
@@ -348,7 +347,7 @@ const prevPage = () => {
   line-height: 1.1;
   text-transform: uppercase;
   color: var(--kt-fg);
-  margin-bottom: 2rem;
+  margin-bottom: 0.75rem;
   /* Limit lines */
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -357,7 +356,7 @@ const prevPage = () => {
 }
 
 .paper-authors {
-  margin-bottom: 2rem;
+  margin-bottom: 0.75rem;
 }
 
 .paper-authors .label,
@@ -377,6 +376,12 @@ const prevPage = () => {
   font-weight: 500;
 }
 
+.author-names {
+  font-family: var(--kt-font);
+  font-size: var(--kt-body)/2;
+  color: var(--kt-fg);
+}
+
 .paper-abstract-box {
   flex: 1;
   overflow-y: auto; /* Allow scrolling text only if strictly necessary, but ideally fits */
diff --git a/src/frontend/src/views/home/subpages/PrincipleDiagram.vue b/src/frontend/src/views/home/subpages/PrincipleDiagram.vue
index ebb7df8..148b97c 100644
--- a/src/frontend/src/views/home/subpages/PrincipleDiagram.vue
+++ b/src/frontend/src/views/home/subpages/PrincipleDiagram.vue
@@ -161,10 +161,10 @@ onUnmounted(() => {
   flex: 1;
   position: relative;
   overflow: hidden;
-  /* 使用透明背景，使其跟随父容器背景色 (适配 Light/Dark) */
   background: transparent; 
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
 .slide-wrapper {
@@ -172,7 +172,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: 0.2rem;
   overflow: hidden;
 }
 
diff --git a/src/frontend/src/views/home/subpages/SamplePreview.vue b/src/frontend/src/views/home/subpages/SamplePreview.vue
index 2349853..d06cf46 100644
--- a/src/frontend/src/views/home/subpages/SamplePreview.vue
+++ b/src/frontend/src/views/home/subpages/SamplePreview.vue
@@ -1,43 +1,29 @@
 <template>
   <div class="kt-subpage kt-subpage--with-sidebar">
     <div class="kt-subpage__content-card sample-container">
-      
+
       <!-- 头部 -->
       <div class="kt-subpage__card-header">
         <h2 class="kt-subpage__title">
           样例效果
-          <span class="kt-subpage__title-en">VISUAL DEMONSTRATION</span>
         </h2>
-        
+
         <div class="sample-tabs">
-          <button 
-            v-for="tab in tabs" 
-            :key="tab.key"
-            class="tab-btn"
-            :class="{ active: currentTab === tab.key }"
-            @click="currentTab = tab.key"
-          >
+          <button v-for="tab in tabs" :key="tab.key" class="tab-btn" :class="{ active: currentTab === tab.key }"
+            @click="currentTab = tab.key">
             {{ tab.label }}
           </button>
         </div>
       </div>
-      
+
       <!-- 内容展示区 -->
       <div class="kt-subpage__card-body sample-body">
-        
-        <div class="sample-desc">
-          <p class="kt-body-text">
-            <i class="fas fa-layer-group"></i> 
-            点击卡片堆叠可切换下一张
-          </p>
-        </div>
-
         <!-- 核心展示区 -->
         <div class="demo-stage">
-          
+
           <!-- 上半部分：输入对 -->
           <div class="demo-row input-row">
-            
+
             <!-- Origin Stack -->
             <div class="demo-col">
               <div class="stack-box" @click="nextInput">
@@ -77,12 +63,12 @@
           <!-- 中间连接：竖向箭头 + Prompt 提示 -->
           <div class="demo-row connect-row">
             <div class="demo-col">
-               <div class="demo-arrow-v">
-                  <div class="line-v"></div>
-                  <i class="fas fa-chevron-down"></i>
-               </div>
+              <div class="demo-arrow-v">
+                <div class="line-v"></div>
+                <i class="fas fa-chevron-down"></i>
+              </div>
             </div>
-            
+
             <!-- 提示词显示区域 -->
             <div class="demo-prompt-container" v-if="currentPrompt">
               <div class="kt-prompt-capsule">
@@ -93,16 +79,16 @@
             <div class="demo-spacer" v-else></div>
 
             <div class="demo-col">
-               <div class="demo-arrow-v">
-                  <div class="line-v"></div>
-                  <i class="fas fa-chevron-down"></i>
-               </div>
+              <div class="demo-arrow-v">
+                <div class="line-v"></div>
+                <i class="fas fa-chevron-down"></i>
+              </div>
             </div>
           </div>
 
           <!-- 下半部分：生成结果 -->
           <div class="demo-row result-row">
-            
+
             <!-- Good Gen Stack -->
             <div class="demo-col">
               <div class="stack-box" @click="nextGoodGen">
@@ -139,6 +125,14 @@
         </div>
 
       </div>
+
+      <div class="sample-desc">
+        <p class="kt-body-text">
+          <i class="fas fa-layer-group"></i>
+          点击卡片堆叠可切换下一张
+        </p>
+      </div>
+      
     </div>
   </div>
 </template>
@@ -217,6 +211,7 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 <style scoped>
 .sample-container {
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   background: var(--kt-bg);
@@ -228,11 +223,11 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 3rem;
+  padding: 1rem 1rem;
   border-bottom: var(--kt-border-width) solid var(--kt-border);
   flex-shrink: 0;
   background: var(--kt-muted);
-  gap: 3rem; 
+  gap: 1.5rem;
 }
 
 .sample-tabs {
@@ -258,8 +253,15 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   transition: all 0.2s ease;
 }
 
-.tab-btn:hover { color: var(--kt-fg); background: rgba(255,255,255,0.05); }
-.tab-btn.active { background: var(--kt-accent); color: var(--kt-accent-fg); }
+.tab-btn:hover {
+  color: var(--kt-fg);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.tab-btn.active {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+}
 
 .sample-body {
   flex: 1;
@@ -271,8 +273,15 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   gap: 2rem;
 }
 
-.sample-desc { text-align: center; color: var(--kt-muted-fg); }
-.sample-desc i { color: var(--kt-accent); margin-right: 0.5rem; }
+.sample-desc {
+  text-align: center;
+  color: var(--kt-muted-fg);
+}
+
+.sample-desc i {
+  color: var(--kt-accent);
+  margin-right: 0.5rem;
+}
 
 /* 
  * === 新版布局结构 === 
@@ -290,7 +299,7 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2rem;
+  gap: 1rem;
 }
 
 .demo-col {
@@ -301,7 +310,8 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 }
 
 .demo-spacer {
-  width: 120px; /* 对应横向箭头的宽度 */
+  width: 120px;
+  /* 对应横向箭头的宽度 */
 }
 
 /* 动态 Spacer */
@@ -316,12 +326,14 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 120px; /* 保持与 spacer 一致，内容溢出可见 */
+  width: 120px;
+  /* 保持与 spacer 一致，内容溢出可见 */
   position: relative;
 }
 
 .kt-prompt-capsule {
-  position: absolute; /* 绝对定位以允许宽度超出 120px 而不推挤两边 */
+  position: absolute;
+  /* 绝对定位以允许宽度超出 120px 而不推挤两边 */
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -332,7 +344,7 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
   padding: 0.5rem 1rem;
   border-radius: 999px;
   white-space: nowrap;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   z-index: 10;
 }
 
@@ -375,16 +387,20 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 
 .stack-card {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
   background: var(--kt-bg);
   border: 4px solid var(--kt-fg);
   border-radius: 8px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-  
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
 
@@ -392,8 +408,9 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 :root:not(.dark-mode) .stack-card {
   background: #fff;
   border-color: #e5e5e5;
-  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
+
 :root:not(.dark-mode) .stack-card.layer-1 {
   border-color: var(--kt-fg);
 }
@@ -401,7 +418,7 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 .layer-3 {
   z-index: 1;
   transform: translate(25px, 25px) rotate(6deg);
-  background: var(--kt-muted) !important; 
+  background: var(--kt-muted) !important;
   border-color: var(--kt-border) !important;
 }
 
@@ -422,36 +439,77 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
 .stack-box:hover .layer-1 {
   transform: translate(-5px, -5px) scale(1.02);
   border-color: var(--kt-accent) !important;
-  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+}
+
+.stack-box:hover .layer-2 {
+  transform: translate(15px, 15px) rotate(2deg);
+}
+
+.stack-box:hover .layer-3 {
+  transform: translate(30px, 30px) rotate(5deg);
 }
-.stack-box:hover .layer-2 { transform: translate(15px, 15px) rotate(2deg); }
-.stack-box:hover .layer-3 { transform: translate(30px, 30px) rotate(5deg); }
 
 @keyframes card-enter {
-  from { opacity: 0; transform: translate(10px, 10px); }
-  to { opacity: 1; transform: translate(0, 0); }
+  from {
+    opacity: 0;
+    transform: translate(10px, 10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
 }
 
 .stack-img {
-  width: 100%; height: 100%; object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .stack-badge {
-  position: absolute; bottom: 0; right: 0;
-  font-family: var(--kt-font); font-size: 0.65rem; font-weight: 800;
-  background: var(--kt-fg); color: var(--kt-bg);
-  padding: 4px 8px; text-transform: uppercase;
-  border-top-left-radius: 4px; z-index: 2;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-family: var(--kt-font);
+  font-size: 0.65rem;
+  font-weight: 800;
+  background: var(--kt-fg);
+  color: var(--kt-bg);
+  padding: 4px 8px;
+  text-transform: uppercase;
+  border-top-left-radius: 4px;
+  z-index: 2;
+}
+
+.badge-accent {
+  background: var(--kt-accent);
+  color: var(--kt-accent-fg);
+}
+
+.badge-danger {
+  background: #ef4444;
+  color: #fff;
+}
+
+.badge-success {
+  background: #22c55e;
+  color: #000;
 }
-.badge-accent { background: var(--kt-accent); color: var(--kt-accent-fg); }
-.badge-danger { background: #ef4444; color: #fff; }
-.badge-success { background: #22c55e; color: #000; }
 
 .noise-hint {
-  position: absolute; top: 0; left: 0; right: 0;
-  padding: 4px; background: rgba(0,0,0,0.7);
-  color: var(--kt-accent); font-size: 0.6rem;
-  text-align: center; font-weight: 700; text-transform: uppercase;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.7);
+  color: var(--kt-accent);
+  font-size: 0.6rem;
+  text-align: center;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
 /* 
@@ -459,22 +517,49 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
  */
 .demo-arrow-h {
   width: 120px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .arrow-graphic {
-  display: flex; align-items: center; width: 100%; gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
   color: var(--kt-muted-fg);
 }
-.arrow-graphic i { font-size: 1.5rem; }
-.line { flex: 1; height: 2px; background: var(--kt-muted-fg); }
+
+.arrow-graphic i {
+  font-size: 1.5rem;
+}
+
+.line {
+  flex: 1;
+  height: 2px;
+  background: var(--kt-muted-fg);
+}
 
 .demo-arrow-v {
-  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
-  color: var(--kt-muted-fg); height: 80px; justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--kt-muted-fg);
+  height: 80px;
+  justify-content: center;
+}
+
+.demo-arrow-v i {
+  font-size: 1.5rem;
+}
+
+.line-v {
+  flex: 1;
+  width: 2px;
+  background: var(--kt-muted-fg);
 }
-.demo-arrow-v i { font-size: 1.5rem; }
-.line-v { flex: 1; width: 2px; background: var(--kt-muted-fg); }
 
 /* Mobile */
 @media (max-width: 900px) {
@@ -486,28 +571,69 @@ const nextBadGen = () => { indices[currentTab.value].bad++ }
     gap: 1.5rem;
     padding: 1.5rem;
   }
-  
+
   .sample-tabs {
     width: 100%;
     justify-content: space-between;
   }
-  
+
   .tab-btn {
     flex: 1;
     text-align: center;
   }
 
-  .demo-row { flex-direction: column; gap: 1.5rem; }
-  .demo-arrow-h { transform: rotate(90deg); margin: 1rem 0; }
-  
+  .demo-row {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .demo-arrow-h {
+    transform: rotate(90deg);
+    margin: 1rem 0;
+  }
+
   /* 移动端调整：隐藏中间连接线，但显示 Prompt */
-  .connect-row { display: flex; flex-direction: row; justify-content: center; width: 100%; height: auto; gap: 0; margin: 1rem 0; }
-  .connect-row .demo-col { display: none; } /* 隐藏竖向箭头 */
-  .demo-prompt-container { width: auto; position: static; }
-  .kt-prompt-capsule { position: static; transform: none; width: 100%; justify-content: center; max-width: 90vw; white-space: normal; text-align: center; }
-  .demo-spacer, .demo-spacer-dynamic { display: none; }
-  
-  .stack-box { margin-bottom: 25px; margin-right: 25px; }
-  .col-label { margin-top: 2rem; }
+  .connect-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    gap: 0;
+    margin: 0;
+  }
+
+  .connect-row .demo-col {
+    display: none;
+  }
+
+  /* 隐藏竖向箭头 */
+  .demo-prompt-container {
+    width: auto;
+    position: static;
+  }
+
+  .kt-prompt-capsule {
+    position: static;
+    transform: none;
+    width: 100%;
+    justify-content: center;
+    max-width: 90vw;
+    white-space: normal;
+    text-align: center;
+  }
+
+  .demo-spacer,
+  .demo-spacer-dynamic {
+    display: none;
+  }
+
+  .stack-box {
+    margin-bottom: 25px;
+    margin-right: 25px;
+  }
+
+  .col-label {
+    margin-top: 2rem;
+  }
 }
 </style>
\ No newline at end of file