feat(web): 实现循环节点中新增节点

service-web/client/src/components/flow/FlowEditor.tsx

@@ -1,19 +1,20 @@
-import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
+import {RollbackOutlined, SaveFilled} from '@ant-design/icons'
 import {Background, BackgroundVariant, Controls, MiniMap, Panel, ReactFlow} from '@xyflow/react'
-import {Button, Dropdown, message, Popconfirm, Space} from 'antd'
-import {arrToMap, isEqual, randomId, unique} from 'licia'
+import {Button, message, Popconfirm, Space} from 'antd'
+import {arrToMap} from 'licia'
 import {useEffect} from 'react'
 import {useNavigate} from 'react-router'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
 import {commonInfo} from '../../util/amis.tsx'
-import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
+import {checkAddConnection, checkSave} from './FlowChecker.tsx'
 import {useNodeDrag} from './Helper.tsx'
-import {NodeRegistry, NodeRegistryMap} from './NodeRegistry.tsx'
+import {NodeRegistryMap} from './NodeRegistry.tsx'
 import {useContextStore} from './store/ContextStore.ts'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
 import {flowDotColor, type FlowEditorProps} from './types.ts'
+import AddNodeButton from './component/AddNodeButton.tsx'
 
 const FlowableDiv = styled.div`
     .react-flow__node.selectable {
@@ -111,53 +112,7 @@ function FlowEditor(props: FlowEditorProps) {
       >
         <Panel position="top-right">
           <Space className="toolbar">
-            <Dropdown
-              menu={{
-                items: unique(NodeRegistry.map(i => i.group))
-                  .map(group => ({
-                    type: 'group',
-                    label: group,
-                    children: NodeRegistry.filter(i => isEqual(group, i.group))
-                      .map(i => ({key: i.key, label: i.name, icon: i.icon})),
-                  })),
-                onClick: ({key}) => {
-                  try {
-                    if (commonInfo.debug) {
-                      console.info('Add', key, JSON.stringify({nodes, edges, data}))
-                    }
-                    checkAddNode(key, nodes, edges)
-
-                    let nodeId = randomId(10, 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM')
-                    let define = NodeRegistryMap[key]
-
-                    setDataById(
-                      nodeId,
-                      {
-                        node: {
-                          name: define.name,
-                          description: define.description,
-                        },
-                      },
-                    )
-
-                    addNode({
-                      id: nodeId,
-                      type: key,
-                      position: {x: 100, y: 100},
-                      data: {},
-                    })
-                  } catch (e) {
-                    // @ts-ignore
-                    messageApi.error(e.toString())
-                  }
-                },
-              }}
-            >
-              <Button type="default">
-                <PlusCircleFilled/>
-                新增节点
-              </Button>
-            </Dropdown>
+            <AddNodeButton/>
             <Popconfirm
               title="返回上一页"
               description="未保存的流程图将会被丢弃，确认是否返回"