ChuFix UI v0.11.0
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).

背景 视口
  • 📁 src
  • 📄 orders.ts
  • 📄 login.ts
// orders.ts
export const fetchOrders = () => …
$ pnpm dev
[vite] dev server running on :5173
src/App.vue 
<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>
import { CfDockLayout } from '@chufix-design/react';

export default function Demo() {
  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',
          },
        ],
      },
    ],
  };
  return (
    <>
      <div style={{ height: 360, border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfDockLayout layout={layout}>
              <ul style={{ padding: "12px 16px", margin: 0, listStyle: "none", fontSize: 12, color: "var(--fg-2)" }}>
                <li>📁 src</li>
                <li style={{ paddingLeft: 14 }}>📄 orders.ts</li>
                <li style={{ paddingLeft: 14 }}>📄 login.ts</li>
              </ul>
    </>
  );
}
import { CfDockLayout } from '@chufix-design/react';

export default function Demo() {
  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',
          },
        ],
      },
    ],
  };
  return (
    <>
      <div style={{ height: 360, border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfDockLayout layout={layout}>
              <ul style={{ padding: "12px 16px", margin: 0, listStyle: "none", fontSize: 12, color: "var(--fg-2)" }}>
                <li>📁 src</li>
                <li style={{ paddingLeft: 14 }}>📄 orders.ts</li>
                <li style={{ paddingLeft: 14 }}>📄 login.ts</li>
              </ul>
    </>
  );
}

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.

背景 视口
预览区（这是一个仅 tab 切换的简化布局）
src/App.vue 
<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>
import { CfDockLayout } from '@chufix-design/react';

export default function Demo() {
  const layout: DockGroup = {
    id: 'root',
    orientation: 'vertical',
    panels: [
      { id: 'preview', title: '预览', closable: false },
      { id: 'console', title: 'Console', closable: false },
    ],
  };
  return (
    <>
      <div style={{ height: 240, border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfDockLayout layout={layout}>
              <div style={{ padding: 16, color: "var(--fg-2)" }}>预览区（这是一个仅 tab 切换的简化布局）</div>
    </>
  );
}
import { CfDockLayout } from '@chufix-design/react';

export default function Demo() {
  const layout= {
    id: 'root',
    orientation: 'vertical',
    panels: [
      { id: 'preview', title: '预览', closable: false },
      { id: 'console', title: 'Console', closable: false },
    ],
  };
  return (
    <>
      <div style={{ height: 240, border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfDockLayout layout={layout}>
              <div style={{ padding: 16, color: "var(--fg-2)" }}>预览区（这是一个仅 tab 切换的简化布局）</div>
    </>
  );
}

API

PropTypeDefaultDescription
layoutDockGroup—Layout description tree
activeRecord<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.

反馈与讨论

Dock layout · Discussion

0
0 / 600
正在加载评论...