From d6c65a077b2f1df74c2337f3d7bb550b024f9174 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Thu, 23 Jan 2025 15:48:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=9A=97=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E4=B8=8B=E8=8A=82=E7=82=B9=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/theme.scss                  |  6 +++
 .../components/workFlowConfig/CustomNode.vue  | 52 ++++++++++++++++++-
 .../workFlowConfig/CustomSaENode.vue          |  2 +-
 .../workFlowConfig/yamlEditDrawer.vue         |  4 +-
 4 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 7a4a6dc1..1ce65270 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -12,6 +12,9 @@ body[theme='dark'] {
   --o-bash-bg: #2a2f37;
   --o-flow-code-bg: rgb(42,47,55);
   --o-flow-code-border: rgb(62,69,81);
+  --flow-node-default-over_color: #25303E;
+  --flow-node-success-over_color: #1F312A;
+  --flow-node-error-over_color: #332127;
 }
 
 body[theme='light'] {
@@ -28,4 +31,7 @@ body[theme='light'] {
   --o-bash-bg: #f4f6fa;
   --o-flow-code-bg: rgb(244,256,258);
   --o-flow-code-border: rgb(223,229,239);
+  --flow-node-default-over_color: #EEF3FE;
+  --flow-node-success-over_color: #E6F6E9;
+  --flow-node-error-over_color: #F8E7E7;
 }
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index f4dc8d27..06b05d36 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -56,6 +56,7 @@ const editYaml = id => {
   <div class="customNodeStyle" :class="curStatus">
     <Handle type="target" :position="Position.Left"></Handle>
     <div class="outHandleRing outRingLeft"></div>
+    <div class="delOverShadow leftBox"></div>
     <div class="nodeBox">
       <div class="title" v-if="props.data.label">
         <div class="iconStyle"></div>
@@ -71,6 +72,7 @@ const editYaml = id => {
       <div class="desc" v-if="props.data.desc">{{ props.data.desc }}</div>
     </div>
     <Handle type="source" :position="Position.Right"></Handle>
+    <div class="delOverShadow rightBox"></div>
     <div class="outHandleRing outRingRight"></div>
   </div>
 </template>
@@ -79,6 +81,7 @@ const editYaml = id => {
 .vue-flow__node {
   min-width: 200px;
   padding: 0px;
+  margin-top: -4px;
   .customNodeStyle {
     width: 328px;
     height: fit-content;
@@ -128,10 +131,12 @@ const editYaml = id => {
       width: 16px;
       height: 16px;
       border-radius: 50%;
-      background: rgb(253, 254, 255);
+      background: var(--o-bg-color-base);
       display: flex;
       align-items: center;
       justify-content: center;
+      border: none;
+      z-index: 2;
     }
 
     .vue-flow__handle-right::after {
@@ -148,10 +153,12 @@ const editYaml = id => {
       width: 16px;
       height: 16px;
       border-radius: 50%;
-      background: rgb(253, 254, 255);
+      background: var(--o-bg-color-base);
       display: flex;
       align-items: center;
       justify-content: center;
+      border: none;
+      z-index: 2;
     }
 
     .vue-flow__handle-left::after {
@@ -182,6 +189,20 @@ const editYaml = id => {
       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);
@@ -226,6 +247,12 @@ const editYaml = id => {
         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);
+      }
     }
   }
 
@@ -269,6 +296,12 @@ const editYaml = id => {
       .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);
+      }
     }
   }
 
@@ -304,6 +337,12 @@ const editYaml = id => {
         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 {
@@ -312,9 +351,18 @@ const editYaml = id => {
       .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;
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index dde63133..57a01c2a 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -92,7 +92,7 @@ watch(
 .nodeSaEBorder {
   width: 56px;
   height: 56px;
-  background: rgb(253, 254, 255);
+  background: var(--o-bg-color-base);
   display: flex;
   align-items: center;
   border-radius: 8px;
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index e2f71a45..6cb5ab16 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -37,9 +37,11 @@ const closeDrawer = () => {
 </script>
 
 <style lang="scss">
-.flowDrawer {
+.flowDrawer.el-drawer {
   padding: 0px;
   background-color: var(--o-bg-color-base);
+  top: 48px;
+  height: calc(100% - 48px);
   .el-drawer__header {
     padding: 24px 24px 16px;
     margin-bottom: 0px;
-- 
Gitee