@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/lib/layout/ProLayout.js

@@ -1,611 +1,530 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+"use strict";
 
-// src/layout/ProLayout.tsx
-var ProLayout_exports = {};
-__export(ProLayout_exports, {
-  ProLayout: () => ProLayout
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ProLayout_exports);
-var import_route_utils = require("@umijs/route-utils");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_useMergedState = __toESM(require("rc-util/lib/hooks/useMergedState"));
-var import_omit = __toESM(require("rc-util/lib/omit"));
-var import_warning = __toESM(require("rc-util/lib/warning"));
-var import_react = __toESM(require("react"));
-var import_swr = __toESM(require("swr"));
-var import_provider = require("../provider");
-var import_utils = require("../utils");
-var import_Logo = require("./assert/Logo");
-var import_Footer = require("./components/Footer");
-var import_Header = require("./components/Header");
-var import_PageLoading = require("./components/PageLoading");
-var import_SiderMenu = require("./components/SiderMenu");
-var import_RouteContext = require("./context/RouteContext");
-var import_defaultSettings = require("./defaultSettings");
-var import_getPageTitle = require("./getPageTitle");
-var import_locales = require("./locales");
-var import_style = require("./style");
-var import_getBreadcrumbProps = require("./utils/getBreadcrumbProps");
-var import_getMenuData = require("./utils/getMenuData");
-var import_useCurrentMenuLayoutProps = require("./utils/useCurrentMenuLayoutProps");
-var import_utils2 = require("./utils/utils");
-var import_WrapContent = require("./WrapContent");
+exports.ProLayout = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _util = require("@rc-component/util");
+var _routeUtils = require("@umijs/route-utils");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _swr = _interopRequireWildcard(require("swr"));
+var _provider = require("../provider");
+var _utils = require("../utils");
+var _Logo = require("./assert/Logo");
+var _Footer = require("./components/Footer");
+var _Header = require("./components/Header");
+var _PageLoading = require("./components/PageLoading");
+var _SiderMenu = require("./components/SiderMenu");
+var _RouteContext = require("./context/RouteContext");
+var _defaultSettings = require("./defaultSettings");
+var _getPageTitle = require("./getPageTitle");
+var _locales = require("./locales");
+var _style = require("./style");
+var _getBreadcrumbProps = require("./utils/getBreadcrumbProps");
+var _getMenuData = require("./utils/getMenuData");
+var _useCurrentMenuLayoutProps = require("./utils/useCurrentMenuLayoutProps");
+var _utils2 = require("./utils/utils");
+var _WrapContent = require("./WrapContent");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "defaultMessage"],
+  _excluded2 = ["fixSiderbar", "navTheme", "layout"];
 var layoutIndex = 0;
-var headerRender = (props, matchMenuKeys) => {
-  var _a;
+var headerRender = function headerRender(props, matchMenuKeys) {
+  var _props$stylish;
   if (props.headerRender === false || props.pure) {
     return null;
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_Header.DefaultHeader,
-    __spreadProps(__spreadValues({
-      matchMenuKeys
-    }, props), {
-      stylish: (_a = props.stylish) == null ? void 0 : _a.header
-    })
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.DefaultHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    matchMenuKeys: matchMenuKeys
+  }, props), {}, {
+    stylish: (_props$stylish = props.stylish) === null || _props$stylish === void 0 ? void 0 : _props$stylish.header
+  }));
 };
-var footerRender = (props) => {
+var footerRender = function footerRender(props) {
   if (props.footerRender === false || props.pure) {
     return null;
   }
   if (props.footerRender) {
-    return props.footerRender(__spreadValues({}, props), /* @__PURE__ */ import_react.default.createElement(import_Footer.DefaultFooter, null));
+    return props.footerRender((0, _objectSpread2.default)({}, props), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DefaultFooter, {}));
   }
   return null;
 };
