Layout
整页布局 · 复合 Header/Sider/Content/Footer + Sider 可折叠(受控/断点/trigger) + 宽度过渡(零依赖·尽量 RSC·复用 ScrollArea)
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
全状态
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
Playground
页面内容
第 1 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 2 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 3 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 4 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 5 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 6 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 7 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
第 8 段占位内容 —— Content 区 flex-auto 占满并独立滚动，Header 可吸顶、Footer 沉底。
<Layout>
<Layout.Sider collapsible>
{/* dogfood NavMenu：收起态自动切图标轨 */}
<NavMenu items={items} mode={"inline"} />
</Layout.Sider>
<Layout>
<Layout.Header sticky>顶栏</Layout.Header>
<Layout.Content>内容</Layout.Content>
<Layout.Footer>底栏</Layout.Footer>
</Layout>
</Layout>