树形控件Tree

促销类目树：勾选联动与半选都长在物件上

亲手展开类目、勾选父子节点、查看路径、搜索定位，再点「生成满减规则」——勾选方块、半选状态、摘要计数与规则卡都即时变，不只靠底部说明。

面板教会的知识点

把刚才操作里看到的现象命名为六条规则。

• 父子联动：勾父节点一次勾上全部可选子节点；取消父节点也一次清空整棵子树。
• 半选 = 部分子节点已选：父节点方块变半选（减号），说明子级勾了一些但没全勾——不是第三种值，是状态汇总。
• 展开 ≠ 勾选：展开只让子节点可见，不改变勾选；勾选才纳入结果，两件事分开。
• 路径与范围长在物件上：点节点标签查看路径条与覆盖商品数，不靠记忆。
• 禁用可见不可选：已下架的「电动剃须刀」留在树里、灰掉并标注「已下架」，不是悄悄消失。
• 搜索保留层级：搜「电」会高亮命中类目并自动展开所在分支，结构上下文不丢。

什么时候用展示型树

从数据是否分层、是否要批量勾选或浏览上下文判断，而不是看控件长什么样。

怎么用：从展开到生成结果的最短路径

一次到位的检查顺序。

1. 定语义：容器 role=tree，节点 role=treeitem，带 aria-level、aria-expanded（有子级时）；勾选用原生 checkbox。
2. 分开展开与勾选：箭头按钮只切换展开，checkbox 只切换勾选；点标签查看详情，三者不互相吞。
3. 父子联动按叶子累计：状态由叶子勾选推导——全选=勾、部分=半选、空=未勾；不要给父节点单独存布尔值。
4. 禁用标注原因：不可选节点 disabled 并写明「已下架 / 无权限」，不要静默删除或假装可点。
5. 给键盘与出口：方向键移动焦点、空格勾选、Enter 查看详情；大树提供搜索与全部展开 / 收起。

同一个促销配置：正例与反例

目标都是选类目参与满减。差别只在于父子是否联动、空类目与禁用类目是否说明。