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/>