# 新增 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）