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;