@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/layout/components/GlobalHeader/style.js

@@ -1,71 +1,74 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genGlobalHeaderStyle = function genGlobalHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3;
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    position: 'relative',
-    background: 'transparent',
-    display: 'flex',
-    alignItems: 'center',
-    marginBlock: 0,
-    marginInline: 16,
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    boxSizing: 'border-box',
-    '> a': {
-      height: '100%'
-    }
-  }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-    marginInlineEnd: 16
-  }), '&-collapsed-button', {
-    minHeight: '22px',
-    color: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorHeaderTitle,
-    fontSize: '18px',
-    marginInlineEnd: '16px'
-  }), '&-logo', {
-    position: 'relative',
-    marginInlineEnd: '16px',
-    a: {
+const genGlobalHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
+      background: 'transparent',
       display: 'flex',
       alignItems: 'center',
-      height: '100%',
-      minHeight: '22px',
-      fontSize: '20px'
-    },
-    img: {
-      height: '28px'
-    },
-    h1: {
-      height: '32px',
       marginBlock: 0,
-      marginInline: 0,
-      marginInlineStart: 8,
-      fontWeight: '600',
-      color: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorHeaderTitle) || token.colorTextHeading,
-      fontSize: '18px',
-      lineHeight: '32px'
-    },
-    '&-mix': {
-      display: 'flex',
-      alignItems: 'center'
+      marginInline: 16,
+      height: token.layout?.header?.heightLayoutHeader || 56,
+      boxSizing: 'border-box',
+      '> a': {
+        height: '100%'
+      },
+      [`${token.proComponentsCls}-layout-apps-icon`]: {
+        marginInlineEnd: 16
+      },
+      '&-collapsed-button': {
+        minHeight: '22px',
+        color: token.layout?.header?.colorHeaderTitle,
+        fontSize: '18px',
+        marginInlineEnd: '16px'
+      },
+      '&-logo': {
+        position: 'relative',
+        marginInlineEnd: '16px',
+        a: {
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          minHeight: '22px',
+          fontSize: '20px'
+        },
+        img: {
+          height: '28px'
+        },
+        h1: {
+          height: '32px',
+          marginBlock: 0,
+          marginInline: 0,
+          marginInlineStart: 8,
+          fontWeight: '600',
+          color: token.layout?.header?.colorHeaderTitle || token.colorTextHeading,
+          fontSize: '18px',
+          lineHeight: '32px'
+        },
+        '&-mix': {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      },
+      '&-logo-mobile': {
+        minWidth: '24px',
+        marginInlineEnd: 0
+      }
     }
-  }), '&-logo-mobile', {
-    minWidth: '24px',
-    marginInlineEnd: 0
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutGlobalHeader', function (token) {
-    var GlobalHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutGlobalHeader', token => {
+    const GlobalHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGlobalHeaderStyle(GlobalHeaderToken)];
   });
 }

package/lib/layout/components/GridContent/index.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridContent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _RouteContext = require("../../context/RouteContext");
 var _style = require("./style");
@@ -19,27 +17,34 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * @param props
  */
-var GridContent = exports.GridContent = function GridContent(props) {
-  var value = (0, _react.useContext)(_RouteContext.RouteContext);
-  var children = props.children,
-    propsContentWidth = props.contentWidth,
-    propsClassName = props.className,
-    style = props.style;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var contentWidth = propsContentWidth || value.contentWidth;
-  var className = "".concat(prefixCls, "-grid-content");
-  var _useStyle = (0, _style.useStyle)(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var isWide = contentWidth === 'Fixed' && value.layout === 'top';
+const GridContent = props => {
+  const value = (0, _react.useContext)(_RouteContext.RouteContext);
+  const {
+    children,
+    contentWidth: propsContentWidth,
+    className: propsClassName,
+    style
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const contentWidth = propsContentWidth || value.contentWidth;
+  const className = `${prefixCls}-grid-content`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(className);
+  const isWide = contentWidth === 'Fixed' && value.layout === 'top';
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)(className, hashId, propsClassName, (0, _defineProperty2.default)({}, "".concat(className, "-wide"), isWide)),
+    className: (0, _clsx.clsx)(className, hashId, propsClassName, {
+      [`${className}-wide`]: isWide
+    }),
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-grid-content-children ").concat(hashId).trim(),
+      className: `${prefixCls}-grid-content-children ${hashId}`.trim(),
       children: children
     })
   }));
-};
+};
+exports.GridContent = GridContent;

