From 1ac019b88dfea0584abcd551230d57853ffa62e8 Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Thu, 19 Mar 2026 19:46:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(essay-correction):=20=E6=96=B0=E5=A2=9E=20?=
 =?UTF-8?q?AI=20=E4=BD=9C=E6=96=87=E5=8E=9F=E5=9B=BE=E6=89=B9=E6=94=B9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/ai-essay-correction_fbf012fb.md     | 160 +++++
 package-lock.json                             | 280 ++++++++
 package.json                                  |   1 +
 src/router/index.js                           |   6 +
 src/views/EssayCorrection.vue                 | 638 ++++++++++++++++++
 src/views/HomePage.vue                        |   2 +-
 6 files changed, 1086 insertions(+), 1 deletion(-)
 create mode 100644 .codebuddy/plans/ai-essay-correction_fbf012fb.md
 create mode 100644 src/views/EssayCorrection.vue

diff --git a/.codebuddy/plans/ai-essay-correction_fbf012fb.md b/.codebuddy/plans/ai-essay-correction_fbf012fb.md
new file mode 100644
index 0000000..fe5100f
--- /dev/null
+++ b/.codebuddy/plans/ai-essay-correction_fbf012fb.md
@@ -0,0 +1,160 @@
+---
+name: ai-essay-correction
+overview: 新增 AI 作文原图批改页面（EssayCorrection.vue），用户上传英语作文图片，调用批改 API，将返回的批改结果图片渲染到页面上，并在首页卡片中接入路由。
+design:
+  architecture:
+    framework: vue
+  styleKeywords:
+    - Glassmorphism
+    - 深色背景
+    - 粉色渐变主题
+    - 卡片式布局
+    - 微动画
+    - 对比展示
+  fontSystem:
+    fontFamily: PingFang SC
+    heading:
+      size: 1.5rem
+      weight: 600
+    subheading:
+      size: 1rem
+      weight: 500
+    body:
+      size: 0.95rem
+      weight: 400
+  colorSystem:
+    primary:
+      - "#ec4899"
+      - "#db2777"
+    background:
+      - rgba(255,255,255,0.03)
+      - rgba(255,255,255,0.06)
+    text:
+      - "#f8fafc"
+      - "#94a3b8"
+    functional:
+      - "#ef4444"
+      - "#22c55e"
+      - rgba(236,72,153,0.3)
+todos:
+  - id: create-essay-correction-page
+    content: 新建 src/views/EssayCorrection.vue，实现图片上传、Base64转换、API调用、结果对比展示及状态管理
+    status: completed
+  - id: wire-router-and-homepage
+    content: 修改 src/router/index.js 新增路由，并更新 HomePage.vue 中 card-3 的 route 为 '/essay-correction'
+    status: completed
+    dependencies:
+      - create-essay-correction-page
+---
+
+## 用户需求
+
+新增一个"AI作文原图批改"功能页面，用户上传英语作文图片后，系统调用指定 API 对图片进行智能批改，并将批改后的结果图片展示在页面上。
+
+## 产品概述
+
+在现有 AI 英语学习辅助平台中，新增作文批改页面（路由 `/essay-correction`），与首页卡片联动。用户上传手写英语作文图片，系统将图片转为 Base64 后调用批改 API，等待返回批改后的图片 URL，最终在页面上对比展示原图与批改结果图。
+
+## 核心功能
+
+- **图片上传**：支持点击选择或拖拽上传图片文件（JPG/PNG），上传后预览原图
+- **API 调用**：将图片转为 Base64，携带固定提示词调用 `POST https://grsai.dakka.com.cn/v1/draw/nano-banana` 接口
+- **批改结果展示**：接口返回后，将批改结果图片渲染到页面，支持与原图对比查看
+- **状态反馈**：上传中、批改中、批改完成、批改失败等状态的加载动画与提示
+- **重新批改**：支持清空结果、重新上传图片进行新一轮批改
+- **返回首页**：顶部导航栏提供返回按钮，风格与 Speaking.vue 保持一致
+
+## 技术栈
+
+- **框架**：Vue 3 (Composition API `<script setup>`) + Vite，与现有项目完全一致
+- **路由**：Vue Router，新增 `/essay-correction` 路由
+- **样式**：Scoped CSS，复用现有 CSS 变量（`--card-bg`、`--card-border`、`--accent-1`、`--text-primary`、`--text-secondary`）和深色玻璃拟态风格
+- **HTTP 请求**：原生 `fetch` API，与现有项目保持一致（无额外依赖）
+
+## 实现方案
+
+### 核心流程
+
+1. 用户选择/拖拽图片 → FileReader 读取为 Base64 字符串 → 预览原图
+2. 点击"开始批改" → 构造请求体（Base64 放入 `urls` 数组）→ `fetch` POST 请求
+3. 接收响应 → 解析返回的图片 URL → `<img>` 标签渲染批改结果
+4. 错误处理：网络异常、API 错误码、图片加载失败均给出友好提示
+
+### API 请求参数设计
+
+```
+prompt: "请对这篇英语作文进行批改，标注语法错误、拼写错误和表达不当之处，并给出修改建议"
+model: "nano-banana-pro"
+aspectRatio: "auto"
+imageSize: "1K"
+shutProgress: true
+webHook: ""
+```
+
+### 关键技术决策
+
+- **Base64 转换**：使用 `FileReader.readAsDataURL()` 读取图片，截取 `base64,` 后的纯 Base64 字符串传入 `urls` 数组
+- **图片大小限制**：前端限制上传图片不超过 10MB，避免 Base64 字符串过大导致请求失败
+- **响应结构处理**：API 返回结构待运行时确认，优先尝试 `response.data`、`response.url`、`response.imageUrl` 等常见字段，并做防御性处理
+- **加载状态**：批改期间禁用上传和提交按钮，显示旋转动画，防止重复提交
+
+## 架构设计
+
+```mermaid
+graph TD
+    A[HomePage.vue card-3] -->|router.push| B[/essay-correction]
+    B --> C[EssayCorrection.vue]
+    C --> D[图片上传区域]
+    C --> E[批改控制区]
+    C --> F[结果展示区]
+    D -->|FileReader| G[Base64转换]
+    G --> E
+    E -->|fetch POST| H[nano-banana API]
+    H -->|返回图片URL| F
+```
+
+## 目录结构
+
+```
+src/
+├── views/
+│   └── EssayCorrection.vue   # [NEW] AI作文批改页面主组件
+│                               # 包含：图片上传（拖拽/点击）、原图预览、
+│                               # API调用逻辑、批改结果图片展示、
+│                               # 状态管理（idle/uploading/processing/done/error）、
+│                               # 返回导航栏，风格与Speaking.vue保持一致
+└── router/
+    └── index.js              # [MODIFY] 新增 /essay-correction 路由，
+                              # import EssayCorrection 并添加到 routes 数组
+
+src/views/HomePage.vue        # [MODIFY] 将 features 数组中 id:3 的 card-3
+                              # route 字段从 null 改为 '/essay-correction'
+```
+
+## 实现注意事项
+
+- **CSS 变量复用**：Speaking.vue 中使用了 `var(--card-bg)`、`var(--accent-1)` 等全局 CSS 变量，EssayCorrection.vue 同样直接使用，无需重复定义
+- **图片展示布局**：批改完成后采用左右对比布局（原图 / 批改结果），移动端降级为上下堆叠
+- **文件类型校验**：accept 限制为 `image/jpeg,image/png,image/jpg`，并在 JS 层二次校验 MIME 类型
+- **Authorization 配置**：API Key 以常量形式定义在组件顶部，与现有项目中 API Key 的管理方式保持一致
+
+## 设计风格
+
+延续现有项目的深色玻璃拟态（Glassmorphism）风格，与 Speaking.vue 保持视觉一致性。
+
+### 页面布局（从上到下）
+
+**顶部导航栏**
+左侧返回按钮（箭头图标 + "返回"文字），中间标题"AI 作文原图批改"，风格与 Speaking.vue 的 `.nav-bar` 完全一致。
+
+**上传区域**
+居中大卡片，虚线边框（`rgba(236,72,153,0.3)`，对应 card-3 的粉色主题），内含上传图标、"点击或拖拽上传作文图片"提示文字、支持格式说明。拖拽悬停时边框高亮为粉色渐变，背景微亮。上传后区域缩小为原图预览缩略图，右上角显示"重新上传"按钮。
+
+**操作区**
+"开始批改"主按钮，使用 card-3 的粉色渐变（`#ec4899 → #db2777`），宽度自适应，批改中显示旋转加载动画 + "批改中..."文字，禁用状态半透明。
+
+**结果展示区**
+批改完成后以左右对比卡片展示：左侧"原图"、右侧"批改结果"，每张图片下方有标签说明。图片以 `object-fit: contain` 填充，支持点击放大查看（简单 overlay 实现）。移动端改为上下排列。
+
+**错误提示**
+红色半透明提示条，显示错误信息，可手动关闭。
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 137b9a4..d91c767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ai-demo",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.13.6",
         "vue": "^3.5.30",
         "vue-router": "^5.0.3"
       },
