Function EvalCard

studio/src/pages/Evaluations.tsx:196–367

({ evalItem, onDelete }: EvalCardProps)

}

function EvalCard({ evalItem, onDelete }: EvalCardProps) {
  const [showMenu, setShowMenu] = useState(false);

  const statusConfig = STATUS_CONFIG[evalItem.status];
  const typeConfig = TYPE_CONFIG[evalItem.type];
  const StatusIcon = statusConfig.icon;
  const TypeIcon = typeConfig.icon;

  const scoreColor = evalItem.score !== undefined
    ? evalItem.score >= 0.8 ? 'text-[var(--color-success)]'
      : evalItem.score >= 0.5 ? 'text-[var(--color-warning)]'
      : 'text-[var(--color-error)]'
    : '';

  return (
    <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 hover:border-[var(--color-primary)]/50 transition-colors">
      <div className="flex items-start justify-between">
        {/* Left */}
        <div className="flex items-start gap-4 flex-1 min-w-0">
          {/* Icon */}
          <div className="w-10 h-10 rounded-lg bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
            <TypeIcon className="w-5 h-5 text-[var(--color-primary)]" />
          </div>

          {/* Info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <h3 className="font-medium text-[var(--color-text-primary)] truncate">
                {evalItem.name}
              </h3>
              <span className="px-2 py-0.5 text-xs rounded-full bg-[var(--color-surface-elevated)] text-[var(--color-text-muted)]">
                {typeConfig.label}
              </span>
            </div>
            <p className="text-xs text-[var(--color-text-muted)] font-mono mt-1">
              {evalItem.id.slice(0, 12)}...
            </p>
          </div>
        </div>

        {/* Right */}
        <div className="flex items-center gap-4">
          {/* Score */}
          {evalItem.score !== undefined && (
            <div className="text-right">
              <div className={cn('text-lg font-semibold', scoreColor)}>
                {(evalItem.score * 100).toFixed(1)}%
              </div>
              <div className="text-xs text-[var(--color-text-muted)]">评分</div>
            </div>
          )}

          {/* Status */}
          <div className="flex items-center gap-2 min-w-[80px]">
            <StatusIcon className={cn(
              'w-4 h-4',
              statusConfig.color,
              evalItem.status === 'running' && 'animate-spin'