fix: use pro-layout new api

package.json

@@ -46,50 +46,50 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^4.8.0",
-    "@ant-design/pro-components": "^2.3.37",
+    "@ant-design/pro-components": "^2.3.57",
     "@ant-design/use-emotion-css": "1.0.4",
-    "@umijs/route-utils": "^2.1.3",
+    "@umijs/route-utils": "^2.2.2",
-    "antd": "^5.0.0",
+    "antd": "^5.2.2",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "omit.js": "^2.0.2",
-    "rc-menu": "^9.6.4",
+    "rc-menu": "^9.8.2",
-    "rc-util": "^5.24.4",
+    "rc-util": "^5.27.2",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
-    "react-dev-inspector": "^1.8.1",
+    "react-dev-inspector": "^1.8.4",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0"
   },
   "devDependencies": {
-    "@ant-design/pro-cli": "^2.1.0",
+    "@ant-design/pro-cli": "^2.1.5",
     "@testing-library/react": "^13.4.0",
     "@types/classnames": "^2.3.1",
-    "@types/express": "^4.17.14",
+    "@types/express": "^4.17.17",
     "@types/history": "^4.7.11",
-    "@types/jest": "^29.2.1",
+    "@types/jest": "^29.4.0",
-    "@types/lodash": "^4.14.186",
+    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^18.0.11",
-    "@types/react-helmet": "^6.1.5",
+    "@types/react-helmet": "^6.1.6",
     "@umijs/fabric": "^2.14.1",
-    "@umijs/lint": "^4.0.34",
+    "@umijs/lint": "^4.0.52",
-    "@umijs/max": "^4.0.33",
+    "@umijs/max": "^4.0.52",
     "cross-env": "^7.0.3",
-    "eslint": "^8.0.0",
+    "eslint": "^8.34.0",
     "express": "^4.18.2",
-    "gh-pages": "^3.2.0",
+    "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
-    "jest": "^29.2.2",
+    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.2.2",
+    "jest-environment-jsdom": "^29.4.3",
-    "lint-staged": "^10.0.0",
+    "lint-staged": "^10.5.4",
     "mockjs": "^1.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
-    "swagger-ui-dist": "^4.14.2",
+    "swagger-ui-dist": "^4.15.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.5",
-    "umi-presets-pro": "^2.0.0"
+    "umi-presets-pro": "^2.0.2"
   },
   "engines": {
     "node": ">=12.0.0"

src/app.tsx

@@ -1,5 +1,5 @@
 import Footer from '@/components/Footer';
-import RightContent from '@/components/RightContent';
+import { Question, SelectLang } from '@/components/RightContent';
 import { LinkOutlined } from '@ant-design/icons';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { SettingDrawer } from '@ant-design/pro-components';
@@ -9,6 +9,7 @@ import defaultSettings from '../config/defaultSettings';
 import { errorConfig } from './requestErrorConfig';
 import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
 import React from 'react';
+import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
 const isDev = process.env.NODE_ENV === 'development';
 const loginPath = '/user/login';
 
@@ -51,7 +52,14 @@ export async function getInitialState(): Promise<{
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
   return {
-    rightContentRender: () => <RightContent />,
+    actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
+    avatarProps: {
+      src: initialState?.currentUser?.avatar,
+      title: <AvatarName />,
+      render: (_, avatarChildren) => {
+        return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
+      },
+    },
     waterMarkProps: {
       content: initialState?.currentUser?.name,
     },

src/components/HeaderDropdown/index.tsx

@@ -17,13 +17,7 @@ const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls,
       },
     };
   });
-  return (
+  return <Dropdown overlayClassName={classNames(className, cls)} {...restProps} />;
-    <Dropdown
-      overlayClassName={classNames(className, cls)}
-      getPopupContainer={(target) => target.parentElement || document.body}
-      {...restProps}
-    />
-  );
 };
 
 export default HeaderDropdown;

src/components/RightContent/AvatarDropdown.tsx

