组合模式是解决多级菜单与权限控制耦合问题的自然选择，通过统一MenuComponent接口使目录与按钮节点行为一致，支持递归渲染、避免类型判断，并将isVisibleFor等权限逻辑下沉至各节点内部实现按需裁剪。
组合模式是解决多级菜单与权限控制耦合问题的自然选择。它让菜单目录和菜单项在代码中拥有统一接口，既支持递归遍历，又避免了类型判断和条件分支，权限逻辑也能干净地嵌入到树节点行为中。
菜单结构用组合模式建模
核心是定义一个统一的 MenuComponent 接口或抽象类，所有菜单节点——无论是“系统管理”这样的目录（Container），还是“新增用户”这样的操作项（Leaf）——都实现它：
- 目录节点（如 SysMenuDir）持有 List<MenuComponent> 子集合，并重写 render() 方法递归调用子节点渲染
- 按钮节点（如 SysMenuButton）不包含子项，render() 直接输出可点击元素，并携带 perms 字段用于后端鉴权
- 每个节点都可覆盖 isVisibleFor(User user) 方法，把权限判断下沉到实例内部，比如检查用户角色是否拥有该节点的 perms 值
RBAC 权限逻辑自然融入树节点
组合模式不是只管结构，更是权限策略的载体。RBAC 中“角色→菜单ID集合”的关系，可以转化为“角色→菜单节点引用集合”，再进一步升级为“角色→节点过滤策略”：
- 构建菜单树时，不预先筛选数据，而是传入当前用户上下文，由每个节点自行决定是否参与渲染
- 目录节点的 isVisibleFor() 返回 true，仅当其至少一个子节点可见——避免出现空文件夹
- 按钮节点直接比对 user.hasPermission(this.perms)，结果决定自身是否加入最终树
- 这样整个菜单树就是“按需裁剪”的结果，无需额外 filter 或 map 操作，结构与权限逻辑完全解耦
前端展示与后端结构保持一致
后端返回的 JSON 树形结构，应严格对应组合模式的层次语义，方便前端组件直接消费：
- 每个节点含 type 字段（"dir" / "menu" / "button"），标识其在组合结构中的角色
- children 字段只存在于 type === "dir" 的节点中，其他节点不带该字段，避免冗余和歧义
- perms、path、component 等字段按需存在：按钮节点必须有 perms，路由菜单必须有 path 和 component，纯目录则三者皆无
- 前端 Vue/React 组件只需一个递归模板（如 MenuItem.vue），通过 v-if 判断 type 渲染不同 UI，无需多个 if-else 分支
避免常见重构陷阱
从硬编码菜单或扁平列表迁移到组合模式时，容易踩几个坑：
- 不要把组合模式当成“只是加个 children 字段”——重点是行为统一，不是字段堆砌
- 避免在节点里塞太多业务逻辑，比如在 render() 里查数据库；应提前加载好权限数据，节点只做判断和组装
- 不要让前端承担权限裁剪责任；后端必须返回已过滤的树，否则存在越权风险
- 菜单排序（order_num）应在构建树前完成，而不是靠前端 CSS order 或 JS sort，保证服务端一致性
