import
React from "
react";
import {
Layout,
Button,
theme,
Dropdown,
Space,
message,
Avatar,
} from "antd";
import
type { MenuProps } from "antd";
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
UserOutlined,
} from "@ant-design/icons";
import { useState } from "
react";
const { Header } = Layout;
const handleMenuClick: MenuProps["onClick"] = (e) => {
message.info("Click on menu item.");
console.log("click", e);
};
const items: MenuProps["items"] = [
{
label: "1st menu item",
key: "1",
icon: <UserOutlined />,
},
{
label: "2nd menu item",
key: "2",
icon: <UserOutlined />,
},
{
label: "退出",
key: "3",
icon: <UserOutlined />,
danger: true,
},
// {
// label: "4rd menu item",
// key: "4",
// icon: <UserOutlined />,
// danger: true,
// disabled: true,
// },
];
const menuProps = {
items,
onClick: handleMenuClick,
};
const TopHeader:
React.FC = () => {
const [collapsed, setCollapsed] = useState(false);
const {
token: { colorBgContainer },
} = theme.useToken();
return (
<Header style={{ padding: 0, background: colorBgContainer }}>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: "16px",
width: 64,
height: 64,
}}
/>
<div style={{ float: "right" }}>
<span>欢迎xxx回来</span>
<Dropdown menu={menuProps}>
<Space wrap>
<Avatar size={32} icon={<UserOutlined />} />
</Space>
</Dropdown>
</div>
</Header>
);
};
export default TopHeader;
报错：TaskQueue:
Error with task :
Element type is
invalid:
expected a
string (for
built-in components) or a
class/
function (for composite
components) but got: undefined.
1944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
