feat: add persisted batch text testing

This commit is contained in:
Xin Wang
2026-08-10 13:49:24 +08:00
parent 5b8b9fd097
commit 19e8c8c108
27 changed files with 3855 additions and 1450 deletions
@@ -3,7 +3,6 @@
/**
* 批量测试用例详情面板。
* 与 prompt mode DebugDrawer overlay 相同:作为右侧 flex 半屏,无遮罩/模糊。
* 当前展示前端 mock 数据,后续可直接替换为真实执行事件与校验结果。
*/
import {
@@ -79,7 +78,7 @@ export function BatchCaseDetailDrawer({
{item.name}
</h2>
<p className="truncate text-xs text-muted-soft">
被测助手:{assistantName} · Mock 结果
被测助手:{assistantName} · Pipeline 结果
</p>
</div>
<BatchCaseStatusBadge status={item.status} />
@@ -99,12 +98,7 @@ export function BatchCaseDetailDrawer({
<section className="rounded-2xl border border-hairline bg-canvas-soft px-4 py-3.5">
<p className="text-xs font-medium text-foreground">执行契约</p>
<p className="mt-1 text-xs leading-5 text-muted-soft">
{item.turns.length} 轮固定输入 ·{" "}
{item.turns.reduce(
(sum, turn) => sum + turn.evaluations.length,
0,
) + item.overallCriteria.length}{" "}
项评估标准 · 全部通过才算通过
正在执行固定文字脚本;完成后将展示每一轮回复、工具调用和全部评估标准。
</p>
</section>
<ExecutionTimeline status={item.status} />
@@ -288,7 +282,7 @@ function ToolCallCard({ toolCall }: { toolCall: BatchToolCallRecord }) {
</div>
<div className="mt-2 grid gap-2 sm:grid-cols-2">
<CodeResult label="参数" value={toolCall.argumentsJson} />
<CodeResult label="Mock 返回" value={toolCall.resultJson} />
<CodeResult label="工具返回" value={toolCall.resultJson} />
</div>
</div>
);
@@ -401,7 +395,7 @@ function ExecutionTimeline({ status }: { status: "waiting" | "running" }) {
},
{
label: "请求助手响应",
detail: isRunning ? "生成中(Mock)" : "尚未开始",
detail: isRunning ? "Pipeline 生成中" : "尚未开始",
state: isRunning ? "active" : "pending",
},
{
@@ -1,16 +1,13 @@
"use client";
/**
* 批量测试 — 已完成结果视图(MVP mock)。
*/
/** 批量测试已完成结果视图。 */
import { ChevronRight } from "lucide-react";
import { ChevronDown, ChevronRight, Settings2 } from "lucide-react";
import { useRef, useState } from "react";
import { BatchCaseDetailDrawer } from "@/components/batch-test/batch-case-detail-drawer";
import {
BatchCaseStatusBadge,
BatchPhasePill,
getBatchCaseStatusLabel,
} from "@/components/batch-test/batch-case-status";
import {
@@ -50,13 +47,8 @@ export function BatchRunCompletedView({
const detailOpen = Boolean(selectedCase);
const counts = countByStatus(run.cases);
const judged = counts.pass + counts.fail + counts.error;
const total = run.cases.length;
const passRate = judged === 0 ? 0 : Math.round((counts.pass / judged) * 100);
const failRate =
judged === 0 ? 0 : Math.round((counts.fail / judged) * 100);
const errorRate =
judged === 0 ? 0 : Math.round((counts.error / judged) * 100);
const outcome = getRunOutcome(run, counts);
const visibleCases =
filter === "fail"
? run.cases.filter((item) => item.status === "fail")
@@ -93,26 +85,96 @@ export function BatchRunCompletedView({
>
{/* 结果总览 */}
<section className="rounded-2xl border border-hairline bg-card p-5 shadow-sm">
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-base font-medium text-foreground">
{run.title}
</h2>
<BatchPhasePill phase="completed" />
<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>
{run.finishedAt && (
<p className="mt-1.5 text-xs text-muted-soft">
完成时间:{formatRunTime(run.finishedAt)}
{run.stopReason ? ` · ${stopReasonLabel(run)}` : ""}
</p>
)}
<dl className="mt-4 grid gap-3 rounded-xl border border-hairline bg-canvas-soft/60 px-4 py-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
<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 truncate font-medium text-foreground">
<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">
@@ -122,70 +184,34 @@ export function BatchRunCompletedView({
<div>
<dt className="text-xs text-muted-foreground">运行参数</dt>
<dd className="mt-1 font-medium text-foreground">
{run.config.concurrency} 并发 · {run.config.timeoutSecs} 秒
</dd>
</div>
<div>
<dt className="text-xs text-muted-foreground">耗时 / 处理策略</dt>
<dd className="mt-1 text-xs font-medium leading-5 text-foreground">
{formatRunDuration(run.startedAt, run.finishedAt)} · 断言失败:
{BATCH_FAILURE_STRATEGY_LABEL[run.config.failureStrategy]}
<br />
执行错误:重试 {run.config.errorRetryCount} 次,
{BATCH_ERROR_STRATEGY_LABEL[run.config.errorStrategy]}
{run.config.concurrency} 并发 · {run.config.timeoutSecs} 秒超时
<span className="mx-1.5 text-muted-soft">·</span>
{formatRunDuration(run.startedAt, run.finishedAt)}
</dd>
</div>
</dl>
<div className="mt-5 flex flex-col items-center gap-6 sm:flex-row sm:justify-between sm:gap-8">
<div className="text-center sm:text-left">
<div className="font-display text-3xl text-ink">
{counts.pass} / {judged || total} 通过
</div>
<div className="mt-1 text-sm font-medium text-success">
通过率 {passRate}%
</div>
<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>
<PassRateDonut
pass={counts.pass}
fail={counts.fail}
error={counts.error}
/>
<div className="space-y-2 text-sm">
<LegendRow
tone="success"
label="通过"
count={counts.pass}
percent={passRate}
/>
<LegendRow
tone="destructive"
label="断言失败"
count={counts.fail}
percent={failRate}
/>
<LegendRow
tone="warning"
label="执行错误"
count={counts.error}
percent={errorRate}
/>
{counts.skipped > 0 && (
<LegendRow
tone="muted"
label="未执行"
count={counts.skipped}
percent={
total === 0
? 0
: Math.round((counts.skipped / total) * 100)
}
/>
)}
</div>
</div>
</details>
</section>
{/* 用例列表 */}
@@ -319,106 +345,53 @@ export function BatchRunCompletedView({
);
}
function PassRateDonut({
pass,
fail,
error,
}: {
pass: number;
fail: number;
error: number;
}) {
const total = pass + fail + error;
const passRatio = total === 0 ? 0 : pass / total;
const size = 112;
const stroke = 14;
const radius = (size - stroke) / 2;
const circumference = 2 * Math.PI * radius;
const passLength = circumference * passRatio;
const failLength = circumference * (total === 0 ? 0 : fail / total);
const errorLength = circumference * (total === 0 ? 0 : error / total);
type BatchCounts = ReturnType<typeof countByStatus>;
return (
<div
className="relative shrink-0"
style={{ width: size, height: size }}
aria-hidden
>
<svg width={size} height={size} className="-rotate-90">
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="currentColor"
strokeWidth={stroke}
className="text-surface-strong"
/>
{total > 0 && (
<>
{pass > 0 && (
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="currentColor"
strokeWidth={stroke}
strokeDasharray={`${passLength} ${circumference}`}
strokeLinecap="butt"
className="text-success"
/>
)}
{fail > 0 && (
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="currentColor"
strokeWidth={stroke}
strokeDasharray={`${failLength} ${circumference}`}
strokeDashoffset={-passLength}
strokeLinecap="butt"
className="text-destructive"
/>
)}
{error > 0 && (
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="currentColor"
strokeWidth={stroke}
strokeDasharray={`${errorLength} ${circumference}`}
strokeDashoffset={-(passLength + failLength)}
strokeLinecap="butt"
className="text-amber-500"
/>
)}
</>
)}
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center">
<span className="text-lg font-medium tabular-nums text-foreground">
{total === 0 ? 0 : Math.round((pass / total) * 100)}%
</span>
</div>
</div>
);
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 LegendRow({
function ResultCount({
tone,
label,
count,
percent,
}: {
tone: "success" | "destructive" | "warning" | "muted";
label: string;
count: number;
percent: number;
}) {
const dotClass = {
success: "bg-success",
@@ -428,11 +401,48 @@ function LegendRow({
}[tone];
return (
<div className="flex items-center gap-2 text-muted-foreground">
<span className={cn("size-2.5 rounded-full", dotClass)} />
<span>
{label} {count}({percent}%)
<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>
);
}
@@ -1,8 +1,6 @@
"use client";
/**
* 批量测试 — 运行中视图(MVP mock)。
*/
/** 批量测试运行中的持久化快照视图。 */
import { ChevronRight } from "lucide-react";
import { useRef, useState } from "react";
@@ -67,6 +65,10 @@ export function BatchRunRunningView({ run }: { run: BatchRunSnapshot }) {
</h2>
<BatchPhasePill phase="running" />
</div>
<p className="text-xs text-muted-soft">
被测助手:{run.assistantName} · 评估模型:
{run.config.evaluatorModelResourceName}
</p>
<div className="flex items-center gap-3">
<div className="h-2.5 min-w-0 flex-1 overflow-hidden rounded-full bg-surface-strong">