示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地受控工作台布局
主面板宽度：
聚焦分隔手柄后使用 ArrowLeft 或 ArrowRight 调整；Home 跳到 35%，End 跳到 75%。
本地内容工作台
内容列表
- 季度报告
- 发布清单
- 组件验收记录
详情面板
当前选择：季度报告
所有尺寸变化只保存在此示例的本地状态中。
应用壳层
全高工作区
固定页头
可滚动内容 1
可滚动内容 2
可滚动内容 3
可滚动内容 4
可滚动内容 5
可滚动内容 6
可滚动内容 7
可滚动内容 8
可滚动内容 9
可滚动内容 10
可滚动内容 11
可滚动内容 12
可调工作区
使用左右方向键调整面板宽度。
列表
详情
使用建议
先建立明确的尺寸边界
可调分割需要可计算的宽度或高度；在页面或面板容器中提供明确尺寸，并让内部区域保持 min-height 与 min-width 可收缩。
由宿主持有受控尺寸
把 size 与 onSizeChange 连接到宿主状态，并设置 minSize、maxSize 和 keyboardStep；持久化、响应式策略与恢复默认值不属于组件内部职责。
使用 Split 提供完整调整行为
BaseLayoutSplit 会组合面板、交互手柄和 Arrow、Home、End 键盘行为；独立 BaseLayoutResizeHandle 只提供 separator 展示与语义，不会自动修改尺寸。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import {
BaseLayout,
BaseLayoutPane,
BaseLayoutResizeHandle,
BaseLayoutSplit,
} from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Layout 不负责应用路由、导航数据、权限、断点编排或尺寸持久化；独立 ResizeHandle 也不拥有拖拽和键盘状态。
- T17 尚缺 deterministic desktop/mobile visual、manual usability 与最终 packed React 18/19 证据。
- Deterministic desktop/mobile visual evidence, manual usability review, and final packed React 18/19 checks are pending T17/T23.
API
BaseLayout
查看组件源码export interface BaseLayoutProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
header?: ReactNode;
sidebar?: ReactNode;
aside?: ReactNode;
sidebarLabel?: string;
asideLabel?: string;
footer?: ReactNode;
children?: ReactNode;
sidebarSize?: number | string;
asideSize?: number | string;
gap?: BaseLayoutGap;
fullHeight?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseLayoutClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
header | 组件顶部区域呈现的内容。 | ReactNode | — |
sidebar | 布局侧边栏区域呈现的内容。 | ReactNode | — |
aside | 布局辅助区域呈现的内容。 | ReactNode | — |
sidebarLabel | 侧边栏区域的可访问名称。 | string | — |
asideLabel | 辅助区域的可访问名称。 | string | — |
footer | 组件底部区域呈现的内容。 | ReactNode | — |
children | 在 BaseLayout 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
sidebarSize | 侧边栏区域使用的宽度或尺寸。 | number | string | — |
asideSize | 辅助区域使用的宽度或尺寸。 | number | string | — |
gap | 子项之间的间距。 | BaseLayoutGap | — |
fullHeight | 布局是否占满父容器可用高度。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseLayoutClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseLayoutPane
查看组件源码export interface BaseLayoutPaneProps
extends Omit<
HTMLAttributes<HTMLElement>,
'children' | 'className' | 'style'
> {
as?: 'div' | 'main' | 'aside' | 'section' | 'header' | 'footer' | 'nav';
scrollable?: boolean;
bordered?: boolean;
surface?: BaseLayoutPaneSurface;
children?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseLayoutPaneClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 用于渲染组件根节点的 HTML 元素类型。 | 'div' | 'main' | 'aside' | 'section' | 'header' | 'footer' | 'nav' | 'div' |
scrollable | 内容超出面板时是否允许面板内部滚动。 | boolean | false |
bordered | 是否显示区域边框。 | boolean | true |
surface | 面板使用的背景层级或表面样式。 | BaseLayoutPaneSurface | 'default' |
children | 在 BaseLayoutPane 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseLayoutPaneClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseLayoutResizeHandle
查看组件源码export interface BaseLayoutResizeHandleProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
orientation?: BaseLayoutOrientation;
resizable?: boolean;
disabled?: boolean;
size?: BaseLayoutSize;
minSize?: BaseLayoutSize;
maxSize?: BaseLayoutSize;
label?: string;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseLayoutResizeHandleClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 内容或交互项的排列方向。 | BaseLayoutOrientation | 'horizontal' |
resizable | 是否允许用户调整对应区域的尺寸。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
size | 组件使用的预设尺寸。 | BaseLayoutSize | — |
minSize | 用户调整尺寸时允许达到的最小值。 | BaseLayoutSize | — |
maxSize | 用户调整尺寸时允许达到的最大值。 | BaseLayoutSize | — |
label | 尺寸调整手柄提供给辅助技术的操作名称。 | string | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseLayoutResizeHandleClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseLayoutSplit
查看组件源码export interface BaseLayoutSplitProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style'
> {
orientation?: BaseLayoutOrientation;
primary?: ReactNode;
secondary?: ReactNode;
children?: ReactNode;
resizable?: boolean;
disabled?: boolean;
size?: BaseLayoutSize;
defaultSize?: BaseLayoutSize;
minSize?: BaseLayoutSize;
maxSize?: BaseLayoutSize;
gap?: BaseLayoutGap;
keyboardStep?: number;
resizeLabel?: string;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseLayoutSplitClassNames;
style?: CSSProperties;
onSizeChange?: (size: BaseLayoutSize) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 内容或交互项的排列方向。 | BaseLayoutOrientation | 'horizontal' |
primary | 分栏布局主要区域呈现的内容。 | ReactNode | — |
secondary | 分栏布局次要区域呈现的内容。 | ReactNode | — |
children | 在 BaseLayoutSplit 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
resizable | 是否允许用户调整对应区域的尺寸。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
size | 组件使用的预设尺寸。 | BaseLayoutSize | — |
defaultSize | 非受控分栏布局的初始尺寸。 | BaseLayoutSize | — |
minSize | 用户调整尺寸时允许达到的最小值。 | BaseLayoutSize | — |
maxSize | 用户调整尺寸时允许达到的最大值。 | BaseLayoutSize | — |
gap | 子项之间的间距。 | BaseLayoutGap | — |
keyboardStep | 通过键盘调整分栏时每次变化的尺寸步长。 | number | — |
resizeLabel | 提供给尺寸调整控件的可访问名称。 | string | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseLayoutSplitClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onSizeChange | 分栏尺寸变化时调用的回调。 | (size: BaseLayoutSize) => void | — |