Add notification system for Claude payment status changes

Detect refund/suspension status changes and generate notifications
stored in Redis. Bell icon in navbar shows unread count badge,
click to expand dropdown with dismiss per-item or read-all.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/script.js

@@ -58,7 +58,9 @@ class MailManager {
     init() {
         this.bindAccountEvents();
         this.bindEmailEvents();
+        this.bindNotificationEvents();
         this.loadAccounts();
+        this.loadNotifications();
     }
 
     // ====================================================================
@@ -1215,6 +1217,7 @@ class MailManager {
                         } else if (data.type === 'done') {
                             btn.innerHTML = '<i class="bi bi-check-circle"></i><span>完成</span>';
                             setTimeout(() => { btn.innerHTML = origHtml; btn.disabled = false; }, 2000);
+                            this.loadNotifications();
                         }
                     } catch (e) {}
                 }
@@ -1245,6 +1248,7 @@ class MailManager {
                 };
                 this.updateClaudeBadgeInTable(email);
                 this.showToast(`${email} 检测完成: ${result.data.status}`, 'success');
+                this.loadNotifications();
             } else {
                 this.showToast(result.message || '检测失败', 'danger');
             }
@@ -1278,6 +1282,106 @@ class MailManager {
         }
     }
 
+    // ====================================================================
+    // 通知系统
+    // ====================================================================
+
+    bindNotificationEvents() {
+        const btn = document.getElementById('notificationBtn');
+        const dropdown = document.getElementById('notifDropdown');
+
+        // 铃铛点击切换下拉面板
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const visible = dropdown.style.display !== 'none';
+            dropdown.style.display = visible ? 'none' : 'flex';
+        });
+
+        // 点击页面其他位置关闭
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.notification-wrapper')) {
+                dropdown.style.display = 'none';
+            }
+        });
+
+        // 全部已读
+        document.getElementById('notifReadAll').addEventListener('click', () => this.dismissAllNotifications());
+    }
+
+    async loadNotifications() {
+        try {
+            const resp = await fetch('/api/notifications');
+            const result = await resp.json();
+            if (result.success) {
+                this.renderNotifications(result.data || []);
+            }
+        } catch (e) {
+            console.error('加载通知失败:', e);
+        }
+    }
+
+    renderNotifications(list) {
+        const badge = document.getElementById('notifBadge');
+        const listEl = document.getElementById('notifList');
+
+        // 更新角标
+        if (list.length > 0) {
+            badge.textContent = list.length;
+            badge.style.display = 'flex';
+        } else {
+            badge.style.display = 'none';
+        }
+
+        // 渲染列表
+        if (list.length === 0) {
+            listEl.innerHTML = '<div class="notif-empty"><i class="bi bi-bell-slash"></i>暂无通知</div>';
+            return;
+        }
+
+        listEl.innerHTML = list.map(n => {
+            const icon = n.type === 'suspension' ? 'bi-exclamation-triangle-fill' : 'bi-arrow-return-left';
+            return `
+                <div class="notif-item ${n.type}">
+                    <div class="notif-icon"><i class="bi ${icon}"></i></div>
+                    <div class="notif-content">
+                        <div class="notif-message">${this.escapeHtml(n.message)}</div>
+                        <div class="notif-time">${n.created_at}</div>
+                    </div>
+                    <button class="notif-close" onclick="app.dismissNotification('${n.id}')" title="已读">
+                        <i class="bi bi-x"></i>
+                    </button>
+                </div>
+            `;
+        }).join('');
+    }
+
+    async dismissNotification(id) {
+        try {
+            await fetch('/api/notifications/dismiss', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id })
+            });
+            this.loadNotifications();
+        } catch (e) {
+            console.error('移除通知失败:', e);
+        }
+    }
+
+    async dismissAllNotifications() {
+        try {
+            await fetch('/api/notifications/dismiss', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ all: true })
+            });
+            this.loadNotifications();
+            document.getElementById('notifDropdown').style.display = 'none';
+        } catch (e) {
+            console.error('清除通知失败:', e);
+        }
+    }
+
     // ====================================================================
     // 工具方法
     // ====================================================================