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

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T14:47:27.279Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T14:49:29.506Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -2207,6 +2207,32 @@ layout({ header: '控制台', sider: menu({ items }), footer: '© 2026', collaps
 
 现场演示：apps/docs/demo.html#sec-layout
 
+### jsonViewer — JSON 树查看 JsonViewer
+
+参数：
+
+- value：unknown —— 任意可序列化数据：对象 / 数组 / 标量都行
+- depth：number —— 默认展开层数；缺省 2（看得到一级结构又不至于刷屏）
+- rootLabel：string —— 根节点键名；缺省 root
+- maxHeight：number —— 最高高度（px），超出在框内滚动；缺省不限高
+- ariaLabel：string —— 可访问名；缺省「JSON 数据」
+
+示例：
+
+```
+jsonViewer({ value: payload, depth: 2, rootLabel: 'response', maxHeight: 320 })
+```
+
+手把手：
+
+1. 把接口返回的原始对象直接交给 value：不用自己写 JSON.stringify 再塞进 pre，组件会按层折叠
+2. 默认展开两层；数据层级深时调小 depth（1 层只看顶层键），扁平数据可调大
+3. 长数据给 maxHeight，超出在框内滚动，滚动条已是统一细条（暗色下不会露出原生亮条）
+4. 数组下标与对象键都走同一套行渲染，收起时右侧显示「3 项 / 2 个键」，先看规模再决定要不要展开
+5. 要展示编辑结果时不要用它（只读）：输入侧请用 textarea，展示侧再交给 jsonViewer
+
+现场演示：apps/docs/demo.html#sec-jsonviewer
+
 API 速览：
 
 - button(props)：按钮，variant 三档视觉强度，disabled / loading 支持布尔或信号动态同步（loading 转圈并禁点），onClick 点击回调
@@ -2288,6 +2314,7 @@ API 速览：
 - highlight(props)：关键词高亮，命中片段包 mark（大小写不敏感全部命中），text / keyword 支持信号响应式刷新
 - inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输
 - layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定）
+- jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑
 
 一行用法：