@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/layout/components/AppsLogoComponents/types.d.ts

@@ -0,0 +1,10 @@
+export type AppItemProps = {
+  title: React.ReactNode;
+  desc?: React.ReactNode;
+  icon?: React.ReactNode | (() => React.ReactNode);
+  url?: string;
+  target?: string;
+  children?: Omit<AppItemProps, 'children'>[];
+};
+
+export type AppListProps = AppItemProps[];

package/es/layout/components/CollapsedIcon/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CollapsedIcon: React.FC<any>;

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

@@ -0,0 +1,21 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["isMobile", "collapsed"];
+import classNames from 'classnames';
+import { ArrowSvgIcon } from "../SiderMenu/Arrow";
+import { useStyle } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CollapsedIcon = function CollapsedIcon(props) {
+  var isMobile = props.isMobile,
+    collapsed = props.collapsed,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useStyle = useStyle(props.className),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  if (isMobile && collapsed) return null;
+  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+    className: classNames(props.className, hashId, _defineProperty(_defineProperty({}, "".concat(props.className, "-collapsed"), collapsed), "".concat(props.className, "-is-mobile"), isMobile)),
+    children: /*#__PURE__*/_jsx(ArrowSvgIcon, {})
+  })));
+};

package/es/layout/components/CollapsedIcon/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface SiderMenuToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,49 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from "../../../provider";
+var genSiderMenuStyle = function genSiderMenuStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3;
+  return _defineProperty({}, token.componentCls, {
+    position: 'absolute',
+    insetBlockStart: '18px',
+    zIndex: '101',
+    width: '24px',
+    height: '24px',
+    fontSize: ['14px', '16px'],
+    textAlign: 'center',
+    borderRadius: '40px',
+    insetInlineEnd: '-13px',
+    transition: 'transform 0.3s',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextCollapsedButton,
+    backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgCollapsedButton,
+    boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+    '&:hover': {
+      color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextCollapsedButtonHover,
+      boxShadow: '0 4px 16px -4px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(25,15,15,0.07), 0 1px 2px 0 rgba(0,0,0,0.08)'
+    },
+    '.anticon': {
+      fontSize: '14px'
+    },
+    '& > svg': {
+      transition: 'transform  0.3s',
+      transform: 'rotate(90deg)'
+    },
+    '&-collapsed': {
+      '& > svg': {
+        transform: 'rotate(-90deg)'
+      }
+    }
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('SiderMenuCollapsedIcon', function (token) {
+    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genSiderMenuStyle(siderMenuToken)];
+  });
+}

package/es/layout/components/Footer.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { WithFalse } from '../typing';
+export type FooterProps = {
+    links?: WithFalse<{
+        key?: string;
+        title: React.ReactNode;
+        href: string;
+        blankTarget?: boolean;
+    }[]>;
+    copyright?: WithFalse<string>;
+    style?: CSSProperties;
+    className?: string;
+    prefixCls?: string;
+};
+declare const DefaultFooter: React.FC<FooterProps>;
+export { DefaultFooter };

package/es/layout/components/Footer.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { CopyrightOutlined } from '@ant-design/icons';
+import { Layout } from 'antd';
+import React, { Fragment } from 'react';
+import { GlobalFooter } from "./GlobalFooter";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Footer = Layout.Footer;
+var DefaultFooter = function DefaultFooter(_ref) {
+  var links = _ref.links,
+    copyright = _ref.copyright,
+    style = _ref.style,
+    className = _ref.className,
+    prefixCls = _ref.prefixCls;
+  return /*#__PURE__*/_jsx(Footer, {
+    className: className,
+    style: _objectSpread({
+      padding: 0
+    }, style),
+    children: /*#__PURE__*/_jsx(GlobalFooter, {
+      links: links,
+      prefixCls: prefixCls,
+      copyright: copyright === false ? null : /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(CopyrightOutlined, {}), " ", copyright]
+      })
+    })
+  });
+};
+export { DefaultFooter };

