From 4037ebe090b37c8e685a32b4e57fedb56cd44ae9 Mon Sep 17 00:00:00 2001
From: zhang zhuo <cfn@leapy.cn>
Date: Wed, 10 Dec 2025 10:04:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |  1 +
 src/assets/icons/AutoLayout.vue          |  3 +++
 src/views/tools/flow/index.vue           |  9 +++++++--
 src/views/tools/flow/menu.vue            | 15 +++++++++++++++
 src/views/tools/flow/model/CustomLine.ts | 13 ++++++-------
 5 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/icons/AutoLayout.vue

diff --git a/package.json b/package.json
index 173084e..8d523c2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@logicflow/core": "^2.2.0-alpha.0",
     "@logicflow/extension": "^2.2.0-alpha.0",
+    "@logicflow/layout": "^2.1.0-alpha.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "1.12.0",
diff --git a/src/assets/icons/AutoLayout.vue b/src/assets/icons/AutoLayout.vue
new file mode 100644
index 0000000..f990388
--- /dev/null
+++ b/src/assets/icons/AutoLayout.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765328920629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8750" width="256" height="256"><path d="M131.3 363.3c-19.2 47.3-28.9 97.3-28.9 148.7 0 51.3 9.7 101.3 28.9 148.7 7 17.2 15.1 33.8 24.3 49.7l15.8-49.1 42.8 13.8-39.8 123.8-42.8-13.9-80.9-26 13.8-42.8 52.3 16.8c-98-168.4-74.8-387.9 69.4-532.1C342.4 44.7 586.9 30.5 759.1 158.3l-32.2 32.2c-25.1-18-52.1-32.9-80.9-44.6-47.3-19.2-97.3-28.9-148.7-28.9-51.3 0-101.3 9.7-148.7 28.9-49 19.9-92.9 49.1-130.6 86.8s-66.9 81.7-86.7 130.6z m828.3-60.2l13.8-42.8-80.9-26-42.8-13.8-39.8 123.8 42.8 13.8 15-46.7c9.8 16.6 18.4 34 25.8 52.1 19.2 47.3 28.9 97.3 28.9 148.7 0 51.3-9.7 101.3-28.9 148.7-19.9 49-49.1 92.9-86.8 130.6C768.9 829 725 858.2 676 878.1c-47.3 19.2-97.3 28.9-148.7 28.9-51.3 0-101.3-9.7-148.7-28.9-28.8-11.7-55.9-26.6-80.9-44.6l-32.2 32.2c126.3 93.7 382.6 147.7 572.9-42.6 145.8-145.8 167.9-368.6 66.1-537.7l55.1 17.7zM474 241.2L295 730.4h64.8l50.5-148.2h195.3l54 148.2h70.3L539.6 241.2H474z m-45.9 288.3L479.8 386c11-30.9 19.4-62.1 25.4-93.4 6.9 26 17.9 59.9 32.8 101.5l48.2 135.5H428.1z" p-id="8751"></path></svg>
+</template>
diff --git a/src/views/tools/flow/index.vue b/src/views/tools/flow/index.vue
index 6c11521..6c8befc 100644
--- a/src/views/tools/flow/index.vue
+++ b/src/views/tools/flow/index.vue
@@ -10,7 +10,8 @@
 <script setup>
 import {ref, onMounted, onUnmounted} from "vue"
 import LogicFlow from "@logicflow/core"
-import {MiniMap, Snapshot} from "@logicflow/extension"
+import {MiniMap, Snapshot, ProximityConnect} from "@logicflow/extension"
+import {Dagre} from "@logicflow/layout";
 import "@logicflow/core/lib/style/index.css"
 import "@logicflow/extension/lib/style/index.css"
 import leftPanel from "./left.vue"
@@ -53,7 +54,7 @@ function init() {
 		background: {
 			color: "#f7f8fa"
 		},
-		plugins: [MiniMap, Snapshot],
+		plugins: [MiniMap, Snapshot, ProximityConnect, Dagre],
 		pluginsOptions: {
 			miniMap: {
 				headerTitle: '小地图',
@@ -62,6 +63,10 @@ function init() {
 				isShowCloseIcon: true,
 				bottomPosition: 10,
 				rightPosition: 10
+			},
+			proximityConnect: {
+				enable: true,
+				type: 'anchor'
 			}
 		}
 	})
diff --git a/src/views/tools/flow/menu.vue b/src/views/tools/flow/menu.vue
index c56a00f..af13979 100644
--- a/src/views/tools/flow/menu.vue
+++ b/src/views/tools/flow/menu.vue
@@ -15,6 +15,9 @@
 		<el-icon size="18" title="位置还原" @click="lf.resetTranslate()">
 			<component :is="'el-icon-position'"/>
 		</el-icon>
+		<el-icon size="18" title="自动布线" @click="layout">
+			<component :is="'pi-icon-auto-layout'"/>
+		</el-icon>
 		<el-icon :class="{disabled: !canUndo}" size="18" title="上一步" @click="canUndo && lf.undo()">
 			<component :is="'el-icon-back'"/>
 		</el-icon>
@@ -105,6 +108,18 @@ function map() {
 function download() {
 	props.lf.getSnapshot("下载-" + (Date.now()), {backgroundColor: "#FFFFFF"})
 }
+
+function layout() {
+	const dagre = props.lf.extension.dagre as any
+	// 先应用布局
+	dagre.layout({
+		nodesep: 50,
+		ranksep: 80,
+		isDefaultAnchor: true
+	})
+	// 然后适配视图
+	props.lf.fitView()
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/tools/flow/model/CustomLine.ts b/src/views/tools/flow/model/CustomLine.ts
index 418a664..939c310 100644
--- a/src/views/tools/flow/model/CustomLine.ts
+++ b/src/views/tools/flow/model/CustomLine.ts
@@ -7,16 +7,15 @@ export const CUSTOM_LINE = {
 // 自定义连线模型
 export class CustomLineModel extends PolylineEdgeModel {
 	initEdgeData(data) {
-		super.initEdgeData(data);
-
+		super.initEdgeData(data)
 		// 禁止编辑标签
-		this.text.editable = false;
-		this.text.draggable = false;
+		this.text.editable = false
+		this.text.draggable = false
 	}
 
 	getEdgeStyle() {
-		const style = super.getEdgeStyle();
-		const {isSelected} = this;
+		const style = super.getEdgeStyle()
+		const {isSelected} = this
 
 		if (isSelected) {
 			style.strokeWidth = 3
@@ -25,7 +24,7 @@ export class CustomLineModel extends PolylineEdgeModel {
 			style.strokeWidth = 2
 			style.stroke = "#B1B3B8"
 		}
-		return style;
+		return style
 	}
 
 	setAttributes() {