树形结构Tree
两个“配件”在不同目录下，为什么不能用名字当 ID？
树形结构以父子关系组织层级节点，例如产品分类与文件目录。展开用于浏览，焦点用于键盘定位，选择用于确认对象；节点名称可以重复，身份和路径仍需准确区分。
目录里的上下级说明它在哪里，编号说明它是谁。只看名称，两个不同分支里的同名项目就会串在一起。
不同楼栋都可能有 201 室，房间号相同不能省掉楼栋信息。
类比到这里为止：有多个父级或交叉依赖的关系不一定是一棵树，强行放入单父节点会丢失重要连接。
产品目录中室内和室外系列都有“配件”，分别用独立 ID。展开室内配件不会改动室外分支，也不会代表选中或授权整组产品。
一行节点有几种独立状态
- 身份与父级
- 用稳定节点 ID 与父子关系建立结构。
- 展开
- 子项是否可见，与有没有被选择分开。
- 焦点
- 上下移到相邻可见节点；左右展开、进入或返回父级。
层级列表不自动就是完整树控件
简单导航可以使用嵌套列表和链接，不一定需要复杂 ARIA 树。采用 tree 语义时，就应实现对应键盘与焦点行为，不能只补角色名。
下方课堂树用方向键浏览，以 Enter 明确选择。两个同名配件节点有不同 ID，选择结果保留完整路径，不推导任何访问权限。
两个“配件”在不同目录下，为什么不能用名字当 ID？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
树形结构 在项目中负责什么
- 什么时候用
- 父子层级确实存在，用户需要在保留上级上下文时定位节点。
- 它解决什么
- 把较多对象组织成可以逐层浏览的结构，并显示所属关系。
- 它不负责什么
- 没有子项、未加载子项和没有权限查看子项要区分。层级过深时可以加搜索和路径，不强迫用户逐层猜。
- 放进真实项目
- 展示产品大类、系列、型号的层级，让运营维护分类不迷路。
树形视图表达真实父子结构，展开只是浏览，选择是另一件事
多层产品目录、知识库章节或组织权限需要保留上级关系；用户要知道节点位于哪个分支。
- 01
确认数据确实存在稳定层级。
- 02
把展开图标和选择区域分开。
- 03
处理深层级、懒加载和无子项状态。
层级说明位置，ID 区分节点，展开不等于选择。
容易混淆的地方
树是组织与浏览结构；树选择额外规定返回值和父子勾选关系；视觉层级不等于真实权限继承。
产品目录里两处都有“配件”节点。展开其中一个时，另一个也被展开，应该先检查什么？
你可以这样告诉 AI Agent
我在处理这件事：展示产品大类、系列、型号的层级，让运营维护分类不迷路。请以“树形结构”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践