From 1638d2c057491bd564942c958d785ca2af217ecd Mon Sep 17 00:00:00 2001 From: huangzhenpc Date: Fri, 6 Mar 2026 01:52:41 +0800 Subject: [PATCH] Merge client_id+token into credential popup, add refund button to actions - Merge client_id and token columns into single "credential" button - Click to view in modal with copy buttons for each - Add refund toggle button in actions row with confirm dialog - Remove separate refund_received column, cleaner layout Co-Authored-By: Claude Opus 4.6 (1M context) --- static/index.html | 34 +++++++++++++++++--- static/script.js | 81 ++++++++++++++++++++++++++++++++++++----------- static/style.css | 39 ++++++++++++++++------- 3 files changed, 119 insertions(+), 35 deletions(-) diff --git a/static/index.html b/static/index.html index 5e8d1c5..d78e8de 100644 --- a/static/index.html +++ b/static/index.html @@ -92,11 +92,9 @@ # 邮箱 密码 - 客户ID - 令牌 + 凭证 支付状态 退款状态 - 退款到账 支付时间 退款时间 封号时间 @@ -107,7 +105,7 @@ - +
暂无邮箱数据，点击"粘贴导入"添加
@@ -367,6 +365,34 @@
+ +
+
+
+
+
+

账户凭证

+

