449 lines
16 KiB
TypeScript
449 lines
16 KiB
TypeScript
"use client";
|
||
|
||
/** 批量测试已完成结果视图。 */
|
||
|
||
import { ChevronDown, ChevronRight, Settings2 } from "lucide-react";
|
||
import { useRef, useState } from "react";
|
||
|
||
import { BatchCaseDetailDrawer } from "@/components/batch-test/batch-case-detail-drawer";
|
||
import {
|
||
BatchCaseStatusBadge,
|
||
getBatchCaseStatusLabel,
|
||
} from "@/components/batch-test/batch-case-status";
|
||
import {
|
||
BATCH_ERROR_STRATEGY_LABEL,
|
||
BATCH_FAILURE_STRATEGY_LABEL,
|
||
countByStatus,
|
||
formatRunDuration,
|
||
formatRunTime,
|
||
type BatchRunSnapshot,
|
||
} from "@/data/batch-run";
|
||
import { Button } from "@/components/ui/button";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type ResultFilter = "all" | "fail" | "error";
|
||
|
||
function stopReasonLabel(run: BatchRunSnapshot): string {
|
||
if (run.stopReason === "manual") return "已手动停止";
|
||
if (run.stopReason === "assertion_failure") return "因断言失败停止";
|
||
if (run.stopReason === "execution_error") return "因执行错误停止";
|
||
return "";
|
||
}
|
||
|
||
export function BatchRunCompletedView({
|
||
run,
|
||
onEditCase,
|
||
onRerunCase,
|
||
}: {
|
||
run: BatchRunSnapshot;
|
||
onEditCase: (caseId: string) => void;
|
||
onRerunCase: (caseId: string) => void;
|
||
}) {
|
||
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
||
const [filter, setFilter] = useState<ResultFilter>("all");
|
||
const detailRowRefs = useRef(new Map<string, HTMLTableRowElement>());
|
||
const selectedCase =
|
||
run.cases.find((item) => item.id === selectedCaseId) ?? null;
|
||
const detailOpen = Boolean(selectedCase);
|
||
|
||
const counts = countByStatus(run.cases);
|
||
const total = run.cases.length;
|
||
const outcome = getRunOutcome(run, counts);
|
||
const visibleCases =
|
||
filter === "fail"
|
||
? run.cases.filter((item) => item.status === "fail")
|
||
: filter === "error"
|
||
? run.cases.filter((item) => item.status === "error")
|
||
: run.cases;
|
||
|
||
function closeDetail() {
|
||
const currentId = selectedCaseId;
|
||
setSelectedCaseId(null);
|
||
if (!currentId) return;
|
||
window.requestAnimationFrame(() => {
|
||
detailRowRefs.current.get(currentId)?.focus();
|
||
});
|
||
}
|
||
|
||
function handleCaseRowKeyDown(
|
||
event: React.KeyboardEvent<HTMLTableRowElement>,
|
||
caseId: string,
|
||
) {
|
||
if (event.key !== "Enter" && event.key !== " ") return;
|
||
event.preventDefault();
|
||
setSelectedCaseId(caseId);
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-full min-h-0 w-full overflow-hidden bg-background">
|
||
<div className="min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-none px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
|
||
<div
|
||
className={cn(
|
||
"flex flex-col gap-4",
|
||
detailOpen ? "w-full" : "mx-auto w-full max-w-[960px]",
|
||
)}
|
||
>
|
||
{/* 结果总览 */}
|
||
<section className="rounded-2xl border border-hairline bg-card p-5 shadow-sm">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-base font-medium text-foreground">
|
||
{run.title}
|
||
</h2>
|
||
{run.finishedAt && (
|
||
<p className="mt-1.5 text-xs text-muted-soft">
|
||
完成于 {formatRunTime(run.finishedAt)}
|
||
{run.stopReason ? ` · ${stopReasonLabel(run)}` : ""}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<span
|
||
className={cn(
|
||
"inline-flex shrink-0 items-center rounded-full px-3 py-1 text-xs font-medium",
|
||
outcome.className,
|
||
)}
|
||
>
|
||
{outcome.label}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mt-5 rounded-xl border border-hairline bg-canvas-soft/60 p-4">
|
||
<div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
||
<div>
|
||
<p className="text-xs font-medium tracking-wide text-muted-soft uppercase">
|
||
测试结果
|
||
</p>
|
||
<p className="mt-1 font-display text-3xl text-ink">
|
||
<span className="tabular-nums">{counts.pass}</span>
|
||
<span className="mx-1.5 text-muted-soft">/</span>
|
||
<span className="tabular-nums">{total}</span>
|
||
<span className="ml-2 text-2xl">通过</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 gap-x-5 gap-y-2 text-sm sm:shrink-0">
|
||
<ResultCount tone="success" label="通过" count={counts.pass} />
|
||
<ResultCount
|
||
tone="destructive"
|
||
label="断言失败"
|
||
count={counts.fail}
|
||
/>
|
||
<ResultCount
|
||
tone="warning"
|
||
label="执行错误"
|
||
count={counts.error}
|
||
/>
|
||
{counts.skipped > 0 && (
|
||
<ResultCount
|
||
tone="muted"
|
||
label="未执行"
|
||
count={counts.skipped}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<ResultDistribution counts={counts} total={total} />
|
||
</div>
|
||
|
||
<dl
|
||
className={cn(
|
||
"mt-4 grid gap-x-6 gap-y-4 text-sm sm:grid-cols-2",
|
||
!detailOpen && "lg:grid-cols-4",
|
||
)}
|
||
>
|
||
<div>
|
||
<dt className="text-xs text-muted-foreground">被测助手</dt>
|
||
<dd className="mt-1 break-words font-medium text-foreground">
|
||
{run.assistantName}
|
||
</dd>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<dt className="text-xs text-muted-foreground">评估模型</dt>
|
||
<dd
|
||
className="mt-1 break-words font-medium text-foreground"
|
||
title={run.config.evaluatorModelResourceName}
|
||
>
|
||
{run.config.evaluatorModelResourceName}
|
||
</dd>
|
||
{run.config.evaluatorModel && (
|
||
<dd
|
||
className="mt-0.5 break-all font-mono text-[11px] text-muted-soft"
|
||
title={run.config.evaluatorModel}
|
||
>
|
||
{run.config.evaluatorModel}
|
||
</dd>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<dt className="text-xs text-muted-foreground">测试范围</dt>
|
||
<dd className="mt-1 font-medium text-foreground">
|
||
{run.config.suiteCount} 个测试集 · {total} 个用例
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-xs text-muted-foreground">运行参数</dt>
|
||
<dd className="mt-1 font-medium text-foreground">
|
||
{run.config.concurrency} 并发 · {run.config.timeoutSecs} 秒超时
|
||
<span className="mx-1.5 text-muted-soft">·</span>
|
||
{formatRunDuration(run.startedAt, run.finishedAt)}
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<details className="group mt-4 border-t border-hairline pt-3">
|
||
<summary className="flex w-fit cursor-pointer list-none items-center gap-2 rounded-full px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-canvas-soft hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 [&::-webkit-details-marker]:hidden">
|
||
<Settings2 size={13} />
|
||
查看运行设置
|
||
<ChevronDown
|
||
size={13}
|
||
className="transition-transform group-open:rotate-180"
|
||
/>
|
||
</summary>
|
||
<div className="mt-3 grid gap-3 rounded-xl border border-hairline bg-canvas-soft/50 px-4 py-3 text-xs leading-5 text-muted-foreground sm:grid-cols-2">
|
||
<p>
|
||
<span className="font-medium text-foreground">断言失败：</span>
|
||
{BATCH_FAILURE_STRATEGY_LABEL[run.config.failureStrategy]}
|
||
</p>
|
||
<p>
|
||
<span className="font-medium text-foreground">执行错误：</span>
|
||
重试 {run.config.errorRetryCount} 次，
|
||
{BATCH_ERROR_STRATEGY_LABEL[run.config.errorStrategy]}
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
{/* 用例列表 */}
|
||
<section className="rounded-2xl border border-hairline bg-card shadow-sm">
|
||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline px-5 py-3.5">
|
||
<h3 className="text-sm font-medium text-foreground">用例列表</h3>
|
||
<div
|
||
className="flex items-center gap-2"
|
||
role="group"
|
||
aria-label="结果筛选"
|
||
>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant={filter === "all" ? "default" : "outline"}
|
||
className="rounded-full"
|
||
aria-pressed={filter === "all"}
|
||
onClick={() => setFilter("all")}
|
||
>
|
||
全部 {total}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant={filter === "fail" ? "default" : "outline"}
|
||
className="rounded-full"
|
||
aria-pressed={filter === "fail"}
|
||
onClick={() => setFilter("fail")}
|
||
>
|
||
断言失败 {counts.fail}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant={filter === "error" ? "default" : "outline"}
|
||
className="rounded-full"
|
||
aria-pressed={filter === "error"}
|
||
onClick={() => setFilter("error")}
|
||
>
|
||
执行错误 {counts.error}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full min-w-[560px] text-left text-sm">
|
||
<thead>
|
||
<tr className="border-b border-hairline text-xs text-muted-soft">
|
||
<th className="w-12 px-5 py-2.5 font-medium">#</th>
|
||
<th className="px-3 py-2.5 font-medium">测试用例</th>
|
||
<th className="w-28 px-3 py-2.5 font-medium">状态</th>
|
||
<th className="w-24 px-3 py-2.5 font-medium">详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{visibleCases.map((item) => {
|
||
const index = run.cases.findIndex(
|
||
(caseItem) => caseItem.id === item.id,
|
||
);
|
||
return (
|
||
<tr
|
||
key={item.id}
|
||
ref={(element) => {
|
||
if (element) {
|
||
detailRowRefs.current.set(item.id, element);
|
||
} else {
|
||
detailRowRefs.current.delete(item.id);
|
||
}
|
||
}}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label={`查看用例 ${item.name} 详情，状态：${getBatchCaseStatusLabel(item.status)}`}
|
||
aria-expanded={selectedCaseId === item.id}
|
||
aria-controls="batch-case-detail"
|
||
onClick={() => setSelectedCaseId(item.id)}
|
||
onKeyDown={(event) =>
|
||
handleCaseRowKeyDown(event, item.id)
|
||
}
|
||
className={cn(
|
||
"cursor-pointer border-b border-hairline transition-colors outline-none last:border-b-0 hover:bg-canvas-soft/70 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40",
|
||
selectedCaseId === item.id && "bg-canvas-soft",
|
||
)}
|
||
>
|
||
<td className="w-12 px-5 py-3 tabular-nums text-muted-foreground">
|
||
{index + 1}
|
||
</td>
|
||
<td className="px-3 py-3 font-medium text-foreground">
|
||
{item.name}
|
||
</td>
|
||
<td className="w-28 px-3 py-3">
|
||
<BatchCaseStatusBadge status={item.status} />
|
||
</td>
|
||
<td className="w-24 px-3 py-2">
|
||
<span className="inline-flex items-center gap-1 text-sm text-muted-foreground">
|
||
查看
|
||
<ChevronRight size={14} />
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{visibleCases.length === 0 && (
|
||
<tr>
|
||
<td
|
||
colSpan={4}
|
||
className="px-5 py-10 text-center text-sm text-muted-foreground"
|
||
>
|
||
{filter === "error"
|
||
? "本次运行没有执行错误。"
|
||
: "本次运行没有断言失败用例。"}
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
{selectedCase && (
|
||
<BatchCaseDetailDrawer
|
||
item={selectedCase}
|
||
assistantName={run.assistantName}
|
||
onClose={closeDetail}
|
||
onEdit={() => onEditCase(selectedCase.id)}
|
||
onRerun={() => onRerunCase(selectedCase.id)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type BatchCounts = ReturnType<typeof countByStatus>;
|
||
|
||
function getRunOutcome(run: BatchRunSnapshot, counts: BatchCounts) {
|
||
if (run.status === "cancelled") {
|
||
return {
|
||
label: "运行已停止",
|
||
className: "bg-surface-strong text-muted-foreground",
|
||
};
|
||
}
|
||
if (counts.error > 0) {
|
||
return {
|
||
label: "存在执行错误",
|
||
className: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
|
||
};
|
||
}
|
||
if (counts.fail > 0) {
|
||
return {
|
||
label: "存在断言失败",
|
||
className: "bg-destructive/10 text-destructive",
|
||
};
|
||
}
|
||
if (counts.skipped > 0) {
|
||
return {
|
||
label: "部分未执行",
|
||
className: "bg-surface-strong text-muted-foreground",
|
||
};
|
||
}
|
||
if (counts.pass > 0) {
|
||
return {
|
||
label: "全部通过",
|
||
className: "bg-success/10 text-success",
|
||
};
|
||
}
|
||
return {
|
||
label: "暂无结果",
|
||
className: "bg-surface-strong text-muted-foreground",
|
||
};
|
||
}
|
||
|
||
function ResultCount({
|
||
tone,
|
||
label,
|
||
count,
|
||
}: {
|
||
tone: "success" | "destructive" | "warning" | "muted";
|
||
label: string;
|
||
count: number;
|
||
}) {
|
||
const dotClass = {
|
||
success: "bg-success",
|
||
destructive: "bg-destructive",
|
||
warning: "bg-amber-500",
|
||
muted: "bg-muted-soft",
|
||
}[tone];
|
||
|
||
return (
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span
|
||
className={cn("size-2 shrink-0 rounded-full", dotClass)}
|
||
aria-hidden
|
||
/>
|
||
<span className="truncate text-muted-foreground">{label}</span>
|
||
<span className="ml-auto font-medium tabular-nums text-foreground">
|
||
{count}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ResultDistribution({
|
||
counts,
|
||
total,
|
||
}: {
|
||
counts: BatchCounts;
|
||
total: number;
|
||
}) {
|
||
const segments = [
|
||
{ key: "pass", count: counts.pass, className: "bg-success" },
|
||
{ key: "fail", count: counts.fail, className: "bg-destructive" },
|
||
{ key: "error", count: counts.error, className: "bg-amber-500" },
|
||
{ key: "skipped", count: counts.skipped, className: "bg-muted-soft" },
|
||
].filter((item) => item.count > 0);
|
||
|
||
return (
|
||
<div
|
||
className="mt-4 flex h-2 overflow-hidden rounded-full bg-surface-strong"
|
||
role="img"
|
||
aria-label={`结果分布：通过 ${counts.pass}，断言失败 ${counts.fail}，执行错误 ${counts.error}，未执行 ${counts.skipped}`}
|
||
>
|
||
{total > 0 &&
|
||
segments.map((segment) => (
|
||
<span
|
||
key={segment.key}
|
||
className={segment.className}
|
||
style={{ flexBasis: 0, flexGrow: segment.count }}
|
||
aria-hidden
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|