32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { Layout, Input, Avatar, Dropdown } from 'antd';
|
|
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
|
|
|
|
const { Header: AntHeader } = Layout;
|
|
|
|
function Header() {
|
|
const menuItems = [
|
|
{ key: 'settings', icon: <SettingOutlined />, label: '设置' },
|
|
{ key: 'logout', icon: <LogoutOutlined />, label: '退出登录' },
|
|
];
|
|
|
|
return (
|
|
<AntHeader style={{ background: '#1890ff', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<span style={{ color: 'white', fontSize: '18px', fontWeight: 'bold' }}>CloudDisk</span>
|
|
|
|
<Input
|
|
placeholder="搜索文件..."
|
|
style={{ width: '300px', marginLeft: '20px' }}
|
|
/>
|
|
|
|
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '16px' }}>
|
|
<Dropdown menu={{ items: menuItems }} placement="bottomRight">
|
|
<Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} />
|
|
</Dropdown>
|
|
</div>
|
|
</AntHeader>
|
|
);
|
|
}
|
|
|
|
export default Header;
|