71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { Avatar, Menu, Dropdown } from "antd";
|
|
import {
|
|
LogoutOutlined,
|
|
SettingOutlined,
|
|
UserAddOutlined,
|
|
UserSwitchOutlined,
|
|
} 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="user-settings"
|
|
icon={<UserSwitchOutlined />}
|
|
className="px-4">
|
|
个人设置
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
key="settings"
|
|
icon={<SettingOutlined />}
|
|
onClick={() => {
|
|
navigate("/admin/staff");
|
|
}}
|
|
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>
|
|
);
|
|
};
|