From b45a79dd5c484199a4a27081e9384aa058c6f0b6 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 5 Mar 2026 11:52:06 +0800
Subject: [PATCH] fix

---
 src/components/Canvas/CanvasTest.vue          |  2 +-
 .../Canvas/FlowCanvas/flow-canvas.vue         | 15 ++++++-
 .../Canvas/FlowCanvas/manager/NodeManager.ts  | 10 +++--
 src/utils/treeDiagram.js                      | 42 +++++++++++--------
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/components/Canvas/CanvasTest.vue b/src/components/Canvas/CanvasTest.vue
index 8a338b4..17817df 100644
--- a/src/components/Canvas/CanvasTest.vue
+++ b/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,
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 7c0fc44..8127eab 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/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">
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index a059f20..3e39bc3 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/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 || {}
@@ -100,18 +102,18 @@ export class NodeManager {
 		}
 		return this.createNode(options_)
 	}
-	
+
 	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
diff --git a/src/utils/treeDiagram.js b/src/utils/treeDiagram.js
index e1f26ff..ff6586a 100644
--- a/src/utils/treeDiagram.js
+++ b/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
 
@@ -47,7 +53,7 @@ export function useLayout() {
 		}
 
 		dagre.layout(dagreGraph)
-		
+
 		// set nodes with updated positions
 		return nodes.map((node) => {
 			const nodeWithPosition = dagreGraph.node(node.id)
@@ -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]
-	  
-	  // 如果找到目标节点，从当前数组中删除
-	  if (item.id === targetId) {
-		items.splice(i, 1)
-		return true
-	  }
-	  
-	  // 递归搜索子节点
-	  if (item.children && item.children.length > 0) {
-		const found = findAndRemoveChild(item.children, targetId)
-		if (found) return true
-	  }
+		const item = items[i]
+
+		// 如果找到目标节点，从当前数组中删除
+		if (item.id === targetId) {
+			items.splice(i, 1)
+			return true
+		}
+
+		// 递归搜索子节点
+		if (item.children && item.children.length > 0) {
+			const found = findAndRemoveChild(item.children, targetId)
+			if (found) return true
+		}
 	}
-	
+
 	return false
-  }
\ No newline at end of file
+}
\ No newline at end of file