iter(g31): 新增 tree 树形组件

.ua/backlog.json

@@ -604,6 +604,14 @@
       "acceptance": "check 链为 build → demo → style → typecheck → smoke → index → verify → lint-iterations；verify 校验产物含全部 sec-* 锚点（负向删除锚点即失败）；文档四处链路描述同步；npm run check 全绿",
       "status": "done",
       "notes": "自补：门禁改进；文档四处链路描述同步"
+    },
+    {
+      "id": "g31",
+      "title": "新增 tree 树形组件",
+      "motivation": "文件树/组织架构/权限勾选等场景缺组件，只能手写嵌套 DOM，展开态与键盘可达性都要重造",
+      "acceptance": "tree({ nodes, expanded, selected, defaultExpandAll, onSelect }) 递归渲染 + 箭头展开收起 + 点选 + Enter/→/← 键盘 + 禁用不响应；组件数 40→41 三处计数同步；npm run check 全绿",
+      "status": "open",
+      "notes": "自补：组件补充"
     }
   ]
 }

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T03:40:46.247Z",
+  "generatedAt": "2026-10-26T03:41:59.549Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -183,7 +183,8 @@
           "descriptions(props)：描述列表，items(label/value/span) 铺进 column 列网格，bordered 切表格形态，窄屏自动单列",
           "statistic(props)：统计数值，标题 + 大号数字 + 前后缀 + 环比趋势，value 变化时 rAF 滚动过渡（400ms easeOutCubic），减弱动效偏好下直落终值",
           "list(props)：列表，header/footer 外壳 + 条目 avatar/title/description/extra，onItemClick 让条目可点击，items 为空回落空状态",
-          "carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控"
+          "carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控",
+          "tree(props)：树形，递归节点 + 箭头展开/收起 + 点选节点，键盘 Enter 选中、→ 展开、← 收起，禁用节点不响应"
         ],
         "keyTypes": [
           "ButtonProps",
@@ -1861,6 +1862,48 @@
               "键盘：聚焦轮播后 ←→ 切换，事件不冒泡避免连带切换外层 tabs/menu",
               "指示点与箭头都可点击，末张下一张环形回到首张"
             ]
+          },
+          {
+            "id": "tree",
+            "title": "树形 Tree",
+            "demo": "sec-tree",
+            "props": [
+              {
+                "n": "nodes",
+                "t": "TreeNode[]",
+                "r": 1,
+                "d": "根节点列表，每项 { key, label, children?, disabled? }"
+              },
+              {
+                "n": "expanded",
+                "t": "Signal<string[]>",
+                "d": "展开的 key 集合；不传则内部维护"
+              },
+              {
+                "n": "selected",
+                "t": "Signal<string>",
+                "d": "选中 key 信号；不传则内部维护"
+              },
+              {
+                "n": "defaultExpandAll",
+                "t": "boolean",
+                "d": "首屏展开全部分支；缺省 false"
+              },
+              {
+                "n": "onSelect",
+                "t": "(node: TreeNode) => void",
+                "k": 1,
+                "d": "选中回调：点击标签或 Enter/空格触发"
+              }
+            ],
+            "example": "const sel = signal(''); tree({ nodes: [{ key: 'src', label: 'src', children: [{ key: 'ui', label: 'ui' }] }], selected: sel, onSelect: (n) => console.log(n.key) })",
+            "steps": [
+              "节点树用 { key, label, children } 描述，key 唯一即可（选中与展开都按 key 记）",
+              "传 selected 信号即可外部受控；不传则组件内部维护选中态",
+              "点箭头只展开/收起，点标签才选中；叶子节点箭头位置留空以对齐",
+              "键盘 Enter/空格 选中、→ 展开、← 收起；disabled 节点点击与键盘都不响应",
+              "defaultExpandAll 首屏展开全部分支（外部已给 expanded 初值时以外部为准）"
+            ]
           }
         ]
       },

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）：40 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
+- `packages/skin/ui`（@ui-arch/ui）：41 个 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

ARCHITECTURE.md

@@ -34,7 +34,7 @@ ui-arch-mvp/
 │   │   ├── table-core/       # 表格状态内核
 │   │   └── frame/            # 信号 + hyperscript 微框架
 │   ├── skin/                 # 皮肤层（DOM 组件，可发布）
