开发预览更新于 2026-05-10

DomainPane API 调试面板

Collection / Request / Response / Mock / Workflow 5 个 tab 的 API 调试面板。

基础用法

预定义 5 个 tab（id：collection、request、response、mock、workflow），每个 tab 内容由消费方通过 named slot #panel-{tabId}（Vue）/ slots["panel-{tabId}"]（React）填入。也可通过 tabs prop 覆盖默认列表。

来源：domain.html。

背景视口

REST 集合树（基于 CfTreeView）。

src/App.vue

<script setup lang="ts">
import { CfDomainPane } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfDomainPane>
      <template #panel-collection><p style="color: var(--fg-2);">REST 集合树（基于 CfTreeView）。</p></template>
      <template #panel-request><p style="color: var(--fg-2);">请求构造器：URL + Headers + Body + Auth。</p></template>
      <template #panel-response><p style="color: var(--fg-2);">响应检查器：Status + Headers + Body + Timing。</p></template>
      <template #panel-mock><p style="color: var(--fg-2);">Mock 规则配置卡。</p></template>
      <template #panel-workflow><p style="color: var(--fg-2);">自动化工作流节点。</p></template>
    </CfDomainPane>
  </div>
</template>

<script setup>
import { CfDomainPane } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfDomainPane>
      <template #panel-collection><p style="color: var(--fg-2);">REST 集合树（基于 CfTreeView）。</p></template>
      <template #panel-request><p style="color: var(--fg-2);">请求构造器：URL + Headers + Body + Auth。</p></template>
      <template #panel-response><p style="color: var(--fg-2);">响应检查器：Status + Headers + Body + Timing。</p></template>
      <template #panel-mock><p style="color: var(--fg-2);">Mock 规则配置卡。</p></template>
      <template #panel-workflow><p style="color: var(--fg-2);">自动化工作流节点。</p></template>
    </CfDomainPane>
  </div>
</template>

import { CfDomainPane, CfTreeView } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ height: 280 }}>
          <CfDomainPane>
            <p style={{ color: "var(--fg-2)" }}>REST 集合树（基于 CfTreeView）。</p>
    </>
  );
}

import { CfDomainPane, CfTreeView } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ height: 280 }}>
          <CfDomainPane>
            <p style={{ color: "var(--fg-2)" }}>REST 集合树（基于 CfTreeView）。</p>
    </>
  );
}

真实内容拼装

5 个 tab 拼出一个 Postman 雏形：CfTreeView 集合 / CfMethodBadge + CfKVEditor 请求 / CfStatusCodeBadge + CfDescriptionList 响应。

背景视口

auth/
orders/

src/App.vue

<script setup lang="ts">
import { CfDomainPane, CfTreeView, CfMethodBadge, CfStatusCodeBadge, CfKVEditor, CfDescriptionList } from '@chufix-design/vue';
import { ref } from 'vue';
const collection = [
  { id: 'auth', label: 'auth/', children: [
    { id: 'login', label: 'POST /login' },
    { id: 'logout', label: 'POST /logout' },
  ]},
  { id: 'orders', label: 'orders/', children: [
    { id: 'list', label: 'GET /orders' },
    { id: 'create', label: 'POST /orders' },
  ]},
];
const headers = ref([
  { key: 'Authorization', value: 'Bearer {{token}}', enabled: true },
  { key: 'Accept', value: 'application/json', enabled: true },
  { key: 'X-Trace-Id', value: '{{trace_id}}', enabled: false },
]);
const respMeta = [
  { label: 'Status', value: '200 OK' },
  { label: 'Time', value: '288ms' },
  { label: 'Size', value: '4.2 KB' },
];
</script>
<template>
  <div style="height: 360px;">
    <CfDomainPane>
      <template #panel-collection>
        <CfTreeView :nodes="collection" />
      </template>
      <template #panel-request>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div style="display: flex; align-items: center; gap: 6px;">
            <CfMethodBadge kind="post" />
            <span style="font-family: var(--font-mono);">/v1/orders</span>
          </div>
          <div>
            <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">Headers</div>
            <CfKVEditor v-model="headers" />
          </div>
        </div>
      </template>
      <template #panel-response>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <CfStatusCodeBadge :code="201" reason="Created" />
          <CfDescriptionList :items="respMeta" />
          <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-2); border-radius: var(--r-3);">{
  "id": "ord_1842",
  "amount": 12340
}</pre>
        </div>
      </template>
      <template #panel-mock>
        <p style="color: var(--fg-2); font-size: 13px;">Mock 规则配置（基于 CfCard + CfSwitch）。</p>
      </template>
      <template #panel-workflow>
        <p style="color: var(--fg-2); font-size: 13px;">自动化工作流节点（基于 CfKanban）。</p>
      </template>
    </CfDomainPane>
  </div>
