若干更新迭代

components/generation-error.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import type { GenerationJob } from "@/lib/types";
+import { generationErrorMessage, providerErrorDiagnostic } from "@/lib/client/provider-error";
+
+export function GenerationError({ job, isAdmin, providerName }: {
+  job: GenerationJob;
+  isAdmin: boolean;
+  providerName: string;
+}) {
+  if (!job.error) return null;
+  const diagnostic = isAdmin ? providerErrorDiagnostic(job) : null;
+  const isFailed = job.status === "failed" || job.status === "expired";
+  const entries = diagnostic ? [
+    ["服务商", providerName],
+    ["HTTP 状态", diagnostic.status],
+    ["错误码", diagnostic.code],
+    ["请求 ID", diagnostic.requestId],
+    ["阶段", diagnostic.phase === "submit" ? "提交" : diagnostic.phase === "query" ? "查询" : undefined],
+    ["错误类型", diagnostic.kind],
+    ["服务商说明", diagnostic.detail]
+  ].filter((entry): entry is [string, string | number] => entry[1] !== undefined && entry[1] !== "") : [];
+
+  return (
+    <section className={`generation-error ${isFailed ? "generation-error-failed" : "generation-error-info"}`} role={isFailed ? "alert" : "status"}>
+      <strong>{isFailed ? "失败原因" : "任务提示"}</strong>
+      <p>{generationErrorMessage(job)}</p>
+      {isAdmin && entries.length > 0 ? (
+        <details className="generation-error-details">
+          <summary>错误详情</summary>
+          <dl>
+            {entries.map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}
+          </dl>
+        </details>
+      ) : null}
+    </section>
+  );
+}