# 视频生成交互流程设计 ## 一、正常流程（批量生成） ``` ┌─────────────────────────────────────────────────────────────────┐ │ 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 │───────────────────────────────┘ └─────────┘ 下次启动检测恢复 ``` ## 六、关键决策点 | 决策 | 选择 | 理由 | |------|------|------| | 生成中能否关闭应用 | ✅ 可以，但提示后台继续 | 用户有急事时需要关闭 | | 生成中能否切换项目 | ❌ 不能 | 避免状态混乱 | | 生成中能否修改脚本 | ❌ 不能 | 避免参数不一致 | | 失败后能否重试 | ✅ 可以，只重试失败的 | 减少重复等待 | | 是否需要系统通知 | ✅ 需要（第二阶段） | 用户最小化后能感知完成 |