后台页面DOM结构需严格分离导航栏与侧边菜单、内容区语义化、操作栏嵌入main、浮层挂载body。导航栏（header）仅含全局元素，侧边菜单（aside）独立异步加载并按角色条件渲染；内容区用main/form/section等语义标签，配合aria-busy骨架屏；操作栏置于main内首子节点，sticky定位并同步URL查询参数；Modal等浮层须Portal至body，inert主内容并焦点管理。
导航栏与侧边菜单必须分离渲染
后台页面一旦把 nav 和 aside 合并在同一 DOM 容器里，后续权限控制和动态收起逻辑就会互相干扰。比如用户切换角色后，侧边菜单需重载但顶部导航保持不变——若两者共用一个 Vue 组件或 React Hook，就容易触发不必要的重新挂载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 顶部导航栏（
header）只放系统名、通知图标、用户头像等全局元素，不参与路由跳转 - 侧边菜单（
aside）独立为一个可异步加载的模块，配合路由元信息（meta.roles）做显隐控制 - 避免用
display: none硬隐藏菜单项，改用条件渲染（如 Vue 的v-if或 React 的{show && <menuitem></menuitem>}），否则键盘焦点和屏幕阅读器仍会读取
内容区要预留“骨架占位”而非空 div
很多模板一进页面就显示空白 div#main-content，等接口返回再塞数据，导致布局抖动、SEO 友好性差、SSR 降级失败。真实生产环境里，内容区不是“容器”，而是“上下文载体”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用语义化标签包裹内容区：主业务页用
main，表单页加form，列表页嵌section+article，别全堆div - 接口未返回前，渲染带
aria-busy="true"的骨架屏（skeleton），宽度/高度用 rem 固定，避免回流 - 如果支持 SSR 或静态生成，
main内至少保留一条默认提示文案（如“正在加载数据…”），而不是留白
操作栏（Toolbar）不能脱离内容区 DOM 流
常见错误是把搜索框、批量操作按钮、新增按钮等统一提成顶部固定栏（position: fixed），结果在窄屏或缩放时遮挡内容、破坏滚动锚点、让快捷键（如 Ctrl+F）无法定位到真实内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 操作栏应作为内容区的首子节点，放在
main内部最上方，用sticky而非fixed（position: sticky; top: 0;） - 响应式断点下自动折叠为下拉菜单（
details/summary或带 icon 的button），避免横向溢出 - 涉及筛选的操作栏，其状态必须与 URL query 同步（如点击“未处理”自动跳转
?status=pending），否则刷新即丢失
模态框和弹层必须挂载到 body 下且隔离 focus
把 Modal 写在某个组件内部（比如塞进 table 的 td 里），会导致 z-index 失效、父容器 overflow hidden 截断、键盘 Tab 键跳出弹窗范围——这些都不是样式问题，是 DOM 结构缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有浮层类组件（
Modal、Tooltip、DatePicker）都通过 Portal 渲染到document.body下独立节点 - 打开时用
inert属性标记主内容区（document.querySelector('main').inert = true），或手动 trap focus - 关闭后必须恢复上一个聚焦元素（
lastFocusedElement?.focus()），否则键盘用户会卡在地址栏
