在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

n8n-io/n8n

菜单

节点详情视图 (NDV)

相关源文件

节点详情视图 (NDV) 是 n8n 工作流中配置、测试和检查节点的中央界面。它提供了一个全面的环境，用户可以在其中编辑节点参数、执行单个节点、查看输入和输出数据以及在连接的节点之间导航。本文档描述了 NDV 的结构、组件和关键功能，供在 n8n 代码库中工作的开发人员参考。

有关工作流编辑器画布的信息，请参阅用户界面。

结构与组件

节点详情视图实现为一个模态对话框，当用户双击工作流画布中的节点时出现。它包含几个允许用户配置和测试节点的关键组件。

来源

主要组件详解

标题部分

标题部分包含节点管理和执行的控件

  1. 返回画布按钮：关闭 NDV 并返回工作流画布
  2. 节点名称/重命名字段：显示节点名称并允许重命名
  3. 执行节点按钮：使用当前配置运行节点
  4. 执行状态指示器：执行后显示成功/错误状态

执行状态指示器包括

  • nodeRunSuccessIndicator：成功执行的绿色对勾
  • nodeRunErrorIndicator：失败执行的红色指示器
  • nodeRunTooltipIndicator：悬停时显示执行详细信息

参数面板

参数面板显示节点的配置选项

  1. 参数输入：节点类型特有的表单字段
  2. 凭证选择器：用于选择或创建凭证配置
  3. 设置选项卡：访问节点设置，包括版本信息

参数面板支持多种输入类型，包括

  • 标准文本/数字输入
  • 下拉选择
  • 资源定位符
  • 带内联预览的表达式输入
  • 支持全屏功能的代码编辑器

数据面板

数据面板分为输入和输出部分

  1. 输入面板：显示进入节点的数据
  2. 输出面板：显示执行后节点产生的数据

两个面板都包括

  • 显示模式选择器：在表格、JSON 和模式视图之间切换
  • 运行选择器：选择不同的执行运行
  • 数据容器：实际数据显示区域
  • 搜索输入：用于跨所有视图模式过滤数据

输出面板另外包括

  • 固定数据按钮：保存特定数据以供测试
  • 编辑固定数据按钮：通过 JSON 编辑器修改固定数据

来源

关键特性和技术实现

节点执行

NDV 允许执行单个节点以测试其功能

执行状态在标题中通过视觉指示器显示

  • nodeRunSuccessIndicator：成功执行的绿色对勾
  • nodeRunErrorIndicator：失败执行的红色感叹号
  • nodeRunErrorMessage：显示错误消息
  • nodeRunErrorDescription：显示其他错误上下文
  • nodeRunTooltipIndicator：悬停时显示执行详细信息

NDV 还支持执行工作流中的先前节点以填充输入数据

  • executePrevious()：执行到当前节点的所有节点
  • executingLoader：指示执行正在进行中

来源

参数配置和验证

NDV 为节点配置提供了各种输入类型

  1. 标准输入字段：文本、数字和选择输入
  2. 资源定位符：用于从外部服务选择资源
  3. 表达式编辑器：用于创建动态表达式
  4. 代码编辑器：用于需要代码输入的节点（JavaScript、SQL、HTML）

参数验证实时发生，显示错误，例如当

  • 必需字段为空
  • 输入格式无效
  • 凭证丢失
  • 资源选择失败

NDV 通过视觉指示器实现实时验证

  • parameterInputIssues：高亮显示有验证错误的字段
  • hasIssues CSS 类：应用于有验证问题的参数
  • 字段失焦或打开有问题的节点时会显示错误消息
  • 凭证验证显示适当的错误状态

来源

数据可视化

NDV 提供了多种视图来检查输入和输出数据

  1. 表格视图：数据以表格形式显示，包含列和行

    • outputTableRows/inputTableRows：访问表格行
    • outputTableHeaders/inputTableHeaders：访问表格头
    • outputTbodyCell/inputTbodyCell：访问特定单元格

  2. JSON 视图：数据的原始 JSON 表示

    • 显示带语法高亮的格式化 JSON
    • 支持在 JSON 内容中搜索

  3. 模式视图：数据的结构化表示

    • schemaViewNode：显示属性结构而不显示值
    • 支持折叠/展开嵌套对象
    • 模式视图中没有分页（与其他视图不同）

NDV 在所有视图模式中实现了统一的搜索系统

  • searchInput：允许在任何视图中过滤数据
  • 表格/JSON 视图：跨所有数据的全文搜索，匹配项高亮显示
  • 模式视图：搜索仅限于属性名称
  • 搜索状态在视图模式更改和执行之间保持不变

来源

数据固定和管理

用户可以固定输出数据以供测试

  1. 固定数据：保存当前输出数据以备将来节点测试

    • pinDataButton：固定当前输出数据
    • editPinnedDataButton：打开固定数据编辑器
    • pinnedDataEditor：用于修改固定数据的 CodeMirror 编辑器

  2. 编辑固定数据：通过 JSON 编辑器修改固定数据

    • setPinnedData()：设置特定的固定数据内容
    • pastePinnedData()：将 JSON 内容粘贴为固定数据
    • savePinnedDataButton：保存对固定数据的更改

  3. 取消固定数据：删除固定数据并恢复到正常执行流程

    • unpinDataLink：从节点中删除固定数据

固定数据系统有几个技术限制

  • 最大固定数据大小限制（可配置，默认：16KB）
  • JSON 验证以确保数据格式有效
  • 节点复制时，固定数据也会被复制
  • 固定数据不用于生产执行，仅用于手动测试

来源

浮动节点导航

NDV 通过“浮动节点”提供了一种在连接节点之间进行可视导航的方式

