MetaZone/MetaLab
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目：基础设施 + 用户认证 + 后台管理系统 + AGPL 3.0 许可

Browse Source
This commit is contained in:
Victor Jay
2026-05-26 13:46:33 +08:00
parent 1315df6501
commit 483fdd919f
56 changed files with 5804 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
templates/admin/static/js/common.js Normal file
View File

@ -0,0 +1,122 @@
/* =====================================================
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>`;
}

156
templates/admin/static/js/users.js Normal file
View File

@ -0,0 +1,156 @@
/* =====================================================
MetaLab 管理面板 - 用户管理 JS
单一职责：用户列表渲染、搜索筛选、封禁/解封、强制下线
===================================================== */
let currentPage = 1;
const pageSize = 20;
document.addEventListener('DOMContentLoaded', () => {
loadUsers();
document.getElementById('searchBtn').addEventListener('click', () => {
currentPage = 1;
loadUsers();
});
document.getElementById('searchInput').addEventListener('keydown', (e) => {
if (e.key === 'Enter') { currentPage = 1; loadUsers(); }
});
document.getElementById('roleFilter').addEventListener('change', () => {
currentPage = 1; loadUsers();
});
document.getElementById('statusFilter').addEventListener('change', () => {
currentPage = 1; loadUsers();
});
});
async function loadUsers() {
const keyword = document.getElementById('searchInput').value.trim();
const role = document.getElementById('roleFilter').value;
const status = document.getElementById('statusFilter').value;
const params = new URLSearchParams({
page: currentPage,
page_size: pageSize,
keyword, role, status
});
try {
const res = await api.get('/api/admin/users?' + params);
if (res.success) {
renderTable(res.data.users);
renderPagination(res.data.total, res.data.page);
} else {
showToast(res.message || '加载失败', 'error');
}
} catch (e) {
showToast('网络错误', 'error');
}
}
function renderTable(users) {
const tbody = document.getElementById('userTableBody');
if (!users || users.length === 0) {
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:40px;color:#636e72;">没有找到用户</td></tr>';
return;
}
tbody.innerHTML = users.map(u => `
<tr>
<td class="col-uid">${u.uid}</td>
<td class="col-username">${escapeHtml(u.username)}</td>
<td class="col-email">${escapeHtml(u.email)}</td>
<td class="col-role">${roleLabel(u.role)}</td>
<td class="col-status">${statusLabel(u.status)}</td>
<td class="col-time">${formatTime(u.created_at)}</td>
<td class="col-actions">
<div class="action-group">
${renderActions(u)}
</div>
</td>
</tr>
`).join('');
}
function renderActions(u) {
// 不可操作自己
if (u.uid === window.__currentUid) return '—';
let btns = '';
const isOwner = window.__isOwner || false;
// 封禁/解封按钮
if (u.status === 'active') {
btns += `<button class="btn btn-danger btn-sm" onclick="banUser(${u.uid}, '${escapeHtml(u.username)}')">封禁</button>`;
} else if (u.status === 'banned') {
btns += `<button class="btn btn-outline btn-sm" onclick="unbanUser(${u.uid}, '${escapeHtml(u.username)}')">解封</button>`;
}
// 强制下线按钮
if (u.status === 'active' || u.status === 'banned') {
btns += `<button class="btn btn-outline btn-sm" onclick="resetToken(${u.uid}, '${escapeHtml(u.username)}')">踢下线</button>`;
}
// 删除按钮（仅 owner 可见，且目标不是 locked/deleted）
if (isOwner && u.status !== 'locked' && u.status !== 'deleted') {
btns += `<button class="btn btn-danger btn-sm" onclick="deleteUser(${u.uid}, '${escapeHtml(u.username)}')">删除</button>`;
}
// 解锁按钮（仅 owner 可见，状态为 locked）
if (isOwner && u.status === 'locked') {
btns += `<button class="btn btn-outline btn-sm" onclick="unlockUser(${u.uid}, '${escapeHtml(u.username)}')">解锁</button>`;
}
return btns || '—';
}
async function banUser(uid, username) {
const ok = await showConfirm('封禁用户', `确定要封禁用户「${username}」吗？封禁后该用户将无法登录。`);
if (!ok) return;
const res = await api.put(`/api/admin/users/${uid}/status`, { status: 'banned' });
if (res.success) { showToast(res.message, 'success'); loadUsers(); }
else { showToast(res.message || '操作失败', 'error'); }
}
async function unbanUser(uid, username) {
const ok = await showConfirm('解封用户', `确定要解封用户「${username}」吗？`);
if (!ok) return;
const res = await api.put(`/api/admin/users/${uid}/status`, { status: 'active' });
if (res.success) { showToast(res.message, 'success'); loadUsers(); }
else { showToast(res.message || '操作失败', 'error'); }
}
async function deleteUser(uid, username) {
const ok = await showConfirm('删除用户', `确定要永久删除用户「${username}」吗？此操作不可撤销，该账号将被立即锁定。`);
if (!ok) return;
const res = await api.put(`/api/admin/users/${uid}/status`, { status: 'locked' });
if (res.success) { showToast(res.message, 'success'); loadUsers(); }
else { showToast(res.message || '操作失败', 'error'); }
}
async function unlockUser(uid, username) {
const ok = await showConfirm('解锁用户', `确定要解锁用户「${username}」吗？该账号将恢复为正常状态。`);
if (!ok) return;
const res = await api.put(`/api/admin/users/${uid}/status`, { status: 'active' });
if (res.success) { showToast(res.message, 'success'); loadUsers(); }
else { showToast(res.message || '操作失败', 'error'); }
}
async function resetToken(uid, username) {
const ok = await showConfirm('强制下线', `确定要强制「${username}」下线吗？该用户需要重新登录。`);
if (!ok) return;
const res = await api.post(`/api/admin/users/${uid}/reset-token`);
if (res.success) { showToast(res.message, 'success'); }
else { showToast(res.message || '操作失败', 'error'); }
}
function renderPagination(total, page) {
const totalPages = Math.ceil(total / pageSize);
const bar = document.getElementById('paginationBar');
if (totalPages <= 1) { bar.innerHTML = ''; return; }
let html = `<button onclick="goPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>上一页</button>`;
html += `<span class="page-current">第 ${page} / ${totalPages} 页（共 ${total} 条）</span>`;
html += `<button onclick="goPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>下一页</button>`;
bar.innerHTML = html;
}
function goPage(p) {
currentPage = p;
loadUsers();
window.scrollTo({ top: 0 });
}