@jetlinks-web/components 3.3.11 → 3.3.13

package/lib/FullPage/FullPage.js

@@ -1,16 +1,21 @@
 /* Analyzed bindings: {
-  "ref": "setup-const",
+  "computed": "setup-const",
   "inject": "setup-const",
+  "ref": "setup-const",
+  "theme": "setup-maybe-ref",
   "useElementBounding": "setup-maybe-ref",
   "FullPageConfig": "setup-maybe-ref",
   "config": "setup-maybe-ref",
   "fullPage": "setup-ref",
-  "y": "setup-maybe-ref"
+  "y": "setup-maybe-ref",
+  "token": "setup-maybe-ref",
+  "wrapStyle": "setup-ref"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "full-page-warp-content" };
-import { ref, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
+import { theme } from 'ant-design-vue';
 import { useElementBounding } from '@vueuse/core';
 import { FullPageConfig } from "../utils/constants";
 const __sfc_main__ = _defineComponent({
@@ -21,12 +26,17 @@ const __sfc_main__ = _defineComponent({
         const config = inject(FullPageConfig, { reduceHeight: 24 });
         const fullPage = ref(null);
         const { y } = useElementBounding(fullPage);
+        const { token } = theme.useToken();
+        const wrapStyle = computed(() => ({
+            minHeight: `calc(100vh - ${y.value + config.reduceHeight}px)`,
+            background: token.value.colorBgContainer,
+        }));
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
                 class: "full-page-warp",
                 ref_key: "fullPage",
                 ref: fullPage,
-                style: _normalizeStyle({ minHeight: `calc(100vh - ${_unref(y) + _unref(config).reduceHeight}px)` })
+                style: _normalizeStyle(wrapStyle.value)
             }, [
                 _createElementVNode("div", _hoisted_1, [
                     _renderSlot(_ctx.$slots, "default")

package/lib/ProLayout/SiderMenu/style.js

@@ -8,10 +8,19 @@ exports.genSiderMenuStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antDesignVue = require("ant-design-vue");
 var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(config) {
-  var _$concat9;
+  var _$concat0;
   var token = config.token;
   var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
   var proLayoutHeaderHeight = '48px';
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkMenuBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkMenuSubBg = isAntdvDarkTheme ? token.colorBgContainer : '#000c17';
+  var darkMenuPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkMenuHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkMenuActiveBg = isAntdvDarkTheme ? token.colorFillSecondary : 'rgba(255, 255, 255, 0.12)';
+  var darkMenuTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkMenuTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkMenuTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutTitleHideKeyframes = new _antDesignVue.Keyframes('pro-layout-title-hide', {
     '0%': {
       display: 'none',
@@ -26,14 +35,46 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       opacity: 1
     }
   });
-  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
+  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat0 = {
     position: 'relative',
-    backgroundColor: '#001529',
+    background: darkMenuBg,
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(token.antCls, "-menu"), {
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
+  }), "&".concat(proLayoutSiderMenuCls, "-dark, &").concat(token.antCls, "-layout-sider-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    background: darkMenuBg
+  }, "".concat(token.antCls, "-layout-sider-children"), {
+    background: darkMenuBg
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkMenuTextColor,
+    background: 'transparent'
+  }, "".concat(token.antCls, "-menu-sub"), {
+    background: darkMenuSubBg
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a, ").concat(token.antCls, "-menu-submenu-title a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextHoverColor
+  }), "".concat(token.antCls, "-menu-submenu-open > ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuActiveBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), "&".concat(proLayoutSiderMenuCls, "-dark").concat(token.antCls, "-layout-sider-dark"), {
+    background: darkMenuBg
+  }), "&".concat(proLayoutSiderMenuCls, "-dark ").concat(token.antCls, "-menu-dark").concat(token.antCls, "-menu-inline ").concat(token.antCls, "-menu-sub").concat(token.antCls, "-menu-inline"), {
+    background: darkMenuSubBg
   }), "&".concat(token.antCls, "-layout-sider-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
   }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item a:hover"), {
@@ -51,12 +92,12 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       justifyContent: 'center',
       minHeight: 32
     },
-    'img': {
+    img: {
       display: 'inline-block',
       height: 32,
       verticalAlign: 'middle'
     },
-    'h1': {
+    h1: {
       display: 'inline-block',
       height: '32px',
       margin: '0 0 0 12px',
@@ -89,7 +130,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       width: '6px',
       height: '6px'
     },
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(255, 255, 255, 0.15)',
       borderRadius: '3px',
       boxShadow: 'inset 0 0 5px rgba(37, 37, 37, 0.05)'
@@ -102,9 +143,24 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     }
   }, "".concat(proLayoutSiderMenuCls, "-logo"), {
     h1: {
-      color: '#333'
+      color: darkMenuTextHoverColor
+    }
+  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.15)',
+    '::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(255, 255, 255, 0.15)',
+      borderRadius: '3px'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(255, 255, 255, 0.2)',
+      borderRadius: '3px'
     }
-  })), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+  }), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
     width: '48px'
   }), "".concat(proLayoutSiderMenuCls), (0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
     padding: '16px 24px'
@@ -120,30 +176,37 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
   }, "> ".concat(token.antCls, "-menu-root"), (0, _defineProperty2.default)({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
     height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
     overflowY: 'auto'
-  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer,
     boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
   }, "".concat(token.antCls, "-layout-sider-children"), {
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(0, 0, 0, 0.06)',
       borderRadius: '3px',
-      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)',
-      /* 滚动条滑块 */
-      '::-webkit-scrollbar-thumb': {
-        background: 'rgba(0, 0, 0, 0.12)',
-        borderRadius: '3px',
-        boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
-      }
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    }
+  }), "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarColor: 'rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.06)',
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(0, 0, 0, 0.06)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)'
     }
   }), "".concat(proLayoutSiderMenuCls, "-logo"), {
-    'h1': {
+    h1: {
       color: token.colorPrimary
     }
   }), "".concat(token.antCls, "-menu-light"), {
     borderRightColor: 'transparent'
   }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
     borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
