From 9b8124a4eaeb9844e5ffa21f492ac8c8e2315e7c Mon Sep 17 00:00:00 2001
From: CieanYau <ltd@crash.work>
Date: Sat, 7 Nov 2026 04:00:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=8C=BA=E5=88=86?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5=E4=B8=8E?=
 =?UTF-8?q?=E7=A9=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layouts/default.vue           | 22 ++++++++-
 app/lib/useMailbox.js             | 15 ++++--
 tests/review-mailbox.e2e.test.mjs | 77 +++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 tests/review-mailbox.e2e.test.mjs

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3312f30..2c5519e 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -244,6 +244,7 @@ const userItems = computed(() => [
 const {
   count: unreadCount,
   recent: recentMessages,
+  status: mailboxStatus,
   refresh: refreshMailbox,
 } = useMailbox();
 const mailboxOpen = ref(false);
@@ -672,7 +673,26 @@ useHead(() => ({
         :draggable="false"
       >
         <div class="mail-pop">
-          <div v-if="recentMessages.length" class="mail-pop-list">
+          <div
+            v-if="mailboxStatus === 'loading' || mailboxStatus === 'idle'"
+            class="mail-pop-empty"
+            role="status"
+          >
+            正在加载通知…
+          </div>
+          <div
+            v-else-if="mailboxStatus === 'error'"
+            class="mail-pop-empty"
+            role="alert"
+          >
+            <Icon name="lucide:triangle-alert" aria-hidden="true" />
+            <strong>通知暂时不可用</strong>
+            <span>加载失败，请重试</span>
+            <button type="button" class="mail-pop-foot" @click="refreshMailbox">
+              重新加载通知
+            </button>
+          </div>
+          <div v-else-if="recentMessages.length" class="mail-pop-list">
             <button
               v-for="message in recentMessages"
               :key="message.id"
diff --git a/app/lib/useMailbox.js b/app/lib/useMailbox.js
index a93c4d1..c4eafa9 100644
--- a/app/lib/useMailbox.js
+++ b/app/lib/useMailbox.js
@@ -7,6 +7,7 @@ function i() {
   let i = useState(`mail-unread-count`, () => 0),
     a = useState(`mail-recent`, () => []),
     o = useState(`mail-types`, () => []),
+    status = useState(`mail-status`, () => `idle`),
     s = useState(`mail-session`, () => null),
     c = useState(`mail-request-id`, () => 0),
     l = useAuth(),
@@ -19,31 +20,37 @@ function i() {
         (c.value += 1),
         (i.value = 0),
         (a.value = []),
-        (o.value = []));
+        (o.value = []),
+        (status.value = `idle`));
     },
     {
       immediate: !0,
       flush: `sync`,
     },
   );
-  // 接口现有摘要位于 credit_limit 字段；失败保留本会话既有摘要，不中断页面主流程。
+  // 失败可保留本会话摘要，但必须显式标为不可用；只有成功的空结果才是暂无通知。
   async function d() {
     if (!l.token) return;
     let e = l.token,
       t = ++c.value;
+    status.value = `loading`;
     try {
       let n = await u.get(`/client_care/mail`);
       if (e !== l.token || t !== c.value) return;
       let r = n?.credit_limit;
       ((i.value = Number(r?.count ?? 0)),
         (a.value = r?.list ?? []),
-        (o.value = r?.type ?? []));
-    } catch {}
+        (o.value = r?.type ?? []),
+        (status.value = `success`));
+    } catch {
+      if (e === l.token && t === c.value) status.value = `error`;
+    }
   }
   return {
     count: i,
     recent: a,
     types: o,
+    status,
     refresh: d,
   };
 }
diff --git a/tests/review-mailbox.e2e.test.mjs b/tests/review-mailbox.e2e.test.mjs
new file mode 100644
index 0000000..e0cf8a2
--- /dev/null
+++ b/tests/review-mailbox.e2e.test.mjs
@@ -0,0 +1,77 @@
+/** 通知摘要失败、加载和空结果必须在真实外壳内明确区分。 */
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { backendOrigin, login, scenario } from "./helpers/console-browser.mjs";
+
+test("Failed notification summaries expose retry instead of an empty inbox", (t) =>
+  scenario(t, {}, async (page) => {
+    let retry = false;
+    let release;
+    const pending = new Promise((resolve) => (release = resolve));
+    await page
+      .context()
+      .route(`${backendOrigin}/console/v1/client_care/mail`, async (route) => {
+        if (retry) await pending;
+        await route.fulfill({
+          json: retry
+            ? {
+                status: 200,
+                msg: "",
+                data: {
+                  credit_limit: {
+                    count: 1,
+                    list: [
+                      {
+                        id: 7,
+                        title: "待处理通知",
+                        read: 0,
+                        create_time: 1700000000,
+                      },
+                    ],
+                    type: [],
+                  },
+                },
+              }
+            : { status: 503, msg: "通知服务暂不可用", data: {} },
+        });
+      });
+    await login(page);
+    await page.getByRole("button", { name: "查看消息", exact: true }).click();
+    const dialog = page.getByRole("dialog", { name: "事件通知", exact: true });
+    await dialog.getByRole("alert").waitFor();
+    assert.equal(
+      await dialog.getByText("暂无事件通知", { exact: true }).count(),
+      0,
+    );
+    retry = true;
+    await dialog
+      .getByRole("button", { name: "重新加载通知", exact: true })
+      .click();
+    await dialog.getByRole("status").waitFor();
+    assert.equal(await dialog.getByRole("alert").count(), 0);
+    assert.equal(
+      await dialog.getByText("暂无事件通知", { exact: true }).count(),
+      0,
+    );
+    release();
+    await dialog
+      .getByRole("button", { name: "待处理通知", exact: false })
+      .waitFor();
+    assert.equal(await dialog.getByRole("status").count(), 0);
+    return {
+      unavailableNotEmpty: true,
+      pendingNotEmpty: true,
+      explicitRetryRecovered: true,
+    };
+  }));
+
+test("A successful empty notification summary remains a genuine empty inbox", (t) =>
+  scenario(t, {}, async (page) => {
+    await login(page);
+    await page.getByRole("button", { name: "查看消息", exact: true }).click();
+    const dialog = page.getByRole("dialog", { name: "事件通知", exact: true });
+    await dialog.getByText("暂无事件通知", { exact: true }).waitFor();
+    assert.equal(await dialog.getByRole("alert").count(), 0);
+    assert.equal(await dialog.getByRole("status").count(), 0);
+    return { successfulEmptySummary: true, falseFailure: false };
+  }));