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

@@ -8,11 +8,14 @@ export default function SiteDocShell({
left,
right,
children,
breadcrumb,
mobileExtras,
}: {
left?: ReactNode;
right?: ReactNode;
children: ReactNode;
/** 中栏卡片上方的位置指引;桌面绝对定位,不占栅格高度 */
breadcrumb?: ReactNode;
/** 窄屏下沉到正文之后的侧栏副本 */
mobileExtras?: ReactNode;
}) {
@@ -20,16 +23,19 @@ export default function SiteDocShell({
<>
<div className="grid grid-cols-1 items-start lg:grid-cols-[224px_minmax(0,1fr)_280px] xl:grid-cols-[240px_minmax(0,1fr)_300px] gap-x-6 xl:gap-x-7">
<aside
className="hidden lg:flex w-56 xl:w-60 shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
className="hidden lg:flex w-56 xl:w-60 shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden"
aria-label="站点导航"
>
{left}
</aside>
<div className="min-w-0">{children}</div>
<div className="min-w-0 relative">
{breadcrumb}
{children}
</div>
<aside
className="hidden lg:flex w-[280px] xl:w-[300px] shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
className="hidden lg:flex w-[280px] xl:w-[300px] shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden"
aria-label="阅读辅助"
>
{right}