用户界面

1. UI 概述与架构

n8n 编辑器 UI 是一个基于 Vue.js 的单页应用程序，它提供了一个交互式环境，用于创建、编辑和管理工作流。该界面旨在促进可视化编程体验，用户可以通过连接节点来创建自动化工作流。

主要 UI 架构

UI 架构遵循基于组件的方法，并使用 Pinia store 进行状态管理。主视图是 NodeView，其中包含用于可视化构建工作流的 Canvas，并提供对 Node Details View (NDV) 的访问，用于配置各个节点。

来源

2. 工作流画布

工作流画布是用户通过添加、连接和排列节点来构建工作流的中心界面。

画布组件和操作

2.1 节点表示

画布上的节点代表工作流中的特定操作或触发器。它们可以是

常规节点（处理步骤）
触发器节点（工作流起始点）
便签（文档）

每个节点都有

显示其类型和状态的可视化表示
输入/输出连接点（句柄）
执行结果的状态指示器（成功/错误）

2.2 画布交互

用户可以通过多种方式与画布进行交互

添加节点：使用节点创建器或键盘快捷键
连接节点：从输出端拖动到输入端
移动节点：使用鼠标或键盘拖放
选择节点：单击或套索选择
复制/粘贴节点：通过上下文菜单或键盘快捷键（Ctrl/Cmd+C，Ctrl/Cmd+V）
删除节点：通过上下文菜单、Delete 键或 Backspace 键

画布支持各种导航控件

放大/缩小（按钮或按住 Ctrl 键使用鼠标滚轮）
缩放到适合（显示视口中的所有节点）
平移（拖动空白画布）
撤销/重做操作（Ctrl/Cmd+Z，Ctrl/Cmd+Shift+Z）

来源

3. 节点详情视图 (NDV)

节点详情视图 (NDV) 是打开节点进行编辑时出现的模态界面。它提供了一个全面的界面来配置节点参数和查看输入/输出数据。

NDV 结构和组件

3.1 NDV 结构

NDV 分为三个主要部分

标题：包含节点名称、类型和控件按钮（返回画布、执行）
参数：特定于节点类型的配置选项
数据面板：显示执行结果的输入和输出数据面板

3.2 参数配置

参数部分提供了配置节点行为的界面

文本输入 (parameterInput)
下拉列表和选择组件
凭证选择器 (nodeCredentialsSelect)
资源定位器 (resourceLocator)
表达式编辑器 (inlineExpressionEditor)
支持全屏的代码编辑器 (codeEditorFullscreen)

3.3 数据面板

输入和输出面板显示通过节点流动的数据

表格视图：以表格形式显示数据，包含行和列
JSON 视图：数据的原始 JSON 表示
Schema 视图：显示数据类型的结构化 Schema 表示
二进制视图：用于文件和图像的二进制数据可视化

用户可以

使用显示模式选择器在显示模式之间切换
使用运行选择器在多个输入/输出之间导航
使用固定数据按钮固定数据以进行测试
使用 NDV 搜索功能搜索数据内容
通过拖放将数据映射到参数

来源

4. Schema 视图和数据可视化

Schema 视图提供工作流中流动数据的结构化表示，允许用户理解数据结构和关系。

Schema 组件和交互

4.1 虚拟 Schema

Virtual Schema 组件用于在 NDV 中可视化数据结构。它提供

具有可折叠部分的嵌套数据的分层视图
不同数据类型（字符串、数字、对象、数组）的类型指示器
用于数据映射表达式的路径信息
不同数据类型的视觉区分

4.2 Schema 功能

Schema 视图的关键功能包括

预览模式：在执行前显示预期的 Schema 结构
搜索功能：在复杂的嵌套数据结构中查找字段
数据拖放：支持将数据字段直接映射到参数
上下文探索：提供对工作流变量和执行上下文的访问

4.3 数据操作

用户可以通过多种方式与数据进行交互

将值或路径复制到剪贴板
将字段拖放到参数输入以进行表达式映射
以不同格式（表格、JSON、Schema）查看示例数据
使用运行选择器在多个输入/输出之间导航
折叠和展开嵌套对象和数组

来源

5. 节点创建器

节点创建器是向工作流添加新节点的界面。它提供了一个可搜索的可用节点类型和模板目录。

节点创建器结构和入口点

5.1 打开节点创建器

可以通过以下几种方式访问节点创建器

画布加号按钮（用于添加第一个节点） (canvasPlusButton)
节点输出端点（用于连接节点） (canvasNodePlusEndpoint)
键盘快捷键（选中节点时按 Tab 键）
上下文菜单选项 (contextMenuAction)

节点创建器打开的来源记录在 NODE_CREATOR_OPEN_SOURCES 常量中。

5.2 节点选择

用户可以通过以下方式查找和选择节点

搜索：在搜索栏中键入以按名称或功能查找节点
类别：按功能类别浏览节点，例如“核心节点”或“AI”
操作：为节点类型选择特定操作
模板：使用预配置的节点设置来处理常见任务

5.3 节点放置

选择后，节点可以

直接添加到画布的默认位置
通过其输出端点连接到现有节点
使用连接操作添加到连接的节点之间
通过拖放将节点放置在特定的画布坐标

来源

6. UI 交互性和控件

