From 11a31c3745bb2bc9824a80dea153ef0ae9eff6f9 Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Thu, 19 Mar 2026 20:34:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(views):=20=E6=96=B0=E5=A2=9E=E8=8B=B1?=
 =?UTF-8?q?=E8=AF=AD=E8=AF=95=E9=A2=98AI=E5=88=86=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/exam-analysis-page_7cfcd60b.md      |  187 +++
 src/router/index.js                           |    6 +
 src/views/ExamAnalysis.vue                    | 1209 +++++++++++++++++
 src/views/HomePage.vue                        |    2 +-
 4 files changed, 1403 insertions(+), 1 deletion(-)
 create mode 100644 .codebuddy/plans/exam-analysis-page_7cfcd60b.md
 create mode 100644 src/views/ExamAnalysis.vue

diff --git a/.codebuddy/plans/exam-analysis-page_7cfcd60b.md b/.codebuddy/plans/exam-analysis-page_7cfcd60b.md
new file mode 100644
index 0000000..2db406a
--- /dev/null
+++ b/.codebuddy/plans/exam-analysis-page_7cfcd60b.md
@@ -0,0 +1,187 @@
+---
+name: exam-analysis-page
+overview: 新增"英语试题AI分析"页面（ExamAnalysis.vue），支持文本输入和图片上传两种方式，通过流式调用 Gemini API 对试题进行多维度深度解析，并实时展示分析结果。
+design:
+  architecture:
+    framework: vue
+  styleKeywords:
+    - Glassmorphism
+    - Dark Theme
+    - Teal Accent
+    - Streaming Typewriter
+    - Card Layout
+    - Minimalism
+  fontSystem:
+    fontFamily: Inter
+    heading:
+      size: 1.2rem
+      weight: 600
+    subheading:
+      size: 1rem
+      weight: 500
+    body:
+      size: 0.95rem
+      weight: 400
+  colorSystem:
+    primary:
+      - "#14b8a6"
+      - "#0d9488"
+    background:
+      - "#0d0f17"
+      - rgba(255,255,255,0.03)
+    text:
+      - "#ffffff"
+      - "#94a3b8"
+    functional:
+      - "#ef4444"
+      - "#fca5a5"
+      - rgba(20,184,166,0.15)
+todos:
+  - id: create-exam-analysis-page
+    content: 创建 src/views/ExamAnalysis.vue，实现双模式输入、流式 Gemini API 调用、五维度结果卡片及完整状态管理
+    status: completed
+  - id: register-route-and-update-homepage
+    content: 更新 src/router/index.js 注册 /exam-analysis 路由，并修改 src/views/HomePage.vue 中 card-4 的 route 为 '/exam-analysis'
+    status: completed
+    dependencies:
+      - create-exam-analysis-page
+---
+
+## 用户需求
+
+开发一个英语试题 AI 分析页面，集成到现有 Vue 3 项目中，作为首页第 4 个功能卡片（英语试题AI分析）的目标页面。
+
+## 产品概述
+
+用户可通过文本输入或图片上传两种方式提交英语试题，系统调用 Gemini API 进行流式深度解析，分析结果实时逐字渲染展示，整体风格与现有页面保持一致（深色 Glassmorphism 风格，Teal 主题色）。
+
+## 核心功能
+
+- **双模式输入**：支持文本粘贴输入和图片上传（JPG/PNG，拖拽或点击），两种模式通过 Tab 切换
+- **流式 AI 分析**：通过 axios + `onDownloadProgress` 回调流式调用 Gemini API，分析结果实时逐字输出
+- **多维度解析展示**：将分析结果结构化展示为五个维度卡片：题干理解、考点识别、解题思路、正确答案、详细解析
+- **实时流式渲染**：分析过程中显示打字机效果，内容逐步呈现，用户可看到实时生成进度
+- **状态管理**：idle / analyzing / done / error 四种状态，含加载动画、错误提示、重新分析等交互
+- **路由集成**：注册 `/exam-analysis` 路由，首页 card-4 的 `route: null` 更新为 `/exam-analysis`
+
+## 技术栈
+
+- **框架**：Vue 3 + `<script setup>` + Composition API（与现有项目一致）
+- **路由**：vue-router（现有，仅新增路由条目）
+- **HTTP/流式请求**：`axios` + `onDownloadProgress` 回调（Gemini SSE 流式响应，与项目现有 axios 依赖保持一致）
+- **样式**：Scoped CSS，复用现有 CSS 变量（`--bg-color`、`--card-bg`、`--card-border`、`--text-primary`、`--text-secondary`、`--accent-4`）
+
+## 实现方案
+
+### 流式调用策略
+
+Gemini API 支持 SSE（Server-Sent Events）流式输出。使用 `axios` 发起请求，设置 `responseType: 'text'`，通过 `onDownloadProgress` 回调监听每次数据块到达，从 `event.target.responseText` 中增量提取新内容，逐步拼接到响应字符串中，触发 Vue 响应式更新实现打字机效果。与项目现有 axios 依赖保持一致，无需引入额外依赖。
+
+### 结构化解析策略
+
+AI 返回的 Markdown 文本通过正则表达式按标题（`##` 或特定关键词）分割为五个维度模块，每个模块独立渲染为卡片。流式过程中实时更新当前正在生成的模块内容，已完成的模块保持稳定显示。
+
+### Prompt 设计
+
+系统 Prompt 要求 Gemini 严格按照固定格式输出，包含五个 `##` 标题段落，便于前端解析分割。
+
+## 架构设计
+
+```mermaid
+graph TD
+    A[ExamAnalysis.vue] --> B[输入区域 - Tab切换]
+    B --> C[文本输入 Textarea]
+    B --> D[图片上传 拖拽/点击]
+    A --> E[分析按钮]
+    E --> F[geminiStream 流式请求]
+    F --> G[axios + onDownloadProgress]
+    G --> H[event.target.responseText 增量提取]
+    H --> I[实时拼接 rawContent]
+    I --> J[parseAnalysis 解析分割]
+    J --> K[五维度卡片渲染]
+    A --> L[状态机: idle/analyzing/done/error]
+```
+
+## 目录结构
+
+```
+src/
+├── views/
+│   └── ExamAnalysis.vue     # [NEW] 英语试题AI分析页面主组件
+│                              # 包含：双模式输入（文本/图片Tab切换）、
+│                              # 流式调用 Gemini API、实时渲染分析结果、
+│                              # 五维度结构化卡片展示、完整状态管理
+├── router/
+│   └── index.js             # [MODIFY] 新增 /exam-analysis 路由，
+│                              # import ExamAnalysis 并添加路由条目
+└── views/
+    └── HomePage.vue         # [MODIFY] 第37行 card-4 的 route: null
+                               # 改为 route: '/exam-analysis'
+```
+
+## 关键实现细节
+
+### 流式请求核心逻辑
+
+```js
+// Gemini API 流式调用（axios + onDownloadProgress）
+const streamAnalysis = async (prompt, imageBase64 = null) => {
+  let lastLength = 0
+  await axios.post(GEMINI_API_URL, buildRequestBody(prompt, imageBase64), {
+    headers: { 'Content-Type': 'application/json', 'x-goog-api-key': API_KEY },
+    responseType: 'text',
+    onDownloadProgress: (event) => {
+      const text = event.target.responseText
+      const newChunk = text.slice(lastLength)
+      lastLength = text.length
+      // 解析 SSE data 行，提取 text delta
+      rawContent.value += extractTextDelta(newChunk)
+      analysisBlocks.value = parseAnalysis(rawContent.value)
+    }
+  })
+}
+```
+
+### 分析结果解析
+
+将 AI 输出按 `## 题干理解 / ## 考点识别 / ## 解题思路 / ## 正确答案 / ## 详细解析` 五个标题分割，每个块独立渲染，支持基础 Markdown（加粗、换行）。
+
+### 性能注意事项
+
+- 流式更新频率较高，`parseAnalysis` 使用轻量正则，避免每次 chunk 触发重量级 DOM 操作
+- 图片 base64 转换在 `FileReader` 异步完成后才启用分析按钮，防止空数据提交
+- 组件卸载时调用 `axios.CancelToken` 中止未完成的流请求，防止内存泄漏
+
+## 设计风格
+
+延续现有项目的深色 Glassmorphism 风格，以 Teal（#14b8a6 / #0d9488）为主题色，与首页 card-4 保持一致。整体布局参考 EssayCorrection.vue 的三段式结构：顶部固定导航栏 + 中部内容区 + 底部结果区。
+
+## 页面布局
+
+### 1. 顶部导航栏
+
+固定在顶部，毛玻璃背景，左侧返回按钮，中间标题"英语试题 AI 分析"（Teal 渐变文字），与其他页面导航栏完全一致的视觉规范。
+
+### 2. 输入区域（Tab 切换）
+
+两个 Tab 标签（文本输入 / 图片上传），Teal 色激活态下划线。
+
+- **文本 Tab**：大尺寸 Textarea，深色背景，Teal 聚焦边框光晕，占位符提示文字
+- **图片 Tab**：虚线上传区（Teal 色边框），支持拖拽，图片预览缩略图，重新上传按钮
+
+### 3. 分析按钮
+
+居中大按钮，Teal 渐变背景，分析中显示旋转 Spinner + "分析中..."文字，禁用态半透明。
+
+### 4. 分析结果区域
+
+五个维度卡片纵向排列，每张卡片：
+
+- 左侧 Teal 色竖线 + 图标 + 标题
+- 卡片内容区白色文字，支持基础 Markdown 渲染（加粗、换行）
+- 流式生成中的卡片末尾显示闪烁光标动画
+- 卡片入场动画（fadeInUp，依次延迟）
+
+### 5. 错误提示
+
+红色半透明 Banner，可关闭，与 EssayCorrection.vue 保持一致。
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 324b3bf..dd1ae5e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import Home from '../views/HomePage.vue'
 import Pronunciation from '../views/Pronunciation.vue'
 import Speaking from '../views/Speaking.vue'
 import EssayCorrection from '../views/EssayCorrection.vue'
