画布 ↔ 文档双模式
VizChat 的同一份文档可以在 Dashboard(无限画布)和 Storyboard(线性叙事)两种模式下打开,节点和数据共用,视图切换不丢失内容。
VizChat 把"画布"和"文档"视为同一份底层数据的两种视图:
- Dashboard 模式 —— 无限二维画布,自由摆放节点,适合探索、仪表盘、协同看板
- Storyboard 模式 —— 按 Slide 组织的线性叙事画布,适合讲解、演示、导出视频
两种模式都使用同一个 React Flow 引擎和同一套节点注册表(见 DashboardView.tsx 和 StoryboardView.tsx 的 useNodeTypes()),只是坐标系和交互规则不同。
两种模式的差异
| 维度 | Dashboard | Storyboard |
|---|---|---|
| 画布尺寸 | 无限(fitView={false}) | 固定虚拟分辨率(16:9 → 1920×1080) |
| 缩放下限 | minZoom=0.1 | 锁定在 contain-fit 基准值,不允许更小 |
| 节点交互 | 全部常驻激活 | 按 Slide 切换激活 |
| 连线 | nodesConnectable=false(Agent 创建) | 支持 handle 连接 |
| 特有功能 | 实时 debounce 保存 YAML | 播放控制器 + TTS + 视频导出 |
为什么两种模式共用底层?
代码里 DashboardView 和 StoryboardView 都这样拼节点类型:
const registeredNodeTypes = useNodeTypes();
const allNodeTypes = {
...registeredNodeTypes,
...REACT_NATIVE_NODE_TYPES,
};
意味着:
- 一次实现,两处可用:新增一个节点类型,Dashboard 和 Storyboard 同时获得
- Agent 工具复用:同一个
edit_canvas工具既能改 Dashboard 也能改 Storyboard - 用户心智统一:节点的配置面板、右键菜单、快捷键完全一致
何时用哪个
- 做仪表盘 / 知识看板 / 头脑风暴 → Dashboard
- 做产品演示 / 教学讲解 / 视频脚本 → Storyboard
- 想先探索、再整理成讲稿?先在 Dashboard 画画看,再复制节点到 Storyboard
切换方式
在 Workspace 侧边栏新建文档时选择类型(dashboard 或 storyboard,见 DocumentWorkspace.tsx 的 DocumentRenderer)。当前版本不支持在同一个文档内动态切换——这是有意的约束,避免节点在有限虚拟画布和无限画布之间的布局语义冲突。
Next step
- Storyboard 功能段 — 线性叙事、播放、导出视频
- 画布快捷键 — 两种模式共用的键盘操作