-var renderSiderMenu = (props, matchMenuKeys) => {
-  var _a, _b, _c, _d;
-  const {
-    layout,
-    isMobile,
-    selectedKeys,
-    openKeys,
-    splitMenus,
-    suppressSiderWhenMenuEmpty,
-    menuRender
-  } = props;
+var renderSiderMenu = function renderSiderMenu(props, matchMenuKeys) {
+  var _props$stylish3;
+  var layout = props.layout,
+    isMobile = props.isMobile,
+    selectedKeys = props.selectedKeys,
+    openKeys = props.openKeys,
+    splitMenus = props.splitMenus,
+    suppressSiderWhenMenuEmpty = props.suppressSiderWhenMenuEmpty,
+    menuRender = props.menuRender;
   if (props.menuRender === false || props.pure) {
     return null;
   }
-  let { menuData } = props;
-  if (splitMenus && (openKeys !== false || layout === "mix") && !isMobile) {
-    const [key] = selectedKeys || matchMenuKeys;
+  var menuData = props.menuData;
+
+  /** 如果是分割菜单模式，需要专门实现一下 */
+  if (splitMenus && (openKeys !== false || layout === 'mix') && !isMobile) {
+    var _ref = selectedKeys || matchMenuKeys,
+      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      key = _ref2[0];
     if (key) {
-      menuData = ((_b = (_a = props.menuData) == null ? void 0 : _a.find((item) => item.key === key)) == null ? void 0 : _b.children) || [];
+      var _props$menuData;
+      menuData = ((_props$menuData = props.menuData) === null || _props$menuData === void 0 || (_props$menuData = _props$menuData.find(function (item) {
+        return item.key === key;
+      })) === null || _props$menuData === void 0 ? void 0 : _props$menuData.children) || [];
     } else {
       menuData = [];
     }
   }
-  const clearMenuData = (0, import_utils2.clearMenuItem)(menuData || []);
-  if (clearMenuData && (clearMenuData == null ? void 0 : clearMenuData.length) < 1 && (splitMenus || suppressSiderWhenMenuEmpty)) {
+  // 这里走了可以少一次循环
+  var clearMenuData = (0, _utils2.clearMenuItem)(menuData || []);
+  if (clearMenuData && (clearMenuData === null || clearMenuData === void 0 ? void 0 : clearMenuData.length) < 1 && (splitMenus || suppressSiderWhenMenuEmpty)) {
     return null;
   }
-  if (layout === "top" && !isMobile) {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_SiderMenu.SiderMenu,
-      __spreadProps(__spreadValues({
-        matchMenuKeys
-      }, props), {
-        hide: true,
-        stylish: (_c = props.stylish) == null ? void 0 : _c.sider
-      })
-    );
+  if (layout === 'top' && !isMobile) {
+    var _props$stylish2;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      matchMenuKeys: matchMenuKeys
+    }, props), {}, {
+      hide: true,
+      stylish: (_props$stylish2 = props.stylish) === null || _props$stylish2 === void 0 ? void 0 : _props$stylish2.sider
+    }));
   }
-  const defaultDom = /* @__PURE__ */ import_react.default.createElement(
-    import_SiderMenu.SiderMenu,
-    __spreadProps(__spreadValues({
-      matchMenuKeys
-    }, props), {
-      menuData: clearMenuData,
-      stylish: (_d = props.stylish) == null ? void 0 : _d.sider
-    })
-  );
+  var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    matchMenuKeys: matchMenuKeys
+  }, props), {}, {
+    // 这里走了可以少一次循环
+    menuData: clearMenuData,
+    stylish: (_props$stylish3 = props.stylish) === null || _props$stylish3 === void 0 ? void 0 : _props$stylish3.sider
+  }));
   if (menuRender) {
     return menuRender(props, defaultDom);
   }
   return defaultDom;
 };
