flow-playform-react/docs/add-flow-node-template.md

新增 Flow 节点模板（基于当前重构版本）

这份模板按你现在的代码结构整理，目标是：新增节点只改最少文件。

---

1. 最小接入步骤

新增一个普通节点（非 LOOP）通常只要 3 步：

1. 新建节点组件（可先复用 LocalNode 风格）
2. 在 nodeRegistry 注册类型映射
3. 在节点配置源（localNodeData）增加定义

useFlowCallbacks 已统一走 resolveNodeDefinition + buildRuntimeNode + ensureNodeTypeRegistered，不需要再在多个入口手写创建逻辑。

---

2. 模板代码

2.1 新建节点组件

路径示例：src/components/FlowEditor/node/httpNode/HttpNode.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

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

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）