From 621e1ec06118d107d9dc16a5e6137857f1ef619e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Wed, 23 Jun 2021 13:43:48 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E7=94=A8=E6=88=B7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E9=87=8D=E5=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-react/src/assets/style/lib/disabled.less  |  23 +++
 web-react/src/assets/style/lib/form.less      |   3 +
 web-react/src/assets/style/main.less          |  53 ++-----
 web-react/src/components/ant-icon/index.jsx   |  23 ++-
 .../house/info/form/base/building.jsx         |   1 -
 .../business/house/member/selector/index.jsx  |   2 +-
 .../src/views/main/_layout/header/user.jsx    | 140 +++++++++---------
 7 files changed, 120 insertions(+), 125 deletions(-)

diff --git a/web-react/src/assets/style/lib/disabled.less b/web-react/src/assets/style/lib/disabled.less
index 317f584..c975e17 100644
--- a/web-react/src/assets/style/lib/disabled.less
+++ b/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;
diff --git a/web-react/src/assets/style/lib/form.less b/web-react/src/assets/style/lib/form.less
index 7f8a7ee..771d844 100644
--- a/web-react/src/assets/style/lib/form.less
+++ b/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;
diff --git a/web-react/src/assets/style/main.less b/web-react/src/assets/style/main.less
index 04a6030..6d56bb5 100644
--- a/web-react/src/assets/style/main.less
+++ b/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;
+  }
+}
diff --git a/web-react/src/components/ant-icon/index.jsx b/web-react/src/components/ant-icon/index.jsx
index 62e0e47..c2d1e22 100644
--- a/web-react/src/components/ant-icon/index.jsx
+++ b/web-react/src/components/ant-icon/index.jsx
@@ -2,22 +2,29 @@ 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 => {
-                    return p[0] + p.slice(1).toLowerCase()
-                }).join('') + 'Outlined'
+                const t =
+                    type
+                        .split('-')
+                        .map(p => {
+                            return p[0] + p.slice(1).toLowerCase()
+                        })
+                        .join('') + 'Outlined'
                 const I = Icon[t]
-                return <I {...this.props} />
+                return I ? <I {...this.props} /> : false
             }
         }
         return <></>
     }
-}
\ No newline at end of file
+}
diff --git a/web-react/src/pages/business/house/info/form/base/building.jsx b/web-react/src/pages/business/house/info/form/base/building.jsx
index c3a66f1..511fec0 100644
--- a/web-react/src/pages/business/house/info/form/base/building.jsx
+++ b/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'),
diff --git a/web-react/src/pages/business/house/member/selector/index.jsx b/web-react/src/pages/business/house/member/selector/index.jsx
index de667fc..a9c08ed 100644
--- a/web-react/src/pages/business/house/member/selector/index.jsx
+++ b/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}
diff --git a/web-react/src/views/main/_layout/header/user.jsx b/web-react/src/views/main/_layout/header/user.jsx
index 94f9e1b..b126243 100644
--- a/web-react/src/views/main/_layout/header/user.jsx
+++ b/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>
         )