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

---
 src/utils/flow.js                           |  28 +
 src/views/flow/components/NodeTitle.vue     | 388 ++++----
 src/views/flow/config.js                    |   5 +
 src/views/flow/index.vue                    |  12 +-
 src/views/flow/nodes/common/serviceNode.vue | 247 +++--
 src/views/flow/nodes/common/startNode.vue   |  63 +-
 src/views/flow/nodes/function/loop.vue      | 170 ++--
 src/views/flow/nodes/function/sleep.vue     | 868 ++++++++---------
 src/views/flow/nodes/function/switch.vue    | 998 +++++++++++---------
 vite.config.js                              |   4 +-
 10 files changed, 1564 insertions(+), 1219 deletions(-)

diff --git a/src/utils/flow.js b/src/utils/flow.js
index 94f7557..10187e6 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -127,6 +127,34 @@ export const formatTableData = (arr, data = {}) => {
 }
 
 export const addNewEdge = (nodeId) => {
+  const { edges } = lf.getGraphData();
+  const ttt = edges.slice(); // 浅拷贝（比 JSON 深拷贝高效 10x+）
+
+  const edgesToDelete = ttt.filter(_edge => 
+    _edge.sourceNodeId === nodeId || _edge.targetNodeId === nodeId
+  );
+
+  edgesToDelete.forEach(edge => lf.deleteEdge(edge.id));
+
+   if (window.addNewEdgeTimer) {
+    clearTimeout(window.addNewEdgeTimer); // 清理上一次未执行的定时器
+  }
+
+   window.addNewEdgeTimer = setTimeout(() => {
+    edgesToDelete.forEach(item => {
+      lf.addEdge({
+        type: "bezier",
+        sourceNodeId: item.sourceNodeId,
+        targetNodeId: item.targetNodeId,
+        sourceAnchorId: item.sourceAnchorId,
+        targetAnchorId: item.targetAnchorId
+      });
+    })
+    delete window.addNewEdgeTimer;
+  }, 50)
+}
+
+export const newEdge = (nodeId) => {
   const { edges } = lf.getGraphData();
   const arr = JSON.parse(JSON.stringify(edges))
   arr.forEach(_edge => {
diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index b7f61b4..1a66002 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -1,171 +1,217 @@
-<template>
-    <div class="title__container">
-        <div class="title">
-        <div class="left">
-            <img :src="icon" alt="">
-            <div class="text__container">
-            <div class="text__title" v-if="showTextTitle">
-                <span class="text">{{ nodeName }}</span>
-                <el-icon class="editIcon" @click="showTextTitle = false"><EditPen /></el-icon>
-            </div>
-            <div class="input_name_container" v-else>
-                <el-input v-model="nodeName" />
-                <el-button class="input_name_select" circle size="small" @click="confirmNodeName">
-                <el-icon><Select /></el-icon>
-                </el-button>
-                <el-button class="input_name_closeBold" circle size="small" @click="cancelNodeName">
-                <el-icon><CloseBold /></el-icon>
-                </el-button>
-            </div>
-            </div>
-        </div>
-        <div class="right">
-            <el-button circle size="small" @click="deleteNode">
-            <el-icon><Delete /></el-icon>
-            </el-button>
-        </div>
-        </div>
-        <div class="subTitle">{{ props.nodeDesc }}</div>
-    </div>
-</template>
-<script setup lang="js">
-import { ref } from 'vue'
-import { EditPen, Select, CloseBold, Delete } from '@element-plus/icons-vue'
-import { ElMessageBox } from 'element-plus'
-
-const props = defineProps({
-    icon: {
-        type: String,
-        default: ''
-    },
-    nodeId: {
-        type: String,
-        default: ''
-    },
-    nodeProperties: {
-        type: Object,
-        default: () => {}
-    },
-    nodeDesc: {
-        type: String,
-        default: ''
-    },
-    nodeName: {
-      type: String,
-      default: ''
-    },
-    nodeType: {
-      type: String,
-      default: ''
-    }
-})
-
-const showTextTitle = ref(true)
-const nodeName = ref(props.nodeProperties.name || props.nodeName)
-
-const confirmNodeName = () => {
-  const properties = lf.getProperties(props.nodeId)
-  lf.setProperties(props.nodeId, {
-    ...properties,
-    name: nodeName.value
-  })
-  showTextTitle.value = true
-}
-
-const cancelNodeName = () => {
-  nodeName.value = props.nodeProperties?.name || props.nodeName
-  showTextTitle.value = true
-}
-
-const deleteNode = () => {
-  ElMessageBox.confirm(
-    '是否删除该节点?',
-    '警告',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      if (props.nodeType === 'selectArea') {
-        const children = lf.getNodeModelById(props.nodeId).children
-        lf.getNodeModelById(props.nodeId).children = []
-        children.forEach(item => {
-          lf.getNodeModelById(item).draggable = true
-        })
-      }
-      lf.deleteNode(props.nodeId);
-    })
-}
-</script>
-<style lang="scss" scoped>
-.title__container {
-    .title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-
-        img {
-          width: 24px;
-          height: 24px;
-        }
-
-        .text__container {
-          .text__title {
-            display: flex;
-            align-items: center;
-
-            .text {
-              font-size: 16px;
-              font-weight: bold;
-              margin: 0 12px;
-            }
-
-            .editIcon {
-              cursor: pointer;
-            }
-          }
-
-          .input_name_container {
-            display: flex;
-            align-items: center;
-
-            .el-input {
-              margin-left: 12px;
-            }
-
-            .input_name_select {
-              color: #00b42a;
-              margin-left: 4px;
-              border: none;
-            }
-
-            .input_name_closeBold {
-              color: #f53f3f;
-              margin-left: 4px;
-              border: none;
-            }
-          }
-        }
-      }
-
-      .right {
-        cursor: pointer;
-
-        .el-button {
-          border: none;
-        }
-      }
-    }
-
-    .subTitle {
-      color: #737a87;
-      font-size: 12px;
-      margin: 8px 0;
-    }
-  }
-</style>
\ No newline at end of file
+<template>
+  <div class="title__container">
+    <div class="title">
+      <div class="left">
+        <img :src="icon" alt="" />
+        <div class="text__container">
+          <div class="text__title" v-if="showTextTitle">
+            <span class="text">{{ nodeName }}</span>
+            <el-icon class="editIcon" @click="showTextTitle = false"
+              ><EditPen
+            /></el-icon>
+          </div>
+          <div class="input_name_container" v-else>
+            <el-input v-model="nodeName" />
+            <el-button
+              class="input_name_select"
+              circle
+              size="small"
+              @click="confirmNodeName"
+            >
+              <el-icon><Select /></el-icon>
+            </el-button>
+            <el-button
+              class="input_name_closeBold"
+              circle
+              size="small"
+              @click="cancelNodeName"
+            >
+              <el-icon><CloseBold /></el-icon>
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="zoomState ? '缩小' : '放大'"
+          placement="top"
+        >
+          <el-button v-if="showZoom" circle size="small" @click="zoom">
+            <el-icon>
+              <ZoomOut v-if="zoomState" />
+              <ZoomIn v-else />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="删除"
+          placement="top"
+        >
+          <el-button circle size="small" @click="deleteNode">
+            <el-icon><Delete /></el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="subTitle">{{ props.nodeDesc }}</div>
+  </div>
+</template>
+<script setup lang="js">
+import { ref } from 'vue'
+import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+
+const props = defineProps({
+    icon: {
+        type: String,
+        default: ''
+    },
+    nodeId: {
+        type: String,
+        default: ''
+    },
+    nodeProperties: {
+        type: Object,
+        default: () => {}
+    },
+    nodeDesc: {
+        type: String,
+        default: ''
+    },
+    nodeName: {
+      type: String,
+      default: ''
+    },
+    nodeType: {
+      type: String,
+      default: ''
+    },
+    showZoom: {
+      type: Boolean,
+      default: true
+    },
+    zoomState: {
+      type: Boolean,
+      default: false
+    }
+})
+
+const emits = defineEmits(['zoom'])
+
+const showTextTitle = ref(true)
+const nodeName = ref(props.nodeProperties.name || props.nodeName)
+
+const confirmNodeName = () => {
+  const properties = lf.getProperties(props.nodeId)
+  lf.setProperties(props.nodeId, {
+    ...properties,
+    name: nodeName.value
+  })
+  showTextTitle.value = true
+}
+
+const cancelNodeName = () => {
+  nodeName.value = props.nodeProperties?.name || props.nodeName
+  showTextTitle.value = true
+}
+
+const deleteNode = () => {
+  ElMessageBox.confirm(
+    '是否删除该节点?',
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      if (props.nodeType === 'selectArea') {
+        const children = lf.getNodeModelById(props.nodeId).children
+        lf.getNodeModelById(props.nodeId).children = []
+        children.forEach(item => {
+          lf.getNodeModelById(item).draggable = true
+        })
+      }
+      lf.deleteNode(props.nodeId);
+    })
+}
+
+const zoom = () => {
+  emits('zoom', !props.zoomState)
+}
+</script>
+<style lang="scss" scoped>
+.title__container {
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
+
+      .text__container {
+        .text__title {
+          display: flex;
+          align-items: center;
+
+          .text {
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0 12px;
+          }
+
+          .editIcon {
+            cursor: pointer;
+          }
+        }
+
+        .input_name_container {
+          display: flex;
+          align-items: center;
+
+          .el-input {
+            margin-left: 12px;
+          }
+
+          .input_name_select {
+            color: #00b42a;
+            margin-left: 4px;
+            border: none;
+          }
+
+          .input_name_closeBold {
+            color: #f53f3f;
+            margin-left: 4px;
+            border: none;
+          }
+        }
+      }
+    }
+
+    .right {
+      cursor: pointer;
+
+      .el-button {
+        border: none;
+      }
+    }
+  }
+
+  .subTitle {
+    color: #737a87;
+    font-size: 12px;
+    margin: 8px 0;
+  }
+}
+</style>
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 46b30e1..9584e80 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -42,6 +42,11 @@ export const lfConfig = {
   //   foldSize: 30, // 折叠后显示的图标尺寸
   // },
   edgeType: "bezier",
+  zoomConfig: {
+    min: 0.05, // 最小缩放比例（支持更小值，如 0.01，但不建议过小）
+    max: 3,    // 最大缩放比例（可自定义）
+    step: 0.1  // 每次滚轮缩放的步长（默认 0.1）
+  },
   style: {
     anchor: {
       show: true, // 强制全局锚点显示
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index c0541a3..df850c9 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -54,7 +54,7 @@
           </div>
         </div>
       </el-header>
-      <el-container>
+      <el-container class="container">
         <el-aside v-if="!flowStore.disableForm">
           <Aside />
         </el-aside>
@@ -79,7 +79,7 @@ import Aside from "./components/Aside.vue";
 import { ElMessage } from 'element-plus'
 import { useFlowStore } from '@/store/modules/flow'
 import { emitter } from '@/utils/eventBus';
-import { recursiveFilter, addNewEdge, convertToTree } from '@/utils/flow'
+import { recursiveFilter, newEdge, convertToTree } from '@/utils/flow'
 import { flowDeploy, flowView, flowPause, flowResume, flowStop } from '@/api/device/flow'
 import { getDetect } from '@/api/test/detect'
 import { Location } from "@element-plus/icons-vue";
@@ -502,7 +502,6 @@ const initFlow = () => {
         const node = lf.getNodeModelById(item.id)
         node.updateSize()
       })
-
       operationEdge(arr)
     });
 
