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

2025-07-14 23:12:43 +08:00
parent c7e0b56850
commit fa06207af8
5 changed files with 92 additions and 58 deletions
--- a/service-web/client/src/components/flow/component/AddNodeButton.tsx
+++ b/service-web/client/src/components/flow/component/AddNodeButton.tsx
@@ -0,0 +1,77 @@
+import {isEqual, randomId, unique} from 'licia'
+import {NodeRegistry, NodeRegistryMap} from '../NodeRegistry.tsx'
+import {commonInfo} from '../../../util/amis.tsx'
+import {checkAddNode} from '../FlowChecker.tsx'
+import {Button, Dropdown} from 'antd'
+import {PlusCircleFilled} from '@ant-design/icons'
+import {useDataStore} from '../store/DataStore.ts'
+import {useFlowStore} from '../store/FlowStore.ts'
+import type {ButtonProps} from 'antd/lib'
+
+export type AddNodeButtonProps = {
+  parentId?: string
+} & ButtonProps
+
+const AddNodeButton = (props: AddNodeButtonProps) => {
+  const {data, setDataById} = useDataStore()
+  const {nodes, addNode, edges,} = useFlowStore()
+  return (
+    <Dropdown
+      menu={{
+        items: unique(NodeRegistry.map(i => i.group))
+          .map(group => ({
+            type: 'group',
+            label: group,
+            children: NodeRegistry
+              .filter(i => isEqual(group, i.group))
+              // 循环节点里不能再嵌套循环节点
+              .filter(i => !props.parentId || (props.parentId && !isEqual(i.key, 'loop-node')))
+              .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: 130},
+              data: {},
+              // 如果是循环节点就将节点加入到循环节点中
+              ...(props.parentId ? {
+                parentId: props.parentId,
+                extent: 'parent',
+              } : {})
+            })
+          } catch (e) {
+            // @ts-ignore
+            messageApi.error(e.toString())
+          }
+        },
+      }}
+    >
+      <Button {...props}>
+        <PlusCircleFilled/>
+        新增节点
+      </Button>
+    </Dropdown>
+  )
+}
+
+export default AddNodeButton