-│   │   └── ui/               # 40 个组件 + ui.css
+│   │   └── ui/               # 41 个组件 + ui.css
 │   ├── design/               # 资产层（可发布）
 │   │   └── tokens/           # --ua-* 设计令牌
 │   └── tools/                # 工程层（private，不发布）

README.md

@@ -11,10 +11,10 @@ npm run demo            # 打开演示：apps/demo/dist/demo.html
 npm run docs            # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt
 ```
 
-## 组件（共 40 个）
+## 组件（共 41 个）
 
 <!-- ua:components -->
-accordion · alert · avatar · badge · breadcrumb · button · carousel · card · checkbox · dataTable · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · pagination · popover · progress · radioGroup · rate · segmented · select · skeleton · slider · spinner · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip
+accordion · alert · avatar · badge · breadcrumb · button · carousel · card · checkbox · dataTable · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · pagination · popover · progress · radioGroup · rate · segmented · select · skeleton · slider · spinner · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · tree
 <!-- /ua:components -->
 
 分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / segmented / form / formItem）、反馈（alert / toast / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper）、数据（dataTable / descriptions / tag / avatar / card）、其他（divider / timeline）。
@@ -25,7 +25,7 @@ accordion · alert · avatar · badge · breadcrumb · button · carousel · car
 |---|---|
 | `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：40 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
+| `packages/skin/ui` | @ui-arch/ui：41 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
 | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
 | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
 | `apps/demo` | 交互演示（esbuild 打包成单文件） |

apps/demo/main.ts

@@ -27,6 +27,7 @@ import {
   inputNumber,
   list,
   carousel,
+  tree,
   menu,
   modal,
   pagination,
@@ -176,6 +177,7 @@ const tableLoading = signal(false);
 const menuPick = signal('');
 const listPick = signal(''); // 列表点击选中的条目标题
 const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
+const treePick = signal('core'); // 树形选中节点 key
 
 // —— 禁用态演示：开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
 const locked = signal(true);
@@ -619,6 +621,28 @@ const content = h(
       h('span', { class: 'out' }, () => `第 ${slideIndex() + 1} / 3 张`),
     ),
   ),