package/lib/layout/components/GridContent/style.js

@@ -1,27 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genGridContentStyle = function genGridContentStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    width: '100%',
-    '&-wide': {
-      maxWidth: 1152,
-      margin: '0 auto'
+const genGridContentStyle = token => {
+  return {
+    [token.componentCls]: {
+      width: '100%',
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto'
+      }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutGridContent', function (token) {
-    var GridContentToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutGridContent', token => {
+    const GridContentToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGridContentStyle(GridContentToken)];
   });
 }

package/lib/layout/components/Header/index.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../utils/utils");
@@ -19,56 +15,55 @@ var _TopNavHeader = require("../TopNavHeader");
 var _header = require("./style/header");
 var _stylish = require("./style/stylish");
 var _jsxRuntime = require("react/jsx-runtime");
-var Header = _antd.Layout.Header;
-var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
-  var _token$layout2, _token$layout3, _token$layout4;
-  var isMobile = props.isMobile,
-    fixedHeader = props.fixedHeader,
-    propsClassName = props.className,
-    style = props.style,
-    collapsed = props.collapsed,
-    prefixCls = props.prefixCls,
-    onCollapse = props.onCollapse,
-    layout = props.layout,
-    headerRender = props.headerRender,
-    headerContentRender = props.headerContentRender;
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext.token;
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isFixedHeaderScroll = _useState2[0],
-    setIsFixedHeaderScroll = _useState2[1];
-  var needFixedHeader = fixedHeader || layout === 'mix';
-  var renderContent = (0, _react.useCallback)(function () {
-    var isTop = layout === 'top';
-    var clearMenuData = (0, _utils.clearMenuItem)(props.menuData || []);
-    var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalHeader.GlobalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      onCollapse: onCollapse
-    }, props), {}, {
+const {
+  Header
+} = _antd.Layout;
+const DefaultHeader = props => {
+  const {
+    isMobile,
+    fixedHeader,
+    className: propsClassName,
+    style,
+    collapsed,
+    prefixCls,
+    onCollapse,
+    layout,
+    headerRender,
+    headerContentRender
+  } = props;
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const [isFixedHeaderScroll, setIsFixedHeaderScroll] = (0, _react.useState)(false);
+  const needFixedHeader = fixedHeader || layout === 'mix';
+  const renderContent = (0, _react.useCallback)(() => {
+    const isTop = layout === 'top';
+    const clearMenuData = (0, _utils.clearMenuItem)(props.menuData || []);
+    let defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalHeader.GlobalHeader, {
+      onCollapse: onCollapse,
+      ...props,
       menuData: clearMenuData,
       children: headerContentRender && headerContentRender(props, null)
-    }));
+    });
     if (isTop && !isMobile) {
-      defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, {
         mode: "horizontal",
-        onCollapse: onCollapse
-      }, props), {}, {
+        onCollapse: onCollapse,
+        ...props,
         menuData: clearMenuData
-      }));
+      });
     }
     if (headerRender && typeof headerRender === 'function') {
       return headerRender(props, defaultDom);
     }
     return defaultDom;
   }, [headerContentRender, headerRender, isMobile, layout, onCollapse, props]);
