小鱼开发
343 lines
23 KiB
Markdown
343 lines
23 KiB
Markdown
# 视频生成交互流程设计
|
||
|
||
## 一、正常流程（批量生成）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Step 0: 检查前置条件 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 点击【生成视频】按钮 │
|
||
│ │ │
|
||
│ ▼ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 检查本地状态 │ │
|
||
│ │ 如果正在生成中 │───► 提示"已有任务进行中，请等待完成" │
|
||
│ └─────────────────┘ 或者"是否取消当前任务？" │
|
||
│ │ │
|
||
│ ▼ 无进行中任务 │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 检查是否选形象 │ │
|
||
│ │ 未选择 │───► 弹出形象选择弹窗 │
|
||
│ └─────────────────┘ │
|
||
│ │ │
|
||
│ ▼ 已选择 │
|
||
│ 继续下一步 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Step 1: 确认弹窗 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 开始生成视频 │ │
|
||
│ ├─────────────────────────────────────────┤ │
|
||
│ │ │ │
|
||
│ │ 将生成 8 个分镜视频 │ │
|
||
│ │ 预计耗时：约 15-20 分钟 │ │
|
||
│ │ │ │
|
||
│ │ ⚠️ 生成过程中请勿关闭应用 │ │
|
||
│ │ 您可以最小化窗口，但不要关闭 │ │
|
||
│ │ │ │
|
||
│ │ ┌────────────┐ ┌──────────────────┐ │ │
|
||
│ │ │ 取消 │ │ 开始生成 │ │ │
|
||
│ │ └────────────┘ └──────────────────┘ │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Step 2: 进入生成状态（界面锁定） │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 【生成】按钮变为【生成中...】且 disabled │
|
||
│ │
|
||
│ 顶部显示全局状态栏： │
|
||
│ ┌─────────────────────────────────────────────────────────────┐│
|
||
│ │ 🎬 视频生成中 ━━━━━━━━⏳━━━━ 预计还需 12 分钟 [?] ││
|
||
│ └─────────────────────────────────────────────────────────────┘│
|
||
│ │
|
||
│ 显示模态弹窗（不可关闭）： │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 视频生成 │ │
|
||
│ ├─────────────────────────────────────────┤ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────┐ │ │
|
||
│ │ │ 状态标签 │ │ │
|
||
│ │ │ 任务已开启 │ │ │
|
||
│ │ └─────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ 正在为空镜生成参考图片... │ │
|
||
│ │ │ │
|
||
│ │ 预计还需 12 分钟 │ │
|
||
│ │ │ │
|
||
│ │ [最小化到后台] │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 界面锁定状态： │
|
||
│ - 禁用：生成按钮、新建项目、添加/删除分镜 │
|
||
│ - 可浏览：但不能修改任何内容 │
|
||
│ - 可退出应用：但会提示"任务将后台继续，确定退出？" │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Step 3: 状态流转 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 状态标签流转： │
|
||
│ │
|
||
│ 分镜（omni-video）： │
|
||
│ 任务已开启 ──► 排队生成中 ──► 任务已完成 │
|
||
│ │
|
||
│ 空镜（文生图+图生视频）： │
|
||
│ 任务已开启 ──► 生成参考图片... ──► 排队生成中 ──► 任务已完成 │
|
||
│ │
|
||
│ 详细描述文字实时更新（SSE 推送）： │
|
||
│ - "正在初始化任务..." │
|
||
│ - "正在为空镜生成参考图片..." │
|
||
│ - "图片生成完成，开始生成视频..." │
|
||
│ - "正在生成视频，请稍候..." │
|
||
│ - "已完成 3/8 个分镜" │
|
||
│ - "整理生成结果..." │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Step 4: 完成 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 模态弹窗更新： │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 视频生成 │ │
|
||
│ ├─────────────────────────────────────────┤ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────┐ │ │
|
||
│ │ │ 任务已完成 │ │ │
|
||
│ │ └─────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ 成功生成 8 个视频 │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────────────────────────┐ │ │
|
||
│ │ │ 确定 │ │ │
|
||
│ │ └──────────────────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 用户点击【确定】： │
|
||
│ 1. 关闭弹窗 │
|
||
│ 2. 解锁界面 │
|
||
│ 3. 自动滚动到第一个有视频的分镜 │
|
||
│ 4. 播放第一个视频 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 二、单个重新生成流程
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 差异点 │
|
||
├─────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 入口：分镜卡片上的【重新生成】按钮 │
|
||
│ │
|
||
│ 确认弹窗简化： │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 重新生成视频 │ │
|
||
│ ├─────────────────────────────────────────┤ │
|
||
│ │ 将重新生成分镜 3 的视频 │ │
|
||
│ │ 预计耗时：约 3-5 分钟 │ │
|
||
│ │ │ │
|
||
│ │ ⚠️ 生成过程中请勿关闭应用 │ │
|
||
│ │ │ │
|
||
│ │ [取消] [确定] │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 完成后：自动选中该分镜并播放 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 三、异常流程
|
||
|
||
### 3.1 用户尝试关闭应用
|
||
|
||
```
|
||
用户点击关闭窗口（或 Cmd+Q / Alt+F4）
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────┐
|
||
│ ⚠️ 确认关闭 │
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ 视频生成任务仍在进行中 │
|
||
│ │
|
||
│ 如果选择关闭： │
|
||
│ - 任务将在后台继续运行 │
|
||
│ - 生成完成后会推送系统通知 │
|
||
│ - 下次打开应用可查看结果 │
|
||
│ │
|
||
│ [取消] [最小化到托盘] [关闭应用] │
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 应用崩溃/强制退出后恢复
|
||
|
||
```
|
||
用户重新打开应用
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────┐
|
||
│ 📋 恢复未完成任务 │
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ 检测到上次有未完成的视频生成任务 │
|
||
│ │
|
||
│ 项目：厨房改造方案 │
|
||
│ 进度：已完成 5/8 个分镜 │
|
||
│ 状态：仍在后台处理中 │
|
||
│ │
|
||
│ [查看进度] [我知道了] │
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
|
||
点击【查看进度】：
|
||
- 跳转到视频生成页面
|
||
- 自动恢复进度弹窗显示
|
||
- 继续监听 SSE/轮询
|
||
```
|
||
|
||
### 3.3 生成失败
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ❌ 生成失败 │
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ 视频生成过程中发生错误 │
|
||
│ │
|
||
│ 错误信息：Kling API 超时 │
|
||
│ │
|
||
│ 已生成的视频已保存 │
|
||
│ 失败的分镜：分镜3、分镜7 │
|
||
│ │
|
||
│ [返回查看] [重试失败项] │
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
|
||
点击【重试失败项】：
|
||
- 只重新生成失败的那几个分镜
|
||
- 复用现有参数
|
||
```
|
||
|
||
### 3.4 网络断开
|
||
|
||
```
|
||
SSE 连接断开
|
||
│
|
||
▼
|
||
状态栏显示："网络异常，正在重连...（1/3）"
|
||
│
|
||
▼
|
||
自动重连 SSE（最多 3 次）
|
||
│
|
||
├─► 重连成功：继续接收进度
|
||
│
|
||
└─► 重连失败：切换到轮询模式
|
||
│
|
||
▼
|
||
每 5 秒轮询一次状态
|
||
│
|
||
▼
|
||
网络恢复后：自动切回 SSE
|
||
```
|
||
|
||
## 四、本地状态管理
|
||
|
||
```typescript
|
||
// localStorage: meijiaka_generation_state
|
||
interface GenerationState {
|
||
// 任务标识
|
||
jobId: string;
|
||
projectId: string;
|
||
|
||
// 任务状态
|
||
status: 'pending' | 'generating' | 'completed' | 'failed';
|
||
|
||
// 任务信息（用于恢复显示）
|
||
shots: Array<{
|
||
id: string;
|
||
type: 'segment' | 'empty_shot';
|
||
}>;
|
||
totalShots: number;
|
||
|
||
// 时间戳
|
||
startedAt: number;
|
||
lastUpdatedAt: number;
|
||
|
||
// 结果（完成后填写）
|
||
results?: Array<{
|
||
shotId: string;
|
||
status: 'completed' | 'failed';
|
||
videoPath?: string;
|
||
errorMessage?: string;
|
||
}>;
|
||
|
||
// 错误信息
|
||
errorMessage?: string;
|
||
}
|
||
```
|
||
|
||
## 五、状态流转图
|
||
|
||
```
|
||
┌─────────────┐
|
||
│ IDLE │
|
||
└──────┬──────┘
|
||
│ 点击生成
|
||
▼
|
||
┌─────────────┐
|
||
┌───────────────►│ CONFIRM │◄───────────────┐
|
||
│ │ 确认弹窗 │ │
|
||
│ └──────┬──────┘ │
|
||
│ 取消 │ 确认 │
|
||
│ ▼ │
|
||
│ ┌─────────────┐ │
|
||
│ │ GENERATING │────────────────┤
|
||
│ │ 生成中 │ 应用崩溃/关闭 │
|
||
│ └──────┬──────┘ │
|
||
│ │ │
|
||
│ ┌────────────┼────────────┐ │
|
||
│ │ │ │ │
|
||
│ ▼ ▼ ▼ │
|
||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │SUCCESS │ │ FAILED │ │ TIMEOUT │ │
|
||
│ └────┬────┘ └────┬────┘ └────┬────┘ │
|
||
│ │ │ │ │
|
||
│ ▼ └────────────┘ │
|
||
│ ┌─────────┐ │ │
|
||
└───┤ RESULT │◄──────────────┘ │
|
||
│ 结果弹窗 │ │
|
||
└────┬────┘ │
|
||
│ │
|
||
▼ │
|
||
┌─────────┐ │
|
||
│ IDLE │───────────────────────────────┘
|
||
└─────────┘ 下次启动检测恢复
|
||
```
|
||
|
||
## 六、关键决策点
|
||
|
||
| 决策 | 选择 | 理由 |
|
||
|------|------|------|
|
||
| 生成中能否关闭应用 | ✅ 可以，但提示后台继续 | 用户有急事时需要关闭 |
|
||
| 生成中能否切换项目 | ❌ 不能 | 避免状态混乱 |
|
||
| 生成中能否修改脚本 | ❌ 不能 | 避免参数不一致 |
|
||
| 失败后能否重试 | ✅ 可以，只重试失败的 | 减少重复等待 |
|
||
| 是否需要系统通知 | ✅ 需要（第二阶段） | 用户最小化后能感知完成 |
|