Function Benchmarks

studio/src/pages/Benchmarks.tsx:22–146

()

import type { BenchmarkRecord } from '../api/types';

export function Benchmarks() {
  const [searchQuery, setSearchQuery] = useState('');

  const { data, isLoading, error, refetch, isFetching } = useBenchmarks();
  const deleteBenchmark = useDeleteBenchmark();
  const runBenchmark = useRunBenchmark();

  const benchmarks = data?.benchmarks || [];

  // Filter by search
  const filteredBenchmarks = benchmarks.filter((benchmark) => {
    if (searchQuery) {
      const searchLower = searchQuery.toLowerCase();
      if (
        !benchmark.name.toLowerCase().includes(searchLower) &&
        !benchmark.id.toLowerCase().includes(searchLower)
      ) {
        return false;
      }
    }
    return true;
  });

  const handleDelete = async (benchmark: BenchmarkRecord) => {
    if (confirm(`确定要删除 Benchmark "${benchmark.name}" 吗？`)) {
      try {
        await deleteBenchmark.mutateAsync(benchmark.id);
      } catch (e) {
        console.error('Failed to delete benchmark:', e);
      }
    }
  };

  const handleRun = async (benchmark: BenchmarkRecord) => {
    try {
      await runBenchmark.mutateAsync({ id: benchmark.id });
    } catch (e) {
      console.error('Failed to run benchmark:', e);
    }
  };

  return (
    <div className="flex flex-col h-full">
      <Header
        title="Benchmarks"
        subtitle="基准测试管理"
        isRefreshing={isFetching}
        onRefresh={() => refetch()}
      />

      <div className="flex-1 overflow-auto">
        {/* Toolbar */}
        <div className="flex items-center justify-between p-4 border-b border-[var(--color-border)]">
          <div className="flex items-center gap-4">
            {/* Search */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-muted)]" />
              <input