aiops/frontend/src/components/ui/copy-button.tsx

// copy-button.tsx — 统一复制按钮（图标 + 文案）// Logan.Li
import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { copyToClipboard } from '@/utils/clipboard';
import { cn } from '@/lib/utils';
import i18n from '@/i18n';

export interface CopyButtonProps {
  text: string;
  /** 复制成功 toast 标题 */
  label?: string;
  /** 按钮展示文案，默认仅图标 */
  children?: React.ReactNode;
  className?: string;
  size?: 'default' | 'sm' | 'lg' | 'icon';
  variant?: 'default' | 'outline' | 'ghost' | 'secondary';
  disabled?: boolean;
  title?: string;
}

export function CopyButton({
  text,
  label = '已复制',
  children,
  className,
  size = 'sm',
  variant = 'outline',
  disabled,
  title = '复制',
}: CopyButtonProps) {
  const { toast } = useToast();
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    const ok = await copyToClipboard(text);
    if (ok) {
      setCopied(true);
      toast({ title: label });
      setTimeout(() => setCopied(false), 2000);
    } else {
      toast({
        title: i18n.t('monitor.logPanel.copyFailed'),
        description: i18n.t('请手动选中内容后复制'),
        variant: 'destructive',
      });
    }
  };

  const isIconOnly = !children && size === 'icon';

  return (
    <Button
      type="button"
      variant={variant}
      size={size}
      className={cn(
        isIconOnly ? 'h-8 w-8 shrink-0' : 'shrink-0',
        className,
      )}
      onClick={handleCopy}
      disabled={disabled || !text}
      title={title}
      aria-label={title}
    >
      {copied ? (
        <Check className={cn('dg-text-green', children ? 'h-3.5 w-3.5 mr-1' : 'h-3.5 w-3.5')} />
      ) : (
        <Copy className={cn(children ? 'h-3.5 w-3.5 mr-1' : 'h-3.5 w-3.5')} />
      )}
      {children}
    </Button>
  );
}