diff --git a/service-web/client/src/components/flow/FlowEditor.tsx b/service-web/client/src/components/flow/FlowEditor.tsx index 3192049..9668c73 100644 --- a/service-web/client/src/components/flow/FlowEditor.tsx +++ b/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 KnowledgeNode from './node/KnowledgeNode.tsx' -import LlmNode from './node/LlmNode.tsx' -import OutputNode from './node/OutputNode.tsx' -import SwitchNode from './node/SwitchNode.tsx' +import NodeRegistry from './NodeRegistry.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 = { - '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) { ({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)} > diff --git a/service-web/client/src/components/flow/NodeRegistry.tsx b/service-web/client/src/components/flow/NodeRegistry.tsx new file mode 100644 index 0000000..536afd4 --- /dev/null +++ b/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 = { + '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 diff --git a/service-web/client/src/components/flow/node/CodeNode.tsx b/service-web/client/src/components/flow/node/CodeNode.tsx index 3c74b82..18186cb 100644 --- a/service-web/client/src/components/flow/node/CodeNode.tsx +++ b/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 = { + '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 ( + 代码类型 + {languageMap[nodeData.type]} + + : <> + } columnSchema={columnsSchema} handler={} /> diff --git a/service-web/client/src/components/flow/node/LlmNode.tsx b/service-web/client/src/components/flow/node/LlmNode.tsx index e0677e7..05d853e 100644 --- a/service-web/client/src/components/flow/node/LlmNode.tsx +++ b/service-web/client/src/components/flow/node/LlmNode.tsx @@ -61,7 +61,7 @@ const LlmNode = (props: NodeProps) => { extraNodeDescription={ nodeData?.model ?
- 大模型 + 模型名称 {modelMap[nodeData.model]}
: <>