Preview Updated 2026-05-10

NetworkPane

Network capture pane with HAR / Hex / PCAP / Cert / Cookie tabs.

Basic usage

Five predefined tabs (ids: har, hex, pcap, cert, cookie); the consumer fills each tab via a named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can also be overridden with the tabs prop.

Source: network.html.

背景

HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。

src/App.vue

<script setup lang="ts">
import { CfNetworkPane } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfNetworkPane>
      <template #panel-har><p style="color: var(--fg-2);">HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。</p></template>
      <template #panel-hex><p style="color: var(--fg-2);">16 进制 + ASCII 双栏视图。</p></template>
      <template #panel-pcap><p style="color: var(--fg-2);">抓包行项列表。</p></template>
      <template #panel-cert><p style="color: var(--fg-2);">X.509 证书字段树。</p></template>
      <template #panel-cookie><p style="color: var(--fg-2);">域级 cookie 管理。</p></template>
    </CfNetworkPane>
  </div>
</template>

<script setup>
import { CfNetworkPane } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfNetworkPane>
      <template #panel-har><p style="color: var(--fg-2);">HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。</p></template>
      <template #panel-hex><p style="color: var(--fg-2);">16 进制 + ASCII 双栏视图。</p></template>
      <template #panel-pcap><p style="color: var(--fg-2);">抓包行项列表。</p></template>
      <template #panel-cert><p style="color: var(--fg-2);">X.509 证书字段树。</p></template>
      <template #panel-cookie><p style="color: var(--fg-2);">域级 cookie 管理。</p></template>
    </CfNetworkPane>
  </div>
</template>

import { CfChartCrosshair, CfNetworkPane, CfTimingBar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ height: 280 }}>
          <CfNetworkPane>
            <p style={{ color: "var(--fg-2)" }}>HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。</p>
    </>
  );
}

import { CfChartCrosshair, CfNetworkPane, CfTimingBar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ height: 280 }}>
          <CfNetworkPane>
            <p style={{ color: "var(--fg-2)" }}>HAR 请求瀑布图（基于 CfTimingBar + CfChartCrosshair）。</p>
    </>
  );
}

Realistic composition

Each of the 5 tabs hosts a corresponding atom: HAR Timeline uses CfTimingBar; the Hex Viewer uses pre + monospace font; cert fields use CfDescriptionList.

背景

200OK/v1/orders · 312ms

src/App.vue

<script setup lang="ts">
import { CfNetworkPane, CfTimingBar, CfStatusCodeBadge, CfDescriptionList } from '@chufix-design/vue';
const r1 = [
  { label: 'DNS', start: 0, end: 8, colorIndex: 6 },
  { label: 'TLS', start: 8, end: 92, colorIndex: 2 },
  { label: 'Wait', start: 92, end: 245, colorIndex: 1 },
  { label: 'Receive', start: 245, end: 312, colorIndex: 3 },
];
const certInfo = [
  { label: 'Common Name', value: 'api.protoforge.io' },
  { label: 'Issuer', value: "Let's Encrypt R3" },
  { label: 'Valid From', value: '2026-04-12' },
  { label: 'Valid To', value: '2026-07-11' },
  { label: 'SHA-256', value: '6a:bf:34:8d:21:99…' },
];
</script>
<template>
  <div style="height: 320px;">
    <CfNetworkPane>
      <template #panel-har>
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <CfStatusCodeBadge :code="200" reason="OK" />
            <span style="font-family: var(--font-mono); font-size: 12px;">/v1/orders · 312ms</span>
          </div>
          <CfTimingBar :phases="r1" />
        </div>
      </template>
      <template #panel-hex>
        <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--fg-1); background: var(--bg-2); border-radius: var(--r-3);">00000000  47 45 54 20 2f 76 31 2f  6f 72 64 65 72 73 20 48  GET /v1/orders H
00000010  54 54 50 2f 31 2e 31 0d  0a 48 6f 73 74 3a 20 61  TTP/1.1..Host: a
00000020  70 69 2e 70 72 6f 74 6f  66 6f 72 67 65 2e 69 6f  pi.protoforge.io</pre>
      </template>
      <template #panel-pcap>
        <p style="color: var(--fg-2); font-size: 13px;">Wireshark 风格的抓包行，由 PCAPRow 子组件渲染（待实现）。</p>
      </template>
      <template #panel-cert>
        <CfDescriptionList :items="certInfo" />
      </template>
      <template #panel-cookie>
        <p style="color: var(--fg-2); font-size: 13px;">域级 cookie 管理（基于 CfDataGrid）。</p>
      </template>
    </CfNetworkPane>
  </div>
</template>

