feat(web): 优化节点展现

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: [
-        {
-          value: 'javascript',
-          label: 'JavaScript',
-        },
-        {
-          value: 'python',
-          label: 'Python',
-        },
-        {
-          value: 'lua',
-          label: 'Lua',
-        },
-      ],
+      selectFirst: true,
+      options: Object.keys(languageMap).map(key => ({label: languageMap[key], value: key})),
     },
     {
       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>
           : <></>