freefire
1535577eac
用顶栏/主栏高度令牌消除 sticky 首滚空走，面包屑叠到中栏上方，公开页增加回顶浮钮。 Co-authored-by: Cursor <cursoragent@cursor.com>
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import type { ReactNode } from "react";
|
||
|
||
/**
|
||
* 公文阅读三栏壳：宽度与帖子详情对齐。
|
||
* lg = 左224 + 中栏 + 右280；xl = 左240 + 中栏 + 右300；窄屏仅中栏，侧栏下沉。
|
||
*/
|
||
export default function SiteDocShell({
|
||
left,
|
||
right,
|
||
children,
|
||
breadcrumb,
|
||
mobileExtras,
|
||
}: {
|
||
left?: ReactNode;
|
||
right?: ReactNode;
|
||
children: ReactNode;
|
||
/** 中栏卡片上方的位置指引；桌面绝对定位，不占栅格高度 */
|
||
breadcrumb?: ReactNode;
|
||
/** 窄屏下沉到正文之后的侧栏副本 */
|
||
mobileExtras?: ReactNode;
|
||
}) {
|
||
return (
|
||
<>
|
||
<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-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden"
|
||
aria-label="站点导航"
|
||
>
|
||
{left}
|
||
</aside>
|
||
|
||
<div className="min-w-0 relative">
|
||
{breadcrumb}
|
||
{children}
|
||
</div>
|
||
|
||
<aside
|
||
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}
|
||
</aside>
|
||
</div>
|
||
|
||
{mobileExtras ? <div className="lg:hidden mt-6 space-y-4">{mobileExtras}</div> : null}
|
||
</>
|
||
);
|
||
}
|