chore: 右键菜单支持多主题配置 (#3880)

* docs: 剔除多余注释

* fix: 右键菜单支持多主题配置

scss/components/_context-menu.scss

@@ -1,15 +1,3 @@
-$menu-background: #fff;
-$menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
-$menu-border-radius: 4px;
-$menu-font-color: #151b26;
-$menu-font-family: PingFangSC-Regular;
-$menu-border-color: #e8e9eb; // 默认的边框色
-$menu-active-color: #2468f2;
-$menu-hover-bg-color: #e6f0ff;
-$menu-disabled-color: #b8babf; // 禁用文字颜色
-$default-icon-color: #84868c; // 默认的icon颜色
-$default-padding: 4px 12px; // 6px 12px
-
 // 为了提示用户这不是系统菜单。
 @keyframes contextMenuInSpecial {
   from {
@@ -71,11 +59,11 @@ $default-padding: 4px 12px; // 6px 12px
     margin: 0;
     padding: 0;
 
-    background: $menu-background;
+    background: var(--menu-background);
-    box-shadow: $menu-box-shadow;
+    box-shadow: var(--menu-box-shadow);
 
-    color: $menu-font-color;
+    color: var(--menu-font-color);
-    font-family: $menu-font-family;
+    font-family: var(--menu-font-family);
     font-size: 12px;
     line-height: 20px;
 
@@ -89,8 +77,8 @@ $default-padding: 4px 12px; // 6px 12px
       bottom: -1px;
       right: -1px;
 
-      border-radius: $menu-border-radius;
+      border-radius: var(--menu-border-radius);
-      border: 1px solid $menu-border-color;
+      border: 1px solid var(--menu-border-color);
       z-index: -1;
     }
   }
@@ -98,7 +86,7 @@ $default-padding: 4px 12px; // 6px 12px
   &-divider {
     border: none;
     height: 1px;
-    background: $menu-border-color;
+    background: var(--menu-border-color);
     margin: 4px 1px;
     padding: 0;
   }
@@ -116,7 +104,7 @@ $default-padding: 4px 12px; // 6px 12px
     > a {
       white-space: nowrap;
       display: block;
-      padding: $default-padding;
+      padding: var(--default-padding);
       color: inherit;
       border-top: none;
       border-bottom: none;
@@ -124,15 +112,15 @@ $default-padding: 4px 12px; // 6px 12px
 
     &:not(.is-disabled):hover > a {
       text-decoration: none;
-      color: $menu-active-color;
+      color: var(--menu-active-color);
-      background: $menu-hover-bg-color;
+      background: var(--menu-hover-bg-color);
       cursor: pointer;
       border-top: none;
       border-bottom: none;
     }
 
     &.is-disabled > a {
-      color: $menu-disabled-color;
+      color: var(--menu-disabled-color);
       pointer-events: none;
     }
 
@@ -142,8 +130,9 @@ $default-padding: 4px 12px; // 6px 12px
       height: 0;
       border-width: 4px 7px;
       border-style: solid;
-      border-color: transparent transparent transparent $default-icon-color;
+      border-color: transparent transparent transparent
-      text-shadow: $menu-box-shadow;
+        var(--default-icon-color);
+      text-shadow: var(--menu-box-shadow);
       position: absolute;
       top: 50%;
       right: 0;
@@ -151,7 +140,7 @@ $default-padding: 4px 12px; // 6px 12px
     }
 
     &.has-child:hover > a::after {
-      border-color: transparent transparent transparent $menu-active-color;
+      border-color: transparent transparent transparent var(--menu-active-color);
     }
   }
 
@@ -178,12 +167,12 @@ $default-padding: 4px 12px; // 6px 12px
     margin: 0;
     padding: 0;
 
-    background: $menu-background;
+    background: var(--menu-background);
-    box-shadow: $menu-box-shadow;
+    box-shadow: var(--menu-box-shadow);
-    border-radius: $menu-border-radius;
+    border-radius: var(--menu-border-radius);
 
-    color: $menu-font-color;
+    color: var(--menu-font-color);
-    font-family: $menu-font-family;
+    font-family: var(--menu-font-family);
     font-size: 12px;
     line-height: 20px;
 
@@ -201,8 +190,8 @@ $default-padding: 4px 12px; // 6px 12px
       bottom: -1px;
       right: -1px;
 
-      border-radius: $menu-border-radius;
+      border-radius: var(--menu-border-radius);
-      border: 1px solid $menu-border-color;
+      border: 1px solid var(--menu-border-color);
       z-index: -1;
     }
   }

scss/themes/_antd-variables.scss

@@ -168,4 +168,17 @@ $link-color: $info;
   --Table-onChecked-borderColor: var(--Table-borderColor);
 
   --Switch-bgColor: #bfbfbf;
+
+  // ContextMenu
+  --menu-background: #fff;
+  --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
+  --menu-border-radius: 4px;
+  --menu-font-color: #151b26;
+  --menu-font-family: PingFangSC-Regular;
+  --menu-border-color: #e8e9eb; // 默认的边框色
+  --menu-active-color: #2468f2;
+  --menu-hover-bg-color: #e6f0ff;
+  --menu-disabled-color: #b8babf; // 禁用文字颜色
+  --default-icon-color: #84868c; // 默认的icon颜色
+  --default-padding: 4px 12px; // 6px 12px
 }

scss/themes/_cxd-variables.scss

@@ -648,4 +648,17 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --ResultBox-value-bg: #{$G10};
   --ResultBox-value-clear-bg: #{$G8};
   --ResultBox-value-clear-hover-bg: #{$G9};
+
+  // ContextMenu
+  --menu-background: #fff;
+  --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
+  --menu-border-radius: 4px;
+  --menu-font-color: #151b26;
+  --menu-font-family: PingFangSC-Regular;
+  --menu-border-color: #e8e9eb; // 默认的边框色
+  --menu-active-color: #2468f2;
+  --menu-hover-bg-color: #e6f0ff;
+  --menu-disabled-color: #b8babf; // 禁用文字颜色
+  --default-icon-color: #84868c; // 默认的icon颜色
+  --default-padding: 4px 12px; // 6px 12px
 }

scss/themes/_dark-variables.scss

@@ -126,4 +126,17 @@ $link-color: $info;
 
   // timeline
   --TimelineItem--text-primary-color: #{$text-color};
+
+  // ContextMenu
+  --menu-background: #fff;
+  --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
+  --menu-border-radius: 4px;
+  --menu-font-color: #151b26;
+  --menu-font-family: PingFangSC-Regular;
+  --menu-border-color: #e8e9eb; // 默认的边框色
+  --menu-active-color: #2468f2;
+  --menu-hover-bg-color: #e6f0ff;
+  --menu-disabled-color: #b8babf; // 禁用文字颜色
+  --default-icon-color: #84868c; // 默认的icon颜色
+  --default-padding: 4px 12px; // 6px 12px
 }