feat: 消息通知中心 + 账号安全体系 + Bug修复
## 新增功能 ### 消息通知中心 (全新模块) - 新增 MessageController / NotificationService / NotificationRepo - SSR 消息页面 (/messages)：左侧边栏 + 右侧卡片列表，noindex 元标签 - 通知能力：列表分页、单条标为已读、一键全部标为已读 - 未读数角标 (1/66/99+)：侧边栏 + 导航栏铃铛图标 - 导航栏轮询 /api/messages/unread 每 60 秒刷新未读数 - 审核通过/驳回时自动 fire-and-forget 推送通知 ### 密码修改 - ChangePassword：验证当前密码 → 新密码强度校验(8位+字母+数字) → 哈希更新 - 修改后递增 token_version 强制所有设备退登 ### 账号自助注销 - DeleteAccount：验证密码 → 设置 deleted 状态 → 记录原因 → 吊销 JWT - 注销后登录二次确认：Login 检测 deleted → 返回 confirm_restore - ConfirmRestore 恢复账号，重新签发 token - 注销页文案："账号将在 7 天后正式注销，期间可随时重新登录恢复" ### IP 审计记录 - 注册时记录 RegIP，登录时记录 LastLoginIP + LastLoginAt - clientIP() 支持 X-Forwarded-For / X-Real-IP 反向代理 ### 安全加固 - Login 防时序攻击：用户不存在时仍执行完整 bcrypt 比对 - FindByEmail 改用 Unscoped() 覆盖软删除用户 - 站长 (owner) 不允许自主注销，避免权限体系死锁 ## Bug 修复 1. 注销按钮不触发：JS IIFE 中 profile 代码 return 阻塞了 account 标签页处理器注册 → 拆分为两层 IIFE，profile 放在内层 2. label 缺少 for 属性导致控制台警告 → 全部补充 for 属性 3. 注销后未自动退登：DeleteAccount 只设状态未吊销 JWT → 末尾加 InvalidateSessions 4. 退登后重定向 500 panic：authenticateToken 中 err||versionMismatch 合并判断 在 err=nil 但版本不匹配时返回 (nil,nil) → 拆为两个独立判断 injectUserContext 增加 claims==nil / 类型断言空安全守卫 5. 注销后登录直接提示"登录成功"：FindByEmail 默认 scope 排除软删除记录 → 改用 Unscoped() ## 文件变更 - 新建 17 个文件 (消息/审核/站点设置完整模块) - 修改 25 个文件 (认证/设置/中间件/前端) - 统计：+3229 / -161，42 files changed
This commit is contained in:
@ -7,6 +7,12 @@
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="/">首页</a></li>
|
||||
{{if .IsLoggedIn}}
|
||||
<li>
|
||||
<a href="/messages" class="nav-messages" id="messagesBell" title="消息中心">
|
||||
<svg class="nav-bell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="nav-bell-badge" id="msgBadge" style="display:none">0</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/settings/profile" class="nav-user">{{.Username}}</a></li>
|
||||
<li><a href="javascript:void(0)" class="nav-logout" id="logoutBtn">退出</a></li>
|
||||
{{else}}
|
||||
|
||||
172
templates/MetaLab-2026/html/messages/index.html
Normal file
172
templates/MetaLab-2026/html/messages/index.html
Normal file
@ -0,0 +1,172 @@
|
||||
{{template "layout/header.html" .}}
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<body>
|
||||
|
||||
{{template "layout/nav.html" .}}
|
||||
|
||||
<main class="msg-layout">
|
||||
<aside class="msg-sidebar">
|
||||
<div class="msg-sidebar-header">
|
||||
<h2>消息中心</h2>
|
||||
</div>
|
||||
<nav class="msg-sidebar-nav">
|
||||
<span class="msg-sidebar-item active">
|
||||
<svg class="msg-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
全部消息
|
||||
{{if .UnreadCount}}
|
||||
<span class="msg-sidebar-count">{{.UnreadCount}}</span>
|
||||
{{end}}
|
||||
</span>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="msg-main">
|
||||
{{if .Messages}}
|
||||
<div class="msg-toolbar">
|
||||
{{if .UnreadCount}}
|
||||
<button id="markAllReadBtn" class="msg-mark-all-btn">全部标为已读</button>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="msg-list">
|
||||
{{range $i, $m := .Messages}}
|
||||
<div class="msg-card{{if not $m.IsRead}} unread{{end}}" data-id="{{$m.ID}}">
|
||||
<div class="msg-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-title">{{$m.Title}}</div>
|
||||
<div class="msg-content">{{$m.Content}}</div>
|
||||
<div class="msg-meta">
|
||||
<span class="msg-type">{{index $.NotifyTypeNames $m.NotifyType}}</span>
|
||||
<span class="msg-time">{{$m.CreatedAt.Format "2006-01-02 15:04"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{if not $m.IsRead}}
|
||||
<span class="msg-badge"></span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .TotalPages}}
|
||||
<div class="msg-pagination">
|
||||
{{if .HasPrev}}
|
||||
<a href="/messages?page={{.PrevPage}}" class="msg-page-btn">上一页</a>
|
||||
{{else}}
|
||||
<span class="msg-page-btn disabled">上一页</span>
|
||||
{{end}}
|
||||
<span class="msg-page-info">{{.Page}} / {{.TotalPages}}</span>
|
||||
{{if .HasNext}}
|
||||
<a href="/messages?page={{.NextPage}}" class="msg-page-btn">下一页</a>
|
||||
{{else}}
|
||||
<span class="msg-page-btn disabled">下一页</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{else}}
|
||||
<div class="msg-empty">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48" class="msg-empty-icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><line x1="4" y1="17" x2="20" y2="17"/><line x1="9" y1="11" x2="10" y2="11"/><line x1="14" y1="11" x2="15" y2="11"/></svg>
|
||||
<p>暂无消息</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{template "layout/footer.html" .}}
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// ---- 单条标记已读 ----
|
||||
var cards = document.querySelectorAll('.msg-card.unread');
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
(function (card) {
|
||||
card.addEventListener('click', function () {
|
||||
var id = card.getAttribute('data-id');
|
||||
if (!id) return;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/messages/' + id + '/read', true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
card.classList.remove('unread');
|
||||
var badge = card.querySelector('.msg-badge');
|
||||
if (badge) badge.remove();
|
||||
updateUnreadCounts();
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
})(cards[i]);
|
||||
}
|
||||
|
||||
// ---- 全部标为已读 ----
|
||||
var markAllBtn = document.getElementById('markAllReadBtn');
|
||||
if (markAllBtn) {
|
||||
markAllBtn.addEventListener('click', function () {
|
||||
markAllBtn.disabled = true;
|
||||
markAllBtn.textContent = '处理中...';
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/messages/read-all', true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
markAllBtn.disabled = false;
|
||||
markAllBtn.textContent = '全部标为已读';
|
||||
if (xhr.status === 200) {
|
||||
// 本地清除所有 unread 样式
|
||||
var allCards = document.querySelectorAll('.msg-card.unread');
|
||||
for (var j = 0; j < allCards.length; j++) {
|
||||
allCards[j].classList.remove('unread');
|
||||
var b = allCards[j].querySelector('.msg-badge');
|
||||
if (b) b.remove();
|
||||
}
|
||||
markAllBtn.remove();
|
||||
updateUnreadCounts();
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
// ---- 更新侧边栏和导航栏未读计数 ----
|
||||
function updateUnreadCounts() {
|
||||
// 更新侧边栏计数
|
||||
var visibleUnread = document.querySelectorAll('.msg-card.unread').length;
|
||||
var sidebarCount = document.querySelector('.msg-sidebar-count');
|
||||
if (sidebarCount) {
|
||||
if (visibleUnread > 0) {
|
||||
sidebarCount.textContent = visibleUnread;
|
||||
} else {
|
||||
sidebarCount.remove();
|
||||
}
|
||||
} else if (visibleUnread > 0) {
|
||||
var sidebarItem = document.querySelector('.msg-sidebar-item.active');
|
||||
if (sidebarItem) {
|
||||
var el = document.createElement('span');
|
||||
el.className = 'msg-sidebar-count';
|
||||
el.textContent = visibleUnread;
|
||||
sidebarItem.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新导航栏铃铛计数
|
||||
var navBadge = document.getElementById('msgBadge');
|
||||
if (navBadge) {
|
||||
fetch('/api/messages/unread')
|
||||
.then(function (res) { return res.json(); })
|
||||
.then(function (data) {
|
||||
if (data && data.success && data.data) {
|
||||
var count = data.data.unread || 0;
|
||||
navBadge.textContent = count > 99 ? '99+' : count;
|
||||
navBadge.style.display = count > 0 ? 'flex' : 'none';
|
||||
}
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script src="/static/js/common.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -35,6 +35,16 @@
|
||||
<h2>个人资料</h2>
|
||||
<p class="settings-card-desc">你的公开信息和基本资料</p>
|
||||
</div>
|
||||
{{if .PendingTypes}}
|
||||
<div class="settings-audit-notice">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
|
||||
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
<span>
|
||||
{{range $i, $t := .PendingTypes}}{{if $i}}、{{end}}{{index $.AuditTypes $t}}{{end}}审核中
|
||||
</span>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="settings-card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">用户名</span>
|
||||
@ -103,12 +113,62 @@
|
||||
<span class="info-label">注册时间</span>
|
||||
<span class="info-value">{{.User.CreatedAt.Format "2006-01-02 15:04:05"}}</span>
|
||||
</div>
|
||||
{{if .User.LastLoginAt}}
|
||||
<div class="info-row">
|
||||
<span class="info-label">上次登录</span>
|
||||
<span class="info-value">{{.User.LastLoginAt.Format "2006-01-02 15:04:05"}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="info-row">
|
||||
<span class="info-label">最后更新</span>
|
||||
<span class="info-value">{{.User.UpdatedAt.Format "2006-01-02 15:04:05"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-header">
|
||||
<h2>修改密码</h2>
|
||||
<p class="settings-card-desc">修改密码后需重新登录</p>
|
||||
</div>
|
||||
<div class="settings-card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="currentPassword">当前密码</label>
|
||||
<input type="password" id="currentPassword" class="settings-text-input" placeholder="输入当前密码" autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="newPassword">新密码</label>
|
||||
<input type="password" id="newPassword" class="settings-text-input" placeholder="至少 8 位，包含字母和数字" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="settings-card-footer">
|
||||
<button id="changePwdBtn" class="settings-save-btn">修改密码</button>
|
||||
<span class="form-hint">修改成功后需重新登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注销账号 -->
|
||||
<div class="settings-card settings-card-danger">
|
||||
<div class="settings-card-header">
|
||||
<h2>注销账号</h2>
|
||||
<p class="settings-card-desc">账号将在 7 天后正式注销，期间可随时重新登录恢复</p>
|
||||
</div>
|
||||
<div class="settings-card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="deletePassword">确认密码</label>
|
||||
<input type="password" id="deletePassword" class="settings-text-input" placeholder="输入密码确认" autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="deleteReason">注销原因（选填）</label>
|
||||
<textarea id="deleteReason" class="settings-textarea" maxlength="500" placeholder="可以告诉我们为什么要离开吗？"></textarea>
|
||||
</div>
|
||||
<div class="settings-card-footer">
|
||||
<button id="deleteAccountBtn" class="settings-danger-btn">确认注销</button>
|
||||
<span class="form-hint">此操作不可逆，请谨慎处理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
</div>
|
||||
@ -138,11 +198,6 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var usernameInput = document.getElementById('usernameInput');
|
||||
var bioInput = document.getElementById('bioInput');
|
||||
var btn = document.getElementById('saveProfileBtn');
|
||||
if (!usernameInput || !bioInput || !btn) return;
|
||||
|
||||
var toastEl = document.getElementById('settingsToast');
|
||||
var toastTimer = null;
|
||||
|
||||
@ -158,86 +213,93 @@
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// ---- 字符计数器 ----
|
||||
var usernameCounter = document.getElementById('usernameCounter');
|
||||
var bioCounterEl = document.getElementById('bioCounter');
|
||||
// ===== 个人资料 Tab =====
|
||||
(function () {
|
||||
var usernameInput = document.getElementById('usernameInput');
|
||||
var bioInput = document.getElementById('bioInput');
|
||||
var btn = document.getElementById('saveProfileBtn');
|
||||
if (!usernameInput || !bioInput || !btn) return;
|
||||
|
||||
function updateCounters() {
|
||||
if (usernameCounter) {
|
||||
usernameCounter.textContent = usernameInput.value.length + '/16';
|
||||
}
|
||||
if (bioCounterEl) {
|
||||
bioCounterEl.textContent = bioInput.value.length + '/128';
|
||||
}
|
||||
}
|
||||
// ---- 字符计数器 ----
|
||||
var usernameCounter = document.getElementById('usernameCounter');
|
||||
var bioCounterEl = document.getElementById('bioCounter');
|
||||
|
||||
usernameInput.addEventListener('input', updateCounters);
|
||||
bioInput.addEventListener('input', updateCounters);
|
||||
updateCounters();
|
||||
|
||||
// ---- 原始值（用于判断是否变更） ----
|
||||
var origUsername = usernameInput.value.trim();
|
||||
var origBio = bioInput.value;
|
||||
|
||||
// 与后端一致的合法字符集：中文、英文大小写、数字、下划线、连字符
|
||||
var usernameRe = /^[\u4e00-\u9fffa-zA-Z0-9_-]+$/;
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var username = usernameInput.value.trim();
|
||||
var bio = bioInput.value;
|
||||
|
||||
// 用户名校验
|
||||
if (!username) {
|
||||
showSettingsToast('用户名不能为空', true);
|
||||
return;
|
||||
}
|
||||
if (username.length > 16) {
|
||||
showSettingsToast('用户名不能超过 16 个字符', true);
|
||||
return;
|
||||
}
|
||||
if (!usernameRe.test(username)) {
|
||||
showSettingsToast('用户名仅支持中英文、数字、下划线、连字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 个性签名校验
|
||||
if (bio.length > 128) {
|
||||
showSettingsToast('个性签名不能超过 128 个字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 无变更判断
|
||||
if (username === origUsername && bio === origBio) {
|
||||
showSettingsToast('内容未变更，无需保存');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '保存中...';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('PUT', '/api/settings/profile', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
btn.disabled = false;
|
||||
btn.textContent = '保存';
|
||||
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast(res.message || '个人资料已更新');
|
||||
origUsername = username;
|
||||
origBio = bio;
|
||||
} else {
|
||||
showSettingsToast(res.message || '保存失败', true);
|
||||
}
|
||||
} catch (e) {
|
||||
showSettingsToast('保存失败', true);
|
||||
function updateCounters() {
|
||||
if (usernameCounter) {
|
||||
usernameCounter.textContent = usernameInput.value.length + '/16';
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({ username: username, bio: bio }));
|
||||
});
|
||||
if (bioCounterEl) {
|
||||
bioCounterEl.textContent = bioInput.value.length + '/128';
|
||||
}
|
||||
}
|
||||
|
||||
usernameInput.addEventListener('input', updateCounters);
|
||||
bioInput.addEventListener('input', updateCounters);
|
||||
updateCounters();
|
||||
|
||||
// ---- 原始值（用于判断是否变更） ----
|
||||
var origUsername = usernameInput.value.trim();
|
||||
var origBio = bioInput.value;
|
||||
|
||||
// 与后端一致的合法字符集：中文、英文大小写、数字、下划线、连字符
|
||||
var usernameRe = /^[\u4e00-\u9fffa-zA-Z0-9_-]+$/;
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var username = usernameInput.value.trim();
|
||||
var bio = bioInput.value;
|
||||
|
||||
// 用户名校验
|
||||
if (!username) {
|
||||
showSettingsToast('用户名不能为空', true);
|
||||
return;
|
||||
}
|
||||
if (username.length > 16) {
|
||||
showSettingsToast('用户名不能超过 16 个字符', true);
|
||||
return;
|
||||
}
|
||||
if (!usernameRe.test(username)) {
|
||||
showSettingsToast('用户名仅支持中英文、数字、下划线、连字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 个性签名校验
|
||||
if (bio.length > 128) {
|
||||
showSettingsToast('个性签名不能超过 128 个字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 无变更判断
|
||||
if (username === origUsername && bio === origBio) {
|
||||
showSettingsToast('内容未变更，无需保存');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '保存中...';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('PUT', '/api/settings/profile', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
btn.disabled = false;
|
||||
btn.textContent = '保存';
|
||||
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast(res.message || '个人资料已更新');
|
||||
origUsername = username;
|
||||
origBio = bio;
|
||||
} else {
|
||||
showSettingsToast(res.message || '保存失败', true);
|
||||
}
|
||||
} catch (e) {
|
||||
showSettingsToast('保存失败', true);
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({ username: username, bio: bio }));
|
||||
});
|
||||
|
||||
// ---- 头像裁切上传 ----
|
||||
var avatarWrap = document.getElementById('avatarWrap');
|
||||
@ -435,8 +497,8 @@
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast('头像已更新');
|
||||
if (avatarPreview.tagName === 'IMG') {
|
||||
showSettingsToast(res.message || '头像已更新');
|
||||
if (res.data && res.data.url && avatarPreview.tagName === 'IMG') {
|
||||
avatarPreview.src = res.data.url + '?t=' + Date.now();
|
||||
}
|
||||
} else {
|
||||
@ -460,6 +522,99 @@
|
||||
openCrop(file);
|
||||
});
|
||||
}
|
||||
})(); // 结束个人资料 Tab 子 IIFE
|
||||
|
||||
// ---- 修改密码 ----
|
||||
var currentPwd = document.getElementById('currentPassword');
|
||||
var newPwd = document.getElementById('newPassword');
|
||||
var changePwdBtn = document.getElementById('changePwdBtn');
|
||||
if (currentPwd && newPwd && changePwdBtn) {
|
||||
changePwdBtn.addEventListener('click', function () {
|
||||
if (!currentPwd.value) {
|
||||
showSettingsToast('请输入当前密码', true);
|
||||
return;
|
||||
}
|
||||
if (!newPwd.value || !/[a-zA-Z]/.test(newPwd.value) || !/\d/.test(newPwd.value) || newPwd.value.length < 8) {
|
||||
showSettingsToast('新密码至少 8 位，包含字母和数字', true);
|
||||
return;
|
||||
}
|
||||
changePwdBtn.disabled = true;
|
||||
changePwdBtn.textContent = '修改中...';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('PUT', '/api/settings/password', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
changePwdBtn.disabled = false;
|
||||
changePwdBtn.textContent = '修改密码';
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast('密码已修改，请重新登录');
|
||||
currentPwd.value = '';
|
||||
newPwd.value = '';
|
||||
// 延时后执行登出并跳转到首页
|
||||
setTimeout(function () {
|
||||
window.location.href = '/';
|
||||
}, 2000);
|
||||
} else {
|
||||
showSettingsToast(res.message || '修改失败', true);
|
||||
}
|
||||
} catch (e) {
|
||||
showSettingsToast('修改失败', true);
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({
|
||||
current_password: currentPwd.value,
|
||||
new_password: newPwd.value
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// ---- 注销账号 ----
|
||||
var deletePwd = document.getElementById('deletePassword');
|
||||
var deleteReason = document.getElementById('deleteReason');
|
||||
var deleteAccountBtn = document.getElementById('deleteAccountBtn');
|
||||
if (deletePwd && deleteAccountBtn) {
|
||||
deleteAccountBtn.addEventListener('click', function () {
|
||||
if (!deletePwd.value) {
|
||||
showSettingsToast('请输入密码确认', true);
|
||||
return;
|
||||
}
|
||||
if (!confirm('确定要注销账号吗？\n\n注销后 7 天内重新登录可自动恢复，期满后将永久删除。')) {
|
||||
return;
|
||||
}
|
||||
deleteAccountBtn.disabled = true;
|
||||
deleteAccountBtn.textContent = '注销中...';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/settings/delete-account', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
deleteAccountBtn.disabled = false;
|
||||
deleteAccountBtn.textContent = '确认注销';
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast(res.message || '账号已注销');
|
||||
setTimeout(function () {
|
||||
window.location.href = '/';
|
||||
}, 2000);
|
||||
} else {
|
||||
showSettingsToast(res.message || '操作失败', true);
|
||||
}
|
||||
} catch (e) {
|
||||
showSettingsToast('操作失败', true);
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({
|
||||
password: deletePwd.value,
|
||||
reason: deleteReason ? deleteReason.value : ''
|
||||
}));
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -130,6 +130,45 @@ header {
|
||||
color: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
/* ---------- Nav Messages Bell ---------- */
|
||||
.nav-messages {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
transition: background .15s ease;
|
||||
}
|
||||
|
||||
.nav-messages:hover {
|
||||
background: rgba(52, 152, 219, .08);
|
||||
}
|
||||
|
||||
.nav-bell-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-bell-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
font-size: .65rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--color-danger);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
|
||||
294
templates/MetaLab-2026/static/css/messages.css
Normal file
294
templates/MetaLab-2026/static/css/messages.css
Normal file
@ -0,0 +1,294 @@
|
||||
/* ============================================================
|
||||
MetaLab Messages Styles — 消息中心页样式
|
||||
左侧导航 + 右侧消息卡片列表
|
||||
============================================================ */
|
||||
|
||||
/* ---------- Page Body ---------- */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ---------- Layout ---------- */
|
||||
.msg-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 20px;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* ---------- Left Sidebar ---------- */
|
||||
.msg-sidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 1.25rem 1rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.msg-sidebar-header {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.msg-sidebar-header h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.msg-sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.msg-sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
padding: .65rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: .92rem;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
.msg-sidebar-item:hover {
|
||||
background: rgba(52, 152, 219, .06);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.msg-sidebar-item.active {
|
||||
background: rgba(52, 152, 219, .1);
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.msg-sidebar-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-sidebar-count {
|
||||
margin-left: auto;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
font-size: .7rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--color-accent);
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ---------- Right Content Area ---------- */
|
||||
.msg-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---------- Toolbar ---------- */
|
||||
.msg-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.msg-mark-all-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: .35rem .9rem;
|
||||
font-size: .82rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: var(--color-accent);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
.msg-mark-all-btn:hover {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.msg-mark-all-btn:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---------- Right Content Area ---------- */
|
||||
.msg-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---------- Message Card ---------- */
|
||||
.msg-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: .9rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--color-border);
|
||||
margin-bottom: .6rem;
|
||||
transition: background .15s ease, border-color .15s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: #f8fafe;
|
||||
}
|
||||
|
||||
.msg-card.unread {
|
||||
background: #f0f6fe;
|
||||
border-left: 3px solid var(--color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(52, 152, 219, .1);
|
||||
border-radius: 8px;
|
||||
color: var(--color-accent);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.msg-title {
|
||||
font-size: .92rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
font-size: .85rem;
|
||||
color: var(--color-secondary);
|
||||
line-height: 1.55;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: .78rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.msg-type {
|
||||
color: rgba(52, 152, 219, .7);
|
||||
}
|
||||
|
||||
.msg-badge {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---------- Pagination ---------- */
|
||||
.msg-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .75rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.msg-page-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: .4rem 1rem;
|
||||
font-size: .85rem;
|
||||
color: var(--color-accent);
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
.msg-page-btn:hover {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.msg-page-btn.disabled {
|
||||
color: #ccc;
|
||||
border-color: #ddd;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.msg-page-info {
|
||||
font-size: .85rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
/* ---------- Empty State ---------- */
|
||||
.msg-empty {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.msg-empty-icon {
|
||||
margin-bottom: 1rem;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.msg-empty p {
|
||||
font-size: .92rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.msg-layout {
|
||||
flex-direction: column;
|
||||
padding: 1rem 16px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.msg-sidebar {
|
||||
width: 100%;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
.msg-sidebar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.msg-card {
|
||||
padding: .85rem 1rem;
|
||||
}
|
||||
}
|
||||
@ -131,6 +131,18 @@ body {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 审核状态提示 */
|
||||
.settings-audit-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0.75rem 2rem;
|
||||
background: #fff8e1;
|
||||
border-bottom: 1px solid #ffe082;
|
||||
color: #e65100;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.settings-card-body {
|
||||
padding: 1.25rem 2rem 1.5rem;
|
||||
}
|
||||
@ -495,3 +507,64 @@ body {
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Form Group (Password / Delete) ---------- */
|
||||
.settings-card + .settings-card {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: .85rem;
|
||||
color: var(--color-text-light);
|
||||
font-weight: 500;
|
||||
margin-bottom: .35rem;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: .8rem;
|
||||
color: #bbb;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
/* ---------- Danger Card (Delete Account) ---------- */
|
||||
.settings-card-danger {
|
||||
border: 1px solid #ffcdd2;
|
||||
}
|
||||
|
||||
.settings-card-danger .settings-card-header h2 {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.settings-danger-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .55rem 1.5rem;
|
||||
font-size: .88rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background: var(--color-danger);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, opacity .15s ease;
|
||||
}
|
||||
|
||||
.settings-danger-btn:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.settings-danger-btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -137,6 +137,28 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Unread message badge polling ----
|
||||
var msgBadge = document.getElementById('msgBadge');
|
||||
if (msgBadge) {
|
||||
var POLL_INTERVAL = 60 * 1000; // 1 minute
|
||||
function pollUnread() {
|
||||
fetch('/api/messages/unread')
|
||||
.then(function (res) {
|
||||
if (!res.ok) return;
|
||||
return res.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
if (!data || !data.success) return;
|
||||
var count = data.data && data.data.unread ? data.data.unread : 0;
|
||||
msgBadge.textContent = count > 99 ? '99+' : count;
|
||||
msgBadge.style.display = count > 0 ? 'flex' : 'none';
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
pollUnread();
|
||||
setInterval(pollUnread, POLL_INTERVAL);
|
||||
}
|
||||
|
||||
// ---- Auto-refresh token (silent) ----
|
||||
// 场景 A：页面开着时，每 10 分钟静默续期（保持 access token 不过期）
|
||||
// 场景 B：关浏览器 15+ min 后回来，access token 过期但 refresh 仍有效
|
||||
|
||||
@ -64,7 +64,12 @@
|
||||
var resp;
|
||||
try { resp = JSON.parse(xhr.responseText); } catch (err) { resp = null; }
|
||||
|
||||
if (xhr.status === 200 && resp && resp.success) {
|
||||
if (xhr.status === 200 && resp && resp.success && resp.action === 'confirm_restore') {
|
||||
// 注销账号登录 → 二次确认恢复
|
||||
if (confirm(resp.message + '\n\n确认继续登录将中止注销流程。')) {
|
||||
doConfirmRestore(email, password);
|
||||
}
|
||||
} else if (xhr.status === 200 && resp && resp.success) {
|
||||
window.MetaLab.toast(toast, '登录成功', false);
|
||||
setTimeout(function () {
|
||||
window.location.href = '/';
|
||||
@ -75,6 +80,29 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({ email: email, password: password, remember_me: rememberMeCheckbox.checked }));
|
||||
xhr.send(JSON.stringify({ email: email, password: password, remember_me: rememberMeCheckbox.checked }));
|
||||
}
|
||||
|
||||
function doConfirmRestore(email, password) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/auth/confirm-restore', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var resp;
|
||||
try { resp = JSON.parse(xhr.responseText); } catch (err) { resp = null; }
|
||||
|
||||
if (xhr.status === 200 && resp && resp.success) {
|
||||
window.MetaLab.toast(toast, resp.message || '账号已恢复，欢迎回来', false);
|
||||
setTimeout(function () {
|
||||
window.location.href = '/';
|
||||
}, 800);
|
||||
} else {
|
||||
var msg = (resp && resp.message) ? resp.message : '操作失败，请稍后重试';
|
||||
window.MetaLab.toast(toast, msg, true);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({ email: email, password: password, remember_me: rememberMeCheckbox.checked }));
|
||||
}
|
||||
})();
|
||||
|
||||
110
templates/admin/html/audit/index.html
Normal file
110
templates/admin/html/audit/index.html
Normal file
@ -0,0 +1,110 @@
|
||||
{{template "admin/layout/base.html" .}}
|
||||
<div class="page-header">
|
||||
<h1>审核管理</h1>
|
||||
<p class="page-desc">审核用户提交的用户名、头像、个性签名修改</p>
|
||||
</div>
|
||||
|
||||
<!-- 审核状态筛选 + TAB -->
|
||||
<div class="filter-bar">
|
||||
<div class="audit-tabs">
|
||||
<button class="audit-tab active" data-tab="username">用户名</button>
|
||||
<button class="audit-tab" data-tab="avatar">头像</button>
|
||||
<button class="audit-tab" data-tab="bio">个性签名</button>
|
||||
<button class="audit-tab" data-tab="history">审核记录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户名审核（表格） -->
|
||||
<div class="audit-panel active" id="panel-username">
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>提交者</th>
|
||||
<th>当前用户名</th>
|
||||
<th>新用户名</th>
|
||||
<th>提交时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usernameTableBody">
|
||||
<tr class="table-loading"><td colspan="5">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination-bar" id="usernamePagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- 头像审核（卡片网格） -->
|
||||
<div class="audit-panel" id="panel-avatar">
|
||||
<div class="avatar-audit-grid" id="avatarGrid">
|
||||
<div class="table-loading-full">加载中...</div>
|
||||
</div>
|
||||
<div class="pagination-bar" id="avatarPagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- 签名审核（表格） -->
|
||||
<div class="audit-panel" id="panel-bio">
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>提交者</th>
|
||||
<th>新签名</th>
|
||||
<th>提交时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="bioTableBody">
|
||||
<tr class="table-loading"><td colspan="4">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination-bar" id="bioPagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- 审核记录（全部状态） -->
|
||||
<div class="audit-panel" id="panel-history">
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类型</th>
|
||||
<th>提交者</th>
|
||||
<th>内容</th>
|
||||
<th>状态</th>
|
||||
<th>审核人</th>
|
||||
<th>提交时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="historyTableBody">
|
||||
<tr class="table-loading"><td colspan="6">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination-bar" id="historyPagination"></div>
|
||||
</div>
|
||||
|
||||
<!-- 拒绝理由弹窗 -->
|
||||
<div class="modal-overlay" id="rejectModal" style="display:none;">
|
||||
<div class="modal-box">
|
||||
<h3>拒绝审核</h3>
|
||||
<p>请填写拒绝理由：</p>
|
||||
<textarea id="rejectReason" rows="3" maxlength="500" placeholder="请输入拒绝理由..."></textarea>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-outline" onclick="closeRejectModal()">取消</button>
|
||||
<button class="btn btn-danger" id="confirmRejectBtn">确认拒绝</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.__AUDIT_TYPES = {
|
||||
{{range $val, $label := .AuditTypes}}"{{$val}}": "{{$label}}",
|
||||
{{end}}
|
||||
};
|
||||
window.__AUDIT_STATUS = {
|
||||
{{range $val, $label := .AuditStatus}}"{{$val}}": "{{$label}}",
|
||||
{{end}}
|
||||
};
|
||||
</script>
|
||||
{{template "admin/layout/footer.html" .}}
|
||||
@ -33,6 +33,12 @@
|
||||
用户管理
|
||||
</a>
|
||||
{{end}}
|
||||
{{if .CanManageAudits}}
|
||||
<a href="/admin/audits" class="sidebar-item {{if eq .CurrentPath "/admin/audits"}}active{{end}}">
|
||||
<span class="sidebar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="m9 14 2 2 4-4"/></svg></span>
|
||||
审核管理
|
||||
</a>
|
||||
{{end}}
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="admin-main">
|
||||
|
||||
185
templates/admin/static/css/audit.css
Normal file
185
templates/admin/static/css/audit.css
Normal file
@ -0,0 +1,185 @@
|
||||
/* =====================================================
|
||||
MetaLab 管理面板 - 审核管理 CSS
|
||||
===================================================== */
|
||||
|
||||
/* TAB 切换 */
|
||||
.audit-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.audit-tab {
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #636e72;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
transition: color .2s, border-color .2s;
|
||||
}
|
||||
|
||||
.audit-tab:hover {
|
||||
color: #2d3436;
|
||||
}
|
||||
|
||||
.audit-tab.active {
|
||||
color: #0984e3;
|
||||
border-bottom-color: #0984e3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 审核面板显隐 */
|
||||
.audit-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audit-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 头像审核网格 */
|
||||
.avatar-audit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.avatar-audit-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar-audit-card .card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #636e72;
|
||||
}
|
||||
|
||||
.avatar-audit-card .card-header strong {
|
||||
color: #2d3436;
|
||||
}
|
||||
|
||||
.avatar-audit-card .avatar-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-audit-card .avatar-compare img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.avatar-audit-card .avatar-compare .arrow {
|
||||
font-size: 24px;
|
||||
color: #0984e3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-audit-card .card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 表格内长文本截断 */
|
||||
.col-long-text {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 审核记录状态标签 */
|
||||
.audit-status-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.audit-status-tag.pending {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.audit-status-tag.approved {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.audit-status-tag.rejected {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
/* 全屏加载 */
|
||||
.table-loading-full {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #636e72;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* 拒绝弹窗 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.modal-box h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modal-box p {
|
||||
color: #636e72;
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-box textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #dcdde1;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
260
templates/admin/static/js/audit.js
Normal file
260
templates/admin/static/js/audit.js
Normal file
@ -0,0 +1,260 @@
|
||||
/* =====================================================
|
||||
MetaLab 管理面板 - 审核管理 JS
|
||||
单一职责：审核列表 TAB 切换、分页、审批操作
|
||||
===================================================== */
|
||||
|
||||
let currentTab = 'username';
|
||||
const pageSize = 20;
|
||||
const pages = {
|
||||
username: 1,
|
||||
avatar: 1,
|
||||
bio: 1,
|
||||
history: 1
|
||||
};
|
||||
let pendingRejectId = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// TAB 切换
|
||||
document.querySelectorAll('.audit-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.audit-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
currentTab = tab.dataset.tab;
|
||||
document.querySelectorAll('.audit-panel').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('panel-' + currentTab).classList.add('active');
|
||||
loadCurrentTab();
|
||||
});
|
||||
});
|
||||
|
||||
// 初始加载
|
||||
loadCurrentTab();
|
||||
});
|
||||
|
||||
/* =========================================
|
||||
数据加载
|
||||
========================================= */
|
||||
|
||||
function loadCurrentTab() {
|
||||
if (currentTab === 'history') {
|
||||
loadHistory();
|
||||
} else if (currentTab === 'avatar') {
|
||||
loadAvatarAudits();
|
||||
} else {
|
||||
loadTableAudits();
|
||||
}
|
||||
}
|
||||
|
||||
function loadTableAudits() {
|
||||
const page = pages[currentTab];
|
||||
api.get(`/api/admin/audits?type=${currentTab}&page=${page}&page_size=${pageSize}`)
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
renderTable(res.data.items, currentTab + 'TableBody');
|
||||
renderPagination(res.data.total, res.data.page, currentTab + 'Pagination');
|
||||
} else {
|
||||
showToast(res.message || '加载失败', 'error');
|
||||
}
|
||||
})
|
||||
.catch(() => showToast('网络错误', 'error'));
|
||||
}
|
||||
|
||||
function loadAvatarAudits() {
|
||||
const page = pages['avatar'];
|
||||
api.get(`/api/admin/audits?type=avatar&page=${page}&page_size=${pageSize}`)
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
renderAvatarCards(res.data.items);
|
||||
renderPagination(res.data.total, res.data.page, 'avatarPagination');
|
||||
} else {
|
||||
showToast(res.message || '加载失败', 'error');
|
||||
}
|
||||
})
|
||||
.catch(() => showToast('网络错误', 'error'));
|
||||
}
|
||||
|
||||
function loadHistory() {
|
||||
const page = pages['history'];
|
||||
api.get(`/api/admin/audits?page=${page}&page_size=${pageSize}&status=`)
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
renderHistoryTable(res.data.items);
|
||||
renderPagination(res.data.total, res.data.page, 'historyPagination');
|
||||
} else {
|
||||
showToast(res.message || '加载失败', 'error');
|
||||
}
|
||||
})
|
||||
.catch(() => showToast('网络错误', 'error'));
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
表格渲染（用户名/签名）
|
||||
========================================= */
|
||||
|
||||
function renderTable(items, bodyId) {
|
||||
const tbody = document.getElementById(bodyId);
|
||||
if (!items || items.length === 0) {
|
||||
const cols = currentTab === 'bio' ? 4 : 5;
|
||||
tbody.innerHTML = `<tr><td colspan="${cols}" style="text-align:center;padding:40px;color:#636e72;">没有待审核记录</td></tr>`;
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = items.map(item => {
|
||||
if (currentTab === 'bio') {
|
||||
return renderBioRow(item);
|
||||
}
|
||||
return renderUsernameRow(item);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderUsernameRow(item) {
|
||||
return `
|
||||
<tr>
|
||||
<td>${escapeHtml(item.submitter_username || '—')}</td>
|
||||
<td>—</td>
|
||||
<td><strong>${escapeHtml(item.new_value)}</strong></td>
|
||||
<td>${formatTime(item.created_at)}</td>
|
||||
<td class="col-actions">
|
||||
<button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
|
||||
<button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}
|
||||
|
||||
function renderBioRow(item) {
|
||||
const text = item.new_value || '';
|
||||
const display = text.length > 40 ? text.substring(0, 40) + '...' : text;
|
||||
return `
|
||||
<tr>
|
||||
<td>${escapeHtml(item.submitter_username || '—')}</td>
|
||||
<td title="${escapeHtml(text)}">${escapeHtml(display)}</td>
|
||||
<td>${formatTime(item.created_at)}</td>
|
||||
<td class="col-actions">
|
||||
<button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
|
||||
<button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
头像卡片渲染
|
||||
========================================= */
|
||||
|
||||
function renderAvatarCards(items) {
|
||||
const grid = document.getElementById('avatarGrid');
|
||||
if (!items || items.length === 0) {
|
||||
grid.innerHTML = '<div class="table-loading-full">没有待审核头像</div>';
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = items.map(item => `
|
||||
<div class="avatar-audit-card">
|
||||
<div class="card-header">
|
||||
<span>提交者: <strong>${escapeHtml(item.submitter_username || '—')}</strong></span>
|
||||
<span>${formatTime(item.created_at)}</span>
|
||||
</div>
|
||||
<div class="avatar-compare">
|
||||
<span>新头像 →</span>
|
||||
<img src="${escapeHtml(item.new_value)}" alt="新头像" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22><rect fill=%22%23eee%22 width=%2280%22 height=%2280%22/><text x=%2240%22 y=%2245%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22>加载失败</text></svg>'">
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
|
||||
<button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
审核记录渲染
|
||||
========================================= */
|
||||
|
||||
function renderHistoryTable(items) {
|
||||
const tbody = document.getElementById('historyTableBody');
|
||||
if (!items || items.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:40px;color:#636e72;">没有审核记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = items.map(item => {
|
||||
const typeLabel = window.__AUDIT_TYPES[item.audit_type] || item.audit_type;
|
||||
const statusLabel = window.__AUDIT_STATUS[item.status] || item.status;
|
||||
const statusClass = item.status;
|
||||
const content = item.new_value.length > 40 ? item.new_value.substring(0, 40) + '...' : item.new_value;
|
||||
const reviewer = item.reviewer_name || '—';
|
||||
return `
|
||||
<tr>
|
||||
<td>${typeLabel}</td>
|
||||
<td>${escapeHtml(item.submitter_username || '—')}</td>
|
||||
<td>${escapeHtml(content)}</td>
|
||||
<td><span class="audit-status-tag ${statusClass}">${statusLabel}</span></td>
|
||||
<td>${escapeHtml(reviewer)}</td>
|
||||
<td>${formatTime(item.created_at)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
审核操作
|
||||
========================================= */
|
||||
|
||||
async function approveAudit(id) {
|
||||
const ok = await showConfirm('通过审核', '确定要通过此审核吗？通过后将立即生效。');
|
||||
if (!ok) return;
|
||||
const res = await api.post('/api/admin/audits/' + id + '/approve');
|
||||
if (res.success) {
|
||||
showToast(res.message, 'success');
|
||||
loadCurrentTab();
|
||||
} else {
|
||||
showToast(res.message || '操作失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function openRejectModal(id) {
|
||||
pendingRejectId = id;
|
||||
document.getElementById('rejectReason').value = '';
|
||||
document.getElementById('rejectModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeRejectModal() {
|
||||
pendingRejectId = null;
|
||||
document.getElementById('rejectModal').style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('confirmRejectBtn').addEventListener('click', async () => {
|
||||
const reason = document.getElementById('rejectReason').value.trim();
|
||||
if (!reason) {
|
||||
showToast('请填写拒绝理由', 'error');
|
||||
return;
|
||||
}
|
||||
const res = await api.post('/api/admin/audits/' + pendingRejectId + '/reject', { reason });
|
||||
if (res.success) {
|
||||
showToast(res.message, 'success');
|
||||
closeRejectModal();
|
||||
loadCurrentTab();
|
||||
} else {
|
||||
showToast(res.message || '操作失败', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// 点击遮罩关闭弹窗
|
||||
document.getElementById('rejectModal').addEventListener('click', (e) => {
|
||||
if (e.target === e.currentTarget) closeRejectModal();
|
||||
});
|
||||
|
||||
/* =========================================
|
||||
分页
|
||||
========================================= */
|
||||
|
||||
function renderPagination(total, page, barId) {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
const bar = document.getElementById(barId);
|
||||
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) {
|
||||
pages[currentTab] = p;
|
||||
loadCurrentTab();
|
||||
window.scrollTo({ top: 0 });
|
||||
}
|
||||
Reference in New Issue
Block a user