5.6 工作流画布使用说明（Workflow Canvas Guide）

工作流画布（Workflow Canvas）是 Pop 工作流系统的核心交互区域。
你将在这里完成几乎所有可视化自动化的构建动作：

拖拽节点
连接流程
调整布局
框选与多选
查看运行状态
管理复杂工作流的结构层级

本章节将带你全面掌握画布的使用技巧，让你可以更加高效地编排大型流程。

🖼 一、画布基本操作

1. 拖拽节点到画布

从左侧 节点面板 拖拽即可在画布中创建一个节点。

支持：

拖拽到任意位置
重名节点自动加编号
空白画布自动居中定位

2. 连接节点（Edges）

每个节点有 输入端口（inputs） 与 输出端口（outputs）。

拖动输出端口 → 输入端口可以创建连线。

Pop 的智能连线支持：

自动识别数据类型
自动避免循环依赖
条件节点自动生成 True/False 分支
拖拽错误会自动回弹，不会创建无效连线

3. 移动节点

直接拖拽节点即可改变位置。

支持：

单个移动
多选移动
对齐网格吸附
Shift 键强制水平或垂直移动

4. 画布缩放与导航

使用鼠标滚轮或触控板进行缩放：

滚动：放大/缩小
右键按住：拖动画布
双击空白：自动居中

顶部工具栏还提供：

Fit to screen（自动适应）
Zoom In / Zoom Out
Reset View（恢复默认缩放）

🔲 二、节点选择与批量操作

1. 单选

点击节点即可选中。

2. 多选

三种方式：

按 Shift 点击多个节点
按 Cmd / Ctrl 组合框选
鼠标拖拽框选区域

3. 批量操作

对选中的节点可以执行：

删除
复制
移动
分组（Group）
打包成模块（Module）

📦 三、节点分组（Group）

Group 是对节点的视觉组织方式，不改变逻辑。

适用于：

将复杂画布整理为结构化区域
把“数据准备”“模型处理”“输出渲染”等区域分离
大型工作流的阅读体验优化

分组方法：

多选节点
右键 → 创建分组

Group 支持：

重命名
修改颜色
折叠/展开
整体移动

🔧 四、节点属性配置（Inspector）

选中节点后，右侧会显示其配置：

节点名称
输入参数（Inputs）
配置字段（Config）
输出定义（Outputs）
变量设置
节点描述

不同类型节点会自动展示不同表单：

AI 模型节点会显示模型选择、温度、提示词、工具调用
HTTP 节点会显示 Headers / Body / Method
文件节点会显示路径 / 内容 / 格式
条件节点会显示 PSL 脚本或规则表达式

Pop 的 Inspector 设计为完全可扩展，未来会根据节点类型展示更多字段。

🔁 五、撤销/重做（Undo / Redo）

Pop 工作流支持完整的撤销与重做：

Cmd + Z：撤销
Cmd + Shift + Z：重做

支持操作：

添加节点
删除节点
修改配置
移动节点
修改连线
分组与解组

🧪 六、运行节点与调试

1. 单节点运行（Debug Node）

选中节点 → 右键 → 运行此节点

用于：

测试某个节点输入是否正确
观察节点输出数据结构
调试 PSL 脚本

运行结果会显示在底部运行日志中。

2. 完整流程运行

点击顶部工具栏 ▶ 运行工作流。

运行时的可视化效果包括：

正在执行的节点会高亮
执行成功的节点显示绿色边框
执行失败的节点显示红色边框并附带错误信息

🧭 七、复杂画布的组织技巧

以下技巧适用于管理超过 20+ 节点的大型工程。

✔ 使用 Group 做视觉区域划分

如：

[数据准备]   [AI 处理]   [生成文档]   [发布结果]

✔ 使用 Module 做逻辑封装

不要让画布变得过于复杂。

✔ 左到右布局 / 上到下布局

保持视觉方向一致更易理解。

✔ 使用颜色标识不同类型的节点

✔ 保持节点命名清晰

例如：

提取标题
结构化 JSON
生成摘要（AI）
写入数据库
生成图表

🔍 八、搜索节点与跳转

画布支持关键词搜索：

节点名称
节点类型
节点备注

并提供自动跳转功能，适合大型工作流。

📝 九、节点备注（Annotation）

你可在画布任意位置插入文本备注：

流程说明
设计文档
小提醒
TODO 事项

备注不会参与任何逻辑，仅用于协作与文档化。

🎯 十、小结

工作流画布是 Pop 可视化自动化的核心场景，通过它你可以：

组织流程
配置节点
进行调试
管理复杂工程
与布局、应用发布无缝结合

掌握画布技巧将显著提升你的自动化构建效率，尤其在大型 AI 任务与复杂业务流程中。