-  (0, _react.useEffect)(function () {
-    var _context$getTargetCon;
-    var dom = (context === null || context === void 0 || (_context$getTargetCon = context.getTargetContainer) === null || _context$getTargetCon === void 0 ? void 0 : _context$getTargetCon.call(context)) || document.body;
-    var isFixedHeaderFn = function isFixedHeaderFn() {
-      var _token$layout;
-      var scrollTop = dom.scrollTop;
-      if (scrollTop > (((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56) && !isFixedHeaderScroll) {
+  (0, _react.useEffect)(() => {
+    const dom = context?.getTargetContainer?.() || document.body;
+    const isFixedHeaderFn = () => {
+      const scrollTop = dom.scrollTop;
+      if (scrollTop > (token.layout?.header?.heightLayoutHeader || 56) && !isFixedHeaderScroll) {
         setIsFixedHeaderScroll(true);
         return true;
       }
@@ -82,20 +77,29 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
     dom.addEventListener('scroll', isFixedHeaderFn, {
       passive: true
     });
-    return function () {
+    return () => {
       dom.removeEventListener('scroll', isFixedHeaderFn);
     };
-  }, [(_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
-  var isTop = layout === 'top';
-  var baseClassName = "".concat(prefixCls, "-layout-header");
-  var _useStyle = (0, _header.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var stylish = (0, _stylish.useStylish)("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+  }, [token.layout?.header?.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
+  const isTop = layout === 'top';
+  const baseClassName = `${prefixCls}-layout-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _header.useStyle)(baseClassName);
+  const stylish = (0, _stylish.useStylish)(`${baseClassName}.${baseClassName}-stylish`, {
     proLayoutCollapsedWidth: 64,
     stylish: props.stylish
   });
-  var className = (0, _classnames.default)(propsClassName, hashId, baseClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-fixed-header"), needFixedHeader), "".concat(baseClassName, "-fixed-header-scroll"), isFixedHeaderScroll), "".concat(baseClassName, "-mix"), layout === 'mix'), "".concat(baseClassName, "-fixed-header-action"), !collapsed), "".concat(baseClassName, "-top-menu"), isTop), "".concat(baseClassName, "-header"), true), "".concat(baseClassName, "-stylish"), !!props.stylish));
+  const className = (0, _clsx.clsx)(propsClassName, hashId, baseClassName, {
+    [`${baseClassName}-fixed-header`]: needFixedHeader,
+    [`${baseClassName}-fixed-header-scroll`]: isFixedHeaderScroll,
+    [`${baseClassName}-mix`]: layout === 'mix',
+    [`${baseClassName}-fixed-header-action`]: !collapsed,
+    [`${baseClassName}-top-menu`]: isTop,
+    [`${baseClassName}-header`]: true,
+    [`${baseClassName}-stylish`]: !!props.stylish
+  });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider
@@ -111,12 +115,13 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
         }
       },
       children: [needFixedHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
-        style: (0, _objectSpread2.default)({
-          height: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.heightLayoutHeader) || 56,
-          lineHeight: "".concat(((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.heightLayoutHeader) || 56, "px"),
+        style: {
+          height: token.layout?.header?.heightLayoutHeader || 56,
+          lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
           backgroundColor: 'transparent',
-          zIndex: 19
-        }, style)
+          zIndex: 19,
+          ...style
+        }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
         className: className,
         style: style,
@@ -124,4 +129,5 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
       })]
     })
   })));
-};
+};
+exports.DefaultHeader = DefaultHeader;

package/lib/layout/components/Header/style/header.js

@@ -1,64 +1,65 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../../provider");
-var genProLayoutHeaderStyle = function genProLayoutHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4;
-  return (0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-layout-header").concat(token.componentCls), {
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    lineHeight: "".concat(((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader) || 56, "px"),
-    // hitu 用了这个属性，不能删除哦 @南取
-    zIndex: 19,
-    width: '100%',
-    paddingBlock: 0,
-    paddingInline: 0,
-    borderBlockEnd: "1px solid ".concat(token.colorSplit),
-    backgroundColor: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorBgHeader) || 'rgba(255, 255, 255, 0.4)',
-    WebkitBackdropFilter: 'blur(8px)',
-    backdropFilter: 'blur(8px)',
-    transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-    '&-fixed-header': {
-      position: 'fixed',
-      insetBlockStart: 0,
-      width: '100%',
-      zIndex: 100,
-      insetInlineEnd: 0
-    },
-    '&-fixed-header-scroll': {
-      backgroundColor: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgScrollHeader) || 'rgba(255, 255, 255, 0.8)'
-    },
-    '&-header-actions': {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: '16',
-      cursor: 'pointer',
-      '& &-item': {
+const genProLayoutHeaderStyle = token => {
+  return {
+    [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-header${token.componentCls}`]: {
+        height: token.layout?.header?.heightLayoutHeader || 56,
+        lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
+        // hitu 用了这个属性，不能删除哦 @南取
+        zIndex: 19,
+        width: '100%',
         paddingBlock: 0,
-        paddingInline: 8,
-        '&:hover': {
-          color: token.colorText
+        paddingInline: 0,
+        borderBlockEnd: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.layout?.header?.colorBgHeader || 'rgba(255, 255, 255, 0.4)',
+        WebkitBackdropFilter: 'blur(8px)',
+        backdropFilter: 'blur(8px)',
+        transition: 'background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+        '&-fixed-header': {
+          position: 'fixed',
+          insetBlockStart: 0,
+          width: '100%',
+          zIndex: 100,
+          insetInlineEnd: 0
+        },
+        '&-fixed-header-scroll': {
+          backgroundColor: token.layout?.header?.colorBgScrollHeader || 'rgba(255, 255, 255, 0.8)'
+        },
+        '&-header-actions': {
+          display: 'flex',
+          alignItems: 'center',
+          fontSize: '16',
+          cursor: 'pointer',
+          '& &-item': {
+            paddingBlock: 0,
+            paddingInline: 8,
+            '&:hover': {
+              color: token.colorText
+            }
+          }
+        },
+        '&-header-realDark': {
+          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
+        },
+        '&-header-actions-header-action': {
+          transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
         }
       }
-    },
-    '&-header-realDark': {
-      boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 65%)'
-    },
-    '&-header-actions-header-action': {
-      transition: 'width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
     }
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutHeader', function (token) {
-    var ProLayoutHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutHeader', token => {
+    const ProLayoutHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutHeaderStyle(ProLayoutHeaderToken)];
   });
 }

package/lib/layout/components/Header/style/stylish.js

@@ -1,22 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStylish = useStylish;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _provider = require("../../../../provider");
-function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish,
-    proLayoutCollapsedWidth = _ref.proLayoutCollapsedWidth;
-  return (0, _provider.useStyle)('ProLayoutHeaderStylish', function (token) {
-    var stylishToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+function useStylish(prefixCls, {
+  stylish,
+  proLayoutCollapsedWidth
+}) {
+  return (0, _provider.useStyle)('ProLayoutHeaderStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     if (!stylish) return [];
-    return [(0, _defineProperty2.default)({}, "div".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken)))];
+    return [{
+      [`div${token.proComponentsCls}-layout`]: {
+        [`${stylishToken.componentCls}`]: stylish?.(stylishToken)
+      }
+    }];
   });
 }

package/lib/layout/components/Help/AsyncContentPanel.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AsyncContentPanel = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _antd = require("antd");
 var _react = require("react");
 var _HelpProvide = require("./HelpProvide");
@@ -15,24 +13,20 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 异步加载内容的面板组件
  * @param item 指向当前面板的 ProHelpDataSource
  */
-var AsyncContentPanel = exports.AsyncContentPanel = function AsyncContentPanel(_ref) {
-  var item = _ref.item,
-    _onInit = _ref.onInit;
-  var _useContext = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
-    onLoadContext = _useContext.onLoadContext; // 获取上下文中的 onLoadContext
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1]; // 加载状态
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    content = _useState4[0],
-    setContent = _useState4[1]; // 内容数据
+const AsyncContentPanel = ({
+  item,
+  onInit
+}) => {
+  const {
+    onLoadContext
+  } = (0, _react.useContext)(_HelpProvide.ProHelpProvide); // 获取上下文中的 onLoadContext
+  const [loading, setLoading] = (0, _react.useState)(false); // 加载状态
+  const [content, setContent] = (0, _react.useState)(); // 内容数据
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!item.key) return; // 如果没有key则返回
     setLoading(true); // 开始加载
-    onLoadContext === null || onLoadContext === void 0 || onLoadContext(item.key, item).then(function (res) {
+    onLoadContext?.(item.key, item).then(res => {
       // 调用加载方法
       setLoading(false); // 加载完成
       setContent(res); // 设置内容数据
@@ -58,9 +52,10 @@ var AsyncContentPanel = exports.AsyncContentPanel = function AsyncContentPanel(_
 
   // 加载完成后，渲染内容面板
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderContentPanel.RenderContentPanel, {
-    onInit: function onInit(ref) {
-      _onInit === null || _onInit === void 0 || _onInit(ref);
+    onInit: ref => {
+      onInit?.(ref);
     },
     dataSourceChildren: content
   });
-};
+};
+exports.AsyncContentPanel = AsyncContentPanel;

package/lib/layout/components/Help/HelpProvide.js

@@ -55,7 +55,7 @@ var _react = _interopRequireDefault(require("react"));
  * 该上下文对象通常用于在 React 组件树中共享数据，即可以通过在组件中使用 ProHelpProvide.Provider 包裹一组组件，
  * 将 dataSource 和 valueTypeMap 数据源传递给这些组件，这些组件即可从上下文中获取 dataSource 数据源，实现数据的共享和传递。
  */
-var ProHelpProvide = exports.ProHelpProvide = /*#__PURE__*/_react.default.createContext({
+const ProHelpProvide = exports.ProHelpProvide = /*#__PURE__*/_react.default.createContext({
   dataSource: [],
   valueTypeMap: new Map()
 });