侧边栏菜单权限控制需后端裁剪并返回嵌套结构数据，前端用tree.render()递归渲染；数据须含title、href、icon、children字段，children必须为数组；刷新后需手动匹配路径高亮并展开对应节点；搜索功能需独立实现并防抖。
侧边栏根据用户权限字典过滤渲染树状菜单，核心在于「权限裁剪必须由后端完成，前端只负责递归渲染和状态同步」。前端拿到的数据，已经是当前用户能看、能点的完整菜单树，不是全量数据再 JS 过滤。
后端必须返回带权限标识的嵌套菜单数据
接口（如 /api/menu）需根据用户 token 或 userId 查询其角色与权限规则，递归生成可访问的菜单树。关键要求：
- 数据结构必须含 title、href、icon 和 children 字段；children 必须是数组（空数组也行），否则前端递归会中断
- 不依赖 pid/id 让前端拼树——易出错、难调试；后端直接返回嵌套结构最稳妥
- 若需区分「可见但不可点」（如无操作权限），建议加字段如 disabled: true 或 auth: false，前端渲染时加 layui-disabled 类
前端用 tree.render() 替代原生 navbar 渲染
layui.navbar() 仅支持两级，且不处理权限逻辑，不适合权限菜单场景。推荐用 tree.render()，它天然适配树形结构，并支持展开/折叠、图标控制、复选联动等：
- HTML 中预留容器：
- JS 中调用 tree.render()，传入后端返回的菜单数据；开启 onlyIconControl: true 可避免点击文字触发跳转（保留 href 跳转语义）
- 每个节点的 href 建议写绝对路径（如
/user/list），避免 iframe 加载时路径错乱
刷新后保持菜单高亮和展开态
页面刷新后，tree 组件不会自动标记当前路由对应的节点。需手动匹配 URL 并设置状态：
- 提取当前路径文件名：用
window.location.pathname.split('/').pop().split('?')[0]获取如user-edit.html或role - 递归遍历菜单数据，找到匹配 href 的节点，记录其所有父级路径
- 调用 tree.setChecked() 或 tree.expand()（需自行封装）展开祖先节点，并给目标节点添加 layui-this 类
补充：搜索过滤需独立实现
tree 组件本身不支持内置搜索。如需搜索菜单项：
- 在菜单容器上方加一个 input 搜索框，绑定 input 事件
- 写递归过滤函数，匹配 title 或 name 字段，返回新数据，并为所有匹配节点及其父节点打上 spread: true
- 调用 tree.reload({ data: filteredData })，注意不要复用原数据引用
- 加入防抖（如 300ms），避免频繁重绘
