---
name: 试题讲解生成页面开发
overview: 开发一个试题讲解生成页面，用户输入试题后，系统调用AI文本模型分析试题复杂度并拆分为多个讲解点，然后为每个讲解点调用豆包图片生成模型创建讲解图片，最后调用阿里云语音合成模型为每张图片生成讲解音频，实现幻灯片式自动播放。
design:
  architecture:
    framework: vue
  styleKeywords:
    - Glassmorphism
    - Dark Theme
    - Modern
    - Smooth Animations
  fontSystem:
    fontFamily: PingFang SC
    heading:
      size: 32px
      weight: 600
    subheading:
      size: 18px
      weight: 500
    body:
      size: 16px
      weight: 400
  colorSystem:
    primary:
      - "#8b5cf6"
      - "#6366f1"
    background:
      - "#0f172a"
      - "#1e293b"
    text:
      - "#f8fafc"
      - "#94a3b8"
    functional:
      - "#10b981"
      - "#ef4444"
      - "#f59e0b"
todos:
  - id: add-api-config
    content: 在config/index.js中添加试题讲解API配置（文本分析、图片生成、音频合成）
    status: completed
  - id: create-page-component
    content: 创建QuestionExplanation.vue页面组件，实现试题输入和状态管理
    status: completed
    dependencies:
      - add-api-config
  - id: implement-analysis-logic
    content: 实现试题分析逻辑，调用文本模型拆分讲解点并生成内容
    status: completed
    dependencies:
      - create-page-component
  - id: implement-resource-generation
    content: 实现图片生成和音频合成的批量生成逻辑
    status: completed
    dependencies:
      - implement-analysis-logic
  - id: implement-slideshow-player
    content: 实现幻灯片播放器和音频同步播放逻辑
    status: completed
    dependencies:
      - implement-resource-generation
  - id: add-route-and-card
    content: 在router添加路由配置并在HomePage添加功能卡片
    status: completed
    dependencies:
      - create-page-component
---

## 产品概述

开发一个智能试题讲解生成页面，实现根据试题内容自动生成图文并茂的幻灯片式讲解。

## 核心功能

- 试题输入：提供文本框供用户输入试题内容
- 智能分析：调用AI文本模型分析试题复杂度，动态决定讲解点数量（3-8个）
- 内容生成：为每个讲解点生成详细讲解文本和对应的图片生成提示词
- 图片生成：调用豆包AI图片生成模型，批量生成讲解图片（支持组图生成）
- 音频合成：调用阿里云语音合成模型，为每个讲解文本生成配套音频
- 幻灯片播放：实现自动播放逻辑，图片与音频同步，音频播完自动切换下一张
- 播放控制：支持播放/暂停、上一张/下一张、进度指示器等交互控制

## 技术栈

- 前端框架：Vue 3 + Composition API
- 路由管理：Vue Router
- HTTP客户端：Axios
- 样式方案：Scoped CSS + Glassmorphism UI风格（与现有项目保持一致）
- API调用：前端直接调用（演示模式）

## 技术架构

### 系统流程

```mermaid
graph TD
    A[用户输入试题] --> B[调用文本模型分析]
    B --> C{分析试题复杂度}
    C -->|简单| D[生成3个讲解点]
    C -->|中等| E[生成5个讲解点]
    C -->|复杂| F[生成7-8个讲解点]
    D --> G[为每个讲解点生成详细文本和图片提示词]
    E --> G
    F --> G
    G --> H[批量生成图片]
    G --> I[批量合成音频]
    H --> J[加载图片资源]
    I --> K[加载音频资源]
    J --> L[幻灯片播放]
    K --> L
    L --> M{音频播放完成?}
    M -->|是| N[切换下一张]
    N --> L
    M -->|否| L
```

### 模块划分

1. **输入模块**：试题文本输入框、提交按钮、清空按钮
2. **处理模块**：试题分析、讲解文本生成、图片prompt生成
3. **资源生成模块**：图片生成API调用、音频合成API调用
4. **播放模块**：幻灯片展示、音频播放、自动切换逻辑
5. **控制模块**：播放/暂停、上下切换、进度指示

