refactor(user): 重构用户登出功能

- 将 logout函数重命名为 logoutHooks，以更清晰地表示其用途
- 在 API 和组件中使用新的 logoutHooks 函数
- 移除了 Navbar 组件中的冗余代码和未使用的导入
- 优化了用户登出的逻辑，包括清除本地存储的用户状态

src/api/index.ts

@@ -40,8 +40,8 @@ axios.interceptors.response.use(
         duration: 5 * 1000
       });
       if ([-401].includes(res.code)) {
-        const { logout } = useUser();
-        logout();
+        const { logoutHooks } = useUser();
+        logoutHooks();
       }
       return Promise.reject(new Error(res.msg || 'Error'));
     }

src/components/NavBar/index.tsx

@@ -3,18 +3,11 @@ import {
   Avatar,
   Dropdown,
   Menu,
-  Divider,
-  Message,
   Button
 } from '@arco-design/web-react';
 import {
-  IconUser,
   IconSettings,
   IconPoweroff,
-  IconExperiment,
-  IconDashboard,
-  IconInteraction,
-  IconTag,
   IconLoading
 } from '@arco-design/web-react/icon';
 import { useSelector, useDispatch } from 'react-redux';
@@ -26,9 +19,11 @@ import styles from './style/index.module.less';
 import useStorage from '@/utils/useStorage';
 import { generatePermission } from '@/routes';
 import logoImage from '@/public/assets/logo.png';
+import useUser from '@/hooks/user';
 
 function Navbar({ show }: { show: boolean }) {
   const t = useLocale();
+  const { logoutHooks } = useUser();
   const { userInfo, userLoading } = useSelector((state: GlobalState) => state);
   const dispatch = useDispatch();
 
@@ -37,18 +32,13 @@ function Navbar({ show }: { show: boolean }) {
 
   const { setLang, lang, theme, setTheme } = useContext(GlobalContext);
 
-  function logout() {
+  function handleLogout() {
     setUserStatus('logout');
-    window.location.href = '/login';
+    logoutHooks()
   }
 
   function onMenuItemClick(key) {
-    if (key === 'logout') {
-      logout();
-    }
-    else {
-      Message.info(`You clicked ${key}`);
-    }
+    handleLogout();
   }
 
   useEffect(() => {
@@ -82,48 +72,6 @@ function Navbar({ show }: { show: boolean }) {
 
   const droplist = (
     <Menu onClickMenuItem={onMenuItemClick}>
-      <Menu.SubMenu
-        key="role"
-        title={
-          <>
-            <IconUser className={styles['dropdown-icon']} />
-            <span className={styles['user-role']}>
-              {role === 'admin'
-                ? t['menu.user.role.admin']
-                : t['menu.user.role.user']}
-            </span>
-          </>
-        }
-      >
-        <Menu.Item onClick={handleChangeRole} key="switch role">
-          <IconTag className={styles['dropdown-icon']} />
-          {t['menu.user.switchRoles']}
-        </Menu.Item>
-      </Menu.SubMenu>
-      <Menu.Item key="setting">
-        <IconSettings className={styles['dropdown-icon']} />
-        {t['menu.user.setting']}
-      </Menu.Item>
-      <Menu.SubMenu
-        key="more"
-        title={
-          <div style={{ width: 80 }}>
-            <IconExperiment className={styles['dropdown-icon']} />
-            {t['message.seeMore']}
-          </div>
-        }
-      >
-        <Menu.Item key="workplace">
-          <IconDashboard className={styles['dropdown-icon']} />
-          {t['menu.dashboard.workplace']}
-        </Menu.Item>
-        <Menu.Item key="card list">
-          <IconInteraction className={styles['dropdown-icon']} />
-          {t['menu.list.cardList']}
-        </Menu.Item>
-      </Menu.SubMenu>
-
-      <Divider style={{ margin: '4px 0' }} />
       <Menu.Item key="logout">
         <IconPoweroff className={styles['dropdown-icon']} />
         {t['navbar.logout']}
@@ -146,7 +94,7 @@ function Navbar({ show }: { show: boolean }) {
       <ul className={styles.right}>
         {userInfo && (
           <li>
-            <Dropdown droplist={droplist} position="br" disabled={userLoading}>
+            <Dropdown droplist={droplist} trigger="click" position="br" disabled={userLoading}>
               <Avatar size={32} style={{ cursor: 'pointer' }}>
                 {userLoading ? (
                   <IconLoading />

src/hooks/user.ts

@@ -1,33 +1,26 @@
 import { Message } from '@arco-design/web-react';
 import { useDispatch } from 'react-redux';
-import axios from 'axios';
+import { logout } from '@/api/user';
+import { clearToken } from '@/utils/auth';
 
 interface UseUserReturnType {
-  logout: () => Promise<void>;
+  logoutHooks: () => Promise<void>;
 }
 
 export default function useUser(): UseUserReturnType {
   const dispatch = useDispatch();
 
-  const logout = async () => {
+  const logoutHooks = async () => {
     try {
       // 调用后端登出接口
-      await axios.post('/api/user/logout');
+      await logout();
     } catch (error) {
       // 即使后端登出失败，也要清除本地状态
       console.error('Logout error:', error);
     } finally {
-      // 清除用户信息状态
-      dispatch({
-        type: 'update-userInfo',
-        payload: {
-          userInfo: { permissions: {} },
-          userLoading: false
-        }
-      });
-
       // 清除本地存储的用户状态
       localStorage.removeItem('userStatus');
+      clearToken()
 
       // 显示成功消息
       Message.success('退出成功');
@@ -39,6 +32,6 @@ export default function useUser(): UseUserReturnType {
   };
 
   return {
-    logout
+    logoutHooks
   };
 }