|
|
# 新增 Flow 节点模板（基于当前重构版本）
|
|
|
|
|
|
这份模板按你现在的代码结构整理，目标是：**新增节点只改最少文件**。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 1. 最小接入步骤
|
|
|
|
|
|
新增一个普通节点（非 LOOP）通常只要 3 步：
|
|
|
|
|
|
1. 新建节点组件（可先复用 `LocalNode` 风格）
|
|
|
2. 在 `nodeRegistry` 注册类型映射
|
|
|
3. 在节点配置源（`localNodeData`）增加定义
|
|
|
|
|
|
> `useFlowCallbacks` 已统一走 `resolveNodeDefinition + buildRuntimeNode + ensureNodeTypeRegistered`，不需要再在多个入口手写创建逻辑。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 2. 模板代码
|
|
|
|
|
|
### 2.1 新建节点组件
|
|
|
|
|
|
**路径示例**：`src/components/FlowEditor/node/httpNode/HttpNode.tsx`
|
|
|
|
|
|
```tsx
|
|
|
import React from 'react';
|
|
|
import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
|
|
|
|
|
|
const HttpNode = (props: any) => {
|
|
|
// 第一版可以直接复用 LocalNode 渲染行为
|
|
|
return <LocalNode {...props} />;
|
|
|
};
|
|
|
|
|
|
export default HttpNode;
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 2.2 注册节点类型映射（关键）
|
|
|
|
|
|
**文件**：`src/utils/flow/nodeRegistry.ts`
|
|
|
|
|
|
```ts
|
|
|
import HttpNode from '@/components/FlowEditor/node/httpNode/HttpNode';
|
|
|
|
|
|
export const resolveNodeComponent = (nodeType: string) => {
|
|
|
switch (nodeType) {
|
|
|
// ...已有 case
|
|
|
case 'HTTP':
|
|
|
return HttpNode;
|
|
|
default:
|
|
|
return LocalNode;
|
|
|
}
|
|
|
};
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 2.3 增加节点定义（用于菜单与创建）
|
|
|
|
|
|
**文件**：`src/pages/flowEditor/sideBar/config/localNodeData.ts`
|
|
|
|
|
|
```ts
|
|
|
export const localNodeData = [
|
|
|
// ...已有节点
|
|
|
{
|
|
|
nodeType: 'HTTP',
|
|
|
nodeName: 'HTTP请求',
|
|
|
data: {
|
|
|
title: 'HTTP请求',
|
|
|
type: 'HTTP',
|
|
|
parameters: {
|
|
|
apiIns: [{ name: 'start', desc: '', dataType: '', defaultValue: '' }],
|
|
|
apiOuts: [{ name: 'done', desc: '', dataType: '', defaultValue: '' }],
|
|
|
dataIns: [],
|
|
|
dataOuts: [],
|
|
|
},
|
|
|
component: {
|
|
|
type: 'HTTP',
|
|
|
customDef: '{}',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
## 3. 可选：节点专用编辑器
|
|
|
|
|
|
如果你希望配置面板是独立 UI，再补：
|
|
|
|
|
|
1. 新建编辑器组件（`src/components/FlowEditor/nodeEditors/...`）
|
|
|
2. 在编辑器路由/映射处按 `nodeType` 挂载
|
|
|
|
|
|
不做这一步也能先跑通新增节点。
|
|
|
|
|
|
---
|
|
|
|
|
|
## 4. 当前推荐的接入方式
|
|
|
|
|
|
新增节点时不要再手写分散逻辑，优先复用：
|
|
|
|
|
|
- `resolveNodeDefinition(...)`
|
|
|
- `buildRuntimeNode(...)`
|
|
|
- `ensureNodeTypeRegistered(...)`
|
|
|
|
|
|
这些已覆盖：
|
|
|
|
|
|
- 侧栏拖拽到画布（onDrop）
|
|
|
- 画布空白处添加（addNodeOnPane）
|
|
|
- 在边上插入节点（addNodeOnEdge）
|
|
|
|