From 6180e59cdbe6bf04077d0788bd74153f3a0c781a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Thu, 30 Aug 2018 19:25:04 +0800
Subject: [PATCH] handcode and use Automatically closed menu

---
 config/router.config.js                |  3 +++
 package.json                           |  2 +-
 src/components/GlobalHeader/index.less |  1 +
 src/components/TopNavHeader/index.js   | 35 ++++++++++++++++++++++----
 src/components/TopNavHeader/index.less |  4 +++
 src/pages/404.js                       |  2 +-
 6 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/config/router.config.js b/config/router.config.js
index 5d6b4e50..346a36bb 100644
--- a/config/router.config.js
+++ b/config/router.config.js
@@ -249,6 +249,9 @@ module.exports = [
           },
         ],
       },
+      {
+        component: '404',
+      },
     ],
   },
 ];
diff --git a/package.json b/package.json
index 882d405a..43cc1e6a 100755
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@antv/data-set": "^0.9.0",
     "@babel/runtime": "^7.0.0",
-    "antd": "^3.9.0-beta.2",
+    "antd": "3.9.0-beta.6",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",
diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index ad305210..ffe6ecbe 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -45,6 +45,7 @@ i.trigger {
 .right {
   float: right;
   height: 100%;
+  width: 324px;
   .action {
     cursor: pointer;
     padding: 0 12px;
diff --git a/src/components/TopNavHeader/index.js b/src/components/TopNavHeader/index.js
index a68c1171..bf6946de 100644
--- a/src/components/TopNavHeader/index.js
+++ b/src/components/TopNavHeader/index.js
@@ -5,11 +5,31 @@ import BaseMenu from '../SiderMenu/BaseMenu';
 import styles from './index.less';
 
 export default class TopNavHeader extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+    };
+  }
+
+  static getDerivedStateFromProps(props) {
+    return {
+      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+    };
+  }
+
   render() {
     const { theme, grid, logo } = this.props;
+    const { maxWidth } = this.state;
     return (
       <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
-        <div className={`${styles.main} ${grid === 'Wide' ? styles.wide : ''}`}>
+        <div
+          ref={ref => {
+            this.maim = ref;
+          }}
+          className={`${styles.main} ${grid === 'Wide' ? styles.wide : ''}`}
+        >
           <div className={styles.left}>
             <div className={styles.logo} key="logo" id="logo">
               <Link to="/">
@@ -17,11 +37,16 @@ export default class TopNavHeader extends PureComponent {
                 <h1>Ant Design Pro</h1>
               </Link>
             </div>
-            <BaseMenu {...this.props} style={{ paddingTop: '9px', border: 'none' }} />
-          </div>
-          <div className={styles.right}>
-            <RightContent {...this.props} />
+            <div
+              style={{
+                flex: 1,
+                maxWidth,
+              }}
+            >
+              <BaseMenu {...this.props} style={{ border: 'none', height: 64 }} />
+            </div>
           </div>
+          <RightContent {...this.props} />
         </div>
       </div>
     );
diff --git a/src/components/TopNavHeader/index.less b/src/components/TopNavHeader/index.less
index 4e544e9b..39184582 100644
--- a/src/components/TopNavHeader/index.less
+++ b/src/components/TopNavHeader/index.less
@@ -8,6 +8,7 @@
   :global {
     .ant-menu-submenu.ant-menu-submenu-horizontal {
       height: 100%;
+      padding-top: 9px;
       .ant-menu-submenu-title {
         height: 100%;
       }
@@ -29,6 +30,9 @@
       flex: 1;
       display: flex;
     }
+    .right {
+      width: 324px;
+    }
   }
 }
 
diff --git a/src/pages/404.js b/src/pages/404.js
index c0004ba0..8e2f2fa2 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -3,5 +3,5 @@ import Link from 'umi/link';
 import Exception from '@/components/Exception';
 
 export default () => (
-  <Exception type="404" linkElement={Link} />
+  <Exception type="404" style={{ minHeight: 500, height: '100%' }} linkElement={Link} />
 );
-- 
GitLab