diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue
index 73f66b60ec374a937f4f3a3baa252990df9a9c70..e7d38f746fe0a19cba5e61d263e096760e5e8a57 100644
--- a/src/views/createapp/components/workFlowConfig/BranchNode.vue
+++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue
@@ -43,13 +43,12 @@ watch(
   { deep: true, immediate: true },
 );
 
-
 const delNode = id => {
   emits('delNode', id);
 };
 
 // 编辑yaml
-const editYaml = (nodeName, yamlCode)=> {
+const editYaml = (nodeName, yamlCode) => {
   emits('editYamlDrawer', nodeName, yamlCode);
 };
 </script>
@@ -66,15 +65,29 @@ const editYaml = (nodeName, yamlCode)=> {
         <div class="moreTip">
           <el-popover placement="right" trigger="hover" popper-class="nodeDealPopper">
             <template #reference>···</template>
-            <el-button text class="dealItem" @click="editYaml(props.data.name,props.data.parametersTemplate)">编辑</el-button>
+            <el-button text class="dealItem" @click="editYaml(props.data.name, props.data.parametersTemplate)"
+              >编辑</el-button
+            >
             <el-button text class="dealItem" @click="delNode(props.id)">删除</el-button>
           </el-popover>
         </div>
       </div>
       <div class="desc" v-if="props.data.description">{{ props.data.description }}</div>
     </div>
-    <Handle class="souceFirstHandle" :connectable="props.data?.isConnectSourceA" :id="BranchSourceIdType.SOURCEA" type="source" :position="Position.Right"></Handle>
-    <Handle class="souceSecondHandle" :connectable="props.data?.isConnectSourceB" :id="BranchSourceIdType.SOURCEB" type="source" :position="Position.Right"></Handle>
+    <Handle
+      class="souceFirstHandle"
+      :connectable="props.data?.isConnectSourceA"
+      :id="BranchSourceIdType.SOURCEA"
+      type="source"
+      :position="Position.Right"
+    ></Handle>
+    <Handle
+      class="souceSecondHandle"
+      :connectable="props.data?.isConnectSourceB"
+      :id="BranchSourceIdType.SOURCEB"
+      type="source"
+      :position="Position.Right"
+    ></Handle>
     <div class="delOverShadow rightBox" style="top: 0%"></div>
     <div class="delOverShadow rightBox" style="top: 50%"></div>
     <div class="outHandleRing outRingRight" style="top: 30%"></div>
@@ -84,337 +97,13 @@ const editYaml = (nodeName, yamlCode)=> {
 
 <style lang="scss">
 .vue-flow__node {
-  min-width: 200px;
-  padding: 0px;
-  margin-top: -4px;
   .customNodeStyle {
-    width: 328px;
-    height: fit-content;
-    border-radius: 4px;
-    border: 4px solid transparent;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
-    background-color: var(--o-bg-color-base);
-    position: relative;
-    .nodeBox {
-      padding: 16px 18px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      .title {
-        display: flex;
-        height: 24px;
-        font-size: 16px;
-        color: var(--o-text-color-primary);
-        gap: 8px;
-        .iconStyle {
-          width: 24px;
-          height: 24px;
-          background: linear-gradient(120deg, rgba(109, 117, 250, 0.15), rgba(90, 179, 255, 0.15));
-        }
-        .label {
-          flex: 1;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .moreTip {
-          margin-left: auto;
-          width: 24px;
-          &:hover {
-            color: #6395fd;
-          }
-        }
-      }
-      .desc {
-        font-size: 12px;
-        color: var(--o-text-color-tertiary);
-      }
-    }
-    .vue-flow__handle-right {
-      right: 0px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--o-bg-color-base);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      z-index: 2;
-    }
     .vue-flow__handle-right.souceFirstHandle {
       top: 30%;
     }
-    
     .vue-flow__handle-right.souceSecondHandle {
       top: 70%;
     }
-
-    .vue-flow__handle-right::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
-    }
-    .vue-flow__handle-left {
-      top: 50%;
-      left: 0px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--o-bg-color-base);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      z-index: 2;
-    }
-
-    .vue-flow__handle-left::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
-    }
-    .outHandleRing {
-      position: absolute;
-      display: block;
-      width: 24px;
-      height: 24px;
-      background: #fff;
-      border-radius: 50%;
-      top: 50%;
-      z-index: -1;
-    }
-    .outRingLeft {
-      display: none;
-      left: -12px;
-      margin-top: -12px;
-    }
-    .outRingRight {
-      display: none;
-      right: -12px;
-      margin-top: -12px;
-    }
-    .delOverShadow {
-      width: 8px;
-      height: 50%;
-      position: absolute;
-      background-color: transparent;
-      top: 20px;
-      z-index: 1;
-    }
-    .leftBox {
-      left: -12px;
-    }
-    .rightBox {
-      right: -12px;
-    }
-    &:hover {
-      border: 4px solid rgba(99, 149, 253, 0.3);
-      box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-      .vue-flow__handle-left {
-        width: 24px;
-        height: 24px;
-        left: -12px;
-        margin-top: -12px;
-        transform: rotate(-45deg);
-        border: 4px solid rgba(99, 149, 253, 0.3);
-        border-right: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        &::after {
-          border: 4px solid rgba(99, 149, 253, 0.3);
-          background: rgba(99, 149, 253);
-          background-clip: content-box;
-        }
-      }
-      .vue-flow__handle-right {
-        right: -8px;
-        width: 24px;
-        height: 24px;
-        right: -12px;
-        margin-top: -12px;
-        transform: rotate(45deg);
-        border: 4px solid rgba(99, 149, 253, 0.3);
-        border-left: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        &::after {
-          border: 4px solid rgba(99, 149, 253, 0.3);
-          background: rgba(99, 149, 253);
-          background-clip: content-box;
-        }
-      }
-      .vue-flow__handle-right.souceFirstHandle {
-        top: 30%;
-      }
-      .vue-flow__handle-right.souceSecondHandle {
-        top: 70%;
-      }
-      .outRingLeft {
-        display: block;
-        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-        background-clip: content-box;
-      }
-      .outRingRight {
-        display: block;
-        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-        background-clip: content-box;
-      }
-      .leftBox {
-        background-color: var(--flow-node-default-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-default-over-color);
-      }
-    }
-  }
-
-  .customNodeStyle.success {
-    border: 4px solid rgba(36, 171, 54, 0.3);
-    .vue-flow__handle-left {
-      transform: rotate(-45deg);
-      width: 24px;
-      height: 24px;
-      left: -12px;
-      margin-top: -12px;
-      border: 4px solid rgba(36, 171, 54, 0.3);
-      border-right: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(36, 171, 54, 0.3);
-        background: rgb(36, 171, 54);
-        background-clip: content-box;
-      }
-    }
-    .vue-flow__handle-right {
-      width: 24px;
-      height: 24px;
-      right: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(36, 171, 54, 0.3);
-      border-left: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      .vue-flow__handle-right.souceFirstHandle {
-        top: 30%;
-      }
-      .vue-flow__handle-right.souceSecondHandle {
-        top: 70%;
-      }
-      &::after {
-        border: 4px solid rgb(36, 171, 54, 0.3);
-        background: rgb(36, 171, 54);
-        background-clip: content-box;
-      }
-    }
-    &:hover {
-      box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      .outRingLeft {
-        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      }
-      .outRingRight {
-        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      }
-      .leftBox {
-        background-color: var(--flow-node-success-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-success-over-color);
-      }
-    }
-  }
-
-  .customNodeStyle.error {
-    border: 4px solid rgba(227, 32, 32, 0.3);
-    .vue-flow__handle-left {
-      transform: rotate(-45deg);
-      width: 24px;
-      height: 24px;
-      left: -12px;
-      margin-top: -12px;
-      border: 4px solid rgba(227, 32, 32, 0.3);
-      border-right: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(227, 32, 32, 0.3);
-        background: rgb(227, 32, 32);
-        background-clip: content-box;
-      }
-    }
-    .vue-flow__handle-right {
-      width: 24px;
-      height: 24px;
-      right: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(227, 32, 32, 0.3);
-      border-left: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      .vue-flow__handle-right.souceFirstHandle {
-        top: 30%;
-      }
-      .vue-flow__handle-right.souceSecondHandle {
-        top: 70%;
-      }
-      &::after {
-        border: 4px solid rgb(227, 32, 32, 0.3);
-        background: rgb(227, 32, 32);
-        background-clip: content-box;
-      }
-    }
-    .leftBox {
-      background-color: transparent;
-    }
-    .rightBox {
-      background-color: transparent;
-    }
-    &:hover {
-      box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      .outRingLeft {
-        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      }
-      .outRingRight {
-        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      }
-      .leftBox {
-        background-color: var(--flow-node-error-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-error-over-color);
-      }
-    }
-  }
-}
-.vue-flow__node:has(.default) {
-  margin-top: 0px;
-}
-.nodeDealPopper {
-  width: 64px !important;
-  min-width: 64px !important;
-  height: 72px;
-  padding: 4px 0px !important;
-  border-radius: 4px;
-  .dealItem {
-    display: block;
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    margin-left: 0px;
-    color: var(--o-text-color-secondary);
-    &:hover {
-      span {
-        color: var(--o-color-white) !important;
-      }
-      background-color: var(--o-color-primary-secondary) !important;
-    }
-  }
-  &:hover {
-    border: 1px solid var(--o-color-primary-secondary) !important;
   }
 }
 </style>
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 52aa8466dda19bcfa905ff33bfe81b813a62617a..062099c28ba49b399ea8a18abe05611237030b30 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -47,8 +47,8 @@ const delNode = id => {
 };
 
 // 编辑yaml
