feat: 文章详情页右下角悬浮操作栏 + 作者自赋能拦截
- 赞/踩/赋能/收藏/评论/回顶部移至右下角悬浮操作栏,固定定位 - 回顶部按钮页面顶部隐藏,滚动后显示,平滑滚动 - 评论按钮点击定位到评论区(NAV 下方) - 赋能按钮作者可见但禁止自赋能,点击弹出 toast 提示 - 未登录用户赋能/收藏点击跳转登录页 - postReactions 引用统一改为 postFloatBar
This commit is contained in:
@ -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;
|
||||
}
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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');
|
||||
|
||||
Reference in New Issue
Block a user