From a24a4bc4a95d24c3174ec11aabd6cbe457608595 Mon Sep 17 00:00:00 2001
From: zhuyue <zhu.yue@99cloud.net>
Date: Thu, 2 Sep 2021 14:23:06 +0800
Subject: [PATCH] feat: Add user-center page

add user-center page

Change-Id: Ic973390c74ede418426e101fc71a01a67e3bee42
---
 src/api/keystone/user.js                      |  4 +-
 src/asset/image/profile.svg                   | 17 ++++
 .../Layout/GlobalHeader/AvatarDropdown.jsx    |  4 +
 .../Layout/GlobalHeader/RightContent.jsx      | 10 ++-
 src/layouts/Base/index.jsx                    | 17 +++-
 src/layouts/user-menu.jsx                     | 36 ++++++++
 src/pages/basic/routes/index.js               |  7 ++
 src/pages/user-center/App.jsx                 | 21 +++++
 .../containers/UserCenter/index.jsx           | 87 +++++++++++++++++++
 .../containers/UserCenter/styles.less         | 46 ++++++++++
 src/pages/user-center/routes/index.js         | 34 ++++++++
 src/utils/index.js                            |  3 +
 12 files changed, 277 insertions(+), 9 deletions(-)
 create mode 100644 src/asset/image/profile.svg
 create mode 100644 src/layouts/user-menu.jsx
 create mode 100644 src/pages/user-center/App.jsx
 create mode 100644 src/pages/user-center/containers/UserCenter/index.jsx
 create mode 100644 src/pages/user-center/containers/UserCenter/styles.less
 create mode 100644 src/pages/user-center/routes/index.js

diff --git a/src/api/keystone/user.js b/src/api/keystone/user.js
index 570130b5..54983ffc 100644
--- a/src/api/keystone/user.js
+++ b/src/api/keystone/user.js
@@ -55,7 +55,7 @@ export const fetchUserDetails = (userId) =>
  * @param {String} data.user.email The email for the user.
  * @param {String} data.user.password The password for the user.
  * @param {String} data.user.phone The phone for the user.
- * @param {String} data.user.real_name The true name for the user.
+ * @param {String} data.user.real_name The real name for the user.
  * @param {Boolean} data.user.enabled Default value : true
  * @param {String} data.user.description The description for the user.
  * @returns {Promise}
@@ -75,7 +75,7 @@ export const createUser = (data) =>
  * @param {String} data.user.name The name for the user.
  * @param {String} data.user.email The email for the user.
  * @param {String} data.user.phone The phone for the user.
- * @param {String} data.user.real_name The true name for the user.
+ * @param {String} data.user.real_name The real name for the user.
  * @param {String} data.user.description The description for the user.
  * @returns {Promise}
  */
