feat: prompt/confirm 替换为自定义弹窗
- shared/utils.js 新增 showConfirm()/showPrompt() 通用函数(inline CSS,无需额外样式) - admin/common.js 移除重复 showConfirm(),统一使用 utils.js - admin/posts.js: 3 处 confirm/prompt 替换(审核/退回/锁定) - admin/comments.js: 1 处 confirm 替换 - settings/index.html: 4 处 confirm + 1 处 prompt 替换 - studio/posts.html + drafts.html: 3 处 confirm 替换 - post-view.js + login.js + post-favorite.js: 3 处 confirm 替换
This commit is contained in:
@ -91,6 +91,91 @@ function api(method, url, data) {
|
||||
return fetch(url, opts).then(function (r) { return r.json(); });
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认弹窗 — 替代原生 confirm(),统一全站风格
|
||||
* @param {string} title — 弹窗标题
|
||||
* @param {string} message — 提示消息(支持 \n 换行)
|
||||
* @returns {Promise<boolean>} 用户确认返回 true,取消返回 false
|
||||
*/
|
||||
function showConfirm(title, message) {
|
||||
return new Promise(function(resolve) {
|
||||
var safeTitle = escapeHtml(title);
|
||||
var safeMsg = escapeHtml(message).replace(/\n/g, '<br>');
|
||||
|
||||
var overlay = document.createElement('div');
|
||||
overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9998;display:flex;align-items:center;justify-content:center;';
|
||||
overlay.innerHTML = '<div style="background:#fff;border-radius:8px;padding:28px 32px;min-width:320px;max-width:440px;box-shadow:0 8px 30px rgba(0,0,0,0.15);">'
|
||||
+ '<h3 style="margin:0 0 12px 0;font-size:17px;color:#2d3436;">' + safeTitle + '</h3>'
|
||||
+ '<p style="margin:0 0 20px 0;font-size:14px;line-height:1.6;color:#636e72;">' + safeMsg + '</p>'
|
||||
+ '<div style="display:flex;gap:10px;justify-content:flex-end;">'
|
||||
+ '<button id="mlbModalCancel" style="padding:8px 20px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;font-size:14px;cursor:pointer;">取消</button>'
|
||||
+ '<button id="mlbModalConfirm" style="padding:8px 20px;border:none;border-radius:6px;background:#dc2626;color:#fff;font-size:14px;cursor:pointer;">确认</button>'
|
||||
+ '</div></div>';
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
function close(val) {
|
||||
overlay.remove();
|
||||
resolve(val);
|
||||
}
|
||||
|
||||
overlay.querySelector('#mlbModalCancel').onclick = function() { close(false); };
|
||||
overlay.querySelector('#mlbModalConfirm').onclick = function() { close(true); };
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) close(false);
|
||||
});
|
||||
// Enter 键确认
|
||||
var onKey = function(e) {
|
||||
if (e.key === 'Enter') { document.removeEventListener('keydown', onKey); close(true); }
|
||||
if (e.key === 'Escape') { document.removeEventListener('keydown', onKey); close(false); }
|
||||
};
|
||||
document.addEventListener('keydown', onKey);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入弹窗 — 替代原生 prompt(),统一全站风格
|
||||
* @param {string} message — 提示文本
|
||||
* @param {string} [defaultValue=''] — 输入框默认值
|
||||
* @returns {Promise<string|null>} 用户输入的值,取消返回 null
|
||||
*/
|
||||
function showPrompt(message, defaultValue) {
|
||||
return new Promise(function(resolve) {
|
||||
var safeMsg = escapeHtml(message);
|
||||
|
||||
var overlay = document.createElement('div');
|
||||
overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9998;display:flex;align-items:center;justify-content:center;';
|
||||
overlay.innerHTML = '<div style="background:#fff;border-radius:8px;padding:28px 32px;min-width:320px;max-width:440px;box-shadow:0 8px 30px rgba(0,0,0,0.15);">'
|
||||
+ '<p style="margin:0 0 16px 0;font-size:14px;line-height:1.6;color:#2d3436;">' + safeMsg + '</p>'
|
||||
+ '<input id="mlbPromptInput" type="text" style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#2d3436;outline:none;box-sizing:border-box;" value="' + escapeHtml(defaultValue || '') + '" placeholder="">'
|
||||
+ '<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px;">'
|
||||
+ '<button id="mlbPromptCancel" style="padding:8px 20px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;font-size:14px;cursor:pointer;">取消</button>'
|
||||
+ '<button id="mlbPromptConfirm" style="padding:8px 20px;border:none;border-radius:6px;background:#0984e3;color:#fff;font-size:14px;cursor:pointer;">确认</button>'
|
||||
+ '</div></div>';
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
var input = overlay.querySelector('#mlbPromptInput');
|
||||
|
||||
function close(val) {
|
||||
overlay.remove();
|
||||
resolve(val);
|
||||
}
|
||||
|
||||
overlay.querySelector('#mlbPromptCancel').onclick = function() { close(null); };
|
||||
overlay.querySelector('#mlbPromptConfirm').onclick = function() { close(input.value); };
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) close(null);
|
||||
});
|
||||
// Enter 确认,Escape 取消
|
||||
var onKey = function(e) {
|
||||
if (e.key === 'Enter') { document.removeEventListener('keydown', onKey); close(input.value); }
|
||||
if (e.key === 'Escape') { document.removeEventListener('keydown', onKey); close(null); }
|
||||
};
|
||||
document.addEventListener('keydown', onKey);
|
||||
// 自动聚焦输入框
|
||||
setTimeout(function() { input.focus(); input.select(); }, 50);
|
||||
});
|
||||
}
|
||||
|
||||
// 全局头像图片加载失败回退(替代 onerror 内联事件,满足 CSP 无 unsafe-inline)
|
||||
document.addEventListener('error', function(e) {
|
||||
var img = e.target;
|
||||
|
||||
Reference in New Issue
Block a user