---
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 实现）。移动端改为上下排列。

**错误提示**
红色半透明提示条，显示错误信息，可手动关闭。