Added component Scrollbar, Added avatar

src/components/Layout/Header.js

@@ -1,6 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon, Layout } from 'antd'
+import { Menu, Icon, Layout, Avatar } from 'antd'
 import { Trans } from '@lingui/react'
 import classnames from 'classnames'
 import styles from './Header.less'
@@ -12,7 +12,7 @@ class Header extends PureComponent {
     e.key === 'SignOut' && this.props.onSignOut()
   }
   render() {
-    const { user, collapsed, onCollapseChange } = this.props
+    const { username, avatar, collapsed, onCollapseChange } = this.props
 
     return (
       <Layout.Header className={styles.header}>
@@ -33,8 +33,11 @@ class Header extends PureComponent {
             <SubMenu
               title={
                 <Fragment>
-                  <Icon type="user" />
-                  {user.username}
+                  <span style={{ color: '#999', marginRight: 4 }}>
+                    <Trans>Hi,</Trans>
+                  </span>
+                  <span>{username}</span>
+                  <Avatar style={{ marginLeft: 8 }} src={avatar} />
                 </Fragment>
               }
             >

src/components/Layout/Header.less

@@ -4,11 +4,11 @@
   padding: 0;
   :global {
     .ant-menu-submenu-title {
-      height: 56px;
+      height: 72px;
     }
 
     .ant-menu-horizontal {
-      line-height: 56px;
+      line-height: 72px;
 
       & > .ant-menu-submenu:hover {
         color: #1890ff;
@@ -18,7 +18,7 @@
 
     .ant-menu {
       border-bottom: none;
-      height: 56px;
+      height: 72px;
     }
 
     .ant-menu-horizontal > .ant-menu-submenu {
@@ -46,7 +46,7 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: 56px;
+  height: 72px;
   z-index: 9;
   align-items: center;
   background-color: #fff;
@@ -56,9 +56,9 @@
   }
 
   .button {
-    width: 56px;
-    height: 56px;
-    line-height: 56px;
+    width: 72px;
+    height: 72px;
+    line-height: 72px;
     text-align: center;
     font-size: 18px;
     cursor: pointer;

src/components/Layout/Sider.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Icon, Switch, Layout } from 'antd'
 import { withI18n, Trans } from '@lingui/react'
+import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
 import SiderMenu from './Menu'
 import styles from './Sider.less'
@@ -21,25 +22,32 @@ class Sider extends PureComponent {
 
     return (
       <Layout.Sider
+        width={256}
         theme={theme}
         breakpoint="lg"
         trigger={null}
         collapsible
         collapsed={collapsed}
         onBreakpoint={isMobile ? null : onCollapseChange}
+        className={styles.sider}
       >
-        <div className={styles.logoContainer}>
-          <img alt="logo" src={config.logoPath} />
-          {collapsed ? null : <h1>{config.siteName}</h1>}
+        <div className={styles.brand}>
+          <div className={styles.logo}>
+            <img alt="logo" src={config.logoPath} />
+            {collapsed ? null : <h1>{config.siteName}</h1>}
+          </div>
         </div>
+
         <div className={styles.menuContainer}>
-          <SiderMenu
-            menus={menus}
-            theme={theme}
-            isMobile={isMobile}
-            collapsed={collapsed}
-            onCollapseChange={onCollapseChange}
-          />
+          <ScrollBar>
+            <SiderMenu
+              menus={menus}
+              theme={theme}
+              isMobile={isMobile}
+              collapsed={collapsed}
+              onCollapseChange={onCollapseChange}
+            />
+          </ScrollBar>
         </div>
         {collapsed ? null : (
           <div className={styles.switchTheme}>

src/components/Layout/Sider.less

@@ -1,39 +1,59 @@
 @import '~themes/vars.less';
 
-.logoContainer {
-  height: 96px;
+.sider {
+  box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
+  z-index: 10;
+  :global {
+    .ant-layout-sider-children {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+
+.brand {
+  z-index: 1;
+  height: 72px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  img {
-    width: 40px;
-    margin-right: 8px;
-  }
+    img {
+      width: 36px;
+      margin-right: 8px;
+    }
 
-  h1 {
-    vertical-align: text-bottom;
-    font-size: 16px;
-    text-transform: uppercase;
-    display: inline-block;
-    font-weight: 700;
-    color: @primary-color;
-    white-space: nowrap;
-    margin-bottom: 0;
-    .text-gradient();
+    h1 {
+      vertical-align: text-bottom;
+      font-size: 16px;
+      text-transform: uppercase;
+      display: inline-block;
+      font-weight: 700;
+      color: @primary-color;
+      white-space: nowrap;
+      margin-bottom: 0;
+      .text-gradient();
 
-    :local {
-      animation: fadeRightIn 300ms @ease-in-out;
-      animation-fill-mode: both;
+      :local {
+        animation: fadeRightIn 300ms @ease-in-out;
+        animation-fill-mode: both;
+      }
     }
   }
 }
 
 .menuContainer {
-  height: ~'calc(100vh - 144px)';
+  height: ~'calc(100vh - 120px)';
   overflow-x: hidden;
-  border-right: none;
   flex: 1;
+  padding: 24px 0;
 
   &::-webkit-scrollbar-thumb {
     background-color: transparent;

src/components/ScrollBar/index.js

@@ -0,0 +1,5 @@
+import ScrollBar from 'react-perfect-scrollbar'
+import 'react-perfect-scrollbar/dist/css/styles.css'
+import './index.less'
+
+export default ScrollBar

src/components/ScrollBar/index.less

@@ -0,0 +1,26 @@
+:global {
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    background-color: transparent;
+  }
+
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x {
+    height: 8px;
+  }
+
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y {
+    width: 8px;
+  }
+
+  .ps__thumb-y {
+    width: 4px;
+    right: 4px;
+  }
+
+  .ps__thumb-x {
+    height: 4px;
+    bottom: 4px;
+  }
+}

src/components/index.js

@@ -2,7 +2,8 @@ import Editor from './Editor'
 import FilterItem from './FilterItem'
 import DropOption from './DropOption'
 import Loader from './Loader'
+import ScrollBar from './ScrollBar'
 import * as MyLayout from './Layout/index.js'
 import Page from './Page'
 
-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page }
+export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar }

src/layouts/PrimaryLayout.js

@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { connect } from 'dva'
-import { MyLayout } from 'components'
+import { MyLayout, ScrollBar } from 'components'
 import { BackTop, Layout, Drawer } from 'antd'
 import { GlobalFooter } from 'ant-design-pro'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
@@ -64,10 +64,11 @@ class PrimaryLayout extends PureComponent {
     const menus = routeList.filter(_ => _.menuParentId !== '-1')
 
     const headerProps = {
-      user,
       menus,
       collapsed,
       onCollapseChange,
+      avatar: user.avatar,
+      username: user.username,
       onSignOut() {
         dispatch({ type: 'app/signOut' })
       },
@@ -109,16 +110,18 @@ class PrimaryLayout extends PureComponent {
             <Sider {...siderProps} />
           )}
           <div className={styles.container} id="primaryLayout">
-            <Header {...headerProps} />
-            <Content className={styles.content}>
-              <Bread routeList={routeList} />
-              {hasPermission ? children : <Error />}
-            </Content>
-            <BackTop
-              className={styles.backTop}
-              target={() => document.getElementById('primaryLayout')}
-            />
-            <GlobalFooter copyright={config.copyright} />
+            <ScrollBar>
+              <Header {...headerProps} />
+              <Content className={styles.content}>
+                <Bread routeList={routeList} />
+                {hasPermission ? children : <Error />}
+              </Content>
+              <BackTop
+                className={styles.backTop}
+                target={() => document.getElementById('primaryLayout')}
+              />
+              <GlobalFooter copyright={config.copyright} />
+            </ScrollBar>
           </div>
         </Layout>
       </Fragment>

src/themes/index.less

@@ -6,15 +6,6 @@ body {
   background-color: #f8f8f8;
 }
 
-::-webkit-scrollbar-thumb {
-  background-color: #e6e6e6;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
 :global {
   .ant-breadcrumb {
     & > span {