@@ -682,6 +683,23 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.13.6.tgz",
+      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
@@ -691,6 +709,19 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
@@ -706,6 +737,18 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
@@ -718,6 +761,15 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -728,6 +780,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
@@ -740,6 +806,51 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -769,6 +880,42 @@
         }
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -784,6 +931,103 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
@@ -1116,6 +1360,36 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mlly": {
       "version": "1.8.1",
       "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.1.tgz",
@@ -1238,6 +1512,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
diff --git a/package.json b/package.json
index 31becc4..21e41ca 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.13.6",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },
diff --git a/src/router/index.js b/src/router/index.js
index eb13225..324b3bf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/HomePage.vue'
 import Pronunciation from '../views/Pronunciation.vue'
 import Speaking from '../views/Speaking.vue'
+import EssayCorrection from '../views/EssayCorrection.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,6 +21,11 @@ const router = createRouter({
       path: '/speaking',
       name: 'speaking',
       component: Speaking
+    },
+    {
+      path: '/essay-correction',
+      name: 'essay-correction',
+      component: EssayCorrection
     }
   ]
 })
diff --git a/src/views/EssayCorrection.vue b/src/views/EssayCorrection.vue
new file mode 100644
index 0000000..9e30533
--- /dev/null
+++ b/src/views/EssayCorrection.vue
@@ -0,0 +1,638 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import axios from "axios";
+
+const API_KEY = "sk-6ba4b57a0b034d9388f7a7a2d477d637";
+const API_URL = "https://grsai.dakka.com.cn/v1/draw/nano-banana";
+const PROMPT =
+  "请对这篇英语作文进行批改，标注语法错误、拼写错误和表达不当之处，并给出修改建议，使用中文批注";
+
+const router = useRouter();
+
+// state: idle | processing | done | error
+const status = ref("idle");
+const originalImage = ref(null); // data URL for preview
+const originalBase64 = ref(""); // pure base64 string
+const resultImage = ref(""); // corrected image URL
+const errorMsg = ref("");
+const isDragOver = ref(false);
+const fileInputRef = ref(null);
+const lightboxSrc = ref("");
+const lightboxVisible = ref(false);
+
+const goBack = () => router.back();
+
+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"];
+  if (!allowed.includes(file.type)) {
+    errorMsg.value = "仅支持 JPG / PNG 格式的图片";
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    errorMsg.value = "图片大小不能超过 10MB";
+    return;
+  }
+  errorMsg.value = "";
+  resultImage.value = "";
+  status.value = "idle";
+  const { dataUrl, base64 } = await readFileAsBase64(file);
+  originalImage.value = dataUrl;
+  originalBase64.value = base64;
+};
+
+const onFileChange = (e) => handleFile(e.target.files[0]);
+
+const onDrop = (e) => {
+  isDragOver.value = false;
+  handleFile(e.dataTransfer.files[0]);
+};
+
+const resetUpload = () => {
+  originalImage.value = null;
+  originalBase64.value = "";
+  resultImage.value = "";
+  errorMsg.value = "";
+  status.value = "idle";
+  if (fileInputRef.value) fileInputRef.value.value = "";
+};
+
+const startCorrection = async () => {
+  if (!originalBase64.value || status.value === "processing") return;
+  status.value = "processing";
+  errorMsg.value = "";
+  resultImage.value = "";
+
+  const res = await axios
+    .post(
+      API_URL,
+      {
+        model: "nano-banana-pro",
+        prompt: PROMPT,
+        aspectRatio: "auto",
+        imageSize: "1K",
+        urls: [originalBase64.value],
+        webHook: "",
+        shutProgress: true,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${API_KEY}`,
+        },
+      }
+    )
+    .catch((err) => {
+      console.error(err);
+      errorMsg.value =
+        err?.response?.data?.message || err.message || "请求失败，请稍后重试";
+      status.value = "error";
+      return null;
+    });
+
+  if (!res) return;
+
+  // 接口返回 SSE 格式文本，形如 "data: {...}\n\n"，需去掉 "data: " 前缀再解析
+  let data;
+  try {
+    const raw = typeof res.data === "string" ? res.data : JSON.stringify(res.data);
+    const jsonStr = raw.replace(/^data:\s*/m, "").trim();
+    data = JSON.parse(jsonStr);
+  } catch {
+    data = res.data;
+  }
+
+  // 根据实际返回格式解析：{ results: [{ url, content }], progress, status }
+  if (data?.status && data.status !== "succeeded") {
+    errorMsg.value = `批改失败：${
+      data.failure_reason || data.error || data.status
+    }`;
+    status.value = "error";
+    return;
+  }
+
+  const imgUrl =
+    (Array.isArray(data?.results) && data.results[0]?.url) || data?.url || null;
+
+  if (imgUrl) {
+    resultImage.value = imgUrl;
+    status.value = "done";
+  } else {
+    console.error("未能解析到图片地址", data);
+    errorMsg.value = "批改完成，但未能获取结果图片，请检查 API 返回格式";
+    status.value = "error";
+  }
+};
+
+const openLightbox = (src) => {
+  lightboxSrc.value = src;
+  lightboxVisible.value = true;
+};
+const closeLightbox = () => {
+  lightboxVisible.value = false;
+};
+</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>
+
+    <div class="content">
+      <!-- Error Banner -->
+      <div v-if="errorMsg" class="error-banner">
+        <span>{{ errorMsg }}</span>
+        <button class="error-close" @click="errorMsg = ''">✕</button>
+      </div>
+
+      <!-- Upload Zone -->
+      <div
+        v-if="!originalImage"
+        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"
+          style="display: none"
+          @change="onFileChange"
+        />
+        <div class="upload-icon">
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            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>
+        </div>
+        <p class="upload-title">点击或拖拽上传作文图片</p>
+        <p class="upload-hint">支持 JPG、PNG 格式，最大 10MB</p>
+      </div>
+
+      <!-- Preview + Action -->
+      <div v-else class="preview-section">
+        <div class="preview-card">
+          <div class="preview-header">
+            <span class="preview-label">原始图片</span>
+            <button
+              class="reupload-btn"
+              @click="resetUpload"
+              :disabled="status === 'processing'"
+            >
+              重新上传
+            </button>
+          </div>
+          <img
+            :src="originalImage"
+            class="preview-img"
+            @click="openLightbox(originalImage)"
+          />
+        </div>
+
+        <button
+          class="correct-btn"
+          :disabled="status === 'processing'"
+          @click="startCorrection"
+        >
+          <span v-if="status === 'processing'" 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"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+          </svg>
+          <span>{{ status === "processing" ? "批改中..." : "开始批改" }}</span>
+        </button>
+      </div>
+
+      <!-- Result -->
+      <div v-if="status === 'done' && resultImage" class="result-section">
+        <div class="compare-grid">
+          <div class="compare-card">
+            <div class="compare-label">原图</div>
+            <img
+              :src="originalImage"
+              class="compare-img"
+              @click="openLightbox(originalImage)"
+            />
+          </div>
+          <div class="compare-card result-card">
+            <div class="compare-label result-label">批改结果</div>
+            <img
+              :src="resultImage"
+              class="compare-img"
+              @click="openLightbox(resultImage)"
+            />
+          </div>
+        </div>
+        <p class="click-hint">点击图片可放大查看</p>
+      </div>
+    </div>
+
+    <!-- Lightbox -->
+    <div v-if="lightboxVisible" class="lightbox" @click="closeLightbox">
+      <img :src="lightboxSrc" class="lightbox-img" @click.stop />
+      <button class="lightbox-close" @click="closeLightbox">✕</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  min-height: 100vh;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  font-family: "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;
+  color: var(--text-primary);
+  margin: 0;
+  background: linear-gradient(135deg, #ec4899, #db2777);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Content */
+.content {
+  flex: 1;
+  max-width: 860px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Error */
+.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-radius: 12px;
+  padding: 0.875rem 1.25rem;
+  color: #fca5a5;
+  font-size: 0.95rem;
+  animation: fadeIn 0.2s ease;
+}
+.error-close {
+  background: none;
+  border: none;
+  color: #fca5a5;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0 0.25rem;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.error-close:hover {
+  opacity: 1;
+}
+
+/* Upload Zone */
+.upload-zone {
+  border: 2px dashed rgba(236, 72, 153, 0.3);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.02);
+  padding: 4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  transition: all 0.25s;
+  text-align: center;
+}
+.upload-zone:hover,
+.upload-zone.drag-over {
+  border-color: #ec4899;
+  background: rgba(236, 72, 153, 0.06);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.12);
+}
+.upload-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: rgba(236, 72, 153, 0.1);
+  border: 1px solid rgba(236, 72, 153, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ec4899;
+  transition: all 0.25s;
+}
+.upload-zone:hover .upload-icon,
+.upload-zone.drag-over .upload-icon {
+  background: rgba(236, 72, 153, 0.18);
+  transform: scale(1.08);
+}
+.upload-title {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+}
+.upload-hint {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Preview */
+.preview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  align-items: center;
+}
+.preview-card {
+  width: 100%;
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: 16px;
+  overflow: hidden;
+}
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid var(--card-border);
+}
+.preview-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.reupload-btn {
+  background: rgba(236, 72, 153, 0.1);
+  border: 1px solid rgba(236, 72, 153, 0.25);
+  color: #ec4899;
+  border-radius: 8px;
+  padding: 0.35rem 0.875rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.reupload-btn:hover:not(:disabled) {
+  background: rgba(236, 72, 153, 0.2);
+}
+.reupload-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.preview-img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  display: block;
+  cursor: zoom-in;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* Correct Button */
+.correct-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  background: linear-gradient(135deg, #ec4899, #db2777);
+  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(236, 72, 153, 0.35);
+}
+.correct-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.5);
+}
+.correct-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+.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;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Result */
+.result-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  animation: fadeIn 0.4s ease;
+}
+.compare-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+}
+.compare-card {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.compare-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+.result-card {
+  border-color: rgba(236, 72, 153, 0.3);
+  box-shadow: 0 0 20px rgba(236, 72, 153, 0.08);
+}
+.compare-label {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--card-border);
+  text-align: center;
+}
+.result-label {
+  color: #ec4899;
+}
+.compare-img {
+  width: 100%;
+  object-fit: contain;
+  display: block;
+  cursor: zoom-in;
+  background: rgba(0, 0, 0, 0.2);
+  max-height: 500px;
+}
+.click-hint {
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin: 0;
+  opacity: 0.6;
+}
+
+/* Lightbox */
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: fadeIn 0.2s ease;
+  cursor: zoom-out;
+}
+.lightbox-img {
+  max-width: 92vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  cursor: default;
+}
+.lightbox-close {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+.lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 600px) {
+  .compare-grid {
+    grid-template-columns: 1fr;
+  }
+  .content {
+    padding: 1.25rem 1rem;
+  }
+  .upload-zone {
+    padding: 3rem 1.5rem;
+  }
+}
+</style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 20e5fe0..cbfa97d 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -26,7 +26,7 @@ const features = ref([
     desc: '一键上传手写作文图片，AI智能OCR识别并提供词汇、语法深度批改。', 
     class: 'card-3', 
     icon: 'edit',
-    route: null
+    route: '/essay-correction'
   },
   { 
     id: 4,