text: import React, { PureComponent } from 'react';
  import { FormattedMessage } from 'umi-plugin-react/locale';
  import { Spin, Menu, Icon, Avatar } from 'antd';
  import HeaderDropdown from '../HeaderDropdown';
  import SelectLang from '../SelectLang';
  import styles from './index.less';
  import user from '../../assets/user.png';
  
  export default class GlobalHeaderRight extends PureComponent {
    changeReadState = clickedItem => {
      const { id } = clickedItem;
      const { dispatch } = this.props;
      dispatch({
        type: 'global/changeNoticeReadState',
        payload: id,
      });
    };
  
    render() {
      const { currentUser, onMenuClick, theme } = this.props;
      const menu = (
        <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
          <Menu.Item key="logout">
            <Icon type="logout" />
            <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
          </Menu.Item>
        </Menu>
      );
      let className = styles.right;
      if (theme === 'dark') {
        className = `${styles.right}  ${styles.dark}`;
      }
      return (
        <div className={className}>
          {currentUser.username ? (
            <HeaderDropdown overlay={menu}>
              <span className={`${styles.action} ${styles.account}`}>
                <Avatar size="small" className={styles.avatar} src={user} alt="avatar" />
                <span className={styles.name}>{currentUser.username}</span>
              </span>
            </HeaderDropdown>
          ) : (
            <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
          )}
          <SelectLang className={styles.action} />
        </div>
      );
    }
  }
  