整体链接
Change-Id: Id3379c6188613acdc95548964f19e317eda8dc4f
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index 24028ad..1fa812a 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -5,8 +5,9 @@
import request from "@/utils/request";
import { getUserInfo } from "@/api/user";
import { useAppDispatch } from "@/hooks/store";
-
+import type { MenuProps } from 'antd';
import { useNavigate } from "react-router";
+import { Dropdown } from "antd";
interface SelfStatusProps {
@@ -32,29 +33,37 @@
dispatch({ type: "user/getUserInfo", payload: data.userInfo });
}
}
+
+ const logOut = () =>{
+ dispatch({type:"user/logout"})
+ nav('/')
+ }
+
+ const menu: MenuProps['items'] =[
+ {
+ key:'1',
+ label:(<span onClick={logOut}>登出</span>)
+ }
+]
useEffect(() => {
fenchData();
}, [ dispatch]);
- function handleAvatarClick(){
- nav('/homepage')
- }
-
return (
<div className={style.container}>
- <div className={style.left}>
+ <div className={style.left}
+
+ >
{avatar && avatar.length > 0 ? (
- <img className={style.avatar} src={avatar} alt="User Avatar" />):null}
+ <img className={style.avatar} onClick={() => nav('/homepage')} style={{ cursor: 'pointer'}} src={avatar} alt="User Avatar" />):null}
</div>
<div className={style.right}>
<div className={style.info}>
- <p className={style.userName}>{userName}</p>
- <p
- className={style.role}
- onClick={() => nav('/homepage')}
- style={{ cursor: 'pointer', textDecoration: 'underline' }}>
- 用户组: {role && role.trim().length? role:'N/A'}</p>
+ <Dropdown menu={{ items: menu }}>
+ <p className={style.userName}>{userName}</p>
+ </Dropdown>
+ <p className={style.role}>用户组: {role && role.trim().length? role:'N/A'}</p>
<p className={style.uploadTraffic}>上传量: {uploadTraffic ? uploadTraffic : 0}</p>
<p className={style.downloadTraffic}>下载量: {downloadTraffic ? downloadTraffic : 0}</p>