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

ProtocolPane 协议监视面板

SSE / MQTT / Kafka / gRPC 4 个 tab 的协议监视器外壳。

基础用法

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

来源：protocols.html。

这里渲染 SSE EventStream 监视器（事件流时间轴 + 重连状态）。

<CfProtocolPane>
<template #panel-sse>...</template>
<template #panel-mqtt>...</template>
</CfProtocolPane>

<CfProtocolPane slots={{
'panel-sse': <PanelA />,
'panel-mqtt': <PanelB />,
}} />

真实内容拼装

替换占位文字，4 个 tab 各放一个具体可视化：SSE 时间轴 / MQTT 主题树 / Kafka partition 表 / gRPC 方法列表。

14:32:01●connection.established
14:32:08●order.created · #1842
14:32:14●order.paid · #1842
14:32:30●heartbeat
14:32:45●connection.reconnect

<CfProtocolPane>
<template #panel-sse><EventList /></template>
<template #panel-mqtt><CfTreeView ... /></template>
<template #panel-kafka><CfDataGrid ... /></template>
<template #panel-grpc><CfList ... /></template>
</CfProtocolPane>

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

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 即可。