Resizable

调整单个区域或对象尺寸。中文惯用名：尺寸调整。

稳定本期新增已接入

元信息

字段	值
规范 ID	`component.resizable`
名称	Resizable
二级分类	布局（`layout`）
用途	调整单个区域或对象尺寸
描述	中文惯用名：尺寸调整。

预览

静态结构：本预览为纵向三面板——PanelGroup（data-slot="resizable-panel-group"，vertical 时 flex-col）内依次为 Panel（data-slot="resizable-panel"）+ 手柄（data-slot="resizable-handle"）+ Panel + 手柄 + Panel；每个 Panel 内的 children 经 renderChildren 渲染 DSL 子树；defaultSize 按百分比解释（本预览 30% / 自适应 / 25%），同项提供 defaultSizePx 时像素优先；minSizePx / maxSizePx 以像素串写入手柄约束的最小 / 最大尺寸。

DSL 结构

DslNode

{
  "type": "Resizable",
  "props": {
    "direction": "vertical",
    "panels": [
      {
        "defaultSize": 30,
        "children": [
          {
            "type": "Text",
            "props": {
              "text": "面板一",
              "style": {
                "display": "block",
                "padding": 8
              }
            }
          }
        ]
      },
      {
        "children": [
          {
            "type": "Text",
            "props": {
              "text": "面板二（纵向排列，手柄可拖拽）",
              "style": {
                "display": "block",
                "padding": 8
              }
            }
          }
        ]
      },
      {
        "defaultSize": 25,
        "children": [
          {
            "type": "Text",
            "props": {
              "text": "面板三",
              "style": {
                "display": "block",
                "padding": 8
              }
            }
          }
        ]
      }
    ]
  }
}

何时用

何时使用

调整单个区域或对象的尺寸：检查器、底部终端、侧边抽屉式区域。
需要像素级尺寸约束：minSizePx / maxSizePx 限定可拖范围，defaultSizePx 给定初始像素尺寸。
纵向 / 多面板组合需要自由尺寸分配（不按固定比例）。

何时不用

把工作区拆成左右面板 / 上下分区（固定分割条的分栏口径）：使用 Splitter（同一适配器，语义更贴切）。
不需要拖拽的固定分割：使用 Separator。
需要收起 / 展开而非拖拽调尺寸：使用 Sider 的 collapsed 受控折叠或 Collapsible。

变体

变体	视觉形态	适用场景
纵向三面板	上下堆叠 + 两道横向手柄	代码 / 输出 / 日志三段式工作区
像素初始尺寸	defaultSizePx 指定初始像素宽高	侧栏需要固定初始宽度而非比例
尺寸约束	minSizePx / maxSizePx 夹逼拖拽范围	防止区域被拖到不可用或撑破布局
水平两面板	direction 缺省 horizontal	主区 + 检查器并列

API 属性

属性	类型	默认值	说明
`panels`	`ResizablePanelData[]`	[]	面板列表：{ children?, defaultSize?（百分比 0-100）, defaultSizePx?, minSizePx?, maxSizePx? }
`direction`	`'horizontal'	'vertical'`	'horizontal'
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

同一面板的 defaultSize 与 defaultSizePx 不要同时给：像素优先，比例会被忽略，容易与预期不符。
minSizePx 按内容最小可用宽度设定（如表格至少 320px），避免拖到无法阅读。
多面板时首尾面板给尺寸、中间面板自适应，比例关系最稳定。
尺寸变化不参与数据流：拖拽结果不写回 state（除非产品明确要求记忆布局）。

正例

✓ 开发工作台：上代码（defaultSize 30%）+ 中预览 + 下日志（defaultSize 25%）。
✓ 主区 + 右侧检查器：defaultSizePx 320 且 minSizePx 240，保证检查器可用宽度。

反例

✕ 给每个面板都写死百分比且总和不为 100（拖拽后比例跳变）。
✕ 在高度不定的容器里使用（分栏区高度塌陷，手柄无法定位）。

Design Token 映射

不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。