feat(web): 优化节点编辑性能

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

@@ -7,25 +7,25 @@ import {
   MiniMap,
   type Node,
   type NodeProps,
-  ReactFlow
+  ReactFlow,
 } from '@xyflow/react'
 import type {Schema} from 'amis'
 import {Button, Drawer, Dropdown, message, Popconfirm, Space} from 'antd'
 import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
 import {type JSX, type MemoExoticComponent, useEffect, useState} from 'react'
+import {useNavigate} from 'react-router'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
+import {useShallow} from 'zustand/react/shallow'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
 import CodeNode from './node/CodeNode.tsx'
-import OutputNode from './node/OutputNode.tsx'
 import KnowledgeNode from './node/KnowledgeNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
+import OutputNode from './node/OutputNode.tsx'
 import SwitchNode from './node/SwitchNode.tsx'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
-import {useNavigate} from 'react-router'
-import {useShallow} from 'zustand/react/shallow'
 
 const FlowableDiv = styled.div`
     height: 100%;
@@ -114,7 +114,7 @@ function FlowEditor(props: FlowEditorProps) {
       setData: state.setData,
       getDataById: state.getDataById,
       setDataById: state.setDataById,
-    }))
+    })),
   )
   const {
     nodes,
@@ -138,7 +138,7 @@ function FlowEditor(props: FlowEditorProps) {
       setEdges: state.setEdges,
       onEdgesChange: state.onEdgesChange,
       onConnect: state.onConnect,
-    }))
+    })),
   )
 
   const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
@@ -167,7 +167,7 @@ function FlowEditor(props: FlowEditorProps) {
                             {
                               ...context.props.data,
                               finished: true,
-                            }
+                            },
                           )
                           setOpen(false)
                         },
@@ -220,7 +220,7 @@ function FlowEditor(props: FlowEditorProps) {
   // 用于透传node操作到主流程
   const initialNodeHandlers = {
     // getInputSchema: () => props.inputSchema,
-    editNode
+    editNode,
   }
 
   useEffect(() => {
@@ -329,7 +329,6 @@ function FlowEditor(props: FlowEditorProps) {
           nodeDef.map(def => def.key),
           key => find(nodeDef, def => isEqual(key, def.key))!.component)
         }
-        fitView
       >
         <Controls/>
         <MiniMap/>

service-web/client/src/components/flow/node/AmisNode.tsx

@@ -1,3 +1,4 @@
+import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
 import {
   type Edge,
   Handle,
@@ -5,15 +6,16 @@ import {
   type Node,
   type NodeProps,
   Position,
-  useNodeConnections
+  useNodeConnections,
 } from '@xyflow/react'
 import type {Schema} from 'amis'
 import {Button, Card} from 'antd'
 import {isEmpty, isEqual, isNil} from 'licia'
-import {type JSX, useMemo} from 'react'
+import {type JSX} from 'react'
+import styled from 'styled-components'
 import {horizontalFormOptions} from '../../../util/amis.tsx'
 import {useDataStore} from '../store/DataStore.ts'
-import {EditFilled} from '@ant-design/icons'
+import {useFlowStore} from '../store/FlowStore.ts'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
@@ -122,6 +124,16 @@ type AmisNodeProps = {
   columnSchema?: (props: ColumnsSchemaProps) => Schema[]
 }
 
+const AmisNodeContainerDiv = styled.div`
+    .ant-card {
+        .ant-card-actions {
+            & > li {
+                margin: 0;
+            }
+        }
+    }
+`
+
 const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
   nodeProps,
   type,
@@ -131,88 +143,84 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
   handlers,
   columnSchema,
 }) => {
-  // const {
-  //   removeNode,
-  //   getNodes,
-  //   getEdges
-  // } = useFlowStore()
+  const {
+    removeNode,
+    getNodes,
+    getEdges,
+  } = useFlowStore()
   const {getDataById} = useDataStore()
 
   const {id, data} = nodeProps
   const {editNode} = data
   // @ts-ignore
-  const nodeData = useMemo(() => {
-    return getDataById(id)
-  }, [id])
+  const nodeData = getDataById(id)
   const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
   const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
   return (
-    <div className="w-64">
-      {/* className="card-container"
-        trigger={['contextMenu']}
-        menu={{
-          items: [
-            {
-              key: 'edit',
-              label: '编辑',
-              icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
-            },
-            {
-              key: 'remove',
-              label: '删除',
-              icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
-            },
-          ],
-          onClick: menu => {
-            switch (menu.key) {
-              case 'edit':
-                // @ts-ignore
-                editNode(
-                  id,
-                  [
-                    {
-                      type: 'input-text',
-                      name: 'node.name',
-                      label: '节点名称',
-                      placeholder: nodeName,
-                    },
-                    {
-                      type: 'textarea',
-                      name: 'node.description',
-                      label: '节点描述',
-                      placeholder: nodeDescription,
-                    },
-                    {
-                      type: 'divider',
-                    },
-                    ...(
-                      columnSchema?.({
-                        // @ts-ignore
-                        // getInputSchema,
-                        nodeId: id,
-                        nodeData,
-                        // @ts-ignore
-                        getNodes,
-                        // @ts-ignore
-                        getEdges,
-                      }) ?? []
-                    ),
-                  ],
-                )
-                break
-              case 'remove':
-                // @ts-ignore
-                removeNode(id)
-                break
-            }
-          },
-        }}
-      >*/}
+    <AmisNodeContainerDiv className="w-64">
       <Card
         className="node-card"
         title={nodeName}
         extra={<span className="text-gray-300 text-xs">{id}</span>}
         size="small"
+        actions={[
+          <Button
+            className="text-secondary"
+            disabled
+            type="text"
+            size="small"
+            icon={<CopyFilled/>}
+            block
+          />,
+          <Button
+            className="text-secondary"
+            type="text"
+            size="small"
+            icon={<EditFilled/>}
+            block
+            // @ts-ignore
+            onClick={() => editNode(
+              id,
+              [
+                {
+                  type: 'input-text',
+                  name: 'node.name',
+                  label: '节点名称',
+                  placeholder: nodeName,
+                },
+                {
+                  type: 'textarea',
+                  name: 'node.description',
+                  label: '节点描述',
+                  placeholder: nodeDescription,
+                },
+                {
+                  type: 'divider',
+                },
+                ...(
+                  columnSchema?.({
+                    // @ts-ignore
+                    // getInputSchema,
+                    nodeId: id,
+                    nodeData,
+                    // @ts-ignore
+                    getNodes,
+                    // @ts-ignore
+                    getEdges,
+                  }) ?? []
+                ),
+              ],
+            )}
+          />,
+          <Button
+            className="text-secondary"
+            type="text"
+            size="small"
+            icon={<DeleteFilled/>}
+            block
+            onClick={() => removeNode(id)}
+          />,
+        ]}
       >
         <div className="card-description p-2 text-secondary text-sm">
           {nodeDescription}
@@ -227,7 +235,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
             ? <Handle type="target" position={Position.Left} id="target"/> : undefined}
         </>
         : handlers?.(nodeData)}
-    </div>
+    </AmisNodeContainerDiv>
   )
 }
 

service-web/client/src/components/flow/store/DataStore.ts

@@ -12,7 +12,7 @@ export const useDataStore = create<DataStoreState>((set, get) => ({
   data: {},
   getData: () => get().data,
   setData: (data) => set({
-    data: data
+    data: data,
   }),
   getDataById: id => get().data[id],
   setDataById: (id, data) => {