-  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-links"), (0, _defineProperty2.default)({
@@ -159,19 +222,35 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     height: '100%',
     lineHeight: 1
   }), '.drawer .drawer-content', {
-    background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+    background: darkMenuBg
+  }))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  })), "".concat(token.antCls, "-menu-submenu-popup").concat(token.antCls, "-menu-dark").concat(token.antCls, "-pro-menu-popup ").concat(token.antCls, "-menu"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
     marginLeft: '10px'
   })), '.sider-app-menus', {
     width: '100px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     cursor: 'pointer',
     padding: '6px',
     transition: 'all .3s',
     borderRadius: '4px',
-    color: '#333',
+    color: token.colorText,
     '&:hover': {
-      backgroundColor: '#efefef'
+      backgroundColor: token.colorFillQuaternary
     }
   })];
 };

package/lib/ProLayout/TopHeader/style.js

@@ -10,6 +10,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   var token = config.token;
   var topNavHeaderCls = "".concat(token.antCls, "-pro-top-nav-header");
   var proLayoutGlobalHeaderCls = "".concat(token.antCls, "-pro-global-header");
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkHeaderBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkHeaderPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkHeaderHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkHeaderTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkHeaderTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkHeaderTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutHeaderBg = token.colorBgContainer;
   var proLayoutHeaderHoverBg = token.colorBgContainer;
   var proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)';
@@ -30,13 +37,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     marginLeft: '16px',
     fontSize: '20px'
   }), "".concat(proLayoutGlobalHeaderCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    backgroundColor: '#001529'
+    backgroundColor: darkHeaderBg
   }, "".concat(proLayoutGlobalHeaderCls, "-logo"), {
-    'h1': {
-      color: '#fff'
+    h1: {
+      color: darkHeaderTextHoverColor
     }
   }), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextHoverColor
   }))), "".concat(proLayoutGlobalHeaderCls, "-logo"), {
     position: 'relative',
     overflow: 'hidden',
@@ -65,17 +72,17 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   })), '.dark', {
     height: '48px',
     '.action': (0, _defineProperty2.default)({
-      color: 'rgba(255, 255, 255, 0.85)',
+      color: darkHeaderTextColor,
       '> i': {
-        color: 'rgba(255, 255, 255, 0.85)'
+        color: darkHeaderTextColor
       },
       '&:hover,&.opend': {
         background: token.colorPrimary
       }
     }, "".concat(token.antCls, "-badge"), {
-      color: 'rgba(255, 255, 255, 0.85)'
+      color: darkHeaderTextColor
     })
-  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'relative',
     width: '100%',
     height: '100%',
@@ -83,7 +90,31 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     transition: 'background 0.3s, width 0.2s'
   }, "".concat(token.antCls, "-menu"), {
     backgroundColor: 'transparent'
-  }), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }), '&.dark', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: darkHeaderBg,
+    color: darkHeaderTextColor
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorPrimary
+    }
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkHeaderTextColor,
+    backgroundColor: 'transparent'
+  }, "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkHeaderTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer
   }, "".concat(topNavHeaderCls, "-logo"), {
     h1: {
@@ -103,7 +134,7 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     alignItems: 'center',
     marginInlineEnd: '16px'
   })), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextColor
   }), "".concat(topNavHeaderCls, "-logo"), {
     position: 'relative',
     minWidth: '165px',
@@ -131,7 +162,20 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     height: '100%'
   }, "".concat(token.antCls, "-badge"), {
     color: 'unset'
-  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-badge"), {
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkHeaderPopupBg,
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-badge"), {
     color: 'unset'
   }));
 };

