From 90bd60e0cff256ab2a0248d3b59d136be09e3fe5 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 22:50:05 +0800 Subject: [PATCH] =?UTF-8?q?iter(g266):=20=E6=96=B0=E5=A2=9E=20JSON=20?= =?UTF-8?q?=E6=A0=91=E6=9F=A5=E7=9C=8B=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 45 +++++++++++++- AGENTS.md | 2 +- ARCHITECTURE.md | 2 +- README.md | 8 +-- apps/demo/main.ts | 16 +++++ llms-full.txt | 29 ++++++++- llms.txt | 1 + packages/skin/ui/src/index.ts | 1 + packages/skin/ui/src/jsonViewer.ts | 54 +++++++++++++++++ packages/skin/ui/src/types.ts | 9 +++ packages/skin/ui/ua.manifest.json | 43 +++++++++++++- packages/skin/ui/ui.css | 94 +++++++++++++++++++++++++++++- 12 files changed, 293 insertions(+), 11 deletions(-) create mode 100644 packages/skin/ui/src/jsonViewer.ts diff --git a/.ua/index.json b/.ua/index.json index 809dc77..521eeac 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -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" + ] } ] }, diff --git a/AGENTS.md b/AGENTS.md index f18a676..ccc801c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -21,7 +21,7 @@ - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架 -- `packages/skin/ui`（@ui-arch/ui）：77 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 +- `packages/skin/ui`（@ui-arch/ui）：78 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private） - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 38d1029..b6aeeb3 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -34,7 +34,7 @@ ui-arch-mvp/ │ │ ├── table-core/ # 表格状态内核 │ │ └── frame/ # 信号 + hyperscript 微框架 │ ├── skin/ # 皮肤层（DOM 组件，可发布） -│ │ └── ui/ # 77 个组件 + ui.css +│ │ └── ui/ # 78 个组件 + ui.css │ ├── design/ # 资产层（可发布） │ │ └── tokens/ # --ua-* 设计令牌 │ └── tools/ # 工程层（private，不发布） diff --git a/README.md b/README.md index cd0fe29..b84dd48 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,13 @@ npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全 npm run changelog # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移） ``` -## 组件（共 77 个） +## 组件（共 78 个） -accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · copyButton · countdown · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · highlight · image · inputNumber · inputTag · kbd · layout · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark +accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · copyButton · countdown · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · highlight · image · inputNumber · inputTag · jsonViewer · kbd · layout · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark -分组：表单（button / copyButton / textField / inputNumber / inputTag / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic / countdown）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / kbd / highlight / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / layout / link / space / divider / splitter / backTop / affix / tour / watermark）。 +分组：表单（button / copyButton / textField / inputNumber / inputTag / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic / countdown）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / jsonViewer / descriptions / card / list / kbd / highlight / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / layout / link / space / divider / splitter / backTop / affix / tour / watermark）。 ## 可访问性约定 @@ -33,7 +33,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup |---|---| | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） | | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） | -| `packages/skin/ui` | @ui-arch/ui：77 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | +| `packages/skin/ui` | @ui-arch/ui：78 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） | | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server | | `apps/demo` | 交互演示（esbuild 打包成单文件） | diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 077cba8..1787d58 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -31,6 +31,7 @@ import { countdown, dataTable, layout, + jsonViewer, kbd, highlight, datePicker, @@ -1723,6 +1724,21 @@ const content = h( ), ), ), + section( + 'sec-jsonviewer', + 'JSON 树查看', + 'jsonViewer：接口返回的原始对象直接丢进去即可——默认展开两层、分支显示「N 项 / N 个键」，叶子按类型着色；只读，不带编辑。', + jsonViewer({ + value: { + code: 0, + message: 'ok', + data: { total: 3, page: 1, items: users.slice(0, 3).map((u) => ({ id: u.id, name: u.name, city: u.city, tags: ['活跃'], vip: u.id === 1 })) }, + }, + rootLabel: 'response', + depth: 2, + maxHeight: 260, + }), + ), ); // 悬浮按钮：fixed 定位，挂 body 不参与页面布局 diff --git a/llms-full.txt b/llms-full.txt index a8af67a..335d256 100644 --- a/llms-full.txt +++ b/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 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑 一行用法： diff --git a/llms.txt b/llms.txt index ca336f4..4dce33c 100644 --- a/llms.txt +++ b/llms.txt @@ -126,6 +126,7 @@ - highlight(props)：关键词高亮，命中片段包 mark（大小写不敏感全部命中），text / keyword 支持信号响应式刷新 - inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输 - layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定） + - jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')` - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调 diff --git a/packages/skin/ui/src/index.ts b/packages/skin/ui/src/index.ts index 849aadf..270f99c 100644 --- a/packages/skin/ui/src/index.ts +++ b/packages/skin/ui/src/index.ts @@ -77,3 +77,4 @@ export { kbd } from './kbd.js'; export { highlight } from './highlight.js'; export { inputTag } from './inputTag.js'; export { layout } from './layout.js'; +export { jsonViewer } from './jsonViewer.js'; diff --git a/packages/skin/ui/src/jsonViewer.ts b/packages/skin/ui/src/jsonViewer.ts new file mode 100644 index 0000000..fdcce7d --- /dev/null +++ b/packages/skin/ui/src/jsonViewer.ts @@ -0,0 +1,54 @@ +import { h } from '@ui-arch/frame'; +import type { JsonViewerProps } from './types.js'; + +// 值类型归类：数组 / 对象算分支，其余算叶子（null 单独一类，避免被 typeof 报成 object） +type JsonKind = 'array' | 'object' | 'string' | 'number' | 'boolean' | 'null'; +const kindOf = (v: unknown): JsonKind => (v === null ? 'null' : Array.isArray(v) ? 'array' : typeof v === 'object' ? 'object' : (typeof v as JsonKind)); + +/*** 叶子值文案：字符串补引号，其余按字面；null 用灰字斜体在样式层区分 ***/ +function leafText(v: unknown): string { + return typeof v === 'string' ? `"${v}"` : String(v); +} + +/*** 分支摘要：收起时也要看得出里面有多少内容，否则无法判断值不值得展开 ***/ +function summaryOf(v: unknown): string { + if (Array.isArray(v)) return `${v.length} 项`; + const n = Object.keys(v as Record).length; // 对象分支：按自有键计数 + return `${n} 个键`; +} + +/*** JSON 树查看：按层折叠展示任意值，数组 / 对象可展开收起，叶子按类型着色；只读、不解析编辑 ***/ +export function jsonViewer(props: JsonViewerProps): HTMLElement { + const rootLabel = props.rootLabel ?? 'root'; // 根标签：贴顶那一行的键名 + const openDepth = props.depth ?? 2; // 默认展开层数：2 层能看出一级结构又不至于刷屏 + const root = h('div', { class: 'ua-json', role: 'tree', 'aria-label': props.ariaLabel ?? 'JSON 数据' }) as HTMLDivElement; + if (props.maxHeight !== undefined) root.style.maxHeight = `${props.maxHeight}px`; // 只在给了上限时才限高，缺省随内容 + + /*** 单行渲染：分支行带开关与计数摘要，叶子行只带类型类名 ***/ + const row = (key: string, value: unknown, level: number, path: string): HTMLElement => { + const kind = kindOf(value); + const branch = kind === 'array' || kind === 'object'; + const label = h('span', { class: 'ua-json-key' }, key); // 键名：数组下标也用 key 位展示 + if (!branch) { + return h('div', { class: 'ua-json-row is-leaf', role: 'treeitem' }, label, h('span', { class: 'ua-json-colon' }, ':'), h('span', { class: `ua-json-val ua-json-${kind}` }, leafText(value))); + } + const box = h('div', { class: 'ua-json-children', role: 'group' }); // 子节点容器：收起时整块隐藏，DOM 保留折叠态 + const caret = h('span', { class: 'ua-json-caret', 'aria-hidden': 'true' }, '▸'); // 开关图标：方向由 aria-expanded 决定样式 + const toggle = h('button', { + type: 'button', + class: 'ua-json-toggle', + 'aria-expanded': () => String(!box.hidden), + 'aria-label': () => `${box.hidden ? '展开' : '收起'} ${path}`, + onClick: () => { box.hidden = !box.hidden; }, // 只翻 hidden：样式按 :has 或 aria-expanded 跟随 + }, caret, label, h('span', { class: 'ua-json-colon' }, ':'), h('span', { class: 'ua-json-sum' }, `${kind === 'array' ? '[' : '{'}${summaryOf(value)}${kind === 'array' ? ']' : '}'}`)); + const entries: [string, unknown][] = kind === 'array' + ? (value as unknown[]).map((v, i) => [String(i), v]) // 数组下标转字符串，走同一套行渲染 + : Object.entries(value as Record); + for (const [k, v] of entries) box.append(row(k, v, level + 1, `${path}.${k}`)); // 递归：路径用点号拼接，报给读屏时能定位 + box.hidden = level >= openDepth; // 超出默认层数的一律先收起，用户按需展开 + return h('div', { class: 'ua-json-branch', role: 'treeitem', 'aria-level': String(level + 1) }, toggle, box); + }; + + root.append(row(rootLabel, props.value, 0, rootLabel)); + return root; +} diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 2416a64..f550fa1 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -1021,3 +1021,12 @@ export interface LayoutProps { collapsed?: Signal; // 折叠态信号；传入则双向绑定（外部可读数），缺省内部自管 sticky?: boolean; // 页头是否吸顶；缺省 false（长内容里建议打开） } + +/*** JSON 树查看入参 ***/ +export interface JsonViewerProps { + value: unknown; // 任意可序列化数据：对象 / 数组 / 标量都行 + depth?: number; // 默认展开层数；缺省 2（看得到一级结构又不至于刷屏） + rootLabel?: string; // 根节点键名；缺省 root + maxHeight?: number; // 最高高度（px），超出在框内滚动；缺省不限高 + ariaLabel?: string; // 可访问名；缺省「JSON 数据」 +} diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index eeed630..ca54eb9 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -91,7 +91,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", @@ -4034,6 +4035,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" + ] } ] } diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index d439097..dd9c2b2 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -4993,7 +4993,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } .ua-vlist, .ua-cmdk-list, .ua-timepicker-col, -.ua-layout-content { +.ua-layout-content, +.ua-json { scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */ scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */ } @@ -5407,3 +5408,94 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } color: var(--ua-color-text-muted); font-size: var(--ua-font-size-sm); } + +/* ---- JSON 树查看：等宽字体 + 按类型着色，缩进靠嵌套 padding，不为每层写死 margin ---- */ +.ua-json { + padding: var(--ua-space-2); + overflow: auto; + border: 1px solid var(--ua-border-subtle); + border-radius: var(--ua-radius-md); + background: var(--ua-color-surface-inset); + color: var(--ua-color-text); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 等宽：键名与值对齐才好扫 */ + font-size: var(--ua-font-size-sm); + line-height: var(--ua-leading-normal); +} + +.ua-json-row, +.ua-json-toggle { + display: flex; + align-items: baseline; + gap: var(--ua-space-1); + width: 100%; + padding: 0; + border: 0; + background: transparent; + color: inherit; + font: inherit; + text-align: left; +} + +.ua-json-toggle { + cursor: pointer; + border-radius: var(--ua-radius-sm); +} + +.ua-json-toggle:hover { + background: var(--ua-color-tint-accent-weak); +} + +.ua-json-toggle:focus-visible { + outline: none; + box-shadow: var(--ua-focus-ring); +} + +/* 开关图标：收起时 ▸，展开时旋转成 ▾；旋转在减少动效下由全局规则归零成瞬时切换 */ +.ua-json-caret { + flex: 0 0 auto; + width: var(--ua-space-3); + color: var(--ua-color-text-faint); + transition: rotate var(--ua-duration-fast) var(--ua-ease); +} + +.ua-json-toggle[aria-expanded='true'] .ua-json-caret { + rotate: 90deg; +} + +.ua-json-key { + color: var(--ua-color-text-secondary); +} + +.ua-json-colon { + color: var(--ua-color-text-faint); +} + +.ua-json-sum { + color: var(--ua-color-text-faint); + font-size: var(--ua-font-size-xs); +} + +/* 叶子值按类型着色：字符串 / 数字 / 布尔各一档，null 最弱——扫一眼就能分辨结构 */ +.ua-json-string { + color: var(--ua-color-success); +} + +.ua-json-number { + color: var(--ua-color-accent); +} + +.ua-json-boolean { + color: var(--ua-color-warning); +} + +.ua-json-null { + color: var(--ua-color-text-faint); + font-style: italic; +} + +/* 缩进：嵌套容器统一左移一档，层级越深缩进越深，不用每层传值 */ +.ua-json-children { + padding-left: var(--ua-space-4); + border-left: 1px solid var(--ua-border-subtle); + margin-left: var(--ua-space-2); +}