流编辑器系统

目的与范围

Flow Editor System 提供了一个可视化的、基于节点的界面，用于创建和管理 AI 工作流。用户可以拖放组件，用边连接它们来定义数据流，并执行生成的工作流。该系统负责流程构建的可视化表示、用户交互和状态管理。

有关底层组件执行引擎的信息，请参阅组件系统。有关流程存储和持久化，请参阅数据管理和存储。

系统架构概览

Flow Editor System 由多个相互关联的子系统组成，它们协同工作以提供全面的可视化编辑体验。

来源： src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx82-645 src/frontend/src/CustomNodes/GenericNode/index.tsx68-614 src/frontend/src/stores/flowStore.ts60-714

核心 Flow Editor 组件

PageComponent - 主画布容器

PageComponent 作为 Flow 编辑界面的主容器，构建在 ReactFlow 之上。

主要职责包括

管理 ReactFlow 画布实例
处理用于添加组件的拖放操作
处理用于流程操作的键盘快捷键
管理节点和边的选择状态

来源： src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx73-81 src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx582-623

GenericNode - 可视化节点表示

GenericNode 组件渲染流程中的各个组件。

该组件处理多种显示模式和交互状态。

展开模式：显示完整的组件界面和参数。
最小化模式：紧凑视图，适用于界面简单的组件。
工具模式：用作工具的组件的特殊渲染。
构建状态：在流程执行期间进行视觉反馈。

来源： src/frontend/src/CustomNodes/GenericNode/index.tsx68-614 src/frontend/src/CustomNodes/GenericNode/components/NodeName.tsx src/frontend/src/CustomNodes/GenericNode/components/NodeOutputs.tsx

节点交互系统

NodeToolbarComponent - 节点操作

NodeToolbarComponent 为选定的节点提供上下文操作。

工具栏提供即时操作和基于模态框的操作，并支持常用操作的键盘快捷键。

来源： src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx45-745 src/frontend/src/modals/codeAreaModal/index.tsx34-290

流程状态管理

FlowStore - 中央状态管理

useFlowStore 管理所有与流程相关的状态和操作。

关键状态管理功能

不可变更新：所有状态更改都使用 `cloneDeep` 进行不可变模式处理。
自动边清理：当节点更改时，无效的边会自动移除。
自动保存集成：更改会触发自动流程持久化。
构建状态跟踪：监视组件执行状态。

来源： src/frontend/src/stores/flowStore.ts60-714 src/frontend/src/types/zustand/flow/index.ts64-263

流程编辑操作

节点和边管理

Flow Editor System 支持全面的节点和边操作。

连接验证系统

边的创建受复杂的验证系统约束。

来源： src/frontend/src/utils/reactflowUtils.ts322-373 src/frontend/src/types/flow/index.ts96-114

键盘快捷键和交互

快捷键系统

Flow Editor System 提供广泛的键盘快捷键支持。

操作	快捷键	处理函数
撤销	`Ctrl+Z`	`handleUndo()`
重做	`Ctrl+Y` / `Ctrl+Shift+Z`	`handleRedo()`
复制	`Ctrl+C`	`handleCopy()`
剪切	`Ctrl+X`	`handleCut()`
粘贴	`Ctrl+V`	`handlePaste()`
删除	`Delete` / `Backspace`	`handleDelete()`
复制	`Ctrl+D`	`handleDuplicate()`
分组	`Ctrl+G`	`handleGroup()`

快捷键系统包括智能上下文检测，以防止与输入字段和其他 UI 元素的冲突。

来源： src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx208-337 src/frontend/src/stores/shortcuts.ts

流程持久化与导出

自动保存系统

Flow Editor System 实现了自动保存，并支持可配置的间隔。

来源： src/frontend/src/hooks/flows/use-autosave-flow.ts src/frontend/src/modals/exportModal/index.tsx19-142 src/frontend/src/utils/reactflowUtils.ts375-386

集成点

组件系统集成

Flow Editor System 与组件系统紧密集成以进行执行。

该集成确保可视化流程构建能够无缝地转换为可执行的组件图，并提供实时验证和反馈。

来源：src/frontend/src/stores/flowStore.ts90-108 src/frontend/src/utils/reactflowUtils.ts528-611 src/frontend/src/CustomNodes/helpers/check-code-validity.ts