feat: 文章详情页右下角悬浮操作栏 + 作者自赋能拦截

- 赞/踩/赋能/收藏/评论/回顶部移至右下角悬浮操作栏,固定定位
- 回顶部按钮页面顶部隐藏,滚动后显示,平滑滚动
- 评论按钮点击定位到评论区(NAV 下方)
- 赋能按钮作者可见但禁止自赋能,点击弹出 toast 提示
- 未登录用户赋能/收藏点击跳转登录页
- postReactions 引用统一改为 postFloatBar
This commit is contained in:
2026-06-02 23:45:51 +08:00
parent b74ce2da93
commit 0af6f7c971
6 changed files with 169 additions and 16 deletions

View File

@ -1248,3 +1248,85 @@
font-size: 11px;
margin-left: 8px;
}
/* ========== 右下角悬浮操作栏 ========== */
.post-float-bar {
position: fixed;
right: 20px;
bottom: 120px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 100;
background: var(--color-surface, #fff);
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,.1);
padding: 6px;
}
.float-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: #6b7280;
transition: all .15s;
position: relative;
}
.float-btn:hover {
background: #f3f4f6;
color: #6366f1;
}
.float-btn.active {
color: #6366f1;
background: #eef2ff;
}
.float-btn svg {
width: 20px;
height: 20px;
}
.float-count {
font-size: 10px;
font-weight: 600;
line-height: 1;
margin-top: 2px;
color: inherit;
}
.float-top-btn {
border-top: 1px solid #f3f4f6;
border-radius: 0 0 8px 8px;
margin-top: 2px;
padding-top: 6px;
}
/* 赋能 Toast */
.energize-toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
background: #1f2937;
color: #fff;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transition: opacity .3s;
z-index: 10000;
pointer-events: none;
}
.energize-toast.show {
opacity: 1;
}

View File

@ -4,7 +4,7 @@
var commentsSection = document.getElementById('comments');
if (!commentsSection) return;
var postId = commentsSection.closest('.container').querySelector('#postReactions').dataset.postId;
var postId = commentsSection.closest('.container').querySelector('#postFloatBar').dataset.postId;
var commentsList = document.getElementById('commentsList');
var commentsTotal = document.getElementById('commentsTotal');
var loadMoreBtn = document.getElementById('commentsLoadMore');

View File

@ -9,6 +9,20 @@
if (!btn || !overlay) return;
var postId = btn.dataset.id;
var isAuthor = btn.dataset.uid && btn.dataset.authorUid &&
btn.dataset.uid === btn.dataset.authorUid;
function showToast(msg) {
var toast = document.createElement('div');
toast.className = 'energize-toast';
toast.textContent = msg;
document.body.appendChild(toast);
setTimeout(function() { toast.classList.add('show'); }, 10);
setTimeout(function() {
toast.classList.remove('show');
setTimeout(function() { toast.remove(); }, 300);
}, 2000);
}
function showOverlay() {
overlay.style.display = 'flex';
@ -21,6 +35,10 @@
}
btn.addEventListener('click', function() {
if (isAuthor) {
showToast('无法给自己赋能');
return;
}
fetch('/api/energy/info')
.then(function(r) { return r.json(); })
.then(function(d) {

View File

@ -2,7 +2,7 @@
(function() {
var favBtn = document.getElementById('favBtn');
var favCountEl = document.getElementById('favCount');
var container = document.getElementById('postReactions');
var container = document.getElementById('postFloatBar');
var overlay = document.getElementById('favOverlay');
var closeBtn = document.getElementById('favClose');
var folderListEl = document.getElementById('favFolderCheckList');

View File

@ -1,6 +1,6 @@
// 赞/踩系统
(function() {
var container = document.getElementById('postReactions');
var container = document.getElementById('postFloatBar');
var likeBtn = document.getElementById('likeBtn');
var dislikeBtn = document.getElementById('dislikeBtn');
var likesCountEl = document.getElementById('likesCount');