### API集成

**文本分析模型**：doubao-seed-2-0-lite-260215

- 用途：分析试题复杂度、拆分讲解点、生成讲解文本和图片提示词
- API：https://ark.cn-beijing.volces.com/api/v3/chat/completions
- 认证：使用 DOUBAO_KEY

**图片生成模型**：doubao-seedream-5-0-260128

- 用途：批量生成讲解图片（支持组图生成）
- API：https://ark.cn-beijing.volces.com/api/v3/images/generations
- 认证：使用 DOUBAO_KEY
- 特性：sequential_image_generation="auto"，max_images=8

**语音合成模型**：qwen3-tts-flash

- 用途：为讲解文本生成音频
- API：https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation
- 认证：使用 BAILIAN_API_KEY
- 音色：Cherry（芊悦，阳光积极的小姐姐音色）

## 实现要点

### 性能优化

- 图片生成采用组图模式，一次API调用生成所有图片，减少网络请求
- 音频合成采用并发请求，提升生成速度
- 资源预加载：在播放第一张时预加载后续图片和音频
- 使用URL.createObjectURL管理音频资源，避免内存泄漏

### 错误处理

- API调用失败重试机制（最多重试2次）
- 部分资源生成失败时，显示占位图/文本提示，不影响其他讲解点播放
- 超时处理：图片生成60秒超时，音频生成30秒超时

### 播放逻辑

- 使用HTML5 Audio API监听'ended'事件触发自动切换
- 当前音频播放完毕后立即切换到下一张图片并播放对应音频
- 播放完成后显示结束状态，提供重新播放按钮

### 状态管理

```
- idle: 初始状态
- analyzing: 正在分析试题
- generating: 正在生成图片和音频
- ready: 资源准备完成，等待播放
- playing: 正在播放
- paused: 暂停
- completed: 播放完成
- error: 错误状态
```

## 目录结构

### 新增文件

```
src/
├── views/
│   └── QuestionExplanation.vue     # [NEW] 试题讲解页面主组件
├── config/
│   └── index.js                    # [MODIFY] 添加新API配置
├── router/
│   └── index.js                    # [MODIFY] 添加路由配置
└── views/
    └── HomePage.vue                # [MODIFY] 添加功能卡片
```

### 详细文件说明

**QuestionExplanation.vue** - 试题讲解页面主组件

- 实现试题输入界面
- 调用文本模型分析试题并生成讲解内容
- 调用图片生成API批量生成讲解图片
- 调用语音合成API生成配套音频
- 实现幻灯片式自动播放逻辑
- 提供播放控制（播放/暂停、上下切换、进度指示）
- 采用glassmorphism UI风格，深色主题

**config/index.js** - 添加API配置

- 试题讲解文本分析API配置
- 图片生成API配置（已有部分配置，可能需要补充）
- 语音合成API配置（已有部分配置，可能需要补充）

**router/index.js** - 添加路由

- 路径：/question-explanation
- 组件：QuestionExplanation

**HomePage.vue** - 添加功能卡片

- 标题：AI试题讲解生成
- 描述：智能分析试题，自动生成图文讲解，幻灯片式播放，让解题过程清晰易懂
- 图标：presentation/slides相关图标
- 路由：/question-explanation

## 设计风格

采用现代深色主题 + Glassmorphism（玻璃态）设计风格，与现有项目保持视觉一致性。

## 页面布局

采用垂直布局，分为三个主要区域：

1. **顶部输入区**：标题 + 试题输入框 + 操作按钮
2. **中间展示区**：幻灯片播放区域（图片 + 讲解文本）
3. **底部控制区**：播放控制按钮 + 进度指示器

## 视觉特点

- 深色背景（#0f172a）配合玻璃态卡片
- 渐变色彩点缀（紫色/蓝色渐变）
- 流畅的过渡动画
- 响应式设计，适配不同屏幕尺寸

## 交互设计

- 加载状态：骨架屏 + 进度提示
- 播放状态：当前幻灯片高亮，进度条动态更新
- 控制按钮：hover效果 + 点击反馈
- 平滑过渡：图片切换使用淡入淡出动画