@ozo/react-jazz/src/layouts/BasicLayout/components/HeaderAvatar/index.jsx

React 桌面端开发脚手架，基于CRA3，通用、开箱即用。

import React from 'react';
import { Link } from 'react-router-dom';
import { Avatar, Overlay, Menu, Icon } from '@alifd/next';
import { setAuthority } from '@/utils';
import styles from './index.module.scss';

const { Item } = Menu;
const { Popup } = Overlay;

const UserProfile = ({ name, avatar, mail }) => (
    <div className={styles.profile}>
        <div className={styles.avatar}>
            <Avatar src={avatar} alt="用户头像" />
        </div>
        <div className={styles.content}>
            <h4>{name}</h4>
            <span>{mail}</span>
        </div>
    </div>
);

const HeaderAvatar = (props) => {
    const { name, avatar } = props;
    return (
        <Popup
            trigger={
                <div className={styles.headerAvatar}>
                    <Avatar size="small" src={avatar} alt="用户头像" />
                    <span
                        style={{
                            marginLeft: 10,
                        }}
                    >
                        {name}
                    </span>
                </div>
            }
            triggerType="click"
        >
            <div className={styles.avatarPopup}>
                <UserProfile {...props} />
                <Menu className={styles.menu}>
                    <Item>
                        <Icon size="small" type="account" />
                        个人设置
                    </Item>
                    <Item>
                        <Icon size="small" type="set" />
                        系统设置
                    </Item>
                    <Item>
                        <Link
                            to="/user/login"
                            onClick={() => {
                                setAuthority('');
                            }}
                        >
                            <Icon size="small" type="exit" />
                            退出
                        </Link>
                    </Item>
                </Menu>
            </div>
        </Popup>
    );
};

HeaderAvatar.defaultProps = {
    name: 'MyName',
    mail: 'name@gmail.com',
    avatar: 'https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png',
};
export default HeaderAvatar;