浮动节点代表正在编辑的当前节点所连接的节点。该系统支持

  1. 主连接导航:

    • floatingNodes：所有浮动节点元素
    • floatingNodeByName：按名称访问特定浮动节点
    • 点击浮动节点即可导航到这些节点
    • 用于在连接节点之间移动的键盘快捷键

  2. 子节点连接:

    • AI 节点（语言模型、工具）的特殊连接
    • add-subnode-ai_languageModel：添加语言模型连接
    • add-subnode-ai_tool：添加工具连接
    • 用于组织相关节点的子节点连接组

  3. 连接顺序:

    • 浮动节点根据连接顺序保持特定顺序
    • 交叉连接可能会影响浮动节点的显示顺序

此导航系统可在高效移动工作流程的同时保持上下文。

来源

运行选择和链接

对于已执行多次的节点，NDV 提供运行选择器以查看不同的执行结果

  1. 输入运行选择器：选择要在输入面板中查看的执行运行

    • inputRunSelector：用于选择输入运行的 UI 组件
    • changeInputRunSelector()：更改所选输入运行的操作

  2. 输出运行选择器：选择要在输出面板中查看的执行运行

    • outputRunSelector：用于选择输出运行的 UI 组件
    • changeOutputRunSelector()：更改所选输出运行的操作

  3. 运行链接控件：切换输入和输出运行选择之间的链接

    • inputLinkRun：用于输入运行链接的切换按钮
    • outputLinkRun：用于输出运行链接的切换按钮
    • toggleInputRunLinking()：切换输入运行链接的操作
    • toggleOutputRunLinking()：切换输出运行链接的操作

当运行链接时（默认状态），更改一个选择器会自动更新另一个以保持上下文。这确保了在检查不同执行运行时，输入和输出数据保持同步。

运行选择器显示有关所选运行的信息

  • 运行编号（例如，“2 of 2”）
  • 项目计数（例如，“6 items”）

来源

与 n8n 组件集成

NDV 与 n8n 系统中的多个其他组件进行交互

关键集成点包括

  1. 工作流编辑器集成:

    • 通过 openNode() 或双击画布节点打开
    • 通过 backToCanvas() 按钮返回画布
    • 支持工作流保存的键盘快捷键（Cmd/Ctrl+S）

  2. 节点创建器集成:

    • 从浮动节点或输出端点访问
    • 用于添加连接节点的 openConnectionNodeCreator 事件
    • AI 节点子节点连接的特殊处理

  3. 状态管理:

    • useNDVStore：管理 NDV 特定状态（活动节点、面板等）
    • useWorkflowsStore：处理工作流数据和执行
    • useNodeTypesStore：提供节点类型定义

  4. 表达式系统集成:

    • 带实时预览的内联表达式编辑器
    • 从输入/输出数据映射表达式
    • 用于数组项的表达式项导航

  5. 凭证管理:

    • 凭证选择和创建界面
    • 验证凭证以进行节点操作
    • 处理缺失或无效凭证的错误

来源

UI 响应性和键盘快捷键

NDV 支持多种键盘快捷键和 UI 优化

操作键盘快捷键描述
保存工作流Cmd/Ctrl+S从 NDV 中保存工作流
向右导航Shift+Cmd/Ctrl+Alt+→导航到输出节点
向左导航Shift+Cmd/Ctrl+Alt+←导航到输入节点
表达式搜索/聚焦搜索输入框
关闭 NDVEsc返回画布
表达式下一项-选择表达式中的下一项
表达式上一项-选择表达式中的上一项
删除节点Backspace/Delete从画布中删除节点
重命名节点F2重命名当前节点

NDV 还实现了多项 UI 优化

  1. 响应式面板布局:

    • 参数面板和数据面板之间的可拖动分隔符
    • dragMainPanelToLeft() 和 dragMainPanelToRight() 操作
    • 面板尺寸存储在 mainPanelDimensions 状态中

  2. 搜索持久性:

    • 搜索状态在视图模式更改之间持久化
    • 节点执行后保持搜索状态
    • 根据视图模式的不同搜索行为

  3. 配对项悬停:

    • 悬停在输入/输出数据上时突出显示相关项
    • inputHoveringItem 和 outputHoveringItem 跟踪悬停状态
    • 表达式预览根据悬停项更新

  4. 代码编辑器增强功能:

    • 代码编辑器的全屏模式
    • 不同语言的语法高亮
    • 代码格式化和验证

来源

技术说明

错误处理

NDV 显示执行错误，包含

  1. 标题中的错误指示器
  2. 解释问题的错误消息
  3. 带有附加上下文的错误描述

对于参数问题，会出现验证错误

  1. 打开有问题节点时立即显示
  2. 输入字段失焦后显示
  3. 执行后如果检测到错误

来源

资源定位器组件

资源定位器组件 (RLC) 是一种用于选择外部资源的专用输入类型

  1. 提供来自外部服务的下拉选项
  2. 显示缺失凭证的适当错误状态
  3. 在更改操作时保留值
  4. 具有多种选择模式（列表/手动输入）

来源

模式视图实现

模式视图提供数据的结构化表示

  1. 显示属性结构而不显示实际值
  2. 允许折叠/展开嵌套对象
  3. 与其他视图的处理分页方式不同（模式视图中无分页）
  4. 具有专门针对属性名的搜索行为

来源

结论

节点详细信息视图是 n8n 工作流编辑器中的一个核心组件，使用户能够配置、测试和检查节点。其模块化设计方便节点配置，同时提供强大的数据可视化和节点测试工具。通过与其他 n8n 组件的集成，它充当了可视化工作流表示与底层执行引擎之间的桥梁。