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

package/es/layout/components/GlobalFooter/style.js

@@ -1,40 +1,41 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genFooterToolBarStyle = function genFooterToolBarStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    marginBlock: 0,
-    marginBlockStart: 48,
-    marginBlockEnd: 24,
-    marginInline: 0,
-    paddingBlock: 0,
-    paddingInline: 16,
-    textAlign: 'center',
-    '&-list': {
-      marginBlockEnd: 8,
-      color: token.colorTextSecondary,
-      '&-link': {
+const genFooterToolBarStyle = token => {
+  return {
+    [token.componentCls]: {
+      marginBlock: 0,
+      marginBlockStart: 48,
+      marginBlockEnd: 24,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 16,
+      textAlign: 'center',
+      '&-list': {
+        marginBlockEnd: 8,
         color: token.colorTextSecondary,
-        textDecoration: token.linkDecoration
+        '&-link': {
+          color: token.colorTextSecondary,
+          textDecoration: token.linkDecoration
+        },
+        '*:not(:last-child)': {
+          marginInlineEnd: 8
+        },
+        '&:hover': {
+          color: token.colorPrimary
+        }
       },
-      '*:not(:last-child)': {
-        marginInlineEnd: 8
-      },
-      '&:hover': {
-        color: token.colorPrimary
+      '&-copyright': {
+        fontSize: '14px',
+        color: token.colorText
       }
-    },
-    '&-copyright': {
-      fontSize: '14px',
-      color: token.colorText
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutFooter', function (token) {
-    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutFooter', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genFooterToolBarStyle(proCardToken)];
   });
 }

package/es/layout/components/GlobalHeader/ActionsContent.js

@@ -1,17 +1,10 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarProps", "actionsRender", "headerContentRender"],
-  _excluded2 = ["title", "render"];
+import ResizeObserver from '@rc-component/resize-observer';
 import { Avatar, ConfigProvider } from 'antd';
-import classNames from 'classnames';
-import ResizeObserver from 'rc-resize-observer';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo, useState } from 'react';
 import { useDebounceFn } from "../../../utils";
 import { useStyle } from "./rightContentStyle";
+
 /**
  * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
  *
@@ -20,30 +13,33 @@ import { useStyle } from "./rightContentStyle";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ActionsContent = function ActionsContent(_ref) {
-  var avatarProps = _ref.avatarProps,
-    actionsRender = _ref.actionsRender,
-    headerContentRender = _ref.headerContentRender,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = "".concat(getPrefixCls(), "-pro-global-header");
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useState = useState('auto'),
-    _useState2 = _slicedToArray(_useState, 2),
-    rightSize = _useState2[0],
-    setRightSize = _useState2[1];
-  var avatarDom = useMemo(function () {
+export const ActionsContent = ({
+  avatarProps,
+  actionsRender,
+  headerContentRender,
+  ...props
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = `${getPrefixCls()}-pro-global-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const [rightSize, setRightSize] = useState('auto');
+  const avatarDom = useMemo(() => {
     if (!avatarProps) return null;
-    var title = avatarProps.title,
-      render = avatarProps.render,
-      rest = _objectWithoutProperties(avatarProps, _excluded2);
-    var domList = [rest !== null && rest !== void 0 && rest.src || rest !== null && rest !== void 0 && rest.srcSet || rest.icon || rest.children ? /*#__PURE__*/_createElement(Avatar, _objectSpread(_objectSpread({}, rest), {}, {
+    const {
+      title,
+      render,
+      ...rest
+    } = avatarProps;
+    const domList = [rest?.src || rest?.srcSet || rest.icon || rest.children ? /*#__PURE__*/_createElement(Avatar, {
+      ...rest,
       size: 28,
       key: "avatar"
-    })) : null, title ? /*#__PURE__*/_jsx("span", {
+    }) : null, title ? /*#__PURE__*/_jsx("span", {
       style: {
         marginInlineStart: 8
       },
@@ -58,55 +54,43 @@ export var ActionsContent = function ActionsContent(_ref) {
       children: domList
     });
   }, [avatarProps]);
-  var rightActionsRender = actionsRender || avatarDom ? function (restParams) {
-    var doms = actionsRender && (actionsRender === null || actionsRender === void 0 ? void 0 : actionsRender(restParams));
+  const rightActionsRender = actionsRender || avatarDom ? restParams => {
+    const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
+      className: `${prefixCls}-header-actions ${hashId}`.trim(),
       children: [doms, avatarDom && /*#__PURE__*/_jsx("span", {
-        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
-      children: [doms.filter(Boolean).map(function (dom, index) {
-        var hideHover = false;
+      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      children: [doms.filter(Boolean).map((dom, index) => {
+        let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
         if ( /*#__PURE__*/React.isValidElement(dom)) {
-          var _dom$props;
-          hideHover = !!(dom !== null && dom !== void 0 && (_dom$props = dom.props) !== null && _dom$props !== void 0 && _dom$props['aria-hidden']);
+          hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/_jsx("div", {
-          className: classNames("".concat(prefixCls, "-header-actions-item ").concat(hashId), _defineProperty({}, "".concat(prefixCls, "-header-actions-hover"), !hideHover)),
+          className: clsx(`${prefixCls}-header-actions-item ${hashId}`, {
+            [`${prefixCls}-header-actions-hover`]: !hideHover
+          }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/_jsx("span", {
-        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
         children: avatarDom
       })]
     }));
   } : undefined;
   /** 减少一下渲染的次数 */
-  var setRightSizeDebounceFn = useDebounceFn( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(width) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setRightSize(width);
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), 160);
-  var contentRender = rightActionsRender;
+  const setRightSizeDebounceFn = useDebounceFn(async width => {
+    setRightSize(width);
+  }, 160);
+  const contentRender = rightActionsRender;
   return /*#__PURE__*/_jsx("div", {
-    className: "".concat(prefixCls, "-right-content ").concat(hashId).trim(),
+    className: `${prefixCls}-right-content ${hashId}`.trim(),
     style: {
       minWidth: rightSize,
       height: '100%'
@@ -116,26 +100,26 @@ export var ActionsContent = function ActionsContent(_ref) {
         height: '100%'
       },
       children: /*#__PURE__*/_jsx(ResizeObserver, {
-        onResize: function onResize(_ref3) {
-          var width = _ref3.width;
+        onResize: ({
+          width
+        }) => {
           setRightSizeDebounceFn.run(width);
         },
-        children: function children(ref) {
-          return /*#__PURE__*/_jsx("div", {
-            ref: ref,
-            style: {
-              display: 'flex',
-              alignItems: 'center',
-              height: '100%',
-              justifyContent: 'flex-end'
-            },
-            children: contentRender ? contentRender(_objectSpread(_objectSpread({}, props), {}, {
-              // 测试专用
-              //@ts-ignore
-              rightContentSize: rightSize
-            })) : null
-          });
-        }
+        children: ref => /*#__PURE__*/_jsx("div", {
+          ref: ref,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            justifyContent: 'flex-end'
+          },
+          children: contentRender ? contentRender({
+            ...props,
+            // 测试专用
+            //@ts-ignore
+            rightContentSize: rightSize
+          }) : null
+        })
       })
     }) : null
   });

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

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { MenuOutlined } from '@ant-design/icons';
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { clearMenuItem } from "../../utils/utils";
 import { AppsLogoComponents, defaultRenderLogo } from "../AppsLogoComponents";
@@ -13,7 +11,7 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
+const renderLogo = (menuHeaderRender, logoDom) => {
   if (menuHeaderRender === false) {
     return null;
   }
@@ -22,45 +20,52 @@ var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
   }
   return logoDom;
 };
-var GlobalHeader = function GlobalHeader(props) {
-  var isMobile = props.isMobile,
-    logo = props.logo,
-    collapsed = props.collapsed,
-    onCollapse = props.onCollapse,
-    menuHeaderRender = props.menuHeaderRender,
-    onMenuHeaderClick = props.onMenuHeaderClick,
-    propClassName = props.className,
-    style = props.style,
-    layout = props.layout,
-    children = props.children,
-    splitMenus = props.splitMenus,
-    menuData = props.menuData,
-    prefixCls = props.prefixCls;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls,
-    direction = _useContext.direction;
-  var baseClassName = "".concat(prefixCls || getPrefixCls('pro'), "-global-header");
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var className = classNames(propClassName, baseClassName, hashId);
+const GlobalHeader = props => {
+  const {
+    isMobile,
+    logo,
+    collapsed,
+    onCollapse,
+    menuHeaderRender,
+    onMenuHeaderClick,
+    className: propClassName,
+    style,
+    layout,
+    children,
+    splitMenus,
+    menuData,
+    prefixCls
+  } = props;
+  const {
+    getPrefixCls,
+    direction
+  } = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = `${prefixCls || getPrefixCls('pro')}-global-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
+  const className = clsx(propClassName, baseClassName, hashId);
   if (layout === 'mix' && !isMobile && splitMenus) {
-    var noChildrenMenuData = (menuData || []).map(function (item) {
-      return _objectSpread(_objectSpread({}, item), {}, {
-        children: undefined,
-        routes: undefined
-      });
-    });
-    var clearMenuData = clearMenuItem(noChildrenMenuData);
-    return /*#__PURE__*/_jsx(TopNavHeader, _objectSpread(_objectSpread({
-      mode: "horizontal"
-    }, props), {}, {
+    const noChildrenMenuData = (menuData || []).map(item => ({
+      ...item,
+      children: undefined,
+      routes: undefined
+    }));
+    const clearMenuData = clearMenuItem(noChildrenMenuData);
+    return /*#__PURE__*/_jsx(TopNavHeader, {
+      mode: "horizontal",
+      ...props,
       splitMenus: false,
       menuData: clearMenuData
-    }));
+    });
   }
-  var logoClassNames = classNames("".concat(baseClassName, "-logo"), hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-logo-rtl"), direction === 'rtl'), "".concat(baseClassName, "-logo-mix"), layout === 'mix'), "".concat(baseClassName, "-logo-mobile"), isMobile));
-  var logoDom = /*#__PURE__*/_jsx("span", {
+  const logoClassNames = clsx(`${baseClassName}-logo`, hashId, {
+    [`${baseClassName}-logo-rtl`]: direction === 'rtl',
+    [`${baseClassName}-logo-mix`]: layout === 'mix',
+    [`${baseClassName}-logo-mobile`]: isMobile
+  });
+  const logoDom = /*#__PURE__*/_jsx("span", {
     className: logoClassNames,
     children: /*#__PURE__*/_jsx("a", {
       children: defaultRenderLogo(logo)
@@ -68,27 +73,34 @@ var GlobalHeader = function GlobalHeader(props) {
   }, "logo");
   return wrapSSR( /*#__PURE__*/_jsxs("div", {
     className: className,
-    style: _objectSpread({}, style),
+    style: {
+      ...style
+    },
     children: [isMobile && /*#__PURE__*/_jsx("span", {
-      className: "".concat(baseClassName, "-collapsed-button ").concat(hashId).trim(),
-      onClick: function onClick() {
-        onCollapse === null || onCollapse === void 0 || onCollapse(!collapsed);
+      className: `${baseClassName}-collapsed-button ${hashId}`.trim(),
+      onClick: () => {
+        onCollapse?.(!collapsed);
       },
       children: /*#__PURE__*/_jsx(MenuOutlined, {})
     }), isMobile && renderLogo(menuHeaderRender, logoDom), layout === 'mix' && !isMobile && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(AppsLogoComponents, _objectSpread({}, props)), /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(AppsLogoComponents, {
+        ...props
+      }), /*#__PURE__*/_jsx("div", {
         className: logoClassNames,
         onClick: onMenuHeaderClick,
-        children: renderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
+        children: renderLogoAndTitle({
+          ...props,
           collapsed: false
-        }), 'headerTitleRender')
+        }, 'headerTitleRender')
       })]
     }), /*#__PURE__*/_jsx("div", {
       style: {
         flex: 1
       },
       children: children
-    }), (props.actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, _objectSpread({}, props))]
+    }), (props.actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, {
+      ...props
+    })]
   }));
 };
 export { GlobalHeader };

package/es/layout/components/GlobalHeader/rightContentStyle.js

@@ -1,63 +1,63 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../utils";
-var genTopNavHeaderStyle = function genTopNavHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  return _defineProperty({}, token.componentCls, {
-    '&-header-actions': {
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      '&-item': {
-        display: 'inline-flex',
+const genTopNavHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-header-actions': {
+        display: 'flex',
+        height: '100%',
         alignItems: 'center',
-        justifyContent: 'center',
-        paddingBlock: 0,
-        paddingInline: 2,
-        color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextRightActionsItem,
-        fontSize: '16px',
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '> *': {
-          paddingInline: 6,
-          paddingBlock: 6,
+        '&-item': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingBlock: 0,
+          paddingInline: 2,
+          color: token.layout?.header?.colorTextRightActionsItem,
+          fontSize: '16px',
+          cursor: 'pointer',
           borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgRightActionsItemHover
+          '> *': {
+            paddingInline: 6,
+            paddingBlock: 6,
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
-        }
-      },
-      '&-avatar': {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingInlineStart: token.padding,
-        paddingInlineEnd: token.padding,
-        cursor: 'pointer',
-        color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextRightActionsItem,
-        '> div': {
-          height: '44px',
-          color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextRightActionsItem,
-          paddingInline: 8,
-          paddingBlock: 8,
-          cursor: 'pointer',
-          display: 'flex',
+        },
+        '&-avatar': {
+          display: 'inline-flex',
           alignItems: 'center',
-          lineHeight: '44px',
-          borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.header) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgRightActionsItemHover
+          justifyContent: 'center',
+          paddingInlineStart: token.padding,
+          paddingInlineEnd: token.padding,
+          cursor: 'pointer',
+          color: token.layout?.header?.colorTextRightActionsItem,
+          '> div': {
+            height: '44px',
+            color: token.layout?.header?.colorTextRightActionsItem,
+            paddingInline: 8,
+            paddingBlock: 8,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: '44px',
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
         }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutRightContent', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutRightContent', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genTopNavHeaderStyle(proToken)];
   });
 }

package/es/layout/components/GlobalHeader/style.js

@@ -1,64 +1,68 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genGlobalHeaderStyle = function genGlobalHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3;
-  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    position: 'relative',
-    background: 'transparent',
-    display: 'flex',
-    alignItems: 'center',
-    marginBlock: 0,
-    marginInline: 16,
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    boxSizing: 'border-box',
-    '> a': {
-      height: '100%'
-    }
-  }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-    marginInlineEnd: 16
-  }), '&-collapsed-button', {
-    minHeight: '22px',
-    color: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorHeaderTitle,
-    fontSize: '18px',
-    marginInlineEnd: '16px'
-  }), '&-logo', {
-    position: 'relative',
-    marginInlineEnd: '16px',
-    a: {
+const genGlobalHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
+      background: 'transparent',
       display: 'flex',
       alignItems: 'center',
-      height: '100%',
-      minHeight: '22px',
-      fontSize: '20px'
-    },
-    img: {
-      height: '28px'
-    },
-    h1: {
-      height: '32px',
       marginBlock: 0,
-      marginInline: 0,
-      marginInlineStart: 8,
-      fontWeight: '600',
-      color: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorHeaderTitle) || token.colorTextHeading,
-      fontSize: '18px',
-      lineHeight: '32px'
-    },
-    '&-mix': {
-      display: 'flex',
-      alignItems: 'center'
+      marginInline: 16,
+      height: token.layout?.header?.heightLayoutHeader || 56,
+      boxSizing: 'border-box',
+      '> a': {
+        height: '100%'
+      },
+      [`${token.proComponentsCls}-layout-apps-icon`]: {
+        marginInlineEnd: 16
+      },
+      '&-collapsed-button': {
+        minHeight: '22px',
+        color: token.layout?.header?.colorHeaderTitle,
+        fontSize: '18px',
+        marginInlineEnd: '16px'
+      },
+      '&-logo': {
+        position: 'relative',
+        marginInlineEnd: '16px',
+        a: {
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          minHeight: '22px',
+          fontSize: '20px'
+        },
+        img: {
+          height: '28px'
+        },
+        h1: {
+          height: '32px',
+          marginBlock: 0,
+          marginInline: 0,
+          marginInlineStart: 8,
+          fontWeight: '600',
+          color: token.layout?.header?.colorHeaderTitle || token.colorTextHeading,
+          fontSize: '18px',
+          lineHeight: '32px'
+        },
+        '&-mix': {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      },
+      '&-logo-mobile': {
+        minWidth: '24px',
+        marginInlineEnd: 0
+      }
     }
-  }), '&-logo-mobile', {
-    minWidth: '24px',
-    marginInlineEnd: 0
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutGlobalHeader', function (token) {
-    var GlobalHeaderToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutGlobalHeader', token => {
+    const GlobalHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGlobalHeaderStyle(GlobalHeaderToken)];
   });
 }