dros/src/pages/security/components/MeButton.tsx

import React from 'react';
import { Avatar, Typography, AvatarProps, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';

interface MeButtonProps extends AvatarProps {
  isLogin?: boolean;
  avatarUrl?: string;
  username?: React.ReactNode;
  icon?: React.ReactNode;
  'data-testid'?: string;
  disabled?: boolean;
}
/**
 * 没有传递isLogin时，当作普通按钮使用
 * @param param0 - MeButtonProps
 * @param param0.isLogin - 是否登录
 * @param param0.avatarUrl - 头像URL
 * @param param0.onClick - 点击事件处理函数
 * @param param0.username - 用户名
 * @param param0.icon - 图标
 * @param param0.props - 其他AvatarProps属性
 * @returns
 */
const MeButton: React.FC<MeButtonProps> = ({
  isLogin = false,
  avatarUrl,
  onClick,
  username,
  icon,
  disabled,
  ...props
}) => {
  return (
    <Button
      onClick={onClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        // border: 'none',
        background: disabled ? 'transparent' : 'gray',
        padding: 0,
        cursor: 'pointer',
      }}
      className={props.className}
      data-testid={props['data-testid']}
      disabled={disabled} // 如果传递了disabled属性，则可能禁用按钮
    >
      {isLogin ? (
        <Avatar
          src={avatarUrl}
          icon={!!avatarUrl === false ? icon || <UserOutlined /> : undefined} // 如果avatarUrl为false，则使用icon或默认UserOutlined图标
          size={props.size}
          style={{ marginRight: username ? 8 : 0 }}
        />
      ) : (
        <Avatar
          icon={icon || <UserOutlined />}
          size={props.size}
          style={{ marginRight: username ? 8 : 0 }}
        />
      )}
      {username && (
        <Typography.Text style={{ margin: 0 }}>{username}</Typography.Text>
      )}
    </Button>
  );
};

export default MeButton;