feat(web): 节点描述和名称直接放在节点数据中

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

@@ -1,7 +1,7 @@
 import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
 import {Background, BackgroundVariant, Controls, type Edge, MiniMap, type Node, ReactFlow} from '@xyflow/react'
 import {Button, Dropdown, message, Popconfirm, Space} from 'antd'
-import {arrToMap, find, isEqual, randomId} from 'licia'
+import {arrToMap, randomId} from 'licia'
 import {useEffect} from 'react'
 import {useNavigate} from 'react-router'
 import styled from 'styled-components'
@@ -52,33 +52,45 @@ const FlowableDiv = styled.div`
     }
 `
 
-const nodeDefine = [
-  {
+type NodeDefine = {
+  key: string,
+  name: string,
+  description: string,
+  component: any,
+}
+
+const nodeDefine: Record<string, NodeDefine> = {
+  'output-node': {
     key: 'output-node',
     name: '输出',
+    description: '定义输出变量',
     component: OutputNode,
   },
-  {
+  'llm-node': {
     key: 'llm-node',
     name: '大模型',
+    description: '使用大模型对话',
     component: LlmNode,
   },
-  {
+  'knowledge-node': {
     key: 'knowledge-node',
     name: '知识库',
+    description: '',
     component: KnowledgeNode,
   },
-  {
+  'code-node': {
     key: 'code-node',
     name: '代码执行',
+    description: '执行自定义的处理代码',
     component: CodeNode,
   },
-  {
+  'switch-node': {
     key: 'switch-node',
-    name: '条件分支',
+    name: '分支节点',
+    description: '根据不同的情况前往不同的分支',
     component: SwitchNode,
   },
-]
+}
 
 export type GraphData = { nodes: Node[], edges: Edge[], data: any }
 
@@ -92,7 +104,7 @@ function FlowEditor(props: FlowEditorProps) {
   const navigate = useNavigate()
   const [messageApi, contextHolder] = message.useMessage()
 
-  const {data, setData} = useDataStore()
+  const {data, setData, setDataById} = useDataStore()
   const {
     nodes,
     addNode,
@@ -127,15 +139,29 @@ function FlowEditor(props: FlowEditorProps) {
       <Space className="toolbar">
         <Dropdown
           menu={{
-            items: nodeDefine.map(def => ({key: def.key, label: def.name})),
+            items: Object.keys(nodeDefine).map(key => ({key: key, label: nodeDefine[key]!.name})),
             onClick: ({key}) => {
               try {
                 if (commonInfo.debug) {
                   console.info('Add', key, JSON.stringify({nodes, edges, data}))
                 }
                 checkAddNode(key, nodes, edges)
+
+                let nodeId = randomId(10, 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM')
+                let define = nodeDefine[key]
+
+                setDataById(
+                  nodeId,
+                  {
+                    node: {
+                      name: define.name,
+                      description: define.description,
+                    },
+                  },
+                )
+
                 addNode({
-                  id: randomId(10),
+                  id: nodeId,
                   type: key,
                   position: {x: 100, y: 100},
                   data: {},
@@ -196,10 +222,7 @@ function FlowEditor(props: FlowEditorProps) {
           }
         }}
         // @ts-ignore
-        nodeTypes={arrToMap(
-          nodeDefine.map(def => def.key),
-          key => find(nodeDefine, def => isEqual(key, def.key))!.component)
-        }
+        nodeTypes={arrToMap(Object.keys(nodeDefine), key => nodeDefine[key]!.component)}
       >
         <Controls/>
         <MiniMap/>