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

package/es/layout/components/PageContainer/index.js

@@ -1,11 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["title", "content", "pageHeaderRender", "header", "prefixedClassName", "extraContent", "childrenContentStyle", "style", "prefixCls", "hashId", "value", "breadcrumbRender"],
-  _excluded2 = ["children", "loading", "className", "style", "footer", "affixProps", "token", "fixedHeader", "breadcrumbRender", "footerToolBarProps", "childrenContentStyle"];
 import { Affix, Breadcrumb, ConfigProvider, Tabs, Watermark } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { ProConfigProvider, ProProvider } from "../../../provider";
 import { RouteContext } from "../../context/RouteContext";
@@ -19,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 function genLoading(spinProps) {
-  if (_typeof(spinProps) === 'object') {
+  if (typeof spinProps === 'object') {
     return spinProps;
   }
   return {
@@ -31,51 +25,50 @@ function genLoading(spinProps) {
  * Render Footer tabList In order to be compatible with the old version of the PageHeader basically
  * all the functions are implemented.
  */
-var renderFooter = function renderFooter(_ref) {
-  var tabList = _ref.tabList,
-    tabActiveKey = _ref.tabActiveKey,
-    onTabChange = _ref.onTabChange,
-    hashId = _ref.hashId,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    tabProps = _ref.tabProps,
-    prefixedClassName = _ref.prefixedClassName;
+const renderFooter = ({
+  tabList,
+  tabActiveKey,
+  onTabChange,
+  hashId,
+  tabBarExtraContent,
+  tabProps,
+  prefixedClassName
+}) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
-    return /*#__PURE__*/_jsx(Tabs, _objectSpread({
-      className: "".concat(prefixedClassName, "-tabs ").concat(hashId).trim(),
+    return /*#__PURE__*/_jsx(Tabs, {
+      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
       activeKey: tabActiveKey,
-      onChange: function onChange(key) {
+      onChange: key => {
         if (onTabChange) {
           onTabChange(key);
         }
       },
       tabBarExtraContent: tabBarExtraContent,
-      items: tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
-        var _item$key;
-        return _objectSpread(_objectSpread({
-          label: item.tab
-        }, item), {}, {
-          key: ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || (index === null || index === void 0 ? void 0 : index.toString())
-        });
-      })
-    }, tabProps));
+      items: tabList?.map((item, index) => ({
+        label: item.tab,
+        ...item,
+        key: item.key?.toString() || index?.toString()
+      })),
+      ...tabProps
+    });
   }
   return null;
 };
-var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName, hashId) {
+const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
   if (!content && !extraContent) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: "".concat(prefixedClassName, "-detail ").concat(hashId).trim(),
+    className: `${prefixedClassName}-detail ${hashId}`.trim(),
     children: /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefixedClassName, "-main ").concat(hashId).trim(),
+      className: `${prefixedClassName}-main ${hashId}`.trim(),
       children: /*#__PURE__*/_jsxs("div", {
-        className: "".concat(prefixedClassName, "-row ").concat(hashId).trim(),
+        className: `${prefixedClassName}-row ${hashId}`.trim(),
         children: [content && /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixedClassName, "-content ").concat(hashId).trim(),
+          className: `${prefixedClassName}-content ${hashId}`.trim(),
           children: content
         }), extraContent && /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixedClassName, "-extraContent ").concat(hashId).trim(),
+          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
           children: extraContent
         })]
       })
