From 1b57b75be0361fa3afc1b48e5ef270d2e5c7b333 Mon Sep 17 00:00:00 2001
From: skycurtain <skycurtain@163.com>
Date: Thu, 8 Oct 2026 22:49:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=9C=AA=E7=99=BB=E8=AE=B0?=
 =?UTF-8?q?=E8=AE=A2=E9=98=85=E6=8F=90=E7=A4=BA=E6=94=B9=E4=B8=BA=E5=8D=95?=
 =?UTF-8?q?=E6=9D=A1=20Alert=20+=20Tag=20=E7=BC=96=E5=8F=B7=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/views/admin/payments-view.vue | 34 ++++++++++++++++++----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/views/admin/payments-view.vue b/apps/web/src/views/admin/payments-view.vue
index 469c911..021c098 100644
--- a/apps/web/src/views/admin/payments-view.vue
+++ b/apps/web/src/views/admin/payments-view.vue
@@ -125,13 +125,22 @@ watch(
     </PageHeader>
 
     <a-alert
-      v-for="id in missingSubs"
-      :key="id"
+      v-if="missingSubs.length"
       type="warning"
       show-icon
-      :message="`观测到订阅 #${id} 有消耗，但尚无对应登记——请核对补录`"
-      style="margin-bottom: 8px"
-    />
+      style="margin-bottom: 16px"
+      :message="`观测到 ${missingSubs.length} 个订阅有消耗但尚无对应登记`"
+      description="若本部署不登记支付，可忽略此提示；需要入账的请核对补录。"
+    >
+      <template #description>
+        <div class="pay-missing__tags">
+          <a-tag v-for="id in missingSubs" :key="id">#{{ id }}</a-tag>
+        </div>
+        <div class="pay-missing__note">
+          若本部署不登记支付，可忽略此提示；需要入账的请核对补录。
+        </div>
+      </template>
+    </a-alert>
 
     <a-empty
       v-if="!paymentsQuery.isPending.value && rows.length === 0"
@@ -191,3 +200,18 @@ watch(
     <PaymentFormModal v-model:open="formOpen" :editing="editing" />
   </section>
 </template>
+
+<style scoped>
+.pay-missing__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.pay-missing__note {
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.65);
+}
+</style>