Added component Scrollbar, Added avatar

myjeffxie · Oct 11, 2018 · 0a3fac2 · 0a3fac2
1 parent 2f92832
commit 0a3fac2
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 2,201 deletions.
diff --git a/mock/_utils.js b/mock/_utils.js
@@ -12,6 +12,26 @@ export function queryArray(array, key, value) {
   return array.filter(_ => _[key] === value)
 }
 
+export function randomNumber(min, max) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+export function randomAvatar() {
+  const avatarList = [
+    'https://randomuser.me/api/portraits/men/32.jpg',
+    'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
+    'https://d3iw72m71ie81c.cloudfront.net/female-17.jpg',
+    'https://randomuser.me/api/portraits/men/35.jpg',
+    'https://pbs.twimg.com/profile_images/835224725815246848/jdMBCxHS.jpg',
+    'https://pbs.twimg.com/profile_images/1010888664732200962/OmFg5TO0.jpg',
+    'https://pbs.twimg.com/profile_images/584098247641300992/N25WgvW_.png',
+    'https://d3iw72m71ie81c.cloudfront.net/male-5.jpg',
+    'https://images.pexels.com/photos/413723/pexels-photo-413723.jpeg?h=350&auto=compress&cs=tinysrgb',
+    'https://images.pexels.com/photos/61100/pexels-photo-61100.jpeg?h=350&auto=compress&cs=tinysrgb',
+  ]
+  return avatarList[randomNumber(0, avatarList.length - 1)]
+}
+
 export const Constant = {
   ApiPrefix: '/api/v1',
   NotFound: {

diff --git a/mock/user.js b/mock/user.js
@@ -1,4 +1,4 @@
-import { Mock, Constant, qs } from './_utils'
+import { Mock, Constant, qs, randomAvatar } from './_utils'
 
 const { ApiPrefix } = Constant
 
@@ -14,14 +14,19 @@ let usersListData = Mock.mock({
       isMale: '@boolean',
       email: '@email',
       createTime: '@datetime',
-      avatar () {
-        return Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', this.nickName.substr(0, 1))
+      avatar() {
+        return Mock.Random.image(
+          '100x100',
+          Mock.Random.color(),
+          '#757575',
+          'png',
+          this.nickName.substr(0, 1)
+        )
       },
     },
   ],
 })
 
-
 let database = usersListData.data
 
 const EnumRoleType = {
@@ -49,16 +54,21 @@ const adminUsers = [
     username: 'admin',
     password: 'admin',
     permissions: userPermission.ADMIN,
-  }, {
+    avatar: randomAvatar(),
+  },
+  {
     id: 1,
     username: 'guest',
     password: 'guest',
     permissions: userPermission.DEFAULT,
-  }, {
+    avatar: randomAvatar(),
+  },
+  {
     id: 2,
     username: '吴彦祖',
     password: '123456',
     permissions: userPermission.DEVELOPER,
+    avatar: randomAvatar(),
   },
 ]
 
@@ -87,34 +97,37 @@ const NOTFOUND = {
 }
 
 module.exports = {
-
-  [`POST ${ApiPrefix}/user/login`] (req, res) {
+  [`POST ${ApiPrefix}/user/login`](req, res) {
     const { username, password } = req.body
     const user = adminUsers.filter(item => item.username === username)
 
     if (user.length > 0 && user[0].password === password) {
       const now = new Date()
       now.setDate(now.getDate() + 1)
-      res.cookie('token', JSON.stringify({ id: user[0].id, deadline: now.getTime() }), {
-        maxAge: 900000,
-        httpOnly: true,
-      })
+      res.cookie(
+        'token',
+        JSON.stringify({ id: user[0].id, deadline: now.getTime() }),
+        {
+          maxAge: 900000,
+          httpOnly: true,
+        }
+      )
       res.json({ success: true, message: 'Ok' })
     } else {
       res.status(400).end()
     }
   },
 
-  [`GET ${ApiPrefix}/user/logout`] (req, res) {
+  [`GET ${ApiPrefix}/user/logout`](req, res) {
     res.clearCookie('token')
     res.status(200).end()
   },
 
-  [`GET ${ApiPrefix}/user`] (req, res) {
+  [`GET ${ApiPrefix}/user`](req, res) {
     const cookie = req.headers.cookie || ''
     const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
     const response = {}
-    const user = {}
+    let user = {}
     if (!cookies.token) {
       res.status(200).send({ message: 'Not Login' })
       return
@@ -124,18 +137,17 @@ module.exports = {
       response.success = token.deadline > new Date().getTime()
     }
     if (response.success) {
-      const userItem = adminUsers.filter(_ => _.id === token.id)
-      if (userItem.length > 0) {
-        user.permissions = userItem[0].permissions
-        user.username = userItem[0].username
-        user.id = userItem[0].id
+      const userItem = adminUsers.find(_ => _.id === token.id)
+      if (userItem) {
+        const { password, ...other } = userItem
+        user = other
       }
     }
     response.user = user
     res.json(response)
   },
 
-  [`GET ${ApiPrefix}/users`] (req, res) {
+  [`GET ${ApiPrefix}/users`](req, res) {
     const { query } = req
     let { pageSize, page, ...other } = query
     pageSize = pageSize || 10
@@ -144,7 +156,7 @@ module.exports = {
     let newData = database
     for (let key in other) {
       if ({}.hasOwnProperty.call(other, key)) {
-        newData = newData.filter((item) => {
+        newData = newData.filter(item => {
           if ({}.hasOwnProperty.call(item, key)) {
             if (key === 'address') {
               return other[key].every(iitem => item[key].indexOf(iitem) > -1)
@@ -158,7 +170,11 @@ module.exports = {
               }
               return true
             }
-            return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1
+            return (
+              String(item[key])
+                .trim()
+                .indexOf(decodeURI(other[key]).trim()) > -1
+            )
           }
           return true
         })
@@ -171,25 +187,32 @@ module.exports = {
     })
   },
 
-  [`POST ${ApiPrefix}/users/delete`] (req, res) {
+  [`POST ${ApiPrefix}/users/delete`](req, res) {
     const { ids } = req.body
     database = database.filter(item => !ids.some(_ => _ === item.id))
     res.status(204).end()
   },
 
-
-  [`POST ${ApiPrefix}/user`] (req, res) {
+  [`POST ${ApiPrefix}/user`](req, res) {
     const newData = req.body
     newData.createTime = Mock.mock('@now')
-    newData.avatar = newData.avatar || Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', newData.nickName.substr(0, 1))
+    newData.avatar =
+      newData.avatar ||
+      Mock.Random.image(
+        '100x100',
+        Mock.Random.color(),
+        '#757575',
+        'png',
+        newData.nickName.substr(0, 1)
+      )
     newData.id = Mock.mock('@id')
 
     database.unshift(newData)
 
     res.status(200).end()
   },
 
-  [`GET ${ApiPrefix}/user/:id`] (req, res) {
+  [`GET ${ApiPrefix}/user/:id`](req, res) {
     const { id } = req.params
     const data = queryArray(database, id, 'id')
     if (data) {
@@ -199,7 +222,7 @@ module.exports = {
     }
   },
 
-  [`DELETE ${ApiPrefix}/user/:id`] (req, res) {
+  [`DELETE ${ApiPrefix}/user/:id`](req, res) {
     const { id } = req.params
     const data = queryArray(database, id, 'id')
     if (data) {
@@ -210,12 +233,12 @@ module.exports = {
     }
   },
 
-  [`PATCH ${ApiPrefix}/user/:id`] (req, res) {
+  [`PATCH ${ApiPrefix}/user/:id`](req, res) {
     const { id } = req.params
     const editItem = req.body
     let isExist = false
 
-    database = database.map((item) => {
+    database = database.map(item => {
       if (item.id === id) {
         isExist = true
         return Object.assign({}, item, editItem)

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "react-draft-wysiwyg": "^1.12.13",
     "react-helmet": "^5.2.0",
     "react-highcharts": "^16.0.2",
+    "react-perfect-scrollbar": "^1.2.2",
     "recharts": "^1.3.0",
     "store": "^2.0.12"
   },

diff --git a/src/components/Layout/Header.js b/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>
               }
             >

diff --git a/src/components/Layout/Header.less b/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;

diff --git a/src/components/Layout/Sider.js b/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}>