Replace native confirm dialogs with custom styled modal

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-06 01:55:49 +08:00
parent c032b79a16
commit 688d200d2c
2 changed files with 34 additions and 4 deletions

View File

@@ -393,6 +393,19 @@
</div>
</div>
<!-- 确认弹窗 -->
<div class="paste-modal" id="confirmModal">
<div class="paste-modal-content" style="max-width:380px;text-align:center;">
<div class="paste-modal-icon" id="confirmIcon" style="margin:0 auto 1rem;"><i class="bi bi-question-circle"></i></div>
<h3 class="paste-modal-title" id="confirmTitle" style="margin-bottom:8px;">确认操作</h3>
<p class="paste-modal-subtitle" id="confirmMessage" style="margin-bottom:1.5rem;"></p>
<div class="paste-modal-buttons" style="justify-content:center;">
<button class="btn btn-cancel" id="confirmCancelBtn">取消</button>
<button class="btn btn-primary" id="confirmOkBtn"><i class="bi bi-check2"></i> 确定</button>
</div>
</div>
</div>
<!-- Toast 提示 -->
<div class="toast-container" id="toastContainer"></div>

View File

@@ -498,7 +498,10 @@ class MailManager {
}
async deleteAccount(email) {
if (!confirm(`确定要删除账号 ${email} 吗?`)) return;
this.showConfirm(`确定要删除账号 ${email} 吗?`, () => this._doDeleteAccount(email), '删除确认');
}
async _doDeleteAccount(email) {
try {
const resp = await fetch(`/api/account/${encodeURIComponent(email)}`, { method: 'DELETE' });
@@ -737,9 +740,23 @@ class MailManager {
const msg = isReceived
? `确定将 ${email} 的退款状态改为【未到账】吗?`
: `确定将 ${email} 标记为【退款已到账】吗?`;
if (confirm(msg)) {
this.toggleRefundReceived(email);
}
this.showConfirm(msg, () => this.toggleRefundReceived(email));
}
showConfirm(message, onOk, title = '确认操作') {
const modal = document.getElementById('confirmModal');
document.getElementById('confirmTitle').textContent = title;
document.getElementById('confirmMessage').textContent = message;
modal.classList.add('show');
const okBtn = document.getElementById('confirmOkBtn');
const cancelBtn = document.getElementById('confirmCancelBtn');
const close = () => modal.classList.remove('show');
const onConfirm = () => { close(); onOk(); };
okBtn.onclick = onConfirm;
cancelBtn.onclick = close;
modal.onclick = (e) => { if (e.target === modal) close(); };
}
showCredentialModal(email) {