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

package/lib/layout/components/PageContainer/style/index.js

@@ -1,91 +1,107 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _provider = require("../../../../provider");
-var _map = [576, 768, 992, 1200].map(function (bp) {
-    return "@media (max-width: ".concat(bp, "px)");
-  }),
-  _map2 = (0, _slicedToArray2.default)(_map, 4),
-  sm = _map2[0],
-  md = _map2[1],
-  lg = _map2[2],
-  xl = _map2[3];
-var genPageContainerStyle = function genPageContainerStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout$pageCon, _token$layout5, _token$layout$pageCon2, _token$layout6, _token$layout7, _token$layout8, _token$layout$pageCon3, _token$layout9, _token$layout$pageCon4, _token$layout10, _token$layout$pageCon5, _token$layout11, _token$layout$pageCon6, _token$layout12;
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    position: 'relative',
-    '&-children-container': {
-      paddingBlockStart: 0,
-      paddingBlockEnd: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.paddingBlockPageContainerContent,
-      paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.pageContainer) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlinePageContainerContent
-    },
-    '&-children-container-no-header': {
-      paddingBlockStart: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.pageContainer) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockPageContainerContent
-    },
-    '&-affix': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-affix"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-warp"), {
-      backgroundColor: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.pageContainer) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgPageContainerFixed,
-      transition: 'background-color 0.3s',
-      boxShadow: '0 2px 8px #f0f1f2'
-    }))
-  }, '& &-warp-page-header', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    paddingBlockStart: ((_token$layout$pageCon = (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.pageContainer) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.paddingBlockPageContainerContent) !== null && _token$layout$pageCon !== void 0 ? _token$layout$pageCon : 40) / 4,
-    paddingBlockEnd: ((_token$layout$pageCon2 = (_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.pageContainer) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.paddingBlockPageContainerContent) !== null && _token$layout$pageCon2 !== void 0 ? _token$layout$pageCon2 : 40) / 2,
-    paddingInlineStart: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.pageContainer) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.paddingInlinePageContainerContent,
-    paddingInlineEnd: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.pageContainer) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.paddingInlinePageContainerContent
-  }, "& ~ ".concat(token.proComponentsCls, "-grid-content"), (0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-page-container-children-content"), {
-    paddingBlock: ((_token$layout$pageCon3 = (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.pageContainer) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.paddingBlockPageContainerContent) !== null && _token$layout$pageCon3 !== void 0 ? _token$layout$pageCon3 : 24) / 3
-  })), "".concat(token.antCls, "-page-header-breadcrumb"), {
-    paddingBlockStart: ((_token$layout$pageCon4 = (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.pageContainer) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.paddingBlockPageContainerContent) !== null && _token$layout$pageCon4 !== void 0 ? _token$layout$pageCon4 : 40) / 4 + 10
-  }), "".concat(token.antCls, "-page-header-heading"), {
-    paddingBlockStart: ((_token$layout$pageCon5 = (_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.pageContainer) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.paddingBlockPageContainerContent) !== null && _token$layout$pageCon5 !== void 0 ? _token$layout$pageCon5 : 40) / 4
-  }), "".concat(token.antCls, "-page-header-footer"), {
-    marginBlockStart: ((_token$layout$pageCon6 = (_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.pageContainer) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.paddingBlockPageContainerContent) !== null && _token$layout$pageCon6 !== void 0 ? _token$layout$pageCon6 : 40) / 4
-  })), '&-detail', (0, _defineProperty2.default)({
-    display: 'flex'
-  }, sm, {
-    display: 'block'
-  })), '&-main', {
-    width: '100%'
-  }), '&-row', (0, _defineProperty2.default)({
-    display: 'flex',
-    width: '100%'
-  }, md, {
-    display: 'block'
-  })), '&-content', {
-    flex: 'auto',
-    width: '100%'
-  }), '&-extraContent', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    flex: '0 1 auto',
-    minWidth: '242px',
-    marginInlineStart: 88,
-    textAlign: 'end'
-  }, xl, {
-    marginInlineStart: 44
-  }), lg, {
-    marginInlineStart: 20
-  }), md, {
-    marginInlineStart: 0,
-    textAlign: 'start'
-  }), sm, {
-    marginInlineStart: 0
-  })));
+const [sm, md, lg, xl] = [576, 768, 992, 1200].map(bp => `@media (max-width: ${bp}px)`);
+const genPageContainerStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
+      '&-children-container': {
+        paddingBlockStart: 0,
+        paddingBlockEnd: token.layout?.pageContainer?.paddingBlockPageContainerContent,
+        paddingInline: token.layout?.pageContainer?.paddingInlinePageContainerContent
+      },
+      '&-children-container-no-header': {
+        paddingBlockStart: token.layout?.pageContainer?.paddingBlockPageContainerContent
+      },
+      '&-affix': {
+        [`${token.antCls}-affix`]: {
+          [`${token.componentCls}-warp`]: {
+            backgroundColor: token.layout?.pageContainer?.colorBgPageContainerFixed,
+            transition: 'background-color 0.3s',
+            boxShadow: '0 2px 8px #f0f1f2'
+          }
+        }
+      },
+      ['& &-warp-page-header']: {
+        paddingBlockStart: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 40) / 4,
+        paddingBlockEnd: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 40) / 2,
+        paddingInlineStart: token.layout?.pageContainer?.paddingInlinePageContainerContent,
+        paddingInlineEnd: token.layout?.pageContainer?.paddingInlinePageContainerContent,
+        [`& ~ ${token.proComponentsCls}-grid-content`]: {
+          [`${token.proComponentsCls}-page-container-children-content`]: {
+            paddingBlock: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 24) / 3
+          }
+        },
+        [`${token.antCls}-page-header-breadcrumb`]: {
+          paddingBlockStart: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 40) / 4 + 10
+        },
+        [`${token.antCls}-page-header-heading`]: {
+          paddingBlockStart: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 40) / 4
+        },
+        [`${token.antCls}-page-header-footer`]: {
+          marginBlockStart: (token.layout?.pageContainer?.paddingBlockPageContainerContent ?? 40) / 4
+        }
+      },
+      '&-detail': {
+        display: 'flex',
+        [sm]: {
+          display: 'block'
+        }
+      },
+      '&-main': {
+        width: '100%'
+      },
+      '&-row': {
+        display: 'flex',
+        width: '100%',
+        [md]: {
+          display: 'block'
+        }
+      },
+      '&-content': {
+        flex: 'auto',
+        width: '100%'
+      },
+      '&-extraContent': {
+        flex: '0 1 auto',
+        minWidth: '242px',
+        marginInlineStart: 88,
+        textAlign: 'end',
+        [xl]: {
+          marginInlineStart: 44
+        },
+        [lg]: {
+          marginInlineStart: 20
+        },
+        [md]: {
+          marginInlineStart: 0,
+          textAlign: 'start'
+        },
+        [sm]: {
+          marginInlineStart: 0
+        }
+      }
+    }
+  };
 };
 function useStyle(prefixCls, componentsToken) {
-  return (0, _provider.useStyle)('ProLayoutPageContainer', function (token) {
-    var _token$layout13;
-    var proCardToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      layout: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token === null || token === void 0 ? void 0 : token.layout), {}, {
-        pageContainer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token === null || token === void 0 || (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : _token$layout13.pageContainer), componentsToken)
-      })
-    });
+  return (0, _provider.useStyle)('ProLayoutPageContainer', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      layout: {
+        ...token?.layout,
+        pageContainer: {
+          ...token?.layout?.pageContainer,
+          ...componentsToken
+        }
+      }
+    };
     return [genPageContainerStyle(proCardToken)];
   });
 }

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

