update 用户菜单重做

web-react/src/assets/style/lib/disabled.less

@@ -21,6 +21,29 @@
   box-shadow: @btn-primary-shadow;
   text-shadow: @btn-text-shadow;
 }
+.ant-btn-danger-disabled,
+.ant-btn-danger.disabled,
+.ant-btn-danger[disabled],
+.ant-btn-danger-disabled:hover,
+.ant-btn-danger.disabled:hover,
+.ant-btn-danger[disabled]:hover,
+.ant-btn-danger-disabled:focus,
+.ant-btn-danger.disabled:focus,
+.ant-btn-danger[disabled]:focus,
+.ant-btn-danger-disabled:active,
+.ant-btn-danger.disabled:active,
+.ant-btn-danger[disabled]:active,
+.ant-btn-danger-disabled.active,
+.ant-btn-danger.disabled.active,
+.ant-btn-danger[disabled].active {
+  opacity: .5;
+  color: @btn-danger-color;
+  border-color: @btn-danger-border;
+  background-color: @btn-danger-bg;
+  box-shadow: @btn-primary-shadow;
+  text-shadow: @btn-text-shadow;
+}
+.ant-radio-button-wrapper-disabled,
 .ant-radio-button-wrapper-disabled:first-child,
 .ant-radio-button-wrapper-disabled:hover {
   opacity: .5;

web-react/src/assets/style/lib/form.less

@@ -333,6 +333,9 @@
       margin-bottom: @padding-xs;
 
       border-left: @border-width-base @border-style-base @normal-color;
+      &.ant-radio-button-wrapper-checked {
+        border-left-color: @primary-color;
+      }
       &:not(:first-child) {
         &::before {
           content: none;

web-react/src/assets/style/main.less

@@ -163,49 +163,6 @@
         &--avatar {
           box-shadow: 0 0 0 2px @white;
         }
-        &--name {
-          font-weight: bolder;
-
-          position: absolute;
-          left: 32px + @padding-sm * 2;
-
-          transition: @animation-duration-slow;
-
-          opacity: 0;
-        }
-        &--dropdown {
-          width: 200px;
-
-          transition: @animation-duration-base;
-          transform: scaleY(0);
-          transform-origin: top;
-
-          opacity: 0;
-          .ant-dropdown-menu {
-            box-shadow: none;
-          }
-        }
-      }
-      &.open {
-        width: 200px;
-        .user-container-inner {
-          background-color: @white;
-          box-shadow: @box-shadow-base;
-        }
-        .user {
-          &--name {
-            opacity: 1;
-          }
-        }
-      }
-      &.drop {
-        .user {
-          &--dropdown {
-            transform: scaleY(1);
-
-            opacity: 1;
-          }
-        }
       }
     }
   }
@@ -652,3 +609,13 @@
     }
   }
 }
+.yo-user-popover {
+  width: 280px;
+  padding-top: 0;
+  .ant-popover-arrow {
+    display: none;
+  }
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}

web-react/src/components/ant-icon/index.jsx

@@ -2,20 +2,27 @@ import React, { Component } from 'react'
 import * as Icon from '@ant-design/icons'
 
 export default class AntIcon extends Component {
-
     render() {
         const type = (this.props.type || '').toUpperCase()
 
         if (type) {
-            if (type.indexOf('OUTLINED') >= 0 || type.indexOf('FILLED') >= 0 || type.indexOf('TWOTONE') >= 0) {
+            if (
+                type.indexOf('OUTLINED') >= 0 ||
+                type.indexOf('FILLED') >= 0 ||
+                type.indexOf('TWOTONE') >= 0
+            ) {
                 const I = Icon[this.props.type]
-                return <I {...this.props} />
+                return I ? <I {...this.props} /> : false
             } else {
-                const t = type.split('-').map(p => {
+                const t =
+                    type
+                        .split('-')
+                        .map(p => {
                             return p[0] + p.slice(1).toLowerCase()
-                }).join('') + 'Outlined'
+                        })
+                        .join('') + 'Outlined'
                 const I = Icon[t]
-                return <I {...this.props} />
+                return I ? <I {...this.props} /> : false
             }
         }
         return <></>

web-react/src/pages/business/house/info/form/base/building.jsx

@@ -79,7 +79,6 @@ export default class building extends Component {
             const { houseInfo } = this.record
             if (houseInfo.completedDate) {
                 houseInfo.completedDate = moment(houseInfo.completedDate)
-                debugger
                 dispatch({
                     type: 'PATROL_INIT_GRADE_BY_COMPLETED_DATE',
                     value: +houseInfo.completedDate.format('YYYY'),

web-react/src/pages/business/house/member/selector/index.jsx

@@ -45,7 +45,7 @@ export default class index extends Component {
         const { userId } = this.state
 
         return (
-            <Tabs>
+            <Tabs tabBarStyle={{ padding: '0 24px' }}>
                 <Tabs.TabPane key="1" tab="选房">
                     <SelectorList
                         userId={userId}

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">
+                    <Popover
+                        arrowPointAtCenter={true}
+                        overlayClassName="yo-user-popover"
+                        placement="bottomRight"
+                        content={this.renderMenu()}
+                    >
                         <div className="user--base">
                             <Image
                                 width="32"
                                 type="avatar"
                                 className="user--avatar"
                                 icon={<AntIcon type="user" />}
-                            id={this.state.user.avatar}
+                                id={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` }}
-                    >
-                        <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>
+                    </Popover>
                 </div>
             </div>
         )