feat(web): 优化节点展现

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

@@ -8,11 +8,7 @@ import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
 import {commonInfo} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
-import CodeNode from './node/CodeNode.tsx'
+import NodeRegistry from './NodeRegistry.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 {useContextStore} from './store/ContextStore.ts'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
@@ -52,46 +48,6 @@ const FlowableDiv = styled.div`
     }
 `
 
-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: '分支节点',
-    description: '根据不同的情况前往不同的分支',
-    component: SwitchNode,
-  },
-}
-
 export type GraphData = { nodes: Node[], edges: Edge[], data: any }
 
 export type FlowEditorProps = {
@@ -139,7 +95,7 @@ function FlowEditor(props: FlowEditorProps) {
       <Space className="toolbar">
         <Dropdown
           menu={{
-            items: Object.keys(nodeDefine).map(key => ({key: key, label: nodeDefine[key]!.name})),
+            items: Object.keys(NodeRegistry).map(key => ({key: key, label: NodeRegistry[key]!.name})),
             onClick: ({key}) => {
               try {
                 if (commonInfo.debug) {
@@ -148,7 +104,7 @@ function FlowEditor(props: FlowEditorProps) {
                 checkAddNode(key, nodes, edges)
 
                 let nodeId = randomId(10, 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM')
-                let define = nodeDefine[key]
+                let define = NodeRegistry[key]
 
                 setDataById(
                   nodeId,
@@ -222,7 +178,7 @@ function FlowEditor(props: FlowEditorProps) {
           }
         }}
         // @ts-ignore
-        nodeTypes={arrToMap(Object.keys(nodeDefine), key => nodeDefine[key]!.component)}
+        nodeTypes={arrToMap(Object.keys(NodeRegistry), key => NodeRegistry[key]!.component)}
       >
         <Controls/>
         <MiniMap/>

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

@@ -0,0 +1,41 @@
+import CodeNode from './node/CodeNode.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'
+
+type NodeDefine = {
+  name: string,
+  description: string,
+  component: any,
+}
+
+const NodeRegistry: Record<string, NodeDefine> = {
+  'output-node': {
+    name: '输出',
+    description: '定义输出变量',
+    component: OutputNode,
+  },
+  'llm-node': {
+    name: '大模型',
+    description: '使用大模型对话',
+    component: LlmNode,
+  },
+  'knowledge-node': {
+    name: '知识库',
+    description: '',
+    component: KnowledgeNode,
+  },
+  'code-node': {
+    name: '代码执行',
+    description: '执行自定义的处理代码',
+    component: CodeNode,
+  },
+  'switch-node': {
+    name: '分支节点',
+    description: '根据不同的情况前往不同的分支',
+    component: SwitchNode,
+  },
+}
+
+export default NodeRegistry

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

@@ -1,15 +1,24 @@
 import type {NodeProps} from '@xyflow/react'
+import {Tag} from 'antd'
 import React, {useCallback, useEffect} from 'react'
 import {useContextStore} from '../store/ContextStore.ts'
 import {useDataStore} from '../store/DataStore.ts'
 import {useFlowStore} from '../store/FlowStore.ts'
 import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
 
+const languageMap: Record<string, string> = {
+  'javascript': 'Javascript',
+  'python': 'Python',
+  'Lua': 'lua',
+}
+
 const CodeNode = (props: NodeProps) => {
   const {getNodes, getEdges} = useFlowStore()
-  const {getData, mergeDataById} = useDataStore()
+  const {getData, mergeDataById, getDataById} = useDataStore()
   const {getInputSchema} = useContextStore()
 
+  const nodeData = getDataById(props.id)
+
   useEffect(() => {
     mergeDataById(
       props.id,
@@ -33,20 +42,8 @@ const CodeNode = (props: NodeProps) => {
       name: 'type',
       label: '代码类型',
       required: true,
-      options: [
+      selectFirst: true,
-        {
+      options: Object.keys(languageMap).map(key => ({label: languageMap[key], value: key})),
-          value: 'javascript',
-          label: 'JavaScript',
-        },
-        {
-          value: 'python',
-          label: 'Python',
-        },
-        {
-          value: 'lua',
-          label: 'Lua',
-        },
-      ],
     },
     {
       type: 'editor',
@@ -66,6 +63,14 @@ const CodeNode = (props: NodeProps) => {
   return (
     <AmisNode
       nodeProps={props}
+      extraNodeDescription={
+        nodeData?.type
+          ? <div className="mt-2 flex justify-between">
+            <span>代码类型</span>
+            <Tag className="m-0" color="blue">{languageMap[nodeData.type]}</Tag>
+          </div>
+          : <></>
+      }
       columnSchema={columnsSchema}
       handler={<NormalNodeHandler/>}
     />

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

@@ -61,7 +61,7 @@ const LlmNode = (props: NodeProps) => {
       extraNodeDescription={
         nodeData?.model
           ? <div className="mt-2 flex justify-between">
-            <span>大模型</span>
+            <span>模型名称</span>
             <Tag className="m-0" color="blue">{modelMap[nodeData.model]}</Tag>
           </div>
           : <></>