package/lib/ProTable/ProTable.js

@@ -315,12 +315,10 @@ const __sfc_main__ = _defineComponent({
         }, { deep: true, immediate: true });
         onMounted(() => {
             windowChange(); // 初始化
-            window.onresize = () => {
-                windowChange();
-            };
+            window.addEventListener('resize', windowChange);
         });
         onUnmounted(() => {
-            window.onresize = null;
+            window.removeEventListener('resize', windowChange);
         });
         __expose({ reload, dataSource: _dataSource });
         return (_ctx, _cache) => {

package/lib/ProTable/style/index.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var _scrollbar = require("../../style/scrollbar");
 var genProTableStyle = function genProTableStyle(config) {
   var token = config.token;
   return {
     '.jtable-body-spin': {
       height: '100%',
       width: '100%',
-      backgroundColor: '#fff',
+      backgroundColor: token.colorBgContainer,
       '.ant-spin-nested-loading': {
         height: '100%',
         '.ant-spin-container': {
@@ -47,7 +49,7 @@ var genProTableStyle = function genProTableStyle(config) {
           width: '62px',
           '.right-button-icon': {
             fontSize: '16px',
-            color: '#d9d9d9'
+            color: token.colorTextDisabled
           },
           '.ant-radio-button-wrapper': {
             padding: '0 8px'
@@ -61,9 +63,10 @@ var genProTableStyle = function genProTableStyle(config) {
     '.jtable-box': {
       flex: 1,
       minHeight: 0,
-      '.jtable-card': (0, _defineProperty2.default)({
+      '.jtable-card': (0, _objectSpread3.default)((0, _objectSpread3.default)({
         height: '100%',
-        overflowY: 'auto',
+        overflowY: 'auto'
+      }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({
         '.jtable-card-items': {
           display: 'grid',
           gridGap: '18px',
@@ -74,7 +77,7 @@ var genProTableStyle = function genProTableStyle(config) {
         }
       }, "j-table-empty", {
         marginTop: '100px'
-      }),
+      })),
       '.ant-table-wrapper': {
         height: '100%',
         '.ant-table': {
@@ -92,11 +95,11 @@ var genProTableStyle = function genProTableStyle(config) {
           display: 'flex',
           flexDirection: 'column'
         },
-        '.ant-table-body': {
+        '.ant-table-body': (0, _objectSpread3.default)({
           flex: 1,
           minHeight: 0,
           overflowY: 'auto'
-        }
+        }, (0, _scrollbar.genTokenScrollbarStyle)(token))
       }
     },
     '.jtable-alert': {

package/lib/RadioButton/style/index.js

@@ -17,10 +17,11 @@ var genRadioButtonStyle = function genRadioButtonStyle(config) {
         textAlign: 'center',
         height: '100%',
         borderRadius: '2px',
-        backgroundColor: '#f5f5f5',
+        backgroundColor: token.colorFillTertiary,
+        color: token.colorText,
         cursor: 'pointer',
         '&.active': {
-          color: '#fff',
+          color: token.colorTextLightSolid,
           backgroundColor: token.colorPrimary
         }
       }

package/lib/Scrollbar/style/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
-var scrollbarBgColor = '#909399';
-var scrollbarHoverBgColor = '#909399';
+var _scrollbar = require("../../style/scrollbar");
 var scrollbarHoverOpacity = 0.5;
 var scrollbarOpacity = 0.3;
 var transitionDuration = '0.3s';
@@ -19,27 +19,27 @@ var genScrollbarStyle = function genScrollbarStyle(config) {
     overflow: 'hidden',
     position: 'relative',
     height: '100%'
-  }, "".concat(componentCls, "__wrap"), (0, _defineProperty2.default)({
+  }, "".concat(componentCls, "__wrap"), (0, _objectSpread3.default)((0, _objectSpread3.default)({
     overflow: 'auto',
     height: '100%'
-  }, "".concat(componentCls, "--hidden-default"), {
+  }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({}, "".concat(componentCls, "--hidden-default"), {
     scrollbarWidth: 'none',
     '&::-webkit-scrollbar': {
       display: 'none'
     }
-  })), "".concat(componentCls, "__thumb"), {
+  }))), "".concat(componentCls, "__thumb"), {
     position: 'relative',
     display: 'block',
     width: 0,
     height: 0,
     cursor: 'pointer',
     borderRadius: 'inherit',
-    backgroundColor: scrollbarBgColor,
+    backgroundColor: token.colorFillSecondary,
     transition: "".concat(transitionDuration, " background-color"),
     opacity: scrollbarOpacity,
     '&:hover': {
-      backgroundColor: scrollbarHoverBgColor,
-      opacity: scrollbarOpacity
+      backgroundColor: token.colorFill,
+      opacity: scrollbarHoverOpacity
     }
   }), "".concat(componentCls, "__bar"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'absolute',

package/lib/Search/Item.js

@@ -69,13 +69,15 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "handleTermsModelValue": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, createVNode as _createVNode, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+import { unref as _unref, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = {
     key: 0,
     class: "JSearch-item--type"
 };
 const _hoisted_2 = { key: 1 };
-const _hoisted_3 = { class: "JSearch-item--value" };
+const _hoisted_3 = { class: "JSearch-item--column" };
+const _hoisted_4 = { class: "JSearch-item--termType" };
+const _hoisted_5 = { class: "JSearch-item--value" };
 import { computed, ref, reactive, watch, isRef } from 'vue';
 import { Select, DatePicker, RangePicker } from 'ant-design-vue';
 import { componentProps, componentType, typeOptions } from "./setting";
@@ -306,24 +308,28 @@ const __sfc_main__ = _defineComponent({
                                     : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(__props.index === 1 ? _unref(contextLocale).item.firstGroup : _unref(contextLocale).item.secondGroup), 1 /* TEXT */))
                             ]))
                             : _createCommentVNode("v-if", true),
-                        _createVNode(_unref(Select), {
-                            value: termsModel.column,
-                            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => ((termsModel.column) = $event)),
-                            placeholder: _unref(contextLocale).item.placeholder,
-                            class: "JSearch-item--column",
-                            options: columnOptions.value,
-                            onChange: onColumnChange
-                        }, null, 8 /* PROPS */, ["value", "placeholder", "options"]),
-                        _createVNode(_unref(Select), {
-                            value: termsModel.termType,
-                            "onUpdate:value": _cache[2] || (_cache[2] = ($event) => ((termsModel.termType) = $event)),
-                            placeholder: _unref(contextLocale).item.placeholder,
-                            class: "JSearch-item--termType",
-                            options: termTypeOptions.value,
-                            onChange: onTermTypeChange
-                        }, null, 8 /* PROPS */, ["value", "placeholder", "options"])
+                        _createElementVNode("div", _hoisted_3, [
+                            _createVNode(_unref(Select), {
+                                value: termsModel.column,
+                                "onUpdate:value": _cache[1] || (_cache[1] = ($event) => ((termsModel.column) = $event)),
+                                placeholder: _unref(contextLocale).item.placeholder,
+                                options: columnOptions.value,
+                                style: { "width": "100%" },
+                                onChange: onColumnChange
+                            }, null, 8 /* PROPS */, ["value", "placeholder", "options"])
+                        ]),
+                        _createElementVNode("div", _hoisted_4, [
+                            _createVNode(_unref(Select), {
+                                value: termsModel.termType,
+                                "onUpdate:value": _cache[2] || (_cache[2] = ($event) => ((termsModel.termType) = $event)),
+                                placeholder: _unref(contextLocale).item.placeholder,
+                                options: termTypeOptions.value,
+                                style: { "width": "100%" },
+                                onChange: onTermTypeChange
+                            }, null, 8 /* PROPS */, ["value", "placeholder", "options"])
+                        ])
                     ], 64 /* STABLE_FRAGMENT */)),
-                _createElementVNode("div", _hoisted_3, [
+                _createElementVNode("div", _hoisted_5, [
                     (_openBlock(), _createBlock(_resolveDynamicComponent(targetComponents.value.name), _mergeProps({
                         "allow-clear": "",
                         style: { "width": "100%", "min-width": "80px" }

package/lib/Search/style/search.js

@@ -11,7 +11,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     token = config.token;
   return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-warp"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     padding: '24px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     marginBottom: '24px',
     '.pack-up': (0, _defineProperty2.default)({}, "".concat(componentCls, "-items"), {
       flex: '1 1 auto',
@@ -88,7 +88,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     }))
   }), '.no-radius', {
     borderRadius: 0,
-    borderColor: '#f1f1f1'
+    borderColor: token.colorBorderSecondary
   }), '.search-history-warp', {
     position: 'relative',
     '.search-history-button': {
@@ -100,7 +100,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
       height: '18px',
       right: '6px',
       top: '8px',
-      color: '#fff',
+      color: token.colorTextLightSolid,
       lineHeight: '18px',
       textAlign: 'center',
       fontWeight: 'bold',
@@ -110,7 +110,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     }
   })), '.search-history-empty', {
     padding: '12px 12px 6px 12px',
-    backgroundColor: '#fff'
+    backgroundColor: token.colorBgElevated
   }), '.search-history-items', {
     width: '120px',
     maxHeight: '300px',
@@ -121,7 +121,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
       alignItems: 'center',
       gap: '4px',
       '&:hover': {
-        backgroundColor: '#f1f1f1'
+        backgroundColor: token.colorFillTertiary
       },
       '.history-item--title': {
         width: 'calc(100% - 30px)',