Preview Updated 2026-05-10

Dock layout

Recursive split + tabbed-pane shell for desktop application layouts. v1 is declarative; v2 will add drag-to-rearrange.

Basic usage

The layout is declared as a tree of DockGroup nodes: each group either has children (further splits) or panels (a tabbed area). Content is provided through the named slot panel-{id} (Vue) / slots["panel-{id}"] (React).

背景

Explorer

📁 src
📄 orders.ts
📄 login.ts

orders.ts

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

Terminal

Output

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

<script setup lang="ts">
import { CfDockLayout } from '@chufix-design/vue';
import type { DockGroup } from '@chufix-design/vue';

const layout: DockGroup = {
  id: 'root',
  orientation: 'horizontal',
  children: [
    {
      id: 'left',
      orientation: 'vertical',
      panels: [
        { id: 'tree', title: 'Explorer', closable: false },
      ],
      size: '240px',
    },
    {
      id: 'main',
      orientation: 'vertical',
      children: [
        {
          id: 'editor',
          orientation: 'horizontal',
          panels: [
            { id: 'orders', title: 'orders.ts', closable: true, detachable: true },
            { id: 'login', title: 'login.ts', closable: true, detachable: true },
          ],
        },
        {
          id: 'bottom',
          orientation: 'horizontal',
          panels: [
            { id: 'terminal', title: 'Terminal', closable: false },
            { id: 'output', title: 'Output', closable: false },
          ],
          size: '160px',
        },
      ],
    },
  ],
};
</script>

<template>
  <div style="height: 360px; border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfDockLayout :layout="layout">
      <template #panel-tree>
        <ul style="padding: 12px 16px; margin: 0; list-style: none; font-size: 12px; color: var(--fg-2);">
          <li>📁 src</li>
          <li style="padding-left: 14px;">📄 orders.ts</li>
          <li style="padding-left: 14px;">📄 login.ts</li>
        </ul>
      </template>
      <template #panel-orders>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">// orders.ts
export const fetchOrders = () =&gt; …</pre>
      </template>
      <template #panel-login>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">// login.ts
export const login = () =&gt; …</pre>
      </template>
      <template #panel-terminal>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">$ pnpm dev
[vite] dev server running on :5173</pre>
      </template>
      <template #panel-output>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);">[14:32:01] Build succeeded</pre>
      </template>
    </CfDockLayout>
  </div>
</template>

<script setup>
import { CfDockLayout } from '@chufix-design/vue';

const layout= {
  id: 'root',
  orientation: 'horizontal',
  children: [
    {
      id: 'left',
      orientation: 'vertical',
      panels: [
        { id: 'tree', title: 'Explorer', closable: false },
      ],
      size: '240px',
    },
    {
      id: 'main',
      orientation: 'vertical',
      children: [
        {
          id: 'editor',
          orientation: 'horizontal',
          panels: [
            { id: 'orders', title: 'orders.ts', closable, detachable: true },
            { id: 'login', title: 'login.ts', closable, detachable: true },
          ],
        },
        {
          id: 'bottom',
          orientation: 'horizontal',
          panels: [
            { id: 'terminal', title: 'Terminal', closable: false },
            { id: 'output', title: 'Output', closable: false },
          ],
          size: '160px',
        },
      ],
    },
  ],
};
</script>

<template>
  <div style="height: 360px; border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfDockLayout :layout="layout">
      <template #panel-tree>
        <ul style="padding: 12px 16px; margin: 0; list-style: none; font-size: 12px; color: var(--fg-2);">
          <li>📁 src</li>
          <li style="padding-left: 14px;">📄 orders.ts</li>
          <li style="padding-left: 14px;">📄 login.ts</li>
        </ul>
      </template>
      <template #panel-orders>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">// orders.ts
export const fetchOrders = () =&gt; …</pre>
      </template>
      <template #panel-login>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">// login.ts
export const login = () =&gt; …</pre>
      </template>
      <template #panel-terminal>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);">$ pnpm dev
[vite] dev server running on :5173</pre>
      </template>
      <template #panel-output>
        <pre style="margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);">[14:32:01] Build succeeded</pre>
      </template>
    </CfDockLayout>
  </div>
</template>

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

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

Minimal layout (no nesting)

A single group with multiple panels = a plain tabbed view, equivalent to CfTabs. If you only need tab switching, use CfTabs directly — it’s lighter.

背景

预览

Console

预览区（这是一个仅 tab 切换的简化布局）

<script setup lang="ts">
import { CfDockLayout } from '@chufix-design/vue';
import type { DockGroup } from '@chufix-design/vue';
const layout: DockGroup = {
  id: 'root',
  orientation: 'vertical',
  panels: [
    { id: 'preview', title: '预览', closable: false },
    { id: 'console', title: 'Console', closable: false },
  ],
};
</script>

<template>
  <div style="height: 240px; border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfDockLayout :layout="layout">
      <template #panel-preview>
        <div style="padding: 16px; color: var(--fg-2);">预览区（这是一个仅 tab 切换的简化布局）</div>
      </template>
      <template #panel-console>
        <pre style="margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);">$ ready
[14:32] /v1/orders → 200 OK · 288ms</pre>
      </template>
    </CfDockLayout>
  </div>
</template>

<script setup>
import { CfDockLayout } from '@chufix-design/vue';
const layout= {
  id: 'root',
  orientation: 'vertical',
  panels: [
    { id: 'preview', title: '预览', closable: false },
    { id: 'console', title: 'Console', closable: false },
  ],
};
</script>

<template>
  <div style="height: 240px; border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfDockLayout :layout="layout">
      <template #panel-preview>
        <div style="padding: 16px; color: var(--fg-2);">预览区（这是一个仅 tab 切换的简化布局）</div>
      </template>
      <template #panel-console>
        <pre style="margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);">$ ready
[14:32] /v1/orders → 200 OK · 288ms</pre>
      </template>
    </CfDockLayout>
  </div>
</template>

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

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

API

Prop	Type	Default	Description
`layout`	`DockGroup`	—	Layout description tree
`active`	`Record<groupId, panelId>`	`{}`	Active tab id per group

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

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

Events: active-change(groupId, panelId) / panel-close(...) / panel-detach(...).

v1 limitations: splitter resize and drag-to-rearrange are not yet supported; planned for v2.