一个 antd 的 dropdown 非 overlay 版本

antd 新片将 overlay 属性改成了 menu，这里是一个关于这个改造的代码

import { Dropdown, MenuProps } from 'antd';
import {
  BarsOutlined,
  LoginOutlined,
  RocketOutlined,
  ScheduleOutlined,
  SettingOutlined,
  TagsOutlined,
} from '@ant-design/icons';

const PROFILE_ITEMS = [
  { icon: <BarsOutlined />, key: '/modules/categories', label: '分类管理' },
  { icon: <TagsOutlined />, key: '/modules/tags', label: '标签管理' },
  { icon: <RocketOutlined />, key: '/modules/programming_langs', label: '编程语言管理' },
  { icon: <SettingOutlined />, key: '/modules/options', label: '配置管理' },
  { icon: <ScheduleOutlined />, key: '/modules/versions', label: '版本管理' },
  { key: '/', icon: <LoginOutlined />, label: '退出' },
] as MenuProps['items'];

export const Profile = () => {
  const handleMenuClick = (e) => {
    nx.$route.push(e.key);
  };

  return (
    <Dropdown menu={{ items: PROFILE_ITEMS, onClick: handleMenuClick }}>
      <img
        src="https://tva1.js.work/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg"
        width={24}
        alt="user's avatar"
      />
    </Dropdown>
  );
};