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

@@ -283,8 +283,11 @@ function BoardPanelsBody(props: BoardPanelsProps) {
export function BoardPanels(props: BoardPanelsProps) {
return (
<aside className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]" aria-label="板块面板">
<div className="sticky top-24 space-y-4">
<aside
className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]"
aria-label="板块面板"
>
<div className="space-y-4">
<BoardPanelsBody {...props} />
</div>
</aside>
@@ -302,18 +305,19 @@ export function BoardPanelsMobile(props: BoardPanelsProps) {
/** 板块不存在时的简卡 */
export function BoardMissingPanel() {
return (
<aside className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]" aria-label="板块面板">
<div className="sticky top-24">
<section className="j13-module">
<p className="j13-module-title mb-2">
<LayoutGrid size={15} style={{ color: "var(--ink-3)" }} /> 板块
</p>
<p className="meta">板块不存在或已删除</p>
<Link href="/" className="btn btn-line btn-sm mt-3 w-full justify-center">
返回全部讨论
</Link>
</section>
</div>
<aside
className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]"
aria-label="板块面板"
>
<section className="j13-module">
<p className="j13-module-title mb-2">
<LayoutGrid size={15} style={{ color: "var(--ink-3)" }} /> 板块
</p>
<p className="meta">板块不存在或已删除</p>
<Link href="/" className="btn btn-line btn-sm mt-3 w-full justify-center">
返回全部讨论
</Link>
</section>
</aside>
);
}

View File

@@ -450,8 +450,11 @@ function CommunityPanelsBody({
export function CommunityPanels(props: PanelsProps) {
return (
<aside className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]" aria-label="社区面板">
<div className="sticky top-24 space-y-4">
<aside
className="hidden w-[280px] shrink-0 lg:block xl:w-[300px]"
aria-label="社区面板"
>
<div className="space-y-4">
<CommunityPanelsBody {...props} />
</div>
</aside>

View File

@@ -16,8 +16,12 @@ export function WorkspaceNav({ boards }: { boards: BoardWithCount[]; user?: User
const activeBoard = Number(params.get("board")) || 0;
return (
<nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
<div className="sticky top-24 space-y-5">
// sticky 必须挂在 flex 子项上:父级 items-start 会把内层缩成内容高,失去粘滞行程
<nav
className="hidden lg:block w-56 xl:w-60 shrink-0 sticky top-[var(--rail-top)] max-h-[var(--rail-max-h)] j13-rail-scroll"
aria-label="工作台导航"
>
<div className="space-y-5">
{/* 「全部讨论」是重置筛选的动作入口,与板块目录分区展示;卡片样式与下方板块一致 */}
<div className="space-y-0.5">
<Link href="/" className="j13-bcard" aria-current={activeBoard === 0 ? "page" : undefined}>