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;
}