@jetlinks-web/components 3.3.11 → 3.3.13

package/es/ProLayout/SiderMenu/style.js

@@ -1,10 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { Keyframes } from "ant-design-vue";
+import { Keyframes } from 'ant-design-vue';
 export var 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 Keyframes('pro-layout-title-hide', {
     '0%': {
       display: 'none',
@@ -19,14 +28,46 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
       opacity: 1
     }
   });
-  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), _defineProperty(_defineProperty(_defineProperty({}, "".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    "), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat0 = {
     position: 'relative',
-    backgroundColor: '#001529',
+    background: darkMenuBg,
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat9, "".concat(token.antCls, "-menu"), {
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat0, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
+  }), "&".concat(proLayoutSiderMenuCls, "-dark, &").concat(token.antCls, "-layout-sider-dark"), _defineProperty(_defineProperty({
+    background: darkMenuBg
+  }, "".concat(token.antCls, "-layout-sider-children"), {
+    background: darkMenuBg
+  }), "".concat(token.antCls, "-menu-dark"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
   }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item a:hover"), {
@@ -44,12 +85,12 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
       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',
@@ -82,7 +123,7 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
       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)'
@@ -95,9 +136,24 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
     }
   }, "".concat(proLayoutSiderMenuCls, "-logo"), {
     h1: {
-      color: '#333'
+      color: darkMenuTextHoverColor
+    }
+  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$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"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+  }), "&".concat(token.antCls, "-layout-sider-collapsed"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
     width: '48px'
   }), "".concat(proLayoutSiderMenuCls), _defineProperty({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
     padding: '16px 24px'
@@ -113,30 +169,37 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
   }, "> ".concat(token.antCls, "-menu-root"), _defineProperty({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
     height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
     overflowY: 'auto'
-  }))), "&".concat(proLayoutSiderMenuCls, "-light"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }))), "&".concat(proLayoutSiderMenuCls, "-light"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     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)
-  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-links"), _defineProperty({
@@ -152,19 +215,35 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
     height: '100%',
     lineHeight: 1
   }), '.drawer .drawer-content', {
-    background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), _defineProperty({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+    background: darkMenuBg
+  }))), "".concat(token.antCls, "-pro-menu-popup"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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"), _defineProperty({}, ".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/es/ProLayout/TopHeader/style.js

@@ -3,6 +3,13 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
   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)';