@@ -588,7 +587,7 @@ onMounted(() => {
 
 const operationEdge = (arr) => {
   arr.forEach(item => {
-    addNewEdge(item.id)
+    newEdge(item.id)
   })
 }
 
@@ -601,6 +600,7 @@ onUnmounted(() => {
 .page {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .page__container {
     width: 100%;
@@ -622,6 +622,10 @@ onUnmounted(() => {
       }
     }
 
+    .container {
+      height: calc(100% - 60px);
+    }
+
     .el-main {
       padding: 0;
     }
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index 6e0956d..b92ac7c 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -1,22 +1,33 @@
 <template>
-  <div class="node__container">
+  <div class="node__container" :class="props.model.id">
     <NodeState :state="nodeOperatingStatus">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
       <template #output>
-        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
-        <el-image
-            v-if="props.properties.outputType === 'img'"
-            v-for="item in outputJsonData.imageUrl"
-            style="width: 60px; height: 60px"
-            :src="item"
-            :preview-src-list="outputJsonData.imageUrl"
-            :preview-teleported="true"
-            show-progress
-            fit="fill"
+        <JsonViewer
+          v-if="props.properties.outputType === 'json'"
+          :value="outputJsonData"
+          copyable
+          boxed
+          sort
+          theme="light"
+        />
+        <el-image
+          v-if="props.properties.outputType === 'img'"
+          v-for="item in outputJsonData.imageUrl"
+          style="width: 60px; height: 60px"
+          :src="item"
+          :preview-src-list="outputJsonData.imageUrl"
+          :preview-teleported="true"
+          show-progress
+          fit="fill"
+        />
+        <IPlayer
+          v-if="props.properties.outputType === 'video'"
+          v-for="item in outputJsonData.videoUrl"
+          :videoUrl="item"
         />
-        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
       </template>
     </NodeState>
     <NodeTitle
@@ -25,8 +36,10 @@
       :nodeProperties="props.properties"
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
+      :zoom-state="nodeZoom"
+      @zoom="zoom"
     />
-    <div class="input__container">
+    <div class="input__container" v-show="nodeZoom">
       <div class="title">
         <div class="left">
           <div class="tag"></div>
@@ -57,7 +70,9 @@
               <el-form-item
                 :label="index === 0 ? '参数名' : ''"
                 :prop="`nodeParams.${index}.name`"
-                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
+                :rules="[
+                  { required: true, message: '请输入参数名', trigger: 'blur' },
+                ]"
               >
                 <el-input
                   :disabled="property?.disabled || false"
@@ -71,33 +86,76 @@
                 :label="index === 0 ? '参数值' : ''"
                 :prop="`nodeParams.${index}.type`"
               >
-                <el-select v-model="property.type" @change="handleTypeChange(index)">
+                <el-select
+                  v-model="property.type"
+                  @change="handleTypeChange(index)"
+                >
                   <el-option label="引用" value="quote" />
                   <el-option label="输入" value="input" />
                 </el-select>
                 <el-form-item
                   v-if="property.type === 'input'"
-                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
                   :prop="`nodeParams.${index}.input`"
                 >
-                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
-                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label" :value="item.value" />
-                    </el-select>
-                    <el-input @keydown="handleInputKeydown" v-else v-model="property.input" placeholder="请输入" clearable />
+                  <el-input-number
+                    v-if="property.componentType === 'number'"
+                    v-model="property.input"
+                    :min="0"
+                    :controls="false"
+                    :step-strictly="true"
+                    placeholder="请输入"
+                    clearable
+                  />
+                  <el-select
+                    v-model="property.input"
+                    v-else-if="property.componentType === 'select'"
+                  >
+                    <el-option
+                      v-for="item in property.selectOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                  <el-input
+                    @keydown="handleInputKeydown"
+                    v-else
+                    v-model="property.input"
+                    placeholder="请输入"
+                    clearable
+                  />
                 </el-form-item>
                 <el-form-item
                   v-if="property.type === 'quote'"
-                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
                   :prop="`nodeParams.${index}.quote`"
                 >
                   <el-cascader
-                    :ref="el => { if (el) cascaderRefs[index] = el }"
+                    :ref="
+                      (el) => {
+                        if (el) cascaderRefs[index] = el;
+                      }
+                    "
                     v-model="property.quote"
                     :checkStrictly="true"
                     :options="quoteOptions"
                     placeholder="请选择"
-                    @visible-change="(visible) => visibleChange(visible, index, property.quote)"
+                    @visible-change="
+                      (visible) => visibleChange(visible, index, property.quote)
+                    "
                     @change="(value) => cascaderChange(value, index)"
                   />
                 </el-form-item>
@@ -107,43 +165,45 @@
         </el-form>
       </div>
     </div>
-    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输出</div>
+    <div class="output__container" v-show="nodeZoom">
+      <div v-if="props.properties?.outputParams?.length > 0">
+        <div class="title">
+          <div class="left">
+            <div class="tag"></div>
+            <div class="text">输出</div>
+          </div>
+          <div class="right">
+            <el-button
+              :disabled="flowStore.disableForm"
+              @click="addOutputFormItem"
+              class="addFormItem"
+            >
+              <el-icon :size="20"><Plus /></el-icon>
+            </el-button>
+          </div>
         </div>
-        <div class="right" >
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addOutputFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
 
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          label-position="top"
-          label-width="auto"
-          :rules="outputRules"
-          ref="outputFormRef"
-        >
-           <FormItemRecursive
-            formType="output"
-            :current-list="formData.outputParams"
-            prop-path="outputParams"
-            :depth="0"
-            :is-first-level="true"
-            :endDepth="2"
-            :parent-path="[]"
-            @delete-item="deleteTopLevelItem"
-          />
-        </el-form>
+        <div class="form__container">
+          <el-form
+            :inline="true"
+            :model="formData"
+            label-position="top"
+            label-width="auto"
+            :rules="outputRules"
+            ref="outputFormRef"
+          >
+            <FormItemRecursive
+              formType="output"
+              :current-list="formData.outputParams"
+              prop-path="outputParams"
+              :depth="0"
+              :is-first-level="true"
+              :endDepth="2"
+              :parent-path="[]"
+              @delete-item="deleteTopLevelItem"
+            />
+          </el-form>
+        </div>
       </div>
     </div>
   </div>
@@ -151,7 +211,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput } from "@/utils/flow";
+import { getInput, addNewEdge } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -172,7 +232,7 @@ const flowStore = useFlowStore();
 
 const formData = reactive({
   nodeParams: [],
-  outputParams: []
+  outputParams: [],
 });
 
 const rules = reactive({});
@@ -190,33 +250,33 @@ const handleTypeChange = (index) => {
   }
 };
 
-const cascaderRefs = ref([])
+const cascaderRefs = ref([]);
 const outputRules = reactive({});
 const cascaderChange = (value, index) => {
   const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  formData.nodeParams[index].quote = value
-  formData.nodeParams[index].quoteType = selectedOptions[0].data.type
-}
+  formData.nodeParams[index].quote = value;
+  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+};
 
 const addOutputFormItem = () => {
   formData.outputParams.push({
-    name: '',
-    type: '',
-    desc: '',
-    children: []
-  })
-}
+    name: "",
+    type: "",
+    desc: "",
+    children: [],
+  });
+};
 
 const dynamicForm = ref();