n8n UI 提供了各种交互式元素和控件来管理工作流和节点配置。

6.1 键盘快捷键

该界面支持大量键盘快捷键，以实现高效的工作流管理

快捷键	操作	实现
Ctrl/Cmd+S	保存工作流	`保存工作流`
Ctrl/Cmd+Enter	执行工作流	`执行工作流`
Ctrl/Cmd+Z	撤销	`撤销`
Ctrl/Cmd+Shift+Z	重做	`重做`
Ctrl/Cmd+A	全选节点	`全选`
Ctrl/Cmd+D	复制节点	`复制节点`
Delete/Backspace	删除选定节点	`删除节点`
D	禁用选定节点	`禁用节点快捷方式`
P	固定选定节点	`固定节点快捷方式`
Shift+S	添加便签	`添加便签`

6.2 上下文菜单

上下文菜单提供对基于所选元素的进行的访问

节点上下文菜单：特定于节点的选项（重命名、删除、复制、禁用）
连接上下文菜单：节点连接选项（删除、在中间添加节点）
画布上下文菜单：工作流画布的操作（添加便签，全选）

上下文菜单通过 openContextMenu() 和 contextMenuAction() 函数实现。

6.3 拖放操作

界面各处广泛使用拖放功能。

使用 drag() 和 moveNode() 在画布上移动节点
使用 draganddrop() 在节点之间创建连接
将数据字段映射到参数，使用 mapDataFromHeader()
重新排序列表和集合中的项目

6.4 确认对话框

可能导致数据丢失的重要操作会显示确认对话框。

删除节点或工作流，使用 acceptConfirmModal()
导航离开未保存的更改，使用 beforeUnloadEventBindings
覆盖现有数据，带有确认提示

来源

7. UI 组件架构

n8n UI 使用 Vue.js 和组件化架构构建。关键组件被组织起来，提供模块化且易于维护的代码库。

核心 UI 组件和关系

7.1 Store 集成

UI 组件与各种 Pinia store 交互以进行状态管理。

Store	目的	关键函数
useWorkflowsStore	管理工作流数据	`getCurrentWorkflow()`, `saveCurrentWorkflow()`
useNodeTypesStore	提供节点定义	`getNodeType()`, `getNodeTypeDescription()`
useUIStore	控制 UI 状态	`openModal()`, `closeModal()`
useNDVStore	管理 NDV 状态	`activeNode`, `setPanelDisplayMode()`
useCanvasStore	处理画布状态	`canvasNodes`, `canvasConnections`
useExecutionsStore	管理执行	`getExecutionData()`, `activeExecution`

7.2 组件通信

组件通过多种机制进行通信：

Props 和 events 用于父子通信
Store actions 和 getters 用于全局状态管理
事件总线，如 nodeViewEventBus 和 canvasEventBus，用于跨组件事件。
Composables，如 useRunWorkflow 和 useCanvasOperations，用于共享功能。

7.3 测试架构

UI 组件通过 Cypress 端到端测试进行测试，以验证：

组件渲染和可见性
用户交互，如点击、拖动和输入
组件和 Store 之间的数据流
通过 API 模拟与后端服务的集成

来源

8. UI 自定义和工作流可视化

n8n UI 支持自定义和可视化功能，以增强工作流的可读性和用户体验。

8.1 便签

便签提供了一种直接在工作流画布上添加文档的方法。

使用 hitAddSticky() 或通过上下文菜单添加便签。
使用调色板自定义颜色（toggleColorPalette()）
通过拖放操作自由调整大小和位置
使用 editSticky() 函数编辑内容
支持文本格式化

便签功能是通过 STICKY_NODE_TYPE 常量和相关操作实现的。

8.2 节点外观和状态

节点具有不同状态的视觉指示器：

状态管理	视觉指示器	实现
活动/非活动	激活器开关	`isWorkflowActivated()`
执行成功	绿色指示器	`nodeRunSuccessIndicator`
执行错误	红色指示器	`nodeRunErrorIndicator`
选中	高亮边框	`selectedNodes()`
已禁用	淡入效果	`disabledNodes()`
固定数据	图钉图标	`pinnedDataButton`

8.3 画布可视化控件

画布提供了多种可视化控件：

缩放级别控件（zoomInButton()、zoomOutButton()、resetZoomButton()）
使用 zoomToFit() 函数排列节点
带成功/错误状态的连接可视化
浮动节点用于连接节点导航
连接上的执行数据可视化

来源

9. 可访问性和国际化

n8n UI 实现了支持可访问性和国际化的功能。

9.1 国际化

UI 使用支持多种语言的翻译系统。

所有 UI 元素的翻译键
日期和数字的特定语言格式
RTL 语言支持

界面支持键盘导航，以提高可访问性。

Tab 键在交互元素之间导航
常用操作的键盘快捷键
模态对话框的焦点管理
用于屏幕阅读器的 Aria 属性

来源

结论

n8n 用户界面通过可视化编程方法提供了一个全面的环境，用于创建、编辑和管理工作流。模块化的组件架构、直观的交互和强大的数据可视化功能使用户能够高效地构建复杂自动化工作流。

UI 组件无缝协作，提供一致的体验，从向画布添加节点到配置参数和可视化数据流。广泛的测试覆盖确保了界面功能的可靠性。