+  section(
+    'sec-tree',
+    '树形',
+    'tree：递归节点，箭头展开/收起、点标签选中；键盘 Enter 选中、→ 展开、← 收起，禁用节点不响应。',
+    h(
+      'div',
+      { class: 'row' },
+      tree({
+        nodes: [
+          { key: 'src', label: 'src', children: [
+            { key: 'core', label: 'core', children: [{ key: 'frame', label: 'frame' }, { key: 'table', label: 'table-core' }] },
+            { key: 'skin', label: 'skin', children: [{ key: 'ui', label: 'ui' }, { key: 'css', label: 'ui.css' }] },
+          ] },
+          { key: 'apps', label: 'apps', children: [{ key: 'demo', label: 'demo' }, { key: 'docs', label: 'docs' }] },
+          { key: 'lock', label: 'package-lock.json（禁用示例）', disabled: true },
+        ],
+        selected: treePick,
+        onSelect: (n) => treePick(n.key),
+      }),
+      h('span', { class: 'out' }, () => (treePick() ? `已选节点：${treePick()}` : '未选中节点')),
+    ),
+  ),
   section(
     'sec-menu',
     '下拉菜单',

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T03:40:46.247Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T03:41:59.549Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1063,6 +1063,32 @@ const i = signal(0); carousel({ items: [h('div', null, 'A'), h('div', null, 'B')
 
 现场演示：apps/docs/demo.html#sec-carousel
 
+### tree — 树形 Tree
+
+参数：
+
+- nodes（必填）：TreeNode[] —— 根节点列表，每项 { key, label, children?, disabled? }
+- expanded：Signal<string[]> —— 展开的 key 集合；不传则内部维护
+- selected：Signal<string> —— 选中 key 信号；不传则内部维护
+- defaultExpandAll：boolean —— 首屏展开全部分支；缺省 false
+- onSelect（回调）：(node: TreeNode) => void —— 选中回调：点击标签或 Enter/空格触发
+
+示例：
+
+```
+const sel = signal(''); tree({ nodes: [{ key: 'src', label: 'src', children: [{ key: 'ui', label: 'ui' }] }], selected: sel, onSelect: (n) => console.log(n.key) })
+```
+
+手把手：
+
+1. 节点树用 { key, label, children } 描述，key 唯一即可（选中与展开都按 key 记）
+2. 传 selected 信号即可外部受控；不传则组件内部维护选中态
+3. 点箭头只展开/收起，点标签才选中；叶子节点箭头位置留空以对齐
+4. 键盘 Enter/空格 选中、→ 展开、← 收起；disabled 节点点击与键盘都不响应
+5. defaultExpandAll 首屏展开全部分支（外部已给 expanded 初值时以外部为准）
+
+现场演示：apps/docs/demo.html#sec-tree
+
 API 速览：
 
 - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用
@@ -1107,6 +1133,7 @@ API 速览：
 - statistic(props)：统计数值，标题 + 大号数字 + 前后缀 + 环比趋势，value 变化时 rAF 滚动过渡（400ms easeOutCubic），减弱动效偏好下直落终值
 - list(props)：列表，header/footer 外壳 + 条目 avatar/title/description/extra，onItemClick 让条目可点击，items 为空回落空状态
 - carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控
+- tree(props)：树形，递归节点 + 箭头展开/收起 + 点选节点，键盘 Enter 选中、→ 展开、← 收起，禁用节点不响应
 
 一行用法：
 

llms.txt

@@ -89,6 +89,7 @@
   - statistic(props)：统计数值，标题 + 大号数字 + 前后缀 + 环比趋势，value 变化时 rAF 滚动过渡（400ms easeOutCubic），减弱动效偏好下直落终值
   - list(props)：列表，header/footer 外壳 + 条目 avatar/title/description/extra，onItemClick 让条目可点击，items 为空回落空状态
   - carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控
+  - tree(props)：树形，递归节点 + 箭头展开/收起 + 点选节点，键盘 Enter 选中、→ 展开、← 收起，禁用节点不响应
 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
 - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号
 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调

packages/skin/ui/src/index.ts

@@ -33,6 +33,7 @@ export { empty } from './empty.js';
 export { divider } from './divider.js';
 export { list } from './list.js';
 export { carousel } from './carousel.js';
+export { tree } from './tree.js';
 export { descriptions } from './descriptions.js';
 export { statistic } from './statistic.js';
 export { timeline } from './timeline.js';

packages/skin/ui/src/tree.ts

@@ -0,0 +1,98 @@
+import { effect, h, signal } from '@ui-arch/frame';
+import type { TreeProps, TreeNode } from './types.js';
+
+/*** 树形：递归渲染节点，箭头展开/收起，点击标签选中；键盘 Enter 选中、→ 展开、← 收起，被禁用的节点不响应 ***/
+export function tree(props: TreeProps): HTMLElement {
+  // —— 状态集中声明 ——
+  const expanded = props.expanded ?? signal<string[]>([]); // 展开的 key 集合，外部不传则内部维护
+  const selected = props.selected ?? signal(''); // 当前选中 key
+  const rows = new Map<string, HTMLElement>(); // key → 行元素，供响应式同步
+  const toggles = new Map<string, HTMLElement>(); // key → 展开箭头，供响应式同步
+
+  /*** 展开/收起一个节点（写回信号后由 effect 统一刷新 DOM） ***/
+  const toggle = (key: string) => {
+    const cur = expanded();
+    expanded(cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key]);
+  };
+
+  /*** 选中节点：写信号并回调 ***/
+  const pick = (node: TreeNode) => {
+    selected(node.key);
+    props.onSelect?.(node);
+  };
+
+  /*** 递归构建节点行：父行 + 子容器（子容器缩进一级） ***/
+  const build = (node: TreeNode, depth: number): HTMLElement => {
+    const on = expanded().includes(node.key);
+    const caret = h('span', { class: 'ua-tree-caret', 'aria-hidden': 'true' }, '›');
+    const row = h(
+      'div',
+      {
+        class: 'ua-tree-row',
+        role: 'treeitem',
+        'aria-level': String(depth + 1),
+        'aria-expanded': String(on),
+        tabindex: '0',
+        onClick: (e: Event) => {
+          if (node.disabled) return; // 卫语句：禁用节点不响应
+          if ((e.target as HTMLElement) === caret) toggle(node.key); // 点箭头只展开/收起
+          else pick(node);
+        },
+      },
+      caret,
+      h('span', { class: 'ua-tree-label' }, node.label),
+    );
+    rows.set(node.key, row);
+    toggles.set(node.key, caret);
+    if (!node.children?.length) caret.classList.add('ua-tree-caret-leaf'); // 叶子节点箭头置空位占位
+    const box = h('div', { class: 'ua-tree-children', role: 'group' }, ...(node.children ?? []).map((c) => build(c, depth + 1)));
+    return h('div', { class: 'ua-tree-node' }, row, box);
+  };
+
+  const root = h('div', { class: 'ua-tree', role: 'tree' }, ...props.nodes.map((n) => build(n, 0))) as HTMLElement;
+  if (props.defaultExpandAll) {
+    const all: string[] = [];
+    const walk = (list: TreeNode[]) => list.forEach((n) => { if (n.children?.length) { all.push(n.key); walk(n.children); } });
+    walk(props.nodes);
+    if (!expanded().length) expanded(all); // 仅在外部未给初值时展开全部
+  }
+
+  effect(() => {
+    const open = expanded();
+    const sel = selected();
+    for (const [key, row] of rows) {
+      const on = open.includes(key);
+      row.classList.toggle('ua-tree-open', on);
+      row.classList.toggle('ua-tree-selected', key === sel);
+      row.setAttribute('aria-selected', String(key === sel));
+      row.setAttribute('aria-expanded', String(on));
+      toggles.get(key)?.classList.toggle('ua-tree-caret-open', on); // 箭头随展开态旋转
+      const box = row.nextElementSibling as HTMLElement | null;
+      if (box) box.hidden = !on; // 收起即隐藏子容器
+    }
+  });
+
+  root.addEventListener('keydown', (e: KeyboardEvent) => {
+    const row = (e.target as HTMLElement).closest('.ua-tree-row') as HTMLElement | null;
+    if (!row) return; // 卫语句：焦点不在节点行
+    const key = [...rows.entries()].find(([, el]) => el === row)?.[0];
+    if (!key) return; // 卫语句：找不到对应节点
+    const node = findNode(props.nodes, key);
+    if (!node || node.disabled) return; // 卫语句：禁用节点不接管键盘
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(node); return; }
+    if (e.key === 'ArrowRight' && !expanded().includes(key)) { e.preventDefault(); toggle(key); return; } // → 展开
+    if (e.key === 'ArrowLeft' && expanded().includes(key)) { e.preventDefault(); toggle(key); } // ← 收起
+  });
+
+  return root;
+}
+
+/*** 按 key 深度查找节点（键盘操作需要拿到原始节点对象） ***/
+function findNode(nodes: TreeNode[], key: string): TreeNode | null {
+  for (const n of nodes) {
+    if (n.key === key) return n;
+    const hit = n.children ? findNode(n.children, key) : null;
+    if (hit) return hit;
+  }
+  return null;
+}

packages/skin/ui/src/types.ts

@@ -420,6 +420,23 @@ export interface ListProps {
   onItemClick?: (item: ListItem, index: number) => void; // 条目点击回调；提供后条目可点击并带 hover 反馈
 }
 
+/*** 树节点 ***/
+export interface TreeNode {
+  key: string;           // 唯一键（选中/展开都按 key 记）
+  label: string;         // 显示文案
+  children?: TreeNode[]; // 子节点；缺省为叶子
+  disabled?: boolean;    // 禁用：不可选中、不响应键盘
+}
+
+/*** 树形入参 ***/
+export interface TreeProps {
+  nodes: TreeNode[];                 // 根节点列表
+  expanded?: Signal<string[]>;       // 展开的 key 集合；不传则内部维护
+  selected?: Signal<string>;         // 选中 key 信号；不传则内部维护
+  defaultExpandAll?: boolean;        // 首屏展开全部分支；缺省 false
+  onSelect?: (node: TreeNode) => void; // 选中回调（点击或 Enter/空格）
+}
+
 /*** 轮播入参 ***/
 export interface CarouselProps {
   items: unknown[];        // 每张幻灯片内容，顺序即播放顺序

packages/skin/ui/ua.manifest.json

@@ -54,7 +54,8 @@
       "descriptions(props)：描述列表，items(label/value/span) 铺进 column 列网格，bordered 切表格形态，窄屏自动单列",
       "statistic(props)：统计数值，标题 + 大号数字 + 前后缀 + 环比趋势，value 变化时 rAF 滚动过渡（400ms easeOutCubic），减弱动效偏好下直落终值",
       "list(props)：列表，header/footer 外壳 + 条目 avatar/title/description/extra，onItemClick 让条目可点击，items 为空回落空状态",
-      "carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控"
+      "carousel(props)：轮播，items 横排位移，指示点/箭头/←→ 键切换，autoplay 毫秒自动前进且悬停暂停，index 信号可外部受控",
+      "tree(props)：树形，递归节点 + 箭头展开/收起 + 点选节点，键盘 Enter 选中、→ 展开、← 收起，禁用节点不响应"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -1732,6 +1733,48 @@
           "键盘：聚焦轮播后 ←→ 切换，事件不冒泡避免连带切换外层 tabs/menu",
           "指示点与箭头都可点击，末张下一张环形回到首张"
         ]
+      },
+      {
+        "id": "tree",
+        "title": "树形 Tree",
+        "demo": "sec-tree",
+        "props": [
+          {
+            "n": "nodes",
+            "t": "TreeNode[]",
+            "r": 1,
+            "d": "根节点列表，每项 { key, label, children?, disabled? }"
+          },
+          {
+            "n": "expanded",
+            "t": "Signal<string[]>",
+            "d": "展开的 key 集合；不传则内部维护"
+          },
+          {
+            "n": "selected",
+            "t": "Signal<string>",
+            "d": "选中 key 信号；不传则内部维护"
+          },
+          {
+            "n": "defaultExpandAll",
+            "t": "boolean",
+            "d": "首屏展开全部分支；缺省 false"
+          },
+          {
+            "n": "onSelect",
+            "t": "(node: TreeNode) => void",
+            "k": 1,
+            "d": "选中回调：点击标签或 Enter/空格触发"
+          }
+        ],
+        "example": "const sel = signal(''); tree({ nodes: [{ key: 'src', label: 'src', children: [{ key: 'ui', label: 'ui' }] }], selected: sel, onSelect: (n) => console.log(n.key) })",
+        "steps": [
+          "节点树用 { key, label, children } 描述，key 唯一即可（选中与展开都按 key 记）",
+          "传 selected 信号即可外部受控；不传则组件内部维护选中态",
+          "点箭头只展开/收起，点标签才选中；叶子节点箭头位置留空以对齐",
+          "键盘 Enter/空格 选中、→ 展开、← 收起；disabled 节点点击与键盘都不响应",
+          "defaultExpandAll 首屏展开全部分支（外部已给 expanded 初值时以外部为准）"
+        ]
       }
     ]
   }

