树形控件
Tree
初级通用树形控件（Tree）是按父子关系展示内容的界面控件，用户可以逐级展开或收起节点。它解决层级内容放在平铺列表里难以查找的问题，比如在项目文件中找到某个页面文件。
你可能会说：「我想把项目文件按文件夹一层层展示，点开文件夹能看到里面的内容，还能选中文件。」
动手看看项目文件树
项目文件
mindset-web
pages
首页.tsx
数据看板.tsx
README.md
展开到哪一层
切换「展开到哪一层」，看文件怎样随父节点出现或隐藏；也可以悬停文件行，或用 Tab 键聚焦节点，观察指向反馈。
继续展开 pages 才能找到「数据看板.tsx」。向下的箭头表示节点已展开，浅色背景则标明当前找到的文件。
要点树形控件由哪几部分组成？
- 1
节点之间有父子关系
树里的每一项叫节点。比如项目是根节点，文件夹是它的子节点，文件又属于某个文件夹。因为关系存在于数据里，所以界面才能按层级缩进展示，而不只是把一串名称排成列表。
- 2
展开与选中是两件事
点开文件夹，是改变它的展开状态；选中一个文件，是告诉界面你正在查看或操作哪一项。我们给 AI 描述需求时可以把两者说开：点击展开图标只展开，点击名称则选中节点。
- 3
层级之外还要考虑查找
节点多时，逐层点开会费时。比如后台有几百个部门，你可能还需要搜索名称，或在打开页面时自动展开当前部门的上级节点。这样用户既能看见位置，也能较快找到目标。
容易混淆的地方
树形控件主要用来展示和浏览层级，选中节点后可以显示详情；树选择器则侧重在表单中选定一个或多个层级选项。它也不等于折叠面板：折叠面板通常是展开一块内容，树形控件关心的是节点之间可继续嵌套的父子关系。
什么时候用
适合用
- 做代码管理工具的文件浏览区时，用树形控件展示文件夹与文件，让用户逐级定位并打开文件。
- 做企业后台的组织架构页时，用树形控件浏览部门及下级部门，选中节点后在旁边查看成员。
- 做知识库管理页时，用树形控件展示栏目与子栏目，方便编辑者确认文章所在的位置。
不适合用
- 页面只有一组没有父子关系的文章时，用列表展示更直接，不必让用户面对展开和收起操作。
- 表单里只是让用户选择所属部门，而不需要浏览部门详情时，用树选择器更贴合填写任务。
- 内容是按时间先后排列的操作记录时，用时间轴或列表；时间顺序不是节点的父子关系。
练一练选一个答案，看看解释
你在做一个项目管理工具：左侧要展示文件夹和文件，用户能逐级打开文件夹，点中文件后右侧显示内容。你会怎样向 AI Agent 描述左侧区域？
让 AI 帮你做复制给 AI Agent 直接用
请把项目文件浏览区做成树形控件，按文件夹和文件的父子关系展示。文件夹可展开、收起；点击文件夹名称或文件名称可选中节点，选中文件后在右侧显示内容。请分别处理展开状态和选中状态。