@@ -89,33 +82,38 @@ var renderPageHeader = function renderPageHeader(content, extraContent, prefixed
  * @param props
  * @returns
  */
-var ProBreadcrumb = function ProBreadcrumb(props) {
-  var value = useContext(RouteContext);
+const ProBreadcrumb = props => {
+  const value = useContext(RouteContext);
   return /*#__PURE__*/_jsx("div", {
     style: {
       height: '100%',
       display: 'flex',
       alignItems: 'center'
     },
-    children: /*#__PURE__*/_jsx(Breadcrumb, _objectSpread(_objectSpread(_objectSpread({}, value === null || value === void 0 ? void 0 : value.breadcrumb), value === null || value === void 0 ? void 0 : value.breadcrumbProps), props))
+    children: /*#__PURE__*/_jsx(Breadcrumb, {
+      ...value?.breadcrumb,
+      ...value?.breadcrumbProps,
+      ...props
+    })
   });
 };
-var memoRenderPageHeader = function memoRenderPageHeader(props) {
-  var _breadcrumb$items;
-  var title = props.title,
-    content = props.content,
-    pageHeaderRender = props.pageHeaderRender,
-    header = props.header,
-    prefixedClassName = props.prefixedClassName,
-    extraContent = props.extraContent,
-    childrenContentStyle = props.childrenContentStyle,
-    style = props.style,
-    prefixCls = props.prefixCls,
-    hashId = props.hashId,
-    value = props.value,
-    breadcrumbRender = props.breadcrumbRender,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var getBreadcrumbRender = function getBreadcrumbRender() {
+const memoRenderPageHeader = props => {
+  const {
+    title,
+    content,
+    pageHeaderRender,
+    header,
+    prefixedClassName,
+    extraContent,
+    childrenContentStyle,
+    style,
+    prefixCls,
+    hashId,
+    value,
+    breadcrumbRender,
+    ...restProps
+  } = props;
+  const getBreadcrumbRender = () => {
     if (!breadcrumbRender) {
       return undefined;
     }
@@ -126,97 +124,103 @@ var memoRenderPageHeader = function memoRenderPageHeader(props) {
   }
   if (pageHeaderRender) {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [" ", pageHeaderRender(_objectSpread(_objectSpread({}, props), value))]
+      children: [" ", pageHeaderRender({
+        ...props,
+        ...value
+      })]
     });
   }
-  var pageHeaderTitle = title;
+  let pageHeaderTitle = title;
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
-  var pageHeaderProps = _objectSpread(_objectSpread(_objectSpread({}, value), {}, {
-    title: pageHeaderTitle
-  }, restProps), {}, {
-    footer: renderFooter(_objectSpread(_objectSpread({}, restProps), {}, {
-      hashId: hashId,
-      breadcrumbRender: breadcrumbRender,
-      prefixedClassName: prefixedClassName
-    }))
-  }, header);
-  var _ref2 = pageHeaderProps,
-    breadcrumb = _ref2.breadcrumb;
-  var noHasBreadCrumb = (!breadcrumb || !(breadcrumb !== null && breadcrumb !== void 0 && breadcrumb.itemRender) && !(breadcrumb !== null && breadcrumb !== void 0 && (_breadcrumb$items = breadcrumb.items) !== null && _breadcrumb$items !== void 0 && _breadcrumb$items.length)) && !breadcrumbRender;
-  if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(function (item) {
-    return !pageHeaderProps[item];
-  }) && noHasBreadCrumb && !content && !extraContent) {
+  const pageHeaderProps = {
+    ...value,
+    title: pageHeaderTitle,
+    ...restProps,
+    footer: renderFooter({
+      ...restProps,
+      hashId,
+      breadcrumbRender,
+      prefixedClassName
+    }),
+    ...header
+  };
+  const {
+    breadcrumb
+  } = pageHeaderProps;
+  const noHasBreadCrumb = (!breadcrumb || !breadcrumb?.itemRender && !breadcrumb?.items?.length) && !breadcrumbRender;
+  if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(item => !pageHeaderProps[item]) && noHasBreadCrumb && !content && !extraContent) {
     return null;
   }
-  return /*#__PURE__*/_jsx(PageHeader, _objectSpread(_objectSpread({}, pageHeaderProps), {}, {
-    className: "".concat(prefixedClassName, "-warp-page-header ").concat(hashId).trim(),
-    breadcrumb: breadcrumbRender === false ? undefined : _objectSpread(_objectSpread({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
+  return /*#__PURE__*/_jsx(PageHeader, {
+    ...pageHeaderProps,
+    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    breadcrumb: breadcrumbRender === false ? undefined : {
+      ...pageHeaderProps.breadcrumb,
+      ...value.breadcrumbProps
+    },
     breadcrumbRender: getBreadcrumbRender(),
     prefixCls: prefixCls,
-    children: (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
-  }));
+    children: header?.children || renderPageHeader(content, extraContent, prefixedClassName, hashId)
+  });
 };
-var PageContainerBase = function PageContainerBase(props) {
-  var _restProps$header2, _token$layout;
-  var children = props.children,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    className = props.className,
-    style = props.style,
-    footer = props.footer,
-    affixProps = props.affixProps,
-    propsToken = props.token,
-    fixedHeader = props.fixedHeader,
-    breadcrumbRender = props.breadcrumbRender,
-    footerToolBarProps = props.footerToolBarProps,
-    childrenContentStyle = props.childrenContentStyle,
-    restProps = _objectWithoutProperties(props, _excluded2);
-  var value = useContext(RouteContext);
+const PageContainerBase = props => {
+  const {
+    children,
+    loading = false,
+    className,
+    style,
+    footer,
+    affixProps,
+    token: propsToken,
+    fixedHeader,
+    breadcrumbRender,
+    footerToolBarProps,
+    childrenContentStyle,
+    ...restProps
+  } = props;
+  const value = useContext(RouteContext);
   /** 告诉 props 是否存在 footerBar */
-  useEffect(function () {
-    var _value$setHasPageCont;
-    if (!value || !(value !== null && value !== void 0 && value.setHasPageContainer)) {
-      return function () {};
+  useEffect(() => {
+    if (!value || !value?.setHasPageContainer) {
+      return () => {};
     }
-    value === null || value === void 0 || (_value$setHasPageCont = value.setHasPageContainer) === null || _value$setHasPageCont === void 0 || _value$setHasPageCont.call(value, function (num) {
-      return num + 1;
-    });
-    return function () {
-      var _value$setHasPageCont2;
-      value === null || value === void 0 || (_value$setHasPageCont2 = value.setHasPageContainer) === null || _value$setHasPageCont2 === void 0 || _value$setHasPageCont2.call(value, function (num) {
-        return num - 1;
-      });
+    value?.setHasPageContainer?.(num => num + 1);
+    return () => {
+      value?.setHasPageContainer?.(num => num - 1);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useContext = useContext(ProProvider),
-    token = _useContext.token;
-  var _useContext2 = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var basePageContainer = "".concat(prefixCls, "-page-container");
-  var _useStyle = useStyle(basePageContainer, propsToken),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var stylish = useStylish("".concat(basePageContainer, ".").concat(basePageContainer, "-stylish"), {
+  const {
+    token
+  } = useContext(ProProvider);
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const basePageContainer = `${prefixCls}-page-container`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(basePageContainer, propsToken);
+  const stylish = useStylish(`${basePageContainer}.${basePageContainer}-stylish`, {
     stylish: props.stylish
   });
-  var memoBreadcrumbRender = useMemo(function () {
-    var _restProps$header;
+  const memoBreadcrumbRender = useMemo(() => {
     if (breadcrumbRender == false) return false;
-    return breadcrumbRender || (restProps === null || restProps === void 0 || (_restProps$header = restProps.header) === null || _restProps$header === void 0 ? void 0 : _restProps$header.breadcrumbRender);
-  }, [breadcrumbRender, restProps === null || restProps === void 0 || (_restProps$header2 = restProps.header) === null || _restProps$header2 === void 0 ? void 0 : _restProps$header2.breadcrumbRender]);
-  var pageHeaderDom = memoRenderPageHeader(_objectSpread(_objectSpread({}, restProps), {}, {
+    return breadcrumbRender || restProps?.header?.breadcrumbRender;
+  }, [breadcrumbRender, restProps?.header?.breadcrumbRender]);
+  const pageHeaderDom = memoRenderPageHeader({
+    ...restProps,
     breadcrumbRender: memoBreadcrumbRender,
     ghost: true,
-    hashId: hashId,
+    hashId,
     prefixCls: undefined,
     prefixedClassName: basePageContainer,
-    value: value
-  }));
-  var loadingDom = useMemo(function () {
+    value
+  });
+  const loadingDom = useMemo(() => {
     // 当loading时一个合法的ReactNode时，说明用户使用了自定义loading,直接返回改自定义loading
     if ( /*#__PURE__*/React.isValidElement(loading)) {
       return loading;
@@ -226,31 +230,43 @@ var PageContainerBase = function PageContainerBase(props) {
       return null;
     }
     // 如非上述两种情况，那么要么用户传了一个true,要么用户传了loading配置，使用genLoading生成loading配置后返回PageLoading
-    var spinProps = genLoading(loading);
+    const spinProps = genLoading(loading);
     // 如果传的是loading配置，但spinning传的是false，也不需要显示loading
-    return spinProps.spinning ? /*#__PURE__*/_jsx(PageLoading, _objectSpread({}, spinProps)) : null;
+    return spinProps.spinning ? /*#__PURE__*/_jsx(PageLoading, {
+      ...spinProps
+    }) : null;
   }, [loading]);
-  var content = useMemo(function () {
+  const content = useMemo(() => {
     return children ? /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx("div", {
-        className: classNames(hashId, "".concat(basePageContainer, "-children-container"), _defineProperty({}, "".concat(basePageContainer, "-children-container-no-header"), !pageHeaderDom)),
+        className: clsx(hashId, `${basePageContainer}-children-container`, {
+          [`${basePageContainer}-children-container-no-header`]: !pageHeaderDom
+        }),
         style: childrenContentStyle,
         children: children
       })
     }) : null;
   }, [children, basePageContainer, childrenContentStyle, hashId]);
-  var renderContentDom = useMemo(function () {
+  const renderContentDom = useMemo(() => {
     // 只要loadingDom非空我们就渲染loadingDom,否则渲染内容
-    var dom = loadingDom || content;
+    const dom = loadingDom || content;
     if (props.waterMarkProps || value.waterMarkProps) {
-      var waterMarkProps = _objectSpread(_objectSpread({}, value.waterMarkProps), props.waterMarkProps);
-      return /*#__PURE__*/_jsx(Watermark, _objectSpread(_objectSpread({}, waterMarkProps), {}, {
+      const waterMarkProps = {
+        ...value.waterMarkProps,
+        ...props.waterMarkProps
+      };
+      return /*#__PURE__*/_jsx(Watermark, {
+        ...waterMarkProps,
         children: dom
-      }));
+      });
     }
     return dom;
   }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
-  var containerClassName = classNames(basePageContainer, hashId, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(basePageContainer, "-with-footer"), footer), "".concat(basePageContainer, "-with-affix"), fixedHeader && pageHeaderDom), "".concat(basePageContainer, "-stylish"), !!restProps.stylish));
+  const containerClassName = clsx(basePageContainer, hashId, className, {
+    [`${basePageContainer}-with-footer`]: footer,
+    [`${basePageContainer}-with-affix`]: fixedHeader && pageHeaderDom,
+    [`${basePageContainer}-stylish`]: !!restProps.stylish
+  });
   return wrapSSR(stylish.wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       style: style,
@@ -258,36 +274,39 @@ var PageContainerBase = function PageContainerBase(props) {
       children: [fixedHeader && pageHeaderDom ?
       /*#__PURE__*/
       // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
-      _jsx(Affix, _objectSpread(_objectSpread({
-        offsetTop: value.hasHeader && value.fixedHeader ? (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader : 1
-      }, affixProps), {}, {
-        className: "".concat(basePageContainer, "-affix ").concat(hashId).trim(),
+      _jsx(Affix, {
+        offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
+        ...affixProps,
+        className: `${basePageContainer}-affix ${hashId}`.trim(),
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(basePageContainer, "-warp ").concat(hashId).trim(),
+          className: `${basePageContainer}-warp ${hashId}`.trim(),
           children: pageHeaderDom
         })
-      })) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {
+      }) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {
         children: renderContentDom
       })]
-    }), footer && /*#__PURE__*/_jsx(FooterToolbar, _objectSpread(_objectSpread({
+    }), footer && /*#__PURE__*/_jsx(FooterToolbar, {
       stylish: restProps.footerStylish,
-      prefixCls: prefixCls
-    }, footerToolBarProps), {}, {
+      prefixCls: prefixCls,
+      ...footerToolBarProps,
       children: footer
-    }))]
+    })]
   })));
 };
-var PageContainer = function PageContainer(props) {
+const PageContainer = props => {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/_jsx(PageContainerBase, _objectSpread({}, props))
+    children: /*#__PURE__*/_jsx(PageContainerBase, {
+      ...props
+    })
   });
 };
-var ProPageHeader = function ProPageHeader(props) {
-  var value = useContext(RouteContext);
-  return memoRenderPageHeader(_objectSpread(_objectSpread({}, props), {}, {
+const ProPageHeader = props => {
+  const value = useContext(RouteContext);
+  return memoRenderPageHeader({
+    ...props,
     hashId: '',
-    value: value
-  }));
+    value
+  });
 };
 export { PageContainer, ProBreadcrumb, ProPageHeader };

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

@@ -1,84 +1,101 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useStyle as useAntdStyle } from "../../../../provider";
-var _map = [576, 768, 992, 1200].map(function (bp) {
-    return "@media (max-width: ".concat(bp, "px)");
-  }),
-  _map2 = _slicedToArray(_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 _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    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': _defineProperty({}, "".concat(token.antCls, "-affix"), _defineProperty({}, "".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', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    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"), _defineProperty({}, "".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', _defineProperty({
-    display: 'flex'
-  }, sm, {
-    display: 'block'
-  })), '&-main', {
-    width: '100%'
-  }), '&-row', _defineProperty({
-    display: 'flex',
-    width: '100%'
-  }, md, {
-    display: 'block'
-  })), '&-content', {
-    flex: 'auto',
-    width: '100%'
-  }), '&-extraContent', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    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
+        }
+      }
+    }
+  };
 };
 export function useStyle(prefixCls, componentsToken) {
-  return useAntdStyle('ProLayoutPageContainer', function (token) {
-    var _token$layout13;
-    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      layout: _objectSpread(_objectSpread({}, token === null || token === void 0 ? void 0 : token.layout), {}, {
-        pageContainer: _objectSpread(_objectSpread({}, token === null || token === void 0 || (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : _token$layout13.pageContainer), componentsToken)
-      })
-    });
+  return useAntdStyle('ProLayoutPageContainer', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      layout: {
+        ...token?.layout,
+        pageContainer: {
+          ...token?.layout?.pageContainer,
+          ...componentsToken
+        }
+      }
+    };
     return [genPageContainerStyle(proCardToken)];
   });
 }