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

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);
+}