70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { DownOutlined } from '@ant-design/icons';
|
||
import { Button, Dropdown, Popconfirm, Space } from 'antd';
|
||
import { useUserStore } from '@/store/UserStore';
|
||
import { GapBox } from '../GapBox';
|
||
|
||
export const HeaderUserInfo: React.FC = () => {
|
||
const userInfo = useUserStore().user;
|
||
|
||
return (
|
||
<GapBox>
|
||
{/* 用户信息 Dropdown */}
|
||
<Dropdown
|
||
trigger={['click']}
|
||
placement='bottomRight'
|
||
arrow
|
||
menu={{
|
||
items: [
|
||
{
|
||
key: 'user-info',
|
||
disabled: true, // 只展示，不可操作
|
||
label: (
|
||
<Space size={8} style={{ color: 'rgba(0,0,0,0.88)' }}>
|
||
<span>
|
||
{userInfo.username} ({userInfo.nickname})
|
||
</span>
|
||
</Space>
|
||
),
|
||
},
|
||
],
|
||
}}
|
||
>
|
||
<div style={{ cursor: 'pointer' }}>
|
||
<Space size={4}>
|
||
<span>欢迎您，</span>
|
||
<span
|
||
style={{
|
||
maxWidth: 120,
|
||
whiteSpace: 'nowrap',
|
||
textOverflow: 'ellipsis',
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{userInfo.username}
|
||
</span>
|
||
<DownOutlined
|
||
style={{
|
||
fontSize: 10,
|
||
marginTop: 2,
|
||
color: '#666',
|
||
}}
|
||
/>
|
||
</Space>
|
||
</div>
|
||
</Dropdown>
|
||
|
||
{/* 退出登录 */}
|
||
<Popconfirm
|
||
title='确定要退出登录吗？'
|
||
onConfirm={() => {
|
||
location.hash = '#/login';
|
||
}}
|
||
>
|
||
<Button size='small' variant='text' color='primary'>
|
||
退出登录
|
||
</Button>
|
||
</Popconfirm>
|
||
</GapBox>
|
||
);
|
||
};
|