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

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

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

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

@@ -1,190 +1,137 @@
-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 __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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/layout/components/PageHeader/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => useStyle
-});
-module.exports = __toCommonJS(style_exports);
-var import_utils = require("../../../../utils");
-var textOverflowEllipsis = () => ({
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var genPageHeaderStyle = (token) => {
-  var _a, _b, _c, _d;
+exports.default = useStyle;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _utils = require("../../../../utils");
+var textOverflowEllipsis = function textOverflowEllipsis() {
   return {
-    [token.componentCls]: __spreadProps(__spreadValues({}, (_a = import_utils.resetComponent) == null ? void 0 : _a(token)), {
-      position: "relative",
-      backgroundColor: token.colorWhite,
-      paddingBlock: token.pageHeaderPaddingVertical + 2,
-      paddingInline: token.pageHeaderPadding,
-      "&&-ghost": {
-        backgroundColor: token.pageHeaderBgGhost
-      },
-      "&-no-children": {
-        height: (_c = (_b = token.layout) == null ? void 0 : _b.pageContainer) == null ? void 0 : _c.paddingBlockPageContainerContent
-      },
-      "&&-has-breadcrumb": {
-        paddingBlockStart: token.pageHeaderPaddingBreadCrumb
-      },
-      "&&-has-footer": {
-        paddingBlockEnd: 0
-      },
-      "& &-back": {
-        marginInlineEnd: token.margin,
-        fontSize: 16,
-        lineHeight: 1,
-        "&-button": __spreadProps(__spreadValues({
-          fontSize: 16
-        }, (_d = import_utils.operationUnit) == null ? void 0 : _d(token)), {
-          color: token.pageHeaderColorBack,
-          cursor: "pointer"
-        }),
-        [`${token.componentCls}-rlt &`]: {
-          float: "right",
-          marginInlineEnd: 0,
-          marginInlineStart: 0
-        }
-      },
-      [`& ${"ant"}-divider-vertical`]: {
-        height: 14,
-        marginBlock: 0,
-        marginInline: token.marginSM,
-        verticalAlign: "middle"
-      },
-      [`& &-breadcrumb + &-heading`]: {
-        marginBlockStart: token.marginXS
-      },
-      "& &-heading": {
-        display: "flex",
-        justifyContent: "space-between",
-        "&-left": {
-          display: "flex",
-          alignItems: "center",
-          marginBlock: token.marginXS / 2,
-          marginInlineEnd: 0,
-          marginInlineStart: 0,
-          overflow: "hidden"
-        },
-        "&-title": __spreadProps(__spreadValues({
-          marginInlineEnd: token.marginSM,
-          marginBlockEnd: 0,
-          color: token.colorTextHeading,
-          fontWeight: 600,
-          fontSize: token.pageHeaderFontSizeHeaderTitle,
-          lineHeight: token.controlHeight + "px"
-        }, textOverflowEllipsis()), {
-          [`${token.componentCls}-rlt &`]: {
-            marginInlineEnd: 0,
-            marginInlineStart: token.marginSM
-          }
-        }),
-        "&-avatar": {
-          marginInlineEnd: token.marginSM,
-          [`${token.componentCls}-rlt &`]: {
-            float: "right",
-            marginInlineEnd: 0,
-            marginInlineStart: token.marginSM
-          }
-        },
-        "&-tags": {
-          [`${token.componentCls}-rlt &`]: {
-            float: "right"
-          }
-        },
-        "&-sub-title": __spreadProps(__spreadValues({
-          marginInlineEnd: token.marginSM,
-          color: token.colorTextSecondary,
-          fontSize: token.pageHeaderFontSizeHeaderSubTitle,
-          lineHeight: token.lineHeight
-        }, textOverflowEllipsis()), {
-          [`${token.componentCls}-rlt &`]: {
-            float: "right",
-            marginInlineEnd: 0,
-            marginInlineStart: 12
-          }
-        }),
-        "&-extra": {
-          marginBlock: token.marginXS / 2,
-          marginInlineEnd: 0,
-          marginInlineStart: 0,
-          whiteSpace: "nowrap",
-          "> *": {
-            "white-space": "unset",
-            [`${token.componentCls}-rlt &`]: {
-              marginInlineEnd: token.marginSM,
-              marginInlineStart: 0
-            }
-          },
-          [`${token.componentCls}-rlt &`]: {
-            float: "left"
-          },
-          "*:first-child": {
-            [`${token.componentCls}-rlt &`]: {
-              marginInlineEnd: 0
-            }
-          }
-        }
-      },
-      "&-content": {
-        paddingBlockStart: token.pageHeaderPaddingContentPadding
-      },
-      "&-footer": {
-        marginBlockStart: token.margin
-      },
-      "&-compact &-heading": {
-        flexWrap: "wrap"
-      },
-      "&-wide": {
-        maxWidth: 1152,
-        margin: "0 auto"
-      },
-      "&-rtl": {
-        direction: "rtl"
-      }
-    })
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
   };
 };
+var genPageHeaderStyle = function genPageHeaderStyle(token) {
+  var _token$layout;
+  return (0, _defineProperty2.default)({}, token.componentCls, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, _utils.resetComponent === null || _utils.resetComponent === void 0 ? void 0 : (0, _utils.resetComponent)(token)), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'relative',
+    backgroundColor: token.colorWhite,
+    paddingBlock: token.pageHeaderPaddingVertical + 2,
+    paddingInline: token.pageHeaderPadding,
+    '&&-ghost': {
+      backgroundColor: token.pageHeaderBgGhost
+    },
+    '&-no-children': {
+      height: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.paddingBlockPageContainerContent
+    },
+    '&&-has-breadcrumb': {
+      paddingBlockStart: token.pageHeaderPaddingBreadCrumb
+    },
+    '&&-has-footer': {
+      paddingBlockEnd: 0
+    },
+    '& &-back': (0, _defineProperty2.default)({
+      marginInlineEnd: token.margin,
+      fontSize: 16,
+      lineHeight: 1,
+      '&-button': (0, _objectSpread5.default)((0, _objectSpread5.default)({
+        fontSize: 16
+      }, _utils.operationUnit === null || _utils.operationUnit === void 0 ? void 0 : (0, _utils.operationUnit)(token)), {}, {
+        color: token.pageHeaderColorBack,
+        cursor: 'pointer'
+      })
+    }, "".concat(token.componentCls, "-rlt &"), {
+      float: 'right',
+      marginInlineEnd: 0,
+      marginInlineStart: 0
+    })
+  }, "& ".concat('ant', "-divider-vertical"), {
+    height: 14,
+    marginBlock: 0,
+    marginInline: token.marginSM,
+    verticalAlign: 'middle'
+  }), "& &-breadcrumb + &-heading", {
+    marginBlockStart: token.marginXS
+  }), '& &-heading', {
+    display: 'flex',
+    justifyContent: 'space-between',
+    '&-left': {
+      display: 'flex',
+      alignItems: 'center',
+      marginBlock: token.marginXS / 2,
+      marginInlineEnd: 0,
+      marginInlineStart: 0,
+      overflow: 'hidden'
+    },
+    '&-title': (0, _objectSpread5.default)((0, _objectSpread5.default)({
+      marginInlineEnd: token.marginSM,
+      marginBlockEnd: 0,
+      color: token.colorTextHeading,
+      fontWeight: 600,
+      fontSize: token.pageHeaderFontSizeHeaderTitle,
+      lineHeight: token.controlHeight + 'px'
+    }, textOverflowEllipsis()), {}, (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
+      marginInlineEnd: 0,
+      marginInlineStart: token.marginSM
+    })),
+    '&-avatar': (0, _defineProperty2.default)({
+      marginInlineEnd: token.marginSM
+    }, "".concat(token.componentCls, "-rlt &"), {
+      float: 'right',
+      marginInlineEnd: 0,
+      marginInlineStart: token.marginSM
+    }),
+    '&-tags': (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
+      float: 'right'
+    }),
+    '&-sub-title': (0, _objectSpread5.default)((0, _objectSpread5.default)({
+      marginInlineEnd: token.marginSM,
+      color: token.colorTextSecondary,
+      fontSize: token.pageHeaderFontSizeHeaderSubTitle,
+      lineHeight: token.lineHeight
+    }, textOverflowEllipsis()), {}, (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
+      float: 'right',
+      marginInlineEnd: 0,
+      marginInlineStart: 12
+    })),
+    '&-extra': (0, _defineProperty2.default)((0, _defineProperty2.default)({
+      marginBlock: token.marginXS / 2,
+      marginInlineEnd: 0,
+      marginInlineStart: 0,
+      whiteSpace: 'nowrap',
+      '> *': (0, _defineProperty2.default)({
+        'white-space': 'unset'
+      }, "".concat(token.componentCls, "-rlt &"), {
+        marginInlineEnd: token.marginSM,
+        marginInlineStart: 0
+      })
+    }, "".concat(token.componentCls, "-rlt &"), {
+      float: 'left'
+    }), '*:first-child', (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
+      marginInlineEnd: 0
+    }))
+  }), '&-content', {
+    paddingBlockStart: token.pageHeaderPaddingContentPadding
+  }), '&-footer', {
+    marginBlockStart: token.margin
+  }), '&-compact &-heading', {
+    flexWrap: 'wrap'
+  }), '&-wide', {
+    maxWidth: 1152,
+    margin: '0 auto'
+  }), '&-rtl', {
+    direction: 'rtl'
+  })));
+};
 function useStyle(prefixCls) {
-  return (0, import_utils.useStyle)("ProLayoutPageHeader", (token) => {
-    const proCardToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`,
-      pageHeaderBgGhost: "transparent",
+  return (0, _utils.useStyle)('ProLayoutPageHeader', function (token) {
+    var proCardToken = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls),
+      pageHeaderBgGhost: 'transparent',
       pageHeaderPadding: 16,
       pageHeaderPaddingVertical: 4,
       pageHeaderPaddingBreadCrumb: token.paddingSM,
@@ -195,4 +142,4 @@ function useStyle(prefixCls) {
     });
     return [genPageHeaderStyle(proCardToken)];
   });
-}
+}