20260718 重构 RPKI Explorer 查询界面

ui/rpki-explorer/src/components/WorkflowStatus.tsx

@@ -0,0 +1,44 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import type { ExportJobRecord } from "../api/schemas";
+import { exportDownloadUrl } from "../api/service";
+import { formatInt } from "../lib/format";
+
+/**
+ * Presentational status line for an async export job. Polling is the
+ * caller's responsibility (react-query `refetchInterval`).
+ */
+export function WorkflowStatus({
+  job,
+  runId,
+}: {
+  job: ExportJobRecord;
+  runId: string;
+}) {
+  if (job.status === "complete") {
+    return (
+      <span className="workflow-status" role="status">
+        <CheckCircle2 size={15} aria-hidden="true" color="var(--green-600)" />
+        <span>
+          Export ready · {formatInt(job.objectCount)} objects
+        </span>
+        <a className="btn small primary" href={exportDownloadUrl(runId, job.jobId)} download>
+          Download tar
+        </a>
+      </span>
+    );
+  }
+  if (job.status === "failed") {
+    return (
+      <span className="workflow-status" role="alert">
+        <XCircle size={15} aria-hidden="true" color="var(--red-600)" />
+        <span>Export failed{job.error ? `: ${job.error}` : ""}</span>
+      </span>
+    );
+  }
+  return (
+    <span className="workflow-status" role="status" aria-live="polite">
+      <span className="spinner small" aria-hidden="true" />
+      <span>Export running…</span>
+    </span>
+  );
+}