StoryBoard.vue 业务逻辑与流程图

基于 web/src/views/aigc/component/StoryBoard.vue 分析，整理四步创作流程、核心 methods 与业务流程图。

---

一、业务总览

分镜创作页采用 三步创作：分镜创作 → 完善素材 → 合成/导出。每步对应子组件 StoryBoardStep2Generate、StoryBoardStep3Storyboard、StoryBoardStep4Export，主流程与数据由 StoryBoard.vue 统一管理。

步骤	标题	核心职责
1	分镜创作	选题策划（AI 灵感助手）+ 脚本生成（LLM 生成分镜 JSON）
2	完善素材	选主题、匹配素材、批量首帧图/数字人/配音、保存分镜项与项目
3	合成/导出	ICE 合成或 FFmpeg 合成、导出音频/JSON/剪映草稿、下载素材

---

二、三步创作总流程图

flowchart LR
  subgraph Step1["步骤1: 分镜创作"]
    A1[选题策划: AI 灵感助手] --> A2[生成候选主题]
    A2 --> A3[选择并应用主题]
    A3 --> B1[输入提示词/模板]
    B1 --> B2[生成分镜 JSON]
    B2 --> B3[解析并渲染列表]
  end
  subgraph Step2["步骤2: 完善素材"]
    C1[批量配音] --> C2[useBatchDubbing]
    C2 --> C3[批量生图/匹配]
    C3 --> C4[保存项目与分镜]
  end
  subgraph Step3["步骤3: 合成/导出"]
    D1[ICE/FFmpeg 合成] --> D2[合成视频]
    D2 --> D3[导出素材/工程]
  end
  Step1 --> Step2 --> Step3

---

三、步骤 1：分镜创作 (原步骤 1 & 2 合并)

组件：StoryBoardStep2Generate.vue (整合了选题逻辑)

入口：

1. 选题：顶部折叠面板「AI 灵感助手」→ @generate-theme。
2. 生成：输入框下方「生成分镜」→ @generate。

主流程：

• 选题阶段：选择账号方向 → 调用 LLM 生成候选 → 应用到 Prompt。
• 生成阶段：用户确认 Prompt → 调用 LLM API → 解析 JSON → 渲染分镜列表 (storyBoardData) → 自动保存。

---

四、步骤 2：完善素材 (原步骤 3)

组件：StoryBoardStep3Storyboard.vue

入口：列表页面的各类批量操作按钮。

核心更新：

• 批量配音：已重构为 useBatchDubbing.js。
  • 逻辑：点击「批量配音」→ 打开弹窗配置 → 确认后调用 startBatchDubbingConfirm。
  • 优化：并发请求 TTS，全部完成后统一调用 saveAllItems 批量保存，大幅减少请求次数。

---

五、步骤 3：合成/导出 (原步骤 4)

组件：StoryBoardStep4Export.vue

主流程：

• 合成：ICE 云端合成或 FFmpeg 本地合成。
• 导出：调用 zip-utils.js 打包下载视频、音频、字幕、剪映草稿。

---

七、一键闭环：agentIdeaToVideo

从「想法」到「成片」的自动化流程，串联步骤 2～4 的核心能力。

flowchart TD
  A[用户点击 想法→成片] --> B[agentAppRunCreate 创建 run 记录]
  B --> C{有无分镜/提示词?}
  C -->|否| D[agentGenerateAndSave]
  C -->|是| E[applyTopicToAll 若未全选主题]
  D --> E
  E --> F[bulkMatchMaterials]
  F --> G[批量配音: Azure 优先, Volc 降级]
  G --> H[saveAllStoryBoardItems]
  H --> I[VideoSynthesis.synthesizeVideos]
  I --> J{成功?}
  J -->|是| K[agentAppRunUpdate state=success]
  J -->|否| L[agentAppRunUpdate state=failed]
  K --> M[提示完成]
  L --> M

相关 methods：agentIdeaToVideo、agentGenerateAndSave、applyTopicToAll、saveAllStoryBoardItems；配音与匹配依赖 audio-batch-service、batch-ops。

---

八、核心 methods 索引（按职责）

职责	方法名	说明
步骤切换	handleStepClick	切换 activeStep 并滚动到对应 step
步骤1	handleGenerateTheme	调用 LLM 生成主题候选
	applyTopicToMeta / onThemeCandidateChange	将选中主题写入 formula/globalTopic
	applyTopicToAll	将全局主题应用到所有分镜项
	loadAccountDirections	加载账号方向选项
	syncDirectionToFormula / syncCascaderWithGlobalTopic	同步方向与级联选择器
步骤2	openLlmProviderDialog	打开服务商/模型选择并触发生成
	handleTemplateGenerate / doTemplateGenerate	模板合并后生成分镜
	handleApplyGeneratedResult	解析 LLM 结果并合并到 storyBoardData
	ensureStoryboardForSession	确保当前会话有分镜项目（创建/更新 meta）
	saveTopicPrompts	将当前提示词保存到主题
	agentGenerateAndSave	从想法生成分镜并保存（闭环内调用）
步骤3	quickSelectTopic / onCascaderPanelChange / onCategorySelect	主题选择与级联/分类
	bulkMatchMaterials	批量匹配素材（委托 batch-ops）
	openBatchFirstImageDialog / startBatchFirstImage	批量首帧图
	openBatchApplyDhDialog / onApplyDhBatch	批量数字人
	openBatchDubbingConfirm / startBatchDubbingConfirm / batchDubbing	批量配音
	handleSaveItemEvent / saveStoryboardItem	单条分镜项保存
	saveProjectAndItems / saveAllStoryBoardItems	保存项目与全部分镜项
步骤4	agentIdeaToVideo	一键闭环：生成→匹配→配音→保存→ICE 合成
	composeWithFFmpeg	打开 FFmpeg 合成弹窗并提交 MCP
	exportAllAudios	导出分镜音频 ZIP
	copyStoryboardJson	复制分镜 JSON 到剪贴板
	downloadStoryBoard	下载素材
	exportJianyingDraftJson / exportJianyingDraftPackage	导出剪映草稿
辅助	extractStoryboardMetaFromParsed	从 LLM 解析结果提取 title/name/publishDesc 等
	normalizeDurationForItems	按台词/字数等标准化时长
	buildArkOptions / buildBailianOptions	构建 Ark/百炼请求参数
	mergeMetaFromRoot	将服务端返回的 meta 合并到 storyboardMeta

---

九、数据流要点

• formula：步骤 1/2 的提示词、账号方向、模板合并结果；步骤 2 生成时与 globalTopic 一起参与 LLM 上下文。
• globalTopic：当前选中的全局主题（value、label、image_type_id 等）；步骤 3 选主题、匹配素材、配音会用到。
• storyBoardData：分镜列表，每项含 title/description/line/prompt/effect、videoUrl/audioUrl、image_topic_id、firstImageKey/lastImageKey 等；步骤 2 写入、步骤 3 编辑与保存、步骤 4 合成与导出。
• storyboardMeta / currentStoryboardId：当前分镜项目元信息与 ID；由 ensureStoryboardForSession 创建或更新，保存分镜项时依赖 currentStoryboardId。

---

文档与代码对应关系：web/src/views/aigc/component/StoryBoard.vue（以当前版本为准）。若组件重构，请同步更新本文档。