package/es/layout/components/FooterToolbar/index.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { GenerateStyle } from '../../../provider';
+import type { RouteContextType } from '../../index';
+import type { FooterToolBarToken } from './style';
+export type FooterToolbarProps = {
+    extra?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    renderContent?: (props: FooterToolbarProps & RouteContextType & {
+        leftWidth?: string;
+    }, dom: JSX.Element) => ReactNode;
+    prefixCls?: string;
+    stylish?: GenerateStyle<FooterToolBarToken>;
+    children?: React.ReactNode;
+    portalDom?: boolean;
+};
+declare const FooterToolbar: React.FC<FooterToolbarProps>;
+export { FooterToolbar };

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

@@ -0,0 +1,94 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "extra", "portalDom", "style", "renderContent"];
+/* eslint-disable react-hooks/exhaustive-deps */import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { isBrowser } from "../../../utils";
+import { RouteContext } from "../../index";
+import { useStyle } from "./style";
+import { useStylish } from "./style/stylish";
+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 FooterToolbar = function FooterToolbar(props) {
+  var children = props.children,
+    className = props.className,
+    extra = props.extra,
+    _props$portalDom = props.portalDom,
+    portalDom = _props$portalDom === void 0 ? true : _props$portalDom,
+    style = props.style,
+    renderContent = props.renderContent,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    getTargetContainer = _useContext.getTargetContainer;
+  var prefixCls = props.prefixCls || getPrefixCls('pro');
+  var baseClassName = "".concat(prefixCls, "-footer-bar");
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var value = useContext(RouteContext);
+  var width = useMemo(function () {
+    var hasSiderMenu = value.hasSiderMenu,
+      isMobile = value.isMobile,
+      siderWidth = value.siderWidth;
+    if (!hasSiderMenu) {
+      return undefined;
+    }
+    // 0 or undefined
+    if (!siderWidth) {
+      return '100%';
+    }
+    return isMobile ? '100%' : "calc(100% - ".concat(siderWidth, "px)");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value.collapsed, value.hasSiderMenu, value.isMobile, value.siderWidth]);
+  var containerDom = useMemo(function () {
+    if (typeof window === 'undefined' || typeof document === 'undefined') return null;
+    // 只读取一次就行了，不然总是的渲染
+    return (getTargetContainer === null || getTargetContainer === void 0 ? void 0 : getTargetContainer()) || document.body;
+  }, []);
+  var stylish = useStylish("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+    stylish: props.stylish
+  });
+  var dom = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-left ").concat(hashId).trim(),
+      children: extra
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-right ").concat(hashId).trim(),
+      children: children
+    })]
+  });
+
+  /** 告诉 props 是否存在 footerBar */
+  useEffect(function () {
+    if (!value || !(value !== null && value !== void 0 && value.setHasFooterToolbar)) {
+      return function () {};
+    }
+    value === null || value === void 0 || value.setHasFooterToolbar(true);
+    return function () {
+      var _value$setHasFooterTo;
+      value === null || value === void 0 || (_value$setHasFooterTo = value.setHasFooterToolbar) === null || _value$setHasFooterTo === void 0 || _value$setHasFooterTo.call(value, false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var renderDom = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: classNames(className, hashId, baseClassName, _defineProperty({}, "".concat(baseClassName, "-stylish"), !!props.stylish)),
+    style: _objectSpread({
+      width: width
+    }, style)
+  }, omit(restProps, ['prefixCls'])), {}, {
+    children: renderContent ? renderContent(_objectSpread(_objectSpread(_objectSpread({}, props), value), {}, {
+      leftWidth: width
+    }), dom) : dom
+  }));
+  var ssrDom = !isBrowser() || !portalDom || !containerDom ? renderDom : /*#__PURE__*/createPortal(renderDom, containerDom, baseClassName);
+  return stylish.wrapSSR(wrapSSR( /*#__PURE__*/_jsx(React.Fragment, {
+    children: ssrDom
+  }, baseClassName)));
+};
+export { FooterToolbar };

