From f00aefb5861411f6d4e17c4e6396187d2d68d726 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 17 Nov 2025 15:24:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8A=82=E7=82=B9=E7=BC=A9=E5=B0=8F?=
 =?UTF-8?q?=E5=92=8C=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/flow.js                           | 16 ++++++++++++++
 src/views/flow/index.vue                    |  1 +
 src/views/flow/nodes/common/serviceNode.vue | 23 ++++++++-------------
 src/views/flow/nodes/common/startNode.vue   | 22 +++++++-------------
 src/views/flow/nodes/function/sleep.vue     | 22 +++++++-------------
 5 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/utils/flow.js b/src/utils/flow.js
index 10187e6..ff5f46b 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -172,6 +172,22 @@ export const newEdge = (nodeId) => {
   })
 }
 
+export const initNodeZoom = (modelId, nodeZoom, className, init=false) => {
+  const nodes = document.getElementsByClassName(modelId)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest(className);
+    if (nodeZoom) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    if (!init) {
+      addNewEdge(modelId)
+    }
+  }
+}
+
 export const getInputNumber = (nodeId) => {
     const data = lf.getGraphData();
     let flag = false
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index df850c9..7c44aa6 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -572,6 +572,7 @@ const handleTreeNodeClick = (node) => {
   lf.focusOn({
     id: node.id
   })
+  lf.selectElementById(node.id)
 }
 
 const fitView = () => {
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index b92ac7c..d907976 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -210,8 +210,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -283,6 +283,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -363,20 +364,10 @@ const deleteTopLevelItem = (fullPath) => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 watch(
@@ -388,6 +379,10 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
     if (
       props.properties.outputParams &&
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 1ada400..23debd8 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -77,10 +77,10 @@
 </template>
 
 <script setup>
-import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
+import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
 import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
-import { addNewEdge } from "@/utils/flow";
+import { initNodeZoom } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -130,6 +130,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...props.properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -147,6 +148,9 @@ watch(
   () => {
     if (props.properties.inputParams && props.properties.inputParams.length > 0) {
       formData.inputParams = props.properties.inputParams;
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {
@@ -218,20 +222,10 @@ const validateForm = async () => {
   }
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = () => {
   nodeZoom.value = !nodeZoom.value
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 onUnmounted(() => {
diff --git a/src/views/flow/nodes/function/sleep.vue b/src/views/flow/nodes/function/sleep.vue
index 54fb464..66e0888 100644
--- a/src/views/flow/nodes/function/sleep.vue
+++ b/src/views/flow/nodes/function/sleep.vue
@@ -136,8 +136,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -185,6 +185,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -230,20 +231,10 @@ const addFormItem = () => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 watch(
@@ -255,6 +246,9 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {