46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { Layout, Menu, Avatar, Button } from 'antd';
|
|
import { UserOutlined, SettingOutlined } from '@ant-design/icons';
|
|
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
|
|
import NavigationMenu from './NavigationMenu';
|
|
|
|
const { Sider, Content } = Layout;
|
|
|
|
export default function MainHeader() {
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
return (
|
|
<Layout className="h-screen">
|
|
{/* 左侧导航栏 */}
|
|
<Sider
|
|
width={280}
|
|
className=" flex flex-col"
|
|
>
|
|
{/* 用户头像区域 */}
|
|
<div className="p-6 border-b">
|
|
<div className="relative group flex justify-center">
|
|
<Avatar
|
|
size={120}
|
|
icon={<UserOutlined />}
|
|
className=" transition-all duration-300"
|
|
/>
|
|
<Button
|
|
type="text"
|
|
icon={<SettingOutlined />}
|
|
className="!absolute bottom-0 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
onClick={() => navigate('/profile')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<NavigationMenu></NavigationMenu>
|
|
</Sider>
|
|
{/* 新增可滚动内容区域 */}
|
|
<Layout className="flex-1">
|
|
<Content className="overflow-auto">
|
|
<Outlet />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
} |