-const outputFormRef = ref()
+const outputFormRef = ref();
 const setNodeProperties = async () => {
   try {
     const result = await dynamicForm.value.validate();
-    let flag = true
+    let flag = true;
     if (outputFormRef.value) {
-      flag = await outputFormRef.value.validate()
+      flag = await outputFormRef.value.validate();
     }
-    
+
     if (result && flag) {
       const data = toRaw(formData);
       const properties = lf.getProperties(props.model.id);
@@ -287,20 +347,36 @@ const addFormItem = () => {
 
 // 删除顶层表单项
 const deleteTopLevelItem = (fullPath) => {
-// 从顶层数据开始查找
+  // 从顶层数据开始查找
   let currentLevel = formData.outputParams;
-  
+
   // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
   for (let i = 0; i < fullPath.length - 1; i++) {
     const index = fullPath[i];
     // 进入下一层级
     currentLevel = currentLevel[index].children;
   }
-  
+
   // 最后一个索引是当前层级要删除的项
   const lastIndex = fullPath[fullPath.length - 1];
   currentLevel.splice(lastIndex, 1);
   emits("contentChange");
+};
+
+const nodeZoom = ref(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)
+  }
 }
 
 watch(
@@ -313,7 +389,10 @@ watch(
         quoteOptions.value = option;
       }
     }
-    if (props.properties.outputParams && props.properties.outputParams.length > 0) {
+    if (
+      props.properties.outputParams &&
+      props.properties.outputParams.length > 0
+    ) {
       formData.outputParams = props.properties.outputParams;
     }
   },
@@ -327,10 +406,10 @@ const handleInputKeydown = (e) => {
   // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
   e.stopPropagation();
   // 可选：明确放行 Ctrl+V（增强兼容性）
-  if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+  if ((e.ctrlKey || e.metaKey) && e.key === "v") {
     e.returnValue = true; // 允许默认粘贴行为
   }
-}
+};
 
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
@@ -509,13 +588,13 @@ defineExpose({
 
   :deep(.el-row) {
     align-items: end;
-    
+
     .el-input {
-        --el-input-width: 148px;
+      --el-input-width: 148px;
     }
 
     .el-select {
-        --el-select-width: 148px;
+      --el-select-width: 148px;
     }
 
     .el-cascader {
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 3ef8ee4..1ada400 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="node__container">
+  <div class="node__container" :class="props.model.id">
     <keep-alive>
       <NodeState :state="nodeOperatingStatus">
         <template #input>
@@ -12,12 +12,29 @@
     </keep-alive>
     <div class="title__container">
       <div class="title">
-        <img src="../../icon/start.svg" alt="" />
-        <span class="text">Start</span>
+       <div class="left">
+         <img src="../../icon/start.svg" alt="" />
+          <span class="text">Start</span>
+       </div>
+        <div class="right">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="nodeZoom ? '缩小' : '放大'"
+            placement="top"
+          >
+            <el-button circle size="small" @click="zoom">
+              <el-icon>
+                <ZoomOut v-if="nodeZoom" />
+                <ZoomIn v-else />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
       </div>
       <div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
     </div>
-    <div class="input__container">
+    <div class="input__container" v-show="nodeZoom">
       <div class="title">
         <div class="left">
           <div class="tag"></div>
@@ -61,8 +78,9 @@
 
 <script setup>
 import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
+import { addNewEdge } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -200,6 +218,22 @@ const validateForm = async () => {
   }
 };
 
+const nodeZoom = ref(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)
+  }
+}
+
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("contentChange");
@@ -220,16 +254,19 @@ defineExpose({
     .title {
       display: flex;
       align-items: center;
+      justify-content: space-between;
 
-      img {
-        width: 24px;
-        height: 24px;
-      }
+      .left {
+        img {
+          width: 24px;
+          height: 24px;
+        }
 
-      .text {
-        font-size: 16px;
-        font-weight: bold;
-        margin-left: 12px;
+        .text {
+          font-size: 16px;
+          font-weight: bold;
+          margin-left: 12px;
+        }
       }
     }
 
diff --git a/src/views/flow/nodes/function/loop.vue b/src/views/flow/nodes/function/loop.vue
index 75da23c..c3124d7 100644
--- a/src/views/flow/nodes/function/loop.vue
+++ b/src/views/flow/nodes/function/loop.vue
@@ -1,107 +1,117 @@
 <template>
-  <div class="group__container" @mouseleave="setNodeProperties">
+  <div class="group__container" :class="props.model.id" @mouseleave="setNodeProperties">
     <NodeTitle
       :icon="loop"
       :nodeId="props.model.id"
       :nodeProperties="props.properties"
       :nodeName="props.properties?.name || '循环'"
       nodeDesc="循环执行一系列任务，直至输出所有结果"
+      :showZoom="false"
     />
-    <div class="loop__container">
-      <div>
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <div v-for="(property, index) in formData.nodeParams" :key="index">
-            <el-row>
-              <el-form-item
-                :label="index === 0 ? '参数名' : ''"
-                :prop="`nodeParams.${index}.name`"
-                :rules="[
-                  { required: true, message: '请输入参数名', trigger: 'blur' },
-                ]"
-              >
-                <el-input
-                  :disabled="index === 0"
-                  v-model="property.name"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select
-                  v-model="property.type"
-                  @change="handleTypeChange(index)"
-                >
-                  <el-option label="引用" value="quote" />
-                  <el-option label="输入" value="input" />
-                </el-select>
+      <div class="loop__container">
+        <div>
+          <el-form
+            :inline="true"
+            :model="formData"
+            :rules="rules"
+            ref="dynamicForm"
+            label-position="top"
+            label-width="auto"
+            :disabled="flowStore.disableForm"
+          >
+            <div v-for="(property, index) in formData.nodeParams" :key="index">
+              <el-row>
                 <el-form-item
-                  v-if="property.type === 'input'"
+                  :label="index === 0 ? '参数名' : ''"
+                  :prop="`nodeParams.${index}.name`"
                   :rules="[
                     {
                       required: true,
-                      message: '请输入参数值',
+                      message: '请输入参数名',
                       trigger: 'blur',
                     },
                   ]"
-                  :prop="`nodeParams.${index}.input`"
                 >
-                  <el-input-number
-                    v-model="property.input"
-                    :min="0"
-                    :controls="false"
-                    :step-strictly="true"
+                  <el-input
+                    :disabled="index === 0"
+                    v-model="property.name"
                     placeholder="请输入"
                     clearable
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="property.type === 'quote'"
-                  :rules="[
-                    {
-                      required: true,
-                      message: '请选择参数值',
-                      trigger: 'blur',
-                    },
-                  ]"
-                  :prop="`nodeParams.${index}.quote`"
+                  :label="index === 0 ? '参数值' : ''"
+                  :prop="`nodeParams.${index}.type`"
                 >
-                  <el-cascader
-                    :ref="
-                      (el) => {
-                        if (el) cascaderRefs[index] = el;
-                      }
-                    "
-                    v-model="property.quote"
-                    :checkStrictly="true"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="
-                      (visible) => visibleChange(visible, index, property.quote)
-                    "
-                    @change="(value) => cascaderChange(value, index)"
-                  />
+                  <el-select
+                    v-model="property.type"
+                    @change="handleTypeChange(index)"
+                  >
+                    <el-option label="引用" value="quote" />
+                    <el-option label="输入" value="input" />
+                  </el-select>
+                  <el-form-item
+                    v-if="property.type === 'input'"
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请输入参数值',
+                        trigger: 'blur',
+                      },
+                    ]"
+                    :prop="`nodeParams.${index}.input`"
+                  >
+                    <el-input-number
+                      v-model="property.input"
+                      :min="0"
+                      :controls="false"
+                      :step-strictly="true"
+                      placeholder="请输入"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    v-if="property.type === 'quote'"
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请选择参数值',
+                        trigger: 'blur',
+                      },
+                    ]"
+                    :prop="`nodeParams.${index}.quote`"
+                  >
+                    <el-cascader
+                      :ref="
+                        (el) => {
+                          if (el) cascaderRefs[index] = el;
+                        }
+                      "
+                      v-model="property.quote"
+                      :checkStrictly="true"
+                      :options="quoteOptions"
+                      placeholder="请选择"
+                      @visible-change="
+                        (visible) =>
+                          visibleChange(visible, index, property.quote)
+                      "
+                      @change="(value) => cascaderChange(value, index)"
+                    />
+                  </el-form-item>
                 </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <div>循环体</div>
