173 lines
5.6 KiB
Markdown
173 lines
5.6 KiB
Markdown
# 视频生成功能模块
|
||
|
||
## 功能概述
|
||
|
||
视频生成功能模块是一个基于AI的视频创作工具，允许用户通过选择不同类型的素材来生成个性化视频内容。该模块采用现代化的UI/UX设计，提供直观的操作流程和优雅的用户体验。
|
||
|
||
## 主要功能
|
||
|
||
### 1. 素材中心 (Material Center)
|
||
- **多类型素材管理**：支持6种素材类型
|
||
- 模特 (👤)：模特照片和视频素材
|
||
- 产品 (📦)：产品展示素材
|
||
- 场景 (🏞️)：背景场景素材
|
||
- 动作 (🎭)：动作和姿态素材
|
||
- 音乐 (🎵)：背景音乐和音效
|
||
- 提示词模板 (📝)：AI生成提示词模板
|
||
|
||
- **智能搜索与筛选**
|
||
- 实时搜索：支持按名称、描述、标签搜索
|
||
- 分类筛选：快速筛选特定类型素材
|
||
- 多视图模式：网格视图和列表视图切换
|
||
|
||
- **素材管理功能**
|
||
- 添加新素材：支持文件上传和信息编辑
|
||
- 预览功能：快速预览素材内容
|
||
- 编辑和删除：完整的CRUD操作
|
||
|
||
### 2. 视频生成工作台 (Video Generation)
|
||
- **专业布局设计**
|
||
- **左侧素材区**：Tab切换（模特/产品/场景/动作/音乐/提示词模板）
|
||
- **中央预览区**：实时视频预览、播放控制、素材概览
|
||
- **底部参数区**：紧凑型配置面板，一行显示所有关键参数
|
||
- **右侧任务区**：可折叠的任务状态面板，实时显示生成进度
|
||
|
||
- **高级配置选项**
|
||
- 输出格式：MP4、MOV、AVI
|
||
- 分辨率：720p、1080p、4K
|
||
- 帧率：24fps、30fps、60fps
|
||
- 质量设置：低、中、高三档
|
||
- 音频控制：启用/禁用音频
|
||
- 特效选项：淡入淡出、缩放、转场等
|
||
- 高级选项：可展开的详细配置
|
||
|
||
- **实时预览与任务管理**
|
||
- 专业视频预览窗口（播放控制、进度条、全屏支持）
|
||
- 选中素材实时显示
|
||
- 生成统计信息
|
||
- 任务队列管理（进度显示、取消、重试、删除）
|
||
- 离线任务状态监控
|
||
|
||
## 技术特性
|
||
|
||
### UI/UX 设计
|
||
- **遵循设计系统**：基于 `promptx/frontend-developer` 标准
|
||
- **响应式设计**：支持桌面端和移动端
|
||
- **优雅动画**：流畅的过渡效果和交互反馈
|
||
- **无障碍支持**：键盘导航和屏幕阅读器友好
|
||
|
||
### 性能优化
|
||
- **懒加载**：素材缩略图按需加载
|
||
- **虚拟滚动**：大量素材列表性能优化
|
||
- **内存管理**：高效的组件渲染和状态管理
|
||
- **缓存策略**：智能缓存减少重复请求
|
||
|
||
### 代码架构
|
||
- **TypeScript**：完整的类型定义和接口
|
||
- **组件化设计**：可复用的UI组件
|
||
- **状态管理**：React Hooks 和 Context
|
||
- **错误处理**：完善的错误边界和用户反馈
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
apps/desktop/src/
|
||
├── pages/
|
||
│ ├── MaterialCenter.tsx # 素材中心主页面
|
||
│ └── VideoGeneration.tsx # 视频生成工作台（重新设计）
|
||
├── components/video-generation/
|
||
│ ├── MaterialAssetCard.tsx # 素材卡片组件
|
||
│ ├── MaterialCategoryFilter.tsx # 分类过滤器
|
||
│ ├── MaterialSelector.tsx # 素材选择器
|
||
│ ├── VideoConfigPanel.tsx # 完整视频配置面板
|
||
│ ├── CompactVideoConfigPanel.tsx # 紧凑型配置面板（新增）
|
||
│ ├── VideoPreview.tsx # 原视频预览组件
|
||
│ ├── CentralVideoPreview.tsx # 中央预览组件（新增）
|
||
│ ├── TaskStatusPanel.tsx # 任务状态面板（新增）
|
||
│ └── CreateMaterialAssetModal.tsx # 创建素材模态框
|
||
└── types/
|
||
└── videoGeneration.ts # 扩展的类型定义
|
||
```
|
||
|
||
## 使用指南
|
||
|
||
### 访问功能
|
||
1. 在导航栏中点击 "素材中心" 或 "视频生成"
|
||
2. 或直接访问路由：
|
||
- `/material-center` - 素材中心
|
||
- `/video-generation` - 视频生成工作台
|
||
|
||
### 素材管理流程
|
||
1. **添加素材**
|
||
- 点击 "添加素材" 按钮
|
||
- 选择文件或输入文本内容
|
||
- 填写素材信息（名称、分类、描述、标签）
|
||
- 保存素材
|
||
|
||
2. **管理素材**
|
||
- 使用搜索框快速查找
|
||
- 通过分类筛选器过滤
|
||
- 切换网格/列表视图
|
||
- 预览、编辑或删除素材
|
||
|
||
### 视频生成流程
|
||
1. **选择素材**
|
||
- 在各个分类中选择所需素材
|
||
- 支持多选和预览
|
||
- 查看已选择的素材数量
|
||
|
||
2. **配置参数**
|
||
- 设置输出格式和分辨率
|
||
- 调整帧率和质量
|
||
- 启用/禁用音频
|
||
- 添加视频特效
|
||
|
||
3. **生成预览**
|
||
- 查看视频预览
|
||
- 确认配置信息
|
||
- 点击生成按钮开始处理
|
||
|
||
## 开发说明
|
||
|
||
### 环境要求
|
||
- Node.js 18+
|
||
- pnpm 包管理器
|
||
- Tauri 开发环境
|
||
|
||
### 本地开发
|
||
```bash
|
||
# 安装依赖
|
||
pnpm install
|
||
|
||
# 启动开发服务器
|
||
cd apps/desktop
|
||
pnpm dev
|
||
```
|
||
|
||
### 扩展功能
|
||
- 添加新的素材类型：修改 `MaterialCategory` 枚举和配置
|
||
- 自定义视频特效：扩展 `VideoEffect` 接口
|
||
- 集成AI服务：实现实际的视频生成API调用
|
||
|
||
## 注意事项
|
||
|
||
1. **当前状态**：这是一个演示/预览版本，主要展示UI和交互流程
|
||
2. **后端集成**：需要实际的视频生成服务来完成完整功能
|
||
3. **文件存储**：需要配置文件上传和存储服务
|
||
4. **性能考虑**：大量素材时建议实现分页和虚拟滚动
|
||
|
||
## 未来规划
|
||
|
||
- [ ] 集成真实的AI视频生成服务
|
||
- [ ] 实现云端素材存储
|
||
- [ ] 添加协作功能
|
||
- [ ] 支持更多视频格式和特效
|
||
- [ ] 移动端适配优化
|
||
- [ ] 批量操作功能
|
||
- [ ] 素材版权管理
|
||
- [ ] 使用统计和分析
|
||
|
||
---
|
||
|
||
该功能模块为视频创作提供了完整的工作流程，从素材管理到视频生成，为用户提供了专业而易用的创作工具。
|