Xiaoxia AI
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
/**
|
|
* 顶部导航栏
|
|
*/
|
|
import React from 'react';
|
|
import { Layout, Button, Dropdown, Avatar, Space } from 'antd';
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
UserOutlined,
|
|
LogoutOutlined,
|
|
SettingOutlined,
|
|
} from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useUIStore } from '@/store/uiStore';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
import { useLogout } from '@/hooks/useAuth';
|
|
import type { MenuProps } from 'antd';
|
|
|
|
const { Header: AntHeader } = Layout;
|
|
|
|
const Header: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const sidebarCollapsed = useUIStore((state) => state.sidebarCollapsed);
|
|
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
|
const user = useAuthStore((state) => state.user);
|
|
const logoutMutation = useLogout();
|
|
|
|
const menuItems: MenuProps['items'] = [
|
|
{
|
|
key: 'profile',
|
|
icon: <UserOutlined />,
|
|
label: '个人设置',
|
|
onClick: () => navigate('/profile'),
|
|
},
|
|
{
|
|
key: 'settings',
|
|
icon: <SettingOutlined />,
|
|
label: '账号设置',
|
|
onClick: () => navigate('/profile/settings'),
|
|
},
|
|
{
|
|
type: 'divider',
|
|
},
|
|
{
|
|
key: 'logout',
|
|
icon: <LogoutOutlined />,
|
|
label: '退出登录',
|
|
onClick: () => logoutMutation.mutate(),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<AntHeader
|
|
style={{
|
|
padding: '0 24px',
|
|
background: '#fff',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
borderBottom: '1px solid #f0f0f0',
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
icon={sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
onClick={toggleSidebar}
|
|
style={{ fontSize: '16px', width: 64, height: 64 }}
|
|
/>
|
|
|
|
<Dropdown menu={{ items: menuItems }} placement="bottomRight">
|
|
<Space style={{ cursor: 'pointer' }}>
|
|
<Avatar icon={<UserOutlined />} />
|
|
<span>{user?.display_name || user?.username}</span>
|
|
</Space>
|
|
</Dropdown>
|
|
</AntHeader>
|
|
);
|
|
};
|
|
|
|
export default Header;
|