fix

src/components/Canvas/CanvasTest.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 	import flowCanvas from './FlowCanvas/flow-canvas.vue'
-	import card from './FlowCanvas/components/cards/index.vue'
+	import card from './FlowCanvas/components/nodes/cards/index.vue'
 	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
 	const data = reactive({
 		x: 100,

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -127,7 +127,11 @@
 			stateManager.nodes.value = layout(
 				stateManager.nodes.value,
 				stateManager.edges.value,
-				direction
+				direction,
+				{
+					nodesep: nodeManager.nodesep,
+					ranksep: nodeManager.ranksep
+				}
 			)
 			nextTick(() => {
 				fitView({ maxZoom: 1 })
@@ -187,6 +191,15 @@
 				}
 			}
 		})
+		nodeManager.createResultNode({
+			data: {
+				disableDelete: true,
+				isHeader: false,
+				data: {
+					url: props.config.url
+				}
+			}
+		})
 	})
 </script>
 <style lang="less">

src/components/Canvas/FlowCanvas/manager/NodeManager.ts

@@ -12,6 +12,8 @@ interface NodeOptions {
 export class NodeManager {
 	stateManager: any
 	vueFlow: any
+	nodesep = 100 // 节点间距
+	ranksep = 100 // 层级间距
 	constructor(options) {
 		this.stateManager = options.stateManager;
 		this.vueFlow = options.vueFlow
@@ -37,7 +39,7 @@ export class NodeManager {
 			(!snode ?
 				{ x: positionX, y: positionY } :
 				{
-					x: snode.position.x + snode.dimensions.width + 50 + positionX,
+					x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
 					y: snode.position.y + positionY
 				})
 		const data = options?.data || {}
@@ -104,14 +106,14 @@ export class NodeManager {
 	copyNodeById(id: string) {
 		const node = this.stateManager.getNodeById(id)
 		const flowNode = this.stateManager.flowManager.getNodeById(id)
-		console.log(node,this.stateManager.flowManager.getNodeById(id))
+		console.log(node, this.stateManager.flowManager.getNodeById(id))
 		if (!node) return console.warn(`copyNodeById: ${id}找不到对应节点`)
 		const node_ = {
 			...JSON.parse(JSON.stringify(node)),
 			id: createId(),
 			position: {
 				x: node.position.x,
-				y: node.position.y + (flowNode?.dimensions?.height || 0) + 50,
+				y: node.position.y + (flowNode?.dimensions?.height || 0) + this.ranksep,
 			}
 		}
 		delete node_.data?.superiorID

src/utils/treeDiagram.js

@@ -14,7 +14,9 @@ export function useLayout() {
 
 	const previousDirection = ref('LR')
 
-	function layout(nodes, edges, direction = 'LR') {
+	function layout(nodes, edges, direction = 'LR', options) {
+		const nodesep = options?.nodesep || 50 // 节点间距
+		const ranksep = options?.ranksep || 50 // 层级间距
 		// 验证和规范化方向参数
 		const validDirections = ['TB', 'BT', 'LR', 'RL']
 		const layoutDirection = validDirections.includes(direction) ? direction : 'LR'
@@ -28,7 +30,11 @@ export function useLayout() {
 
 		// 根据方向判断是否为水平布局
 		const isHorizontal = layoutDirection === 'LR' || layoutDirection === 'RL'
-		dagreGraph.setGraph({ rankdir: layoutDirection })
+		dagreGraph.setGraph({
+			rankdir: layoutDirection,
+			nodesep,
+			ranksep,
+		})
 
 		previousDirection.value = layoutDirection
 
@@ -125,20 +131,20 @@ export function findAndAddChild(items, targetId, newChild) {
  */
 export function findAndRemoveChild(items, targetId) {
 	for (let i = 0; i < items.length; i++) {
-	  const item = items[i]
+		const item = items[i]
 
-	  // 如果找到目标节点，从当前数组中删除
+		// 如果找到目标节点，从当前数组中删除
-	  if (item.id === targetId) {
+		if (item.id === targetId) {
-		items.splice(i, 1)
+			items.splice(i, 1)
-		return true
+			return true
-	  }
+		}
 
-	  // 递归搜索子节点
+		// 递归搜索子节点
-	  if (item.children && item.children.length > 0) {
+		if (item.children && item.children.length > 0) {
-		const found = findAndRemoveChild(item.children, targetId)
+			const found = findAndRemoveChild(item.children, targetId)
-		if (found) return true
+			if (found) return true
-	  }
+		}
 	}
 
 	return false
-  }
+}