cc
/
AI.Demo
2
1
Fork 0
Code Pull Requests Actions Releases Activity
AI.Demo/.codebuddy/plans/英语试题讲解视频生成页面开发_a19e6819.md

4.2 KiB
Raw Blame History

name overview design todos
英语试题讲解视频生成页面开发 开发一个英语试题讲解视频生成页面，包含试题文本输入、视频生成按钮、AI模型调用及视频预览区域，支持生成进度展示。
architecture styleKeywords fontSystem colorSystem
framework
react
Dark Glassmorphism
Teal Accent
Smooth Animations
Card-based Layout
fontFamily heading subheading body
Inter, PingFang SC, -apple-system, sans-serif
size weight
1.2rem 600
size weight
1rem 600
size weight
0.95rem 400
primary background text functional
#14b8a6
#0d9488
#0a0a0f
rgba(255,255,255,0.03)
#ffffff
rgba(255,255,255,0.7)
#14b8a6 (生成/播放)
#f87171 (错误)
#fbbf24 (进度)
id content status
create-video-explanation-page 创建 VideoExplanation.vue 页面组件，包含输入区、生成按钮、进度展示和视频预览区 completed
id content status dependencies
add-router-config 在 router/index.js 添加 /video-explanation 路由配置 completed
create-video-explanation-page
id content status dependencies
add-homepage-nav-entry 在 HomePage.vue 添加视频讲解功能入口卡片 completed
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 动画
  • 进度展示：动态进度条 + 百分比