go的html/template递归渲染树结构需用{{define}}定义自引用子模板，配合{{template "name" .}}调用，children字段必须初始化为空切片而非nil，后端须完成树化建模与权限过滤。
用 html/template 自引用子模板递归渲染树结构
Go 的 html/template 本身不支持函数式递归调用，必须靠 {{define}} + {{template}} 实现嵌套展开。关键不是“写个通用函数”，而是定义一个可被自身调用的子模板，并在内部用 {{range}} 遍历子节点再调用自己。
常见翻车点：子模板名没加引号（{{template menu-item .}} 错，必须是 {{template "menu-item" .}}）；节点结构体的 Children 字段为 nil 而非空切片，导致 {{if .Children}} 判定失败并 panic。
-
Children字段初始化必须是[]MenuItem{}，不是nil - 递归调用时参数必须传完整节点对象（
{{template "menu-item" .}}），不能只传.Children - 避免在模板里做 ID 匹配或树化建模——那属于后端职责，模板只负责消费已组织好的嵌套结构
后端必须完成树化建模，不能甩给模板
数据库查出的扁平列表（id, parent_id, name）不能直接丢进模板。否则模板里得写循环匹配逻辑，既慢又易错，还无法提前过滤权限节点。
正确做法是在 Go 层把数据转成嵌套结构：用 map[int]*MenuItem 缓存所有节点，遍历一次完成挂载；根节点取 parent_id == 0，其余节点通过 parent_id 查 map 并追加到对应 Children。
- 权限过滤必须在建树前完成，防止未授权 URL 泄露到 HTML 源码中
- 当前页面的
active状态也应由后端计算好（比如根据请求路径匹配URL字段），而非前端 JS 补救 - 如果菜单层级深、节点多，建议对建树过程加缓存（如
sync.Once或 Redis），避免每次请求重复构建
避免 DOM 过度重绘，用 display 控制展开状态
模板只负责静态结构输出，交互仍需前端 JS 控制。但展开/折叠动作千万别用 innerHTML 替换整段子 ul ——性能掉得快，且破坏已绑定事件和焦点状态。
推荐方案：初始渲染时所有子 ul 加 style="display:none"；JS 点击时只切换目标 ul 的 display 值，或切换 hidden 属性。图标变化用 CSS ::before 伪元素控制，不碰 innerHTML。
- 不要用
removeChild/appendChild动态插入子树，尤其懒加载场景下容易丢失状态 - 每个
li元素上挂原始数据引用（如li.__data = nodeData），后续搜索、选中都靠这个取值，不依赖 DOM 文本内容 - 事件委托绑定在最外层
ul上，用event.target.closest('li[data-expandable]')捕获目标，立刻event.stopPropagation()
无障碍与键盘支持不能靠 <details></details> 偷懒
<details></details> 在 Safari 下嵌套状态不可靠，无法初始展开指定层级，也不支持空格/回车切换、aria-expanded 同步和精确事件控制。生产环境必须手写逻辑。
每个可展开节点需带 data-expandable="true"，内部放一个 <button aria-expanded="false"></button>；子 ul 紧跟其后；JS 通过 button.nextElementSibling 定位对应 ul，而不是 querySelector('ul')（后者可能误选兄弟节点）。
-
aria-expanded值必须用getAttribute('aria-expanded') === 'true'判断，别用布尔比较 - 缩进统一用
padding-left，别用li:nth-of-type(1) > ul这类深度选择器——动态增删节点时样式会错乱 - 图标动画优先用
transform: rotate(90deg)+transition，比替换文本字符更稳定
active、前端维护的 expanded、用户操作的 selectedIds、懒加载触发的 data-loaded——这些字段散落在不同地方，稍不注意就变成互相打架的状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
