feat(ui): 全站画布氛围层、侧栏 sticky 对齐与长页回顶

用顶栏/主栏高度令牌消除 sticky 首滚空走,面包屑叠到中栏上方,公开页增加回顶浮钮。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-18 00:28:25 +08:00
parent 0b60c4299b
commit 1535577eac
21 changed files with 286 additions and 111 deletions

View File

@@ -1,13 +1,12 @@
"use client";
import { useEffect, useState } from "react";
import { ArrowUp, MessageSquare } from "lucide-react";
import { MessageSquare } from "lucide-react";
import LikeButton from "./LikeButton";
import { scrollBehavior } from "@/lib/motion";
/**
* 帖子详情移动端浮动操作条(lg 以下显示):
* 长文读到中途也能点赞 / 跳评论框 / 回顶部,不必滚到文末。
* 长文读到中途也能点赞 / 跳评论框;回顶由全局 BackToTop 承担。
*/
export default function MobilePostBar({
postId,
@@ -20,15 +19,6 @@ export default function MobilePostBar({
likeCount: number;
allowComments?: boolean;
}) {
const [showTop, setShowTop] = useState(false);
useEffect(() => {
const onScroll = () => setShowTop(window.scrollY > 400);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const scrollToComments = () => {
document.getElementById("comment-input")?.scrollIntoView({
behavior: scrollBehavior(),
@@ -36,13 +26,6 @@ export default function MobilePostBar({
});
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: scrollBehavior(),
});
};
return (
<div className="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-40" role="navigation" aria-label="阅读操作">
<div
@@ -66,21 +49,9 @@ export default function MobilePostBar({
<MessageSquare size={18} />
</button>
) : null}
{/* 放大点赞按钮的触控区域(样式见 globals.css .j13-bar-like) */}
<div className="j13-bar-like">
<LikeButton postId={postId} liked={liked} likeCount={likeCount} variant="compact" />
</div>
{showTop && (
<button
type="button"
onClick={scrollToTop}
className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] j13-toast-in"
style={{ color: "var(--ink-2)" }}
aria-label="回到顶部"
>
<ArrowUp size={18} />
</button>
)}
</div>
</div>
);