packages/skin/ui/ui.css

@@ -2142,3 +2142,56 @@ button.ua-step-dot:hover {
   .ua-carousel-dot,
   .ua-carousel-arrow { transition: none; }
 }
+
+/* —— 树形 —— */
+.ua-tree {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--ua-font-size-md);
+}
+.ua-tree-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ua-space-1);
+  padding: 4px var(--ua-space-2);
+  border-radius: var(--ua-radius-sm);
+  color: var(--ua-color-text);
+  cursor: pointer;
+  outline: none;
+  transition: background 0.15s ease;
+}
+.ua-tree-row:hover {
+  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+}
+.ua-tree-row:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent);
+}
+.ua-tree-selected {
+  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中低视觉比重 */
+  font-weight: 600;
+}
+.ua-tree-caret {
+  display: inline-flex;
+  justify-content: center;
+  width: 14px;
+  color: var(--ua-color-text-muted);
+  transition: transform 0.15s ease;
+}
+.ua-tree-caret-open {
+  transform: rotate(90deg);
+}
+.ua-tree-caret-leaf {
+  visibility: hidden; /* 叶子节点留空位，标签对齐 */
+}
+.ua-tree-children {
+  padding-left: var(--ua-space-3);
+}
+.ua-tree-children[hidden] {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-tree-row,
+  .ua-tree-caret {
+    transition: none;
+  }
+}