feat(essay-correction): 新增 AI 作文原图批改页面
This commit is contained in:
cc
parent
15d22bb7d1
commit
1ac019b88d
|
|
@ -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 实现）。移动端改为上下排列。
|
||||
|
||||
**错误提示**
|
||||
红色半透明提示条，显示错误信息，可手动关闭。
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.6",
|
||||
"vue": "^3.5.30",
|
||||
"vue-router": "^5.0.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -26,7 +26,7 @@ const features = ref([
|
|||
desc: '一键上传手写作文图片，AI智能OCR识别并提供词汇、语法深度批改。',
|
||||
class: 'card-3',
|
||||
icon: 'edit',
|
||||
route: null
|
||||
route: '/essay-correction'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
|
|
|
|||
Loading…
Reference in New Issue