iter(g266): 新增 JSON 树查看组件

This commit is contained in:
HIsheR
2026-10-26 22:50:05 +08:00
parent e2fb02f40e
commit 90bd60e0cf
12 changed files with 293 additions and 11 deletions
+43 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T14:47:27.279Z",
"generatedAt": "2026-10-26T14:49:29.506Z",
"repoRoot": ".",
"packages": [
{
@@ -220,7 +220,8 @@
"kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示",
"highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新",
"inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输",
"layout(props, ...children):布局骨架,页头 / 侧栏 / 内容 / 页脚四区一次成型,侧栏可折叠(collapsed 信号双向绑定)"
"layout(props, ...children):布局骨架,页头 / 侧栏 / 内容 / 页脚四区一次成型,侧栏可折叠(collapsed 信号双向绑定)",
"jsonViewer(props):JSON 树查看,按层折叠、分支带计数摘要、叶子按类型着色,只读不编辑"
],
"keyTypes": [
"ButtonProps",
@@ -4163,6 +4164,46 @@
"长内容页面打开 sticky,页头吸顶;内容区自己滚动,不会把整页撑高",
"只要内容不要骨架时省略 header / sider / footer:不套多余容器,内容区独占整行"
]
},
{
"id": "jsonViewer",
"title": "JSON 树查看 JsonViewer",
"demo": "sec-jsonviewer",
"props": [
{
"n": "value",
"t": "unknown",
"d": "任意可序列化数据:对象 / 数组 / 标量都行"
},
{
"n": "depth",
"t": "number",
"d": "默认展开层数;缺省 2(看得到一级结构又不至于刷屏)"
},
{
"n": "rootLabel",
"t": "string",
"d": "根节点键名;缺省 root"
},
{
"n": "maxHeight",
"t": "number",
"d": "最高高度(px),超出在框内滚动;缺省不限高"
},
{
"n": "ariaLabel",
"t": "string",
"d": "可访问名;缺省「JSON 数据」"
}
],
"example": "jsonViewer({ value: payload, depth: 2, rootLabel: 'response', maxHeight: 320 })",
"steps": [
"把接口返回的原始对象直接交给 value:不用自己写 JSON.stringify 再塞进 pre,组件会按层折叠",
"默认展开两层;数据层级深时调小 depth(1 层只看顶层键),扁平数据可调大",
"长数据给 maxHeight,超出在框内滚动,滚动条已是统一细条(暗色下不会露出原生亮条)",
"数组下标与对象键都走同一套行渲染,收起时右侧显示「3 项 / 2 个键」,先看规模再决定要不要展开",
"要展示编辑结果时不要用它(只读):输入侧请用 textarea,展示侧再交给 jsonViewer"
]
}
]
},