chat-admin-web/src/pages/layout/components/Header.tsx

import * as React from 'react';
import { Layout, MenuProps, Modal, Dropdown } from 'antd';
import { CaretDownOutlined, PoweroffOutlined } from '@ant-design/icons';
import logoSrc from '@/assets/public/logo.png';
import router from '@/router';

const { Header: AntdHeader } = Layout;

interface Props {
    userName: string,
    onClickLogout: () => Promise<any>,
};

const Header: React.FC<Props> = (props: Props) => {
    const {
        userName,
        onClickLogout
    } = props;

    const items: MenuProps['items'] = [
        {
            key: 'logout',
            label: (
                <a onClick={() => {
                    Modal.confirm({
                        title: '提示',
                        content: '确定退出平台吗？',
                        async onOk() {
                            await onClickLogout();
                        }
                    });
                }}>
                    <PoweroffOutlined style={{ marginRight: 5 }} />
                    退出登录
                </a>
            ),
        }
    ];

    return (
        <AntdHeader className='header'>
            <div className='header-logo' onClick={() => {
                router.navigate({ pathname: '/' });
            }}>
                <img className='header-logo-picture' src={logoSrc} />
                <div className='header-logo-text'>
                    建科•小智后台管理系统
                </div>
            </div>
            <Dropdown menu={{ items }}>
                <div className='header-operation'>
                    <div className='header-operation-picture'>
                        {userName.slice(0, 1)}
                    </div>
                    <div className='header-operation-name'>
                        {userName}
                    </div>
                    <CaretDownOutlined className='header-operation-down' />
                </div>
            </Dropdown>
        </AntdHeader>
    );
};

export default Header;