Preview Updated 2026-05-10

Domain pane

API debugging panel with five tabs: Collection, Request, Response, Mock, and Workflow.

Basic usage

Predefines five tabs (ids: collection, request, response, mock, workflow). Each tab’s content is provided by the consumer through the named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can also be overridden via the tabs prop.

Source: domain.html.

REST 集合树（基于 CfTreeView）。

src/App.vue vue

<CfDomainPane>
<template #panel-collection>...</template>
<template #panel-request>...</template>
</CfDomainPane>

src/App.tsx tsx

<CfDomainPane slots={{
'panel-collection': <PanelA />,
'panel-request': <PanelB />,
}} />

Real content layout

Five tabs combine into a Postman-style prototype: CfTreeView for the collection, CfMethodBadge + CfKVEditor for the request, CfStatusCodeBadge + CfDescriptionList for the response.

auth/
orders/

src/App.vue vue

<CfDomainPane>...</CfDomainPane>

src/App.tsx tsx

<CfDomainPane slots={{...}} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	first tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab id lists are exported as PROTOCOL_TABS / NETWORK_TABS / SQL_TABS and other constants, so you can reuse them when supplying a custom tabs.

The template component is essentially a semantic shell around CfTabs. If you don’t need a predefined tab set, use CfTabs directly.