push增加详细消息

components/push-test-panel.tsx

@@ -7,6 +7,14 @@ type PushTestPanelProps = {
   deviceCount: number;
 };
 
+type PushFailureDetail = {
+  endpointHost?: string;
+  statusCode?: number | null;
+  message?: string;
+  body?: string | null;
+  reason?: string | null;
+};
+
 export function PushTestPanel({
   initialSubscriptionCount,
   deviceCount,
@@ -16,10 +24,12 @@ export function PushTestPanel({
     initialSubscriptionCount,
   );
   const [notice, setNotice] = useState<string | null>(null);
+  const [failureDetails, setFailureDetails] = useState<PushFailureDetail[]>([]);
 
   async function handleTestPush() {
     setSubmitting(true);
     setNotice(null);
+    setFailureDetails([]);
 
     try {
       const response = await fetch("/api/push/test", {
@@ -33,6 +43,7 @@ export function PushTestPanel({
             sentCount?: number;
             removedCount?: number;
             failedCount?: number;
+            failureDetails?: PushFailureDetail[];
           }
         | null;
 
@@ -44,8 +55,12 @@ export function PushTestPanel({
       const removedCount = payload?.removedCount || 0;
       const sentCount = payload?.sentCount || 0;
       const failedCount = payload?.failedCount || 0;
+      const nextFailureDetails = Array.isArray(payload?.failureDetails)
+        ? payload.failureDetails
+        : [];
 
       setSubscriptionCount(Math.max(0, targetedCount - removedCount));
+      setFailureDetails(nextFailureDetails);
 
       if (targetedCount === 0) {
         setNotice("当前账号还没有任何开启消息提醒的设备，先在要接收通知的设备上打开消息提醒。\n");
@@ -115,6 +130,28 @@ export function PushTestPanel({
           {notice}
         </p>
       ) : null}
+
+      {failureDetails.length > 0 ? (
+        <div className="mt-4 space-y-3">
+          {failureDetails.map((detail, index) => (
+            <div
+              key={`${detail.endpointHost || "unknown"}-${index}`}
+              className="rounded-[20px] bg-[var(--paper-soft)] px-4 py-4 text-sm leading-7 text-[var(--muted)]"
+            >
+              <p className="font-semibold text-[var(--ink)]">
+                {detail.endpointHost || "unknown"}
+                {typeof detail.statusCode === "number"
+                  ? ` · HTTP ${detail.statusCode}`
+                  : ""}
+              </p>
+              <p className="mt-1">
+                {detail.reason || detail.message || "推送发送失败"}
+              </p>
+              {detail.body ? <p className="mt-1 break-all">{detail.body}</p> : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
     </section>
   );
 }