qiuchenfan
/
origin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-06 19:23:14 +08:00
parent a3f3f54639
commit 1684a8a3eb
1 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
apps/web/src/app/main/layout/UserMenu.tsx
View File

@ -1,49 +1,70 @@
import { Avatar, Menu, Dropdown } from 'antd'; import { Avatar, Menu, Dropdown } from "antd";
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons'; import {
import { useAuth } from '@web/src/providers/auth-provider'; LogoutOutlined,
import { useNavigate } from 'react-router-dom'; SettingOutlined,
UserAddOutlined,
UserSwitchOutlined,
} from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate } from "react-router-dom";
export const UserMenu = () => { export const UserMenu = () => {
const { isAuthenticated, logout, user } = useAuth(); const { isAuthenticated, logout, user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<Menu className="w-48"> <Menu className="w-48">
{isAuthenticated ? ( {isAuthenticated ? (
<> <>
<Menu.Item key="profile" className="px-4 py-2"> <Menu.Item key="profile" className="px-4 py-2">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<Avatar className="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold"> <Avatar className="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
{(user?.showname || user?.username || '')[0]?.toUpperCase()} {(user?.showname ||
</Avatar> user?.username ||
<div className="flex flex-col"> "")[0]?.toUpperCase()}
<span className="font-medium">{user?.showname || user?.username}</span> </Avatar>
<span className="text-xs text-gray-500">{user?.department?.name || user?.officerId}</span> <div className="flex flex-col">
</div> <span className="font-medium">
</div> {user?.showname || user?.username}
</Menu.Item> </span>
<Menu.Divider /> <span className="text-xs text-gray-500">
<Menu.Item key="settings" icon={<SettingOutlined />} className="px-4"> {user?.department?.name || user?.officerId}
个人设置 </span>
</Menu.Item> </div>
<Menu.Item </div>
key="logout" </Menu.Item>
icon={<LogoutOutlined />} <Menu.Divider />
onClick={async () => await logout()} <Menu.Item
className="px-4 text-red-500 hover:text-red-600 hover:bg-red-50" key="user-settings"
> icon={<UserSwitchOutlined />}
退出登录 className="px-4">
</Menu.Item> 个人设置
</> </Menu.Item>
) : ( <Menu.Item
<Menu.Item key="settings"
key="login" icon={<SettingOutlined />}
onClick={() => navigate("/login")} onClick={() => {
className="px-4 text-blue-500 hover:text-blue-600 hover:bg-blue-50" navigate("/admin/staff");
> }}
登录/注册 className="px-4">
</Menu.Item> 后台管理
)} </Menu.Item>
</Menu> <Menu.Item
); key="logout"
}; icon={<LogoutOutlined />}
onClick={async () => await logout()}
className="px-4 text-red-500 hover:text-red-600 hover:bg-red-50">
退出登录
</Menu.Item>
</>
) : (
<Menu.Item
key="login"
onClick={() => navigate("/login")}
className="px-4 text-blue-500 hover:text-blue-600 hover:bg-blue-50">
登录/注册
</Menu.Item>
)}
</Menu>
);
};