141 lines
4.2 KiB
Markdown
141 lines
4.2 KiB
Markdown
---
|
||
name: 英语试题讲解视频生成页面开发
|
||
overview: 开发一个英语试题讲解视频生成页面，包含试题文本输入、视频生成按钮、AI模型调用及视频预览区域，支持生成进度展示。
|
||
design:
|
||
architecture:
|
||
framework: react
|
||
styleKeywords:
|
||
- Dark Glassmorphism
|
||
- Teal Accent
|
||
- Smooth Animations
|
||
- Card-based Layout
|
||
fontSystem:
|
||
fontFamily: Inter, PingFang SC, -apple-system, sans-serif
|
||
heading:
|
||
size: 1.2rem
|
||
weight: 600
|
||
subheading:
|
||
size: 1rem
|
||
weight: 600
|
||
body:
|
||
size: 0.95rem
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#14b8a6"
|
||
- "#0d9488"
|
||
background:
|
||
- "#0a0a0f"
|
||
- rgba(255,255,255,0.03)
|
||
text:
|
||
- "#ffffff"
|
||
- rgba(255,255,255,0.7)
|
||
functional:
|
||
- "#14b8a6 (生成/播放)"
|
||
- "#f87171 (错误)"
|
||
- "#fbbf24 (进度)"
|
||
todos:
|
||
- id: create-video-explanation-page
|
||
content: 创建 VideoExplanation.vue 页面组件，包含输入区、生成按钮、进度展示和视频预览区
|
||
status: completed
|
||
- id: add-router-config
|
||
content: 在 router/index.js 添加 /video-explanation 路由配置
|
||
status: completed
|
||
dependencies:
|
||
- create-video-explanation-page
|
||
- id: add-homepage-nav-entry
|
||
content: 在 HomePage.vue 添加视频讲解功能入口卡片
|
||
status: completed
|
||
dependencies:
|
||
- add-router-config
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
开发一个英语试题讲解视频生成页面，用户输入试题内容后，系统调用最优AI模型生成对应的讲解视频。
|
||
|
||
## 核心功能
|
||
|
||
1. **试题输入**：提供文本输入框，支持用户粘贴或输入英语试题内容
|
||
2. **视频生成**：调用AI模型生成讲解视频，提供生成进度展示
|
||
3. **视频预览**：在页面右侧展示生成的视频内容，支持播放控制
|
||
4. **状态管理**：处理空闲、生成中、已完成、错误等多种状态
|
||
|
||
## 界面布局
|
||
|
||
- 左侧面板：试题文本输入区 + 生成按钮
|
||
- 右侧面板：视频预览区域 + 生成进度
|
||
- 顶部导航栏：包含返回按钮和页面标题
|
||
|
||
## 技术栈
|
||
|
||
- **前端框架**：Vue 3 (Composition API + script setup)
|
||
- **路由管理**：Vue Router
|
||
- **HTTP请求**：Axios (支持流式响应)
|
||
- **构建工具**：Vite
|
||
|
||
## 实现方案
|
||
|
||
### 架构设计
|
||
|
||
- 页面组件：VideoExplanation.vue（单文件组件）
|
||
- 路由配置：在 router/index.js 中添加 `/video-explanation` 路由
|
||
- 导航入口：在 HomePage.vue 添加功能入口卡片
|
||
|
||
### 核心模块
|
||
|
||
1. **输入模块**：文本输入框，支持内容字数统计
|
||
2. **生成模块**：调用AI视频生成API，实时获取生成进度
|
||
3. **预览模块**：视频播放器组件，支持播放/暂停控制
|
||
4. **状态模块**：统一管理 idle/generating/done/error 状态
|
||
|
||
### API调用策略
|
||
|
||
- 使用 Axios 发起 POST 请求调用视频生成接口
|
||
- 支持流式响应解析，实时更新生成进度
|
||
- 进度信息通过 SSE 或增量文本返回
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
src/
|
||
├── views/
|
||
│ └── VideoExplanation.vue # [NEW] 视频讲解页面组件
|
||
├── router/
|
||
│ └── index.js # [MODIFY] 添加视频讲解路由
|
||
└── views/
|
||
└── HomePage.vue # [MODIFY] 添加导航入口卡片
|
||
```
|
||
|
||
## 设计风格
|
||
|
||
继承项目现有的深色半透明玻璃态设计语言，保持一致的视觉体验：
|
||
|
||
- 深色背景 (#0a0a0f) 配合半透明卡片
|
||
- Teal 主色调 (#14b8a6) 用于主要按钮和强调元素
|
||
- 圆角设计 (16-20px) 营造现代感
|
||
- 毛玻璃效果 (backdrop-filter: blur) 增强层次感
|
||
- 柔和阴影和渐变边框提升质感
|
||
|
||
## 布局设计
|
||
|
||
### 页面结构
|
||
|
||
- **顶部导航栏**：返回按钮 + 页面标题（渐变色）
|
||
- **主内容区**：左右分栏布局（420px左侧 + 自适应右侧）
|
||
- **左侧面板**：输入区域 + 操作按钮
|
||
- **右侧面板**：视频预览 + 进度展示
|
||
|
||
### 视频预览区
|
||
|
||
- 视频播放器居中展示
|
||
- 支持播放/暂停/进度条控制
|
||
- 生成中显示动画进度指示器
|
||
- 空闲状态显示引导提示
|
||
|
||
## 动效设计
|
||
|
||
- 按钮悬停：上浮 + 阴影增强
|
||
- 加载状态：旋转spinner + 脉冲动画
|
||
- 卡片入场：fadeInUp 动画
|
||
- 进度展示：动态进度条 + 百分比 |