Layout 布局
Layout 用于组织页面骨架、双栏工作台、可折叠侧栏和响应式 rail。API 覆盖 Layout / Sider 这组核心能力，视觉仍然使用 Rue 当前的柔和面板、圆角和 utility class 组合方式。
何时使用
- 需要把导航、工作区、补充信息区和页脚组织成稳定的页面骨架。
- 需要一套既能做控制台类双栏壳子，也能做 dashboard 内部嵌套布局的基础容器。
- 需要侧栏支持收起、零宽触发器和响应式 breakpoint，而不是自己拼一层 Flex 状态机。
推荐用法
# Basic structure
最小可用壳子：Header、Content、Footer 三段式结构直接开箱。
header
Project launch board
livebeta
Content
Use content as the main canvas for dashboards, docs and editors.
Fluid workspace
The default panel style already carries radius, border and soft depth.
# Workspace shell
典型控制台骨架：左侧导航、顶部命令区、主画布和页脚消息条。
command center
Growth cockpit
ARR
¥ 4.2M
Renewal stayed above 91% for six weeks.
Activation
68%
Onboarding friction is now concentrated in payment setup.
Content canvas
Place your charts, editors or boards here. Layout only handles the page skeleton; the canvas remains fully composable.
release
v0.0.39
148 checks passed, 3 docs pending approval.
Ops queue
Queue7
Review8
Policy8
Export8
# Collapsible sider
Sider 直接自带折叠状态，无需在业务层额外拼宽度与 trigger。
sider status
ready
Trigger 会自动驱动 current width、collapsed state 和 footer 排版。需要更细的文案时，可以接 onCollapse。
# Custom trigger
trigger 可以直接传函数，读取 collapsed / below / zeroWidth / toggle。
Custom trigger shell
当你想把 trigger 做成 CTA、chip 或者把断点状态一起露出时，直接用函数式 trigger 就够了。
# Responsive zero-width sider
breakpoint + collapsedWidth=0 会切到零宽模式，并保持浮动 trigger。
responsive
desktop
Try narrow viewport
In browser, shrinking below lg collapses the rail to zero width and leaves a floating trigger.
Callbacks included
onBreakpoint and onCollapse stay separate, so breakpoint and collapse state can be handled independently.
# Nested workbench
Layout 可以继续嵌套，外层做主导航，内层再拆主内容与活动侧栏。
nested shell
Incident room
P112 updates
Main canvas
Use nested Layout when a page itself still has a main + aside split.
Timeline
The parent shell keeps header and footer stable while the child shell manages inner work zones.
API
Layout 的目标不是替代 Flex，而是把页面级骨架和带状态的 Sider 收敛成一套更稳定的基础设施。 如果只是做局部排版，可以用 Flex / Grid；如果要组织页面结构、导航和补充侧栏，就切到 Layout。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
hasSider | 显式声明当前 Layout 包含 Sider，适合 SSR 或异步 children 场景避免首帧方向抖动。 | boolean | 自动推断 |
className / style | 根容器样式扩展，继续保持 Rue 的 utility class 叠加方式。 | string / string | Record<string, any> | - |
Layout.Header / Content / Footer | 语义分区子组件，默认提供 Rue 风格的面板样式，也支持通过 className 覆盖。 | FC | - |
Layout.Sider | 侧边栏子组件，支持折叠、响应式收起、零宽触发器和自定义 trigger。 | FC | - |
Sider.width | 展开态宽度，支持数字与任意 CSS 长度。 | number | string | 240 |
Sider.collapsedWidth | 收起态宽度；传 0 时会切到零宽模式，保持浮动 trigger。 | number | string | 80 |
Sider.collapsible | 开启点击触发器的折叠能力。 | boolean | false |
Sider.collapsed / defaultCollapsed | 受控和非受控折叠态。 | boolean | false |
Sider.breakpoint | 按 xs 到 xxl 断点自动切换 broken / collapsed，并触发回调。 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | - |
Sider.trigger | 自定义 trigger 节点，或传入函数读取 collapsed / below / zeroWidth / toggle。 | any | (meta) => any | 内置 Trigger |
Sider.triggerPosition | 控制默认 trigger 贴在起始侧还是结束侧。 | 'start' | 'end' | end |
Sider.theme | 切换 light / dark 两套侧栏基底色。 | 'light' | 'dark' | light |
Sider.onCollapse / onBreakpoint | 监听点击折叠与响应式断点变化。 | (collapsed, type) => void / (broken) => void | - |