7.0 KiB
7.0 KiB
| name | overview | design | todos | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ai-essay-correction | 新增 AI 作文原图批改页面（EssayCorrection.vue），用户上传英语作文图片，调用批改 API，将返回的批改结果图片渲染到页面上，并在首页卡片中接入路由。 |
|
|
用户需求
新增一个"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 请求：原生
fetchAPI，与现有项目保持一致（无额外依赖）
实现方案
核心流程
- 用户选择/拖拽图片 → FileReader 读取为 Base64 字符串 → 预览原图
- 点击"开始批改" → 构造请求体（Base64 放入
urls数组）→fetchPOST 请求 - 接收响应 → 解析返回的图片 URL →
<img>标签渲染批改结果 - 错误处理：网络异常、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等常见字段，并做防御性处理 - 加载状态：批改期间禁用上传和提交按钮，显示旋转动画，防止重复提交
架构设计
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 实现）。移动端改为上下排列。
错误提示 红色半透明提示条，显示错误信息，可手动关闭。