feat(frontend): implement batch testing views and status components

Add components for batch testing, including BatchRunCompletedView and BatchRunRunningView, to display test results and progress. Introduce BatchCaseStatusBadge and BatchPhasePill for visual status representation. Implement mock data handling for batch run snapshots and case statuses, enhancing the user experience for managing batch tests. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-08 17:37:48 +08:00
parent 398b20778d
commit 21a25874a9
10 changed files with 1679 additions and 94 deletions
@@ -0,0 +1,84 @@
+"use client";
+
+import { CheckCircle2, Circle, Loader2, XCircle } from "lucide-react";
+
+import type { BatchCaseStatus } from "@/data/batch-run";
+import { cn } from "@/lib/utils";
+
+const STATUS_META: Record<
+  BatchCaseStatus,
+  { label: string; className: string; Icon: typeof CheckCircle2 }
+> = {
+  pass: {
+    label: "通过",
+    className: "text-success",
+    Icon: CheckCircle2,
+  },
+  fail: {
+    label: "失败",
+    className: "text-destructive",
+    Icon: XCircle,
+  },
+  running: {
+    label: "运行中",
+    className: "text-primary",
+    Icon: Loader2,
+  },
+  waiting: {
+    label: "等待",
+    className: "text-muted-soft",
+    Icon: Circle,
+  },
+  skipped: {
+    label: "未执行",
+    className: "text-muted-soft",
+    Icon: Circle,
+  },
+};
+
+export function BatchCaseStatusBadge({
+  status,
+  className,
+}: {
+  status: BatchCaseStatus;
+  className?: string;
+}) {
+  const meta = STATUS_META[status];
+  const Icon = meta.Icon;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-sm font-medium",
+        meta.className,
+        className,
+      )}
+    >
+      <Icon
+        size={16}
+        className={cn(status === "running" && "animate-spin")}
+      />
+      {meta.label}
+    </span>
+  );
+}
+
+export function BatchPhasePill({
+  phase,
+}: {
+  phase: "running" | "completed";
+}) {
+  if (phase === "running") {
+    return (
+      <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+        运行中
+      </span>
+    );
+  }
+
+  return (
+    <span className="inline-flex items-center rounded-full bg-success/15 px-2.5 py-0.5 text-xs font-medium text-success">
+      已完成
+    </span>
+  );
+}