画布页面使用vueflow

src/views/canvas/components/node/InputNode.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	}
+}>()
+
+</script>
+
+<template>
+	<div class="node start">
+		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/views/canvas/components/node/secondaryNode.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	},
+}>()
+
+</script>
+<!-- source输入，target输出 -->
+<template>
+	<div class="node">
+		<Handle type="target" style="top: 40px;" id="Left" :position="Position.Left" />
+		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
+		<!-- <Handle type="source" id="Right" :position="Position.Right" />
+		<Handle type="target" id="Left" :position="Position.Left" /> -->
+		<!-- <div>{{ props.data.id }}</div> -->
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.node{
+	.item{
+	}
+}
+</style>

src/views/canvas/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="canvas">
-		<div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
+		<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
 			<div
 				class="canvas-content"
 				:style="{
@@ -18,14 +18,35 @@
 				<card type="add-print" />
 				<card type="edit-material" />
 			</div>
-		</div>
+		</div> -->
+
+		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
+			<template #node-InputNode="nodeProps">
+				<inputNode v-bind="nodeProps" >
+					<template v-slot:content>{{ nodeProps.type }}
+						<card type="to-real-style" />
+					</template> 	
+				</inputNode>
+			</template>
+			<template #node-SecondaryNode="nodeProps">
+				<secondaryNode v-bind="nodeProps" >
+					<template v-slot:content>
+						<card type="scene-composition" />
+					</template> 
+				</secondaryNode>
+			</template>
+		</VueFlow>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
+	import { useLayout } from '@/utils/treeDiagram'
+	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
 	import { useGlobalStore } from '@/stores'
+	import secondaryNode from './components/node/secondaryNode.vue'
+	import inputNode from './components/node/InputNode.vue'
 	const globalStore = useGlobalStore()
 	const data = reactive({
 		x: 100,
@@ -59,11 +80,35 @@
 		if (scale > 10) scale = 10
 		data.scale = scale
 	}
+	const position = { x: 0, y: 0 }
+
+	const nodes = ref<Node[]>([
+		  { id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
+		  { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
+	])
+	const edges = ref<Edge[]>([
+		  { id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
+	])
+	const { fitView } = useVueFlow()
+	const { layout } = useLayout()
+	async function layoutGraph(direction) {
+		setTimeout(() => {
+			nodes.value = layout(nodes.value, edges.value, direction)
+			console.log(nodes.value)
+			nextTick(() => {
+				fitView()
+			})
+		}, 0)
+	}
+
 	onMounted(() => {
 		globalStore.setHomeLeftNavCollapse(true)
 	})
 </script>
-
+<style lang="less">
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+</style>
 <style lang="less" scoped>
 	.canvas {
 		// overflow-y: auto;
@@ -90,5 +135,9 @@
 				transform-origin: top left;
 			}
 		}
+		> .vue-flow{
+			width: 100%;
+			height: 100%;
+		}
 	}
 </style>

src/views/home/agent/components/versionTree/index.vue

@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
 import Tree from './tree/index.vue'
 import Detail from './detail/index.vue'
 // import { versionsList } from './tools/versionsData'
-import { findAndAddChild, findAndRemoveChild } from './tools/tools'
+import { findAndAddChild, findAndRemoveChild } from '../../../../../utils/treeDiagram'
 import { useProjectStore } from '@/stores'
 import { versionTree, getChatNodeDetail } from '@/api/versitonTree'
 

src/views/home/agent/components/versionTree/tree/view2/index.vue

@@ -5,7 +5,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import SpecialEdge from './speciaiEdge.vue'
 import InputNode from './InputNode.vue'//主
 import SecondaryNode from './secondaryNode.vue'//分支
-import { useLayout } from '../../tools/tools'
+import { useLayout } from '@/utils/treeDiagram'
 import dialogVue from "../../components/dialog.vue";
 const props = defineProps({
 	selectItem: {