</template>

<script setup>
import { CfDomainPane, CfTreeView, CfMethodBadge, CfStatusCodeBadge, CfKVEditor, CfDescriptionList } from '@chufix-design/vue';
import { ref } from 'vue';
const collection = [
  { id: 'auth', label: 'auth/', children: [
    { id: 'login', label: 'POST /login' },
    { id: 'logout', label: 'POST /logout' },
  ]},
  { id: 'orders', label: 'orders/', children: [
    { id: 'list', label: 'GET /orders' },
    { id: 'create', label: 'POST /orders' },
  ]},
];
const headers = ref([
  { key: 'Authorization', value: 'Bearer {{token}}', enabled: true },
  { key: 'Accept', value: 'application/json', enabled: true },
  { key: 'X-Trace-Id', value: '{{trace_id}}', enabled: false },
]);
const respMeta = [
  { label: 'Status', value: '200 OK' },
  { label: 'Time', value: '288ms' },
  { label: 'Size', value: '4.2 KB' },
];
</script>
<template>
  <div style="height: 360px;">
    <CfDomainPane>
      <template #panel-collection>
        <CfTreeView :nodes="collection" />
      </template>
      <template #panel-request>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div style="display: flex; align-items: center; gap: 6px;">
            <CfMethodBadge kind="post" />
            <span style="font-family: var(--font-mono);">/v1/orders</span>
          </div>
          <div>
            <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">Headers</div>
            <CfKVEditor v-model="headers" />
          </div>
        </div>
      </template>
      <template #panel-response>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <CfStatusCodeBadge :code="201" reason="Created" />
          <CfDescriptionList :items="respMeta" />
          <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-2); border-radius: var(--r-3);">{
  "id": "ord_1842",
  "amount": 12340
}</pre>
        </div>
      </template>
      <template #panel-mock>
        <p style="color: var(--fg-2); font-size: 13px;">Mock 规则配置（基于 CfCard + CfSwitch）。</p>
      </template>
      <template #panel-workflow>
        <p style="color: var(--fg-2); font-size: 13px;">自动化工作流节点（基于 CfKanban）。</p>
      </template>
    </CfDomainPane>
  </div>
</template>

import { useState } from 'react';
import { CfDomainPane, CfTreeView } from '@chufix-design/react';

export default function Demo() {
  const collection = [
    { id: 'auth', label: 'auth/', children: [
      { id: 'login', label: 'POST /login' },
      { id: 'logout', label: 'POST /logout' },
    ]},
    { id: 'orders', label: 'orders/', children: [
      { id: 'list', label: 'GET /orders' },
      { id: 'create', label: 'POST /orders' },
    ]},
  ];
  const [headers, setHeaders] = useState([
    { key: 'Authorization', value: 'Bearer {{token}}', enabled: true },
    { key: 'Accept', value: 'application/json', enabled: true },
    { key: 'X-Trace-Id', value: '{{trace_id}}', enabled: false },
  ]);
  const respMeta = [
    { label: 'Status', value: '200 OK' },
    { label: 'Time', value: '288ms' },
    { label: 'Size', value: '4.2 KB' },
  ];
  return (
    <>
      <div style={{ height: 360 }}>
          <CfDomainPane>
              <CfTreeView nodes={collection} />
    </>
  );
}

import { useState } from 'react';
import { CfDomainPane, CfTreeView } from '@chufix-design/react';

export default function Demo() {
  const collection = [
    { id: 'auth', label: 'auth/', children: [
      { id: 'login', label: 'POST /login' },
      { id: 'logout', label: 'POST /logout' },
    ]},
    { id: 'orders', label: 'orders/', children: [
      { id: 'list', label: 'GET /orders' },
      { id: 'create', label: 'POST /orders' },
    ]},
  ];
  const [headers, setHeaders] = useState([
    { key: 'Authorization', value: 'Bearer {{token}}', enabled: true },
    { key: 'Accept', value: 'application/json', enabled: true },
    { key: 'X-Trace-Id', value: '{{trace_id}}', enabled: false },
  ]);
  const respMeta = [
    { label: 'Status', value: '200 OK' },
    { label: 'Time', value: '288ms' },
    { label: 'Size', value: '4.2 KB' },
  ];
  return (
    <>
      <div style={{ height: 360 }}>
          <CfDomainPane>
              <CfTreeView nodes={collection} />
    </>
  );
}

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	第一个 tab id	活动 tab
`tabs`	`TemplatePaneTab[]`	预设	自定义 tab 列表
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

预设的 tab id 列表导出为 PROTOCOL_TABS / NETWORK_TABS / SQL_TABS 等常量，可在自定义 tabs 时直接拿来用。

模版组件本质是 CfTabs 的语义薄壳。如果你不需要一组预定义 tab，直接用 CfTabs 即可。