160 lines
7.0 KiB
Markdown
160 lines
7.0 KiB
Markdown
---
|
||
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 实现）。移动端改为上下排列。
|
||
|
||
**错误提示**
|
||
红色半透明提示条，显示错误信息，可手动关闭。 |