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,6 +99,7 @@ function Navbar({ show }: { show: boolean }) {
       </div>
       <ul className={styles.right}>
         {userInfo && (
+          <>
             <li>
               <Dropdown droplist={droplist} trigger="click" position="br" disabled={userLoading}>
                 <Avatar size={32} style={{ cursor: 'pointer' }}>
@@ -103,8 +109,10 @@ function Navbar({ show }: { show: boolean }) {
                     <img alt="avatar" src={userInfo.avatar} />
                   )}
                 </Avatar>
+                <span style={{ marginLeft: 8, cursor: 'pointer' }}>{userInfo.account}</span>
               </Dropdown>
             </li>
+          </>
         )}
       </ul>
     </div>