HTML权限树布局核心是节点可读、可操作、可维护；须用data-id/data-pid标识关系，data-expanded等管理状态，div.node包裹内容，JSON驱动初始化，CSS精细控制视觉密度与响应式。
HTML管理系统权限树的布局，核心不是“画出树形”，而是让节点可读、可操作、可维护。纯靠 <ul><li> 嵌套不解决任何实际问题——它只提供结构，不提供交互逻辑、状态管理或视觉区分。
用语义化 <ul> 打底，但必须加 data 属性和 class 分层
权限树本质是「带状态的嵌套列表」，不能只依赖 HTML 层级推导父子关系。浏览器不认“缩进”就是父子，JS 也不该靠 parentNode 算层级。
- 每个
<li>必须带data-id和data-pid（父 ID），避免递归遍历时 DOM 查询失真 - 展开/收起状态用
data-expanded="true"或data-checked="partial"，而不是仅靠 class 切换——方便 JS 读取和序列化 - 节点容器统一用
<div class="node">包裹文字+图标+复选框，避免直接在<li>上设 padding/margin 导致折叠动画错位 - 禁止用
style="display:none"控制子树显隐：它绕过 CSS 过渡，且影响焦点管理；改用max-height: 0; overflow: hidden;+transition
zTree 初始化时别直接传 DOM 结构，优先走 JSON 数据驱动
手写一堆 <ul><li> 在模板里，等于把数据和视图耦死。权限树节点常需异步加载、搜索过滤、批量勾选，这些都要求数据源可编程。
- 初始化前先构造扁平数组：
[{id:1, pId:0, name:"系统管理", checked:true}, {id:2, pId:1, name:"用户管理"}]，再交给$.fn.zTree.init() -
setting中必须设check.enable: true和view.showIcon: false（图标由 CSS 控制，更易定制） - 禁用默认右键菜单（
callback.beforeRightClick返回false），后台权限树极少需要“复制节点”这类操作 - 如果后端返回的是嵌套结构（非扁平），用
zTreeObj.transformTozTreeNodes(data)转换，别自己写递归
权限节点列表排版要防三类视觉污染
权限树不是普通菜单，字段多（名称、权限码、描述、生效状态）、密度高、常需横向滚动查看。CSS 不处理好，一眼扫过去全是文字块。
立即学习“前端免费学习笔记（深入）”；
- 标题字段强制单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，且父容器设min-width: 0防止 flex 布局下撑开整行 - 权限码（如
sys:user:list）用<code>标签包裹，配font-family: 'SFMono-Regular', Consolas; font-size: 0.85em; color: #666; - 状态标签（如“已启用”“仅查看”）不要用颜色堆砌，统一用
background: #e9ecef; color: #495057; border-radius: 4px; padding: 2px 6px;，避免红绿蓝混用导致色盲用户无法识别 - 移动端小屏下，隐藏权限码和描述字段，只留名称+状态，用
@media (max-width: 768px)控制，别删 DOM
权限树最难的从来不是“怎么展开”，而是“怎么让运维人员一眼看出谁漏配了权限”。节点坐标、缩进、图标大小这些细节，最终都要服务于快速扫描和精准定位——布局只是手段，不是目的。
