Video Flow

一个基于Next.js的视频创作工具，支持多种创作模式和故事模板。

故事模板组件

功能特性

故事模板交互组件 (renderTemplateStoryMode) 提供了以下功能：

1. 模板列表显示

• 从 StoryTemplateEntity API 请求模板数据
• 以横向滚动图标列表形式展示多个模板选项
• 每个模板显示预览图片和名称
• 支持加载状态和错误处理

2. 模板详情弹窗

• 用户点击模板图标后弹出模态框
• 弹窗宽度为80%，居中显示
• 顶部布局：
  • 左侧：大图片预览（40%宽度）
  • 右侧：故事模板名称和提示词描述
• 图片支持鼠标悬停动画效果（轻微缩放和旋转）

3. 角色自定义功能

• 显示可演绎的角色列表（基于模板数据）
• 每个角色支持：
  • 上传图片替换默认角色图像
  • 录制音频功能
  • 上传音频文件功能
• 交互式按钮设计，支持悬停效果

4. 确认操作

• 弹窗底部提供"取消"和"确定"按钮
• 确定按钮执行空函数（可后续替换为实际API调用）
• 支持点击遮罩层关闭弹窗

技术实现

状态管理

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 接口定义模板数据结构：

interface StoryTemplateEntity {
  readonly id: string;
  name: string;
  imageUrl: string;
  generateText: string;
  storyRole: string[];
  userResources: {
    role_name: string;
    photo_url: string;
    voice_url: string;
  }[];
}

扩展建议

• 集成真实的API接口替换模拟数据
• 添加音频预览播放器功能
• 实现上传进度条和状态提示
• 支持模板收藏和最近使用功能
• 添加模板搜索和分类筛选

启动开发服务器

运行以下命令启动开发服务器：

npm run dev

开发服务器将在 http://localhost:3000 启动。

生产部署

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