-const editYaml = (nodeName ,yamlCode)=> {
-  emits('editYamlDrawer', nodeName,yamlCode);
+const editYaml = (nodeName, yamlCode) => {
+  emits('editYamlDrawer', nodeName, yamlCode);
 };
 </script>
 
@@ -64,7 +64,9 @@ const editYaml = (nodeName ,yamlCode)=> {
         <div class="moreTip">
           <el-popover placement="right" trigger="hover" popper-class="nodeDealPopper">
             <template #reference>···</template>
-            <el-button text class="dealItem" @click="editYaml(props.data.name,props.data.parametersTemplate)">编辑</el-button>
+            <el-button text class="dealItem" @click="editYaml(props.data.name, props.data.parametersTemplate)"
+              >编辑</el-button
+            >
             <el-button text class="dealItem" @click="delNode(props.id)">删除</el-button>
           </el-popover>
         </div>
@@ -79,316 +81,3 @@ const editYaml = (nodeName ,yamlCode)=> {
     <div class="outHandleRing outRingRight"></div>
   </div>
 </template>
-
-<style lang="scss">
-.vue-flow__node {
-  min-width: 200px;
-  padding: 0px;
-  margin-top: -4px;
-  .customNodeStyle {
-    width: 328px;
-    height: fit-content;
-    border-radius: 4px;
-    border: 4px solid transparent;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
-    background-color: var(--o-bg-color-base);
-    position: relative;
-    .nodeBox {
-      padding: 16px 18px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      .title {
-        display: flex;
-        height: 24px;
-        font-size: 16px;
-        color: var(--o-text-color-primary);
-        gap: 8px;
-        .iconStyle {
-          width: 24px;
-          height: 24px;
-          background: linear-gradient(120deg, rgba(109, 117, 250, 0.15), rgba(90, 179, 255, 0.15));
-        }
-        .label {
-          flex: 1;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .moreTip {
-          margin-left: auto;
-          width: 24px;
-          &:hover {
-            color: #6395fd;
-          }
-        }
-      }
-      .desc {
-        font-size: 12px;
-        color: var(--o-text-color-tertiary);
-      }
-    }
-    .vue-flow__handle-right {
-      top: 50%;
-      right: 0px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--o-bg-color-base);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      z-index: 2;
-    }
-
-    .vue-flow__handle-right::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
-    }
-    .vue-flow__handle-left {
-      top: 50%;
-      left: 0px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--o-bg-color-base);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      z-index: 2;
-    }
-
-    .vue-flow__handle-left::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
-    }
-    .outHandleRing {
-      position: absolute;
-      display: block;
-      width: 24px;
-      height: 24px;
-      background: #fff;
-      border-radius: 50%;
-      top: 50%;
-      z-index: -1;
-    }
-    .outRingLeft {
-      display: none;
-      left: -12px;
-      margin-top: -12px;
-    }
-    .outRingRight {
-      display: none;
-      right: -12px;
-      margin-top: -12px;
-    }
-    .delOverShadow {
-      width: 8px;
-      height: 40px;
-      position: absolute;
-      background-color: transparent;
-      top: 20px;
-      z-index: 1;
-    }
-    .leftBox {
-      left: -12px;
-    }
-    .rightBox {
-      right: -12px;
-    }
-    &:hover {
-      border: 4px solid rgba(99, 149, 253, 0.3);
-      box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-      .vue-flow__handle-left {
-        width: 24px;
-        height: 24px;
-        left: -12px;
-        margin-top: -12px;
-        transform: rotate(-45deg);
-        border: 4px solid rgba(99, 149, 253, 0.3);
-        border-right: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        &::after {
-          border: 4px solid rgba(99, 149, 253, 0.3);
-          background: rgba(99, 149, 253);
-          background-clip: content-box;
-        }
-      }
-      .vue-flow__handle-right {
-        right: -8px;
-        width: 24px;
-        height: 24px;
-        right: -12px;
-        margin-top: -12px;
-        transform: rotate(45deg);
-        border: 4px solid rgba(99, 149, 253, 0.3);
-        border-left: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        &::after {
-          border: 4px solid rgba(99, 149, 253, 0.3);
-          background: rgba(99, 149, 253);
-          background-clip: content-box;
-        }
-      }
-      .outRingLeft {
-        display: block;
-        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-        background-clip: content-box;
-      }
-      .outRingRight {
-        display: block;
-        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-        background-clip: content-box;
-      }
-      .leftBox {
-        background-color: var(--flow-node-default-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-default-over-color);
-      }
-    }
-  }
-
-  .customNodeStyle.success {
-    border: 4px solid rgba(36, 171, 54, 0.3);
-    .vue-flow__handle-left {
-      transform: rotate(-45deg);
-      width: 24px;
-      height: 24px;
-      left: -12px;
-      margin-top: -12px;
-      border: 4px solid rgba(36, 171, 54, 0.3);
-      border-right: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(36, 171, 54, 0.3);
-        background: rgb(36, 171, 54);
-        background-clip: content-box;
-      }
-    }
-    .vue-flow__handle-right {
-      width: 24px;
-      height: 24px;
-      right: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(36, 171, 54, 0.3);
-      border-left: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(36, 171, 54, 0.3);
-        background: rgb(36, 171, 54);
-        background-clip: content-box;
-      }
-    }
-    &:hover {
-      box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      .outRingLeft {
-        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      }
-      .outRingRight {
-        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
-      }
-      .leftBox {
-        background-color: var(--flow-node-success-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-success-over-color);
-      }
-    }
-  }
-
-  .customNodeStyle.error {
-    border: 4px solid rgba(227, 32, 32, 0.3);
-    .vue-flow__handle-left {
-      transform: rotate(-45deg);
-      width: 24px;
-      height: 24px;
-      left: -12px;
-      margin-top: -12px;
-      border: 4px solid rgba(227, 32, 32, 0.3);
-      border-right: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(227, 32, 32, 0.3);
-        background: rgb(227, 32, 32);
-        background-clip: content-box;
-      }
-    }
-    .vue-flow__handle-right {
-      width: 24px;
-      height: 24px;
-      right: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(227, 32, 32, 0.3);
-      border-left: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgb(227, 32, 32, 0.3);
-        background: rgb(227, 32, 32);
-        background-clip: content-box;
-      }
-    }
-    .leftBox {
-      background-color: transparent;
-    }
-    .rightBox {
-      background-color: transparent;
-    }
-    &:hover {
-      box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      .outRingLeft {
-        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      }
-      .outRingRight {
-        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
-      }
-      .leftBox {
-        background-color: var(--flow-node-error-over-color);
-      }
-      .rightBox {
-        background-color: var(--flow-node-error-over-color);
-      }
-    }
-  }
-}
-.vue-flow__node:has(.default) {
-  margin-top: 0px;
-}
-.nodeDealPopper {
-  width: 64px !important;
-  min-width: 64px !important;
-  height: 72px;
-  padding: 4px 0px !important;
-  border-radius: 4px;
-  .dealItem {
-    display: block;
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    margin-left: 0px;
-    color: var(--o-text-color-secondary);
-    &:hover {
-      span {
-        color: var(--o-color-white) !important;
-      }
-      background-color: var(--o-color-primary-secondary) !important;
-    }
-  }
-  &:hover {
-    border: 1px solid var(--o-color-primary-secondary) !important;
-  }
-}
-</style>
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index aea28d69759f371b3aad64d345e9e25343563ac4..a6897eafdfb7df188373f0965ef936843d43deef 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -101,6 +101,9 @@
           border-color: var(--o-border-color-lighter);
           border-radius: 4px;
         }
