269 lines
13 KiB
HTML
269 lines
13 KiB
HTML
{{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">
|
|
<a href="/messages?tab=all" class="msg-sidebar-item{{if or (eq .CurrentTab "all") (eq .CurrentTab "")}} active{{end}}">
|
|
<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}}
|
|
</a>
|
|
<a href="/messages?tab=system" class="msg-sidebar-item{{if eq .CurrentTab "system"}} active{{end}}">
|
|
<svg class="msg-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
|
系统通知
|
|
</a>
|
|
<a href="/messages?tab=mention" class="msg-sidebar-item{{if eq .CurrentTab "mention"}} active{{end}}">
|
|
<svg class="msg-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
@艾特我的
|
|
</a>
|
|
<a href="/messages?tab=like" class="msg-sidebar-item{{if eq .CurrentTab "like"}} active{{end}}">
|
|
<svg class="msg-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
|
点赞通知
|
|
</a>
|
|
<a href="/messages?tab=follow" class="msg-sidebar-item{{if eq .CurrentTab "follow"}} active{{end}}">
|
|
<svg class="msg-sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
|
|
关注通知
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="msg-main">
|
|
<!-- Tab 标题区域 -->
|
|
{{if eq .CurrentTab "system"}}
|
|
<div class="msg-system-section">
|
|
<div class="msg-system-header">
|
|
<svg class="msg-system-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><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>
|
|
系统消息
|
|
</div>
|
|
<div class="msg-system-divider"></div>
|
|
</div>
|
|
{{else if eq .CurrentTab "mention"}}
|
|
<div class="msg-system-section">
|
|
<div class="msg-system-header">
|
|
<svg class="msg-system-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
@艾特我的
|
|
</div>
|
|
<div class="msg-system-divider"></div>
|
|
</div>
|
|
{{else if eq .CurrentTab "like"}}
|
|
<div class="msg-system-section">
|
|
<div class="msg-system-header">
|
|
<svg class="msg-system-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
|
点赞通知
|
|
</div>
|
|
<div class="msg-system-divider"></div>
|
|
</div>
|
|
{{else if eq .CurrentTab "follow"}}
|
|
<div class="msg-system-section">
|
|
<div class="msg-system-header">
|
|
<svg class="msg-system-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
|
|
关注通知
|
|
</div>
|
|
<div class="msg-system-divider"></div>
|
|
</div>
|
|
{{else}}
|
|
<div class="msg-system-section">
|
|
<div class="msg-system-header">
|
|
<svg class="msg-system-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><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-system-divider"></div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{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}}
|
|
{{$link := ""}}
|
|
{{if or (eq $m.NotifyType "post_approved") (eq $m.NotifyType "post_rejected")}}
|
|
{{$link = printf "/posts/%d" (derefUint $m.RelatedID)}}
|
|
{{else if or (eq $m.NotifyType "comment") (eq $m.NotifyType "comment_reply")}}
|
|
{{if $m.CommentID}}
|
|
{{$link = printf "/posts/%d#comment-%d" (derefUint $m.RelatedID) (derefUint $m.CommentID)}}
|
|
{{else}}
|
|
{{$link = printf "/posts/%d#comments" (derefUint $m.RelatedID)}}
|
|
{{end}}
|
|
{{else if or (eq $m.NotifyType "audit_approved") (eq $m.NotifyType "audit_rejected")}}
|
|
{{$link = "/settings"}}
|
|
{{else if eq $m.NotifyType "follow"}}
|
|
{{$link = printf "/space/%d" (derefUint $m.RelatedID)}}
|
|
{{end}}
|
|
{{if $link}}
|
|
<a href="{{$link}}" class="msg-card-link">
|
|
{{end}}
|
|
<div class="msg-card{{if not $m.IsRead}} unread{{end}}" data-id="{{$m.ID}}" data-type="{{$m.NotifyType}}" data-link="{{$link}}">
|
|
<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>
|
|
{{if $link}}
|
|
</a>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
|
|
{{if .TotalPages}}
|
|
<div class="msg-pagination">
|
|
{{if .HasPrev}}
|
|
<a href="/messages?tab={{.CurrentTab}}&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?tab={{.CurrentTab}}&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 nonce="{{.CSPNonce}}">
|
|
(function () {
|
|
'use strict';
|
|
|
|
// ---- 单条标记已读 ----
|
|
var cards = document.querySelectorAll('.msg-card.unread');
|
|
for (var i = 0; i < cards.length; i++) {
|
|
(function (card) {
|
|
card.addEventListener('click', function (e) {
|
|
var link = card.getAttribute('data-link');
|
|
var id = card.getAttribute('data-id');
|
|
if (!id) return;
|
|
|
|
if (link) {
|
|
// 有链接的通知：使用 fetch keepalive 确保页面跳转前标记已读不会丢失
|
|
e.preventDefault();
|
|
fetch('/api/messages/' + id + '/read', {
|
|
method: 'POST',
|
|
keepalive: true,
|
|
headers: { 'X-CSRF-Token': getCSRFToken() }
|
|
});
|
|
card.classList.remove('unread');
|
|
var badge = card.querySelector('.msg-badge');
|
|
if (badge) badge.remove();
|
|
updateUnreadCounts();
|
|
window.location.href = link;
|
|
} else {
|
|
// 无链接的通知：使用 XHR 标记已读
|
|
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>
|
|
</body>
|
|
</html>
|