@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/testcase/stats/project-stats.tsx

@@ -0,0 +1,151 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 项目统计四指标页（任务 36，规格 §12「项目级统计页签」）：通过率趋势（近 30 天
+// completed 批次时序条）+ 生成采纳率 + 自动化覆盖率 + flaky 率。数据源
+// getProjectTestStatsFn（projectId 客户端解析口径同用例库/计划页：内置独立项目 →
+// 首个项目，路由层 beforeLoad 预载项目简表）。纯呈现组件：百分比/占比格式化在此，
+// 聚合口径在 serverFn（stats.ts）。趋势条宽度为数据驱动，走 style width（Tailwind
+// JIT 不生成 JS 拼接类名）。
+import { useEffect, useState } from "react";
+import { getProjectTestStatsFn } from "@/server/serverFns/testcase/stats";
+import type { ProjectTestStats } from "@/server/serverFns/testcase/types";
+import { m } from "@/paraglide/messages.js";
+
+/** 占比 → "x%"；null（0/0 无意义）→ "—" */
+function formatRate(rate: number | null): string {
+  return rate === null ? "—" : `${rate}%`;
+}
+
+export function ProjectStats({ projectId }: { projectId?: string | null }) {
+  const [stats, setStats] = useState<ProjectTestStats | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!projectId) return;
+    let cancelled = false;
+    setStats(null);
+    setFailed(false);
+    getProjectTestStatsFn({ data: { projectId } })
+      .then((res) => {
+        if (!cancelled) setStats(res);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId]);
+
+  if (!projectId) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground" data-testid="project-stats-empty-project">
+        {m.testcase_stats_noProject()}
+      </div>
+    );
+  }
+  if (failed) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground" data-testid="project-stats-error">
+        {m.testcase_stats_loadFailed()}
+      </div>
+    );
+  }
+  if (!stats) {
+    return (
+      <div className="flex h-full items-center justify-center" data-testid="project-stats-loading">
+        <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-4 overflow-y-auto p-4" data-testid="project-stats">
+      <h1 className="text-lg font-semibold">{m.testcase_stats_title()}</h1>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {/* 生成采纳率 */}
+        <div className="rounded-lg border border-border p-4" data-testid="stats-generation">
+          <div className="text-xs text-muted-foreground">{m.testcase_stats_generation()}</div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums">
+            {formatRate(stats.generation.adoptionRate)}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            {m.testcase_stats_generation_value({
+              adopted: stats.generation.adoptedCount,
+              draft: stats.generation.draftCount,
+            })}
+          </div>
+        </div>
+        {/* 自动化覆盖率 */}
+        <div className="rounded-lg border border-border p-4" data-testid="stats-coverage">
+          <div className="text-xs text-muted-foreground">{m.testcase_stats_coverage()}</div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums">
+            {formatRate(stats.automationCoverage.rate)}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            {m.testcase_stats_coverage_value({
+              count: stats.automationCoverage.count,
+              total: stats.automationCoverage.total,
+            })}
+          </div>
+        </div>
+        {/* flaky 率 */}
+        <div className="rounded-lg border border-border p-4" data-testid="stats-flaky">
+          <div className="text-xs text-muted-foreground">{m.testcase_stats_flaky()}</div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums">
+            {formatRate(stats.flakyRate.rate)}
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            {m.testcase_stats_flaky_value({ count: stats.flakyRate.count, total: stats.flakyRate.total })}
+          </div>
+        </div>
+      </div>
+
+      {/* 通过率趋势（近 30 天 completed 批次时序） */}
+      <div className="rounded-lg border border-border p-4" data-testid="stats-trend">
+        <div className="mb-3 text-xs text-muted-foreground">{m.testcase_stats_passRateTrend()}</div>
+        {stats.passRateTrend.length === 0 ? (
+          <div className="py-4 text-center text-sm text-muted-foreground" data-testid="stats-trend-empty">
+            {m.testcase_stats_trendEmpty()}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {stats.passRateTrend.map((point) => (
+              <div key={point.runId} className="flex items-center gap-3 text-xs" data-testid={`stats-trend-item-${point.runId}`}>
+                <span className="w-40 min-w-0 shrink-0 truncate">{point.name}</span>
+                <span className="w-20 shrink-0 text-muted-foreground tabular-nums">
+                  {point.createdAt.slice(0, 10)}
+                </span>
+                <div className="h-1.5 flex-1 rounded-full bg-muted">
+                  <div
+                    className="h-1.5 rounded-full bg-primary"
+                    style={{ width: `${Math.round(point.passRate * 100)}%` }}
+                  />
+                </div>
+                <span className="w-10 shrink-0 text-right tabular-nums">
+                  {Math.round(point.passRate * 100)}%
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/testcase/step-editor.tsx

@@ -0,0 +1,197 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 分步步骤编辑器（任务 11，规格 A9）。受控组件：value/onChange 由父组件持有，
+// 任务 12 详情页编辑场景复用（预填用例回显 = 传入已有步骤草稿）。order 不入
+// 草稿——提交时由行索引推导（TestCaseStepsSchema 强制 order 从 1 起且唯一）。
+// action 必填：用户编辑/失焦过且为空的行显示行内红框 + 提示；expected 可空。
+// 最少保留 1 行（schema min(1)），仅剩一行时删除禁用。
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+
+/** 单步草稿（expected 恒为字符串，空串 = 未填；提交时归一化去掉） */
+export interface StepDraft {
+  action: string;
+  expected: string;
+}
+
+interface StepEditorProps {
+  /** 受控步骤草稿（顺序即 order，父组件持有） */
+  value: StepDraft[];
+  onChange: (steps: StepDraft[]) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** 提交侧有效性（对话框禁提交依据）：至少 1 步且每步 action 非空白 */
+export function isStepDraftsValid(steps: StepDraft[]): boolean {
+  return steps.length > 0 && steps.every((s) => s.action.trim().length > 0);
+}
+
+export function StepEditor({ value, onChange, disabled, className }: StepEditorProps) {
+  // 「dirty 行」跟踪：用户编辑或失焦过的行才显示空 action 红框（新增行不立即报错）。
+  // 按行索引记录，增删/移动时同步重映射保持行对齐。
+  const [dirty, setDirty] = useState<ReadonlySet<number>>(() => new Set<number>());
+  const markDirty = (i: number) =>
+    setDirty((prev) => (prev.has(i) ? prev : new Set(prev).add(i)));
+
+  const setStep = (i: number, patch: Partial<StepDraft>) => {
+    onChange(value.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
+  };
+
+  const addStep = () => onChange([...value, { action: "", expected: "" }]);
+
+  const removeStep = (i: number) => {
+    if (value.length <= 1) return;
+    onChange(value.filter((_, idx) => idx !== i));
+    setDirty((prev) => {
+      const next = new Set<number>();
+      for (const idx of prev) {
+        if (idx === i) continue;
+        next.add(idx > i ? idx - 1 : idx);
+      }
+      return next;
+    });
+  };
+
+  const moveStep = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= value.length) return;
+    const next = [...value];
+    [next[i], next[j]] = [next[j]!, next[i]!];
+    onChange(next);
+    setDirty((prev) => {
+      const swapped = new Set<number>();
+      for (const idx of prev) {
+        if (idx === i) swapped.add(j);
+        else if (idx === j) swapped.add(i);
+        else swapped.add(idx);
+      }
+      return swapped;
+    });
+  };
+
+  return (
+    <div className={cn("space-y-2", className)} data-testid="step-editor">
+      <ol className="space-y-2">
+        {value.map((step, i) => {
+          const actionEmpty = step.action.trim().length === 0;
+          const showActionError = dirty.has(i) && actionEmpty;
+          return (
+            <li
+              key={i}
+              className="flex items-start gap-2"
+              data-testid={`step-row-${i}`}
+            >
+              <span
+                className="mt-2 flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground"
+                aria-label={m.testcase_stepEditor_stepLabel({ n: i + 1 })}
+              >
+                {i + 1}
+              </span>
+              <div className="min-w-0 flex-1 space-y-1">
+                <Input
+                  data-testid={`step-action-${i}`}
+                  value={step.action}
+                  onChange={(e) => {
+                    setStep(i, { action: e.target.value });
+                    markDirty(i);
+                  }}
+                  onBlur={() => markDirty(i)}
+                  disabled={disabled}
+                  placeholder={m.testcase_stepEditor_actionPlaceholder()}
+                  maxLength={500}
+                  aria-invalid={showActionError || undefined}
+                  className={cn("h-8 text-sm", showActionError && "border-destructive focus-visible:ring-destructive")}
+                />
+                {showActionError && (
+                  <p className="text-xs text-destructive" data-testid={`step-action-error-${i}`}>
+                    {m.testcase_stepEditor_actionRequired()}
+                  </p>
+                )}
+                <Input
+                  data-testid={`step-expected-${i}`}
+                  value={step.expected}
+                  onChange={(e) => setStep(i, { expected: e.target.value })}
+                  onBlur={() => markDirty(i)}
+                  disabled={disabled}
+                  placeholder={m.testcase_stepEditor_expectedPlaceholder()}
+                  maxLength={500}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div className="flex shrink-0 items-center gap-0.5 pt-0.5">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6 text-muted-foreground"
+                  disabled={disabled || i === 0}
+                  aria-label={m.testcase_stepEditor_moveUp()}
+                  data-testid={`step-up-${i}`}
+                  onClick={() => moveStep(i, -1)}
+                >
+                  <ChevronUp className="size-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6 text-muted-foreground"
+                  disabled={disabled || i === value.length - 1}
+                  aria-label={m.testcase_stepEditor_moveDown()}
+                  data-testid={`step-down-${i}`}
+                  onClick={() => moveStep(i, 1)}
+                >
+                  <ChevronDown className="size-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6 text-destructive/70 hover:text-destructive"
+                  disabled={disabled || value.length <= 1}
+                  aria-label={m.testcase_stepEditor_delete()}
+                  data-testid={`step-delete-${i}`}
+                  onClick={() => removeStep(i)}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-8 gap-1.5"
+        disabled={disabled}
+        data-testid="step-add"
+        onClick={addStep}
+      >
+        <Plus className="size-3.5" />
+        {m.testcase_stepEditor_add()}
+      </Button>
+    </div>
+  );
+}

package/src/components/testcase/table/columns.tsx

@@ -0,0 +1,170 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 表格视图列定义（仿 story/columns 同名件）：TanStack Table v9 features + 列集。
+// 九列：identifier/title/type/priority/state/automation/story 链接/assignee/updatedAt。
+// 状态/优先级展示复用行内编辑器导出的色板常量（单一事实源）。
+import {
+  columnPinningFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import { Link } from "@tanstack/react-router";
+import { Link2 } from "lucide-react";
+import { UserAvatar } from "@/components/shared-kit";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import { priorityLabel, stateLabel, typeLabel } from "../filters";
+import { TEST_CASE_PRIORITY_COLOR } from "../inline-editors/priority-editor";
+import { TEST_CASE_STATE_META } from "../inline-editors/state-editor";
+import { m } from "@/paraglide/messages.js";
+
+const AUTOMATION_LABEL_FNS: Record<string, () => string> = {
+  none: m.testcase_automation_none,
+  unit: m.testcase_automation_unit,
+  e2e: m.testcase_automation_e2e,
+  both: m.testcase_automation_both,
+};
+
+function formatDate(iso: string): string {
+  const d = new Date(iso.slice(0, 10));
+  return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+}
+
+export const testCaseTableFeatures = tableFeatures({
+  rowSortingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  sortFns,
+  sortedRowModel: createSortedRowModel(),
+});
+
+export function createTestCaseColumns(): ColumnDef<typeof testCaseTableFeatures, TestCaseSummary>[] {
+  return [
+    {
+      accessorKey: "identifier",
+      header: m.testcase_column_identifier(),
+      size: 110,
+      cell: ({ row }) => (
+        <span className="font-mono text-xs text-muted-foreground">{row.original.identifier}</span>
+      ),
+    },
+    {
+      accessorKey: "title",
+      header: m.testcase_column_title(),
+      size: 240,
+      cell: ({ row }) => (
+        <span className="truncate font-medium">{row.original.title}</span>
+      ),
+    },
+    {
+      accessorKey: "type",
+      header: m.testcase_column_type(),
+      size: 90,
+      cell: ({ row }) => (
+        <span className="text-xs">{typeLabel(row.original.type)}</span>
+      ),
+    },
+    {
+      accessorKey: "priority",
+      header: m.testcase_column_priority(),
+      size: 80,
+      cell: ({ row }) => (
+        <span className={`inline-flex items-center rounded-sm border border-border px-1.5 py-0.5 text-xs font-medium ${TEST_CASE_PRIORITY_COLOR[row.original.priority]}`}>
+          {priorityLabel(row.original.priority)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "state",
+      header: m.testcase_column_state(),
+      size: 110,
+      cell: ({ row }) => {
+        const meta = TEST_CASE_STATE_META[row.original.state];
+        const Icon = meta.icon;
+        return (
+          <span className="inline-flex items-center gap-1 text-xs">
+            <Icon className={`size-3 ${meta.color}`} />
+            <span className={meta.color}>{stateLabel(row.original.state)}</span>
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "automation",
+      header: m.testcase_column_automation(),
+      size: 90,
+      cell: ({ row }) => (
+        <span className="text-xs text-muted-foreground">
+          {AUTOMATION_LABEL_FNS[row.original.automation]?.() ?? row.original.automation}
+        </span>
+      ),
+    },
+    {
+      id: "story",
+      header: m.testcase_column_story(),
+      size: 70,
+      cell: ({ row }) => {
+        const storyId = row.original.storyId;
+        if (!storyId) return <span className="text-xs text-muted-foreground">—</span>;
+        return (
+          <Link
+            to="/stories/$storyId"
+            params={{ storyId }}
+            onClick={(e) => e.stopPropagation()}
+            aria-label={m.testcase_column_story()}
+            className="inline-flex items-center text-muted-foreground transition-colors hover:text-primary"
+          >
+            <Link2 className="size-3.5" />
+          </Link>
+        );
+      },
+    },
+    {
+      id: "assignee",
+      header: m.testcase_column_assignee(),
+      size: 140,
+      cell: ({ row }) => {
+        const a = row.original.assignee;
+        if (!a) return <span className="text-xs text-muted-foreground">{m.testcase_inline_notSelected()}</span>;
+        return (
+          <div className="flex items-center gap-2">
+            <UserAvatar
+              avatarConfig={a.avatarConfig}
+              bgShape={a.bgShape as "circle" | "rounded" | "square" | null}
+              bgColor={a.bgColor}
+              name={a.username}
+              size="sm"
+            />
+            <span className="text-xs">{a.username}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "updatedAt",
+      header: m.testcase_column_updatedAt(),
+      size: 100,
+      cell: ({ row }) => <span className="text-xs">{formatDate(row.original.updatedAt)}</span>,
+    },
+  ];
+}

package/src/components/testcase/table/table-view.tsx

@@ -0,0 +1,152 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 表格视图（规格 A3，仿 story-list-table 裁剪）：TanStack Table v9 排序 +
+// 列钉住（identifier/title）+ @tanstack/react-virtual 行虚拟化 + 无限滚动哨兵。
+// 行点击为选中（与列表视图同一 selectedId 口径，任务 10 peek 消费），行内
+// story 链接 stopPropagation 不劫持选中。分组不适用于表格（与需求页表格同口径：
+// groupBy 仅作用于列表视图的 GroupedList）。
+import { useMemo, useRef, useState } from "react";
+import { flexRender, useTable, type SortingState } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowUp, ChevronDown } from "lucide-react";
+import { InfiniteScrollSentinel } from "@allbluecn/ui/components/infinite-scroll-sentinel";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import { createTestCaseColumns, testCaseTableFeatures } from "./columns";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+
+const ROW_HEIGHT = 44;
+
+interface TableViewProps {
+  cases: TestCaseSummary[];
+  hasMore: boolean;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  /** 行点击（peek 滑出口径，可选；缺省回落 onSelect） */
+  onOpenCase?: (id: string) => void;
+  onLoadMore: () => void | Promise<void>;
+}
+
+export function TableView({ cases, hasMore, selectedId, onSelect, onOpenCase, onLoadMore }: TableViewProps) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const columns = useMemo(() => createTestCaseColumns(), []);
+
+  const table = useTable({
+    features: testCaseTableFeatures,
+    data: cases,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    initialState: {
+      columnPinning: { start: ["identifier", "title"], end: [] },
+    },
+  });
+
+  const { rows } = table.getRowModel();
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 12,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalHeight = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalHeight - virtualRows[virtualRows.length - 1].end : 0;
+
+  const headerGroups = table.getHeaderGroups();
+  const totalWidth = table.getTotalSize();
+
+  return (
+    <div ref={parentRef} className="h-full min-h-0 overflow-auto rounded-lg border bg-card">
+      <div style={{ width: totalWidth, minWidth: "100%" }}>
+        {/* 表头 */}
+        <div className="sticky top-0 z-10 flex h-9 items-center border-b bg-muted/50 backdrop-blur">
+          {headerGroups[0].headers.map((header) => {
+            const canSort = header.column.getCanSort();
+            const sortDir = header.column.getIsSorted();
+            return (
+              <div
+                key={header.id}
+                style={{ width: header.getSize() }}
+                className="flex h-full items-center gap-1 px-3 text-xs font-medium text-muted-foreground"
+              >
+                {flexRender(header.column.columnDef.header, header.getContext())}
+                {canSort && (
+                  <button
+                    type="button"
+                    onClick={header.column.getToggleSortingHandler()}
+                    className="text-muted-foreground/60 hover:text-foreground"
+                  >
+                    {sortDir === "asc" ? <ArrowUp className="size-3" />
+                      : sortDir === "desc" ? <ArrowDown className="size-3" />
+                      : <ChevronDown className="size-3" />}
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* 虚拟化行 */}
+        <div>
+          {paddingTop > 0 && <div style={{ height: paddingTop }} />}
+          {virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            const selected = selectedId === row.original.id;
+            return (
+              <div
+                key={row.original.id}
+                data-testid="table-row"
+                data-case-id={row.original.id}
+                data-selected={selected ? "true" : "false"}
+                onClick={() => (onOpenCase ? onOpenCase(row.original.id) : onSelect(row.original.id))}
+                style={{ height: ROW_HEIGHT }}
+                className={cn(
+                  "flex w-full cursor-pointer items-center border-b border-border/40 text-sm transition-colors hover:bg-muted/40",
+                  selected && "bg-accent/60 hover:bg-accent/60",
+                )}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <div
+                    key={cell.id}
+                    style={{ width: cell.column.getSize() }}
+                    className="flex h-full items-center overflow-hidden px-3"
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+          {paddingBottom > 0 && <div style={{ height: paddingBottom }} />}
+          <InfiniteScrollSentinel loadedAllLabel={m.story_loadedAll()} onLoadMore={onLoadMore} hasMore={hasMore} rootRef={parentRef} />
+        </div>
+
+        {rows.length === 0 && (
+          <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+            {m.testcase_listView_empty()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}