初始化项目:基础设施 + 用户认证 + 后台管理系统 + AGPL 3.0 许可
This commit is contained in:
30
templates/admin/html/dashboard/index.html
Normal file
30
templates/admin/html/dashboard/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
{{template "admin/layout/base.html" .}}
|
||||
<div class="page-header">
|
||||
<h1>欢迎,{{.Username}}</h1>
|
||||
<p class="page-desc">MetaLab 管理控制面板</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></div>
|
||||
<div class="stat-info"><div class="stat-label">用户总数</div><div class="stat-value">—</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/></svg></div>
|
||||
<div class="stat-info"><div class="stat-label">帖子总数</div><div class="stat-value">—</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
|
||||
<div class="stat-info"><div class="stat-label">当前角色</div><div class="stat-value">{{.Role}}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>快速开始</h3>
|
||||
<ul>
|
||||
<li>在左侧导航选择管理模块</li>
|
||||
<li>使用「用户管理」查看、搜索和封禁用户</li>
|
||||
<li>使用「返回前台」链接回到主站</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{template "admin/layout/footer.html" .}}
|
||||
38
templates/admin/html/layout/base.html
Normal file
38
templates/admin/html/layout/base.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{{if .CSRFToken}}<meta name="csrf-token" content="{{.CSRFToken}}">{{end}}
|
||||
<title>{{.Title}} - MetaLab CP</title>
|
||||
<link rel="stylesheet" href="/admin/static/css/common.css">
|
||||
{{if .ExtraCSS}}
|
||||
<link rel="stylesheet" href="{{.ExtraCSS}}">
|
||||
{{end}}
|
||||
</head>
|
||||
<body>
|
||||
<header class="admin-header">
|
||||
<div class="admin-header-inner">
|
||||
<a href="/admin" class="admin-logo">MetaLab <span>管理面板</span></a>
|
||||
<div class="admin-header-right">
|
||||
<span class="admin-user">{{.Username}}</span>
|
||||
<a href="/" class="admin-back-btn">← 返回前台</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="admin-container">
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<a href="/admin" class="sidebar-item {{if eq .CurrentPath "/admin"}}active{{end}}">
|
||||
<span class="sidebar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></span>
|
||||
管理首页
|
||||
</a>
|
||||
{{if .CanManageUsers}}
|
||||
<a href="/admin/users" class="sidebar-item {{if eq .CurrentPath "/admin/users"}}active{{end}}">
|
||||
<span class="sidebar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></span>
|
||||
用户管理
|
||||
</a>
|
||||
{{end}}
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="admin-main">
|
||||
8
templates/admin/html/layout/footer.html
Normal file
8
templates/admin/html/layout/footer.html
Normal file
@ -0,0 +1,8 @@
|
||||
</main>
|
||||
</div>
|
||||
<script src="/admin/static/js/common.js"></script>
|
||||
{{if .ExtraJS}}
|
||||
<script src="{{.ExtraJS}}"></script>
|
||||
{{end}}
|
||||
</body>
|
||||
</html>
|
||||
50
templates/admin/html/users/index.html
Normal file
50
templates/admin/html/users/index.html
Normal file
@ -0,0 +1,50 @@
|
||||
{{template "admin/layout/base.html" .}}
|
||||
<div class="page-header">
|
||||
<h1>用户管理</h1>
|
||||
<p class="page-desc">搜索、查看和管理本站用户</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索与筛选 -->
|
||||
<div class="filter-bar">
|
||||
<input type="text" id="searchInput" class="filter-input" placeholder="搜索邮箱或用户名..." autocomplete="off">
|
||||
<select id="roleFilter" class="filter-select">
|
||||
<option value="">全部角色</option>
|
||||
<option value="user">普通用户</option>
|
||||
<option value="moderator">版主</option>
|
||||
<option value="admin">管理员</option>
|
||||
<option value="owner">站长</option>
|
||||
</select>
|
||||
<select id="statusFilter" class="filter-select">
|
||||
<option value="">全部状态</option>
|
||||
<option value="active">正常</option>
|
||||
<option value="banned">已封禁</option>
|
||||
<option value="deleted">已注销</option>
|
||||
<option value="locked">已锁定</option>
|
||||
</select>
|
||||
<button id="searchBtn" class="btn btn-primary">搜索</button>
|
||||
</div>
|
||||
|
||||
<!-- 用户表格 -->
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>UID</th>
|
||||
<th>用户名</th>
|
||||
<th>邮箱</th>
|
||||
<th>角色</th>
|
||||
<th>状态</th>
|
||||
<th>注册时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTableBody">
|
||||
<tr class="table-loading"><td colspan="7">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-bar" id="paginationBar"></div>
|
||||
<script>window.__currentUid = {{.UID}}; window.__isOwner = {{if .IsOwner}}true{{else}}false{{end}};</script>
|
||||
{{template "admin/layout/footer.html" .}}
|
||||
295
templates/admin/static/css/common.css
Normal file
295
templates/admin/static/css/common.css
Normal file
@ -0,0 +1,295 @@
|
||||
/* =====================================================
|
||||
MetaLab 管理面板 - 通用样式
|
||||
单一职责:布局、导航、通用组件(按钮/表格/卡片/弹窗等)
|
||||
不包含任何页面特有样式
|
||||
===================================================== */
|
||||
|
||||
/* --- 变量 --- */
|
||||
:root {
|
||||
--bg: #f5f6fa;
|
||||
--bg-card: #ffffff;
|
||||
--text: #2d3436;
|
||||
--text-muted: #636e72;
|
||||
--border: #e0e0e0;
|
||||
--primary: #0984e3;
|
||||
--primary-hover: #0773c5;
|
||||
--danger: #d63031;
|
||||
--danger-hover: #c0392b;
|
||||
--success: #00b894;
|
||||
--warning: #e17055;
|
||||
--sidebar-bg: #1e272e;
|
||||
--sidebar-text: #b2bec3;
|
||||
--sidebar-active: #0984e3;
|
||||
--header-bg: #2d3436;
|
||||
--radius: 6px;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* --- 重置 --- */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
line-height: 1.6;
|
||||
}
|
||||
a { color: var(--primary); text-decoration: none; }
|
||||
a:hover { color: var(--primary-hover); }
|
||||
|
||||
/* --- 顶部导航 --- */
|
||||
.admin-header {
|
||||
background: var(--header-bg);
|
||||
color: #fff;
|
||||
height: 52px;
|
||||
position: fixed; top: 0; left: 0; right: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
.admin-header-inner {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.admin-logo {
|
||||
font-size: 18px; font-weight: 700;
|
||||
color: #fff; letter-spacing: 0.5px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.admin-logo span {
|
||||
font-weight: 400; font-size: 14px;
|
||||
color: var(--sidebar-text);
|
||||
}
|
||||
.admin-logo:hover { color: #fff; }
|
||||
.admin-header-right {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.admin-user { color: #dfe6e9; font-size: 13px; }
|
||||
.admin-back-btn {
|
||||
font-size: 12px; color: #b2bec3;
|
||||
padding: 4px 10px; border: 1px solid #636e72;
|
||||
border-radius: 4px; transition: all 0.2s;
|
||||
}
|
||||
.admin-back-btn:hover { color: #fff; border-color: #fff; }
|
||||
|
||||
/* --- 整体布局 --- */
|
||||
.admin-container {
|
||||
display: flex;
|
||||
margin-top: 52px;
|
||||
min-height: calc(100vh - 52px);
|
||||
}
|
||||
|
||||
/* --- 侧边栏 --- */
|
||||
.admin-sidebar {
|
||||
width: 200px; min-width: 200px;
|
||||
background: var(--sidebar-bg);
|
||||
padding: 16px 0;
|
||||
position: sticky; top: 52px;
|
||||
height: calc(100vh - 52px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 20px;
|
||||
color: var(--sidebar-text);
|
||||
font-size: 13px;
|
||||
transition: all 0.15s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.sidebar-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.sidebar-item.active {
|
||||
color: #fff; background: rgba(9,132,227,0.2);
|
||||
border-left-color: var(--sidebar-active);
|
||||
}
|
||||
.sidebar-icon { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-icon svg { width: 100%; height: 100%; }
|
||||
|
||||
/* --- 主内容区 --- */
|
||||
.admin-main {
|
||||
flex: 1; padding: 28px 32px;
|
||||
max-width: 1200px; min-width: 0;
|
||||
}
|
||||
|
||||
/* --- 页面标题 --- */
|
||||
.page-header { margin-bottom: 24px; }
|
||||
.page-header h1 { font-size: 22px; font-weight: 600; color: var(--text); }
|
||||
.page-desc { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
|
||||
|
||||
/* --- 统计卡片 --- */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.stat-icon {
|
||||
width: 44px; height: 44px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.stat-icon svg { width: 24px; height: 24px; }
|
||||
.stat-blue { background: #e3f2fd; color: var(--primary); }
|
||||
.stat-green { background: #e8f5e9; color: var(--success); }
|
||||
.stat-orange { background: #fff3e0; color: var(--warning); }
|
||||
.stat-label { font-size: 12px; color: var(--text-muted); }
|
||||
.stat-value { font-size: 22px; font-weight: 600; color: var(--text); }
|
||||
|
||||
/* --- 信息卡片 --- */
|
||||
.info-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 24px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.info-card h3 { font-size: 16px; margin-bottom: 12px; }
|
||||
.info-card ul { padding-left: 20px; color: var(--text-muted); font-size: 13px; line-height: 2; }
|
||||
|
||||
/* --- 筛选栏 --- */
|
||||
.filter-bar {
|
||||
display: flex; gap: 10px; margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-input {
|
||||
flex: 1; min-width: 180px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.filter-input:focus { border-color: var(--primary); }
|
||||
.filter-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-select:focus { border-color: var(--primary); }
|
||||
|
||||
/* --- 按钮 --- */
|
||||
.btn {
|
||||
padding: 8px 18px; border: none; border-radius: var(--radius);
|
||||
font-size: 13px; cursor: pointer; transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-primary { background: var(--primary); color: #fff; }
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.btn-danger { background: var(--danger); color: #fff; }
|
||||
.btn-danger:hover { background: var(--danger-hover); }
|
||||
.btn-sm { padding: 5px 12px; font-size: 12px; }
|
||||
.btn-outline {
|
||||
background: transparent; border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* --- 表格容器 --- */
|
||||
.table-container {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* --- 数据表格 --- */
|
||||
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.data-table th {
|
||||
text-align: left; padding: 12px 16px;
|
||||
background: #fafafa; color: var(--text-muted);
|
||||
font-weight: 600; font-size: 12px; text-transform: uppercase;
|
||||
letter-spacing: 0.5px; border-bottom: 2px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.data-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data-table tbody tr:hover { background: #f8f9ff; }
|
||||
.table-loading td { text-align: center; padding: 40px; color: var(--text-muted); }
|
||||
|
||||
/* --- 状态标签 --- */
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px;
|
||||
border-radius: 12px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge-active { background: #e8f5e9; color: var(--success); }
|
||||
.badge-banned { background: #ffebee; color: var(--danger); }
|
||||
.badge-deleted { background: #fff3e0; color: var(--warning); }
|
||||
.badge-locked { background: #eceff1; color: #546e7a; }
|
||||
|
||||
/* --- 角色标签 --- */
|
||||
.role-tag {
|
||||
display: inline-block; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.role-user { background: #e3f2fd; color: #1976d2; }
|
||||
.role-moderator { background: #e8f5e9; color: #2e7d32; }
|
||||
.role-admin { background: #fce4ec; color: #c62828; }
|
||||
.role-owner { background: #fff3e0; color: #e65100; }
|
||||
|
||||
/* --- 操作按钮组 --- */
|
||||
.action-group { display: flex; gap: 6px; }
|
||||
|
||||
/* --- 分页 --- */
|
||||
.pagination-bar {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 8px; margin-top: 20px;
|
||||
}
|
||||
.pagination-bar button {
|
||||
padding: 6px 14px; border: 1px solid var(--border);
|
||||
background: #fff; border-radius: 4px; font-size: 13px;
|
||||
cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.pagination-bar button:hover:not(:disabled) {
|
||||
border-color: var(--primary); color: var(--primary);
|
||||
}
|
||||
.pagination-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.pagination-bar .page-current {
|
||||
padding: 6px 14px; font-size: 13px; color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* --- 确认弹窗 --- */
|
||||
.modal-overlay {
|
||||
display: none; position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.4); z-index: 200;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.modal-overlay.show { display: flex; }
|
||||
.modal-box {
|
||||
background: #fff; border-radius: 8px;
|
||||
padding: 28px 32px; min-width: 340px;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
.modal-box h3 { margin-bottom: 12px; font-size: 17px; }
|
||||
.modal-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
|
||||
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
|
||||
/* --- Toast 通知 --- */
|
||||
.toast-container {
|
||||
position: fixed; top: 64px; right: 20px;
|
||||
z-index: 300; display: flex; flex-direction: column; gap: 8px;
|
||||
}
|
||||
.toast {
|
||||
padding: 12px 20px; border-radius: 6px;
|
||||
font-size: 13px; color: #fff; font-weight: 500;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
animation: toastIn 0.3s ease;
|
||||
max-width: 360px;
|
||||
}
|
||||
.toast-success { background: var(--success); }
|
||||
.toast-error { background: var(--danger); }
|
||||
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
|
||||
12
templates/admin/static/css/users.css
Normal file
12
templates/admin/static/css/users.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* =====================================================
|
||||
MetaLab 管理面板 - 用户管理页样式
|
||||
单一职责:仅用户管理页面特有样式
|
||||
===================================================== */
|
||||
|
||||
.data-table .col-uid { width: 60px; }
|
||||
.data-table .col-username { width: 120px; }
|
||||
.data-table .col-email { min-width: 180px; }
|
||||
.data-table .col-role { width: 90px; }
|
||||
.data-table .col-status { width: 90px; }
|
||||
.data-table .col-time { width: 140px; }
|
||||
.data-table .col-actions { width: 160px; }
|
||||
122
templates/admin/static/js/common.js
Normal file
122
templates/admin/static/js/common.js
Normal 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
156
templates/admin/static/js/users.js
Normal 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 });
|
||||
}
|
||||
Reference in New Issue
Block a user