diff --git a/static/index.html b/static/index.html index 984587c..6e0b3db 100644 --- a/static/index.html +++ b/static/index.html @@ -55,6 +55,14 @@ Claude检测 + diff --git a/static/script.js b/static/script.js index 01e0d36..4ff870b 100644 --- a/static/script.js +++ b/static/script.js @@ -50,6 +50,7 @@ class MailManager { this.messages = []; this.selectedId = null; this.claudePaymentStatuses = {}; + this.paymentFilter = ''; this.init(); } @@ -104,6 +105,13 @@ class MailManager { // Claude支付检测 document.getElementById('claudePaymentBtn').addEventListener('click', () => this.startClaudePaymentCheck()); + // 支付状态筛选 + document.getElementById('paymentFilter').addEventListener('change', (e) => { + this.paymentFilter = e.target.value; + this.page = 1; + this.loadAccounts(); + }); + // 刷新 document.getElementById('refreshAccountsBtn').addEventListener('click', () => this.loadAccounts()); @@ -242,22 +250,22 @@ class MailManager { tbody.innerHTML = `
加载中...
`; try { - const params = new URLSearchParams({ - page: this.page, - page_size: this.pageSize - }); + // 有筛选时加载全部数据,否则分页加载 + const params = new URLSearchParams( + this.paymentFilter + ? { page: 1, page_size: 9999 } + : { page: this.page, page_size: this.pageSize } + ); if (this.query) params.set('q', this.query); const resp = await fetch(`/api/accounts/detailed?${params}`); const result = await resp.json(); if (result.success && result.data) { - this.accounts = result.data.items || []; - this.total = result.data.total || 0; - this.page = result.data.page || 1; + this._allAccounts = result.data.items || []; + this._allTotal = result.data.total || 0; await this.loadClaudePaymentStatuses(); - this.renderAccounts(); - this.renderPager(); + this.applyFilterAndRender(); } else { tbody.innerHTML = `
${this.escapeHtml(result.message || '加载失败')}
`; } @@ -267,6 +275,32 @@ class MailManager { } } + _matchPaymentFilter(email) { + const info = this.claudePaymentStatuses[email]; + switch (this.paymentFilter) { + case 'paid': return info && !!info.payment_time; + case 'unpaid': return !info || !info.payment_time; + case 'refunded': return info && !!info.refund_time; + case 'suspended': return info && !!info.suspended_time; + case 'unchecked': return !info; + default: return true; + } + } + + applyFilterAndRender() { + if (this.paymentFilter) { + const filtered = this._allAccounts.filter(acc => this._matchPaymentFilter(acc.email)); + this.total = filtered.length; + const start = (this.page - 1) * this.pageSize; + this.accounts = filtered.slice(start, start + this.pageSize); + } else { + this.accounts = this._allAccounts; + this.total = this._allTotal; + } + this.renderAccounts(); + this.renderPager(); + } + renderAccounts() { const tbody = document.getElementById('accountTableBody'); if (!this.accounts.length) { diff --git a/static/style.css b/static/style.css index 8b8e181..24baabf 100644 --- a/static/style.css +++ b/static/style.css @@ -219,6 +219,27 @@ body { height: 38px; } +/* 筛选下拉 */ +.filter-select { + height: 38px; + padding: 0 12px; + border: 2px solid #e5e7eb; + border-radius: 8px; + font-size: 13px; + font-weight: 600; + color: #475569; + background: rgba(255, 255, 255, 0.8); + outline: none; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.filter-select:focus { + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + .search-box input::placeholder { color: #9ca3af; } .search-box input:focus { border-color: #667eea;