@@ -2,8 +2,7 @@ import { outLogin } from '@/services/ant-design-pro/api';
 import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import { history, useModel } from '@umijs/max';
-import { Avatar, Spin } from 'antd';
+import { Spin } from 'antd';
-import { setAlpha } from '@ant-design/pro-components';
 import { stringify } from 'querystring';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import React, { useCallback } from 'react';
@@ -12,49 +11,16 @@ import HeaderDropdown from '../HeaderDropdown';
 
 export type GlobalHeaderRightProps = {
   menu?: boolean;
+  children?: React.ReactNode;
 };
 
-const Name = () => {
+export const AvatarName = () => {
   const { initialState } = useModel('@@initialState');
   const { currentUser } = initialState || {};
-
+  return <span className="anticon">{currentUser?.name}</span>;
-  const nameClassName = useEmotionCss(({ token }) => {
-    return {
-      width: '70px',
-      height: '48px',
-      overflow: 'hidden',
-      lineHeight: '48px',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      [`@media only screen and (max-width: ${token.screenMD}px)`]: {
-        display: 'none',
-      },
-    };
-  });
-
-  return <span className={`${nameClassName} anticon`}>{currentUser?.name}</span>;
 };
 
-const AvatarLogo = () => {
+export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => {
-  const { initialState } = useModel('@@initialState');
-  const { currentUser } = initialState || {};
-
-  const avatarClassName = useEmotionCss(({ token }) => {
-    return {
-      marginRight: '8px',
-      color: token.colorPrimary,
-      verticalAlign: 'top',
-      background: setAlpha(token.colorBgContainer, 0.85),
-      [`@media only screen and (max-width: ${token.screenMD}px)`]: {
-        margin: 0,
-      },
-    };
-  });
-
-  return <Avatar size="small" className={avatarClassName} src={currentUser?.avatar} alt="avatar" />;
-};
-
-const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
   /**
    * 退出登录，并且将当前的 url 保存
    */
@@ -161,12 +127,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
         items: menuItems,
       }}
     >
-      <span className={actionClassName}>
+      {children}
-        <AvatarLogo />
-        <Name />
-      </span>
     </HeaderDropdown>
   );
 };
-
-export default AvatarDropdown;

src/components/RightContent/index.tsx

@@ -1,57 +1,31 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { useEmotionCss } from '@ant-design/use-emotion-css';
+import { SelectLang as UmiSelectLang } from '@umijs/max';
-import { SelectLang, useModel } from '@umijs/max';
 import React from 'react';
-import Avatar from './AvatarDropdown';
 
 export type SiderTheme = 'light' | 'dark';
 
-const GlobalHeaderRight: React.FC = () => {
+export const SelectLang = () => {
-  const className = useEmotionCss(() => {
+  return (
-    return {
+    <UmiSelectLang
-      display: 'flex',
+      style={{
-      height: '48px',
+        padding: 4,
-      marginLeft: 'auto',
+      }}
-      overflow: 'hidden',
+    />
-      gap: 8,
+  );
-    };
+};
-  });
-
-  const actionClassName = useEmotionCss(({ token }) => {
-    return {
-      display: 'flex',
-      float: 'right',
-      height: '48px',
-      marginLeft: 'auto',
-      overflow: 'hidden',
-      cursor: 'pointer',
-      padding: '0 12px',
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        backgroundColor: token.colorBgTextHover,
-      },
-    };
-  });
-
-  const { initialState } = useModel('@@initialState');
-
-  if (!initialState || !initialState.settings) {
-    return null;
-  }
 
+export const Question = () => {
   return (
-    <div className={className}>
+    <div
-      <span
+      style={{
-        className={actionClassName}
+        display: 'flex',
+        height: 26,
+      }}
       onClick={() => {
         window.open('https://pro.ant.design/docs/getting-started');
       }}
     >
       <QuestionCircleOutlined />
-      </span>
-      <Avatar />
-      <SelectLang className={actionClassName} />
     </div>
   );
 };
-export default GlobalHeaderRight;