权限页面必须用<main>包裹内容区，配合ARIA属性和语义化标签（如<section><nav><details><fieldset>）构建可访问、易维护的多维配置界面。
权限页面必须用 <main> 包裹内容区，不能只靠 <div> 堆砌
权限配置页不是普通列表页，它要承载角色创建、菜单勾选、按钮级开关、数据范围控制等多维操作。如果用一堆无语义的 <div class="box"> 套嵌，后期加权限校验逻辑或对接后端 RBAC 接口时，DOM 定位和状态管理会迅速失控。
正确做法是用 HTML5 语义标签锚定功能区块：
-
<main>作为整个权限页的容器，配合 ARIA 属性如role="application"表明这是交互式管理界面 - 角色列表用
<section aria-labelledby="role-list-title">，标题用<h2 id="role-list-title"> - 菜单权限树用
<nav aria-label="菜单权限配置">，每个可折叠节点用<details>+<summary>，比手写 JS 展开更轻量且原生支持键盘导航 - 按钮/操作权限项统一用
<fieldset>分组，<legend>标明作用域（如“用户管理操作”），方便屏幕阅读器识别
position: fixed 侧边栏在权限页里容易导致滚动错位
很多模板把左侧菜单设为 position: fixed，但在权限页中，右侧内容区常含长表单、树形结构或表格，用户滚动时若左侧固定栏高度不足或未同步监听 scroll，会出现“菜单卡在半空”或“底部空白露出来”的视觉断裂。
更稳妥的方案是放弃全高固定，改用局部 sticky：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏外层加
position: sticky; top: 64px;（假设顶部导航高 64px），这样它只在视口内跟随滚动，不会脱离文档流 - 主内容区用
overflow-y: auto并设min-height: calc(100vh - 64px)，避免内容少时 footer 上浮 - 关键：给侧边栏内部的权限树加
max-height: 70vh; overflow-y: auto，防止树展开后撑爆视口
权限开关组件别直接用 <input type="checkbox">，得包装成可点击区域
原始 checkbox 点击热区只有 12×12px，权限页里常并排堆叠几十个开关，用户极易点错。更糟的是，纯 checkbox 无法直观表达“继承自上级”或“禁用状态”这类语义。
实操建议用带状态的标签式开关：
- 用
<label class="perm-switch">包裹<input type="checkbox">，设置display: flex; align-items: center; gap: 8px; - 开关右侧文字用
<span>，状态提示（如“继承”“仅读”）放在文字后，用font-size: 0.85em; color: #666; - 禁用态不只设
disabled，还要加opacity: 0.5; pointer-events: none;，避免用户误以为能点 - 对“全选/取消全选”按钮，绑定到
change事件而非click，确保键盘空格键也能触发
权限数据渲染别用 innerHTML 拼接，优先走 document.createElement + dataset
权限页常需动态加载角色、菜单、按钮三类数据，再组合渲染。用 innerHTML += '<div data-perm-id="' + id + '">...' 拼字符串，一旦权限 ID 含特殊字符（如 user:delete:batch）就可能破坏 DOM 结构，且后续查某个权限是否启用时，得反复 querySelectorAll('[data-perm-id]') 遍历，性能差。
推荐方式：
- 每条权限项用
document.createElement('div')创建，通过el.dataset.permId = 'user:create'存 ID - 状态存在
el.dataset.enabled = 'true'，而不是靠 class 名（如enabled）判断，避免 class 冲突 - 批量操作时，用
Array.from(document.querySelectorAll('[data-perm-id]'))转数组，再.filter(el => el.dataset.enabled === 'true')提取启用项 - 后端返回权限数据结构尽量扁平，避免深层嵌套，前端按
menu_id/action/scope三字段归类渲染
权限页最易被忽略的点是「状态同步粒度」——菜单可见性、按钮可点性、API 请求头里的权限标识，这三者必须来自同一份内存状态，而不是各自读 localStorage 或反复调接口。否则用户勾选完保存，刷新页面前点击按钮却报 403，体验就断了。
