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

View File

@ -1,49 +1,70 @@
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';
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();
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>
);
};
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>
);
};