键名后面多写了一个引号

组件接收 data。展开状态是一个 Set，开始是空的，所以第一眼全部收起。点击用路径切换：有这条路径就删掉，没有就加进去。

收起时只显示个数

空值用灰色的 null。布尔用紫色，数字用蓝色，字符串用绿色并带一对引号。数组和对象走同一套折叠。收起时，数组显示 Object.keys 的长度加 items，对象显示长度加 properties。展开后画出左边框，缩进靠 ml-4。

数组用下标当标签，对象用键。对象那一支写成键名再加引号，模板里引号写重了，键名渲染出来会多一个引号字符。数组下标不走这一支，所以只有对象的键会多这个字符。路径用点把父路径和键接起来。键名若本身含点，路径会和普通嵌套分不开。对话没有做转义。

这是按层级缩进的树，不是把节点铺在平面上的导图。没有坐标，也没有连线的长度。折叠靠集合里有没有这条路径。

根要有人传入。组件没有内置一份示例 JSON。不传 data，渲染没有起点。

展开集合存在组件状态里。父组件换了一份数据而路径还在，旧路径可能对上新结构里的同名键，也可能对上空。对话没有在数据变化时清空集合。

边框只在展开的那一层出现。收起时连个数都缩在一行里。个数用的是键的数量，数组也走 Object.keys，所以数的是下标的个数，和长度一致。

字符串外层已经有引号。键名再多一个引号时，看起来像键被多包了一层。修的是模板里那一对引号的个数，不是数据本身。