@northking-element/ui 1.0.0 → 1.0.1

package/theme-chalk/src/app-layout.scss

@@ -8,16 +8,54 @@
 // 5. 暗色覆盖（文件末尾的 app-layout-dark）
 
 $base-sidebar-width: 200px;
-$base-menu-color-active: #ffffff;
+$base-menu-color-active: getCssVar('color-white');
 $base-sub-menu-background: transparent;
-$menu-chip-radius: 8px;
+$menu-chip-radius: calc(#{getCssVar('border-radius-base')} * 2);
+
+// 只属于布局的颜色，不放进全局变量
+$layout-menu-bg: #1a1f2e;
+$layout-menu-text: #bfcbd9;
+$layout-menu-text-light: #2c313a;
+$layout-menu-hover-light: #f4f6f8;
+$layout-tags-item-bg: #f3f5f8;
+$layout-tags-item-border: #d8dce5;
+$layout-tags-item-text: #495060;
+$layout-tags-item-hover: #eeeeee;
+
+$layout-dark-menu-bg: #12171f;
+$layout-dark-menu-text: #c5ceda;
+$layout-dark-menu-hover: rgba(231, 237, 245, 0.08);
+$layout-dark-logo-text: #e7edf5;
+$layout-dark-tags-item-bg: #1a2130;
+$layout-dark-tags-item-border: #313b4d;
+$layout-dark-tags-item-text: #8e9aab;
+$layout-dark-tags-item-hover: #242c3a;
+$layout-dark-bg: #1a2130;
+$layout-dark-bg-overlay: #242c3b;
+$layout-dark-bg-page: #090c11;
+$layout-dark-text: #e7edf5;
+$layout-dark-text-regular: #c3ccd8;
+$layout-dark-text-secondary: #8e9aab;
+$layout-dark-text-placeholder: #6d7a8c;
+$layout-dark-text-disabled: #4e5968;
+$layout-dark-border: #3a4558;
+$layout-dark-border-light: #313b4d;
+$layout-dark-border-lighter: #2a3344;
+$layout-dark-border-extra-light: #232b3a;
+$layout-dark-fill-blank: #1a2130;
+$layout-dark-fill-extra-light: #1e2633;
+$layout-dark-fill-lighter: #151b26;
+$layout-dark-fill-light: #222a38;
+$layout-dark-fill: #2a3344;
+$layout-dark-fill-dark: #323d52;
+$layout-dark-fill-darker: #3c4860;
 
 // 顶栏菜单项：32px 圆角色块。调用方传入文字色和底色。
 @mixin horizontal-menu-chip($color, $background) {
-  height: 32px !important;
-  line-height: 32px !important;
-  margin: 0 2px !important;
-  padding: 0 14px !important;
+  height: getCssVar('component-size') !important;
+  line-height: getCssVar('component-size') !important;
+  margin: 0 getCssVar('spacing-xs') !important;
+  padding: 0 getCssVar('spacing-lg') !important;
   border: none !important;
   border-radius: $menu-chip-radius;
   color: $color !important;
@@ -36,41 +74,41 @@ $menu-chip-radius: 8px;
 
   // —— 1. 色彩变量 ——
   &.app-wrapper {
-    --nkep-menu-bg: #1a1f2e;
-    --nkep-menu-text: #bfcbd9;
-    --nkep-logo-bg: #1a1f2e;
-    --nkep-logo-text: #ffffff;
-    --navbar-bg: #ffffff;
-    --navbar-text: #303133;
-    --tags-bg: #ffffff;
-    --tags-item-bg: #f3f5f8;
-    --tags-item-border: #d8dce5;
-    --tags-item-text: #495060;
-    --tags-item-hover: #eeeeee;
-    --menu-active-text: var(--current-color, #409eff);
+    --nkep-menu-bg: #{$layout-menu-bg};
+    --nkep-menu-text: #{$layout-menu-text};
+    --nkep-logo-bg: #{$layout-menu-bg};
+    --nkep-logo-text: #{getCssVar('color-white')};
+    --navbar-bg: #{getCssVar('color-white')};
+    --navbar-text: #{getCssVar('text-color-primary')};
+    --tags-bg: #{getCssVar('color-white')};
+    --tags-item-bg: #{$layout-tags-item-bg};
+    --tags-item-border: #{$layout-tags-item-border};
+    --tags-item-text: #{$layout-tags-item-text};
+    --tags-item-hover: #{$layout-tags-item-hover};
+    --menu-active-text: var(--current-color, #{getCssVar('color-primary')});
   }
 
   &.app-wrapper .sidebar-container.theme-light {
-    --nkep-menu-bg: #ffffff;
-    --nkep-menu-text: #2c313a;
-    --nkep-menu-hover: #f4f6f8;
-    --nkep-logo-bg: #ffffff;
-    --nkep-logo-text: #303133;
+    --nkep-menu-bg: #{getCssVar('color-white')};
+    --nkep-menu-text: #{$layout-menu-text-light};
+    --nkep-menu-hover: #{$layout-menu-hover-light};
+    --nkep-logo-bg: #{getCssVar('color-white')};
+    --nkep-logo-text: #{getCssVar('text-color-primary')};
   }
 
   &.app-wrapper .navbar.nav3 .sidebar-logo-container {
-    --nkep-logo-bg: #ffffff;
-    --nkep-logo-text: #303133;
+    --nkep-logo-bg: #{getCssVar('color-white')};
+    --nkep-logo-text: #{getCssVar('text-color-primary')};
   }
 
   &.theme-dark:not(.sidebar-container) {
-    --nkep-menu-bg: #1a1f2e;
-    --nkep-menu-text: #bfcbd9;
+    --nkep-menu-bg: #{$layout-menu-bg};
+    --nkep-menu-text: #{$layout-menu-text};
   }
 
   &.theme-light:not(.sidebar-container) {
-    --nkep-menu-bg: #ffffff;
-    --nkep-menu-text: #303133;
+    --nkep-menu-bg: #{getCssVar('color-white')};
+    --nkep-menu-text: #{getCssVar('text-color-primary')};
   }
 
   // —— 2. 壳层与侧栏 ——
@@ -150,12 +188,12 @@ $menu-chip-radius: 8px;
     }
 
     .svg-icon {
-      margin-right: 10px !important;
+      margin-right: getCssVar('spacing-md') !important;
     }
 
     .menu-title {
-      font-size: 14px;
-      font-weight: 500;
+      font-size: getCssVar('font-size-base');
+      font-weight: getCssVar('font-weight-primary');
       letter-spacing: 0.02em;
     }
 
@@ -170,8 +208,8 @@ $menu-chip-radius: 8px;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
-      height: 44px !important;
-      line-height: 44px !important;
+      height: getCssVar('component-size-large') !important;
+      line-height: getCssVar('component-size-large') !important;
     }
 
     .el-menu-item {
@@ -224,8 +262,8 @@ $menu-chip-radius: 8px;
         &::before {
           content: '';
           position: absolute;
-          inset: 4px 8px;
-          border-radius: 8px;
+          inset: getCssVar('spacing-xs') getCssVar('spacing-sm');
+          border-radius: $menu-chip-radius;
           background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.18));
           pointer-events: none;
           z-index: 1;
@@ -233,7 +271,7 @@ $menu-chip-radius: 8px;
       }
 
       .el-sub-menu.is-active>.el-sub-menu__title {
-        color: var(--current-color, #409eff) !important;
+        color: var(--current-color, getCssVar('color-primary')) !important;
       }
 
       .el-menu-item:not(.is-active),
@@ -244,8 +282,8 @@ $menu-chip-radius: 8px;
         &::before {
           content: '';
           position: absolute;
-          inset: 4px 8px;
-          border-radius: 8px;
+          inset: getCssVar('spacing-xs') getCssVar('spacing-sm');
+          border-radius: $menu-chip-radius;
           background-color: transparent;
           pointer-events: none;
           z-index: 1;
@@ -260,12 +298,12 @@ $menu-chip-radius: 8px;
 
     // theme-light 浅色主题
     &.theme-light {
-      border-right: 1px solid #e8eaf0;
+      border-right: 1px solid getCssVar('border-color-lighter');
       box-shadow: none;
 
       .el-menu-item:not(.is-active),
       .el-sub-menu__title {
-        color: var(--nkep-menu-text, #2c313a);
+        color: var(--nkep-menu-text, #{$layout-menu-text-light});
       }
 
       .el-menu-item:not(.is-active) .svg-icon,
@@ -280,26 +318,26 @@ $menu-chip-radius: 8px;
       }
 
       .el-menu-item.is-active .menu-title {
-        font-weight: 600;
+        font-weight: getCssVar('font-weight-bold');
       }
 
       .el-menu-item.is-active {
-        color: var(--current-color, #409eff) !important;
+        color: var(--current-color, getCssVar('color-primary')) !important;
         position: relative;
 
         &::before {
           content: '';
           position: absolute;
-          inset: 4px 8px;
-          border-radius: 8px;
-          background-color: var(--current-color-light, #ecf5ff);
+          inset: getCssVar('spacing-xs') getCssVar('spacing-sm');
+          border-radius: $menu-chip-radius;
+          background-color: var(--current-color-light, #{getCssVar('color-primary-light-9')});
           pointer-events: none;
           z-index: 1;
         }
       }
 
       .el-sub-menu.is-active>.el-sub-menu__title {
-        color: var(--current-color, #409eff) !important;
+        color: var(--current-color, getCssVar('color-primary')) !important;
       }
 
       .el-menu-item:not(.is-active),
@@ -310,8 +348,8 @@ $menu-chip-radius: 8px;
         &::before {
           content: '';
           position: absolute;
-          inset: 4px 8px;
-          border-radius: 8px;
+          inset: getCssVar('spacing-xs') getCssVar('spacing-sm');
+          border-radius: $menu-chip-radius;
           background-color: transparent;
           pointer-events: none;
           z-index: 1;
@@ -320,11 +358,11 @@ $menu-chip-radius: 8px;
 
         &:hover {
           background-color: transparent !important;
-          color: var(--nkep-menu-text, #2c313a) !important;
+          color: var(--nkep-menu-text, #{$layout-menu-text-light}) !important;
         }
 
         &:hover::before {
-          background-color: var(--nkep-menu-hover, #f4f6f8);
+          background-color: var(--nkep-menu-hover, #{$layout-menu-hover-light});
         }
       }
 
@@ -356,7 +394,7 @@ $menu-chip-radius: 8px;
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 20px;
+          margin-left: getCssVar('spacing-xl');
         }
 
       }
@@ -369,7 +407,7 @@ $menu-chip-radius: 8px;
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 20px;
+          margin-left: getCssVar('spacing-xl');
         }
 
       }
@@ -436,7 +474,7 @@ $menu-chip-radius: 8px;
   &.el-menu--vertical {
     &>.el-menu {
       .svg-icon {
-        margin-right: 16px;
+        margin-right: getCssVar('spacing-lg');
       }
     }
 
@@ -454,16 +492,16 @@ $menu-chip-radius: 8px;
       overflow-y: auto;
 
       &::-webkit-scrollbar-track-piece {
-        background: #d3dce6;
+        background: getCssVar('border-color');
       }
 
       &::-webkit-scrollbar {
-        width: 6px;
+        width: getCssVar('spacing-sm');
       }
 
       &::-webkit-scrollbar-thumb {
-        background: #99a9bf;
-        border-radius: 20px;
+        background: getCssVar('text-color-placeholder');
+        border-radius: getCssVar('border-radius-round');
       }
     }
   }
@@ -489,7 +527,7 @@ $menu-chip-radius: 8px;
   }
 
   .drawer-bg {
-    background: #000;
+    background: getCssVar('color-black');
     opacity: 0.3;
     width: 100%;
     top: 0;
@@ -528,8 +566,8 @@ $menu-chip-radius: 8px;
     width: 100%;
     position: relative;
     overflow: hidden;
-    padding: 16px;
-    background: var(--el-bg-color-page, #f2f3f5);
+    padding: getCssVar('spacing-lg');
+    background: var(--el-bg-color-page, getCssVar('bg-color-page'));
   }
 
   .fixed-header+.app-main {
@@ -587,30 +625,30 @@ $menu-chip-radius: 8px;
   }
 
   & ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: getCssVar('spacing-sm');
+    height: getCssVar('spacing-sm');
   }
 
   & ::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
+    background-color: getCssVar('fill-color-light');
   }
 
   & ::-webkit-scrollbar-thumb {
-    background-color: #c0c0c0;
-    border-radius: 3px;
+    background-color: getCssVar('text-color-disabled');
+    border-radius: getCssVar('border-radius-base');
   }
 
   // —— 4. 顶栏与四种导航 ——
   &.navbar.nav3,
   .navbar.nav3 {
-    padding-left: 10px;
+    padding-left: getCssVar('spacing-md');
 
     .hamburger-container {
       display: none !important;
     }
 
     .topbar-container .svg-icon {
-      margin-right: 5px !important;
+      margin-right: getCssVar('spacing-xs') !important;
     }
   }
 
@@ -625,8 +663,8 @@ $menu-chip-radius: 8px;
       width: 100%;
       height: 50px;
       padding-left: 0;
-      background: var(--nav4-bar-bg, #1a1f2e);
-      color: #fff;
+      background: var(--nav4-bar-bg, #{$layout-menu-bg});
+      color: getCssVar('color-white');
       border-bottom: none;
 
       .sidebar-logo-container {
@@ -639,12 +677,11 @@ $menu-chip-radius: 8px;
         text-align: center;
         transition: width 0.28s, flex-basis 0.28s;
         --nkep-logo-bg: transparent;
-        --nkep-logo-text: #fff;
       }
 
       .hamburger-container {
         order: 2;
-        color: #fff;
+        color: getCssVar('color-white');
 
         &:hover {
           background: rgba(255, 255, 255, 0.14);
@@ -661,16 +698,16 @@ $menu-chip-radius: 8px;
         align-items: center;
         background: transparent;
         --el-menu-bg-color: transparent;
-        --el-menu-text-color: #fff;
+        --el-menu-text-color: getCssVar('color-white');
         --el-menu-hover-bg-color: transparent;
-        --el-menu-active-color: #fff;
+        --el-menu-active-color: getCssVar('color-white');
       }
 
       .right-menu {
         order: 4;
 
         .right-menu-item {
-          color: #fff;
+          color: getCssVar('color-white');
 
           &.hover-effect:hover {
             background: rgba(255, 255, 255, 0.14);
@@ -678,7 +715,7 @@ $menu-chip-radius: 8px;
         }
 
         .user-nickname {
-          color: #fff;
+          color: getCssVar('color-white');
         }
       }
     }
@@ -709,7 +746,7 @@ $menu-chip-radius: 8px;
 
   /* 顶部菜单下拉层挂在 body 上，不在顶栏内部 */
   &.el-menu--horizontal.el-menu--popup-container .svg-icon {
-    margin-right: 10px;
+    margin-right: getCssVar('spacing-md');
   }
 
   &.navbar,
@@ -726,7 +763,7 @@ $menu-chip-radius: 8px;
     box-sizing: border-box;
 
     .hamburger-container {
-      line-height: 46px;
+      line-height: getCssVar('font-line-height-primary');
       height: 100%;
       cursor: pointer;
       transition: background 0.3s;
@@ -734,11 +771,11 @@ $menu-chip-radius: 8px;
       display: flex;
       align-items: center;
       flex-shrink: 0;
-      margin-right: 8px;
+      margin-right: getCssVar('spacing-sm');
 
       &:hover {
         background: rgba(15, 23, 42, 0.04);
-        border-radius: 8px;
+        border-radius: $menu-chip-radius;
       }
     }
 
@@ -757,7 +794,7 @@ $menu-chip-radius: 8px;
       display: flex;
       align-items: center;
       overflow: hidden;
-      margin-left: 8px;
+      margin-left: getCssVar('spacing-sm');
     }
 
     .right-menu {
@@ -773,10 +810,10 @@ $menu-chip-radius: 8px;
 
       .right-menu-item {
         display: inline-block;
-        padding: 0 8px;
+        padding: 0 getCssVar('spacing-sm');
         height: 100%;
-        font-size: 18px;
-        color: #5a5e66;
+        font-size: getCssVar('font-size-large');
+        color: getCssVar('text-color-regular');
         vertical-align: text-bottom;
 
         &.hover-effect {
@@ -785,7 +822,7 @@ $menu-chip-radius: 8px;
 
           &:hover {
             background: rgba(15, 23, 42, 0.04);
-            border-radius: 8px;
+            border-radius: $menu-chip-radius;
           }
         }
 
@@ -808,8 +845,8 @@ $menu-chip-radius: 8px;
         padding-right: 0px;
 
         .avatar-wrapper {
-          margin-top: 10px;
-          right: 8px;
+          margin-top: getCssVar('spacing-md');
+          right: getCssVar('spacing-sm');
           position: relative;
           outline: none;
 
@@ -820,9 +857,9 @@ $menu-chip-radius: 8px;
 
           .user-avatar {
             cursor: pointer;
-            width: 28px;
-            height: 28px;
-            margin-right: 8px;
+            width: getCssVar('component-size');
+            height: getCssVar('component-size');
+            margin-right: getCssVar('spacing-sm');
             border-radius: 50%;
             box-shadow: none;
           }
@@ -830,18 +867,18 @@ $menu-chip-radius: 8px;
           .user-nickname {
             position: relative;
             left: 0px;
-            bottom: 10px;
-            font-size: 14px;
-            font-weight: 500;
+            bottom: getCssVar('spacing-md');
+            font-size: getCssVar('font-size-base');
+            font-weight: getCssVar('font-weight-primary');
             letter-spacing: 0.01em;
           }
 
           i {
             cursor: pointer;
             position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
+            right: calc(#{getCssVar('spacing-xl')} * -1);
+            top: getCssVar('spacing-xxl');
+            font-size: getCssVar('font-size-extra-small');
           }
         }
       }
@@ -850,13 +887,13 @@ $menu-chip-radius: 8px;
 
   // —— 5. 设置抽屉 ——
   .setting-drawer-title {
-    margin-bottom: 12px;
+    margin-bottom: getCssVar('spacing-md');
     color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));
-    line-height: 22px;
-    font-weight: bold;
+    line-height: getCssVar('font-line-height-primary');
+    font-weight: getCssVar('font-weight-bold');
 
     .drawer-title {
-      font-size: 14px;
+      font-size: getCssVar('font-size-base');
     }
   }
 
@@ -864,18 +901,18 @@ $menu-chip-radius: 8px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin-top: 10px;
-    margin-bottom: 20px;
+    margin-top: getCssVar('spacing-md');
+    margin-bottom: getCssVar('spacing-xl');
 
     .setting-drawer-block-checbox-item {
       position: relative;
-      margin-right: 16px;
-      border-radius: 2px;
+      margin-right: getCssVar('spacing-lg');
+      border-radius: getCssVar('border-radius-small');
       cursor: pointer;
 
       img {
-        width: 48px;
-        height: 48px;
+        width: calc(#{getCssVar('spacing-xxl')} * 2);
+        height: calc(#{getCssVar('spacing-xxl')} * 2);
       }
 
       .setting-drawer-block-checbox-selectIcon {
@@ -884,23 +921,23 @@ $menu-chip-radius: 8px;
         right: 0;
         width: 100%;
         height: 100%;
-        padding-top: 15px;
-        padding-left: 24px;
-        color: #1890ff;
-        font-weight: 700;
-        font-size: 14px;
+        padding-top: getCssVar('spacing-lg');
+        padding-left: getCssVar('spacing-xxl');
+        color: getCssVar('color-primary');
+        font-weight: getCssVar('font-weight-bold');
+        font-size: getCssVar('font-size-base');
       }
     }
   }
 
   .drawer-item {
     color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));
-    padding: 12px 0;
-    font-size: 14px;
+    padding: getCssVar('spacing-md') 0;
+    font-size: getCssVar('font-size-base');
 
     .comp-style {
       float: right;
-      margin: -3px 8px 0px 0px;
+      margin: calc(#{getCssVar('spacing-xs')} * -1) getCssVar('spacing-sm') 0 0;
     }
   }
 
@@ -911,10 +948,10 @@ $menu-chip-radius: 8px;
 
   .nav-wrap {
     display: grid;
-    grid-template-columns: repeat(4, 56px);
-    gap: 12px;
-    margin-top: 10px;
-    margin-bottom: 20px;
+    grid-template-columns: repeat(4, calc(#{getCssVar('component-size-large')} + #{getCssVar('spacing-lg')}));
+    gap: getCssVar('spacing-md');
+    margin-top: getCssVar('spacing-md');
+    margin-bottom: getCssVar('spacing-xl');
 
     .activeItem {
       border: 2px solid var(--el-color-primary) !important;
@@ -925,10 +962,10 @@ $menu-chip-radius: 8px;
       flex-shrink: 0;
       margin-right: 0;
       cursor: pointer;
-      width: 56px;
-      height: 48px;
-      border-radius: 4px;
-      background: #f0f2f5;
+      width: calc(#{getCssVar('component-size-large')} + #{getCssVar('spacing-lg')});
+      height: calc(#{getCssVar('spacing-xxl')} * 2);
+      border-radius: getCssVar('border-radius-base');
+      background: getCssVar('fill-color');
       border: 2px solid transparent;
     }
 
@@ -936,7 +973,7 @@ $menu-chip-radius: 8px;
       b:first-child {
         display: block;
         height: 30%;
-        background: #fff;
+        background: getCssVar('color-white');
       }
 
       b:last-child {
@@ -945,13 +982,13 @@ $menu-chip-radius: 8px;
         position: absolute;
         height: 100%;
         top: 0;
-        border-radius: 4px 0 0 4px;
+        border-radius: getCssVar('border-radius-base') 0 0 getCssVar('border-radius-base');
       }
     }
 
     .mix {
       b:first-child {
-        border-radius: 4px 4px 0 0;
+        border-radius: getCssVar('border-radius-base') getCssVar('border-radius-base') 0 0;
         display: block;
         height: 30%;
         background: #1b2a47;
@@ -962,7 +999,7 @@ $menu-chip-radius: 8px;
         background: #1b2a47;
         position: absolute;
         height: 70%;
-        border-radius: 0 0 0 4px;
+        border-radius: 0 0 0 getCssVar('border-radius-base');
       }
     }
 
@@ -971,7 +1008,7 @@ $menu-chip-radius: 8px;
         display: block;
         height: 30%;
         background: #1b2a47;
-        border-radius: 4px 4px 0 0;
+        border-radius: getCssVar('border-radius-base') getCssVar('border-radius-base') 0 0;
       }
     }
 
@@ -980,16 +1017,16 @@ $menu-chip-radius: 8px;
         display: block;
         height: 30%;
         background: #1b2a47;
-        border-radius: 4px 4px 0 0;
+        border-radius: getCssVar('border-radius-base') getCssVar('border-radius-base') 0 0;
       }
 
       b:last-child {
         width: 30%;
-        background: #fff;
+        background: getCssVar('color-white');
         position: absolute;
         height: 70%;
         bottom: 0;
-        border-radius: 0 0 0 4px;
+        border-radius: 0 0 0 getCssVar('border-radius-base');
       }
     }
   }
@@ -1019,7 +1056,7 @@ $menu-chip-radius: 8px;
         color: var(--nkep-menu-text);
 
         &.is-active {
-          color: var(--menu-active-text, #409eff);
+          color: var(--menu-active-text, getCssVar('color-primary'));
           background-color: transparent !important;
         }
       }
@@ -1050,11 +1087,11 @@ $menu-chip-radius: 8px;
       text-decoration: none;
 
       & .sidebar-logo {
-        width: 32px;
-        height: 32px;
+        width: getCssVar('component-size');
+        height: getCssVar('component-size');
         flex-shrink: 0;
         vertical-align: middle;
-        margin-right: 12px;
+        margin-right: getCssVar('spacing-md');
         transition: margin-right 0.28s;
       }
 
@@ -1066,9 +1103,9 @@ $menu-chip-radius: 8px;
         white-space: nowrap;
         opacity: 1;
         color: var(--nkep-logo-text);
-        font-weight: 600;
+        font-weight: getCssVar('font-weight-bold');
         line-height: 50px;
-        font-size: 16px;
+        font-size: getCssVar('font-size-medium');
         letter-spacing: 0.04em;
         font-family: "Segoe UI", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
         vertical-align: middle;
@@ -1095,18 +1132,18 @@ $menu-chip-radius: 8px;
   .tags-view-container {
     height: $tags-bar-height;
     width: 100%;
-    background: var(--tags-bg, #fff);
-    border-bottom: 1px solid var(--tags-item-border, #d8dce5);
+    background: var(--tags-bg, getCssVar('color-white'));
+    border-bottom: 1px solid var(--tags-item-border, #{$layout-tags-item-border});
     display: flex;
     align-items: center;
     overflow: hidden;
 
-    $btn-width: 28px;
-    $btn-color: #71717a;
-    $btn-hover-bg: #f0f2f5;
-    $btn-hover-color: #303133;
-    $btn-disabled-color: #c0c4cc;
-    $divider: 1px solid var(--tags-item-border, #d8dce5);
+    $btn-width: getCssVar('component-size-small');
+    $btn-color: getCssVar('text-color-secondary');
+    $btn-hover-bg: getCssVar('fill-color');
+    $btn-hover-color: getCssVar('text-color-primary');
+    $btn-disabled-color: getCssVar('text-color-disabled');
+    $divider: 1px solid var(--tags-item-border, #{$layout-tags-item-border});
 
     .tags-nav-btn {
       flex-shrink: 0;
@@ -1117,7 +1154,7 @@ $menu-chip-radius: 8px;
       height: $tags-bar-height;
       cursor: pointer;
       color: $btn-color;
-      font-size: 13px;
+      font-size: getCssVar('font-size-small');
       user-select: none;
       transition: background 0.15s, color 0.15s;
 
@@ -1153,41 +1190,41 @@ $menu-chip-radius: 8px;
         height: 26px;
         line-height: 26px;
         border: 1px solid transparent;
-        color: var(--tags-item-text, #495060);
-        background: var(--tags-item-bg, #f3f5f8);
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 500;
-        margin-left: 6px;
-        border-radius: 6px;
+        color: var(--tags-item-text, #{$layout-tags-item-text});
+        background: var(--tags-item-bg, #{$layout-tags-item-bg});
+        padding: 0 getCssVar('spacing-md');
+        font-size: getCssVar('font-size-extra-small');
+        font-weight: getCssVar('font-weight-primary');
+        margin-left: getCssVar('spacing-sm');
+        border-radius: getCssVar('border-radius-base');
         text-decoration: none;
         vertical-align: middle;
-        padding-top: 2px !important;
+        padding-top: 0 !important;
 
         &:first-of-type {
-          margin-left: 6px;
+          margin-left: getCssVar('spacing-sm');
         }
 
         &:last-of-type {
-          margin-right: 15px;
+          margin-right: getCssVar('spacing-lg');
         }
       }
     }
 
     &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active {
-      background-color: var(--el-color-primary, #409eff);
-      color: #fff;
+      background-color: var(--el-color-primary, getCssVar('color-primary'));
+      color: getCssVar('color-white');
       border-color: transparent;
 
       &::before {
         content: '';
-        background: #fff;
+        background: getCssVar('color-white');
         display: inline-block;
-        width: 8px;
-        height: 8px;
+        width: getCssVar('spacing-sm');
+        height: getCssVar('spacing-sm');
         border-radius: 50%;
         position: relative;
-        margin-right: 5px;
+        margin-right: getCssVar('spacing-xs');
       }
     }
 
@@ -1209,7 +1246,7 @@ $menu-chip-radius: 8px;
       height: $tags-bar-height;
       cursor: pointer;
       color: $btn-color;
-      font-size: 13px;
+      font-size: getCssVar('font-size-small');
       border-left: $divider;
       user-select: none;
       transition: background 0.15s, color 0.15s;
@@ -1226,36 +1263,36 @@ $menu-chip-radius: 8px;
 
     .contextmenu {
       margin: 0;
-      background: var(--el-bg-color-overlay, #fff);
+      background: var(--el-bg-color-overlay, getCssVar('color-white'));
       z-index: 3000;
       position: fixed;
       list-style-type: none;
-      padding: 5px 0;
-      border-radius: 4px;
-      font-size: 12px;
+      padding: getCssVar('spacing-xs') 0;
+      border-radius: getCssVar('border-radius-base');
+      font-size: getCssVar('font-size-extra-small');
       font-weight: 400;
-      color: var(--tags-item-text, #333);
+      color: var(--tags-item-text, getCssVar('text-color-primary'));
       box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-      border: 1px solid var(--el-border-color-light, #e4e7ed);
+      border: 1px solid var(--el-border-color-light, getCssVar('border-color-light'));
 
       li {
         margin: 0;
-        padding: 7px 16px;
+        padding: getCssVar('spacing-sm') getCssVar('spacing-lg');
         cursor: pointer;
 
         &:hover {
-          background: var(--tags-item-hover, #eee);
+          background: var(--tags-item-hover, getCssVar('fill-color-light'));
         }
       }
     }
 
     &.tags-view-container--chrome {
-      --chrome-strip-bg: #ffffff;
-      --chrome-strip-border: var(--el-border-color-lighter, #e4e7ed);
+      --chrome-strip-bg: getCssVar('color-white');
+      --chrome-strip-border: var(--el-border-color-lighter, getCssVar('border-color-light'));
       --chrome-tab-active-bg: var(--el-color-primary-light-9);
-      --chrome-tab-text: var(--el-text-color-regular, #606266);
+      --chrome-tab-text: var(--el-text-color-regular, getCssVar('text-color-regular'));
       --chrome-tab-text-active: var(--el-color-primary);
-      --chrome-wing-r: 10px;
+      --chrome-wing-r: #{getCssVar('spacing-md')};
 
       overflow: visible;
       background: var(--chrome-strip-bg);
@@ -1283,10 +1320,10 @@ $menu-chip-radius: 8px;
           height: 30px;
           min-height: 30px;
           margin: 0 0 -1px;
-          padding: 0 12px;
-          font-size: 13px;
+          padding: 0 getCssVar('spacing-md');
+          font-size: getCssVar('font-size-small');
           font-weight: 400;
-          line-height: 1.2;
+          line-height: getCssVar('font-line-height-primary');
           border: none !important;
           border-radius: 0;
           background: transparent !important;
@@ -1323,30 +1360,30 @@ $menu-chip-radius: 8px;
           }
 
           &:first-of-type {
-            margin-left: 6px;
+            margin-left: getCssVar('spacing-sm');
           }
 
           &:last-of-type {
-            margin-right: 10px;
+            margin-right: getCssVar('spacing-md');
           }
 
           &:not(.active)+.tags-view-item:not(.active) {
-            border-left: 1px solid var(--el-border-color-lighter, #e4e7ed);
-            padding-left: 11px;
+            border-left: 1px solid var(--el-border-color-lighter, getCssVar('border-color-light'));
+            padding-left: getCssVar('spacing-md');
           }
 
           &:hover:not(.active) {
-            background: var(--el-fill-color-light, #f5f7fa) !important;
-            border-radius: 6px 6px 0 0;
-            color: var(--el-text-color-primary, #303133);
+            background: var(--el-fill-color-light, getCssVar('fill-color-light')) !important;
+            border-radius: getCssVar('border-radius-base') getCssVar('border-radius-base') 0 0;
+            color: var(--el-text-color-primary, getCssVar('text-color-primary'));
           }
 
           &.active {
             height: 31px;
             min-height: 31px;
-            padding: 0 14px;
+            padding: 0 getCssVar('spacing-lg');
             color: var(--chrome-tab-text-active) !important;
-            font-weight: 500;
+            font-weight: getCssVar('font-weight-primary');
             background: var(--chrome-tab-active-bg) !important;
             border: none !important;
             border-radius: var(--chrome-wing-r) var(--chrome-wing-r) 0 0;
@@ -1371,9 +1408,9 @@ $menu-chip-radius: 8px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
+        width: getCssVar('spacing-lg');
+        height: getCssVar('spacing-lg');
+        margin-left: getCssVar('spacing-xs');
         border-radius: 50%;
         transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         cursor: pointer;
@@ -1440,9 +1477,9 @@ $menu-chip-radius: 8px;
   &.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
     position: static !important;
     right: auto;
-    margin-left: 8px;
+    margin-left: getCssVar('spacing-sm');
     margin-top: 0px;
-    margin-right: 20px !important;
+    margin-right: getCssVar('spacing-xl') !important;
     display: block !important;
   }
 
@@ -1453,13 +1490,13 @@ $menu-chip-radius: 8px;
 
   #{$nav4-menu}>.el-menu-item,
   #{$nav4-menu}>.el-sub-menu .el-sub-menu__title {
-    @include horizontal-menu-chip(#fff, transparent);
+    @include horizontal-menu-chip(getCssVar('color-white'), transparent);
   }
 
   #{$nav4-menu}>.el-menu-item:not(.is-disabled):hover,
   #{$nav4-menu}>.el-menu-item:not(.is-disabled):focus,
   #{$nav4-menu}>.el-sub-menu .el-sub-menu__title:hover {
-    color: #fff !important;
+    color: getCssVar('color-white') !important;
     border: none !important;
     background-color: rgba(255, 255, 255, 0.14) !important;
   }
@@ -1468,7 +1505,7 @@ $menu-chip-radius: 8px;
   #{$nav4-menu}>.el-sub-menu.is-active>.el-sub-menu__title,
   #{$nav4-menu}>.el-menu-item.is-active:hover,
   #{$nav4-menu}>.el-menu-item.is-active:focus {
-    color: #fff !important;
+    color: getCssVar('color-white') !important;
     border: none !important;
     background-color: var(--top-menu-active-bg, rgba(255, 255, 255, 0.24)) !important;
   }
@@ -1494,7 +1531,7 @@ $menu-chip-radius: 8px;
   #{$nav3-menu}>div>a>.el-menu-item,
   #{$nav3-menu}>div>.el-sub-menu>.el-sub-menu__title,
   #{$nav3-menu}>.el-sub-menu>.el-sub-menu__title {
-    @include horizontal-menu-chip(#303133, transparent);
+    @include horizontal-menu-chip(getCssVar('text-color-primary'), transparent);
   }
 
   #{$nav2-menu}>.el-menu-item:not(.is-disabled):hover,
@@ -1504,7 +1541,7 @@ $menu-chip-radius: 8px;
   #{$nav3-menu}>div>a>.el-menu-item:not(.is-disabled):focus,
   #{$nav3-menu}>div>.el-sub-menu>.el-sub-menu__title:hover,
   #{$nav3-menu}>.el-sub-menu>.el-sub-menu__title:hover {
-    color: #303133 !important;
+    color: getCssVar('text-color-primary') !important;
     border: none !important;
     background-color: rgba(15, 23, 42, 0.06) !important;
   }
@@ -1518,32 +1555,32 @@ $menu-chip-radius: 8px;
   #{$nav3-menu}>.el-sub-menu.is-active>.el-sub-menu__title,
   #{$nav3-menu}>div>a>.el-menu-item.is-active:hover,
   #{$nav3-menu}>div>a>.el-menu-item.is-active:focus {
-    color: var(--current-color, #409eff) !important;
+    color: var(--current-color, getCssVar('color-primary')) !important;
     border: none !important;
     background-color: var(--top-menu-active-bg, var(--current-color-light, rgba(64, 158, 255, 0.1))) !important;
   }
 
   /* 图标右间距 */
   &.topmenu-container .svg-icon {
-    margin-right: 4px;
+    margin-right: getCssVar('spacing-xs');
   }
 
   /* topmenu more arrow */
   &.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
     position: static;
     vertical-align: middle;
-    margin-left: 8px;
+    margin-left: getCssVar('spacing-sm');
     margin-top: 0px;
   }
 
   // —— 8. 面包屑、折叠按钮、搜索 ——
   &.app-breadcrumb.el-breadcrumb {
     display: inline-block;
-    font-size: 14px;
+    font-size: getCssVar('font-size-base');
     line-height: 50px;
 
     .no-redirect {
-      color: #97a8be;
+      color: getCssVar('text-color-placeholder');
       cursor: text;
     }
   }
@@ -1552,8 +1589,8 @@ $menu-chip-radius: 8px;
   .hamburger {
     display: inline-block;
     vertical-align: middle;
-    width: 20px;
-    height: 20px;
+    width: getCssVar('spacing-xl');
+    height: getCssVar('spacing-xl');
   }
 
   .hamburger.is-active {
@@ -1562,49 +1599,49 @@ $menu-chip-radius: 8px;
 
   /* widgets\HeaderSearch\index.vue */
   .el-dialog__header {
-    padding: 6px !important;
+    padding: getCssVar('spacing-sm') !important;
   }
 
   .highlight {
-    color: red;
-    font-weight: 600;
+    color: getCssVar('color-danger');
+    font-weight: getCssVar('font-weight-bold');
   }
 
   .is-active .highlight {
     color: rgba(255, 255, 255, 0.9);
-    font-weight: 600;
+    font-weight: getCssVar('font-weight-bold');
   }
 
   &.header-search,
   .header-search {
     .search-icon {
       cursor: pointer;
-      font-size: 18px;
+      font-size: getCssVar('font-size-large');
       vertical-align: middle;
     }
   }
 
   .result-count {
-    padding: 6px 16px 0;
-    font-size: 12px;
-    color: #aaa;
+    padding: getCssVar('spacing-sm') getCssVar('spacing-lg') 0;
+    font-size: getCssVar('font-size-extra-small');
+    color: getCssVar('text-color-secondary');
 
     strong {
-      color: red;
-      font-weight: 600;
+      color: getCssVar('color-danger');
+      font-weight: getCssVar('font-weight-bold');
     }
   }
 
   .result-wrap {
     height: 280px;
-    margin: 4px 0;
+    margin: getCssVar('spacing-xs') 0;
 
     .search-item {
       display: flex;
-      height: 48px;
+      height: calc(#{getCssVar('spacing-xxl')} * 2);
       align-items: center;
-      padding-right: 10px;
-      border-radius: 4px;
+      padding-right: getCssVar('spacing-md');
+      border-radius: getCssVar('border-radius-base');
       transition: background 0.15s;
 
       .left {
@@ -1613,14 +1650,14 @@ $menu-chip-radius: 8px;
         flex-shrink: 0;
 
         .menu-icon {
-          width: 18px;
-          height: 18px;
+          width: getCssVar('font-size-large');
+          height: getCssVar('font-size-large');
         }
       }
 
       .search-info {
-        padding-left: 5px;
-        margin-top: 10px;
+        padding-left: getCssVar('spacing-xs');
+        margin-top: getCssVar('spacing-md');
         width: 100%;
         display: flex;
         flex-direction: column;
@@ -1630,15 +1667,15 @@ $menu-chip-radius: 8px;
 
         .menu-title,
         .menu-path {
-          height: 20px;
+          height: getCssVar('spacing-xl');
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
 
         .menu-path {
-          color: #ccc;
-          font-size: 10px;
+          color: getCssVar('text-color-disabled');
+          font-size: getCssVar('font-size-extra-small');
         }
       }
     }
@@ -1655,24 +1692,24 @@ $menu-chip-radius: 8px;
       height: 100%;
 
       .empty-icon {
-        font-size: 42px;
-        color: #e0e0e0;
-        margin-bottom: 14px;
+        font-size: getCssVar('component-size-large');
+        color: getCssVar('border-color');
+        margin-bottom: getCssVar('spacing-lg');
       }
 
       .empty-text {
-        font-size: 14px;
-        color: #999;
-        margin: 0 0 6px;
+        font-size: getCssVar('font-size-base');
+        color: getCssVar('text-color-secondary');
+        margin: 0 0 getCssVar('spacing-sm');
 
         strong {
-          color: #666;
+          color: getCssVar('text-color-regular');
         }
       }
 
       .empty-tip {
-        font-size: 12px;
-        color: #bbb;
+        font-size: getCssVar('font-size-extra-small');
+        color: getCssVar('text-color-placeholder');
         margin: 0;
       }
     }
@@ -1681,33 +1718,33 @@ $menu-chip-radius: 8px;
   .search-footer {
     display: flex;
     align-items: center;
-    gap: 28px;
-    padding: 10px 20px;
-    border-top: 1px solid #f0f0f0;
-    color: #999;
-    font-size: 12px;
+    gap: getCssVar('spacing-xxl');
+    padding: getCssVar('spacing-md') getCssVar('spacing-xl');
+    border-top: 1px solid getCssVar('border-color-extra-light');
+    color: getCssVar('text-color-secondary');
+    font-size: getCssVar('font-size-extra-small');
 
     .shortcut-item {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: getCssVar('spacing-xs');
     }
 
     kbd {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 20px;
-      height: 20px;
-      padding: 0 5px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      background: #f7f7f7;
-      color: #555;
-      font-size: 11px;
+      min-width: getCssVar('spacing-xl');
+      height: getCssVar('spacing-xl');
+      padding: 0 getCssVar('spacing-xs');
+      border: 1px solid getCssVar('border-color');
+      border-radius: getCssVar('border-radius-base');
+      background: getCssVar('fill-color-light');
+      color: getCssVar('text-color-regular');
+      font-size: getCssVar('font-size-extra-small');
       font-family: inherit;
       line-height: 1;
-      box-shadow: 0 1px 0 #ccc;
+      box-shadow: 0 1px 0 getCssVar('border-color-darker');
     }
   }
 }
@@ -1716,38 +1753,40 @@ $menu-chip-radius: 8px;
 // html.dark 与布局根上的 .is-dark 都会引入。
 // 页面最深，侧栏和顶栏居中，树和表格最浅。
 @mixin app-layout-dark {
-  --nkep-menu-bg: #12171f;
-  --nkep-menu-text: #c5ceda;
-  --nkep-logo-bg: #12171f;
-  --nkep-logo-text: #e7edf5;
-  --navbar-bg: #12171f;
-  --navbar-text: #e7edf5;
-  --top-menu-active-bg: color-mix(in srgb, var(--current-color, #409eff) 28%, transparent);
-  --tags-bg: #12171f;
-  --tags-item-bg: #1a2130;
-  --tags-item-border: #313b4d;
-  --tags-item-text: #8e9aab;
-  --tags-item-hover: #242c3a;
-  --menu-active-text: var(--current-color, #409eff);
-  --el-bg-color: #1a2130;
-  --el-bg-color-overlay: #242c3b;
-  --el-bg-color-page: #090c11;
-  --el-text-color-primary: #e7edf5;
-  --el-text-color-regular: #c3ccd8;
-  --el-text-color-secondary: #8e9aab;
-  --el-text-color-placeholder: #6d7a8c;
-  --el-text-color-disabled: #4e5968;
-  --el-border-color: #3a4558;
-  --el-border-color-light: #313b4d;
-  --el-border-color-lighter: #2a3344;
-  --el-border-color-extra-light: #232b3a;
-  --el-fill-color-blank: #1a2130;
-  --el-fill-color-extra-light: #1e2633;
-  --el-fill-color-lighter: #151b26;
-  --el-fill-color-light: #222a38;
-  --el-fill-color: #2a3344;
-  --el-fill-color-dark: #323d52;
-  --el-fill-color-darker: #3c4860;
+  --nkep-menu-bg: #{$layout-dark-menu-bg};
+  --nkep-menu-text: #{$layout-dark-menu-text};
+  --nkep-logo-bg: #{$layout-dark-menu-bg};
+  --nkep-logo-text: #{$layout-dark-logo-text};
+  --navbar-bg: #{$layout-dark-menu-bg};
+  --navbar-text: #{$layout-dark-logo-text};
+  --top-menu-active-bg: color-mix(in srgb,
+    var(--current-color, #{getCssVar('color-primary')}) 28%,
+    transparent);
+  --tags-bg: #{$layout-dark-menu-bg};
+  --tags-item-bg: #{$layout-dark-tags-item-bg};
+  --tags-item-border: #{$layout-dark-tags-item-border};
+  --tags-item-text: #{$layout-dark-tags-item-text};
+  --tags-item-hover: #{$layout-dark-tags-item-hover};
+  --menu-active-text: var(--current-color, #{getCssVar('color-primary')});
+  --el-bg-color: #{$layout-dark-bg};
+  --el-bg-color-overlay: #{$layout-dark-bg-overlay};
+  --el-bg-color-page: #{$layout-dark-bg-page};
+  --el-text-color-primary: #{$layout-dark-text};
+  --el-text-color-regular: #{$layout-dark-text-regular};
+  --el-text-color-secondary: #{$layout-dark-text-secondary};
+  --el-text-color-placeholder: #{$layout-dark-text-placeholder};
+  --el-text-color-disabled: #{$layout-dark-text-disabled};
+  --el-border-color: #{$layout-dark-border};
+  --el-border-color-light: #{$layout-dark-border-light};
+  --el-border-color-lighter: #{$layout-dark-border-lighter};
+  --el-border-color-extra-light: #{$layout-dark-border-extra-light};
+  --el-fill-color-blank: #{$layout-dark-fill-blank};
+  --el-fill-color-extra-light: #{$layout-dark-fill-extra-light};
+  --el-fill-color-lighter: #{$layout-dark-fill-lighter};
+  --el-fill-color-light: #{$layout-dark-fill-light};
+  --el-fill-color: #{$layout-dark-fill};
+  --el-fill-color-dark: #{$layout-dark-fill-dark};
+  --el-fill-color-darker: #{$layout-dark-fill-darker};
   --el-table-current-row-bg-color: color-mix(in srgb, var(--el-color-primary) 16%, var(--el-bg-color));
   --el-table-row-hover-bg-color: color-mix(in srgb, var(--el-color-primary) 8%, var(--el-bg-color));
 
@@ -1756,11 +1795,11 @@ $menu-chip-radius: 8px;
   &.theme-light:not(.sidebar-container),
   .sidebar-container.theme-light,
   .navbar.nav3 .sidebar-logo-container {
-    --nkep-menu-bg: #12171f;
-    --nkep-menu-text: #c5ceda;
-    --nkep-menu-hover: rgba(231, 237, 245, 0.08);
-    --nkep-logo-bg: #12171f;
-    --nkep-logo-text: #e7edf5;
+    --nkep-menu-bg: #{$layout-dark-menu-bg};
+    --nkep-menu-text: #{$layout-dark-menu-text};
+    --nkep-menu-hover: #{$layout-dark-menu-hover};
+    --nkep-logo-bg: #{$layout-dark-menu-bg};
+    --nkep-logo-text: #{$layout-dark-logo-text};
   }
 
   .sidebar-container {
@@ -1800,20 +1839,20 @@ $menu-chip-radius: 8px;
   }
 
   .el-table__body tr.current-row>td.el-table__cell:first-child {
-    box-shadow: inset 3px 0 0 var(--el-color-primary);
+    box-shadow: inset getCssVar('spacing-xs') 0 0 var(--el-color-primary);
   }
 
   // 顶部菜单（navType = 3）：菜单条本身透明，选中文字避免被主题色盖住
   &.topbar-menu.el-menu--horizontal {
     --el-menu-bg-color: transparent;
     --el-menu-hover-bg-color: transparent;
-    --el-menu-text-color: #fff;
+    --el-menu-text-color: getCssVar('color-white');
     background-color: transparent;
 
     >div>a>.el-menu-item.is-active .menu-title,
     >div>.el-sub-menu.is-active>.el-sub-menu__title .menu-title,
     >.el-sub-menu.is-active>.el-sub-menu__title .menu-title {
-      color: #fff !important;
+      color: getCssVar('color-white') !important;
     }
   }
 
@@ -1833,7 +1872,7 @@ $menu-chip-radius: 8px;
     .el-menu-item.is-active,
     .el-sub-menu.is-active>.el-sub-menu__title {
       background-color: rgba(255, 255, 255, 0.08) !important;
-      color: #fff !important;
+      color: getCssVar('color-white') !important;
     }
   }
 
@@ -1864,7 +1903,7 @@ $menu-chip-radius: 8px;
   #{$nav3-menu}>div>a>.el-menu-item:not(.is-disabled):focus,
   #{$nav3-menu}>div>.el-sub-menu>.el-sub-menu__title:hover,
   #{$nav3-menu}>.el-sub-menu>.el-sub-menu__title:hover {
-    color: #fff !important;
+    color: getCssVar('color-white') !important;
   }
 
   // 暗色页签条