From a61bd8abfb6bedacccbc1f1cdb01e4f433e58fd7 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期一, 24 二月 2025 11:32:15 +0800 Subject: [PATCH] start bug;重复导入文件bug --- src/components/vue-flow/MainCanvas.vue | 118 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 87 insertions(+), 31 deletions(-) diff --git a/src/components/vue-flow/MainCanvas.vue b/src/components/vue-flow/MainCanvas.vue index d105774..64db7c1 100644 --- a/src/components/vue-flow/MainCanvas.vue +++ b/src/components/vue-flow/MainCanvas.vue @@ -1,24 +1,54 @@ <template> <div class="relative h-full w-full" id="main-canvas" @drop="handleOnDrop" @dragover="handleOnDragOver"> <VueFlow v-model="elements" :node-types="nodeTypes" :connection-mode="ConnectionMode.Strict"> + <template #node-start="startNodeProps"> + <StartNode ref="nodeRef" v-bind="startNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(startNodeProps.id, ref)" /> + </template> + <template #node-condition="conditionNodeProps"> + <ConditionNode ref="nodeRef" v-bind="conditionNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(conditionNodeProps.id, ref)" /> + </template> + <template #node-output_msg="outputNodeProps"> + <OutputNode ref="nodeRef" v-bind="outputNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(outputNodeProps.id, ref)" /> + </template> + + <template #node-end="endNodeProps"> + <EndNode ref="nodeRef" v-bind="endNodeProps" :isViewMode="isViewMode" /> + </template> + <template #edge-custom="customEdgeProps"> - <CustomEdge v-bind="customEdgeProps" /> + <CustomEdge v-bind="customEdgeProps" :isViewMode="isViewMode" /> </template> <template #node-agent="agentNodeProps"> - <AgentNode v-bind="agentNodeProps" :agentNames="agentNames" /> + <AgentNode ref="nodeRef" v-bind="agentNodeProps" :agentNames="agentNames" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(agentNodeProps.id, ref)" /> </template> <template #node-func="funcNodeProps"> - <FuncNode v-bind="funcNodeProps" :funcNames="funcNames" /> + <FuncNode ref="nodeRef" v-bind="funcNodeProps" :funcNames="funcNames" :isViewMode="isViewMode" /> </template> <template #node-code="codeNodeProps"> - <CodeNode v-bind="codeNodeProps" /> + <CodeNode ref="nodeRef" v-bind="codeNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(codeNodeProps.id, ref)" /> + </template> + <template #node-python_code="pythonCodeNodeProps"> + <PythonCodeNode ref="nodeRef" v-bind="pythonCodeNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(pythonCodeNodeProps.id, ref)" /> </template> <template #node-text_resource="textResourceNodeProps"> - <TextResourceNode v-bind="textResourceNodeProps" /> + <TextResourceNode ref="nodeRef" v-bind="textResourceNodeProps" :isViewMode="isViewMode" @register="(ref) => registerNodeRef(textResourceNodeProps.id, ref)" /> </template> - <Controls /> + + <template #node-analysis="analysisNodeProps"> + <AnalysisNode ref="nodeRef" v-bind="analysisNodeProps" :llmInfoList="llmInfoList" :isViewMode="isViewMode" /> + </template> + + <template #node-LLM="llmNodeProps"> + <LLMNode + v-bind="llmNodeProps" + :llmInfoList="llmInfoList" + :isViewMode="isViewMode" + @register="(ref) => registerNodeRef(llmNodeProps.id, ref)" + /> + </template> + <Controls :showInteractive="false" /> <Background /> <MiniMap pannable zoomable /> </VueFlow> @@ -30,46 +60,46 @@ import { Controls } from '@vue-flow/controls'; import { MiniMap } from '@vue-flow/minimap'; -import type { Dimensions, Elements } from '@vue-flow/core'; +import type { Dimensions, Elements, FlowProps } from '@vue-flow/core'; import { ConnectionMode, MarkerType, useVueFlow, VueFlow } from '@vue-flow/core'; -import { markRaw, nextTick, ref, watch } from 'vue'; +import { nextTick, onMounted, ref, watch } from 'vue'; import { Test_data } from './testData'; +import CustomEdge from './ui/edges/CustomEdge.vue'; import AgentNode from './ui/nodes/AgentNode.vue'; +import AnalysisNode from './ui/nodes/AnalysisNode.vue'; import CodeNode from './ui/nodes/CodeNode.vue'; import ConditionNode from './ui/nodes/ConditionNode.vue'; import EndNode from './ui/nodes/EndNode.vue'; import FuncNode from './ui/nodes/FuncNode.vue'; import LLMNode from './ui/nodes/LLMNode.vue'; import OutputNode from './ui/nodes/OutputNode.vue'; +import PythonCodeNode from './ui/nodes/PythonCodeNode.vue'; import StartNode from './ui/nodes/StartNode.vue'; +import TextResourceNode from './ui/nodes/TextResourceNode.vue'; import { NodeType, nodeTypeMap } from './vueFlowEnum'; import { VueFlowHelper } from './VueFlowHelper'; -import TextResourceNode from './ui/nodes/TextResourceNode.vue'; -import { onMounted } from 'vue'; -import CustomEdge from './ui/edges/CustomEdge.vue'; -import AnalysisNode from './ui/nodes/AnalysisNode.vue'; -const props = defineProps(['flowJson', 'agentNames', 'funcNames']); +const props = defineProps(['flowJson', 'agentNames', 'funcNames', 'llmInfoList', 'isViewMode']); -const nodeTypes = { - start: markRaw(StartNode), - end: markRaw(EndNode), - condition: markRaw(ConditionNode), - LLM: markRaw(LLMNode), - // output:markRaw(OutputNode), - // agent: markRaw(AgentNode), - [NodeType.Output]: markRaw(OutputNode), - // LLM: markRaw(LLMNode), - // code: markRaw(CodeNode), - // knowledge: markRaw(KnowledgeNode), - // api: markRaw(ApiNode), - [NodeType.Analysis]: markRaw(AnalysisNode), -}; +const nodeTypes = {}; const elements = ref<Elements>(); -const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport, fitView } = useVueFlow( +const { + findNode, + nodes, + addNodes, + addEdges, + project, + vueFlowRef, + onConnect, + setNodes, + setEdges, + setViewport, + fitView, + setInteractive, +} = useVueFlow( Object.keys(props.flowJson).length > 0 ? props.flowJson - : { + : ({ nodes: [ { id: '1', @@ -80,7 +110,7 @@ }, ], edges: [], - } + } as FlowProps) ); onConnect((params) => { @@ -101,10 +131,14 @@ // addEdges()); }); +const initFlowStatus = () => { + fitView(); + setInteractive(!props.isViewMode); +}; onMounted(() => { setTimeout(() => { - fitView(); + initFlowStatus(); }, 30); }); @@ -160,6 +194,28 @@ event.dataTransfer.dropEffect = 'move'; } } + +const nodeRefs = ref(new Map()); + +const registerNodeRef = (nodeId: string, ref: any) => { + nodeRefs.value.set(nodeId, ref); +}; + +const validateForm = async () => { + const validPromises = []; + for (const nodeRef of nodeRefs.value.values()) { + if (nodeRef?.validateForm) { + validPromises.push(nodeRef.validateForm()); + } + } + + const results = await Promise.all(validPromises); + return results; +}; + +defineExpose({ + validateForm, +}); </script> <style lang="scss"> @import '@vue-flow/core/dist/style.css'; -- Gitblit v1.9.3