68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
|
|
import type { FC } from 'react';
|
|
import { connect } from 'umi';
|
|
import { Dropdown, Space } from 'antd';
|
|
import { LogoutOutlined } from '@ant-design/icons';
|
|
import type { UserConnectedProps } from '@/models/user';
|
|
import './index.less';
|
|
import IconFont from '../IconFont';
|
|
|
|
const Avatar: FC<UserConnectedProps> = (props) => {
|
|
const {
|
|
user: { data }, dispatch,
|
|
} = props;
|
|
console.log('user32323', data);
|
|
|
|
|
|
const handleLogout = () => {
|
|
dispatch?.({
|
|
type: 'user/logout',
|
|
});
|
|
};
|
|
|
|
const items = [
|
|
{
|
|
key: 'logout',
|
|
label: (
|
|
<a
|
|
onClick={handleLogout}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '0 8px',
|
|
}}
|
|
>
|
|
<LogoutOutlined />
|
|
<span>退出登录</span>
|
|
</a>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Dropdown
|
|
menu={{ items }}
|
|
>
|
|
<Space className="avatar-container">
|
|
{
|
|
data.avatarUrl ? <img
|
|
alt="avatar"
|
|
src={data.avatarUrl}
|
|
className="avatar"
|
|
/> :
|
|
<IconFont name='icon-touxiang' size="36" ></IconFont>
|
|
}
|
|
|
|
<span className="username">{data.adminName}</span>
|
|
</Space>
|
|
</Dropdown>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
({ user }: { user: UserConnectedProps['user'] }) => ({
|
|
user,
|
|
}),
|
|
)(Avatar);
|