数据展示有已知边界

NnPacketViewer 报文查看器

解析树与十六进制字节联动查看。

示例

API

Props

名称	类型	默认值	说明
open	boolean	false	受控弹窗状态，配合 v-model:open。
packetData	string	''	十六进制报文；解析时移除空白、每两个字符作为一个字节并转为大写。
rawParseResult	PacketParseResult | null	null	解析树；节点的偏移和长度用于联动高亮字节范围。

interface PacketParseResult {
    tree: PacketTreeNode;
}

interface PacketTreeNode {
    name?: unknown;
    offset?: number;
    length?: number;
    value?: unknown;
    children?: PacketTreeNode[];
}

弹窗打开时展开整棵解析树。选择树节点会高亮对应字节；点击字节会选择包含它的最深节点。节点范围超出报文时会限制到现有字节。

Events

事件	参数	说明
update:open	(false)	内部弹窗的关闭按钮或 Escape 等关闭请求触发。

当前限制

• 标题、页脚、面板文案和布局目前固定，没有组件自有插槽或尺寸 Prop；遮罩点击不会关闭。
• packetData 不验证十六进制字符，奇数长度的最后一个字符会被丢弃。
• 复制解析树依赖浏览器剪贴板能力，并通过全局通知服务反馈结果。