+      <div
+        class="child__container"
+        @drop="handleDrop"
+        @dragover="handleDragover"
+      >
+        <slot></slot>
       </div>
-    </div>
-    <div>循环体</div>
-    <div class="child__container" @drop="handleDrop" @dragover="handleDragover">
-      <slot></slot>
-    </div>
   </div>
 </template>
 <script setup>
diff --git a/src/views/flow/nodes/function/sleep.vue b/src/views/flow/nodes/function/sleep.vue
index a4c3b21..54fb464 100644
--- a/src/views/flow/nodes/function/sleep.vue
+++ b/src/views/flow/nodes/function/sleep.vue
@@ -1,425 +1,443 @@
-<template>
-  <div class="node__container">
-    <NodeState :state="nodeOperatingStatus">
-      <template #input>
-        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
-      </template>
-      <template #output>
-        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
-        <el-image
-            v-if="props.properties.outputType === 'img'"
-            v-for="item in outputJsonData.imageUrl"
-            style="width: 60px; height: 60px"
-            :src="item"
-            :preview-src-list="outputJsonData.imageUrl"
-            :preview-teleported="true"
-            show-progress
-            fit="fill"
-        />
-        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
-      </template>
-    </NodeState>
-    <NodeTitle
-      :icon="props.properties.icon"
-      :nodeId="props.model.id"
-      :nodeProperties="props.properties"
-      :nodeName="props.properties.name"
-      :nodeDesc="props.properties.desc"
-    />
-    <div class="input__container">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        <div class="right" v-if="properties.properties?.canAddFormItem">
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <div v-for="(property, index) in formData.nodeParams" :key="index">
-            <el-row>
-              <el-form-item
-                :label="index === 0 ? '参数名' : ''"
-                :prop="`nodeParams.${index}.name`"
-                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
-              >
-                <el-input
-                  :disabled="property?.disabled || false"
-                  v-model="property.name"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select v-model="property.type" @change="handleTypeChange(index)">
-                  <el-option label="引用" value="quote" />
-                  <el-option label="输入" value="input" />
-                </el-select>
-                <el-form-item
-                  v-if="property.type === 'input'"
-                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
-                  :prop="`nodeParams.${index}.input`"
-                >
-                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
-                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
-                    </el-select>
-                    <el-input v-else v-model="property.input" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item
-                  v-if="property.type === 'quote'"
-                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
-                  :prop="`nodeParams.${index}.quote`"
-                >
-                  <el-cascader
-                    v-model="property.quote"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="visibleChange"
-                  />
-                </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
-      <div class="title">
-        <div class="tag"></div>
-        <div class="text">输出</div>
-      </div>
-
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          label-position="top"
-          label-width="auto"
-          :disabled="true"
-        >
-          <el-row v-for="(item, index) in props.properties.outputParams">
-            <el-form-item label="参数名" >
-              <el-input :value="item.name" />
-            </el-form-item>
-            <el-form-item label="参数类型" >
-              <el-input :value="item.type" />
-            </el-form-item>
-            <el-form-item label="描述" >
-              <el-input :value="item.desc" />
-            </el-form-item>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
-import { Plus } from "@element-plus/icons-vue";
-import NodeTitle from "../../components/NodeTitle.vue";
-import NodeState from "../../components/NodeState.vue";
-import "vue3-json-viewer/dist/index.css";
-import { emitter } from "@/utils/eventBus";
-import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
-
-const props = defineProps({
-  model: Object,
-  properties: Object,
-});
-
-const emits = defineEmits(["contentChange"]);
-
-const flowStore = useFlowStore();
-
-const formData = reactive({
-  nodeParams: [],
-});
-
-const rules = reactive({});
-
-const quoteOptions = ref([]);
-const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === "input") {
-    formData.nodeParams[index].quote = "";
-  } else {
-    formData.nodeParams[index].input = "";
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const dynamicForm = ref();
-
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      const data = toRaw(formData);
-      const properties = lf.getProperties(props.model.id);
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data,
-      });
-      emits("contentChange");
-    }
-  } catch {
-    dynamicForm.value.clearValidate();
-  }
-};
-
-const nodeOperatingStatus = ref("NORMAL");
-const inputJsonData = ref({});
-const outputJsonData = ref({});
-
-const visibleChange = (value) => {
-  if (value) {
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const validateForm = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      return { valid: true, message: "验证通过" };
-    } else {
-      return { valid: false, message: "验证失败" };
-    }
-  } catch {
-    return { valid: false, message: "验证失败" };
-  }
-};
-
-const addFormItem = () => {
-  formData.nodeParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  emits("contentChange");
-};
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams;
-      const option = getInput(props.model.id);
-      if (option) {
-        quoteOptions.value = option;
-      }
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-onMounted(() => {
-  emitter.on("changeNodeState", (data) => {
-    if (data.nodeId === props.model.id) {
-      nodeOperatingStatus.value = data.status;
-      let inputData = {};
-      let output = {};
-      try {
-        inputData = JSON.parse(data.paramsIn) || {};
-        output = JSON.parse(data.paramsOut) || {};
-      } catch (error) {
-        inputData = data.paramsIn || {};
-        output = data.paramsOut || {};
-      }
-      inputJsonData.value = inputData;
-      outputJsonData.value = output;
-      emits("contentChange");
-    }
-  });
-
-  emitter.on("contentChange", (data) => {
-    if (data.id === props.model.id) {
-      nodeOperatingStatus.value = "NORMAL";
-      inputJsonData.value = {};
-      outputJsonData.value = {};
-      emits("contentChange");
-    }
-  });
-});
-
-onUnmounted(() => {
-  emitter.off("changeNodeState");
-  emitter.off("contentChange");
-});
-
-defineExpose({
-  validateForm,
-  setNodeProperties,
-});
-</script>
-
-<style lang="scss" scoped>
-.node__container {
-  width: 100%;
-  height: auto;
-
-  .input__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-
-      .sub-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-
-      .gSon-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-    }
-  }
-
-  .output__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-
-      .tag {
-        width: 3px;
-        height: 16px;
-        background: #1664ff;
-        border-radius: 0 4px 4px 0;
-        margin-right: 12px;
-      }
-
-      .text {
-        font-size: 16px;
-        font-weight: 700;
-        color: #0c0d0e;
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-    }
-  }
-
-  :deep(.el-row) {
-    align-items: end;
-    
-    .el-input {
-        --el-input-width: 170px;
-    }
-
-    .el-select {
-        --el-select-width: 170px;
-    }
-
-    .el-cascader {
-    --el-form-inline-content-width: 170px;
-    }
-    }
-}
-</style>
+<template>
+  <div class="node__container" :class="props.model.id">
+    <NodeState :state="nodeOperatingStatus">
+      <template #input>
+        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
+      </template>
+      <template #output>
+        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
+        <el-image
+            v-if="props.properties.outputType === 'img'"
+            v-for="item in outputJsonData.imageUrl"
+            style="width: 60px; height: 60px"
+            :src="item"
+            :preview-src-list="outputJsonData.imageUrl"
+            :preview-teleported="true"
+            show-progress
+            fit="fill"
+        />
+        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
+      </template>
+    </NodeState>
+    <NodeTitle
+      :icon="props.properties.icon"
+      :nodeId="props.model.id"
+      :nodeProperties="props.properties"
+      :nodeName="props.properties.name"
+      :nodeDesc="props.properties.desc"
+      :zoom-state="nodeZoom"
+      @zoom="zoom"
+    />
+    <div class="input__container" v-show="nodeZoom">
+      <div class="title">
+        <div class="left">
+          <div class="tag"></div>
+          <div class="text">输入</div>
+        </div>
+        <div class="right" v-if="properties.properties?.canAddFormItem">
+          <el-button
+            :disabled="flowStore.disableForm"
+            @click="addFormItem"
+            class="addFormItem"
+          >
+            <el-icon :size="20"><Plus /></el-icon>
+          </el-button>
+        </div>
+      </div>
+      <div class="form__container" v-show="nodeZoom">
+        <el-form
+          :inline="true"
+          :model="formData"
+          :rules="rules"
+          ref="dynamicForm"
+          label-position="top"
+          label-width="auto"
+          :disabled="flowStore.disableForm"
+        >
+          <div v-for="(property, index) in formData.nodeParams" :key="index">
+            <el-row>
+              <el-form-item
+                :label="index === 0 ? '参数名' : ''"
+                :prop="`nodeParams.${index}.name`"
+                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
+              >
+                <el-input
+                  :disabled="property?.disabled || false"
+                  v-model="property.name"
+                  placeholder="请输入"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item
+                :label="index === 0 ? '参数值' : ''"
+                :prop="`nodeParams.${index}.type`"
+              >
+                <el-select v-model="property.type" @change="handleTypeChange(index)">
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.type === 'input'"
+                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
+                  :prop="`nodeParams.${index}.input`"
+                >
+                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
+                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
+                    </el-select>
+                    <el-input v-else v-model="property.input" placeholder="请输入" clearable />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.type === 'quote'"
+                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
+                  :prop="`nodeParams.${index}.quote`"
+                >
+                  <el-cascader
+                    v-model="property.quote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+            </el-row>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
+      <div class="title">
+        <div class="tag"></div>
+        <div class="text">输出</div>
+      </div>
+
+      <div class="form__container">
+        <el-form
+          :inline="true"
+          label-position="top"
+          label-width="auto"
+          :disabled="true"
+        >
+          <el-row v-for="(item, index) in props.properties.outputParams">
+            <el-form-item label="参数名" >
+              <el-input :value="item.name" />
+            </el-form-item>
+            <el-form-item label="参数类型" >
+              <el-input :value="item.type" />
+            </el-form-item>
+            <el-form-item label="描述" >
+              <el-input :value="item.desc" />
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { getInput, addNewEdge } from "@/utils/flow";
+import { useFlowStore } from "@/store/modules/flow";
+import { Plus } from "@element-plus/icons-vue";
+import NodeTitle from "../../components/NodeTitle.vue";
+import NodeState from "../../components/NodeState.vue";
+import "vue3-json-viewer/dist/index.css";
+import { emitter } from "@/utils/eventBus";
+import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
+
+const props = defineProps({
+  model: Object,
+  properties: Object,
+});
+
+const emits = defineEmits(["contentChange"]);
+
+const flowStore = useFlowStore();
+
+const formData = reactive({
+  nodeParams: [],
+});
+
+const rules = reactive({});
+
+const quoteOptions = ref([]);
+const handleTypeChange = (index) => {
+  if (formData.nodeParams[index].type === "input") {
+    formData.nodeParams[index].quote = "";
+  } else {
+    formData.nodeParams[index].input = "";
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const dynamicForm = ref();
+
+const setNodeProperties = async () => {
+  try {
+    const result = await dynamicForm.value.validate();
+    if (result) {
+      const data = toRaw(formData);
+      const properties = lf.getProperties(props.model.id);
+      lf.setProperties(props.model.id, {
+        ...properties,
+        ...data,
+      });
+      emits("contentChange");
+    }
+  } catch {
+    dynamicForm.value.clearValidate();
+  }
+};
+
+const nodeOperatingStatus = ref("NORMAL");
+const inputJsonData = ref({});
+const outputJsonData = ref({});
+
+const visibleChange = (value) => {
+  if (value) {
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const validateForm = async () => {
+  try {
+    const result = await dynamicForm.value.validate();
+    if (result) {
+      return { valid: true, message: "验证通过" };
+    } else {
+      return { valid: false, message: "验证失败" };
+    }
+  } catch {
+    return { valid: false, message: "验证失败" };
+  }
+};
+
+const addFormItem = () => {
+  formData.nodeParams.push({
+    name: "",
+    type: "",
+    desc: "",
+    required: false,
+    children: [],
+  });
+  emits("contentChange");
+};
+
+const nodeZoom = ref(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)
+  }
+}
+
+watch(
+  () => props.properties,
+  () => {
+    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
+      formData.nodeParams = props.properties.nodeParams;
+      const option = getInput(props.model.id);
+      if (option) {
+        quoteOptions.value = option;
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  emitter.on("changeNodeState", (data) => {
+    if (data.nodeId === props.model.id) {
+      nodeOperatingStatus.value = data.status;
+      let inputData = {};
+      let output = {};
+      try {
+        inputData = JSON.parse(data.paramsIn) || {};
+        output = JSON.parse(data.paramsOut) || {};
+      } catch (error) {
+        inputData = data.paramsIn || {};
+        output = data.paramsOut || {};
+      }
+      inputJsonData.value = inputData;
+      outputJsonData.value = output;
+      emits("contentChange");
+    }
+  });
+
+  emitter.on("contentChange", (data) => {
+    if (data.id === props.model.id) {
+      nodeOperatingStatus.value = "NORMAL";
+      inputJsonData.value = {};
+      outputJsonData.value = {};
+      emits("contentChange");
+    }
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("changeNodeState");
+  emitter.off("contentChange");
+});
+
+defineExpose({
+  validateForm,
+  setNodeProperties,
+});
+</script>
+
+<style lang="scss" scoped>
+.node__container {
+  width: 100%;
+  height: auto;
+
+  .input__container {
+    width: 100%;
+    background-color: #fafbfc;
+    padding: 0 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .tag {
+          width: 3px;
+          height: 16px;
+          background: #1664ff;
+          border-radius: 0 4px 4px 0;
+          margin-right: 12px;
+        }
+
+        .text {
+          font-size: 16px;
+          font-weight: 700;
+          color: #0c0d0e;
+        }
+      }
+
+      .right {
+        .addFormItem {
+          border: none;
+          background: transparent;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .form__container {
+      margin: 12px 0;
+
+      .sub-properties {
+        margin-left: 10px;
+        .zw {
+          margin-left: 15px;
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -4px;
+            width: 10px;
+            border-left: 1px solid gray;
+            border-bottom: 1px solid gray;
+            border-bottom-left-radius: 4px;
+            background-color: transparent;
+            height: 24px;
+          }
+        }
+      }
+
+      .gSon-properties {
+        margin-left: 10px;
+        .zw {
+          margin-left: 15px;
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -4px;
+            width: 10px;
+            border-left: 1px solid gray;
+            border-bottom: 1px solid gray;
+            border-bottom-left-radius: 4px;
+            background-color: transparent;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  .output__container {
+    width: 100%;
+    background-color: #fafbfc;
+    padding: 0 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+
+      .tag {
+        width: 3px;
+        height: 16px;
+        background: #1664ff;
+        border-radius: 0 4px 4px 0;
+        margin-right: 12px;
+      }
+
+      .text {
+        font-size: 16px;
+        font-weight: 700;
+        color: #0c0d0e;
+      }
+    }
+
+    .form__container {
+      margin: 12px 0;
+    }
+  }
+
+  :deep(.el-row) {
+    align-items: end;
+    
+    .el-input {
+        --el-input-width: 170px;
+    }
+
+    .el-select {
+        --el-select-width: 170px;
+    }
+
+    .el-cascader {
+    --el-form-inline-content-width: 170px;
+    }
+    }
+}
+</style>
diff --git a/src/views/flow/nodes/function/switch.vue b/src/views/flow/nodes/function/switch.vue
index 05b538b..45aebf7 100644
--- a/src/views/flow/nodes/function/switch.vue
+++ b/src/views/flow/nodes/function/switch.vue
@@ -1,440 +1,558 @@
-<template>
-    <div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
-        <NodeState :state="nodeOperatingStatus">
-          <template #input>
-            <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
-          </template>
-          <template #output>
-            <JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
-          </template>
-        </NodeState>
-        <NodeTitle :icon="switchSvg" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '分支'" nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束" />
-        <div class="condition_title_container">
-          <div class="left">
-            <div class="space"></div>
-            <div class="title">所有条件</div>
-          </div>
-          <div class="right">
-            <el-button :disabled="flowStore.disableForm" @click="addFormItem" class="addFormItem">
-              <el-icon :size="20" ><Plus /></el-icon>
-            </el-button>
-          </div>
-        </div>
-        <div>
-            <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
-              <div class="condition" v-for="(params, index) in formData.nodeParams" :id="params.id">
-                <div class="title__container">
-                  <div class="left">
-                    <div class="space"></div>
-                    <div class="title">{{ index ===0 ? 'If' : 'Else If' }}</div>
-                  </div>
-                  <div class="right">
-                    <el-button :disabled="flowStore.disableForm" circle size="small" @click="deleteFormItem(params.id, index)">
-                      <el-icon :size="16" ><Minus /></el-icon>
-                    </el-button>
-                  </div>
-                </div>
-                <div class="withOr">
-                  <div class="title">条件</div>
-                  <div>
-                    <el-select v-model="params.withOr" placeholder="Select" style="width: 240px">
-                      <el-option key="and" label="AND" value="and" />
-                      <el-option key="or" label="OR" value="or" />
-                    </el-select>
-                  </div>
-                </div>
-                <div class="form__container">
-                  <el-row v-for="(property, pIndex) in params.list">
-                  <!--  :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
-                    <el-form-item :label="pIndex === 0 ? '引用变量' : ''" :prop="`nodeParams.${index}.list.${pIndex}.nameType`">
-                      <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
-                      <el-select v-model="property.nameType" @change="handleTypeChange(index, pIndex)">
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item v-if="property.nameType === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.name`">
-                          <el-input v-model="property.name" placeholder="请输入" clearable />
-                      </el-form-item>
-                      <el-form-item v-if="property.nameType === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`">
-                        <el-cascader v-model="property.nameQuote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
-                      </el-form-item>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '选择条件' : ''" :prop="`nodeParams.${index}.list.${pIndex}.condition`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]">
-                      <el-select v-model="property.condition">
-                        <el-option label="等于" value="equal" />
-                        <el-option label="不等于" value="notEqualTo" />
-                        <el-option label="为空" value="null" />
-                        <el-option label="不为空" value="notNull" />
-                        <el-option label="包含" value="include" />
-                        <el-option label="不包含" value="notInclude" />
-                        <el-option label="大于" value="greaterThan" />
-                        <el-option label="大于等于" value="greaterThanOrEqual" />
-                        <el-option label="小于" value="lessThan" />
-                        <el-option label="小于等于" value="lessThanOrEqual" />
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '比较值' : ''" :prop="`nodeParams.${index}.list.${pIndex}.type`" >
-                      <el-select v-model="property.type" @change="handleTypeChange(index, pIndex)">
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item v-if="property.type === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.input`">
-                          <el-input v-model="property.input" placeholder="请输入" clearable />
-                      </el-form-item>
-                      <el-form-item v-if="property.type === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.quote`">
-                          <el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
-                      </el-form-item>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '操作' : ''">
-                      <el-button :disabled="flowStore.disableForm" circle size="small" @click="addListItem(index)">
-                      <el-icon :size="12" ><Plus /></el-icon>
-                    </el-button>
-                    <el-button :disabled="flowStore.disableForm" circle size="small" @click="removeListItem(index, pIndex)">
-                      <el-icon :size="12" ><Minus /></el-icon>
-                    </el-button>
-                    </el-form-item>
-                    
-                  </el-row>
-                </div>
-              </div>
-              </el-form>
-        </div>
-        <div class="else" :id="''.concat(props.model.id, '_else')">
-          <div class="space"></div>
-          <div class="title">Else</div>
-        </div>
-    </div>
-</template>
-<script setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
-import NodeTitle from '../../components/NodeTitle.vue'
-import NodeState from "../../components/NodeState.vue";
-import switchSvg from '../../icon/switch.svg'
-import { v4 as randomUUID } from 'uuid'
-import { useFlowStore } from '@/store/modules/flow'
-import { Plus, Minus } from '@element-plus/icons-vue'
-import { getInput, addNewEdge, removeSwitchEdge } from '@/utils/flow'
-import { emitter } from "@/utils/eventBus";
-
-const props = defineProps({
-  model: Object,
-  graphModel: Object,
-  properties: Object,
-  nowTime: Number,
-});
-
-const emits = defineEmits(['addAnchor', 'removeAnchor', 'bindRef', 'changeAnchor'])
-
-const switchRef = ref()
-const dynamicForm = ref()
-const flowStore = useFlowStore()
-
-const formData = reactive({
-  nodeParams: props.properties?.conditions || []
-})
-
-const addFormItem = () => {
-  const rect = switchRef.value.getBoundingClientRect();
-  addCondition(rect.height - 60)
-}
-
-const deleteFormItem = (id, index) => {
-  if (index === 0) {
-    return
-  }
-  formData.nodeParams.splice(index, 1)
-  emits('removeAnchor', id)
-  removeSwitchEdge(props.model.id, id)
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const quoteOptions = ref([])
-const handleTypeChange = (pIndex, index) => {
-  if (formData.nodeParams[pIndex].list[index].type === 'input') {
-    formData.nodeParams[pIndex].list[index].quote = ""
-  } else {
-    formData.nodeParams[pIndex].list[index].input = ""
-    const option = getInput(props.model.id, false)
-    if (option) {
-      quoteOptions.value = option
-    }
-  }
-}
-
-const addCondition = (height) => {
-  const id = randomUUID().replace(/-/g, '')
-  formData.nodeParams.push({
-    id,
-    withOr: 'and',
-    list: [{
-      name: '',
-      nameQuote: '',
-      nameType: 'input',
-      type: 'input',
-      input: '',
-      quote: ''
-    }]
-  })
-  emits('addAnchor', height, id)
-
-  setTimeout(() => {
-    addNewEdge(props.model.id)
-  }, 50)
-
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const addListItem = (pIndex, cIndex) => {
-  formData.nodeParams[pIndex].list.push({
-    name: '',
-    nameQuote: '',
-    nameType: 'input',
-    type: 'input',
-    input: '',
-    quote: ''
-  })
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const removeListItem = (pIndex, cIndex) => {
-  if (cIndex === 0) {
-    return
-  }
-  formData.nodeParams[pIndex].list.splice(cIndex, 1)
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const changeFormItemHeight = () => {
-  formData.nodeParams.forEach(item => {
-    const node = document.getElementById(item.id)
-    emits('changeAnchor', node.offsetTop, item.id)
-  });
-
-  const node = document.getElementById("".concat(props.model.id, "_else"))
-  emits('changeAnchor', node.offsetTop, "".concat(props.model.id, "_else"))
-}
-
-const setNodeProperties = async () => {
-  try {
-    const valid = await dynamicForm.value.validate()
-    if (valid) {
-      const data = toRaw(formData)
-      const properties = lf.getProperties(props.model.id)
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data
-      })
-      emits('contentChange')
-    }
- } catch (error) {
-    dynamicForm.value.clearValidate()
- }
-}
-
-const visibleChange = (value) => {
-  if (value) {
-    const option = getInput(props.model.id)
-    if (option) {
-        quoteOptions.value = option
-    }
-  }
-}
-
-const nodeOperatingStatus = ref("NORMAL");
-const inputJsonData = ref({});
-const outputJsonData = ref({});
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams
-    } else {
-        if (formData.nodeParams.length === 0) {
-          addCondition(100)
-        }
-    }
-  }, {
-    immediate: true,
-    deep: true
-  }
-);
-
-onMounted(() => {
-  emits('addAnchor', 280, "".concat(props.model.id, "_else"))
-
-  emits('bindRef', dynamicForm.value)
-
-  emitter.on("changeNodeState", (data) => {
-    if (data.nodeId === props.model.id) {
-      nodeOperatingStatus.value = data.status;
-      let inputData = {};
-      let output = {};
-      try {
-        inputData = JSON.parse(data.paramsIn) || {};
-        output = JSON.parse(data.paramsOut) || {};
-      } catch (error) {
-        inputData = data.paramsIn || {};
-        output = data.paramsOut || {};
-      }
-      inputJsonData.value = inputData;
-      outputJsonData.value = output;
-
-      emits("contentChange");
-    }
-  });
-
-  emitter.on("contentChange", (data) => {
-    if (data.id === props.model.id) {
-      nodeOperatingStatus.value = "NORMAL";
-      inputJsonData.value = {};
-      outputJsonData.value = {};
-
-      emits("contentChange");
-    }
-  });
-
-})
-
-onUnmounted(() => {
-  emitter.off("changeNodeState");
-  emitter.off("contentChange");
-});
-
-
-</script>
-<style lang="scss" scoped>
-.node__container {
-  width: 720px;
-  height: auto;
-  background: #fff;
-  padding: 12px;
-  cursor: default;
-  border-radius: 12px;
-  border: 2px solid white;
-  box-shadow: 0 5px 15px 0#00000008;
-  position: relative;
-
-  .condition_title_container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .space {
-        width: 4px;
-        height: 14px;
-        background: rgb(22, 100, 255);
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      .title {
-        margin-left: 8px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-    }
-
-    
-
-    .el-button {
-      border: none;
-    }
-  }
-
-  .condition {
-    width: 100%;
-    height: auto;
-    margin-bottom: 10px;
-    background-color: #fafbfc;
-    padding: 8px 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title__container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .space {
-          width: 4px;
-          height: 14px;
-          background: rgb(22, 100, 255);
-          border-radius: 0px 4px 4px 0px;
-        }
-
-        .title {
-          margin-left: 8px;
-          font-size: 14px;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .withOr {
-      margin-bottom: 12px;
-
-      .title {
-        font-size: 14px;
-        color: #737a87;
-        margin-bottom: 4px;
-      }
-    }
-
-    :deep(.form__container) {
-
-      .el-form-item {
-        margin-right: 20px;
-      }
-
-      .el-input {
-        width: 92px;
-      }
-
-      .el-select {
-        width: 92px;
-      }
-
-      .el-cascader {
-        width: 92px;
-      }
-    }
-  }
-
-  .else {
-    display: flex;
-    align-items: center;
-    background-color: #fafbfc;
-    padding: 8px 16px;
-
-    .space {
-        width: 4px;
-        height: 14px;
-        background: rgb(22, 100, 255);
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      .title {
-        margin-left: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        font-weight: bold;
-      }
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
+    <NodeState :state="nodeOperatingStatus">
+      <template #input>
+        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
+      </template>
+      <template #output>
+        <JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
+      </template>
+    </NodeState>
+    <NodeTitle
+      :icon="switchSvg"
+      :nodeId="props.model.id"
+      :nodeProperties="props.properties"
+      :nodeName="props.properties?.name || '分支'"
+      nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束"
+    />
+    <div class="condition_title_container">
+      <div class="left">
+        <div class="space"></div>
+        <div class="title">所有条件</div>
+      </div>
+      <div class="right">
+        <el-button
+          :disabled="flowStore.disableForm"
+          @click="addFormItem"
+          class="addFormItem"
+        >
+          <el-icon :size="20"><Plus /></el-icon>
+        </el-button>
+      </div>
+    </div>
+    <div>
+      <el-form
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        ref="dynamicForm"
+        label-position="top"
+        label-width="auto"
+        :disabled="flowStore.disableForm"
+      >
+        <div
+          class="condition"
+          v-for="(params, index) in formData.nodeParams"
+          :id="params.id"
+        >
+          <div class="title__container">
+            <div class="left">
+              <div class="space"></div>
+              <div class="title">{{ index === 0 ? "If" : "Else If" }}</div>
+            </div>
+            <div class="right">
+              <el-button
+                :disabled="flowStore.disableForm"
+                circle
+                size="small"
+                @click="deleteFormItem(params.id, index)"
+              >
+                <el-icon :size="16"><Minus /></el-icon>
+              </el-button>
+            </div>
+          </div>
+          <div class="withOr">
+            <div class="title">条件</div>
+            <div>
+              <el-select
+                v-model="params.withOr"
+                placeholder="Select"
+                style="width: 240px"
+              >
+                <el-option key="and" label="AND" value="and" />
+                <el-option key="or" label="OR" value="or" />
+              </el-select>
+            </div>
+          </div>
+          <div class="form__container">
+            <el-row v-for="(property, pIndex) in params.list">
+              <!--  :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
+              <el-form-item
+                :label="pIndex === 0 ? '引用变量' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.nameType`"
+              >
+                <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
+                <el-select
+                  v-model="property.nameType"
+                  @change="handleTypeChange(index, pIndex)"
+                >
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.nameType === 'input'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.name`"
+                >
+                  <el-input
+                    v-model="property.name"
+                    placeholder="请输入"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.nameType === 'quote'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`"
+                >
+                  <el-cascader
+                    v-model="property.nameQuote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+              <el-form-item
+                :label="pIndex === 0 ? '选择条件' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.condition`"
+                :rules="[
+                  { required: true, message: '请输入变量名', trigger: 'blur' },
+                ]"
+              >
+                <el-select v-model="property.condition">
+                  <el-option label="等于" value="equal" />
+                  <el-option label="不等于" value="notEqualTo" />
+                  <el-option label="为空" value="null" />
+                  <el-option label="不为空" value="notNull" />
+                  <el-option label="包含" value="include" />
+                  <el-option label="不包含" value="notInclude" />
+                  <el-option label="大于" value="greaterThan" />
+                  <el-option label="大于等于" value="greaterThanOrEqual" />
+                  <el-option label="小于" value="lessThan" />
+                  <el-option label="小于等于" value="lessThanOrEqual" />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                :label="pIndex === 0 ? '比较值' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.type`"
+              >
+                <el-select
+                  v-model="property.type"
+                  @change="handleTypeChange(index, pIndex)"
+                >
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.type === 'input'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.input`"
+                >
+                  <el-input
+                    v-model="property.input"
+                    placeholder="请输入"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.type === 'quote'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.quote`"
+                >
+                  <el-cascader
+                    v-model="property.quote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+              <el-form-item :label="pIndex === 0 ? '操作' : ''">
+                <el-button
+                  :disabled="flowStore.disableForm"
+                  circle
+                  size="small"
+                  @click="addListItem(index)"
+                >
+                  <el-icon :size="12"><Plus /></el-icon>
+                </el-button>
+                <el-button
+                  :disabled="flowStore.disableForm"
+                  circle
+                  size="small"
+                  @click="removeListItem(index, pIndex)"
+                >
+                  <el-icon :size="12"><Minus /></el-icon>
+                </el-button>
+              </el-form-item>
+            </el-row>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="else" :id="''.concat(props.model.id, '_else')">
+      <div class="space"></div>
+      <div class="title">Else</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import NodeTitle from "../../components/NodeTitle.vue";
+import NodeState from "../../components/NodeState.vue";
+import switchSvg from "../../icon/switch.svg";
+import { v4 as randomUUID } from "uuid";
+import { useFlowStore } from "@/store/modules/flow";
+import { Plus, Minus } from "@element-plus/icons-vue";
+import { getInput, addNewEdge, removeSwitchEdge } from "@/utils/flow";
+import { emitter } from "@/utils/eventBus";
+
+const props = defineProps({
+  model: Object,
+  graphModel: Object,
+  properties: Object,
+  nowTime: Number,
+});
+
+const emits = defineEmits([
+  "addAnchor",
+  "removeAnchor",
+  "bindRef",
+  "changeAnchor",
+]);
+
+const switchRef = ref();
+const dynamicForm = ref();
+const flowStore = useFlowStore();
+
+const formData = reactive({
+  nodeParams: props.properties?.conditions || [],
+});
+
+const addFormItem = () => {
+  const rect = switchRef.value.getBoundingClientRect();
+  addCondition(rect.height - 60);
+};
+
+const deleteFormItem = (id, index) => {
+  if (index === 0) {
+    return;
+  }
+  formData.nodeParams.splice(index, 1);
+  emits("removeAnchor", id);
+  removeSwitchEdge(props.model.id, id);
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const quoteOptions = ref([]);
+const handleTypeChange = (pIndex, index) => {
+  if (formData.nodeParams[pIndex].list[index].type === "input") {
+    formData.nodeParams[pIndex].list[index].quote = "";
+  } else {
+    formData.nodeParams[pIndex].list[index].input = "";
+    const option = getInput(props.model.id, false);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const addCondition = (height) => {
+  const id = randomUUID().replace(/-/g, "");
+  formData.nodeParams.push({
+    id,
+    withOr: "and",
+    list: [
+      {
+        name: "",
+        nameQuote: "",
+        nameType: "input",
+        type: "input",
+        input: "",
+        quote: "",
+      },
+    ],
+  });
+  emits("addAnchor", height, id);
+
+  setTimeout(() => {
+    addNewEdge(props.model.id);
+  }, 50);
+
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const addListItem = (pIndex, cIndex) => {
+  formData.nodeParams[pIndex].list.push({
+    name: "",
+    nameQuote: "",
+    nameType: "input",
+    type: "input",
+    input: "",
+    quote: "",
+  });
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const removeListItem = (pIndex, cIndex) => {
+  if (cIndex === 0) {
+    return;
+  }
+  formData.nodeParams[pIndex].list.splice(cIndex, 1);
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const changeFormItemHeight = () => {
+  formData.nodeParams.forEach((item) => {
+    const node = document.getElementById(item.id);
+    emits("changeAnchor", node.offsetTop, item.id);
+  });
+
+  const node = document.getElementById("".concat(props.model.id, "_else"));
+  emits("changeAnchor", node.offsetTop, "".concat(props.model.id, "_else"));
+};
+
+const setNodeProperties = async () => {
+  try {
+    const valid = await dynamicForm.value.validate();
+    if (valid) {
+      const data = toRaw(formData);
+      const properties = lf.getProperties(props.model.id);
+      lf.setProperties(props.model.id, {
+        ...properties,
+        ...data,
+      });
+      emits("contentChange");
+    }
+  } catch (error) {
+    dynamicForm.value.clearValidate();
+  }
+};
+
+const visibleChange = (value) => {
+  if (value) {
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const nodeOperatingStatus = ref("NORMAL");
+const inputJsonData = ref({});
+const outputJsonData = ref({});
+
+watch(
+  () => props.properties,
+  () => {
+    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
+      formData.nodeParams = props.properties.nodeParams;
+    } else {
+      if (formData.nodeParams.length === 0) {
+        addCondition(100);
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  emits("addAnchor", 280, "".concat(props.model.id, "_else"));
+
+  emits("bindRef", dynamicForm.value);
+
+  emitter.on("changeNodeState", (data) => {
+    if (data.nodeId === props.model.id) {
+      nodeOperatingStatus.value = data.status;
+      let inputData = {};
+      let output = {};
+      try {
+        inputData = JSON.parse(data.paramsIn) || {};
+        output = JSON.parse(data.paramsOut) || {};
+      } catch (error) {
+        inputData = data.paramsIn || {};
+        output = data.paramsOut || {};
+      }
+      inputJsonData.value = inputData;
+      outputJsonData.value = output;
+
+      emits("contentChange");
+    }
+  });
+
+  emitter.on("contentChange", (data) => {
+    if (data.id === props.model.id) {
+      nodeOperatingStatus.value = "NORMAL";
+      inputJsonData.value = {};
+      outputJsonData.value = {};
+
+      emits("contentChange");
+    }
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("changeNodeState");
+  emitter.off("contentChange");
+});
+</script>
+<style lang="scss" scoped>
+.node__container {
+  width: 720px;
+  height: auto;
+  background: #fff;
+  padding: 12px;
+  cursor: default;
+  border-radius: 12px;
+  border: 2px solid white;
+  box-shadow: 0 5px 15px 0#00000008;
+  position: relative;
+
+  .condition_title_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .space {
+        width: 4px;
+        height: 14px;
+        background: rgb(22, 100, 255);
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      .title {
+        margin-left: 8px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .el-button {
+      border: none;
+    }
+  }
+
+  .condition {
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+    background-color: #fafbfc;
+    padding: 8px 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title__container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .space {
+          width: 4px;
+          height: 14px;
+          background: rgb(22, 100, 255);
+          border-radius: 0px 4px 4px 0px;
+        }
+
+        .title {
+          margin-left: 8px;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .withOr {
+      margin-bottom: 12px;
+
+      .title {
+        font-size: 14px;
+        color: #737a87;
+        margin-bottom: 4px;
+      }
+    }
+
+    :deep(.form__container) {
+      .el-form-item {
+        margin-right: 20px;
+      }
+
+      .el-input {
+        width: 92px;
+      }
+
+      .el-select {
+        width: 92px;
+      }
+
+      .el-cascader {
+        width: 92px;
+      }
+    }
+  }
+
+  .else {
+    display: flex;
+    align-items: center;
+    background-color: #fafbfc;
+    padding: 8px 16px;
+
+    .space {
+      width: 4px;
+      height: 14px;
+      background: rgb(22, 100, 255);
+      border-radius: 0px 4px 4px 0px;
+    }
+
+    .title {
+      margin-left: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 20460d5..9c1c2ce 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -35,8 +35,8 @@ export default defineConfig(({mode, command}) => {
                     //杨 http://192.168.0.10:13080
                     //赵 http://10.148.108.58:13080
                     // dev http://10.148.20.34:13080
-                    // target: VITE_API_URL,
-                    target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
+                    target: VITE_API_URL,
+                    // target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')
                 }