From 6cf20cee34d125fed6ff8484c844f2c824242f94 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 Dec 2024 16:39:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20scss=E4=B8=AD=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8use=E6=9B=BF=E6=8D=A2import?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/theme/common/var.scss     | 20 +++----
 .../src/theme/component-list-panel.scss       | 16 +++---
 packages/editor/src/theme/content-menu.scss   | 12 ++--
 packages/editor/src/theme/data-source.scss    |  4 +-
 packages/editor/src/theme/floating-box.scss   |  6 +-
 packages/editor/src/theme/framework.scss      | 12 ++--
 packages/editor/src/theme/index.scss          |  9 ++-
 packages/editor/src/theme/layer-panel.scss    |  4 +-
 packages/editor/src/theme/nav-menu.scss       | 12 ++--
 packages/editor/src/theme/page-bar.scss       | 32 ++++++-----
 packages/editor/src/theme/sidebar.scss        |  6 +-
 packages/editor/src/theme/stage.scss          |  4 +-
 packages/editor/src/theme/theme.scss          | 56 +++++++++----------
 packages/editor/src/theme/tree.scss           | 26 +++++----
 14 files changed, 120 insertions(+), 99 deletions(-)

diff --git a/packages/editor/src/theme/common/var.scss b/packages/editor/src/theme/common/var.scss
index 5e4192be..eddbe735 100644
--- a/packages/editor/src/theme/common/var.scss
+++ b/packages/editor/src/theme/common/var.scss
@@ -1,14 +1,14 @@
-$--theme-color: #2882e0;
+$theme-color: #2882e0;
 
-$--font-color: #313a40;
-$--border-color: #d9dbdd;
-$--hover-color: #f3f5f9;
+$font-color: #313a40;
+$border-color: #d9dbdd;
+$hover-color: #f3f5f9;
 
-$--nav-height: 35px;
-$--nav-color: #313a40;
-$--nav--background-color: #ffffff;
+$nav-height: 35px;
+$nav-color: #313a40;
+$nav--background-color: #ffffff;
 
-$--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #ffffff;
+$sidebar-heder-background-color: $theme-color;
+$sidebar-content-background-color: #ffffff;
 
