From 4b0dbfececc1016a0ba9272733b98941c0500e46 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 11:42:25 +0800 Subject: [PATCH] =?UTF-8?q?iter(g31):=20=E6=96=B0=E5=A2=9E=20tree=20?= =?UTF-8?q?=E6=A0=91=E5=BD=A2=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 +++ .ua/index.json | 47 ++++++++++++++- AGENTS.md | 2 +- ARCHITECTURE.md | 2 +- README.md | 6 +- apps/demo/main.ts | 24 ++++++++ llms-full.txt | 29 ++++++++- llms.txt | 1 + packages/skin/ui/src/index.ts | 1 + packages/skin/ui/src/tree.ts | 98 +++++++++++++++++++++++++++++++ packages/skin/ui/src/types.ts | 17 ++++++ packages/skin/ui/ua.manifest.json | 45 +++++++++++++- packages/skin/ui/ui.css | 53 +++++++++++++++++ 13 files changed, 324 insertions(+), 9 deletions(-) create mode 100644 packages/skin/ui/src/tree.ts diff --git a/.ua/backlog.json b/.ua/backlog.json index 515dcd5..8f5628a 100644 --- a/.ua/backlog.json +++ b/.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": "自补：组件补充" } ] } diff --git a/.ua/index.json b/.ua/index.json index df1fd26..52ed311 100644 --- a/.ua/index.json +++ b/.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", + "d": "展开的 key 集合；不传则内部维护" + }, + { + "n": "selected", + "t": "Signal", + "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 初值时以外部为准）" + ] } ] }, diff --git a/AGENTS.md b/AGENTS.md index cbf02ed..b61049d 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）：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 diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 83b0fb4..e449d36 100644 --- a/ARCHITECTURE.md +++ b/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，不发布） diff --git a/README.md b/README.md index 027a392..908b36f 100644 --- a/README.md +++ b/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 个） -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 分组：表单（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 打包成单文件） | diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 358432e..0e4895f 100644 --- a/apps/demo/main.ts +++ b/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', '下拉菜单', diff --git a/llms-full.txt b/llms-full.txt index 65030b0..a9fb300 100644 --- a/llms-full.txt +++ b/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 —— 展开的 key 集合；不传则内部维护 +- selected：Signal —— 选中 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 选中、→ 展开、← 收起，禁用节点不响应 一行用法： diff --git a/llms.txt b/llms.txt index ba39859..248b4f3 100644 --- a/llms.txt +++ b/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 为回调 diff --git a/packages/skin/ui/src/index.ts b/packages/skin/ui/src/index.ts index 5e9982a..3f2fc6d 100644 --- a/packages/skin/ui/src/index.ts +++ b/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'; diff --git a/packages/skin/ui/src/tree.ts b/packages/skin/ui/src/tree.ts new file mode 100644 index 0000000..2d0c859 --- /dev/null +++ b/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([]); // 展开的 key 集合，外部不传则内部维护 + const selected = props.selected ?? signal(''); // 当前选中 key + const rows = new Map(); // key → 行元素，供响应式同步 + const toggles = new Map(); // 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; +} diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 9f9e061..da56506 100644 --- a/packages/skin/ui/src/types.ts +++ b/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; // 展开的 key 集合；不传则内部维护 + selected?: Signal; // 选中 key 信号；不传则内部维护 + defaultExpandAll?: boolean; // 首屏展开全部分支；缺省 false + onSelect?: (node: TreeNode) => void; // 选中回调（点击或 Enter/空格） +} + /*** 轮播入参 ***/ export interface CarouselProps { items: unknown[]; // 每张幻灯片内容，顺序即播放顺序 diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 0246079..329f3d2 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/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", + "d": "展开的 key 集合；不传则内部维护" + }, + { + "n": "selected", + "t": "Signal", + "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 初值时以外部为准）" + ] } ] } diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 3172791..8d26e86 100644 --- a/packages/skin/ui/ui.css +++ b/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; + } +}