CurrentUserMenu.tsx
1.06 KB
// REQ-USR-004: 当前用户下拉(展示 sUserName(sUserType) + 退出登录,BR3/BR9)。
import { Dropdown } from 'antd';
import { DownOutlined, LogoutOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import type { AuthUser } from '../../api/types';
import { formatCurrentUser, LOGOUT_MENU_TEXT } from './shellMessages';
import styles from './AppLayout.module.css';
interface CurrentUserMenuProps {
user: AuthUser | null;
onLogout: () => void;
}
export default function CurrentUserMenu({ user, onLogout }: CurrentUserMenuProps) {
const items: MenuProps['items'] = [
{
key: 'logout',
icon: <LogoutOutlined />,
label: LOGOUT_MENU_TEXT,
},
];
const onMenuClick: MenuProps['onClick'] = ({ key }) => {
if (key === 'logout') onLogout();
};
return (
<Dropdown menu={{ items, onClick: onMenuClick }} trigger={['click']}>
<button type="button" className={styles.user}>
{formatCurrentUser(user)}
<DownOutlined aria-hidden style={{ fontSize: 10 }} />
</button>
</Dropdown>
);
}