---
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 动画
- 进度展示：动态进度条 + 百分比