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

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>
   )
 }