跳转到主要内容

​
概述

视频工作区支持 AI 驱动的视频创作流程。当项目 type: "video" 时，工作区右侧的轨迹/文件标签页将替换为 Storyboard（分镜） 和 Timeline（时间线） 面板，左侧对话使用 Agent 的 ReAct 模式编排生成流程。

​
架构

┌─────────────────────┐     ┌──────────────────────────────────┐
│    对话区 (左侧)     │     │     视频工作区 (右侧)             │
│                      │     │  ┌──────────┐ ┌──────────┐      │
│  CreativeBriefCard   │     │  │ Storyboard│ │ Timeline │  TOC │
│  ScriptCard          │     │  │   面板    │ │   面板   │      │
│  StoryboardCard ─────┼────►│  │          │ │          │      │
│  VisualGenPathCard   │     │  └──────────┘ └──────────┘      │
│  VisualAssetsCard    │     └──────────────────────────────────┘
│  AudioAssetsCard     │
│  TimelineLinkCard ───┼────► Timeline 面板
└─────────────────────┘

​
流水线阶段

阶段Agent Skill输出卡片后端工具
1creative-briefCreativeBriefCardvideo_output_creative_brief
2script-writer（可选）ScriptCardvideo_output_script
3storyboard-designerStoryboardCardvideo_plan_storyboard
4visual-gen-pathVisualGenPathCardvideo_output_visual_gen_path
5visual-media-generatorVisualAssetsCardvideo_generate_element_image / video_generate_start_frame / video_generate_shot
6audio-media-generatorAudioAssetsCardvideo_generate_narration / video_generate_music
7video-assemblerTimelineLinkCardvideo_assemble_timeline
工具 Skill：resource-analyzer — 用户上传参考素材时自动触发。

​
Storyboard 数据模型

videoStoryboard
├── storyboardElement (关键元素)
│   └── elementAsset (图片版本)
├── storyboardSegment (段落)
│   └── storyboardShot (镜头)
│       └── shotAsset (起始帧 + 视频版本)
└── storyboardAudio (旁白 & 音乐)
    └── audioAsset (音频版本)
所有表定义在 apps/web/src/db/schema/video.ts。

​
SSE 事件

事件方向用途
video_storyboard_init后端 → 前端初始 Storyboard 推送
video_element_update后端 → 前端Element 资产更新
video_shot_progress后端 → 前端Shot 生成进度
video_shot_complete后端 → 前端Shot 生成完成
video_audio_complete后端 → 前端音频生成完成
由 stream-processor.ts 处理，更新 videoStore（Zustand）。

​
引用机制

用户可通过 Element / Shot / Audio 卡片上的引用按钮，将 Storyboard 项目引入对话框，格式为 [[ELEMENT:name|id]] / [[SHOT:name|id]] / [[AUDIO:name|id]]，Agent 据此精准定位修改对象。