feat(web): 尝试优化流程图性能

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

@@ -1,27 +1,36 @@
-import {DeleteFilled, EditFilled} from '@ant-design/icons'
-import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
+import {
+  type Edge,
+  Handle,
+  type HandleProps,
+  type Node,
+  type NodeProps,
+  Position,
+  useNodeConnections
+} from '@xyflow/react'
 import type {Schema} from 'amis'
-import {Card, Dropdown} from 'antd'
+import {Button, Card} from 'antd'
 import {isEmpty, isEqual, isNil} from 'licia'
-import {type JSX} from 'react'
+import {type JSX, useMemo} from 'react'
 import {horizontalFormOptions} from '../../../util/amis.tsx'
+import {useDataStore} from '../store/DataStore.ts'
+import {EditFilled} from '@ant-design/icons'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
-export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
+export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
+  console.log('props', props)
+
   return [
     {
       type: 'input-kvs',
       name: 'inputs',
       label: '输入变量',
-      value: preload,
       addButtonText: '新增输入',
       draggable: false,
       keyItem: {
         ...horizontalFormOptions(),
         label: '参数名称',
       },
-      required: required,
       valueItems: [
         {
           ...horizontalFormOptions(),
@@ -95,6 +104,14 @@ export const LimitHandler = (props: HandleProps & { limit: number }) => {
   )
 }
 
+type ColumnsSchemaProps = {
+  // getInputSchema: () => Record<string, Record<string, any>>,
+  nodeId: string,
+  nodeData: any,
+  getNodes: () => Node[],
+  getEdges: () => Edge[],
+}
+
 type AmisNodeProps = {
   nodeProps: NodeProps
   type: AmisNodeType
@@ -102,7 +119,7 @@ type AmisNodeProps = {
   defaultNodeDescription?: String
   extraNodeDescription?: (nodeData: any) => JSX.Element
   handlers?: (nodeData: any) => JSX.Element
-  columnSchema?: Schema[]
+  columnSchema?: (props: ColumnsSchemaProps) => Schema[]
 }
 
 const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
@@ -114,16 +131,24 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
   handlers,
   columnSchema,
 }) => {
+  // const {
+  //   removeNode,
+  //   getNodes,
+  //   getEdges
+  // } = useFlowStore()
+  const {getDataById} = useDataStore()
+
   const {id, data} = nodeProps
-  const {getDataById, removeNode, editNode} = data
+  const {editNode} = data
   // @ts-ignore
-  const nodeData = getDataById(id)
+  const nodeData = useMemo(() => {
+    return getDataById(id)
+  }, [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">
-      <Dropdown
-        className="card-container"
+      {/* className="card-container"
         trigger={['contextMenu']}
         menu={{
           items: [
@@ -160,7 +185,18 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
                     {
                       type: 'divider',
                     },
-                    ...(columnSchema ?? []),
+                    ...(
+                      columnSchema?.({
+                        // @ts-ignore
+                        // getInputSchema,
+                        nodeId: id,
+                        nodeData,
+                        // @ts-ignore
+                        getNodes,
+                        // @ts-ignore
+                        getEdges,
+                      }) ?? []
+                    ),
                   ],
                 )
                 break
@@ -171,19 +207,18 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
             }
           },
         }}
+      >*/}
+      <Card
+        className="node-card"
+        title={nodeName}
+        extra={<span className="text-gray-300 text-xs">{id}</span>}
+        size="small"
       >
-        <Card
-          className="node-card"
-          title={nodeName}
-          extra={<span className="text-gray-300 text-xs">{id}</span>}
-          size="small"
-        >
-          <div className="card-description p-2 text-secondary text-sm">
-            {nodeDescription}
-            {extraNodeDescription?.(nodeData)}
-          </div>
-        </Card>
-      </Dropdown>
+        <div className="card-description p-2 text-secondary text-sm">
+          {nodeDescription}
+          {extraNodeDescription?.(nodeData)}
+        </div>
+      </Card>
       {isNil(handlers)
         ? <>
           {isEqual(type, 'start') || isEqual(type, 'normal')

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

@@ -7,8 +7,8 @@ const CodeNode = (props: NodeProps) => AmisNode({
   type: 'normal',
   defaultNodeName: '代码执行',
   defaultNodeDescription: '执行自定义的处理代码',
-  columnSchema: [
-    ...inputsFormColumns(),
+  columnSchema: (props) => [
+    ...inputsFormColumns(props),
     {
       type: 'divider',
     },

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

@@ -8,8 +8,8 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
   type: 'normal',
   defaultNodeName: '知识库',
   defaultNodeDescription: '查询知识库获取外部知识',
-  columnSchema: [
-    ...inputsFormColumns(),
+  columnSchema: (props) => [
+    ...inputsFormColumns(props),
     {
       type: 'divider',
     },

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

@@ -22,8 +22,8 @@ const LlmNode = (props: NodeProps) => AmisNode({
       </div>
       : <></>
   },
-  columnSchema: [
-    ...inputsFormColumns(),
+  columnSchema: (props) => [
+    ...inputsFormColumns(props),
     {
       type: 'divider',
     },

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

@@ -7,7 +7,7 @@ const OutputNode = (props: NodeProps) => AmisNode({
   type: 'end',
   defaultNodeName: '输出节点',
   defaultNodeDescription: '定义输出变量',
-  columnSchema: outputsFormColumns(true),
+  columnSchema: () => outputsFormColumns(true),
 })
 
 export default React.memo(OutputNode)

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

@@ -20,7 +20,7 @@ const SwitchNode = (props: NodeProps) => AmisNode({
   type: 'normal',
   defaultNodeName: '分支节点',
   defaultNodeDescription: '根据不同的情况前往不同的分支',
-  columnSchema: [],
+  columnSchema: () => [],
   // @ts-ignore
   extraNodeDescription: nodeData => {
     return (