92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import React from "react";
|
|
import { Layout, Switch, Button, Dropdown } from "antd";
|
|
import { UserOutlined, LogoutOutlined } from "@ant-design/icons";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { MenuTrigger } from "../Layout/MenuTrigger";
|
|
const { Header: AntHeader } = Layout;
|
|
import { LuSun } from "react-icons/lu";
|
|
import { GoMoon } from "react-icons/go";
|
|
|
|
const Header = ({ collapsed, setCollapsed }) => {
|
|
const { isDarkMode, toggleTheme } = useTheme();
|
|
const { user, logout } = useAuth();
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
} catch (error) {
|
|
console.error("Logout error:", error);
|
|
}
|
|
};
|
|
|
|
const userMenuItems = [
|
|
// {
|
|
// key: "profile",
|
|
// icon: <UserOutlined />,
|
|
// label: "个人信息",
|
|
// },
|
|
{
|
|
key: "logout",
|
|
icon: <LogoutOutlined />,
|
|
label: "退出登录",
|
|
onClick: handleLogout,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<AntHeader
|
|
style={{
|
|
padding: 0,
|
|
background: isDarkMode ? "#141414" : "#fff",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div className="flex items-center">
|
|
<MenuTrigger
|
|
collapsed={collapsed}
|
|
setCollapsed={setCollapsed}
|
|
isDarkMode={isDarkMode}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 mr-10 h-full select-none">
|
|
<div className="flex items-center justify-center cursor-pointer h-full" onClick={toggleTheme}>
|
|
{isDarkMode ? (
|
|
<GoMoon className="text-2xl" />
|
|
) : (
|
|
<LuSun className="text-2xl" />
|
|
)}
|
|
</div>
|
|
|
|
<Dropdown
|
|
menu={{ items: userMenuItems }}
|
|
placement="bottomRight"
|
|
trigger={["click"]}
|
|
>
|
|
<div className="flex gap-2 items-center justify-center cursor-pointer h-full">
|
|
{user?.user_metadata?.picture ? (
|
|
<img
|
|
src={user?.user_metadata?.picture}
|
|
alt="picture"
|
|
className="w-8 h-8 rounded-full"
|
|
/>
|
|
) : (
|
|
<div className="text-2xl bg-gray-400 dark:bg-gray-600 rounded-full flex justify-center items-center w-8 h-8 text-white pb-1">
|
|
{user?.email.slice(0, 1)}
|
|
</div>
|
|
)}
|
|
|
|
<p className="max-w-20 truncate">
|
|
{user?.user_metadata?.name || user?.email?.split("@")[0]}
|
|
</p>
|
|
</div>
|
|
</Dropdown>
|
|
</div>
|
|
</AntHeader>
|
|
);
|
|
};
|
|
|
|
export default Header;
|