📌 versions: up pro-layout to 6.x (#6902)

* up to layout

* use onMenuHeaderClick

* fix tsc

* fix ts error

* fix ts error

config/defaultSettings.ts

@@ -8,10 +8,10 @@ const proSettings: DefaultSettings = {
   navTheme: 'dark',
   // 拂晓蓝
   primaryColor: '#1890ff',
-  layout: 'sidemenu',
+  layout: 'side',
   contentWidth: 'Fluid',
   fixedHeader: false,
-  fixSiderbar: false,
+  fixSiderbar: true,
   colorWeak: false,
   menu: {
     locale: true,

package.json

@@ -59,7 +59,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@ant-design/pro-layout": "^5.0.16",
+    "@ant-design/pro-layout": "^6.0.0",
     "@ant-design/pro-table": "2.3.5",
     "antd": "4.4.0",
     "classnames": "^2.2.6",

src/components/GlobalHeader/RightContent.tsx

@@ -1,4 +1,5 @@
 import { Tooltip, Tag } from 'antd';
+import { Settings as ProSettings } from '@ant-design/pro-layout';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import React from 'react';
 import { connect, ConnectProps } from 'umi';
@@ -8,10 +9,8 @@ import HeaderSearch from '../HeaderSearch';
 import SelectLang from '../SelectLang';
 import styles from './index.less';
 
-export type SiderTheme = 'light' | 'dark';
-export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
-  theme?: SiderTheme | 'realDark';
-  layout: 'sidemenu' | 'topmenu';
+export interface GlobalHeaderRightProps extends Partial<ConnectProps>, Partial<ProSettings> {
+  theme?: ProSettings['navTheme'] | 'realDark';
 }
 
 const ENVTagColor = {
@@ -24,7 +23,7 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
   const { theme, layout } = props;
   let className = styles.right;
 
-  if (theme === 'dark' && layout === 'topmenu') {
+  if (theme === 'dark' && layout === 'top') {
     className = `${styles.right}  ${styles.dark}`;
   }
 

src/layouts/BasicLayout.tsx

@@ -10,7 +10,7 @@ import ProLayout, {
   DefaultFooter,
 } from '@ant-design/pro-layout';
 import React, { useEffect } from 'react';
-import { Link, useIntl, connect, Dispatch } from 'umi';
+import { Link, useIntl, connect, Dispatch, history } from 'umi';
 import { GithubOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
@@ -127,13 +127,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     <ProLayout
       logo={logo}
       formatMessage={formatMessage}
-      menuHeaderRender={(logoDom, titleDom) => (
-        <Link to="/">
-          {logoDom}
-          {titleDom}
-        </Link>
-      )}
       onCollapse={handleMenuCollapse}
+      onMenuHeaderClick={() => history.push('/')}
       menuItemRender={(menuItemProps, defaultDom) => {
         if (menuItemProps.isUrl || !menuItemProps.path) {
           return defaultDom;