@@ -1,20 +1,21 @@
 "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;
-  return (0, _provider.useStyle)('ProLayoutPageContainerStylish', function (token) {
-    var stylishToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+function useStylish(prefixCls, {
+  stylish
+}) {
+  return (0, _provider.useStyle)('ProLayoutPageContainerStylish', token => {
+    const stylishToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     if (!stylish) return [];
-    return [(0, _defineProperty2.default)({}, "div".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
+    return [{
+      [`div${stylishToken.componentCls}`]: stylish?.(stylishToken)
+    }];
   });
 }

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

@@ -5,171 +5,171 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _icons = require("@ant-design/icons");
+var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _style = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
-var renderBack = function renderBack(prefixCls, hashId, backIcon, onBack) {
+const renderBack = (prefixCls, hashId, backIcon, onBack) => {
   if (!backIcon || !onBack) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixCls, "-back ").concat(hashId).trim(),
+    className: `${prefixCls}-back ${hashId}`.trim(),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "button",
-      onClick: function onClick(e) {
-        onBack === null || onBack === void 0 || onBack(e);
+      onClick: e => {
+        onBack?.(e);
       },
-      className: "".concat(prefixCls, "-back-button ").concat(hashId).trim(),
+      className: `${prefixCls}-back-button ${hashId}`.trim(),
       "aria-label": "back",
       children: backIcon
     })
   });
 };
-var renderBreadcrumb = function renderBreadcrumb(breadcrumb, prefixCls) {
-  var _breadcrumb$items;
-  if (!((_breadcrumb$items = breadcrumb.items) !== null && _breadcrumb$items !== void 0 && _breadcrumb$items.length)) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, breadcrumb), {}, {
-    className: (0, _classnames.default)("".concat(prefixCls, "-breadcrumb"), breadcrumb.className)
-  }));
+const renderBreadcrumb = (breadcrumb, prefixCls) => {
+  if (!breadcrumb.items?.length) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, {
+    ...breadcrumb,
+    className: (0, _clsx.clsx)(`${prefixCls}-breadcrumb`, breadcrumb.className)
+  });
 };
