管理后台初始化,登录,团队管理,报价单管理 完成
This commit is contained in:
80
src/components/Layout/Header.jsx
Normal file
80
src/components/Layout/Header.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
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 '../common/MenuTrigger';
|
||||
|
||||
const { Header: AntHeader } = Layout;
|
||||
|
||||
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-6">
|
||||
<Switch
|
||||
checked={isDarkMode}
|
||||
onChange={toggleTheme}
|
||||
checkedChildren="🌙"
|
||||
unCheckedChildren="☀️"
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
menu={{ items: userMenuItems }}
|
||||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<UserOutlined />}
|
||||
className="flex items-center"
|
||||
>
|
||||
{user?.email}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</AntHeader>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user