Function BenchmarkCard

studio/src/pages/Benchmarks.tsx:155–370

({ benchmark, onDelete, onRun, isRunning }: BenchmarkCardProps)

}

function BenchmarkCard({ benchmark, onDelete, onRun, isRunning }: BenchmarkCardProps) {
  const [showMenu, setShowMenu] = useState(false);

  const summary = benchmark.summary;
  const hasResults = summary && summary.total_runs > 0;

  const successRate = hasResults
    ? (summary.successful_runs / summary.total_runs) * 100
    : 0;

  const successRateColor = successRate >= 80
    ? 'text-[var(--color-success)]'
    : successRate >= 50
      ? '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-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center flex-shrink-0">
            <Trophy className="w-6 h-6 text-white" />
          </div>

          {/* Info */}
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-[var(--color-text-primary)] truncate text-lg">
              {benchmark.name}
            </h3>
            <p className="text-xs text-[var(--color-text-muted)] font-mono mt-1">
              ID: {benchmark.id.slice(0, 16)}...
            </p>
            <p className="text-sm text-[var(--color-text-muted)] mt-1 flex items-center gap-1">
              <Clock className="w-3 h-3" />
              创建于 {formatRelativeTime(benchmark.created_at)}
            </p>
          </div>
        </div>

        {/* Right - Actions */}
        <div className="flex items-center gap-2">
          <button
            onClick={() => onRun(benchmark)}
            disabled={isRunning}
            className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-success)]/10 text-[var(--color-success)] rounded-lg text-sm font-medium hover:bg-[var(--color-success)]/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isRunning ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Play className="w-4 h-4" />
            )}
            运行
          </button>

          <div className="relative">
            <button