feat(navbar): 添加用户信息显示和菜单项

src/components/NavBar/index.tsx

@@ -8,7 +8,8 @@ import {
 import {
   IconSettings,
   IconPoweroff,
-  IconLoading
+  IconLoading,
+  IconUser
 } from '@arco-design/web-react/icon';
 import { useSelector, useDispatch } from 'react-redux';
 import { GlobalContext } from '@/context';
@@ -38,7 +39,7 @@ function Navbar({ show }: { show: boolean }) {
   }
 
   function onMenuItemClick(key) {
-    handleLogout();
+    if (key === 'logout') handleLogout();
   }
 
   useEffect(() => {
@@ -69,6 +70,10 @@ function Navbar({ show }: { show: boolean }) {
 
   const droplist = (
     <Menu onClickMenuItem={onMenuItemClick}>
+      <Menu.Item key="userInfo">
+        <IconUser className={styles['dropdown-icon']} />
+        {userInfo.account}
+      </Menu.Item>
       <Menu.Item key="logout">
         <IconPoweroff className={styles['dropdown-icon']} />
         {t['navbar.logout']}
@@ -94,17 +99,20 @@ function Navbar({ show }: { show: boolean }) {
       </div>
       <ul className={styles.right}>
         {userInfo && (
-          <li>
+          <>
-            <Dropdown droplist={droplist} trigger="click" position="br" disabled={userLoading}>
+            <li>
-              <Avatar size={32} style={{ cursor: 'pointer' }}>
+              <Dropdown droplist={droplist} trigger="click" position="br" disabled={userLoading}>
-                {userLoading ? (
+                <Avatar size={32} style={{ cursor: 'pointer' }}>
-                  <IconLoading />
+                  {userLoading ? (
-                ) : (
+                    <IconLoading />
-                  <img alt="avatar" src={userInfo.avatar} />
+                  ) : (
-                )}
+                    <img alt="avatar" src={userInfo.avatar} />
-              </Avatar>
+                  )}
-            </Dropdown>
+                </Avatar>
-          </li>
+                <span style={{ marginLeft: 8, cursor: 'pointer' }}>{userInfo.account}</span>
+              </Dropdown>
+            </li>
+          </>
         )}
       </ul>
     </div>