---
name: 试题讲解视频生成功能开发
overview: 在 QuestionExplanation.vue 页面添加视频生成功能，将已生成的图片和音频合成为完整视频，支持在线预览、下载，并显示详细的生成进度。
design:
  architecture:
    framework: vue
  styleKeywords:
    - Dark Theme
    - Glassmorphism
    - Minimalist
  fontSystem:
    fontFamily: PingFang SC
    heading:
      size: 1.25rem
      weight: 600
    subheading:
      size: 1rem
      weight: 500
    body:
      size: 0.875rem
      weight: 400
  colorSystem:
    primary:
      - "#8b5cf6"
      - "#3b82f6"
    background:
      - "#0f172a"
      - "#1e293b"
    text:
      - "#ffffff"
      - rgba(255,255,255,0.6)
    functional:
      - "#22c55e"
      - "#ef4444"
todos:
  - id: create-composer
    content: 创建 videoComposer.js 封装 ffmpeg.wasm 合成逻辑
    status: completed
  - id: add-video-config
    content: 在 config/index.js 添加视频相关配置
    status: completed
  - id: implement-compose-ui
    content: 在 QuestionExplanation.vue 添加合成按钮和进度显示
    status: completed
    dependencies:
      - create-composer
      - add-video-config
  - id: implement-preview-download
    content: 实现视频预览和下载功能
    status: completed
    dependencies:
      - implement-compose-ui
  - id: integrate-workflow
    content: 整合视频合成到现有生成流程
    status: completed
    dependencies:
      - implement-preview-download
---

## 产品概述

在现有试题讲解页面基础上，新增视频合成功能，将已生成的图片和音频合成为完整的教学讲解视频。

## 核心功能

- 将多个讲解点的图片和音频按顺序合成为单一视频文件
- 视频生成过程中显示详细进度（资源下载、片段合成、视频编码等步骤）
- 支持在线预览生成的视频
- 支持下载视频到本地

## 技术栈

- 视频合成：ffmpeg.wasm（已安装 @ffmpeg/ffmpeg@0.12.15）
- 现有框架：Vue 3 + Vite
- HTTP 请求：axios（已有）

## 技术架构

### 实现方案

使用 ffmpeg.wasm 在浏览器端完成视频合成，无需后端服务：

```mermaid
flowchart LR
    A[slides数据] --> B[下载图片/音频]
    B --> C[写入FFmpeg虚拟文件系统]
    C --> D[生成视频片段]
    D --> E[合并所有片段]
    E --> F[输出MP4视频]
    F --> G[预览/下载]
```

### 核心流程

1. **资源准备阶段**：遍历 slides 数组，fetch 所有图片和音频到内存
2. **文件系统写入**：将资源写入 ffmpeg.wasm 的虚拟文件系统
3. **片段生成**：每个 slide 生成一个视频片段（图片+音频）
4. **视频合并**：使用 concat demuxer 将所有片段合并为完整视频
5. **输出展示**：生成 Blob URL 用于预览和下载

### 性能考量

- 音频时长检测：需要预先获取每个音频时长，用于视频片段时长控制
- 内存管理：大文件处理时注意释放内存
- 进度反馈：通过 ffmpeg 日志解析当前进度

## 目录结构

```
src/
├── views/
│   └── QuestionExplanation.vue  # [MODIFY] 添加视频合成功能
├── utils/
│   └── videoComposer.js         # [NEW] ffmpeg.wasm 封装模块
└── config/
    └── index.js                 # [MODIFY] 添加视频相关配置
```

## 实现要点

### videoComposer.js 核心接口

- `initFFmpeg()`: 初始化并加载 ffmpeg.wasm
- `composeVideo(slides, onProgress)`: 主合成函数，返回视频 Blob
- `downloadVideo(blob, filename)`: 触发下载
- `getAudioDuration(audioUrl)`: 获取音频时长

### 状态管理

新增状态：

- `videoStatus`: idle | preparing | composing | ready | error
- `videoProgress`: { stage: string, current: number, total: number, message: string }
- `videoBlobUrl`: 合成完成的视频 URL

## 设计说明

在现有播放器界面基础上，新增视频合成功能区，位于播放控制区域下方。采用深色主题风格与现有界面保持一致。

## 新增区块

1. **视频合成按钮区**：在播放控制区底部添加"生成视频"按钮
2. **进度显示区**：合成过程中显示分步骤进度条和当前状态描述
3. **视频预览区**：合成完成后显示视频播放器和下载按钮