@@ -23,13 +30,13 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
     marginLeft: '16px',
     fontSize: '20px'
   }), "".concat(proLayoutGlobalHeaderCls, "-layout"), _defineProperty({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), _defineProperty(_defineProperty({
-    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',
@@ -58,17 +65,17 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
   })), '.dark', {
     height: '48px',
     '.action': _defineProperty({
-      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, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  })), topNavHeaderCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     width: '100%',
     height: '100%',
@@ -76,7 +83,31 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
     transition: 'background 0.3s, width 0.2s'
   }, "".concat(token.antCls, "-menu"), {
     backgroundColor: 'transparent'
-  }), '&.light', _defineProperty(_defineProperty({
+  }), '&.dark', _defineProperty(_defineProperty({
+    backgroundColor: darkHeaderBg,
+    color: darkHeaderTextColor
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorPrimary
+    }
+  }), "".concat(token.antCls, "-menu-dark"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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', _defineProperty(_defineProperty({
     backgroundColor: token.colorBgContainer
   }, "".concat(topNavHeaderCls, "-logo"), {
     h1: {
@@ -96,7 +127,7 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
     alignItems: 'center',
     marginInlineEnd: '16px'
   })), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextColor
   }), "".concat(topNavHeaderCls, "-logo"), {
     position: 'relative',
     minWidth: '165px',
@@ -124,7 +155,20 @@ export var genTopHeaderStyle = function genTopHeaderStyle(config) {
     height: '100%'
   }, "".concat(token.antCls, "-badge"), {
     color: 'unset'
-  }))))), "".concat(token.antCls, "-pro-menu-popup"), _defineProperty({}, "".concat(token.antCls, "-badge"), {
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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/es/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/es/ProTable/style/index.js

@@ -1,12 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import genCompoentStyle from "../../style/styleRegister";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import genCompoentStyle from '../../style/styleRegister';
+import { genTokenScrollbarStyle } from '../../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': {
@@ -40,7 +42,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'
@@ -54,9 +56,10 @@ var genProTableStyle = function genProTableStyle(config) {
     '.jtable-box': {
       flex: 1,
       minHeight: 0,
-      '.jtable-card': _defineProperty({
+      '.jtable-card': _objectSpread(_objectSpread({
         height: '100%',
-        overflowY: 'auto',
+        overflowY: 'auto'
+      }, genTokenScrollbarStyle(token)), {}, _defineProperty({
         '.jtable-card-items': {
           display: 'grid',
           gridGap: '18px',
@@ -67,7 +70,7 @@ var genProTableStyle = function genProTableStyle(config) {
         }
       }, "j-table-empty", {
         marginTop: '100px'
-      }),
+      })),
       '.ant-table-wrapper': {
         height: '100%',
         '.ant-table': {
@@ -85,11 +88,11 @@ var genProTableStyle = function genProTableStyle(config) {
           display: 'flex',
           flexDirection: 'column'
         },
-        '.ant-table-body': {
+        '.ant-table-body': _objectSpread({
           flex: 1,
           minHeight: 0,
           overflowY: 'auto'
-        }
+        }, genTokenScrollbarStyle(token))
       }
     },
     '.jtable-alert': {

package/es/RadioButton/style/index.js

@@ -10,10 +10,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/es/Scrollbar/style/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import genCompoentStyle from "../../style/styleRegister";
-var scrollbarBgColor = '#909399';
-var scrollbarHoverBgColor = '#909399';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import genCompoentStyle from '../../style/styleRegister';
+import { genTokenScrollbarStyle } from '../../style/scrollbar';
 var scrollbarHoverOpacity = 0.5;
 var scrollbarOpacity = 0.3;
 var transitionDuration = '0.3s';
@@ -12,27 +12,27 @@ var genScrollbarStyle = function genScrollbarStyle(config) {
     overflow: 'hidden',
     position: 'relative',
     height: '100%'
-  }, "".concat(componentCls, "__wrap"), _defineProperty({
+  }, "".concat(componentCls, "__wrap"), _objectSpread(_objectSpread({
     overflow: 'auto',
     height: '100%'
-  }, "".concat(componentCls, "--hidden-default"), {
+  }, genTokenScrollbarStyle(token)), {}, _defineProperty({}, "".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"), _defineProperty(_defineProperty({
     position: 'absolute',

package/es/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/es/Search/style/search.js

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

package/es/Skeleton/components/Page.js

@@ -4,12 +4,17 @@
   "loading": "props",
   "List": "setup-const",
   "Detail": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "theme": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "token": "setup-maybe-ref",
+  "pageStyle": "setup-ref"
 } */
-import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { style: { "padding": "24px", "background-color": "#ffffff", "height": "100%" } };
+import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
 import List from "./List.js";
 import Detail from "./Detail.js";
+import { computed } from "vue";
+import { theme } from "ant-design-vue";
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonPage'
 }, {
@@ -29,8 +34,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const { token } = theme.useToken();
+        const pageStyle = computed(() => ({
+            padding: '24px',
+            backgroundColor: token.value.colorBgContainer,
+            height: '100%',
+        }));
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                style: _normalizeStyle(pageStyle.value)
+            }, [
                 (__props.type === 'list')
                     ? (_openBlock(), _createBlock(List, {
                         key: 0,
@@ -55,7 +68,7 @@ const __sfc_main__ = Object.assign({
                         _: 3 /* FORWARDED */
                     }, 8 /* PROPS */, ["loading"]))
                     : _renderSlot(_ctx.$slots, "default", { key: 2 })
-            ]));
+            ], 4 /* STYLE */));
         };
     }
 });