Update from Vibe Studio

node_modules/@ant-design/pro-layout/es/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>;

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/ActionsContent.js

@@ -0,0 +1,140 @@
+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 = ["rightContentRender", "avatarProps", "actionsRender", "headerContentRender"],
+  _excluded2 = ["title", "render"];
+import { useDebounceFn } from '@ant-design/pro-utils';
+import { Avatar, ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useContext, useMemo, useState } from 'react';
+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 rightContentRender = _ref.rightContentRender,
+    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 || rightContentRender;
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, "-right-content ").concat(hashId).trim(),
+    style: {
+      minWidth: rightSize,
+      height: '100%'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        height: '100%'
+      },
+      children: /*#__PURE__*/_jsx(ResizeObserver, {
+        onResize: function onResize(_ref3) {
+          var width = _ref3.width;
+          setRightSizeDebounceFn.run(width);
+        },
+        children: contentRender ? /*#__PURE__*/_jsx("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            justifyContent: 'flex-end'
+          },
+          children: contentRender(_objectSpread(_objectSpread({}, props), {}, {
+            // 测试专用
+            //@ts-ignore
+            rightContentSize: rightSize
+          }))
+        }) : null
+      })
+    })
+  });
+};

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/index.d.ts

@@ -0,0 +1,54 @@
+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>;
+    /**
+     * @deprecated
+     * 使用 actionsRender 和 avatarProps 代替
+     */
+    rightContentRender?: WithFalse<(props: HeaderViewProps) => 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 };

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/index.js

@@ -0,0 +1,97 @@
+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 React, { useContext } from 'react';
+import { clearMenuItem } from "../../utils/utils";
+import { AppsLogoComponents, defaultRenderLogo } from "../AppsLogoComponents";
+import { renderLogoAndTitle } from "../SiderMenu/SiderMenu";
+import { TopNavHeader } from "../TopNavHeader";
+import { ActionsContent } from "./ActionsContent";
+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) {
+  if (menuHeaderRender === false) {
+    return null;
+  }
+  if (menuHeaderRender) {
+    return menuHeaderRender(logoDom, null);
+  }
+  return logoDom;
+};
+var GlobalHeader = function GlobalHeader(props) {
+  var isMobile = props.isMobile,
+    logo = props.logo,
+    collapsed = props.collapsed,
+    onCollapse = props.onCollapse,
+    rightContentRender = props.rightContentRender,
+    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);
+  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), {}, {
+      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", {
+    className: logoClassNames,
+    children: /*#__PURE__*/_jsx("a", {
+      children: defaultRenderLogo(logo)
+    })
+  }, "logo");
+  return wrapSSR( /*#__PURE__*/_jsxs("div", {
+    className: className,
+    style: _objectSpread({}, style),
+    children: [isMobile && /*#__PURE__*/_jsx("span", {
+      className: "".concat(baseClassName, "-collapsed-button ").concat(hashId).trim(),
+      onClick: function onClick() {
+        onCollapse === null || onCollapse === void 0 || 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", {
+        className: logoClassNames,
+        onClick: onMenuHeaderClick,
+        children: renderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
+          collapsed: false
+        }), 'headerTitleRender')
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1
+      },
+      children: children
+    }), (rightContentRender || props.actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, _objectSpread({
+      rightContentRender: rightContentRender
+    }, props))]
+  }));
+};
+export { GlobalHeader };

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/rightContentStyle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '@ant-design/pro-provider';
+export interface ProToken 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;
+};

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/rightContentStyle.js

@@ -0,0 +1,63 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from '@ant-design/pro-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',
+        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,
+          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
+          }
+        }
+      },
+      '&-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',
+          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
+          }
+        }
+      }
+    }
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProLayoutRightContent', function (token) {
+    var proToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genTopNavHeaderStyle(proToken)];
+  });
+}

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '@ant-design/pro-provider';
+export interface GlobalHeaderToken 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;
+};

node_modules/@ant-design/pro-layout/es/components/GlobalHeader/style.js

@@ -0,0 +1,64 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from '@ant-design/pro-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: {
+      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'
+    }
+  }), '&-logo-mobile', {
+    minWidth: '24px',
+    marginInlineEnd: 0
+  }));
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProLayoutGlobalHeader', function (token) {
+    var GlobalHeaderToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genGlobalHeaderStyle(GlobalHeaderToken)];
+  });
+}