123 lines
3.9 KiB
JavaScript
123 lines
3.9 KiB
JavaScript
/* =====================================================
|
||
MetaLab 管理面板 - 通用 JS
|
||
单一职责：AJAX 封装、Toast 通知、确认弹窗
|
||
不包含任何页面特有逻辑
|
||
===================================================== */
|
||
|
||
// --- AJAX 封装 ---
|
||
const api = {
|
||
async get(url) {
|
||
const res = await fetch(url, {
|
||
headers: { 'Accept': 'application/json' }
|
||
});
|
||
return res.json();
|
||
},
|
||
async put(url, body) {
|
||
const res = await fetch(url, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-Token': getCSRFToken()
|
||
},
|
||
body: JSON.stringify(body)
|
||
});
|
||
return res.json();
|
||
},
|
||
async post(url, body) {
|
||
const res = await fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-Token': getCSRFToken()
|
||
},
|
||
body: body ? JSON.stringify(body) : undefined
|
||
});
|
||
return res.json();
|
||
}
|
||
};
|
||
|
||
function getCSRFToken() {
|
||
const meta = document.querySelector('meta[name="csrf-token"]');
|
||
return meta ? meta.getAttribute('content') : '';
|
||
}
|
||
|
||
// --- Toast 通知 ---
|
||
function showToast(message, type) {
|
||
const container = document.querySelector('.toast-container') || createToastContainer();
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast toast-${type}`;
|
||
toast.textContent = message;
|
||
container.appendChild(toast);
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
toast.style.transition = 'opacity 0.3s';
|
||
setTimeout(() => toast.remove(), 300);
|
||
}, 3000);
|
||
}
|
||
|
||
function createToastContainer() {
|
||
const el = document.createElement('div');
|
||
el.className = 'toast-container';
|
||
document.body.appendChild(el);
|
||
return el;
|
||
}
|
||
|
||
// --- 确认弹窗 ---
|
||
function showConfirm(title, message) {
|
||
return new Promise((resolve) => {
|
||
const overlay = document.createElement('div');
|
||
overlay.className = 'modal-overlay show';
|
||
overlay.innerHTML = `
|
||
<div class="modal-box">
|
||
<h3>${escapeHtml(title)}</h3>
|
||
<p>${escapeHtml(message)}</p>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-outline" id="modalCancel">取消</button>
|
||
<button class="btn btn-danger" id="modalConfirm">确认</button>
|
||
</div>
|
||
</div>`;
|
||
document.body.appendChild(overlay);
|
||
|
||
overlay.querySelector('#modalCancel').onclick = () => {
|
||
overlay.remove();
|
||
resolve(false);
|
||
};
|
||
overlay.querySelector('#modalConfirm').onclick = () => {
|
||
overlay.remove();
|
||
resolve(true);
|
||
};
|
||
overlay.addEventListener('click', (e) => {
|
||
if (e.target === overlay) { overlay.remove(); resolve(false); }
|
||
});
|
||
});
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// --- 时间格式化 ---
|
||
function formatTime(isoStr) {
|
||
if (!isoStr) return '—';
|
||
const d = new Date(isoStr);
|
||
return d.getFullYear() + '-' +
|
||
String(d.getMonth() + 1).padStart(2, '0') + '-' +
|
||
String(d.getDate()).padStart(2, '0') + ' ' +
|
||
String(d.getHours()).padStart(2, '0') + ':' +
|
||
String(d.getMinutes()).padStart(2, '0');
|
||
}
|
||
|
||
// --- 角色标签 ---
|
||
function roleLabel(role) {
|
||
const map = { user: '普通用户', moderator: '版主', admin: '管理员', owner: '站长' };
|
||
return `<span class="role-tag role-${role}">${map[role] || role}</span>`;
|
||
}
|
||
|
||
// --- 状态标签 ---
|
||
function statusLabel(status) {
|
||
const map = { active: '正常', banned: '已封禁', deleted: '已注销', locked: '已锁定' };
|
||
return `<span class="badge badge-${status}">${map[status] || status}</span>`;
|
||
}
|