<script setup>
import { CfNetworkPane, CfTimingBar, CfStatusCodeBadge, CfDescriptionList } from '@chufix-design/vue';
const r1 = [
  { label: 'DNS', start: 0, end: 8, colorIndex: 6 },
  { label: 'TLS', start: 8, end: 92, colorIndex: 2 },
  { label: 'Wait', start: 92, end: 245, colorIndex: 1 },
  { label: 'Receive', start: 245, end: 312, colorIndex: 3 },
];
const certInfo = [
  { label: 'Common Name', value: 'api.protoforge.io' },
  { label: 'Issuer', value: "Let's Encrypt R3" },
  { label: 'Valid From', value: '2026-04-12' },
  { label: 'Valid To', value: '2026-07-11' },
  { label: 'SHA-256', value: '6a:bf:34:8d:21:99…' },
];
</script>
<template>
  <div style="height: 320px;">
    <CfNetworkPane>
      <template #panel-har>
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <CfStatusCodeBadge :code="200" reason="OK" />
            <span style="font-family: var(--font-mono); font-size: 12px;">/v1/orders · 312ms</span>
          </div>
          <CfTimingBar :phases="r1" />
        </div>
      </template>
      <template #panel-hex>
        <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--fg-1); background: var(--bg-2); border-radius: var(--r-3);">00000000  47 45 54 20 2f 76 31 2f  6f 72 64 65 72 73 20 48  GET /v1/orders H
00000010  54 54 50 2f 31 2e 31 0d  0a 48 6f 73 74 3a 20 61  TTP/1.1..Host: a
00000020  70 69 2e 70 72 6f 74 6f  66 6f 72 67 65 2e 69 6f  pi.protoforge.io</pre>
      </template>
      <template #panel-pcap>
        <p style="color: var(--fg-2); font-size: 13px;">Wireshark 风格的抓包行，由 PCAPRow 子组件渲染（待实现）。</p>
      </template>
      <template #panel-cert>
        <CfDescriptionList :items="certInfo" />
      </template>
      <template #panel-cookie>
        <p style="color: var(--fg-2); font-size: 13px;">域级 cookie 管理（基于 CfDataGrid）。</p>
      </template>
    </CfNetworkPane>
  </div>
</template>

import { CfNetworkPane, CfStatusCodeBadge, CfTimingBar } from '@chufix-design/react';

export default function Demo() {
  const r1 = [
    { label: 'DNS', start: 0, end: 8, colorIndex: 6 },
    { label: 'TLS', start: 8, end: 92, colorIndex: 2 },
    { label: 'Wait', start: 92, end: 245, colorIndex: 1 },
    { label: 'Receive', start: 245, end: 312, colorIndex: 3 },
  ];
  const certInfo = [
    { label: 'Common Name', value: 'api.protoforge.io' },
    { label: 'Issuer', value: "Let's Encrypt R3" },
    { label: 'Valid From', value: '2026-04-12' },
    { label: 'Valid To', value: '2026-07-11' },
    { label: 'SHA-256', value: '6a:bf:34:8d:21:99…' },
  ];
  return (
    <>
      <div style={{ height: 320 }}>
          <CfNetworkPane>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <CfStatusCodeBadge code={200} reason="OK" />
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>/v1/orders · 312ms</span>
                </div>
                <CfTimingBar phases={r1} />
              </div>
    </>
  );
}

import { CfNetworkPane, CfStatusCodeBadge, CfTimingBar } from '@chufix-design/react';

export default function Demo() {
  const r1 = [
    { label: 'DNS', start: 0, end: 8, colorIndex: 6 },
    { label: 'TLS', start: 8, end: 92, colorIndex: 2 },
    { label: 'Wait', start: 92, end: 245, colorIndex: 1 },
    { label: 'Receive', start: 245, end: 312, colorIndex: 3 },
  ];
  const certInfo = [
    { label: 'Common Name', value: 'api.protoforge.io' },
    { label: 'Issuer', value: "Let's Encrypt R3" },
    { label: 'Valid From', value: '2026-04-12' },
    { label: 'Valid To', value: '2026-07-11' },
    { label: 'SHA-256', value: '6a:bf:34:8d:21:99…' },
  ];
  return (
    <>
      <div style={{ height: 320 }}>
          <CfNetworkPane>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <CfStatusCodeBadge code={200} reason="OK" />
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>/v1/orders · 312ms</span>
                </div>
                <CfTimingBar phases={r1} />
              </div>
    </>
  );
}

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 constants PROTOCOL_TABS / NETWORK_TABS / SQL_TABS etc., and can be reused directly in custom tabs.

Template components are essentially semantic shells over CfTabs. If you don’t need a predefined tab set, use CfTabs directly.