DockLayout 多面板布局

基础用法

布局以一棵 DockGroup 树声明：每个 group 要么有 children（继续切分）要么有 panels（这是一个 tabbed 区域）。 内容通过 named slot panel-{id}（Vue）/ slots["panel-{id}"]（React）提供。

// orders.ts
export const fetchOrders = () => …

$ pnpm dev
[vite] dev server running on :5173

<CfDockLayout :layout="layout">
<template #panel-orders>… orders.ts 内容 …</template>
<template #panel-login>… login.ts 内容 …</template>
<template #panel-terminal>… terminal 内容 …</template>
</CfDockLayout>

<CfDockLayout layout={layout} slots={{
'panel-orders': <pre>orders.ts</pre>,
'panel-login': <pre>login.ts</pre>,
'panel-terminal': <Terminal />,
}} />

最简布局（无嵌套）

一个 group + 多个 panels = 普通 tabbed 视图，等价于 CfTabs；当只有 tab 切换需求时直接用 CfTabs 更轻。

<CfDockLayout :layout="{ id: 'r', orientation: 'vertical', panels: [...] }" />

<CfDockLayout layout={{ id: "r", orientation: "vertical", panels: [...] }} />

API

DockGroup：{ id, orientation: 'horizontal' \| 'vertical', children?: DockGroup[], panels?: DockPanel[], size? }

DockPanel：{ id, title, contentKey?, closable?, detachable?, size?, collapsed? }

事件：active-change(groupId, panelId) / panel-close(...) / panel-detach(...)。

v1 限制：splitter resize 与 drag-to-rearrange 暂未支持，将在 v2 加入。