树形控件Tree

你可能会说

文件夹那种一层层展开的，点小三角展开下一级。

把文件夹、部门或分类按父子关系排列，并让用户逐层展开或收起例如项目文件会显示“src”文件夹，展开后才能看到里面的页面文件。它主要帮助浏览层级；需要从中勾选并提交结果时，应使用树选择 Tree Select。

▸设计部

▸UI 组

林小hu

ans-studio

▸用研组

阿麦

▸研发部

前端组

后端组

你可以这样告诉 AI Agent

请把项目文件区做成树形浏览：文件夹可展开收起，文件不可展开，缩进和图标要能区分层级，并保留当前展开状态。测试深层目录、同名文件、键盘导航和窄屏缩进。

什么时候用

数据天生有层级：文件夹、分类、菜单
▾📁 设计资源
📄 首页.sketch
📄 图标.sketch
▸📁 素材库
存在多层父子关系，需要逐级展开查看
▾一级分类
▾二级分类
▾三级分类
叶子节点
组织架构选人：公司 → 部门 → 成员
▾🏢 某某科技
▾设计部
林小hu
▸研发部
在层级里批量勾选：权限、可见范围配置
▾页面权限
查看
编辑

什么时候不用

层级较浅且只需沿单一路径选择时，使用级联选择器 Cascader 更直接
省 / 市 / 区广东省深圳市南山区
单层数据没有父子关系时，应使用列表 List
项目 A
项目 B
项目 C
没有父子层级，列表就够
窄屏展示深层树会让多级缩进持续压缩内容，可改用分步选择
▾ 一级▾ 二级三级…多级缩进压缩内容宽度，节点名称被截断
默认全部展开，节点过多会削弱层级辨识
▾全部展开
▾节点
子节点
▾节点
子节点

组成结构 · Anatomy

▾设计部▸UI 组

整棵树的容器

有子节点才有，点击展开 / 收起

节点名称，可高亮选中

缩进一级，表示从属关系

常见变体 · Variants

可勾选Checkable

▾页面权限

查看

编辑

要在层级里批量选择，比如配权限

带连接线ShowLine

▾设计部

▸UI 组

▸用研组

需要加强父子节点归属辨识时

目录树Directory

▾📁 设计资源

📄 首页.sketch

📄 图标.sketch

展示文件目录，配文件夹图标更直观

典型使用场景

文件目录浏览

📁 vibe-ui-guide＋

▾📁 app

📄 globals.css

📄 page.tsx

▸📁 site

▸📁 public

组织架构选人

选择审批人

▾🏢 某某科技

▾设计部

林小hu

▸研发部

权限配置勾选

角色权限 · 运营已选 3 / 6 项

▾内容管理

发布文章

删除他人文章

▸数据看板

商品分类管理

商品分类

▾数码家电128 件编辑

耳机音箱46 件

智能穿戴32 件

▸家居生活96 件

项目文件浏览器要展示文件夹、子文件夹和文件，用户主要是逐层查看位置，不需要提交选择结果。怎样组织？

A. 使用可展开的树形控件，保留父子缩进和每层展开状态B. 把所有文件和文件夹放进一个列表，只按名称排序C. 每次用级联选择器选中一条路径，然后提交后才能查看内容