Layout header height correctly change when `@layout-header-height` change.

src/components/GlobalHeader/index.js

@@ -31,11 +31,9 @@ export default class GlobalHeader extends PureComponent {
             <img src={logo} alt="logo" width="32" />
           </Link>
         )}
-        <Icon
-          className={styles.trigger}
-          type={collapsed ? 'menu-unfold' : 'menu-fold'}
-          onClick={this.toggle}
-        />
+        <span className={styles.trigger} onClick={this.toggle}>
+          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
+        </span>
         <RightContent {...this.props} />
       </div>
     );

src/components/GlobalHeader/index.less

@@ -3,7 +3,7 @@
 @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
 
 .header {
-  height: 64px;
+  height: @layout-header-height;
   padding: 0;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -11,8 +11,8 @@
 }
 
 .logo {
-  height: 64px;
-  line-height: 58px;
+  height: @layout-header-height;
+  line-height: @layout-header-height;
   vertical-align: top;
   display: inline-block;
   padding: 0 0 0 24px;
@@ -33,12 +33,12 @@
   }
 }
 
-i.trigger {
+.trigger {
   font-size: 20px;
-  height: 64px;
+  height: @layout-header-height;
   cursor: pointer;
   transition: all 0.3s, padding 0s;
-  padding: 22px 24px;
+  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
   &:hover {
     background: @pro-header-hover-bg;
   }
@@ -73,7 +73,8 @@ i.trigger {
   }
   .account {
     .avatar {
-      margin: 20px 8px 20px 0;
+      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+      margin-right: 8px;
       color: @primary-color;
       background: rgba(255, 255, 255, 0.85);
       vertical-align: top;
@@ -82,7 +83,7 @@ i.trigger {
 }
 
 .dark {
-  height: 64px;
+  height: @layout-header-height;
   .action {
     color: rgba(255, 255, 255, 0.85);
     > i {

src/components/SelectLang/index.js

@@ -42,11 +42,9 @@ export default class SelectLang extends PureComponent {
     );
     return (
       <Dropdown overlay={langMenu} placement="bottomRight">
-        <Icon
-          type="global"
-          className={classNames(styles.dropDown, className)}
-          title={formatMessage({ id: 'navBar.lang' })}
-        />
+        <span className={classNames(styles.dropDown, className)}>
+          <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
+        </span>
       </Dropdown>
     );
   }

src/components/SelectLang/index.less

@@ -11,11 +11,14 @@
 
 .dropDown {
   cursor: pointer;
-  font-size: 14px;
   vertical-align: top;
-  line-height: 64px;
-  > svg {
-    position: relative;
-    top: 2px;
+  line-height: @layout-header-height;
+  > i {
+    font-size: 14px !important;
+    transform: none !important;
+    svg {
+      position: relative;
+      top: -1px;
+    }
   }
 }

src/components/SiderMenu/BaseMenu.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import classNames from 'classnames';
 import { Menu, Icon } from 'antd';
 import Link from 'umi/link';
 import isEqual from 'lodash/isEqual';
@@ -130,6 +131,7 @@ export default class BaseMenu extends PureComponent {
       theme,
       mode,
       location: { pathname },
+      className,
     } = this.props;
     // if pathname can't match, use the nearest parent's key
     let selectedKeys = this.getSelectedMenuKeys(pathname);
@@ -143,6 +145,10 @@ export default class BaseMenu extends PureComponent {
       };
     }
     const { handleOpenChange, style, menuData } = this.props;
+    const cls = classNames(className, {
+      'top-nav-menu': mode === 'horizontal',
+    });
+
     return (
       <Menu
         key="Menu"
@@ -151,7 +157,7 @@ export default class BaseMenu extends PureComponent {
         onOpenChange={handleOpenChange}
         selectedKeys={selectedKeys}
         style={style}
-        className={mode === 'horizontal' ? 'top-nav-menu' : ''}
+        className={cls}
         {...props}
       >
         {this.getNavMenuItems(menuData)}

src/components/SiderMenu/index.less

@@ -1,6 +1,6 @@
 @import '~antd/lib/style/themes/default.less';
 
-@nav-header-height: 64px;
+@nav-header-height: @layout-header-height;
 
 .logo {
   height: @nav-header-height;

src/components/TopNavHeader/index.js

@@ -40,11 +40,7 @@ export default class TopNavHeader extends PureComponent {
                 maxWidth,
               }}
             >
-              <BaseMenu
-                {...this.props}
-                flatMenuKeys={flatMenuKeys}
-                style={{ border: 'none', height: 64 }}
-              />
+              <BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} />
             </div>
           </div>
           <RightContent {...this.props} />

src/components/TopNavHeader/index.less

@@ -1,64 +1,72 @@
-.head {
-  width: 100%;
-  transition: background 0.3s, width 0.2s;
-  height: 64px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  position: relative;
-  :global {
-    .ant-menu-submenu.ant-menu-submenu-horizontal {
-      line-height: 64px;
-      height: 100%;
-      .ant-menu-submenu-title {
-        height: 100%;
-      }
-    }
-  }
-  &.light {
-    background-color: #fff;
-  }
-  .main {
-    display: flex;
-    height: 64px;
-    padding-left: 24px;
-    &.wide {
-      max-width: 1200px;
-      margin: auto;
-      padding-left: 0;
-    }
-    .left {
-      flex: 1;
-      display: flex;
-    }
-    .right {
-      width: 324px;
-    }
-  }
-}
-
-.logo {
-  width: 165px;
-  height: 64px;
-  position: relative;
-  line-height: 64px;
-  transition: all 0.3s;
-  overflow: hidden;
-  img {
-    display: inline-block;
-    vertical-align: middle;
-    height: 32px;
-  }
-  h1 {
-    color: #fff;
-    display: inline-block;
-    vertical-align: top;
-    font-size: 16px;
-    margin: 0 0 0 12px;
-    font-weight: 400;
-  }
-}
-
-.light {
-  h1 {
-    color: #002140;
-  }
-}
+@import '~antd/lib/style/themes/default.less';
+
+.head {
+  width: 100%;
+  transition: background 0.3s, width 0.2s;
+  height: @layout-header-height;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  position: relative;
+  :global {
+    .ant-menu-submenu.ant-menu-submenu-horizontal {
+      line-height: @layout-header-height;
+      height: 100%;
+      .ant-menu-submenu-title {
+        height: 100%;
+      }
+    }
+  }
+  &.light {
+    background-color: #fff;
+  }
+  .main {
+    display: flex;
+    height: @layout-header-height;
+    padding-left: 24px;
+    &.wide {
+      max-width: 1200px;
+      margin: auto;
+      padding-left: 0;
+    }
+    .left {
+      flex: 1;
+      display: flex;
+    }
+    .right {
+      width: 324px;
+    }
+  }
+}
+
+.logo {
+  width: 165px;
+  height: @layout-header-height;
+  position: relative;
+  line-height: @layout-header-height;
+  transition: all 0.3s;
+  overflow: hidden;
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    height: 32px;
+  }
+  h1 {
+    color: #fff;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 16px;
+    margin: 0 0 0 12px;
+    font-weight: 400;
+  }
+}
+
+.light {
+  h1 {
+    color: #002140;
+  }
+}
+
+.menu {
+  border: none;
+  height: @layout-header-height;
+  line-height: @layout-header-height;
+}

src/layouts/BasicLayout.js

@@ -18,6 +18,8 @@ import Exception403 from '../pages/Exception/403';
 import PageLoading from '@/components/PageLoading';
 import SiderMenu from '@/components/SiderMenu';
 
+import styles from './BasicLayout.less';
+
 // lazy load SettingDrawer
 const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer'));
 
@@ -138,14 +140,6 @@ class BasicLayout extends React.PureComponent {
     return null;
   };
 
-  getContentStyle = () => {
-    const { fixedHeader } = this.props;
-    return {
-      margin: '24px 24px 0',
-      paddingTop: fixedHeader ? 64 : 0,
-    };
-  };
-
   handleMenuCollapse = collapsed => {
     const { dispatch } = this.props;
     dispatch({
@@ -172,10 +166,12 @@ class BasicLayout extends React.PureComponent {
       isMobile,
       menuData,
       breadcrumbNameMap,
+      fixedHeader,
     } = this.props;
 
     const isTop = PropsLayout === 'topmenu';
     const routerConfig = this.matchParamsPath(pathname, breadcrumbNameMap);
+    const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
     const layout = (
       <Layout>
         {isTop && !isMobile ? null : (
@@ -201,7 +197,7 @@ class BasicLayout extends React.PureComponent {
             isMobile={isMobile}
             {...this.props}
           />
-          <Content style={this.getContentStyle()}>
+          <Content className={styles.content} style={contentStyle}>
             <Authorized
               authority={routerConfig && routerConfig.authority}
               noMatch={<Exception403 />}

src/layouts/BasicLayout.less

@@ -0,0 +1,6 @@
+@import '~antd/lib/style/themes/default.less';
+
+.content {
+  margin: 24px;
+  padding-top: @layout-header-height;
+}