-$--page-bar-height: 32px;
+$page-bar-height: 32px;
diff --git a/packages/editor/src/theme/component-list-panel.scss b/packages/editor/src/theme/component-list-panel.scss
index b9129c09..63e56412 100644
--- a/packages/editor/src/theme/component-list-panel.scss
+++ b/packages/editor/src/theme/component-list-panel.scss
@@ -1,20 +1,22 @@
+@use "common/var" as *;
+
 .ui-component-panel {
   &.tmagic-design-collapse {
     border-top: 0 !important;
     margin-top: 48px;
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
 
     .tmagic-design-collapse-item {
       > div:first-of-type {
-        border-bottom: 1px solid $--border-color;
+        border-bottom: 1px solid $border-color;
         margin-bottom: 10px;
       }
     }
 
     .el-collapse-item__header,
     .t-collapse-panel__header {
-      background: $--sidebar-content-background-color;
-      color: $--font-color;
+      background: $sidebar-content-background-color;
+      color: $font-color;
       height: 25px;
       line-height: 25px;
       padding-left: 10px;
@@ -28,7 +30,7 @@
 
     .el-collapse-item__wrap,
     .t-collapse-panel__body {
-      background: $--sidebar-content-background-color;
+      background: $sidebar-content-background-color;
       border-bottom: 0;
 
       .el-collapse-item__content,
@@ -44,7 +46,7 @@
         text-overflow: ellipsis;
         margin: 5px 10px;
         box-sizing: border-box;
-        color: $--font-color;
+        color: $font-color;
         flex-direction: column;
         width: 42px;
         cursor: pointer;
@@ -57,7 +59,7 @@
           line-height: 40px;
           border-radius: 5px;
           color: #909090;
-          border: 1px solid $--border-color;
+          border: 1px solid $border-color;
           display: flex;
           justify-content: space-evenly;
           align-items: center;
diff --git a/packages/editor/src/theme/content-menu.scss b/packages/editor/src/theme/content-menu.scss
index cac484b4..d89d3b09 100644
--- a/packages/editor/src/theme/content-menu.scss
+++ b/packages/editor/src/theme/content-menu.scss
@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
@@ -29,7 +31,7 @@
 
     .el-button--text,
     i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .magic-editor-icon {
@@ -46,20 +48,20 @@
 
     &.button {
       &:hover {
-        background-color: $--hover-color;
+        background-color: $hover-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {
-          color: $--font-color;
+          color: $font-color;
         }
 
         &.menu-item i {
-          color: $--font-color;
+          color: $font-color;
         }
       }
 
       &.active {
-        background-color: $--theme-color;
+        background-color: $theme-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {
diff --git a/packages/editor/src/theme/data-source.scss b/packages/editor/src/theme/data-source.scss
index 3bf6cc83..93c540af 100644
--- a/packages/editor/src/theme/data-source.scss
+++ b/packages/editor/src/theme/data-source.scss
@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .data-source-list-panel {
   .list-container {
     .list-item {
@@ -25,7 +27,7 @@
     padding: 5px 14px;
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
     }
   }
 }
diff --git a/packages/editor/src/theme/floating-box.scss b/packages/editor/src/theme/floating-box.scss
index 3b033503..c6ce6ca2 100644
--- a/packages/editor/src/theme/floating-box.scss
+++ b/packages/editor/src/theme/floating-box.scss
@@ -1,8 +1,10 @@
+@use "common/var" as *;
+
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
   z-index: 100;
-  border: 1px solid $--border-color;
+  border: 1px solid $border-color;
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -17,7 +19,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid $--border-color;
+    border-bottom: 1px solid $border-color;
   }
 
   .m-editor-float-box-body {
diff --git a/packages/editor/src/theme/framework.scss b/packages/editor/src/theme/framework.scss
index 94779931..9b9ce645 100644
--- a/packages/editor/src/theme/framework.scss
+++ b/packages/editor/src/theme/framework.scss
@@ -1,10 +1,12 @@
+@use "common/var" as *;
+
 .m-editor {
   display: flex;
   flex-direction: column;
   width: 100%;
 
   &-content {
-    height: calc(100% - #{$--nav-height});
+    height: calc(100% - #{$nav-height});
   }
 
   &-framework-center {
@@ -14,7 +16,7 @@
   }
 
   &-framework-left {
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
   }
 
   &-framework-center .el-scrollbar__view {
@@ -32,7 +34,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - #{$--page-bar-height});
+      height: calc(100% - #{$page-bar-height});
     }
 
     &-content {
@@ -61,8 +63,8 @@
       }
 
       &:hover {
-        border-color: $--theme-color;
-        color: $--theme-color;
+        border-color: $theme-color;
+        color: $theme-color;
       }
     }
   }
diff --git a/packages/editor/src/theme/index.scss b/packages/editor/src/theme/index.scss
index 3a5311f6..9cfda344 100644
--- a/packages/editor/src/theme/index.scss
+++ b/packages/editor/src/theme/index.scss
@@ -1,8 +1,7 @@
-@import "@tmagic/design/src/theme/index.scss";
-@import "@tmagic/table/src/theme/index.scss";
-@import "@tmagic/form/src/theme/index.scss";
-@import "./common/var.scss";
-@import "./theme.scss";
+@use "@tmagic/design/src/theme/index.scss" as tMagicDesign;
+@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
+@use "@tmagic/form/src/theme/index.scss" as tMagicForm;
+@use "./theme.scss";
 
 .fade-enter-active,
 .fade-leave-active {
diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss
index f5431175..6797bb6c 100644
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/packages/editor/src/theme/layer-panel.scss
@@ -1,5 +1,7 @@
+@use "common/var" as *;
+
 .m-editor-layer-panel {
-  background: $--sidebar-content-background-color;
+  background: $sidebar-content-background-color;
 
   .m-editor-tree {
     padding-top: 48px;
diff --git a/packages/editor/src/theme/nav-menu.scss b/packages/editor/src/theme/nav-menu.scss
index d57cb396..cb498486 100644
--- a/packages/editor/src/theme/nav-menu.scss
+++ b/packages/editor/src/theme/nav-menu.scss
@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .m-editor-nav-menu {
   display: flex;
   z-index: 5;
@@ -5,13 +7,13 @@
   justify-content: space-between;
   -webkit-box-align: center;
   align-items: center;
-  background-color: $--nav--background-color;
+  background-color: $nav--background-color;
   font-size: 19.2px;
-  color: $--nav-color;
+  color: $nav-color;
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 $--nav-height;
+  flex: 0 0 $nav-height;
   border-bottom: 1px solid #d8dee8;
 
   > div {
@@ -54,7 +56,7 @@
     }
 
     .is-text > i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .icon {
@@ -66,7 +68,7 @@
     }
 
     .menu-item-text {
-      color: $--nav-color;
+      color: $nav-color;
     }
 
     &.rule {
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index 831f755a..fde0be16 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
@@ -9,24 +11,24 @@
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   z-index: 2;
   overflow: hidden;
   &:hover {
-    background-color: $--hover-color;
+    background-color: $hover-color;
   }
 }
 
 .m-editor-page-bar {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   background-color: #f3f3f3;
-  border-top: 1px solid $--border-color;
+  border-top: 1px solid $border-color;
   z-index: 2;
   overflow: hidden;
 
@@ -38,7 +40,7 @@
   &-item {
     padding: 0 10px;
     cursor: pointer;
-    border-right: 1px solid $--border-color;
+    border-right: 1px solid $border-color;
     display: flex;
     justify-items: center;
     align-items: center;
@@ -60,7 +62,7 @@
 
       .icon-active {
         font-weight: bold;
-        color: $--theme-color;
+        color: $theme-color;
       }
     }
 
@@ -96,16 +98,16 @@
     padding: 5px 14px;
 
     .tmagic-design-button {
-      color: $--font-color;
+      color: $font-color;
     }
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
     }
 
     &.active {
       .tmagic-design-button {
-        color: $--theme-color;
+        color: $theme-color;
       }
     }
   }
@@ -113,8 +115,8 @@
 
 .m-editor-page-bar-search-panel {
   position: absolute;
-  bottom: $--page-bar-height;
-  border: 1px solid $--border-color;
+  bottom: $page-bar-height;
+  border: 1px solid $border-color;
   padding: 6px 10px;
   width: 100%;
   box-sizing: border-box;
diff --git a/packages/editor/src/theme/sidebar.scss b/packages/editor/src/theme/sidebar.scss
index 766df31a..50ba2157 100644
--- a/packages/editor/src/theme/sidebar.scss
+++ b/packages/editor/src/theme/sidebar.scss
@@ -1,9 +1,11 @@
+@use "common/var" as *;
+
 .m-editor-sidebar {
   display: flex;
   height: 100%;
 
   .m-editor-sidebar-header {
-    background: $--sidebar-heder-background-color;
+    background: $sidebar-heder-background-color;
     height: 100%;
     width: 40px;
 
@@ -16,7 +18,7 @@
       cursor: pointer;
 
       &.is-active {
-        background: $--sidebar-content-background-color;
+        background: $sidebar-content-background-color;
 
         i {
           color: #353140;
diff --git a/packages/editor/src/theme/stage.scss b/packages/editor/src/theme/stage.scss
index 48c280c7..aabd0c0a 100644
--- a/packages/editor/src/theme/stage.scss
+++ b/packages/editor/src/theme/stage.scss
@@ -1,7 +1,9 @@
+@use "common/var" as *;
+
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - #{$--page-bar-height});
+  height: calc(100% - #{$page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;
diff --git a/packages/editor/src/theme/theme.scss b/packages/editor/src/theme/theme.scss
index 1c337472..06da53ca 100644
--- a/packages/editor/src/theme/theme.scss
+++ b/packages/editor/src/theme/theme.scss
@@ -1,28 +1,28 @@
-@import "./search-input.scss";
-@import "./nav-menu.scss";
-@import "./framework.scss";
-@import "./sidebar.scss";
-@import "./layer-panel.scss";
-@import "./component-list-panel.scss";
-@import "./resizer.scss";
-@import "./workspace.scss";
-@import "./page-bar.scss";
-@import "./props-panel.scss";
-@import "./content-menu.scss";
-@import "./stage.scss";
-@import "./code-editor.scss";
-@import "./icon.scss";
-@import "./code-block.scss";
-@import "./event.scss";
-@import "./layout.scss";
-@import "./breadcrumb.scss";
-@import "./data-source.scss";
-@import "./data-source-fields.scss";
-@import "./data-source-methods.scss";
-@import "./data-source-input.scss";
-@import "./key-value.scss";
-@import "./tree.scss";
-@import "./floating-box.scss";
-@import "./page-fragment-select.scss";
-@import "./data-source-field.scss";
-@import "./data-source-field-select.scss";
+@use "./search-input.scss";
+@use "./nav-menu.scss";
+@use "./framework.scss";
+@use "./sidebar.scss";
+@use "./layer-panel.scss";
+@use "./component-list-panel.scss";
+@use "./resizer.scss";
+@use "./workspace.scss";
+@use "./page-bar.scss";
+@use "./props-panel.scss";
+@use "./content-menu.scss";
+@use "./stage.scss";
+@use "./code-editor.scss";
+@use "./icon.scss";
+@use "./code-block.scss";
+@use "./event.scss";
+@use "./layout.scss";
+@use "./breadcrumb.scss";
+@use "./data-source.scss";
+@use "./data-source-fields.scss";
+@use "./data-source-methods.scss";
+@use "./data-source-input.scss";
+@use "./key-value.scss";
+@use "./tree.scss";
+@use "./floating-box.scss";
+@use "./page-fragment-select.scss";
+@use "./data-source-field.scss";
+@use "./data-source-field-select.scss";
diff --git a/packages/editor/src/theme/tree.scss b/packages/editor/src/theme/tree.scss
index 624fd14f..d57e7d63 100644
--- a/packages/editor/src/theme/tree.scss
+++ b/packages/editor/src/theme/tree.scss
@@ -1,6 +1,8 @@
+@use "common/var" as *;
+
 .m-editor-tree {
-  $--node-height: 22px;
-  color: $--font-color;
+  $node-height: 22px;
+  color: $font-color;
   font-size: 13px;
 
   .m-editor-tree-node {
@@ -12,31 +14,31 @@
       align-items: center;
 
       &:hover {
-        background-color: $--hover-color;
-        color: $--font-color;
+        background-color: $hover-color;
+        color: $font-color;
       }
 
       &.selected {
-        background-color: $--theme-color;
-        color: $--hover-color;
+        background-color: $theme-color;
+        color: $hover-color;
       }
 
       &.drag-inner {
         .tree-node-content {
-          background-color: rgba($color: $--theme-color, $alpha: 0.5);
-          color: $--hover-color;
+          background-color: rgba($color: $theme-color, $alpha: 0.5);
+          color: $hover-color;
         }
       }
 
       &.drag-before {
         .tree-node-content {
-          border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-top-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
       &.drag-after {
         .tree-node-content {
-          border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-bottom-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
@@ -50,11 +52,11 @@
         display: flex;
         flex: 1;
         justify-content: space-between;
-        height: $--node-height;
+        height: $node-height;
         border-top: 2px solid transparent;
         border-bottom: 2px solid transparent;
         .tree-node-label {
-          line-height: $--node-height;
+          line-height: $node-height;
           flex: 1;
           width: 100px;
           overflow: hidden;