style: 暗黑模式

src/assets/styles/variables.module.scss

@@ -1,12 +1,12 @@
 // base color
 $blue: #324157;
 $light-blue: #333c46;
-$red: #C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow: #FEC171;
-$panGreen: #30B08F;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
 
 // 默认主题变量
 $menuText: #bfcbd9;
@@ -18,7 +18,7 @@ $menuHover: #263445;
 $menuLightBg: #ffffff;
 $menuLightHover: #f0f1f5;
 $menuLightText: #303133;
-$menuLightActiveText: #409EFF;
+$menuLightActiveText: #409eff;
 
 // 基础变量
 $base-sidebar-width: 200px;
@@ -32,10 +32,10 @@ $base-sub-menu-background: #1f2d3d;
 $base-sub-menu-hover: #001528;
 
 // 组件变量
-$--color-primary: #409EFF;
-$--color-success: #67C23A;
-$--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
+$--color-primary: #409eff;
+$--color-success: #67c23a;
+$--color-warning: #e6a23c;
+$--color-danger: #f56c6c;
 $--color-info: #909399;
 
 :export {
@@ -78,12 +78,12 @@ $--color-info: #909399;
   /* splitpanes default-theme 变量 */
   --splitpanes-default-bg: #ffffff;
 
-  --main-fill-bg:rgb(242, 243, 245);
+  --main-fill-bg: rgb(242, 243, 245);
 }
 
 // 暗黑模式变量
 html.dark {
-  --main-fill-bg:rgba(255, 255, 255, .08);
+  --main-fill-bg: rgba(255, 255, 255, 0.08);
   /* 默认通用 */
   --el-bg-color: #141414;
   --el-bg-color-overlay: #1d1e1f;
@@ -130,10 +130,11 @@ html.dark {
 
   /* 侧边栏菜单覆盖 */
   .sidebar-container {
-    .el-menu-item, .menu-title {
+    .el-menu-item,
+    .menu-title {
       color: var(--el-text-color-regular);
     }
-    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: var(--el-bg-color) !important;
     }
@@ -182,7 +183,8 @@ html.dark {
     --el-table-border-color: var(--el-border-color-light) !important;
     --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
 
-    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       th {
         background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
         color: var(--el-text-color-regular, #515a6e);
@@ -203,7 +205,8 @@ html.dark {
   }
 
   /* 下拉菜单样式覆盖 */
-  .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
+  .el-dropdown-menu__item:not(.is-disabled):focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
     background-color: var(--navbar-hover) !important;
   }
 
@@ -219,5 +222,65 @@ html.dark {
     background: var(--cron-border);
   }
 
-}
+  .el-aside {
+    background: #4d4d4d;
+  }
 
+  .el-header {
+    border-bottom: 1px solid #282828 !important;
+  }
+
+  .el-collapse {
+    --el-collapse-header-bg-color: #000;
+
+    .collapseItem {
+      .el-collapse-item__wrap {
+        background-color: #3c3c3c;
+
+        .node {
+          background-color: #000;
+
+          .title_container {
+            color: #fff;
+          }
+
+          .node_desc {
+            color: #f7f7f7;
+          }
+        }
+      }
+    }
+  }
+
+  .node__container {
+    background: #000;
+    // border: 2px solid #000;
+
+    .subTitle {
+      color: #fbfbfb !important;
+    }
+  }
+
+  .node__box {
+    background: #000;
+    border: 2px solid #000;
+
+    .subTitle {
+      color: #fbfbfb !important;
+    }
+
+    .input__container {
+      background: #2d2d2d;
+
+      .title {
+        .text {
+          color: #fbfbfb !important;
+        }
+      }
+    }
+  }
+
+  .lf-canvas-overlay {
+    background: #3e3e3e !important;
+  }
+}

src/views/flow/nodes/common/endNode.vue

@@ -24,15 +24,6 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-@keyframes rotateAnimation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .node__container {
   width: 300px;
   height: auto;
@@ -40,7 +31,7 @@ const props = defineProps({
   padding: 12px;
   cursor: default;
   border-radius: 12px;
-  border: 2px solid white;
+  border: 2px solid transparent;
   box-shadow: 0 5px 15px 0#00000008;
   position: relative;
 
@@ -98,7 +89,6 @@ const props = defineProps({
     .el-icon {
       color: #68a2e4;
       font-size: 16px;
-      animation: rotateAnimation 2s linear infinite;
     }
   }