界面总览
打开 http://localhost:3000 后落到 /workspace。屏幕分四个功能区：
- 左侧栏 —— 三个按钮：Workflow、Tasks、Portfolio（素材库）
- 顶部 header —— 工作流标题菜单、模式切换（Create / Execute）
- 画布 —— 摆放节点、连线的无限画布
- 智能岛（Smart Island） —— 底部浮动面板，随选中状态和模式动态变化
左侧栏（左上角）
三个图标按钮，从左到右：
| 图标 | 打开 | 用途 |
|---|---|---|
| Workflow | 工作流对话框 | 浏览、打开、重命名、复制、删除已保存的工作流。新建也在这里。 |
| Zap | 任务面板 | 列出你跑过的每一次执行。点开一项可以查看输入、输出和报错。节点失败时来这里看错误信息（Modal / LLM 的报错都在这儿）。 |
| FolderOpen | Portfolio 对话框 | 素材库：你在所有工作流里上传过的全部文件，可以复用、改名、删除。素材在这里，不在智能岛上。 |
如果旧文档告诉你素材按钮在智能岛上——已经改了，现在是左侧栏的第三个图标。
顶部 header
工作流标题在顶部正中，点击可以重命名、保存、Fork 当前画布。
右侧是模式切换：
- Create Mode（创作模式，Sparkles 图标）—— 默认模式。排节点、连线、配参数。智能岛显示 Add 工具栏。
- Execute Mode（执行模式，Play 图标）—— 触发运行。智能岛收成一个 Play 按钮。
详见 工作流模式。
画布
主工作区是基于 React Flow 的无限画布，可拖动、可缩放。标准操作：
- 拖动画布 —— 鼠标中键拖、按住空格拖，或触摸板双指滑动
- 缩放 —— 双指捏合、滚轮，或右下角的缩放控件
- 选中节点 —— 单击。选中了什么，决定智能岛接下来显示什么
- 多选 —— 拖框，或 Shift+点击
- 连线 —— 从输出 handle（节点右侧）拖到输入 handle（另一个节点左侧）。连接由 ABI 校验：文本输出只能接文本输入，图像接图像，以此类推
智能岛（底部）
画布底部的浮动面板，显示什么取决于模式和选中状态：
- Create Mode + 未选中任何节点 → Add 工具栏（7 个图标：3D 模型、文档、图像、文本、视频、音频、链接）。点一下就在视图中心创建对应节点
- Create Mode + 选中了节点 → 与所选节点匹配的转换/组合操作（比如选中文本节点会出现”转换 → 图像生成”，同时选中音频和视频会出现”组合 → 口型同步”）
- Execute Mode → 一个大号 Play 按钮。运行中会变成多色呼吸光球
详见 智能岛。
节点结构
画布上每个节点都由这几部分组成：
- 头部 —— 节点类型名，加一个用来拖动的 handle
- 输入 handles（左侧）—— 该节点在 ABI 中声明的每个类型化输入各占一个
- 输出 handles（右侧）—— 每个类型化输出各占一个
- 主体 —— 因节点类型而异：文本输入框、图像预览、音频波形、视频播放器、文档文件名等
- 状态指示器 —— 节点关联的任务运行时亮起，结束后显示结果或错误
完整节点清单见 节点类型。
数据存放位置
- 工作流和节点位置 ——
data/tongflow.db（SQLite） - 上传素材 —— 本地磁盘
data/uploads/，由 Portfolio 引用 - 任务执行历史 —— 同一个 SQLite 库，从 Zap（Tasks）按钮查看
只要不把节点连到外部服务（Modal / LLM），数据就不会离开你的机器。
