Update from Vibe Studio

node_modules/@ant-design/pro-layout/lib/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/lib/components/GlobalHeader/ActionsContent.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsContent = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _proUtils = require("@ant-design/pro-utils");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _react = _interopRequireWildcard(require("react"));
+var _rightContentStyle = require("./rightContentStyle");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["rightContentRender", "avatarProps", "actionsRender", "headerContentRender"],
+  _excluded2 = ["title", "render"];
+/**
+ * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
+ *
+ * @param param0
+ */
+var ActionsContent = exports.ActionsContent = function ActionsContent(_ref) {
+  var rightContentRender = _ref.rightContentRender,
+    avatarProps = _ref.avatarProps,
+    actionsRender = _ref.actionsRender,
+    headerContentRender = _ref.headerContentRender,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = "".concat(getPrefixCls(), "-pro-global-header");
+  var _useStyle = (0, _rightContentStyle.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _useState = (0, _react.useState)('auto'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    rightSize = _useState2[0],
+    setRightSize = _useState2[1];
+  var avatarDom = (0, _react.useMemo)(function () {
+    if (!avatarProps) return null;
+    var title = avatarProps.title,
+      render = avatarProps.render,
+      rest = (0, _objectWithoutProperties2.default)(avatarProps, _excluded2);
+    var domList = [rest !== null && rest !== void 0 && rest.src || rest !== null && rest !== void 0 && rest.srcSet || rest.icon || rest.children ? /*#__PURE__*/(0, _react.createElement)(_antd.Avatar, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+      size: 28,
+      key: "avatar"
+    })) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        marginInlineStart: 8
+      },
+      children: title
+    }, "name") : undefined];
+    if (render) {
+      return render(avatarProps, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: domList
+      }), props);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "".concat(prefixCls, "-header-actions ").concat(hashId).trim(),
+      children: [doms, avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        children: avatarDom
+      })]
+    }));
+    return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.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.default.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__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)("".concat(prefixCls, "-header-actions-item ").concat(hashId), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-actions-hover"), !hideHover)),
+          children: dom
+        }, index);
+      }), avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "".concat(prefixCls, "-header-actions-avatar ").concat(hashId).trim(),
+        children: avatarDom
+      })]
+    }));
+  } : undefined;
+  /** 减少一下渲染的次数 */
+  var setRightSizeDebounceFn = (0, _proUtils.useDebounceFn)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(width) {
+      return (0, _regeneratorRuntime2.default)().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__*/(0, _jsxRuntime.jsx)("div", {
+    className: "".concat(prefixCls, "-right-content ").concat(hashId).trim(),
+    style: {
+      minWidth: rightSize,
+      height: '100%'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        height: '100%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
+        onResize: function onResize(_ref3) {
+          var width = _ref3.width;
+          setRightSizeDebounceFn.run(width);
+        },
+        children: contentRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            justifyContent: 'flex-end'
+          },
+          children: contentRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+            // 测试专用
+            //@ts-ignore
+            rightContentSize: rightSize
+          }))
+        }) : null
+      })
+    })
+  });
+};

node_modules/@ant-design/pro-layout/lib/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/lib/components/GlobalHeader/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalHeader = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../utils/utils");
+var _AppsLogoComponents = require("../AppsLogoComponents");
+var _SiderMenu = require("../SiderMenu/SiderMenu");
+var _TopNavHeader = require("../TopNavHeader");
+var _ActionsContent = require("./ActionsContent");
+var _style = require("./style");
+var _jsxRuntime = require("react/jsx-runtime");
+var renderLogo = function renderLogo(menuHeaderRender, logoDom) {
+  if (menuHeaderRender === false) {
+    return null;
+  }
+  if (menuHeaderRender) {
+    return menuHeaderRender(logoDom, null);
+  }
+  return logoDom;
+};
+var GlobalHeader = exports.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 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    direction = _useContext.direction;
+  var baseClassName = "".concat(prefixCls || getPrefixCls('pro'), "-global-header");
+  var _useStyle = (0, _style.useStyle)(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var className = (0, _classnames.default)(propClassName, baseClassName, hashId);
+  if (layout === 'mix' && !isMobile && splitMenus) {
+    var noChildrenMenuData = (menuData || []).map(function (item) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        children: undefined,
+        routes: undefined
+      });
+    });
+    var clearMenuData = (0, _utils.clearMenuItem)(noChildrenMenuData);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      mode: "horizontal"
+    }, props), {}, {
+      splitMenus: false,
+      menuData: clearMenuData
+    }));
+  }
+  var logoClassNames = (0, _classnames.default)("".concat(baseClassName, "-logo"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo-rtl"), direction === 'rtl'), "".concat(baseClassName, "-logo-mix"), layout === 'mix'), "".concat(baseClassName, "-logo-mobile"), isMobile));
+  var logoDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: logoClassNames,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      children: (0, _AppsLogoComponents.defaultRenderLogo)(logo)
+    })
+  }, "logo");
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    style: (0, _objectSpread2.default)({}, style),
+    children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "".concat(baseClassName, "-collapsed-button ").concat(hashId).trim(),
+      onClick: function onClick() {
+        onCollapse === null || onCollapse === void 0 || onCollapse(!collapsed);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MenuOutlined, {})
+    }), isMobile && renderLogo(menuHeaderRender, logoDom), layout === 'mix' && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, (0, _objectSpread2.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: logoClassNames,
+        onClick: onMenuHeaderClick,
+        children: (0, _SiderMenu.renderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+          collapsed: false
+        }), 'headerTitleRender')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        flex: 1
+      },
+      children: children
+    }), (rightContentRender || props.actionsRender || props.avatarProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionsContent.ActionsContent, (0, _objectSpread2.default)({
+      rightContentRender: rightContentRender
+    }, props))]
+  }));
+};

node_modules/@ant-design/pro-layout/lib/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/lib/components/GlobalHeader/rightContentStyle.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _proUtils = require("@ant-design/pro-utils");
+var genTopNavHeaderStyle = function genTopNavHeaderStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
+  return (0, _defineProperty2.default)({}, 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
+          }
+        }
+      }
+    }
+  });
+};
+function useStyle(prefixCls) {
+  return (0, _proUtils.useStyle)('ProLayoutRightContent', function (token) {
+    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genTopNavHeaderStyle(proToken)];
+  });
+}

node_modules/@ant-design/pro-layout/lib/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/lib/components/GlobalHeader/style.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _proProvider = require("@ant-design/pro-provider");
+var genGlobalHeaderStyle = function genGlobalHeaderStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3;
+  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    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
+  }));
+};
+function useStyle(prefixCls) {
+  return (0, _proProvider.useStyle)('ProLayoutGlobalHeader', function (token) {
+    var GlobalHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genGlobalHeaderStyle(GlobalHeaderToken)];
+  });
+}