-var defaultPageTitleRender = (pageProps, props) => {
-  const { pageTitleRender } = props;
-  const pageTitleInfo = (0, import_getPageTitle.getPageTitleInfo)(pageProps);
+var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
+  var pageTitleRender = props.pageTitleRender;
+  var pageTitleInfo = (0, _getPageTitle.getPageTitleInfo)(pageProps);
   if (pageTitleRender === false) {
     return {
-      title: props.title || "",
-      id: "",
-      pageName: ""
+      title: props.title || '',
+      id: '',
+      pageName: ''
     };
   }
   if (pageTitleRender) {
-    const title = pageTitleRender(
-      pageProps,
-      pageTitleInfo.title,
-      pageTitleInfo
-    );
-    if (typeof title === "string") {
-      return (0, import_getPageTitle.getPageTitleInfo)(__spreadProps(__spreadValues({}, pageTitleInfo), {
-        title
+    var title = pageTitleRender(pageProps, pageTitleInfo.title, pageTitleInfo);
+    if (typeof title === 'string') {
+      return (0, _getPageTitle.getPageTitleInfo)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageTitleInfo), {}, {
+        title: title
       }));
     }
-    (0, import_warning.default)(
-      typeof title === "string",
-      "pro-layout: renderPageTitle return value should be a string"
-    );
+    (0, _util.warning)(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
   }
   return pageTitleInfo;
 };
-var getPaddingInlineStart = (hasLeftPadding, collapsed, siderWidth) => {
+var getPaddingInlineStart = function getPaddingInlineStart(hasLeftPadding, collapsed, siderWidth) {
   if (hasLeftPadding) {
     return collapsed ? 64 : siderWidth;
   }
   return 0;
 };
-var BaseProLayout = (props) => {
-  var _a, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
-  const {
-    children,
-    onCollapse: propsOnCollapse,
-    location = { pathname: "/" },
-    contentStyle,
-    route,
-    defaultCollapsed,
-    style,
-    siderWidth: propsSiderWidth,
-    menu,
-    siderMenuType,
-    isChildrenLayout: propsIsChildrenLayout,
-    menuDataRender,
-    actionRef,
-    bgLayoutImgList,
-    formatMessage: propsFormatMessage,
-    loading
-  } = props || {};
-  const siderWidth = (0, import_react.useMemo)(() => {
-    if (propsSiderWidth)
-      return propsSiderWidth;
-    if (props.layout === "mix")
-      return 215;
+
+/**
+ * 🌃 Powerful and easy to use beautiful layout 🏄‍ Support multiple topics and layout types
+ *
+ * @param props
+ */
+var BaseProLayout = function BaseProLayout(props) {
+  var _props$prefixCls, _location$pathname, _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
+  var _ref3 = props || {},
+    children = _ref3.children,
+    propsOnCollapse = _ref3.onCollapse,
+    _ref3$location = _ref3.location,
+    location = _ref3$location === void 0 ? {
+      pathname: '/'
+    } : _ref3$location,
+    contentStyle = _ref3.contentStyle,
+    route = _ref3.route,
+    defaultCollapsed = _ref3.defaultCollapsed,
+    style = _ref3.style,
+    propsSiderWidth = _ref3.siderWidth,
+    menu = _ref3.menu,
+    siderMenuType = _ref3.siderMenuType,
+    propsIsChildrenLayout = _ref3.isChildrenLayout,
+    menuDataRender = _ref3.menuDataRender,
+    actionRef = _ref3.actionRef,
+    bgLayoutImgList = _ref3.bgLayoutImgList,
+    propsFormatMessage = _ref3.formatMessage,
+    loading = _ref3.loading;
+  var siderWidth = (0, _react.useMemo)(function () {
+    if (propsSiderWidth) return propsSiderWidth;
+    if (props.layout === 'mix') return 215;
     return 256;
   }, [props.layout, propsSiderWidth]);
-  const context = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const prefixCls = (_a = props.prefixCls) != null ? _a : context.getPrefixCls("pro");
-  const [menuLoading, setMenuLoading] = (0, import_utils.useMountMergeState)(false, {
-    value: menu == null ? void 0 : menu.loading,
-    onChange: menu == null ? void 0 : menu.onLoadingChange
-  });
-  const [defaultId] = (0, import_react.useState)(() => {
-    layoutIndex += 1;
-    return `pro-layout-${layoutIndex}`;
-  });
-  const formatMessage = (0, import_react.useCallback)(
-    (_b) => {
-      var _c = _b, {
-        id,
-        defaultMessage
-      } = _c, restParams = __objRest(_c, [
-        "id",
-        "defaultMessage"
-      ]);
-      if (propsFormatMessage) {
-        return propsFormatMessage(__spreadValues({
-          id,
-          defaultMessage
-        }, restParams));
-      }
-      const locales = (0, import_locales.gLocaleObject)();
-      return locales[id] ? locales[id] : defaultMessage;
-    },
-    [propsFormatMessage]
-  );
-  const { data, mutate, isLoading } = (0, import_swr.default)(
-    [defaultId, menu == null ? void 0 : menu.params],
-    (_0) => __async(void 0, [_0], function* ([, params]) {
-      var _a2;
-      setMenuLoading(true);
-      const menuDataItems = yield (_a2 = menu == null ? void 0 : menu.request) == null ? void 0 : _a2.call(
-        menu,
-        params || {},
-        (route == null ? void 0 : route.children) || (route == null ? void 0 : route.routes) || []
-      );
-      setMenuLoading(false);
-      return menuDataItems;
+  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  var prefixCls = (_props$prefixCls = props.prefixCls) !== null && _props$prefixCls !== void 0 ? _props$prefixCls : context.getPrefixCls('pro');
+  var _useMountMergeState = (0, _utils.useMountMergeState)(false, {
+      value: menu === null || menu === void 0 ? void 0 : menu.loading,
+      onChange: menu === null || menu === void 0 ? void 0 : menu.onLoadingChange
+    }),
+    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
+    menuLoading = _useMountMergeState2[0],
+    setMenuLoading = _useMountMergeState2[1];
+
+  // give a default key for swr
+  var _useState = (0, _react.useState)(function () {
+      layoutIndex += 1;
+      return "pro-layout-".concat(layoutIndex);
     }),
-    {
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    defaultId = _useState2[0];
+
+  /**
+   * 处理国际化相关 formatMessage
+   * 如果有用户配置的以用户为主
+   * 如果没有用自己实现的
+   */
+  var formatMessage = (0, _react.useCallback)(function (_ref4) {
+    var id = _ref4.id,
+      defaultMessage = _ref4.defaultMessage,
+      restParams = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+    if (propsFormatMessage) {
+      return propsFormatMessage((0, _objectSpread2.default)({
+        id: id,
+        defaultMessage: defaultMessage
+      }, restParams));
+    }
+    var locales = (0, _locales.gLocaleObject)();
+    return locales[id] ? locales[id] : defaultMessage;
+  }, [propsFormatMessage]);
+  var _useSWR = (0, _swr.default)([defaultId, menu === null || menu === void 0 ? void 0 : menu.params], /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref5) {
+        var _menu$request;
+        var _ref7, params, menuDataItems;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _ref7 = (0, _slicedToArray2.default)(_ref5, 2), params = _ref7[1];
+              setMenuLoading(true);
+              _context.next = 4;
+              return menu === null || menu === void 0 || (_menu$request = menu.request) === null || _menu$request === void 0 ? void 0 : _menu$request.call(menu, params || {}, (route === null || route === void 0 ? void 0 : route.children) || (route === null || route === void 0 ? void 0 : route.routes) || []);
+            case 4:
+              menuDataItems = _context.sent;
+              setMenuLoading(false);
+              return _context.abrupt("return", menuDataItems);
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref6.apply(this, arguments);
+      };
+    }(), {
       revalidateOnFocus: false,
       shouldRetryOnError: false,
       revalidateOnReconnect: false
-    }
-  );
-  (0, import_react.useEffect)(() => {
+    }),
+    data = _useSWR.data,
+    mutate = _useSWR.mutate,
+    isLoading = _useSWR.isLoading;
+  (0, _react.useEffect)(function () {
     setMenuLoading(isLoading);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
-  const { cache } = (0, import_swr.useSWRConfig)();
-  (0, import_react.useEffect)(() => {
-    return () => {
-      if (cache instanceof Map)
-        cache.delete(defaultId);
+  var _useSWRConfig = (0, _swr.useSWRConfig)(),
+    cache = _useSWRConfig.cache;
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (cache instanceof Map) cache.delete(defaultId);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const menuInfoData = (0, import_react.useMemo)(
-    () => (0, import_getMenuData.getMenuData)(
-      data || (route == null ? void 0 : route.children) || (route == null ? void 0 : route.routes) || [],
-      menu,
-      formatMessage,
-      menuDataRender
-    ),
-    [formatMessage, menu, menuDataRender, data, route == null ? void 0 : route.children]
-  );
-  const { breadcrumb, breadcrumbMap, menuData = [] } = menuInfoData || {};
-  if (actionRef && (menu == null ? void 0 : menu.request)) {
+  var menuInfoData = (0, _react.useMemo)(function () {
+    return (0, _getMenuData.getMenuData)(data || (route === null || route === void 0 ? void 0 : route.children) || (route === null || route === void 0 ? void 0 : route.routes) || [], menu, formatMessage, menuDataRender);
+  }, [formatMessage, menu, menuDataRender, data, route === null || route === void 0 ? void 0 : route.children]);
+  var _ref8 = menuInfoData || {},
+    breadcrumb = _ref8.breadcrumb,
+    breadcrumbMap = _ref8.breadcrumbMap,
+    _ref8$menuData = _ref8.menuData,
+    menuData = _ref8$menuData === void 0 ? [] : _ref8$menuData;
+  if (actionRef && menu !== null && menu !== void 0 && menu.request) {
     actionRef.current = {
-      reload: () => {
+      reload: function reload() {
         mutate();
       }
     };
   }
-  const matchMenus = (0, import_react.useMemo)(() => {
-    return (0, import_route_utils.getMatchMenu)(location.pathname || "/", menuData || [], true);
+  var matchMenus = (0, _react.useMemo)(function () {
+    return (0, _routeUtils.getMatchMenu)(location.pathname || '/', menuData || [], true);
   }, [location.pathname, menuData]);
-  const matchMenuKeys = (0, import_react.useMemo)(
-    () => Array.from(
-      new Set(matchMenus.map((item) => item.key || item.path || ""))
-    ),
-    [matchMenus]
-  );
-  const currentMenu = matchMenus[matchMenus.length - 1] || {};
-  const currentMenuLayoutProps = (0, import_useCurrentMenuLayoutProps.useCurrentMenuLayoutProps)(currentMenu);
-  const _d = __spreadValues(__spreadValues({}, props), currentMenuLayoutProps), {
-    fixSiderbar,
-    navTheme,
-    layout: propsLayout
-  } = _d, rest = __objRest(_d, [
-    "fixSiderbar",
-    "navTheme",
-    "layout"
-  ]);
-  const colSize = (0, import_utils.useBreakpoint)();
-  const isMobile = (0, import_react.useMemo)(() => {
-    return (colSize === "sm" || colSize === "xs") && !props.disableMobile;
+  var matchMenuKeys = (0, _react.useMemo)(function () {
+    return Array.from(new Set(matchMenus.map(function (item) {
+      return item.key || item.path || '';
+    })));
+  }, [matchMenus]);
+
+  // 当前选中的menu，一般不会为空
+  var currentMenu = matchMenus[matchMenus.length - 1] || {};
+  var currentMenuLayoutProps = (0, _useCurrentMenuLayoutProps.useCurrentMenuLayoutProps)(currentMenu);
+  var _props$currentMenuLay = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), currentMenuLayoutProps),
+    fixSiderbar = _props$currentMenuLay.fixSiderbar,
+    navTheme = _props$currentMenuLay.navTheme,
+    propsLayout = _props$currentMenuLay.layout,
+    rest = (0, _objectWithoutProperties2.default)(_props$currentMenuLay, _excluded2);
+  var colSize = (0, _utils.useBreakpoint)();
+  var isMobile = (0, _react.useMemo)(function () {
+    return (colSize === 'sm' || colSize === 'xs') && !props.disableMobile;
   }, [colSize, props.disableMobile]);
-  const hasLeftPadding = propsLayout !== "top" && !isMobile;
-  const [collapsed, onCollapse] = (0, import_useMergedState.default)(
-    () => {
-      if (defaultCollapsed !== void 0)
-        return defaultCollapsed;
-      if (false)
-        return false;
-      if (isMobile)
-        return true;
-      if (colSize === "md")
-        return true;
+
+  // If it is a fix menu, calculate padding
+  // don't need padding in phone mode
+  /* Checking if the menu is loading and if it is, it will return a skeleton loading screen. */
+  var hasLeftPadding = propsLayout !== 'top' && !isMobile;
+  var _useMergedState = (0, _util.useMergedState)(function () {
+      if (defaultCollapsed !== undefined) return defaultCollapsed;
+      if (process.env.NODE_ENV === 'TEST') return false;
+      if (isMobile) return true;
+      if (colSize === 'md') return true;
       return false;
-    },
-    {
+    }, {
       value: props.collapsed,
       onChange: propsOnCollapse
-    }
-  );
-  const defaultProps = (0, import_omit.default)(
-    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      prefixCls
-    }, props), {
-      siderWidth
-    }), currentMenuLayoutProps), {
-      formatMessage,
-      breadcrumb,
-      menu: __spreadProps(__spreadValues({}, menu), {
-        type: siderMenuType || (menu == null ? void 0 : menu.type),
-        loading: menuLoading
-      }),
-      layout: propsLayout
-    }),
-    ["className", "style", "breadcrumbRender"]
-  );
-  const pageTitleInfo = defaultPageTitleRender(
-    __spreadProps(__spreadValues({
-      pathname: location.pathname
-    }, defaultProps), {
-      breadcrumbMap
-    }),
-    props
-  );
-  const breadcrumbProps = (0, import_getBreadcrumbProps.getBreadcrumbProps)(
-    __spreadProps(__spreadValues({}, defaultProps), {
-      breadcrumbRender: props.breadcrumbRender,
-      breadcrumbMap
     }),
-    props
-  );
-  const siderMenuDom = renderSiderMenu(
-    __spreadProps(__spreadValues({}, defaultProps), {
-      menuData,
-      onCollapse,
-      isMobile,
-      collapsed
-    }),
-    matchMenuKeys
-  );
-  const headerDom = headerRender(
-    __spreadProps(__spreadValues({}, defaultProps), {
-      children: null,
-      hasSiderMenu: !!siderMenuDom,
-      menuData,
-      isMobile,
-      collapsed,
-      onCollapse
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    collapsed = _useMergedState2[0],
+    onCollapse = _useMergedState2[1];
+
+  // Splicing parameters, adding menuData and formatMessage in props
+  var defaultProps = (0, _util.omit)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    prefixCls: prefixCls
+  }, props), {}, {
+    siderWidth: siderWidth
+  }, currentMenuLayoutProps), {}, {
+    formatMessage: formatMessage,
+    breadcrumb: breadcrumb,
+    menu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menu), {}, {
+      type: siderMenuType || (menu === null || menu === void 0 ? void 0 : menu.type),
+      loading: menuLoading
     }),
-    matchMenuKeys
-  );
-  const footerDom = footerRender(__spreadValues({
-    isMobile,
-    collapsed
+    layout: propsLayout
+  }), ['className', 'style', 'breadcrumbRender']);
+
+  // gen page title
+  var pageTitleInfo = defaultPageTitleRender((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    pathname: location.pathname
+  }, defaultProps), {}, {
+    breadcrumbMap: breadcrumbMap
+  }), props);
+
+  // gen breadcrumbProps, parameter for pageHeader
+  var breadcrumbProps = (0, _getBreadcrumbProps.getBreadcrumbProps)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+    breadcrumbRender: props.breadcrumbRender,
+    breadcrumbMap: breadcrumbMap
+  }), props);
+
+  // render sider dom
+  var siderMenuDom = renderSiderMenu((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+    menuData: menuData,
+    onCollapse: onCollapse,
+    isMobile: isMobile,
+    collapsed: collapsed
+  }), matchMenuKeys);
+
+  // render header dom
+  var headerDom = headerRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+    children: null,
+    hasSiderMenu: !!siderMenuDom,
+    menuData: menuData,
+    isMobile: isMobile,
+    collapsed: collapsed,
+    onCollapse: onCollapse
+  }), matchMenuKeys);
+
+  // render footer dom
+  var footerDom = footerRender((0, _objectSpread2.default)({
+    isMobile: isMobile,
+    collapsed: collapsed
   }, defaultProps));
-  const { isChildrenLayout: contextIsChildrenLayout } = (0, import_react.useContext)(import_RouteContext.RouteContext);
-  const isChildrenLayout = propsIsChildrenLayout !== void 0 ? propsIsChildrenLayout : contextIsChildrenLayout;
-  const proLayoutClassName = `${prefixCls}-layout`;
-  const { wrapSSR, hashId } = (0, import_style.useStyle)(proLayoutClassName);
-  const className = (0, import_classnames.default)(
-    props.className,
-    hashId,
-    "ant-design-pro",
-    proLayoutClassName,
-    {
-      [`screen-${colSize}`]: colSize,
-      [`${proLayoutClassName}-top-menu`]: propsLayout === "top",
-      [`${proLayoutClassName}-is-children`]: isChildrenLayout,
-      [`${proLayoutClassName}-fix-siderbar`]: fixSiderbar,
-      [`${proLayoutClassName}-${propsLayout}`]: propsLayout
-    }
-  );
-  const leftSiderWidth = getPaddingInlineStart(
-    !!hasLeftPadding,
-    collapsed,
-    siderWidth
-  );
-  const genLayoutStyle = {
-    position: "relative"
+  var _useContext = (0, _react.useContext)(_RouteContext.RouteContext),
+    contextIsChildrenLayout = _useContext.isChildrenLayout;
+
+  // 如果 props 中定义，以 props 为准
+  var isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
+  var proLayoutClassName = "".concat(prefixCls, "-layout");
+  var _useStyle = (0, _style.useStyle)(proLayoutClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+
+  // gen className
+  var className = (0, _classnames.default)(props.className, hashId, 'ant-design-pro', proLayoutClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "screen-".concat(colSize), colSize), "".concat(proLayoutClassName, "-top-menu"), propsLayout === 'top'), "".concat(proLayoutClassName, "-is-children"), isChildrenLayout), "".concat(proLayoutClassName, "-fix-siderbar"), fixSiderbar), "".concat(proLayoutClassName, "-").concat(propsLayout), propsLayout));
+
+  /** 计算 slider 的宽度 */
+  var leftSiderWidth = getPaddingInlineStart(!!hasLeftPadding, collapsed, siderWidth);
+
+  // siderMenuDom 为空的时候，不需要 padding
+  var genLayoutStyle = {
+    position: 'relative'
   };
+
+  // if is some layout children, don't need min height
   if (isChildrenLayout || contentStyle && contentStyle.minHeight) {
     genLayoutStyle.minHeight = 0;
   }
-  (0, import_react.useEffect)(() => {
-    var _a2;
-    (_a2 = props.onPageChange) == null ? void 0 : _a2.call(props, props.location);
-  }, [location.pathname, (_e = location.pathname) == null ? void 0 : _e.search]);
-  const [hasFooterToolbar, setHasFooterToolbar] = (0, import_react.useState)(false);
-  const [hasPageContainer, setHasPageContainer] = (0, import_react.useState)(0);
-  (0, import_utils.useDocumentTitle)(pageTitleInfo, props.title || false);
-  const { token } = (0, import_react.useContext)(import_provider.ProProvider);
-  const bgImgStyleList = (0, import_react.useMemo)(() => {
+
+  /** 页面切换的时候触发 */
+  (0, _react.useEffect)(function () {
+    var _props$onPageChange;
+    (_props$onPageChange = props.onPageChange) === null || _props$onPageChange === void 0 || _props$onPageChange.call(props, props.location);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, (_location$pathname = location.pathname) === null || _location$pathname === void 0 ? void 0 : _location$pathname.search]);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    hasFooterToolbar = _useState4[0],
+    setHasFooterToolbar = _useState4[1];
+  /**
+   * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className
+   */
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasPageContainer = _useState6[0],
+    setHasPageContainer = _useState6[1];
+  (0, _utils.useDocumentTitle)(pageTitleInfo, props.title || false);
+  var _useContext2 = (0, _react.useContext)(_provider.ProProvider),
+    token = _useContext2.token;
+  var bgImgStyleList = (0, _react.useMemo)(function () {
     if (bgLayoutImgList && bgLayoutImgList.length > 0) {
-      return bgLayoutImgList == null ? void 0 : bgLayoutImgList.map((item, index) => {
-        return /* @__PURE__ */ import_react.default.createElement(
-          "img",
-          {
-            key: index,
-            src: item.src,
-            style: __spreadValues({
-              position: "absolute"
-            }, item)
-          }
-        );
+      return bgLayoutImgList === null || bgLayoutImgList === void 0 ? void 0 : bgLayoutImgList.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: item.src,
+          style: (0, _objectSpread2.default)({
+            position: 'absolute'
+          }, item)
+        }, index);
       });
     }
     return null;
   }, [bgLayoutImgList]);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_RouteContext.RouteContext.Provider,
-      {
-        value: __spreadProps(__spreadValues({}, defaultProps), {
-          breadcrumb: breadcrumbProps,
-          menuData,
-          isMobile,
-          collapsed,
-          hasPageContainer,
-          setHasPageContainer,
-          isChildrenLayout: true,
-          title: pageTitleInfo.pageName,
-          hasSiderMenu: !!siderMenuDom,
-          hasHeader: !!headerDom,
-          siderWidth: leftSiderWidth,
-          hasFooter: !!footerDom,
-          hasFooterToolbar,
-          setHasFooterToolbar,
-          pageTitleInfo,
-          matchMenus,
-          matchMenuKeys,
-          currentMenu
-        })
-      },
-      props.pure ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children) : /* @__PURE__ */ import_react.default.createElement("div", { className }, bgImgStyleList || ((_f = token.layout) == null ? void 0 : _f.bgLayout) ? /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(`${proLayoutClassName}-bg-list`, hashId)
-        },
-        bgImgStyleList
-      ) : null, /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Layout,
-        {
-          style: __spreadValues({
-            minHeight: "100%",
-            // hack style
-            flexDirection: siderMenuDom ? "row" : void 0
-          }, style)
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_antd.ConfigProvider,
-          {
-            theme: {
-              hashed: (0, import_provider.isNeedOpenHash)(),
-              token: {
-                controlHeightLG: ((_h = (_g = token.layout) == null ? void 0 : _g.sider) == null ? void 0 : _h.menuHeight) || (token == null ? void 0 : token.controlHeightLG)
-              },
-              components: {
-                Menu: (0, import_utils.coverToNewToken)({
-                  colorItemBg: ((_j = (_i = token.layout) == null ? void 0 : _i.sider) == null ? void 0 : _j.colorMenuBackground) || "transparent",
-                  colorSubItemBg: ((_l = (_k = token.layout) == null ? void 0 : _k.sider) == null ? void 0 : _l.colorMenuBackground) || "transparent",
-                  radiusItem: token.borderRadius,
-                  colorItemBgSelected: ((_n = (_m = token.layout) == null ? void 0 : _m.sider) == null ? void 0 : _n.colorBgMenuItemSelected) || (token == null ? void 0 : token.colorBgTextHover),
-                  colorItemBgHover: ((_p = (_o = token.layout) == null ? void 0 : _o.sider) == null ? void 0 : _p.colorBgMenuItemHover) || (token == null ? void 0 : token.colorBgTextHover),
-                  colorItemBgActive: ((_r = (_q = token.layout) == null ? void 0 : _q.sider) == null ? void 0 : _r.colorBgMenuItemActive) || (token == null ? void 0 : token.colorBgTextActive),
-                  colorItemBgSelectedHorizontal: ((_t = (_s = token.layout) == null ? void 0 : _s.sider) == null ? void 0 : _t.colorBgMenuItemSelected) || (token == null ? void 0 : token.colorBgTextHover),
-                  colorActiveBarWidth: 0,
-                  colorActiveBarHeight: 0,
-                  colorActiveBarBorderSize: 0,
-                  colorItemText: ((_v = (_u = token.layout) == null ? void 0 : _u.sider) == null ? void 0 : _v.colorTextMenu) || (token == null ? void 0 : token.colorTextSecondary),
-                  colorItemTextHover: ((_x = (_w = token.layout) == null ? void 0 : _w.sider) == null ? void 0 : _x.colorTextMenuItemHover) || "rgba(0, 0, 0, 0.85)",
-                  // 悬浮态
-                  colorItemTextSelected: ((_z = (_y = token.layout) == null ? void 0 : _y.sider) == null ? void 0 : _z.colorTextMenuSelected) || "rgba(0, 0, 0, 1)",
-                  popupBg: token == null ? void 0 : token.colorBgElevated,
-                  subMenuItemBg: token == null ? void 0 : token.colorBgElevated,
-                  darkSubMenuItemBg: "transparent",
-                  darkPopupBg: token == null ? void 0 : token.colorBgElevated
-                })
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteContext.RouteContext.Provider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), {}, {
+      breadcrumb: breadcrumbProps,
+      menuData: menuData,
+      isMobile: isMobile,
+      collapsed: collapsed,
+      hasPageContainer: hasPageContainer,
+      setHasPageContainer: setHasPageContainer,
+      isChildrenLayout: true,
+      title: pageTitleInfo.pageName,
+      hasSiderMenu: !!siderMenuDom,
+      hasHeader: !!headerDom,
+      siderWidth: leftSiderWidth,
+      hasFooter: !!footerDom,
+      hasFooterToolbar: hasFooterToolbar,
+      setHasFooterToolbar: setHasFooterToolbar,
+      pageTitleInfo: pageTitleInfo,
+      matchMenus: matchMenus,
+      matchMenuKeys: matchMenuKeys,
+      currentMenu: currentMenu
+    }),
+    children: props.pure ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      children: [bgImgStyleList || (_token$layout = token.layout) !== null && _token$layout !== void 0 && _token$layout.bgLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)("".concat(proLayoutClassName, "-bg-list"), hashId),
+        children: bgImgStyleList
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Layout, {
+        style: (0, _objectSpread2.default)({
+          minHeight: '100%',
+          // hack style
+          flexDirection: siderMenuDom ? 'row' : undefined
+        }, style),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider
+        // @ts-ignore
+        , {
+          theme: {
+            hashed: (0, _provider.isNeedOpenHash)(),
+            token: {
+              controlHeightLG: ((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.menuHeight) || (token === null || token === void 0 ? void 0 : token.controlHeightLG)
+            },
+            components: {
+              Menu: {
+                itemBg: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorMenuBackground) || 'transparent',
+                subMenuItemBg: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorMenuBackground) || 'transparent',
+                itemBorderRadius: token.borderRadius,
+                itemSelectedBg: ((_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
+                itemHoverBg: ((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorBgMenuItemHover) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
+                itemActiveBg: ((_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorBgMenuItemActive) || (token === null || token === void 0 ? void 0 : token.colorBgTextActive),
+                horizontalItemSelectedBg: ((_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
+                activeBarWidth: 0,
+                activeBarHeight: 0,
+                activeBarBorderWidth: 0,
+                itemColor: ((_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenu) || (token === null || token === void 0 ? void 0 : token.colorTextSecondary),
+                itemHoverColor: ((_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuItemHover) || 'rgba(0, 0, 0, 0.85)',
+                // 悬浮态
+                itemSelectedColor: ((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.sider) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
+                popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
+                darkSubMenuItemBg: 'transparent',
+                darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
               }
             }
           },
-          siderMenuDom
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: genLayoutStyle,
-            className: `${proLayoutClassName}-container ${hashId}`.trim()
-          },
-          headerDom,
-          /* @__PURE__ */ import_react.default.createElement(
-            import_WrapContent.WrapContent,
-            __spreadProps(__spreadValues({
-              hasPageContainer,
-              isChildrenLayout
-            }, rest), {
-              hasHeader: !!headerDom,
-              prefixCls: proLayoutClassName,
-              style: contentStyle
-            }),
-            loading ? /* @__PURE__ */ import_react.default.createElement(import_PageLoading.PageLoading, null) : children
-          ),
-          footerDom,
-          hasFooterToolbar && /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: `${proLayoutClassName}-has-footer`,
-              style: {
-                height: 64,
-                marginBlockStart: (_B = (_A = token.layout) == null ? void 0 : _A.pageContainer) == null ? void 0 : _B.paddingBlockPageContainerContent
-              }
+          children: siderMenuDom
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: genLayoutStyle,
+          className: "".concat(proLayoutClassName, "-container ").concat(hashId).trim(),
+          children: [headerDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrapContent.WrapContent, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+            hasPageContainer: hasPageContainer,
+            isChildrenLayout: isChildrenLayout
+          }, rest), {}, {
+            hasHeader: !!headerDom,
+            prefixCls: proLayoutClassName,
+            style: contentStyle,
+            children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageLoading.PageLoading, {}) : children
+          })), footerDom, hasFooterToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(proLayoutClassName, "-has-footer"),
+            style: {
+              height: 64,
+              marginBlockStart: (_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.pageContainer) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.paddingBlockPageContainerContent
             }
-          )
-        )
-      ))
-    )
-  );
+          })]
+        })]
+      })]
+    })
+  }));
 };
