update 用户菜单重做

web-react/src/views/main/_layout/header/user.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
-import { Modal, message as Message } from 'antd'
+import { Modal, message as Message, Dropdown, Button, Menu, Popover, Tag, Row, Col } from 'antd'
 import { isEqual } from 'lodash'
 import store from 'store'
 import { api } from 'common/api'
@@ -11,12 +11,8 @@ const { getState, dispatch, subscribe } = store
 
 const storePath = 'user'
 
-let userOpenTimer, userCloseTimer
-let initDropdownHeight
-
 class User extends Component {
     state = {
-        dropdownHeight: 0,
         user: getState(storePath),
     }
 
@@ -30,40 +26,14 @@ class User extends Component {
         })
     }
 
-    // shouldComponentUpdate(props, state) {
-    //     return !isEqual(this.state, state)
-    // }
-
-    componentDidMount() {
-        initDropdownHeight = this.refs.dropdown.scrollHeight
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
     }
 
     componentWillUnmount() {
         this.unsubscribe()
     }
 
-    onOpen = e => {
-        clearTimeout(userCloseTimer)
-        this.refs.container.classList.add('open')
-        userOpenTimer = setTimeout(() => {
-            this.refs.container.classList.add('drop')
-            this.setState({
-                dropdownHeight: initDropdownHeight,
-            })
-        }, 300)
-    }
-
-    onClose = e => {
-        clearTimeout(userOpenTimer)
-        this.refs.container.classList.remove('drop')
-        this.setState({
-            dropdownHeight: 0,
-        })
-        userCloseTimer = setTimeout(() => {
-            this.refs.container.classList.remove('open')
-        }, 300)
-    }
-
     onAccountSetting = () => {}
 
     onLogout = () => {
@@ -84,48 +54,74 @@ class User extends Component {
         })
     }
 
-    render() {
+    renderMenu() {
+        const { user } = this.state
+
         return (
-            <div
-                className="user-container"
-                onMouseEnter={e => {
-                    this.onOpen(e)
-                }}
-                onMouseLeave={e => {
-                    this.onClose(e)
-                }}
-                ref="container"
-            >
+            <>
+                <div className="p-md pb-xs">
+                    <Row align="bottom" justify="space-between">
+                        <Col>
+                            <b className="h5">{user.nickName || user.name}</b>
+                        </Col>
+                        <Col>
+                            <span className="text-gray">{user.account}</span>
+                        </Col>
+                    </Row>
+                    <p className="text-gray">上次登录时间：{user.lastLoginTime}</p>
+                    {user.adminType === 1 && (
+                        <Tag color="pink" className="mb-xs">
+                            超级管理员
+                        </Tag>
+                    )}
+                    {user.roles &&
+                        user.roles.map(role => (
+                            <Tag color="purple" className="mb-xs">
+                                {role.name}
+                            </Tag>
+                        ))}
+                </div>
+                <Menu selectable={false}>
+                    <Menu.Divider />
+                    <Menu.Item key="1">
+                        <AntIcon type="user" className="mr-sm" />
+                        个人中心
+                    </Menu.Item>
+                    <Menu.Item key="2">其他菜单</Menu.Item>
+                    <Menu.Item key="3">其他菜单</Menu.Item>
+                    <Menu.Item key="4">其他菜单</Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item key="-1" onClick={() => this.onLogout()}>
+                        <AntIcon type="logout" className="mr-sm" />
+                        退出登录
+                    </Menu.Item>
+                </Menu>
+            </>
+        )
+    }
+
+    render() {
+        const { user } = this.state
+
+        return (
+            <div className="user-container">
                 <div className="user-container-inner">
-                    <div className="user--base">
-                        <Image
-                            width="32"
-                            type="avatar"
-                            className="user--avatar"
-                            icon={<AntIcon type="user" />}
-                            id={this.state.user.avatar}
-                        />
-                        <span className="user--name">
-                            {this.state.user.nickName || this.state.user.name}
-                        </span>
-                    </div>
-                    <div
-                        className="user--dropdown"
-                        ref="dropdown"
-                        style={{ height: `${this.state.dropdownHeight}px` }}
+                    <Popover
+                        arrowPointAtCenter={true}
+                        overlayClassName="yo-user-popover"
+                        placement="bottomRight"
+                        content={this.renderMenu()}
                     >
-                        <ul className="ant-dropdown-menu ant-dropdown-menu-vertical">
-                            <li className="ant-dropdown-menu-item" onClick={this.onAccountSetting}>
-                                <AntIcon type="user" />
-                                个人中心
-                            </li>
-                            <li className="ant-dropdown-menu-item-divider"></li>
-                            <li className="ant-dropdown-menu-item" onClick={this.onLogout}>
-                                <AntIcon type="logout" />
-                                退出登录
-                            </li>
-                        </ul>
-                    </div>
+                        <div className="user--base">
+                            <Image
+                                width="32"
+                                type="avatar"
+                                className="user--avatar"
+                                icon={<AntIcon type="user" />}
+                                id={user.avatar}
+                            />
+                        </div>
+                    </Popover>
                 </div>
             </div>
         )