+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + +
+
+
+
diff --git a/static/script.js b/static/script.js index 65904f7..54ac51a 100644 --- a/static/script.js +++ b/static/script.js @@ -131,6 +131,29 @@ class MailManager { } }); + // 凭证弹窗事件 + document.getElementById('closeCredentialBtn').addEventListener('click', () => { + document.getElementById('credentialModal').classList.remove('show'); + }); + document.getElementById('credentialModal').addEventListener('click', (e) => { + if (e.target === e.currentTarget) e.currentTarget.classList.remove('show'); + }); + document.getElementById('copyCredClientIdBtn').addEventListener('click', () => { + this.copyToClipboard(document.getElementById('credClientId').textContent); + }); + document.getElementById('copyCredTokenBtn').addEventListener('click', () => { + this.copyToClipboard(document.getElementById('credToken').textContent); + }); + + // 凭证查看按钮 — 事件委托 + document.getElementById('accountTableBody').addEventListener('click', (e) => { + const btn = e.target.closest('.credential-btn'); + if (!btn) return; + e.preventDefault(); + e.stopPropagation(); + this.showCredentialModal(btn.dataset.credEmail); + }); + // 退款到账按钮 — 事件委托 document.getElementById('accountTableBody').addEventListener('click', (e) => { const btn = e.target.closest('.refund-received-btn'); @@ -257,7 +280,7 @@ class MailManager { async loadAccounts() { const tbody = document.getElementById('accountTableBody'); - tbody.innerHTML = `
加载中...
`; + tbody.innerHTML = `
加载中...
`; try { // 有筛选时加载全部数据，否则分页加载 @@ -277,11 +300,11 @@ class MailManager { await this.loadClaudePaymentStatuses(); this.applyFilterAndRender(); } else { - tbody.innerHTML = `
${this.escapeHtml(result.message || '加载失败')}
`; + tbody.innerHTML = `
${this.escapeHtml(result.message || '加载失败')}
`; } } catch (err) { console.error('加载账号失败:', err); - tbody.innerHTML = `
网络错误
`; + tbody.innerHTML = `
网络错误
`; } } @@ -316,7 +339,7 @@ class MailManager { renderAccounts() { const tbody = document.getElementById('accountTableBody'); if (!this.accounts.length) { - tbody.innerHTML = `
暂无邮箱数据
`; + tbody.innerHTML = `
暂无邮箱数据
`; return; } @@ -347,17 +370,8 @@ class MailManager { ${pwd ? `` : ''} - -
- ${this.truncate(cid, 16)} - ${cid ? `` : ''} -
- -
- ${token ? this.truncate(token, 20) : '-'} - ${token ? `` : ''} -
+ ${this.renderClaudeColumns(email)} @@ -365,6 +379,7 @@ class MailManager { + ${this.renderRefundBtn(email)} @@ -705,6 +720,39 @@ class MailManager { // Claude 支付检测 // ==================================================================== + renderRefundBtn(email) { + const info = this.claudePaymentStatuses[email]; + const isReceived = info && info.refund_received === '1'; + if (isReceived) { + return ``; + } + return ``; + } + + confirmRefundToggle(email) { + const info = this.claudePaymentStatuses[email]; + const isReceived = info && info.refund_received === '1'; + const msg = isReceived + ? `确定将 ${email} 的退款状态改为【未到账】吗？` + : `确定将 ${email} 标记为【退款已到账】吗？`; + if (confirm(msg)) { + this.toggleRefundReceived(email); + } + } + + showCredentialModal(email) { + const data = this._accountDataMap[email]; + if (!data) return; + const cid = data.cid || '-'; + const token = data.token || '-'; + // 复用 paste-modal 样式 + const modal = document.getElementById('credentialModal'); + document.getElementById('credModalEmail').textContent = email; + document.getElementById('credClientId').textContent = cid; + document.getElementById('credToken').textContent = token; + modal.classList.add('show'); + } + async toggleRefundReceived(email) { try { const resp = await fetch(`/api/tools/refund-received/${encodeURIComponent(email)}`, { method: 'POST' }); @@ -739,7 +787,6 @@ class MailManager { if (!info) { return `未检测 未检测 - - - - - @@ -777,12 +824,8 @@ class MailManager { ? `${fmtTime(info.suspended_time)}` : '-'; - const isRefundReceived = info.refund_received === '1'; - const refundReceivedBtn = ``; - return `${paidBadge} ${refundBadge} - ${refundReceivedBtn} ${fmtTime(info.payment_time)} ${fmtTime(info.refund_time)} ${suspendedHtml} diff --git a/static/style.css b/static/style.css index 1b82e79..42511f3 100644 --- a/static/style.css +++ b/static/style.css @@ -437,19 +437,17 @@ body { font-weight: 600; } -.data-table th:nth-child(2) { width: 14%; min-width: 150px; } /* 邮箱 */ +.data-table th:nth-child(2) { width: 16%; min-width: 160px; } /* 邮箱 */ .data-table th:nth-child(3) { width: 6%; min-width: 70px; } /* 密码 */ -.data-table th:nth-child(4) { width: 8%; min-width: 90px; } /* 客户ID */ -.data-table th:nth-child(5) { width: 10%; min-width: 110px; } /* 令牌 */ -.data-table th:nth-child(6) { width: 65px; } /* 支付状态 */ -.data-table th:nth-child(7) { width: 65px; } /* 退款状态 */ -.data-table th:nth-child(8) { width: 65px; } /* 退款到账 */ -.data-table th:nth-child(9) { width: 85px; } /* 支付时间 */ -.data-table th:nth-child(10) { width: 85px; } /* 退款时间 */ -.data-table th:nth-child(11) { width: 85px; } /* 封号时间 */ -.data-table th:nth-child(12) { width: 120px; } /* 备注/卡号 */ -.data-table th:nth-child(13) { width: 150px; } /* 代理 */ -.data-table th:nth-child(14) { width: 190px; } /* 操作 */ +.data-table th:nth-child(4) { width: 55px; } /* 凭证 */ +.data-table th:nth-child(5) { width: 65px; } /* 支付状态 */ +.data-table th:nth-child(6) { width: 65px; } /* 退款状态 */ +.data-table th:nth-child(7) { width: 85px; } /* 支付时间 */ +.data-table th:nth-child(8) { width: 85px; } /* 退款时间 */ +.data-table th:nth-child(9) { width: 85px; } /* 封号时间 */ +.data-table th:nth-child(10) { width: 120px; } /* 备注/卡号 */ +.data-table th:nth-child(11) { width: 150px; } /* 代理 */ +.data-table th:nth-child(12) { width: 220px; } /* 操作 */ /* 单元格内容 */ .value-container { @@ -1318,6 +1316,23 @@ body { } .note-card i { font-size: 10px; } +.cred-value-box { + padding: 10px 14px; + background: rgba(248, 250, 252, 0.8); + border: 1px solid #e5e7eb; + border-radius: 8px; + font-size: 12px; + font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; + color: #334155; + word-break: break-all; + line-height: 1.5; + user-select: all; +} + +.credential-btn { + font-size: 11px !important; +} + .note-fields { display: flex; flex-direction: column;