-var ProLayout = (props) => {
-  const { colorPrimary } = props;
-  const darkProps = props.navTheme !== void 0 ? {
-    dark: props.navTheme === "realDark"
+var ProLayout = exports.ProLayout = function ProLayout(props) {
+  var colorPrimary = props.colorPrimary;
+  var darkProps = props.navTheme !== undefined ? {
+    dark: props.navTheme === 'realDark'
   } : {};
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.ConfigProvider,
-    {
-      theme: colorPrimary ? {
-        token: {
-          colorPrimary
-        }
-      } : void 0
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_provider.ProConfigProvider,
-      __spreadProps(__spreadValues({}, darkProps), {
-        token: props.token,
-        prefixCls: props.prefixCls
-      }),
-      /* @__PURE__ */ import_react.default.createElement(
-        BaseProLayout,
-        __spreadValues(__spreadProps(__spreadValues({
-          logo: /* @__PURE__ */ import_react.default.createElement(import_Logo.Logo, null)
-        }, import_defaultSettings.defaultSettings), {
-          location: (0, import_utils.isBrowser)() ? window.location : void 0
-        }), props)
-      )
-    )
-  );
-};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
+    theme: colorPrimary ? {
+      token: {
+        colorPrimary: colorPrimary
+      }
+    } : undefined,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, darkProps), {}, {
+      token: props.token,
+      prefixCls: props.prefixCls,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseProLayout, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.Logo, {})
+      }, _defaultSettings.defaultSettings), {}, {
+        location: (0, _utils.isBrowser)() ? window.location : undefined
+      }, props))
+    }))
+  });
+};