# 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
```