49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
|
import { Avatar, Menu, Dropdown } from 'antd';
|
||
|
|
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { useAuth } from '@web/src/providers/auth-provider';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
|
||
|
|
export const UserMenu = () => {
|
||
|
|
const { isAuthenticated, logout, user } = useAuth();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Menu className="w-48">
|
||
|
|
{isAuthenticated ? (
|
||
|
|
<>
|
||
|
|
<Menu.Item key="profile" className="px-4 py-2">
|
||
|
|
<div className="flex items-center space-x-3">
|
||
|
|
<Avatar className="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
|
||
|
|
{(user?.showname || user?.username || '')[0]?.toUpperCase()}
|
||
|
|
</Avatar>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">{user?.showname || user?.username}</span>
|
||
|
|
<span className="text-xs text-gray-500">{user?.department?.name || user?.officerId}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Menu.Item>
|
||
|
|
<Menu.Divider />
|
||
|
|
<Menu.Item key="settings" icon={<SettingOutlined />} className="px-4">
|
||
|
|
个人设置
|
||
|
|
</Menu.Item>
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
};
|