10.3 · 工作流节点 UI 组件（Workflow Node UI Components）

应用编排与外部知识接入 · 聚焦本章的模块关系、源码依据与实现要点。

项目Dify 章节10.3 状态全文译文模块界面与交互、文档对象与元数据、系统架构、测试、发布与运维

项目要点页2.5 参考项目项目章节目录Dify DeepWiki 原始章节Workflow Node UI Components 上一章10.2 下一章11

源码线索

api/core/plugin/impl/dynamic_select.py
web/app/components/base/chat/chat/answer/workflow-process.tsx
web/app/components/base/prompt-editor/__tests__/hooks.spec.tsx
web/app/components/base/prompt-editor/hooks.ts
web/app/components/base/prompt-editor/index.tsx
web/app/components/base/prompt-editor/plugins/__tests__/on-blur-or-focus-block.spec.tsx
web/app/components/base/prompt-editor/plugins/__tests__/update-block.spec.tsx
web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx

模块标签

界面与交互
文档对象与元数据
系统架构
测试、发布与运维
工作流与编排

章节正文

工作流节点 UI 组件

原始 DeepWiki 页面https://deepwiki.com/langgenius/dify/10.3-workflow-node-ui-components

工作流节点 UI 组件

概述与架构

工作流节点 UI 组件遵循一致的模式，每种节点类型（HTTP、大语言模型（LLM）、知识库检索等）都包含：

一个 panel.tsx 组件，用于渲染配置界面。
一个 use-config.ts 钩子，用于管理状态和处理用户交互。
一个 types.ts 文件，用于定义 TypeScript 接口。
一个 default.ts 文件，包含默认值和校验逻辑。

当用户选择一个节点进行编辑时，所有节点面板都会在工作流画布中渲染。这些组件使用一组共享的基础组件（如 Field、VarReferencePicker 和 OutputVars）来保持视觉一致性。

按节点类型的组件结构：

Dify · 概述与架构 · 图 1

来源：web/app/components/workflow/nodes/llm/panel.tsx:26-193 ()，web/app/components/workflow/nodes/_base/node.tsx:66-170 ()

面板组件模式

每种节点类型都实现了一个 Panel 组件，该组件遵循以下标准结构：

核心面板结构

Dify · 核心面板结构 · 图 2

BaseNode 组件作为所有特定节点面板的包装器，处理通用的 UI 关注点，如选中边框、运行状态指示器和协作存在感。

状态边框：使用 getNodeStatusBorders 来确定节点是否应显示成功（绿色）、失败（红色）或运行中（蓝色）的边框 web/app/components/workflow/nodes/_base/node.tsx:128-133。
协作：通过 nodePanelPresence 显示当前正在查看同一节点的其他用户头像 web/app/components/workflow/nodes/_base/node.tsx:96-108。
交互约束：如果节点处于只读状态或需要安装插件，则会阻止交互 web/app/components/workflow/nodes/_base/node.tsx:171-182。

来源：web/app/components/workflow/nodes/_base/node.tsx:66-182 ()，web/app/components/workflow/nodes/llm/panel.tsx:26-193 ()

共享 UI 组件

VarReferencePicker（变量引用选择器）

VarReferencePicker 是用于从上游节点选择变量的主要组件。它处理系统变量（sys）、环境变量（env）和特定节点的输出。

Dify · VarReferencePicker（变量引用选择器） · 图 3

变量上下文：它通过 getVariableCategory 识别选择器引用的是系统变量、全局变量还是环境变量 web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts:47-47。
过滤：支持通过 filterVar 属性进行自定义过滤，以限制选择特定类型（例如，仅字符串或文件）web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx:103-104。
可用节点：使用 useAvailableVarList 来计算可以为当前节点提供输出的节点列表，同时考虑分支逻辑和嵌套关系 web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx:129-133。

来源：web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx:92-122 ()，web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx:87-205 ()

PromptEditor（提示词编辑器）

PromptEditor 是一个基于 Lexical 的富文本编辑器，用于提示词工程。

变量集成：它使用 ComponentPicker 插件，允许用户通过触发字符串（通常是 {{）插入变量 web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx:68-81。
变量命令：当从选择器中选中一个变量时，会分发 INSERT_VARIABLE_VALUE_BLOCK_COMMAND 命令 web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx:149-152。
上下文同步：使用 ValueSyncPlugin 将外部状态（如历史记录或上下文数据集）同步到编辑器中 web/app/components/base/prompt-editor/index.tsx:71-98。

来源：web/app/components/base/prompt-editor/index.tsx:128-183 ()，web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx:188-211 ()

HTTP 请求和列表操作器 UI

HTTP 请求 UI

HTTP 节点使用复杂的键值编辑器来处理请求头、查询参数和请求体内容。

输入管理：使用 InputVarList 来管理工具输入，这些输入可以是常量字符串或变量引用 web/app/components/workflow/nodes/tool/components/input-var-list.tsx:36-47。
混合类型：支持“混合”模式，即一个字符串可以包含多个变量插值 web/app/components/workflow/nodes/tool/components/input-var-list.tsx:92-108。

列表操作器 / If-Else UI

条件编辑器：ConditionItem 组件提供了构建逻辑比较的界面 web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx:75-95。
操作符选择：根据所选变量的类型动态提供操作符（等于、包含等）web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx:124-130。

来源：web/app/components/workflow/nodes/tool/components/input-var-list.tsx:161-193 ()，web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx:156-164 ()

工作流交互钩子

系统依赖多个钩子来管理画布级别的交互。

useNodesInteractions

管理画布上节点的视觉交互。

拖拽：处理节点拖拽的开始和结束，在移动期间更新 workflowStore 以禁用动画 web/app/components/workflow/hooks/use-nodes-interactions.ts:178-203。
嵌套逻辑：专门处理 Iteration 和 Loop 节点的交互，确保子节点随其父节点正确移动 web/app/components/workflow/hooks/use-nodes-interactions.ts:161-164。
历史记录：在拖拽或添加节点等主要交互之后，触发 saveStateToHistory web/app/components/workflow/hooks/use-nodes-interactions.ts:171-175。

useWorkflow

提供用于遍历图结构的工具函数。

分支遍历：getBeforeNodesInSameBranch 允许组件找到当前执行路径中的所有上游节点 web/app/components/workflow/hooks/use-workflow.ts:109-154。
嵌套遍历：getIterationNodeChildren 和 getLoopNodeChildren 用于检索包含在容器节点内的子节点 web/app/components/workflow/hooks/use-workflow.ts:202-212。

来源：web/app/components/workflow/hooks/use-nodes-interactions.ts:146-222 ()，web/app/components/workflow/hooks/use-workflow.ts:52-154 ()

节点连接点和连接 UI

节点使用 NodeTargetHandle（输入）和 NodeSourceHandle（输出）来管理连接。

连接逻辑：连接点根据 availablePrevBlocks 和 availableNextBlocks 允许建立连接 web/app/components/workflow/nodes/_base/components/node-handle.tsx:60-61。
快速添加：点击连接点通常会打开 BlockSelector，以便快速添加新节点并自动连接 web/app/components/workflow/nodes/_base/components/node-handle.tsx:108-123。
运行状态：连接点的颜色会根据执行状态变化（例如，绿色表示成功，红色表示失败）web/app/components/workflow/nodes/_base/components/node-handle.tsx:94-96。

来源：web/app/components/workflow/nodes/_base/components/node-handle.tsx:49-129 ()，web/app/components/workflow/nodes/_base/components/node-handle.tsx:132-194 ()