+import ExamAnalysis from '../views/ExamAnalysis.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,6 +27,11 @@ const router = createRouter({
       path: '/essay-correction',
       name: 'essay-correction',
       component: EssayCorrection
+    },
+    {
+      path: '/exam-analysis',
+      name: 'exam-analysis',
+      component: ExamAnalysis
     }
   ]
 })
diff --git a/src/views/ExamAnalysis.vue b/src/views/ExamAnalysis.vue
new file mode 100644
index 0000000..91ed069
--- /dev/null
+++ b/src/views/ExamAnalysis.vue
@@ -0,0 +1,1209 @@
+<script setup>
+import { ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import axios from "axios";
+
+const router = useRouter();
+
+// ── API 配置（请替换为实际的 Gemini API Key 和地址）──
+const API_KEY = "sk-6ba4b57a0b034d9388f7a7a2d477d637";
+const API_URL = "https://grsaiapi.com/v1/chat/completions";
+
+const SYSTEM_PROMPT = `你是一位专业的英语教师，请对以下英语试题进行深度解析。
+请严格按照以下格式输出，每个部分用对应标题开头：
+
+## 题干理解
+（分析题目类型、题干含义、关键信息点）
+
+## 考点识别
+（识别本题考查的语法点、词汇点、语言技能等核心考点）
+
+## 解题思路
+（详细说明解题步骤和方法，帮助学生理解解题过程）
+
+## 正确答案
+（给出正确答案，如有选项请标明选项字母）
+
+## 详细解析
+（对答案进行深入解释，分析干扰项，总结规律和技巧）`;
+
+// ── 状态 ──
+const activeTab = ref("text"); // 'text' | 'image'
+const status = ref("idle"); // 'idle' | 'analyzing' | 'done' | 'error'
+const textInput = ref("");
+const imageFile = ref(null); // { dataUrl, base64 }
+const isDragOver = ref(false);
+const fileInputRef = ref(null);
+const errorMsg = ref("");
+const rawContent = ref("");
+const cancelTokenSource = ref(null);
+
+// ── 五维度定义 ──
+const DIMENSIONS = [
+  { key: "understanding", title: "题干理解", icon: "book" },
+  { key: "keypoints", title: "考点识别", icon: "target" },
+  { key: "approach", title: "解题思路", icon: "lightbulb" },
+  { key: "answer", title: "正确答案", icon: "check" },
+  { key: "explanation", title: "详细解析", icon: "detail" },
+];
+
+// ── 解析流式内容为五个维度块 ──
+const analysisBlocks = computed(() => {
+  const raw = rawContent.value;
+  const result = {};
+  const titles = ["题干理解", "考点识别", "解题思路", "正确答案", "详细解析"];
+  const keys = [
+    "understanding",
+    "keypoints",
+    "approach",
+    "answer",
+    "explanation",
+  ];
+
+  titles.forEach((title, i) => {
+    const startReg = new RegExp(`##\\s*${title}`);
+    const nextTitles = titles
+      .slice(i + 1)
+      .map((t) => `##\\s*${t}`)
+      .join("|");
+    const endReg = nextTitles ? new RegExp(nextTitles) : null;
+
+    const startMatch = raw.match(startReg);
+    if (!startMatch) {
+      result[keys[i]] = "";
+      return;
+    }
+
+    const startIdx = startMatch.index + startMatch[0].length;
+    let endIdx = raw.length;
+    if (endReg) {
+      const endMatch = raw.slice(startIdx).match(endReg);
+      if (endMatch) endIdx = startIdx + endMatch.index;
+    }
+    result[keys[i]] = raw.slice(startIdx, endIdx).trim();
+  });
+  return result;
+});
+
+// 当前正在生成的维度（最后一个有内容的）
+const activeBlockKey = computed(() => {
+  if (status.value !== "analyzing") return null;
+  const keys = [
+    "understanding",
+    "keypoints",
+    "approach",
+    "answer",
+    "explanation",
+  ];
+  let last = null;
+  for (const k of keys) {
+    if (analysisBlocks.value[k] !== undefined && analysisBlocks.value[k] !== "")
+      last = k;
+  }
+  return last;
+});
+
+// ── 图片处理 ──
+const readFileAsBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const dataUrl = e.target.result;
+      resolve({ dataUrl, base64: dataUrl.split(",")[1] });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+
+const handleFile = async (file) => {
+  if (!file) return;
+  const allowed = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
+  if (!allowed.includes(file.type)) {
+    errorMsg.value = "仅支持 JPG / PNG / WebP 格式的图片";
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    errorMsg.value = "图片大小不能超过 10MB";
+    return;
+  }
+  errorMsg.value = "";
+  const { dataUrl, base64 } = await readFileAsBase64(file);
+  imageFile.value = { dataUrl, base64, mimeType: file.type };
+};
+
+const onFileChange = (e) => handleFile(e.target.files[0]);
+const onDrop = (e) => {
+  isDragOver.value = false;
+  handleFile(e.dataTransfer.files[0]);
+};
+const resetImage = () => {
+  imageFile.value = null;
+  if (fileInputRef.value) fileInputRef.value.value = "";
+};
+
+// ── 构建请求体（OpenAI 兼容格式）──
+const buildRequestBody = (imageBase64 = null, mimeType = "image/jpeg") => {
+  const userContent = [];
+
+  if (activeTab.value === "text") {
+    userContent.push({ type: "text", text: textInput.value });
+  } else {
+    userContent.push({ type: "text", text: "请分析图片中的英语试题" });
+    if (imageBase64) {
+      userContent.push({
+        type: "image_url",
+        image_url: { url: `data:${mimeType};base64,${imageBase64}` },
+      });
+    }
+  }
+
+  return {
+    model: "gemini-3.1-pro",
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: userContent },
+    ],
+    temperature: 0.7,
+    max_tokens: 2048,
+    stream: true,
+  };
+};
+
+// ── 提取 SSE delta 文本（OpenAI 兼容格式）──
+const extractTextDelta = (chunk) => {
+  let result = "";
+  const lines = chunk.split("\n");
+  for (const line of lines) {
+    if (!line.startsWith("data: ")) continue;
+    const jsonStr = line.slice(6).trim();
+    if (!jsonStr || jsonStr === "[DONE]") continue;
+    try {
+      const data = JSON.parse(jsonStr);
+      const text = data?.choices?.[0]?.delta?.content;
+      if (text) result += text;
+    } catch {
+      // 忽略解析失败的行
+    }
+  }
+  return result;
+};
+
+// ── 过滤 <think>...</think> 思考块 ──
+const filterThinkBlocks = (text) => {
+  // 移除完整的 think 块
+  let filtered = text.replace(/<think>[\s\S]*?<\/think>/g, "");
+  // 如果 think 块还未闭合（流式中），移除从 <think> 开始到末尾的内容
+  filtered = filtered.replace(/<think>[\s\S]*$/, "");
+  return filtered;
+};
+
+// ── 开始分析 ──
+const canAnalyze = computed(() => {
+  if (status.value === "analyzing") return false;
+  if (activeTab.value === "text") return textInput.value.trim().length > 0;
+  return imageFile.value !== null;
+});
+
+const startAnalysis = async () => {
+  if (!canAnalyze.value) return;
+  status.value = "analyzing";
+  errorMsg.value = "";
+  rawContent.value = "";
+
+  const imageBase64 =
+    activeTab.value === "image" ? imageFile.value?.base64 : null;
+  const mimeType =
+    activeTab.value === "image" ? imageFile.value?.mimeType : "image/jpeg";
+
+  cancelTokenSource.value = axios.CancelToken.source();
+  let lastLength = 0;
+
+  await axios
+    .post(API_URL, buildRequestBody(imageBase64, mimeType), {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${API_KEY}`,
+      },
+      responseType: "text",
+      cancelToken: cancelTokenSource.value.token,
+      onDownloadProgress: (event) => {
+        const text = (event.target || event.event?.target)?.responseText || "";
+        if (!text) return;
+        const newChunk = text.slice(lastLength);
+        lastLength = text.length;
+        const delta = extractTextDelta(newChunk);
+        if (delta) {
+          rawContent.value = filterThinkBlocks(rawContent.value + delta);
+        }
+      },
+    })
+    .then(() => {
+      status.value = "done";
+    })
+    .catch((err) => {
+      if (axios.isCancel(err)) return;
+      console.error(err);
+      errorMsg.value =
+        err?.response?.data?.error?.message ||
+        err.message ||
+        "请求失败，请稍后重试";
+      status.value = "error";
+    });
+};
+
+const resetAll = () => {
+  status.value = "idle";
+  rawContent.value = "";
+  errorMsg.value = "";
+};
+
+// ── 基础 Markdown 渲染（加粗、换行）──
+const renderContent = (text) => {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\n/g, "<br>");
+};
+
+const goBack = () => router.back();
+
+onUnmounted(() => {
+  if (cancelTokenSource.value)
+    cancelTokenSource.value.cancel("组件卸载，取消请求");
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- Nav Bar -->
+    <div class="nav-bar">
+      <button class="back-btn" @click="goBack">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        <span>返回</span>
+      </button>
+      <h1 class="nav-title">英语试题 AI 分析</h1>
+      <div style="width: 72px"></div>
+    </div>
+
+    <!-- Error Banner -->
+    <div v-if="errorMsg" class="error-banner">
+      <span>{{ errorMsg }}</span>
+      <button class="error-close" @click="errorMsg = ''">✕</button>
+    </div>
+
+    <!-- Main Layout: Left + Right -->
+    <div class="main-layout">
+      <!-- Left Panel: Input -->
+      <div class="left-panel">
+        <!-- Input Card -->
+        <div class="input-card">
+          <!-- Tabs -->
+          <div class="tabs">
+            <button
+              class="tab-btn"
+              :class="{ active: activeTab === 'text' }"
+              @click="activeTab = 'text'"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" y1="13" x2="8" y2="13" />
+                <line x1="16" y1="17" x2="8" y2="17" />
+                <polyline points="10 9 9 9 8 9" />
+              </svg>
+              文本输入
+            </button>
+            <button
+              class="tab-btn"
+              :class="{ active: activeTab === 'image' }"
+              @click="activeTab = 'image'"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="3" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              图片上传
+            </button>
+          </div>
+
+          <!-- Text Input -->
+          <div v-if="activeTab === 'text'" class="tab-content">
+            <textarea
+              v-model="textInput"
+              class="text-area"
+              placeholder="请粘贴英语试题文本，例如：&#10;&#10;Choose the best answer:&#10;The teacher asked the students _____ they had finished their homework.&#10;A. that  B. if  C. what  D. whether"
+              :disabled="status === 'analyzing'"
+            ></textarea>
+            <div class="char-count">{{ textInput.length }} 字符</div>
+          </div>
+
+          <!-- Image Upload -->
+          <div v-else class="tab-content">
+            <div
+              v-if="!imageFile"
+              class="upload-zone"
+              :class="{ 'drag-over': isDragOver }"
+              @click="fileInputRef.click()"
+              @dragover.prevent="isDragOver = true"
+              @dragleave.prevent="isDragOver = false"
+              @drop.prevent="onDrop"
+            >
+              <input
+                ref="fileInputRef"
+                type="file"
+                accept="image/jpeg,image/jpg,image/png,image/webp"
+                style="display: none"
+                @change="onFileChange"
+              />
+              <div class="upload-icon-wrap">
+                <svg
+                  width="36"
+                  height="36"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+              </div>
+              <p class="upload-title">点击或拖拽上传试题图片</p>
+              <p class="upload-hint">支持 JPG、PNG、WebP，最大 10MB</p>
+            </div>
+            <div v-else class="image-preview-wrap">
+              <div class="image-preview-header">
+                <span class="preview-label">已上传图片</span>
+                <button
+                  class="reupload-btn"
+                  @click="resetImage"
+                  :disabled="status === 'analyzing'"
+                >
+                  重新上传
+                </button>
+              </div>
+              <img :src="imageFile.dataUrl" class="preview-img" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Analyze Button -->
+        <div class="btn-wrap">
+          <button
+            class="analyze-btn"
+            :disabled="!canAnalyze"
+            @click="startAnalysis"
+          >
+            <span v-if="status === 'analyzing'" class="btn-spinner"></span>
+            <svg
+              v-else
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.35-4.35" />
+            </svg>
+            <span>{{
+              status === "analyzing" ? "分析中..." : "AI 深度分析"
+            }}</span>
+          </button>
+          <button
+            v-if="status === 'done' || status === 'error'"
+            class="reset-btn"
+            @click="resetAll"
+          >
+            重新分析
+          </button>
+        </div>
+      </div>
+
+      <!-- Right Panel: Result -->
+      <div class="right-panel">
+        <!-- Empty State -->
+        <div v-if="status === 'idle'" class="empty-state">
+          <div class="empty-icon">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.35-4.35" />
+            </svg>
+          </div>
+          <p class="empty-title">等待分析</p>
+          <p class="empty-hint">在左侧输入试题内容，点击「AI 深度分析」开始</p>
+        </div>
+
+        <!-- Result Area -->
+        <div
+          v-else-if="status === 'analyzing' || status === 'done'"
+          class="result-area"
+        >
+          <div class="result-header">
+            <div class="result-title-wrap">
+              <div
+                class="result-dot"
+                :class="{ pulse: status === 'analyzing' }"
+              ></div>
+              <span class="result-title">{{
+                status === "analyzing" ? "AI 正在分析..." : "分析完成"
+              }}</span>
+            </div>
+          </div>
+
+          <div
+            v-for="(dim, idx) in DIMENSIONS"
+            :key="dim.key"
+            class="dim-card"
+            :class="{
+              'is-active': activeBlockKey === dim.key,
+              'has-content': analysisBlocks[dim.key],
+            }"
+            :style="{ animationDelay: `${idx * 0.08}s` }"
+          >
+            <div class="dim-header">
+              <!-- Book icon -->
+              <svg
+                v-if="dim.icon === 'book'"
+                class="dim-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                <path
+                  d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
+                />
+              </svg>
+              <!-- Target icon -->
+              <svg
+                v-else-if="dim.icon === 'target'"
+                class="dim-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <circle cx="12" cy="12" r="6" />
+                <circle cx="12" cy="12" r="2" />
+              </svg>
+              <!-- Lightbulb icon -->
+              <svg
+                v-else-if="dim.icon === 'lightbulb'"
+                class="dim-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="9" y1="18" x2="15" y2="18" />
+                <line x1="10" y1="22" x2="14" y2="22" />
+                <path
+                  d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"
+                />
+              </svg>
+              <!-- Check icon -->
+              <svg
+                v-else-if="dim.icon === 'check'"
+                class="dim-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                <polyline points="22 4 12 14.01 9 11.01" />
+              </svg>
+              <!-- Detail icon -->
+              <svg
+                v-else
+                class="dim-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+              </svg>
+              <span class="dim-title">{{ dim.title }}</span>
+            </div>
+            <div class="dim-body">
+              <div
+                v-if="analysisBlocks[dim.key]"
+                class="dim-content"
+                v-html="renderContent(analysisBlocks[dim.key])"
+              ></div>
+              <div v-else-if="status === 'analyzing'" class="dim-placeholder">
+                <span class="placeholder-dot"></span>
+                <span class="placeholder-dot"></span>
+                <span class="placeholder-dot"></span>
+              </div>
+              <span v-if="activeBlockKey === dim.key" class="cursor-blink"
+                >|</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <!-- Error State -->
+        <div v-else-if="status === 'error'" class="empty-state error-state">
+          <div class="empty-icon error-icon">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+          </div>
+          <p class="empty-title">分析失败</p>
+          <p class="empty-hint">请检查网络连接后重试</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  font-family: "Inter", "PingFang SC", -apple-system, sans-serif;
+}
+
+/* Nav */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--card-border);
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.75rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--text-primary);
+}
+.nav-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0;
+  background: linear-gradient(135deg, #14b8a6, #0d9488);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Main Layout */
+.main-layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Left Panel */
+.left-panel {
+  width: 420px;
+  min-width: 320px;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-right: 1px solid var(--card-border);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+/* Right Panel */
+.right-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Empty State */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+.empty-icon {
+  color: var(--text-secondary);
+  opacity: 0.4;
+}
+.empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+.empty-hint {
+  font-size: 0.875rem;
+  margin: 0;
+  text-align: center;
+}
+.error-state {
+  opacity: 1;
+}
+.error-icon {
+  color: #f87171;
+  opacity: 1;
+}
+.error-state .empty-title {
+  color: #fca5a5;
+}
+
+/* Error Banner */
+.error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+  padding: 0.75rem 1.5rem;
+  color: #fca5a5;
+  font-size: 0.9rem;
+  animation: fadeInUp 0.2s ease;
+  flex-shrink: 0;
+}
+.error-close {
+  background: none;
+  border: none;
+  color: #fca5a5;
+  cursor: pointer;
+  font-size: 1rem;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.error-close:hover {
+  opacity: 1;
+}
+
+/* Input Card */
+.input-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--card-border);
+  border-radius: 20px;
+  overflow: hidden;
+  backdrop-filter: blur(12px);
+}
+
+
+/* Tabs */
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--card-border);
+}
+.tab-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+.tab-btn::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(135deg, #14b8a6, #0d9488);
+  transform: scaleX(0);
+  transition: transform 0.25s;
+}
+.tab-btn.active {
+  color: #14b8a6;
+}
+.tab-btn.active::after {
+  transform: scaleX(1);
+}
+.tab-btn:hover:not(.active) {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* Tab Content */
+.tab-content {
+  padding: 1.25rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.text-area {
+  width: 100%;
+  flex: 1;
+  min-height: 260px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  padding: 1rem;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+.text-area::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+.text-area:focus {
+  border-color: rgba(20, 184, 166, 0.5);
+  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
+}
+.text-area:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.char-count {
+  text-align: right;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-top: 0.5rem;
+  opacity: 0.6;
+}
+
+/* Upload Zone */
+.upload-zone {
+  border: 2px dashed rgba(20, 184, 166, 0.3);
+  border-radius: 16px;
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: all 0.25s;
+  text-align: center;
+}
+.upload-zone:hover,
+.upload-zone.drag-over {
+  border-color: #14b8a6;
+  background: rgba(20, 184, 166, 0.06);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(20, 184, 166, 0.1);
+}
+.upload-icon-wrap {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(20, 184, 166, 0.1);
+  border: 1px solid rgba(20, 184, 166, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #14b8a6;
+  transition: all 0.25s;
+}
+.upload-zone:hover .upload-icon-wrap,
+.upload-zone.drag-over .upload-icon-wrap {
+  background: rgba(20, 184, 166, 0.18);
+  transform: scale(1.08);
+}
+.upload-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+}
+.upload-hint {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Image Preview */
+.image-preview-wrap {
+  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.image-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--card-border);
+}
+.preview-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+.reupload-btn {
+  background: rgba(20, 184, 166, 0.1);
+  border: 1px solid rgba(20, 184, 166, 0.25);
+  color: #14b8a6;
+  border-radius: 8px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.reupload-btn:hover:not(:disabled) {
+  background: rgba(20, 184, 166, 0.2);
+}
+.reupload-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.preview-img {
+  width: 100%;
+  max-height: 360px;
+  object-fit: contain;
+  display: block;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* Analyze Button */
+.btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.analyze-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  background: linear-gradient(135deg, #14b8a6, #0d9488);
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.875rem 2.5rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.25s;
+  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.35);
+}
+.analyze-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.5);
+}
+.analyze-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+.reset-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  padding: 0.875rem 1.5rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.reset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+.btn-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Result Area */
+.result-area {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.result-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+.result-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #14b8a6;
+}
+.result-dot.pulse {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.result-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Dimension Cards */
+.dim-card {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--card-border);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: border-color 0.3s, box-shadow 0.3s;
+  animation: fadeInUp 0.4s ease both;
+}
+.dim-card.is-active {
+  border-color: rgba(20, 184, 166, 0.4);
+  box-shadow: 0 0 24px rgba(20, 184, 166, 0.08);
+}
+.dim-card.has-content {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.dim-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid var(--card-border);
+  border-left: 3px solid #14b8a6;
+  background: rgba(20, 184, 166, 0.04);
+}
+.dim-icon {
+  width: 18px;
+  height: 18px;
+  color: #14b8a6;
+  flex-shrink: 0;
+}
+.dim-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #14b8a6;
+}
+.dim-body {
+  padding: 1rem 1.25rem;
+  min-height: 48px;
+  position: relative;
+}
+.dim-content {
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  line-height: 1.8;
+}
+.dim-content :deep(strong) {
+  color: #14b8a6;
+  font-weight: 600;
+}
+
+/* Placeholder dots */
+.dim-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.5rem 0;
+}
+.placeholder-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(20, 184, 166, 0.4);
+  animation: bounce 1.2s ease-in-out infinite;
+}
+.placeholder-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.placeholder-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+/* Cursor blink */
+.cursor-blink {
+  display: inline-block;
+  color: #14b8a6;
+  font-weight: 300;
+  animation: blink 0.8s step-end infinite;
+  margin-left: 1px;
+}
+
+/* Animations */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.75);
+  }
+}
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-6px);
+  }
+}
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-layout {
+    flex-direction: column;
+    height: auto;
+    overflow: visible;
+  }
+  .left-panel {
+    width: 100%;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--card-border);
+    overflow-y: visible;
+  }
+  .right-panel {
+    padding: 1.25rem 1rem;
+  }
+  .upload-zone {
+    padding: 2rem 1rem;
+  }
+  .analyze-btn {
+    padding: 0.875rem 1.75rem;
+  }
+}
+</style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index cbfa97d..1c3ad62 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -34,7 +34,7 @@ const features = ref([
     desc: '深度解析长难句、阅读理解及语法考点，为您提供专属错题讲解。', 
     class: 'card-4', 
     icon: 'analytics',
-    route: null
+    route: '/exam-analysis'
   },
   { 
     id: 5,