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,
+    // getInputSchema: () => props.inputSchema,
-    setDataById,
+    editNode
-    removeNode,
-    editNode,
   }
 
   useEffect(() => {

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

@@ -1,27 +1,36 @@
-import {DeleteFilled, EditFilled} from '@ant-design/icons'
+import {
-import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
+  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
+        <div className="card-description p-2 text-secondary text-sm">
-          className="node-card"
+          {nodeDescription}
-          title={nodeName}
+          {extraNodeDescription?.(nodeData)}
-          extra={<span className="text-gray-300 text-xs">{id}</span>}
+        </div>
-          size="small"
+      </Card>
-        >
-          <div className="card-description p-2 text-secondary text-sm">
-            {nodeDescription}
-            {extraNodeDescription?.(nodeData)}
-          </div>
-        </Card>
-      </Dropdown>
       {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: [
+  columnSchema: (props) => [
-    ...inputsFormColumns(),
+    ...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: [
+  columnSchema: (props) => [
-    ...inputsFormColumns(),
+    ...inputsFormColumns(props),
     {
       type: 'divider',
     },

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

@@ -22,8 +22,8 @@ const LlmNode = (props: NodeProps) => AmisNode({
       </div>
       : <></>
   },
-  columnSchema: [
+  columnSchema: (props) => [
-    ...inputsFormColumns(),
+    ...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 (

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

@@ -1,12 +1,14 @@
 import {create} from 'zustand/react'
 
-export const useDataStore = create<{
+export type DataStoreState = {
   data: Record<string, any>,
   getData: () => Record<string, any>,
   setData: (data: Record<string, any>) => void,
   getDataById: (id: string) => any,
   setDataById: (id: string, data: any) => void,
-}>((set, get) => ({
+}
+
+export const useDataStore = create<DataStoreState>((set, get) => ({
   data: {},
   getData: () => get().data,
   setData: (data) => set({

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

@@ -11,8 +11,9 @@ import {
 import {filter, find, isEqual} from 'licia'
 import {create} from 'zustand/react'
 
-export const useFlowStore = create<{
+export type FlowStoreState = {
   nodes: Node[],
+  getNodes: () => Node[],
   onNodesChange: OnNodesChange,
   getNodeById: (id: string) => Node | undefined,
   addNode: (node: Node) => void,
@@ -20,12 +21,16 @@ export const useFlowStore = create<{
   setNodes: (nodes: Node[]) => void,
 
   edges: Edge[],
+  getEdges: () => Edge[],
   onEdgesChange: OnEdgesChange,
   setEdges: (edges: Edge[]) => void,
 
   onConnect: OnConnect,
-}>((set, get) => ({
+}
+
+export const useFlowStore = create<FlowStoreState>((set, get) => ({
   nodes: [],
+  getNodes: () => get().nodes,
   onNodesChange: changes => {
     set({
       nodes: applyNodeChanges(changes, get().nodes),
@@ -41,6 +46,7 @@ export const useFlowStore = create<{
   setNodes: nodes => set({nodes}),
 
   edges: [],
+  getEdges: () => get().edges,
   onEdgesChange: changes => {
     set({
       edges: applyEdgeChanges(changes, get().edges),

service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx

@@ -12,6 +12,7 @@ const FlowTaskTemplateFlowEditDiv = styled.div`
 const FlowTaskTemplateFlowEdit: React.FC = () => {
   const navigate = useNavigate()
   const {template_id} = useParams()
+  // const [inputSchema, setInputSchema] = useState<Record<string, Record<string, any>>>({})
   const [graphData, setGraphData] = useState<GraphData>({nodes: [], edges: [], data: {}})
 
   useMount(async () => {
@@ -21,12 +22,14 @@ const FlowTaskTemplateFlowEdit: React.FC = () => {
         headers: commonInfo.authorizationHeaders
       }
     )
+    // setInputSchema(data?.data?.inputSchema)
     setGraphData(data?.data?.flowGraph)
   })
 
   return (
     <FlowTaskTemplateFlowEditDiv className="h-full w-full">
       <FlowEditor
+        // inputSchema={inputSchema}
         graphData={graphData}
         onGraphDataChange={async data => {
           await axios.post(