Update from Vibe Studio

node_modules/@ant-design/pro-layout/lib/components/PageContainer/index.d.ts

@@ -0,0 +1,90 @@
+import type { GenerateStyle } from '@ant-design/pro-provider';
+import type { AffixProps, BreadcrumbProps, TabPaneProps, TabsProps } from 'antd';
+import { SpinProps } from 'antd';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { WithFalse } from '../../typing';
+import type { FooterToolbarProps } from '../FooterToolbar';
+import type { PageHeaderProps } from '../PageHeader';
+import type { WaterMarkProps } from '../WaterMark';
+import type { PageContainerToken, pageContainerToken } from './style';
+import 'antd/lib/breadcrumb/style';
+export type PageHeaderTabConfig = {
+    /** @name tabs 的列表 */
+    tabList?: (TabPaneProps & {
+        key?: React.Key;
+    })[];
+    /** @name tabActiveKey 当前选中 tab 的 key */
+    tabActiveKey?: TabsProps['activeKey'];
+    /** @name tab 修改时触发 */
+    onTabChange?: TabsProps['onChange'];
+    /** @name tab 上额外的区域 */
+    tabBarExtraContent?: TabsProps['tabBarExtraContent'];
+    /** @name tabs 的其他配置 */
+    tabProps?: TabsProps;
+    /**
+     * @deprecated 请使用 fixedHeader
+     * @name fixHeader 固定 PageHeader 到页面顶部
+     */
+    fixHeader?: boolean;
+    /** @name fixedHeader 固定 PageHeader 到页面顶部 */
+    fixedHeader?: boolean;
+};
+export type PageContainerProps = {
+    title?: React.ReactNode | false;
+    content?: React.ReactNode;
+    extraContent?: React.ReactNode;
+    prefixCls?: string;
+    footer?: ReactNode[];
+    /**
+     * @name token 自定义的 token
+     */
+    token?: pageContainerToken;
+    /**
+     * 与 antd 完全相同
+     *
+     * @name PageHeader 的配置
+     */
+    header?: Partial<PageHeaderProps> & {
+        children?: React.ReactNode;
+    };
+    /** @name pageHeaderRender 自定义 pageHeader */
+    pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
+    /**
+     * 与 antd 完全相同
+     *
+     * @name affixProps 固钉的配置
+     */
+    affixProps?: Omit<AffixProps, 'children'>;
+    /**
+     * 只加载内容区域
+     *
+     * @name loading 是否加载
+     */
+    loading?: boolean | SpinProps | React.ReactNode;
+    /**
+     * 自定义 breadcrumb,
+     * @name breadcrumbRender 返回false不展示
+     */
+    breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
+    /** @name WaterMarkProps 水印的配置 */
+    waterMarkProps?: WaterMarkProps;
+    /** @name BreadcrumbProps 配置面包屑 */
+    breadcrumb?: BreadcrumbProps;
+    children?: React.ReactNode;
+    stylish?: GenerateStyle<PageContainerToken>;
+    footerStylish?: GenerateStyle<PageContainerToken>;
+    footerToolBarProps?: FooterToolbarProps;
+} & PageHeaderTabConfig & Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;
+/**
+ * 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
+ *
+ * @param props
+ * @returns
+ */
+declare const ProBreadcrumb: React.FC<BreadcrumbProps>;
+declare const PageContainer: React.FC<PageContainerProps>;
+declare const ProPageHeader: (props: PageContainerProps & {
+    prefixedClassName: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export { PageContainer, ProBreadcrumb, ProPageHeader };

node_modules/@ant-design/pro-layout/lib/components/PageContainer/index.js

@@ -0,0 +1,307 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProPageHeader = exports.ProBreadcrumb = exports.PageContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _proProvider = require("@ant-design/pro-provider");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _RouteContext = require("../../context/RouteContext");
+var _FooterToolbar = require("../FooterToolbar");
+var _GridContent = require("../GridContent");
+var _PageHeader = require("../PageHeader");
+var _PageLoading = require("../PageLoading");
+var _WaterMark = require("../WaterMark");
+var _style = require("./style");
+var _stylish = require("./style/stylish");
+var _proUtils = require("@ant-design/pro-utils");
+require("antd/lib/breadcrumb/style");
+var _jsxRuntime = require("react/jsx-runtime");
+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"];
+function genLoading(spinProps) {
+  if ((0, _typeof2.default)(spinProps) === 'object') {
+    return spinProps;
+  }
+  return {
+    spinning: 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;
+  if (Array.isArray(tabList) || tabBarExtraContent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      className: "".concat(prefixedClassName, "-tabs ").concat(hashId).trim(),
+      activeKey: tabActiveKey,
+      onChange: function 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 (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          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), {}, {
+      children: (0, _proUtils.compareVersions)(_antd.version, '4.23.0') < 0 ? tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs.TabPane, (0, _objectSpread2.default)({
+          tab: item.tab
+        }, item), item.key || index);
+      }) : null
+    }));
+  }
+  return null;
+};
+var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName, hashId) {
+  if (!content && !extraContent) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "".concat(prefixedClassName, "-detail ").concat(hashId).trim(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixedClassName, "-main ").concat(hashId).trim(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "".concat(prefixedClassName, "-row ").concat(hashId).trim(),
+        children: [content && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(prefixedClassName, "-content ").concat(hashId).trim(),
+          children: content
+        }), extraContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(prefixedClassName, "-extraContent ").concat(hashId).trim(),
+          children: extraContent
+        })]
+      })
+    })
+  });
+};
+
+/**
+ * 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
+ *
+ * @param props
+ * @returns
+ */
+var ProBreadcrumb = exports.ProBreadcrumb = function ProBreadcrumb(props) {
+  var value = (0, _react.useContext)(_RouteContext.RouteContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value === null || value === void 0 ? void 0 : value.breadcrumb), value === null || value === void 0 ? void 0 : 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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var getBreadcrumbRender = function getBreadcrumbRender() {
+    if (!breadcrumbRender) {
+      return undefined;
+    }
+    return breadcrumbRender;
+  };
+  if (pageHeaderRender === false) {
+    return null;
+  }
+  if (pageHeaderRender) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [" ", pageHeaderRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), value))]
+    });
+  }
+  var pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+  var pageHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+    title: pageHeaderTitle
+  }, restProps), {}, {
+    footer: renderFooter((0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageHeader.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderProps), {}, {
+    className: "".concat(prefixedClassName, "-warp-page-header ").concat(hashId).trim(),
+    breadcrumb: breadcrumbRender === false ? undefined : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
+    breadcrumbRender: getBreadcrumbRender(),
+    prefixCls: prefixCls,
+    children: (header === null || header === void 0 ? void 0 : 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 = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var value = (0, _react.useContext)(_RouteContext.RouteContext);
+  /** 告诉 props 是否存在 footerBar */
+  (0, _react.useEffect)(function () {
+    var _value$setHasPageCont;
+    if (!value || !(value !== null && value !== void 0 && value.setHasPageContainer)) {
+      return function () {};
+    }
+    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;
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var _useContext = (0, _react.useContext)(_proProvider.ProProvider),
+    token = _useContext.token;
+  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var prefixCls = props.prefixCls || getPrefixCls('pro');
+  var basePageContainer = "".concat(prefixCls, "-page-container");
+  var _useStyle = (0, _style.useStyle)(basePageContainer, propsToken),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var stylish = (0, _stylish.useStylish)("".concat(basePageContainer, ".").concat(basePageContainer, "-stylish"), {
+    stylish: props.stylish
+  });
+  var memoBreadcrumbRender = (0, _react.useMemo)(function () {
+    var _restProps$header;
+    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((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    breadcrumbRender: memoBreadcrumbRender,
+    ghost: true,
+    hashId: hashId,
+    prefixCls: undefined,
+    prefixedClassName: basePageContainer,
+    value: value
+  }));
+  var loadingDom = (0, _react.useMemo)(function () {
+    // 当loading时一个合法的ReactNode时，说明用户使用了自定义loading,直接返回改自定义loading
+    if ( /*#__PURE__*/_react.default.isValidElement(loading)) {
+      return loading;
+    }
+    // 当传递过来的是布尔值，并且为false时，说明不需要显示loading,返回null
+    if (typeof loading === 'boolean' && !loading) {
+      return null;
+    }
+    // 如非上述两种情况，那么要么用户传了一个true,要么用户传了loading配置，使用genLoading生成loading配置后返回PageLoading
+    var spinProps = genLoading(loading);
+    // 如果传的是loading配置，但spinning传的是false，也不需要显示loading
+    return spinProps.spinning ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageLoading.PageLoading, (0, _objectSpread2.default)({}, spinProps)) : null;
+  }, [loading]);
+  var content = (0, _react.useMemo)(function () {
+    return children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(hashId, "".concat(basePageContainer, "-children-container"), (0, _defineProperty2.default)({}, "".concat(basePageContainer, "-children-container-no-header"), !pageHeaderDom)),
+        style: childrenContentStyle,
+        children: children
+      })
+    }) : null;
+  }, [children, basePageContainer, childrenContentStyle, hashId]);
+  var renderContentDom = (0, _react.useMemo)(function () {
+    // 只要loadingDom非空我们就渲染loadingDom,否则渲染内容
+    var dom = loadingDom || content;
+    if (props.waterMarkProps || value.waterMarkProps) {
+      var waterMarkProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value.waterMarkProps), props.waterMarkProps);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaterMark.WaterMark, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, waterMarkProps), {}, {
+        children: dom
+      }));
+    }
+    return dom;
+  }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
+  var containerClassName = (0, _classnames.default)(basePageContainer, hashId, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(basePageContainer, "-with-footer"), footer), "".concat(basePageContainer, "-with-affix"), fixedHeader && pageHeaderDom), "".concat(basePageContainer, "-stylish"), !!restProps.stylish));
+  return wrapSSR(stylish.wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: style,
+      className: containerClassName,
+      children: [fixedHeader && pageHeaderDom ?
+      /*#__PURE__*/
+      // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
+      (0, _jsxRuntime.jsx)(_antd.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        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(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(basePageContainer, "-warp ").concat(hashId).trim(),
+          children: pageHeaderDom
+        })
+      })) : pageHeaderDom, renderContentDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContent.GridContent, {
+        children: renderContentDom
+      })]
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterToolbar.FooterToolbar, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      stylish: restProps.footerStylish,
+      prefixCls: prefixCls
+    }, footerToolBarProps), {}, {
+      children: footer
+    }))]
+  })));
+};
+var PageContainer = exports.PageContainer = function PageContainer(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proProvider.ProConfigProvider, {
+    needDeps: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PageContainerBase, (0, _objectSpread2.default)({}, props))
+  });
+};
+var ProPageHeader = exports.ProPageHeader = function ProPageHeader(props) {
+  var value = (0, _react.useContext)(_RouteContext.RouteContext);
+  return memoRenderPageHeader((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    hashId: '',
+    value: value
+  }));
+};

