From a647053b4050ac6a6c2764144010e1ca413c2f7c Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Tue, 14 Sep 2021 10:56:45 +0800
Subject: [PATCH] feat: Add administrator link in header in user center page

1. Add administrator link in header in user center page
2. Refactor overview component in user center
3. Refactor HeaderRightContent component
4. Add isUserCenterPage prop in containers

Change-Id: I03357e70d4fbe860740c3663f35aef63457835bb
---
 .../Layout/GlobalHeader/AvatarDropdown.jsx    |  7 +-
 .../Layout/GlobalHeader/RightContent.jsx      | 98 ++++++++++---------
 src/layouts/Base/index.jsx                    | 16 ++-
 .../containers/UserCenter/index.jsx           | 11 ++-
 4 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
index 39b3a13d..8b597ad1 100644
--- a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
+++ b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
@@ -152,13 +152,8 @@ class AvatarDropdown extends React.Component {
             shape="circle"
             icon={<UserOutlined />}
             className={styles.avatar}
-            onClick={() => {
-              const { rootStore } = this.props;
-              rootStore.routing.push('/user/center');
-            }}
+            href="/user/center"
           />
-          {/* <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" /> */}
-          {/* <span className={styles.name}>{currentUser.name}</span> */}
         </div>
       </HeaderDropdown>
     );
diff --git a/src/components/Layout/GlobalHeader/RightContent.jsx b/src/components/Layout/GlobalHeader/RightContent.jsx
index 3b3e63f2..396acb59 100644
--- a/src/components/Layout/GlobalHeader/RightContent.jsx
+++ b/src/components/Layout/GlobalHeader/RightContent.jsx
@@ -12,42 +12,43 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { Button, Col, Row } from 'antd';
-import { isUserCenterPage } from 'utils';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
-// eslint-disable-next-line no-unused-vars
-const gotoConsole = (type, props) => {
-  const { rootStore } = props;
-  rootStore.clearData();
-  if (type === 0) {
-    rootStore.routing.push('/base/overview');
-  } else {
-    rootStore.routing.push('/base/overview-admin');
+export class GlobalHeaderRight extends PureComponent {
+  get isAdminPage() {
+    const { isAdminPage = false } = this.props;
+    return isAdminPage;
   }
-};
 
-const GlobalHeaderRight = (props) => {
-  const {
-    isAdminPage = false,
-    rootStore: { hasAdminPageRole = false } = {},
-    location: { pathname },
-  } = props;
-  let linkRender = null;
-  if (isAdminPage || isUserCenterPage(pathname)) {
-    linkRender = (
-      <Button
-        type="link"
-        href="/base/overview"
-        className={styles['single-link']}
-      >
-        {t('Console')}
-      </Button>
-    );
-  } else if (hasAdminPageRole) {
-    linkRender = (
+  get isUserCenterPage() {
+    const { isUserCenterPage = false } = this.props;
+    return isUserCenterPage;
+  }
+
+  renderConsole() {
+    if (this.isAdminPage || this.isUserCenterPage) {
+      return (
+        <Button
+          type="link"
+          href="/base/overview"
+          className={styles['single-link']}
+        >
+          {t('Console')}
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  renderAdministrator() {
+    const { rootStore: { hasAdminPageRole = false } = {} } = this.props;
+    if (!hasAdminPageRole || this.isAdminPage) {
+      return null;
+    }
+    return (
       <Button
         type="link"
         href="/base/overview-admin"
@@ -58,21 +59,26 @@ const GlobalHeaderRight = (props) => {
     );
   }
 
-  return (
-    <div className={styles.right}>
-      <Row
-        justify="space-between"
-        align="middle"
-        gutter={10}
-        // wrap={false}
-      >
-        <Col>{linkRender}</Col>
-        <Col>
-          <Avatar menu />
-        </Col>
-      </Row>
-    </div>
-  );
-};
+  renderExtra() {
+    return null;
+  }
+
+  render() {
+    return (
+      <div className={styles.right}>
+        <Row justify="space-between" align="middle" gutter={10}>
+          <Col>
+            {this.renderConsole()}
+            {this.renderAdministrator()}
+          </Col>
+          {this.renderExtra()}
+          <Col>
+            <Avatar menu />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
 
 export default GlobalHeaderRight;
diff --git a/src/layouts/Base/index.jsx b/src/layouts/Base/index.jsx
index 24c7ee24..8b7707de 100644
--- a/src/layouts/Base/index.jsx
+++ b/src/layouts/Base/index.jsx
@@ -44,6 +44,11 @@ export class BaseLayout extends Component {
     return isAdminPage(pathname);
   }
 
+  get isUserCenterPage() {
+    const { pathname } = this.props.location;
+    return isUserCenterPage(pathname);
+  }
+
   get rootStore() {
     return this.props.rootStore;
   }
@@ -65,11 +70,8 @@ export class BaseLayout extends Component {
   }
 
   get originMenu() {
-    const {
-      location: { pathname },
-    } = this.props;
     let ret = [];
-    if (isUserCenterPage(pathname)) {
+    if (this.isUserCenterPage) {
       ret = renderUserMenu(i18n.t);
     } else if (this.isAdminPage) {
       ret = renderAdminMenu(i18n.t);
@@ -223,7 +225,11 @@ export class BaseLayout extends Component {
   }
 
   renderHeader = () => (
-    <GlobalHeader {...this.props} isAdminPage={this.isAdminPage} />
+    <GlobalHeader
+      {...this.props}
+      isAdminPage={this.isAdminPage}
+      isUserCenterPage={this.isUserCenterPage}
+    />
   );
 
   render() {
diff --git a/src/pages/user-center/containers/UserCenter/index.jsx b/src/pages/user-center/containers/UserCenter/index.jsx
index 4c855c9e..660b354c 100644
--- a/src/pages/user-center/containers/UserCenter/index.jsx
+++ b/src/pages/user-center/containers/UserCenter/index.jsx
@@ -19,7 +19,7 @@ import globalUserStore from 'stores/keystone/user';
 import ProfileIcon from 'asset/image/profile.svg';
 import styles from './styles.less';
 
-class Index extends Component {
+export class Overview extends Component {
   componentDidMount() {
     this.fetchData();
   }
@@ -34,7 +34,7 @@ class Index extends Component {
   renderInfoItem(item) {
     return (
       <Row className={styles.user_info_detail_item}>
-        <Col span={6}>{t(item.label)}</Col>
+        <Col span={6}>{item.label}</Col>
         <Col span={18}>{item.value}</Col>
       </Row>
     );
@@ -75,13 +75,18 @@ class Index extends Component {
     );
   }
 
+  renderExtra() {
+    return null;
+  }
+
   render() {
     return (
       <Layout.Content className={styles.content}>
         <Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
+        {this.renderExtra()}
       </Layout.Content>
     );
   }
 }
 
-export default inject('rootStore')(observer(Index));
+export default inject('rootStore')(observer(Overview));