DATA TABLE
树形控件Tree View
展示有层级关系的数据，支持展开/折叠与选择，是文件目录、组织架构、分类管理的标准结构。
效果预览
▶📁src
▶📁components
📄Button.tsx
📄Input.tsx
▶📁pages
📄index.tsx
适合用在哪
文件目录、组织架构图、分类管理、权限菜单、省市级联。
不适合：层级很深（超过 5 层）或节点数极大时，Tree 的可读性会崩，考虑用面包屑 + 详情页、搜索或虚拟滚动。
和相近模式的区别
侧边栏导航Sidebar Nav
侧边栏导航是常驻的、用户频繁访问的顶层导航；Tree 是内容/数据的层级展示，可以嵌套在页面内容区。
自动补全输入Combobox / Autocomplete
Combobox 适合从层级数据中选择一个值；Tree 适合浏览和选择多个节点，或展示完整层级。
容易踩的坑
- 超过 1000 个节点直接渲染，低端设备卡顿，应加虚拟滚动或异步加载。
- 展开/折叠箭头只通过颜色区分，没有 rotate 动画，用户感知弱。
- 复选框层级选中时父节点状态更新不及时，半选态容易出错。
设计提示词 · Prompt
树形控件（Tree View）：每个节点一行，左侧展开箭头（可折叠节点才显示）、图标、节点名称。层级缩进 18-24px。选中节点用浅品牌色底；展开箭头旋转 90°。支持复选框多选树、异步加载子节点。
Tree View: each node is one row with an expand arrow (only on collapsible nodes), an icon, and the node label. Indent 18-24px per level. Row height 32-36px, 6px radius; hover light gray background; selected node uses light brand background + brand text. Expand arrow is an 8-10px ▶ that rotates 90° when expanded. Multi-select trees add checkboxes with cascade selection. Async child loading shows a small spinner beside the arrow.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="tree"><div class="tree__node" style="--lvl:0"><button>▶</button><span>src</span></div>...</div> */
.tree { width: 260px; }
.tree__node { display: flex; align-items: center; gap: 6px; height: 32px; padding-left: calc(var(--lvl, 0) * 20px + 6px); border-radius: 6px; cursor: pointer; }
.tree__node:hover { background: #f3f4f6; }
.tree__node.is-selected { background: #eef2ff; color: #4338ca; }
.tree__node button { width: 18px; height: 18px; border: 0; background: transparent; cursor: pointer; font-size: 10px; transition: transform .2s ease; }
.tree__node.is-open > button { transform: rotate(90deg); }
.tree__node span { font: 14px/1 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) {
.tree__node button { transition: none; }
}
演示 HTML 结构
<div class="s d-center" style="width:100%">
<div class="tb-tree">
<div class="tb-tree__node" style="--lvl:0"><i class="tb-tree__chev tb-tree__chev--open">▶</i><em>📁</em><span>src</span></div>
<div class="tb-tree__node tb-tree__node--sel" style="--lvl:1"><i class="tb-tree__chev">▶</i><em>📁</em><span>components</span></div>
<div class="tb-tree__node" style="--lvl:2"><span class="tb-tree__sp"></span><em>📄</em><span>Button.tsx</span></div>
<div class="tb-tree__node" style="--lvl:2"><span class="tb-tree__sp"></span><em>📄</em><span>Input.tsx</span></div>
<div class="tb-tree__node" style="--lvl:1"><i class="tb-tree__chev tb-tree__chev--open">▶</i><em>📁</em><span>pages</span></div>
<div class="tb-tree__node" style="--lvl:2"><span class="tb-tree__sp"></span><em>📄</em><span>index.tsx</span></div>
</div>
</div>
常见问题
Tree 的键盘导航怎么做？
↑↓ 在可见节点间移动；→ 展开当前节点或进入子节点；← 折叠当前节点或回到父节点；Enter 切换选中；Home/End 跳到首尾可见节点。
大数据 Tree 怎么优化？
用虚拟滚动只渲染可视节点，或按需异步加载子节点（点击展开时才请求）。不要一次性渲染超过 500 个 DOM 节点。
常见搭配
同一页面里经常和「树形控件」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。