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

@@ -0,0 +1,39 @@
"use client";
import { useEffect, useState } from "react";
import { ArrowUp } from "lucide-react";
import { scrollBehavior } from "@/lib/motion";
const SHOW_AFTER = 400;
/**
* 公开站长页回顶:滚过阈值后右下角浮现。
* 短页自然不出现;帖子移动端底栏时抬高,避免叠住操作条。
*/
export default function BackToTop({
liftForMobileBar = false,
}: {
liftForMobileBar?: boolean;
}) {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => setVisible(window.scrollY > SHOW_AFTER);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
if (!visible) return null;
return (
<button
type="button"
className={`j13-back-top j13-toast-in${liftForMobileBar ? " is-lifted" : ""}`}
onClick={() => window.scrollTo({ top: 0, behavior: scrollBehavior() })}
aria-label="回到顶部"
>
<ArrowUp size={18} strokeWidth={2.25} aria-hidden />
</button>
);
}