package/es/layout/components/FooterToolbar/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../../provider';
+export interface FooterToolBarToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,47 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { setAlpha, useStyle as useAntdStyle } from "../../../../provider";
+var genFooterToolBarStyle = function genFooterToolBarStyle(token) {
+  return _defineProperty({}, token.componentCls, {
+    position: 'fixed',
+    insetInlineEnd: 0,
+    bottom: 0,
+    zIndex: 99,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    paddingInline: 24,
+    paddingBlock: 0,
+    boxSizing: 'border-box',
+    lineHeight: '64px',
+    /* A way to reset the style of the component. */
+    backgroundColor: setAlpha(token.colorBgElevated, 0.6),
+    borderBlockStart: "1px solid ".concat(token.colorSplit),
+    '-webkit-backdrop-filter': 'blur(8px)',
+    backdropFilter: 'blur(8px)',
+    color: token.colorText,
+    transition: 'all 0.2s ease 0s',
+    '&-left': {
+      flex: 1,
+      color: token.colorText
+    },
+    '&-right': {
+      color: token.colorText,
+      '> *': {
+        marginInlineEnd: 8,
+        '&:last-child': {
+          marginBlock: 0,
+          marginInline: 0
+        }
+      }
+    }
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProLayoutFooterToolbar', function (token) {
+    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genFooterToolBarStyle(proCardToken)];
+  });
+}

package/es/layout/components/FooterToolbar/style/stylish.d.ts

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

package/es/layout/components/FooterToolbar/style/stylish.js

@@ -0,0 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useStyle as useAntdStyle } from "../../../../provider";
+export function useStylish(prefixCls, _ref) {
+  var stylish = _ref.stylish;
+  return useAntdStyle('ProLayoutFooterToolbarStylish', function (token) {
+    var stylishToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    if (!stylish) return [];
+    return [_defineProperty({}, "".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
+  });
+}

package/es/layout/components/GlobalFooter/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WithFalse } from '../../typing';
+export type GlobalFooterProps = {
+    links?: WithFalse<{
+        key?: string;
+        title: React.ReactNode;
+        href: string;
+        blankTarget?: boolean;
+    }[]>;
+    copyright?: React.ReactNode;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+};
+declare const GlobalFooter: ({ className, prefixCls, links, copyright, style, }: GlobalFooterProps) => React.JSX.Element | null;
+export { GlobalFooter };

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

@@ -0,0 +1,42 @@
+import { ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { useStyle } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GlobalFooter = function GlobalFooter(_ref) {
+  var className = _ref.className,
+    prefixCls = _ref.prefixCls,
+    links = _ref.links,
+    copyright = _ref.copyright,
+    style = _ref.style;
+  var context = useContext(ConfigProvider.ConfigContext);
+  var baseClassName = context.getPrefixCls(prefixCls || 'pro-global-footer');
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  if ((links == null || links === false || Array.isArray(links) && links.length === 0) && (copyright == null || copyright === false)) {
+    return null;
+  }
+  return wrapSSR( /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, hashId, className),
+    style: style,
+    children: [links && /*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
+      children: links.map(function (link) {
+        return /*#__PURE__*/_jsx("a", {
+          className: "".concat(baseClassName, "-list-link ").concat(hashId).trim(),
+          title: link.key,
+          target: link.blankTarget ? '_blank' : '_self',
+          href: link.href,
+          rel: "noreferrer",
+          children: link.title
+        }, link.key);
+      })
+    }), copyright && /*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-copyright ").concat(hashId).trim(),
+      children: copyright
+    })]
+  }));
+};
+export { GlobalFooter };

package/es/layout/components/GlobalFooter/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface GlobalFooterToken extends ProAliasToken {
+    componentCls: string;
+    probgLayout?: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,40 @@
+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': {
+        color: token.colorTextSecondary,
+        textDecoration: token.linkDecoration
+      },
+      '*:not(:last-child)': {
+        marginInlineEnd: 8
+      },
+      '&:hover': {
+        color: token.colorPrimary
+      }
+    },
+    '&-copyright': {
+      fontSize: '14px',
+      color: token.colorText
+    }
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProLayoutFooter', function (token) {
+    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genFooterToolBarStyle(proCardToken)];
+  });
+}

package/es/layout/components/GlobalHeader/ActionsContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { GlobalHeaderProps } from '.';
+/**
+ * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
+ *
+ * @param param0
+ */
+export declare const ActionsContent: React.FC<GlobalHeaderProps>;

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