node_modules/@ant-design/pro-layout/lib/components/PageContainer/style/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '@ant-design/pro-provider';
+export interface PageContainerToken extends ProAliasToken {
+    componentCls: string;
+}
+export type pageContainerToken = {
+    paddingInlinePageContainerContent?: number;
+    paddingBlockPageContainerContent?: number;
+};
+export declare function useStyle(prefixCls: string, componentsToken: pageContainerToken | undefined): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

node_modules/@ant-design/pro-layout/lib/components/PageContainer/style/index.js

@@ -0,0 +1,91 @@
+"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 _proProvider = require("@ant-design/pro-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
+  })));
+};
+function useStyle(prefixCls, componentsToken) {
+  return (0, _proProvider.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 [genPageContainerStyle(proCardToken)];
+  });
+}

node_modules/@ant-design/pro-layout/lib/components/PageContainer/style/stylish.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+export interface stylishToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStylish(prefixCls: string, { stylish, }: {
+    stylish?: GenerateStyle<stylishToken>;
+}): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

node_modules/@ant-design/pro-layout/lib/components/PageContainer/style/stylish.js

@@ -0,0 +1,20 @@
+"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 _proProvider = require("@ant-design/pro-provider");
+function useStylish(prefixCls, _ref) {
+  var stylish = _ref.stylish;
+  return (0, _proProvider.useStyle)('ProLayoutPageContainerStylish', function (token) {
+    var stylishToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    if (!stylish) return [];
+    return [(0, _defineProperty2.default)({}, "div".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
+  });
+}