5.2 工作流编辑器概览（Workflow Editor Overview）

Pop 的工作流编辑器是一个强大而灵活的可视化构建界面，让用户能以最直观的方式创建自动化流程、图文应用、小工具、AI 应用和完整的业务流转系统。

本章节将带你完整了解工作流编辑器的界面结构、交互方式、主要区域功能，让你能够快速上手并建立属于自己的可视化工作流。

🧭 一、编辑器界面结构

Pop 工作流编辑器由五大核心区域构成：

┌──────────────────────────────┬──────────────────────────────┐
│ ① 左侧：节点面板（Node Panel） │ ② 右侧：绘图画布（Canvas）       │
│                              │                              │
│ ③ 顶部：工具栏（Toolbar）       │                              │
├──────────────────────────────┼──────────────────────────────┤
│ ④ 右侧：属性编辑器（Inspector） │ ⑤ 底部：运行日志（Execution Log） │
└──────────────────────────────┴──────────────────────────────┘

下面逐一解释每个区域的作用。

① 节点面板（Nodes Panel）

左侧的节点工具栏包含 Pop 内置的所有节点类型：

AI 节点（语言模型、图像模型、多模态模型）
文件节点（读取、写入、生成 PDF / DOCX / Excel / 图片）
网络节点（HTTP 请求、Webhook、URL 读取）
数据库节点（MySQL / Redis / PostgreSQL）
逻辑节点（条件、循环、等待、分支、合并）
工具节点（JSON 处理、字符串处理、图表生成、时间节点等）
MCP 工具节点（本地工具、远程工具）

典型操作：

拖拽节点到画布
搜索节点（快速输入即可过滤）
收藏常用节点
查看节点分组（AI / 工具 / 数据库 / 文件等）

② 工作流画布（Canvas）

画布是你构建流程的主舞台，你可以：

✔ 拖拽节点

将节点从左侧拖入画布。

✔ 拖拽连线

从节点输出拖到另一个节点输入处。

✔ 创建分支

条件节点自动生成 true / false 分支。

✔ 点击节点进入配置

右侧会展示节点的参数、输入、输出等配置。

✔ 画布交互能力

放大 / 缩小
自动布局
框选多个节点
撤销 / 重做
网格背景辅助布局

画布采用 ReactFlow 驱动，具备极高的交互性能与可扩展性。

③ 工具栏（Toolbar）

位于顶部，包含：

图标	功能
▶️	运行工作流
🧪	运行指定节点（Debug Mode）
💾	保存工作流
📦	导出工作流 JSON
📥	导入工作流 JSON
🧩	发布为应用
🔍	局部放大、缩小、居中显示
🧭	自动布局

工具栏是工作流操作效率的重要区域。

④ 属性编辑器（Inspector）

右侧区域用于配置节点或画布属性。

当选中节点时，会显示：

节点名称
节点描述
输入参数
配置参数
输出结构说明
变量名设定

当选中画布空白时，则显示工作流级别配置：

工作流名称
工作流描述
输入参数（Inputs）
输出参数（Outputs）
全局变量（Variables）

属性编辑器是工作流的“大脑”。

⑤ 运行日志（Execution Log）

位于底部，包括：

每个节点的执行记录
节点输入输出
错误详情
执行耗时
打印的日志（console）
Debug 信息

支持：

展开/折叠
查看运行时状态
多轮执行历史追踪

这是调试工作流最重要的工具之一。

🎛 工作流编辑器的交互特性

✔ 节点即时提示

悬停节点可查看用途说明。

✔ 智能连线

自动识别可连接的输入输出类型。

✔ 键盘快捷键

⌘+S 保存
Delete 删除节点
⌘+Z 撤销
⌘+Shift+Z 重做

✔ 多窗口运行

一个工作流可在多个运行窗口中同时查看结果。

📌 小结

工作流编辑器是 Pop 的核心组件，提供：

清晰的可视化流程构建方式
强大的节点配置能力
完整的调试工具
高效的布局与交互体验
可扩展的节点系统与 MCP 工具支持