@@ -0,0 +1,142 @@
+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 { Avatar, ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useContext, useMemo, useState } from 'react';
+import { useDebounceFn } from "../../../utils";
+import { useStyle } from "./rightContentStyle";
+/**
+ * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
+ *
+ * @param param0
+ */
+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 () {
+    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), {}, {
+      size: 28,
+      key: "avatar"
+    })) : null, title ? /*#__PURE__*/_jsx("span", {
+      style: {
+        marginInlineStart: 8
+      },
+      children: title
+    }, "name") : undefined];
+    if (render) {
+      return render(avatarProps, /*#__PURE__*/_jsx("div", {
+        children: domList
+      }), props);
+    }
+    return /*#__PURE__*/_jsx("div", {
+      children: domList
+    });
+  }, [avatarProps]);
+  var rightActionsRender = actionsRender || avatarDom ? function (restParams) {
+    var doms = actionsRender && (actionsRender === null || actionsRender === void 0 ? void 0 : actionsRender(restParams));
+    if (!doms && !avatarDom) return null;
+    if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
+      children: [doms, avatarDom && /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-header-actions-avatar ").concat(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;
+        // 如果配置了 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']);
+        }
+        return /*#__PURE__*/_jsx("div", {
+          className: classNames("".concat(prefixCls, "-header-actions-item ").concat(hashId), _defineProperty({}, "".concat(prefixCls, "-header-actions-hover"), !hideHover)),
+          children: dom
+        }, index);
+      }), avatarDom && /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-header-actions-avatar ").concat(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;
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, "-right-content ").concat(hashId).trim(),
+    style: {
+      minWidth: rightSize,
+      height: '100%'
+    },
+    children: contentRender ? /*#__PURE__*/_jsx("div", {
+      style: {
+        height: '100%'
+      },
+      children: /*#__PURE__*/_jsx(ResizeObserver, {
+        onResize: function onResize(_ref3) {
+          var width = _ref3.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
+          });
+        }
+      })
+    }) : null
+  });
+};

package/es/layout/components/GlobalHeader/index.d.ts

@@ -0,0 +1,49 @@
+import type { AvatarProps } from 'antd';
+import React from 'react';
+import type { PureSettings } from '../../defaultSettings';
+import type { MenuDataItem } from '../../index';
+import type { WithFalse } from '../../typing';
+import type { AppItemProps, AppListProps } from '../AppsLogoComponents/types';
+import type { HeaderViewProps } from '../Header';
+import type { PrivateSiderMenuProps, SiderMenuProps } from '../SiderMenu/SiderMenu';
+export type GlobalHeaderProps = {
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    isMobile?: boolean;
+    logo?: React.ReactNode;
+    /**
+     * @name 虽然叫menuRender，但是其实是整个 SiderMenu 面板的渲染函数
+     *
+     * @example 收起时完成不展示菜单 menuRender={(props,defaultDom)=> props.collapsed ? null : defaultDom}
+     * @example 不展示菜单 menuRender={false}
+     */
+    menuRender?: WithFalse<(props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode>;
+    className?: string;
+    prefixCls?: string;
+    /** 相关品牌的列表 */
+    appList?: AppListProps;
+    /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+    itemClick?: (item: AppItemProps, popoverRef?: React.RefObject<HTMLSpanElement>) => void;
+    menuData?: MenuDataItem[];
+    onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+    menuHeaderRender?: SiderMenuProps['menuHeaderRender'];
+    /**
+     * @name 顶部区域的渲染，包含内部的 menu
+     *
+     * @example headerContentRender={(props) => <div>管理控制台 </div>}
+     */
+    headerContentRender?: WithFalse<(props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode>;
+    collapsedButtonRender?: SiderMenuProps['collapsedButtonRender'];
+    splitMenus?: boolean;
+    /** Layout的操作功能列表，不同的 layout 会放到不同的位置 */
+    actionsRender?: WithFalse<(props: HeaderViewProps) => React.ReactNode[] | React.ReactNode>;
+    /** 头像的设置 */
+    avatarProps?: WithFalse<AvatarProps & {
+        title?: React.ReactNode;
+        render?: (props: AvatarProps, defaultDom: React.ReactNode, siderProps: SiderMenuProps) => React.ReactNode;
+    }>;
+    children?: React.ReactNode;
+} & Partial<PureSettings>;
+declare const GlobalHeader: React.FC<GlobalHeaderProps & PrivateSiderMenuProps>;
+export { GlobalHeader };