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>
  );
}