diff --git a/src/asset/image/profile.svg b/src/asset/image/profile.svg
new file mode 100644
index 00000000..004980da
--- /dev/null
+++ b/src/asset/image/profile.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="138px" height="138px" viewBox="0 0 138 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>profile</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-308.000000, -123.000000)" fill-rule="nonzero">
+            <g transform="translate(308.000000, 123.000000)">
+                <path d="M69.0005616,0 C30.895271,0 0,30.977238 0,69.1836242 C0,92.7160781 11.7230202,113.502131 29.6301484,126 C33.1335216,113.76675 42.0095949,104.563661 54.082447,100.389447 C54.4651746,100.257724 54.8496696,100.131221 55.2358255,100.009973 C55.4200067,99.9519826 55.6019417,99.8923027 55.7872461,99.836564 C56.3590854,99.6642588 56.9343989,99.5037647 57.5128215,99.3551837 L57.5470748,99.3473015 C58.1243629,99.2013486 58.7045403,99.0671351 59.2872501,98.9447438 C59.4736773,98.9053325 59.6617892,98.8698624 59.8487781,98.8327033 C60.4825402,98.7061067 61.1188928,98.592915 61.7574119,98.4932035 C62.1915301,98.4260671 62.6265703,98.3650675 63.0624029,98.3102228 C63.2544455,98.286013 63.445365,98.2589882 63.6385306,98.2370305 C64.2680436,98.1634845 64.8989511,98.1024789 65.53088,98.0540497 L68.0296797,98.0540497 C68.2846134,98.0692511 68.5389855,98.0692511 68.7939193,98.0540497 L69.0005616,98.0540497 C51.0586186,98.0540497 36.5139202,83.4707633 36.5139202,65.4812193 C36.5139202,65.3100619 36.5240278,65.1411566 36.5268354,64.9711252 C36.3499541,44.3787501 55.6008187,31.9726535 69.0325687,32.8920615 C82.8169582,31.9506958 102.729303,44.973297 101.56694,66.4546771 C101.532687,66.4760718 101.495626,66.4923994 101.461373,66.5132309 C100.916129,84.0242097 86.5966033,98.0540497 69,98.0540497 L72.5016887,98.0540497 C73.1384615,98.1019061 73.7679345,98.1649641 74.3934765,98.2370305 C74.5872037,98.2589882 74.7786847,98.2860131 74.9707274,98.3102228 C75.6196609,98.3927923 76.2668609,98.4885249 76.9119296,98.5973619 C77.3370063,98.6694281 77.7581523,98.7482506 78.1770523,98.8315772 C78.3674104,98.8692994 78.5594529,98.9053325 78.7481262,98.9453068 C79.3162898,99.0649175 79.8820457,99.1957507 80.4450639,99.3377303 C80.4826863,99.3473016 80.5214317,99.3563098 80.559054,99.3664442 C81.1204896,99.5108569 81.6789501,99.6666571 82.2340921,99.8337489 C82.4323115,99.8928658 82.6266003,99.9570498 82.8225735,100.018419 C83.1937436,100.135526 83.5626674,100.256012 83.9287836,100.382128 C96.0061279,104.551275 104.887255,113.750422 108.396805,125.98142 C126.28821,113.4813 138,92.7048178 138,69.1836242 C138,30.976675 107.106414,0 69.0005616,0 L69.0005616,0 Z" fill="#A6D4AE"></path>
+                <path d="M102,66.2979831 C92.4666142,72.1607624 72.8305595,62.0016298 69.5446772,48 C66.2632908,62.0519954 46.5260801,72.2388573 37.0477682,66.238563 C37.0250277,65.7418363 37.0134105,65.2446565 37.0129255,64.7474025 C37.0101156,64.9188718 37,65.0886434 37,65.2601127 C37,83.34192 51.5563404,98 69.5126445,98 C87.1233324,98.0005659 101.45432,83.8987708 102,66.2979831 L102,66.2979831 Z" fill="#FCE9EA"></path>
+                <path d="M84.460406,100.138167 C84.5843064,100.180818 84.7070804,100.225153 84.8298544,100.268365 C84.4625059,101.307192 83.9892084,102.305738 83.4173903,103.24833 C85.7484067,106.793423 85.1655119,122.317302 81.6675791,119.865424 L75.5694284,115.601998 L69.4870468,111.338571 L69.8863439,111.057972 C69.7534326,111.061339 69.6210845,111.068073 69.4870468,111.068073 C69.3473773,111.068073 69.2099605,111.060778 69.0714173,111.057411 L69.4707144,111.338571 L63.3883329,115.601998 L57.2901821,119.865424 C53.8012605,122.320108 53.2121704,106.758628 55.5493819,103.235984 C54.9825162,102.299878 54.5126567,101.308753 54.1470551,100.277906 C54.272645,100.23301 54.398235,100.188114 54.5243879,100.144901 C42.415943,104.305629 33.5137017,113.479544 30,125.672709 C41.1994668,133.441383 54.8082324,138 69.4864836,138 C84.1765617,138 97.7960278,133.434087 109,125.654189 C105.48123,113.46327 96.5733564,104.293844 84.460406,100.138167 Z M63.5313814,98.0729558 C63.7239902,98.0488242 63.9154726,98.0218867 64.1092077,98 C63.9154726,98.0218867 63.7245533,98.0488243 63.5313814,98.0729558 Z M59.7450989,98.7054267 C59.9320757,98.6661428 60.1207422,98.6307873 60.3082823,98.5937482 C60.1207422,98.6307873 59.9320757,98.6661428 59.7450989,98.7054267 Z M57.965439,99.1139794 L57.9997932,99.1061226 C57.9885296,99.1094898 57.9767028,99.1117346 57.965439,99.1139794 Z M78.6917177,98.5926257 C78.8826369,98.6302261 79.0752457,98.6661428 79.2644753,98.7059879 C79.0752457,98.6661428 78.8826369,98.6302261 78.6917177,98.5926257 Z M82.7612815,99.5915595 C82.9600853,99.6504854 83.1549468,99.7144621 83.3514978,99.7756327 C83.1549468,99.7144621 82.9595221,99.6504854 82.7612815,99.5915595 Z M80.9664158,99.0971435 C81.0041492,99.1066839 81.0430088,99.115663 81.080742,99.1257646 C81.0430087,99.115663 81.0047123,99.1066839 80.9664158,99.0971435 Z M55.68173,99.7672147 C55.8664542,99.7094112 56.0489256,99.6499241 56.2347763,99.5943655 C56.0494889,99.6499243 55.8664543,99.7094112 55.68173,99.7672147 Z M74.8969874,98 C75.0912857,98.0218867 75.2833312,98.0488243 75.4759399,98.0729558 C75.2833312,98.0488242 75.0912856,98.0218867 74.8969874,98 Z" fill="#F08E83"></path>
+                <path d="M55.4163071,103.315729 C55.885754,102.628621 56.4712824,102.405641 57.1751684,102.884635 L63.3365884,107.067296 L69.0780667,110.989539 C69.2180473,110.992843 69.3568897,111 69.4980084,111 C69.6334368,111 69.767158,110.993393 69.9014483,110.99009 L75.6434956,107.067296 L81.8049156,102.884635 C82.5122157,102.402888 83.1011582,102.630823 83.5728814,103.327842 C84.1507381,102.40316 84.6289514,101.42352 85,100.404328 C84.8753831,100.361935 84.7513354,100.31844 84.6267185,100.276597 C84.2546982,100.153254 83.8810046,100.034688 83.5057362,99.9209301 C83.3071459,99.8609183 83.1102627,99.7981536 82.9093963,99.7403439 C82.3468198,99.577018 81.7809032,99.4246635 81.21199,99.2833729 C81.1738652,99.2734627 81.1346023,99.2646537 81.0964776,99.255294 C80.525926,99.1165143 79.9526163,98.9885745 79.3768792,98.8715483 C79.1856863,98.8324581 78.9910792,98.7972218 78.7981791,98.7603337 C77.7217712,98.5529072 76.638029,98.3828563 75.5490372,98.2505082 C75.3538611,98.2268338 75.159823,98.2004066 74.964078,98.1789345 C74.3263456,98.1070411 73.6872032,98.0473846 73.0470273,98 L69.2891757,98 C69.0308376,98.0148653 68.7730686,98.0148653 68.5147305,98 L65.9825621,98 C65.3421992,98.047411 64.7028677,98.1070675 64.0649424,98.1789345 C63.8691973,98.2004066 63.6757282,98.2268339 63.4811211,98.2505082 C63.0378494,98.3050145 62.5962848,98.3639252 62.1587034,98.4294426 C61.5116905,98.5271403 60.8668443,98.6378282 60.2245819,98.7614349 C60.035096,98.7977723 59.8439031,98.8324581 59.6555553,98.8709978 C59.0650641,98.9906827 58.477139,99.1219282 57.8921419,99.2646535 L57.8574313,99.2723615 C57.271426,99.4181692 56.6884405,99.5751113 56.1088126,99.7430968 C55.9210338,99.797603 55.7361001,99.8559631 55.5500285,99.9126715 C55.1586333,100.030989 54.7690002,100.154696 54.3812478,100.283754 C54.2537859,100.326148 54.1268929,100.370193 54,100.414238 C54.3690737,101.425416 54.8436246,102.397596 55.4163071,103.315729 L55.4163071,103.315729 Z" fill="#FEFEFE"></path>
+                <path d="M81.817452,102.266555 L75.6532449,106.629068 L69.9086002,110.720539 L69.5049779,111.007659 L75.6532449,115.370172 L81.817452,119.732685 C85.3538441,122.241546 85.9424838,106.356877 83.5862174,102.729394 C83.1148503,102.00183 82.5256413,101.764094 81.817452,102.266555 Z M57.1765638,102.266555 C56.4729288,101.766965 55.8865663,101.999533 55.4169069,102.716186 C53.0543784,106.320126 53.6498494,122.243843 57.1765638,119.732111 L63.3407708,115.369598 L69.4890378,111.007085 L69.0854155,110.71939 L63.3413401,106.628494 L57.1765638,102.266555 Z" fill="#CFE07D"></path>
+                <path d="M69,48.3080856 L69,33.0473089 C55.3645209,32.137191 35.8216643,44.4173734 36.0012286,64.802231 C36.0052189,65.288779 36.0097792,65.7753271 36.0365714,66.2707924 C45.6509523,72.1790349 65.6715066,62.1471167 69,48.3080856 L69,48.3080856 Z" fill="#ADBE20"></path>
+                <path d="M69,48.3099473 C72.3252169,62.1010379 92.1963315,72.10741 101.84384,66.3327879 C101.878531,66.3121643 101.916065,66.2959999 101.950756,66.2748188 C103.127406,45.0079338 82.9605655,32.1153655 69.0005687,33.0473314 L69.0005687,48.3099473 L69,48.3099473 Z" fill="#7EA701"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
index dfb42d6b..39b3a13d 100644
--- a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
+++ b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx
@@ -152,6 +152,10 @@ class AvatarDropdown extends React.Component {
             shape="circle"
             icon={<UserOutlined />}
             className={styles.avatar}
+            onClick={() => {
+              const { rootStore } = this.props;
+              rootStore.routing.push('/user/center');
+            }}
           />
           {/* <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" /> */}
           {/* <span className={styles.name}>{currentUser.name}</span> */}
diff --git a/src/components/Layout/GlobalHeader/RightContent.jsx b/src/components/Layout/GlobalHeader/RightContent.jsx
index e7ebc321..3b3e63f2 100644
--- a/src/components/Layout/GlobalHeader/RightContent.jsx
+++ b/src/components/Layout/GlobalHeader/RightContent.jsx
@@ -14,6 +14,7 @@
 
 import React from 'react';
 import { Button, Col, Row } from 'antd';
+import { isUserCenterPage } from 'utils';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
@@ -29,10 +30,13 @@ const gotoConsole = (type, props) => {
 };
 
 const GlobalHeaderRight = (props) => {
-  const { isAdminPage = false, rootStore: { hasAdminPageRole = false } = {} } =
-    props;
+  const {
+    isAdminPage = false,
+    rootStore: { hasAdminPageRole = false } = {},
+    location: { pathname },
+  } = props;
   let linkRender = null;
-  if (isAdminPage) {
+  if (isAdminPage || isUserCenterPage(pathname)) {
     linkRender = (
       <Button
         type="link"
diff --git a/src/layouts/Base/index.jsx b/src/layouts/Base/index.jsx
index b3823dd2..c70dd4bc 100644
--- a/src/layouts/Base/index.jsx
+++ b/src/layouts/Base/index.jsx
@@ -16,13 +16,14 @@ import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 import i18n from 'core/i18n';
-import { isAdminPage } from 'utils/index';
+import { isAdminPage, isUserCenterPage } from 'utils/index';
 import { BellOutlined } from '@ant-design/icons';
 import checkItemPolicy from 'resources/policy';
 import { Layout } from 'antd';
 import GlobalHeader from 'components/Layout/GlobalHeader';
 import renderAdminMenu from '../admin-menu';
 import renderMenu from '../menu';
+import renderUserMenu from '../user-menu';
 import RightContext from './Right';
 import LayoutMenu from './Menu';
 import styles from './index.less';
@@ -66,10 +67,18 @@ class BaseLayout extends Component {
   }
 
   get originMenu() {
-    if (this.isAdminPage) {
-      return renderAdminMenu(i18n.t);
+    const {
+      location: { pathname },
+    } = this.props;
+    let ret = [];
+    if (isUserCenterPage(pathname)) {
+      ret = renderUserMenu(i18n.t);
+    } else if (this.isAdminPage) {
+      ret = renderAdminMenu(i18n.t);
+    } else {
+      ret = renderMenu(i18n.t);
     }
-    return renderMenu(i18n.t);
+    return ret;
   }
 
   get menu() {
diff --git a/src/layouts/user-menu.jsx b/src/layouts/user-menu.jsx
new file mode 100644
index 00000000..a3b9d9c9
--- /dev/null
+++ b/src/layouts/user-menu.jsx
@@ -0,0 +1,36 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { HomeOutlined } from '@ant-design/icons';
+
+const renderMenu = (t) => {
+  if (!t) {
+    return [];
+  }
+  const menu = [
+    {
+      path: '/user/center',
+      name: t('User Center'),
+      key: '/user',
+      icon: <HomeOutlined />,
+      level: 0,
+      hasBreadcrumb: false,
+      hasChildren: false,
+    },
+  ];
+  return menu;
+};
+
+export default renderMenu;
diff --git a/src/pages/basic/routes/index.js b/src/pages/basic/routes/index.js
index 62f94937..798015a4 100644
--- a/src/pages/basic/routes/index.js
+++ b/src/pages/basic/routes/index.js
@@ -38,6 +38,9 @@ const Management = lazy(() =>
 const Heat = lazy(() =>
   import(/* webpackChunkName: "heat" */ '@/pages/heat/App')
 );
+const UserCenter = lazy(() =>
+  import(/* webpackChunkName: "user-center" */ '@/pages/user-center/App')
+);
 const E404 = lazy(() =>
   import(/* webpackChunkName: "E404" */ '@/pages/base/containers/404')
 );
@@ -74,6 +77,10 @@ export default [
         path: `/heat`,
         component: Heat,
       },
+      {
+        path: `/user`,
+        component: UserCenter,
+      },
       { path: '*', component: E404 },
     ],
   },
diff --git a/src/pages/user-center/App.jsx b/src/pages/user-center/App.jsx
new file mode 100644
index 00000000..014bcad1
--- /dev/null
+++ b/src/pages/user-center/App.jsx
@@ -0,0 +1,21 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import renderRoutes from 'utils/RouterConfig';
+
+import routes from './routes';
+
+const App = (props) => renderRoutes(routes, props);
+
+export default App;
diff --git a/src/pages/user-center/containers/UserCenter/index.jsx b/src/pages/user-center/containers/UserCenter/index.jsx
new file mode 100644
index 00000000..4c855c9e
--- /dev/null
+++ b/src/pages/user-center/containers/UserCenter/index.jsx
@@ -0,0 +1,87 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Row, Layout, Col, Avatar } from 'antd';
+import globalUserStore from 'stores/keystone/user';
+import ProfileIcon from 'asset/image/profile.svg';
+import styles from './styles.less';
+
+class Index extends Component {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  async fetchData() {
+    const {
+      user: { user },
+    } = this.props.rootStore;
+    globalUserStore.pureFetchDetail({ id: user.id, silent: false });
+  }
+
+  renderInfoItem(item) {
+    return (
+      <Row className={styles.user_info_detail_item}>
+        <Col span={6}>{t(item.label)}</Col>
+        <Col span={18}>{item.value}</Col>
+      </Row>
+    );
+  }
+
+  renderUserInfo() {
+    const { detail = {} } = globalUserStore;
+    const data = {
+      [t('Username')]: detail.name || '-',
+      [t('Email')]: detail.email || '-',
+      [t('Phone')]: detail.phone || '-',
+      [t('Real Name')]: detail.real_name || '-',
+      [t('User ID')]: detail.id,
+    };
+    return (
+      <>
+        <Col span={3} className={styles.user_info_avatar}>
+          <Avatar
+            size={{ xs: 33, sm: 44, md: 55, lg: 88, xl: 110, xxl: 138 }}
+            src={ProfileIcon}
+          />
+        </Col>
+        <Col span={21}>
+          <Row className={styles.user_info_detail}>
+            {Object.keys(data).map((item) => {
+              return (
+                <Col span={12} key={`user_info_detail_${item}`}>
+                  {this.renderInfoItem({
+                    label: item,
+                    value: data[item],
+                  })}
+                </Col>
+              );
+            })}
+          </Row>
+        </Col>
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <Layout.Content className={styles.content}>
+        <Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
+      </Layout.Content>
+    );
+  }
+}
+
+export default inject('rootStore')(observer(Index));
diff --git a/src/pages/user-center/containers/UserCenter/styles.less b/src/pages/user-center/containers/UserCenter/styles.less
new file mode 100644
index 00000000..9b32f5c1
--- /dev/null
+++ b/src/pages/user-center/containers/UserCenter/styles.less
@@ -0,0 +1,46 @@
+@import '~styles/variables';
+
+.content {
+  padding: 24px;
+  overflow: auto;
+  height: 100%;
+
+  .user_info_card {
+    .normalBgc();
+    height: 255px;
+
+    .user_info_avatar {
+      .hvc();
+    }
+
+    .user_info_detail {
+      text-align: left;
+      height: 100%;
+      padding: 24px;
+
+      .user_info_detail_item {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-left: 3rem;
+        font-weight: 400;
+        font-size: 16px;
+        color: @color-text-body;
+      }
+    }
+  }
+}
+
+.hvc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.normalBgc {
+  background-color: white;
+  box-shadow: @base-shadow;
+  padding: 24px;
+  border-radius: @border-radius;
+  margin-bottom: 16px;
+}
diff --git a/src/pages/user-center/routes/index.js b/src/pages/user-center/routes/index.js
new file mode 100644
index 00000000..aed6e55c
--- /dev/null
+++ b/src/pages/user-center/routes/index.js
@@ -0,0 +1,34 @@
+// Copyright 2021 99cloud
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import BaseLayout from '@/layouts/Basic';
+
+import E404 from 'pages/base/containers/404';
+import UserCenter from '../containers/UserCenter';
+
+const PATH = '/user';
+export default [
+  {
+    path: PATH,
+    component: BaseLayout,
+    routes: [
+      {
+        path: `${PATH}/center`,
+        component: UserCenter,
+        exact: true,
+      },
+      { path: '*', component: E404 },
+    ],
+  },
+];
diff --git a/src/utils/index.js b/src/utils/index.js
index ef5c8a33..0f7148e2 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -272,6 +272,9 @@ export const unescapeHtml = (message) => {
 
 export const isAdminPage = (url) => url && url.indexOf('admin') >= 0;
 
+export const isUserCenterPage = (url) =>
+  url && (url === '/user' || url.startsWith('/user/'));
+
 export const allSettled = (promises) => {
   if (!Promise.allSettled) {
     return Promise.all(