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

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