-var getBackIcon = function getBackIcon(props) {
-  var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ltr';
+const getBackIcon = (props, direction = 'ltr') => {
   if (props.backIcon !== undefined) {
     return props.backIcon;
   }
   return direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowLeftOutlined, {});
 };
-var renderTitle = function renderTitle(prefixCls, props) {
-  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ltr';
-  var hashId = arguments.length > 3 ? arguments[3] : undefined;
-  var title = props.title,
-    avatar = props.avatar,
-    subTitle = props.subTitle,
-    tags = props.tags,
-    extra = props.extra,
-    onBack = props.onBack;
-  var headingPrefixCls = "".concat(prefixCls, "-heading");
-  var hasHeading = title || subTitle || tags || extra;
+const renderTitle = (prefixCls, props, direction = 'ltr', hashId) => {
+  const {
+    title,
+    avatar,
+    subTitle,
+    tags,
+    extra,
+    onBack
+  } = props;
+  const headingPrefixCls = `${prefixCls}-heading`;
+  const hasHeading = title || subTitle || tags || extra;
   // If there is nothing, return a null
   if (!hasHeading) {
     return null;
   }
-  var backIcon = getBackIcon(props, direction);
-  var backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
-  var hasTitle = backIconDom || avatar || hasHeading;
+  const backIcon = getBackIcon(props, direction);
+  const backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
+  const hasTitle = backIconDom || avatar || hasHeading;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: headingPrefixCls + ' ' + hashId,
     children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "".concat(headingPrefixCls, "-left ").concat(hashId).trim(),
-      children: [backIconDom, avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, (0, _objectSpread2.default)({
-        className: (0, _classnames.default)("".concat(headingPrefixCls, "-avatar"), hashId, avatar.className)
-      }, avatar)), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "".concat(headingPrefixCls, "-title ").concat(hashId).trim(),
+      className: `${headingPrefixCls}-left ${hashId}`.trim(),
+      children: [backIconDom, avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-avatar`, hashId, avatar.className),
+        ...avatar
+      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `${headingPrefixCls}-title ${hashId}`.trim(),
         title: typeof title === 'string' ? title : undefined,
         children: title
       }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "".concat(headingPrefixCls, "-sub-title ").concat(hashId).trim(),
+        className: `${headingPrefixCls}-sub-title ${hashId}`.trim(),
         title: typeof subTitle === 'string' ? subTitle : undefined,
         children: subTitle
       }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "".concat(headingPrefixCls, "-tags ").concat(hashId).trim(),
+        className: `${headingPrefixCls}-tags ${hashId}`.trim(),
         children: tags
       })]
     }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "".concat(headingPrefixCls, "-extra ").concat(hashId).trim(),
+      className: `${headingPrefixCls}-extra ${hashId}`.trim(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
         children: extra
       })
     })]
   });
 };
-var renderFooter = function renderFooter(prefixCls, footer, hashId) {
+const renderFooter = (prefixCls, footer, hashId) => {
   if (footer) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-footer ").concat(hashId).trim(),
+      className: `${prefixCls}-footer ${hashId}`.trim(),
       children: footer
     });
   }
   return null;
 };
-var renderChildren = function renderChildren(prefixCls, children, hashId) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixCls, "-content ").concat(hashId).trim(),
-    children: children
-  });
-};
-var PageHeader = exports.PageHeader = function PageHeader(props) {
-  var _breadcrumbRender;
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    compact = _React$useState2[0],
-    updateCompact = _React$useState2[1];
-  var onResize = function onResize(_ref) {
-    var width = _ref.width;
-    return updateCompact(width < 768);
-  };
-  var _React$useContext = _react.default.useContext(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    direction = _React$useContext.direction;
-  var customizePrefixCls = props.prefixCls,
-    style = props.style,
-    footer = props.footer,
-    children = props.children,
-    breadcrumb = props.breadcrumb,
-    breadcrumbRender = props.breadcrumbRender,
-    customizeClassName = props.className,
-    contentWidth = props.contentWidth,
-    layout = props.layout,
-    _props$ghost = props.ghost,
-    ghost = _props$ghost === void 0 ? true : _props$ghost;
-  var prefixCls = getPrefixCls('page-header', customizePrefixCls);
-  var _useStyle = (0, _style.default)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var getDefaultBreadcrumbDom = function getDefaultBreadcrumbDom() {
-    if (breadcrumb !== null && breadcrumb !== void 0 && breadcrumb.items) {
+const renderChildren = (prefixCls, children, hashId) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  className: `${prefixCls}-content ${hashId}`.trim(),
+  children: children
+});
+const PageHeader = props => {
+  const [compact, updateCompact] = _react.default.useState(false);
+  const onResize = ({
+    width
+  }) => updateCompact(width < 768);
+  const {
+    getPrefixCls,
+    direction
+  } = _react.default.useContext(_antd.ConfigProvider.ConfigContext);
+  const {
+    prefixCls: customizePrefixCls,
+    style,
+    footer,
+    children,
+    breadcrumb,
+    breadcrumbRender,
+    className: customizeClassName,
+    contentWidth,
+    layout,
+    ghost = true
+  } = props;
+  const prefixCls = getPrefixCls('page-header', customizePrefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(prefixCls);
+  const getDefaultBreadcrumbDom = () => {
+    if (breadcrumb?.items) {
       return renderBreadcrumb(breadcrumb, prefixCls);
     }
     return null;
   };
-  var defaultBreadcrumbDom = getDefaultBreadcrumbDom();
-  var isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
+  const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
+  const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
 
   // support breadcrumbRender function
-  var breadcrumbRenderDomFromProps = (_breadcrumbRender = breadcrumbRender === null || breadcrumbRender === void 0 ? void 0 : breadcrumbRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    prefixCls: prefixCls
-  }), defaultBreadcrumbDom)) !== null && _breadcrumbRender !== void 0 ? _breadcrumbRender : defaultBreadcrumbDom;
+  const breadcrumbRenderDomFromProps = breadcrumbRender?.({
+    ...props,
+    prefixCls
+  }, defaultBreadcrumbDom) ?? defaultBreadcrumbDom;
 
   // 如果 breadcrumbRender 返回的是数组，需要转换为 Breadcrumb 组件
   // 如果返回的是 React.ReactNode，直接使用
-  var breadcrumbDom = isBreadcrumbComponent ? breadcrumb : Array.isArray(breadcrumbRenderDomFromProps) ? renderBreadcrumb({
+  const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : Array.isArray(breadcrumbRenderDomFromProps) ? renderBreadcrumb({
     items: breadcrumbRenderDomFromProps
   }, prefixCls) : breadcrumbRenderDomFromProps;
-  var className = (0, _classnames.default)(prefixCls, hashId, customizeClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-has-breadcrumb"), !!breadcrumbDom), "".concat(prefixCls, "-has-footer"), !!footer), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-compact"), compact), "".concat(prefixCls, "-wide"), contentWidth === 'Fixed' && layout == 'top'), "".concat(prefixCls, "-ghost"), ghost));
-  var title = renderTitle(prefixCls, props, direction, hashId);
-  var childDom = children && renderChildren(prefixCls, children, hashId);
-  var footerDom = renderFooter(prefixCls, footer, hashId);
+  const className = (0, _clsx.clsx)(prefixCls, hashId, customizeClassName, {
+    [`${prefixCls}-has-breadcrumb`]: !!breadcrumbDom,
+    [`${prefixCls}-has-footer`]: !!footer,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-compact`]: compact,
+    [`${prefixCls}-wide`]: contentWidth === 'Fixed' && layout == 'top',
+    [`${prefixCls}-ghost`]: ghost
+  });
+  const title = renderTitle(prefixCls, props, direction, hashId);
+  const childDom = children && renderChildren(prefixCls, children, hashId);
+  const footerDom = renderFooter(prefixCls, footer, hashId);
   if (!breadcrumbDom && !title && !footerDom && !childDom) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(hashId, ["".concat(prefixCls, "-no-children")])
+      className: (0, _clsx.clsx)(hashId, [`${prefixCls}-no-children`])
     });
   }
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeObserver.default, {
     onResize: onResize,
-    children: function children(ref) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: ref,
-        className: className,
-        style: style,
-        children: [breadcrumbDom, title, childDom, footerDom]
-      });
-    }
+    children: ref => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: ref,
+      className: className,
+      style: style,
+      children: [breadcrumbDom, title, childDom, footerDom]
+    })
   }));
-};
+};
+exports.PageHeader = PageHeader;