import { LogoutOutlined , SettingOutlined , UserOutlined } from '@ant-design/icons' ; import { Avatar , Menu , Spin } from 'antd' ; import type { ClickParam } from 'antd/es/menu' ; import React from 'react' ; import { connect } from 'dva' ; import { router } from 'umi' ; import type { ConnectProps , ConnectState } from '@/models/connect' ; import type { CurrentUser } from '@/models/user' ; import HeaderDropdown from '../HeaderDropdown' ; import styles from './index.less' ; export type GlobalHeaderRightProps = { currentUser ? : CurrentUser ; menu ? : boolean ; } & ConnectProps ; class AvatarDropdown extends React . Component < GlobalHeaderRightProps > { onMenuClick = ( event ) => { const { key } = event ; if ( key === 'logout' ) { const { dispatch } = this . props ; if ( dispatch ) { dispatch ( { type : 'login/logout' , } ) ; } return ; } router . push ( `/account/${ key }` ) ; } ; render ( ) { const { currentUser = { avatar : '' , name : '' , } , menu , } = this . props ; const menuHeaderDropdown = ( < Menu className = { styles . menu } selectedKeys = { [ ] } onClick = { this . onMenuClick } > { menu && ( < Menu . Item key = "center" > < UserOutlined /> 个人中心 < /Menu.Item>)} { menu && ( < Menu . Item key = "settings" > < SettingOutlined /> 个人设置 < /Menu.Item>)} { menu && < Menu . Divider />} < Menu . Item key = "logout" > < LogoutOutlined /> 退出登录 < /Menu.Item> < /Menu>); return currentUser && currentUser . name ? ( < HeaderDropdown overlay = { menuHeaderDropdown } > < span className = { `${ styles . action } ${ styles . account }` } > < Avatar size = "small" className = { styles . avatar } src = { currentUser . avatar } alt = "avatar" / > < span className = { styles . name } > { currentUser . name } < /span> < /span> < /HeaderDropdown>) : (<Spin size="small" style={{ marginLeft : 8 , marginRight : 8 , } } />); } } export default connect ( ( { user } ) => ( { currentUser : user . currentUser , } ) ) ( AvatarDropdown ) ;