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

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

@@ -25,6 +25,7 @@ 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%;
@@ -66,6 +67,7 @@ const FlowableDiv = styled.div`
 export type GraphData = { nodes: Node[], edges: Edge[], data: any }
 
 export type FlowEditorProps = {
+  // inputSchema: Record<string, Record<string, any>>,
   graphData: GraphData,
   onGraphDataChange: (graphData: GraphData) => void,
 }
@@ -106,18 +108,38 @@ function FlowEditor(props: FlowEditorProps) {
   ])
   const [open, setOpen] = useState(false)
 
-  const {data, setData, getDataById, setDataById} = useDataStore()
+  const {data, setData, getDataById, setDataById} = useDataStore(
+    useShallow(state => ({
+      data: state.data,
+      setData: state.setData,
+      getDataById: state.getDataById,
+      setDataById: state.setDataById,
+    }))
+  )
   const {
     nodes,
     addNode,
-    removeNode,
     setNodes,
     onNodesChange,
     edges,
     setEdges,
     onEdgesChange,
     onConnect,
-  } = useFlowStore()
+  } = useFlowStore(
+    useShallow(state => ({
+      nodes: state.nodes,
+      getNodes: state.getNodes,
+      addNode: state.addNode,
+      removeNode: state.removeNode,
+      setNodes: state.setNodes,
+      onNodesChange: state.onNodesChange,
+      edges: state.edges,
+      getEdges: state.getEdges,
+      setEdges: state.setEdges,
+      onEdgesChange: state.onEdgesChange,
+      onConnect: state.onConnect,
+    }))
+  )
 
   const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
   const editNode = (id: string, columnSchema?: Schema[]) => {
@@ -197,10 +219,8 @@ function FlowEditor(props: FlowEditorProps) {
 
   // 用于透传node操作到主流程
   const initialNodeHandlers = {
-    getDataById,
-    setDataById,
-    removeNode,
-    editNode,
+    // getInputSchema: () => props.inputSchema,
+    editNode
   }
 
   useEffect(() => {