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

2025-07-06 22:39:26 +08:00
parent 187c565da4
commit 03d0d9d85b
10 changed files with 110 additions and 44 deletions
--- a/service-web/client/src/components/flow/FlowEditor.tsx
+++ b/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(() => {
--- a/service-web/client/src/components/flow/node/AmisNode.tsx
+++ b/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')
--- a/service-web/client/src/components/flow/node/CodeNode.tsx
+++ b/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',
    },
--- a/service-web/client/src/components/flow/node/KnowledgeNode.tsx
+++ b/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',
    },
--- a/service-web/client/src/components/flow/node/LlmNode.tsx
+++ b/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',
    },
--- a/service-web/client/src/components/flow/node/OutputNode.tsx
+++ b/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)
--- a/service-web/client/src/components/flow/node/SwitchNode.tsx
+++ b/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 (
--- a/service-web/client/src/components/flow/store/DataStore.ts
+++ b/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({
--- a/service-web/client/src/components/flow/store/FlowStore.ts
+++ b/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),
--- a/service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx
+++ b/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(