+        .el-input__suffix::after {
+          margin-top: 7px;
+        }
       }
     }
 
@@ -199,3 +202,314 @@
     left: 0;
   }
 }
+
+// 各节点的状态样式提取
+.vue-flow__node {
+  min-width: 200px;
+  padding: 0px;
+  margin-top: -4px;
+  .customNodeStyle {
+    width: 328px;
+    height: fit-content;
+    border-radius: 4px;
+    border: 4px solid transparent;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+    background-color: var(--o-bg-color-base);
+    position: relative;
+    .nodeBox {
+      min-height: 78px;
+      padding: 16px 18px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      .title {
+        display: flex;
+        height: 24px;
+        font-size: 16px;
+        color: var(--o-text-color-primary);
+        gap: 8px;
+        .iconStyle {
+          width: 24px;
+          height: 24px;
+          background: linear-gradient(120deg, rgba(109, 117, 250, 0.15), rgba(90, 179, 255, 0.15));
+        }
+        .label {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .moreTip {
+          margin-left: auto;
+          width: 24px;
+          &:hover {
+            color: #6395fd;
+          }
+        }
+      }
+      .desc {
+        font-size: 12px;
+        color: var(--o-text-color-tertiary);
+      }
+    }
+    .vue-flow__handle-right {
+      top: 50%;
+      right: 0px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--o-bg-color-base);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      z-index: 2;
+    }
+    .vue-flow__handle-right::after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border: 4px solid rgb(223, 229, 239);
+      border-radius: 50%;
+      background: rgb(141, 152, 170);
+    }
+    .vue-flow__handle-left {
+      top: 50%;
+      left: 0px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--o-bg-color-base);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      z-index: 2;
+    }
+
+    .vue-flow__handle-left::after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border: 4px solid rgb(223, 229, 239);
+      border-radius: 50%;
+      background: rgb(141, 152, 170);
+    }
+    .outHandleRing {
+      position: absolute;
+      display: block;
+      width: 24px;
+      height: 24px;
+      background: #fff;
+      border-radius: 50%;
+      top: 50%;
+      z-index: -1;
+    }
+    .outRingLeft {
+      display: none;
+      left: -12px;
+      margin-top: -12px;
+    }
+    .outRingRight {
+      display: none;
+      right: -12px;
+      margin-top: -12px;
+    }
+    .delOverShadow {
+      width: 8px;
+      height: 40px;
+      position: absolute;
+      background-color: transparent;
+      top: 20px;
+      z-index: 1;
+    }
+    .leftBox {
+      left: -12px;
+    }
+    .rightBox {
+      right: -12px;
+    }
+    &:hover {
+      border: 4px solid rgba(99, 149, 253, 0.3);
+      box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
+      .vue-flow__handle-left {
+        width: 24px;
+        height: 24px;
+        left: -12px;
+        margin-top: -12px;
+        transform: rotate(-45deg);
+        border: 4px solid rgba(99, 149, 253, 0.3);
+        border-right: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        &::after {
+          border: 4px solid rgba(99, 149, 253, 0.3);
+          background: rgba(99, 149, 253);
+          background-clip: content-box;
+        }
+      }
+      .vue-flow__handle-right {
+        width: 24px;
+        height: 24px;
+        right: -12px;
+        margin-top: -12px;
+        transform: rotate(45deg);
+        border: 4px solid rgba(99, 149, 253, 0.3);
+        border-left: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        &::after {
+          border: 4px solid rgba(99, 149, 253, 0.3);
+          background: rgba(99, 149, 253);
+          background-clip: content-box;
+        }
+      }
+      .outRingLeft {
+        display: block;
+        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
+        background-clip: content-box;
+      }
+      .outRingRight {
+        display: block;
+        box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
+        background-clip: content-box;
+      }
+      .leftBox {
+        background-color: var(--flow-node-default-over-color);
+      }
+      .rightBox {
+        background-color: var(--flow-node-default-over-color);
+      }
+    }
+  }
+
+  .customNodeStyle.success {
+    border: 4px solid rgba(36, 171, 54, 0.3);
+    .vue-flow__handle-left {
+      transform: rotate(-45deg);
+      width: 24px;
+      height: 24px;
+      left: -12px;
+      margin-top: -12px;
+      border: 4px solid rgba(36, 171, 54, 0.3);
+      border-right: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      &::after {
+        border: 4px solid rgba(36, 171, 54, 0.3);
+        background: rgb(36, 171, 54);
+        background-clip: content-box;
+      }
+    }
+    .vue-flow__handle-right {
+      width: 24px;
+      height: 24px;
+      right: -12px;
+      margin-top: -12px;
+      transform: rotate(45deg);
+      border: 4px solid rgba(36, 171, 54, 0.3);
+      border-left: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      &::after {
+        border: 4px solid rgba(36, 171, 54, 0.3);
+        background: rgb(36, 171, 54);
+        background-clip: content-box;
+      }
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
+      .outRingLeft {
+        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
+      }
+      .outRingRight {
+        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
+      }
+      .leftBox {
+        background-color: var(--flow-node-success-over-color);
+      }
+      .rightBox {
+        background-color: var(--flow-node-success-over-color);
+      }
+    }
+  }
+
+  .customNodeStyle.error {
+    border: 4px solid rgba(227, 32, 32, 0.3);
+    .vue-flow__handle-left {
+      transform: rotate(-45deg);
+      width: 24px;
+      height: 24px;
+      left: -12px;
+      margin-top: -12px;
+      border: 4px solid rgba(227, 32, 32, 0.3);
+      border-right: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      &::after {
+        border: 4px solid rgba(227, 32, 32, 0.3);
+        background: rgb(227, 32, 32);
+        background-clip: content-box;
+      }
+    }
+    .vue-flow__handle-right {
+      width: 24px;
+      height: 24px;
+      right: -12px;
+      margin-top: -12px;
+      transform: rotate(45deg);
+      border: 4px solid rgba(227, 32, 32, 0.3);
+      border-left: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      &::after {
+        border: 4px solid rgba(227, 32, 32, 0.3);
+        background: rgb(227, 32, 32);
+        background-clip: content-box;
+      }
+    }
+    .leftBox {
+      background-color: transparent;
+    }
+    .rightBox {
+      background-color: transparent;
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
+      .outRingLeft {
+        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
+      }
+      .outRingRight {
+        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
+      }
+      .leftBox {
+        background-color: var(--flow-node-error-over-color);
+      }
+      .rightBox {
+        background-color: var(--flow-node-error-over-color);
+      }
+    }
+  }
+}
+.vue-flow__node:has(.default) {
+  margin-top: 0px;
+}
+.nodeDealPopper {
+  width: 64px !important;
+  min-width: 64px !important;
+  height: 72px;
+  padding: 4px 0px !important;
+  border-radius: 4px;
+  .dealItem {
+    display: block;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin-left: 0px;
+    color: var(--o-text-color-secondary);
+    &:hover {
+      span {
+        color: var(--o-color-white) !important;
+      }
+      background-color: var(--o-color-primary-secondary) !important;
+    }
+  }
+  &:hover {
+    border: 1px solid var(--o-color-primary-secondary) !important;
+  }
+}