forked from 77media/video-flow
121 lines
3.1 KiB
Markdown
121 lines
3.1 KiB
Markdown
# Video Flow
|
||
|
||
一个基于Next.js的视频创作工具，支持多种创作模式和故事模板。
|
||
|
||
## 故事模板组件
|
||
|
||
### 功能特性
|
||
|
||
故事模板交互组件 (`renderTemplateStoryMode`) 提供了以下功能：
|
||
|
||
#### 1. 模板列表显示
|
||
- 从 `StoryTemplateEntity` API 请求模板数据
|
||
- 以横向滚动图标列表形式展示多个模板选项
|
||
- 每个模板显示预览图片和名称
|
||
- 支持加载状态和错误处理
|
||
|
||
#### 2. 模板详情弹窗
|
||
- 用户点击模板图标后弹出模态框
|
||
- 弹窗宽度为80%，居中显示
|
||
- 顶部布局：
|
||
- 左侧：大图片预览（40%宽度）
|
||
- 右侧：故事模板名称和提示词描述
|
||
- 图片支持鼠标悬停动画效果（轻微缩放和旋转）
|
||
|
||
#### 3. 角色自定义功能
|
||
- 显示可演绎的角色列表（基于模板数据）
|
||
- 每个角色支持：
|
||
- 上传图片替换默认角色图像
|
||
- 录制音频功能
|
||
- 上传音频文件功能
|
||
- 交互式按钮设计，支持悬停效果
|
||
|
||
#### 4. 确认操作
|
||
- 弹窗底部提供"取消"和"确定"按钮
|
||
- 确定按钮执行空函数（可后续替换为实际API调用）
|
||
- 支持点击遮罩层关闭弹窗
|
||
|
||
### 技术实现
|
||
|
||
#### 状态管理
|
||
```typescript
|
||
const [templates, setTemplates] = useState<StoryTemplateEntity[]>([]);
|
||
const [selectedTemplate, setSelectedTemplate] = useState<StoryTemplateEntity | null>(null);
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
```
|
||
|
||
#### 核心功能
|
||
- **模板数据获取**: 模拟API调用，支持异步加载
|
||
- **模板选择**: 点击模板图标打开详情弹窗
|
||
- **资源上传**: 支持图片和音频文件上传
|
||
- **音频录制**: 预留音频录制接口
|
||
- **响应式设计**: 使用Tailwind CSS实现现代UI
|
||
|
||
#### 样式特点
|
||
- 遵循现有组件设计风格
|
||
- 使用毛玻璃效果和渐变背景
|
||
- 支持悬停动画和过渡效果
|
||
- 响应式布局，适配不同屏幕尺寸
|
||
|
||
### 使用方法
|
||
|
||
1. 在 `ChatInputBox` 组件中切换到 "template" 标签页
|
||
2. 浏览横向滚动的模板列表
|
||
3. 点击感兴趣的模板图标
|
||
4. 在弹窗中查看模板详情和自定义角色
|
||
5. 上传角色图片和音频资源
|
||
6. 点击确定完成模板选择
|
||
|
||
### 数据结构
|
||
|
||
组件使用 `StoryTemplateEntity` 接口定义模板数据结构：
|
||
|
||
```typescript
|
||
interface StoryTemplateEntity {
|
||
readonly id: string;
|
||
name: string;
|
||
imageUrl: string;
|
||
generateText: string;
|
||
storyRole: string[];
|
||
userResources: {
|
||
role_name: string;
|
||
photo_url: string;
|
||
voice_url: string;
|
||
}[];
|
||
}
|
||
```
|
||
|
||
### 扩展建议
|
||
|
||
- 集成真实的API接口替换模拟数据
|
||
- 添加音频预览播放器功能
|
||
- 实现上传进度条和状态提示
|
||
- 支持模板收藏和最近使用功能
|
||
- 添加模板搜索和分类筛选
|
||
|
||
## 启动开发服务器
|
||
|
||
运行以下命令启动开发服务器：
|
||
|
||
```shellscript
|
||
npm run dev
|
||
```
|
||
|
||
开发服务器将在 [http://localhost:3000](http://localhost:3000) 启动。
|
||
|
||
## 生产部署
|
||
|
||
```shellscript
|
||
cd video-flow
|
||
./compile.sh
|
||
|
||
登入服务器：
|
||
ssh 77media@182.92.218.171
|
||
./deploy
|
||
|
||
键入11回车：
|
||
11) Deploy Vedio Flow Frontend
|
||
Please select a service to deploy (0-10): 11
|
||
```
|