应使用 flex 布局替代 table 实现后台导航，因 table 在滚动隔离、焦点顺序、响应式重排及语义可访问性上存在根本性缺陷；flex 方案通过 display: flex + flex: 0 0 240px + flex: 1 + overflow: auto 精确控制布局与滚动，配合 CSS 变量、状态同步、视觉隐藏而非 display: none 等细节保障体验与可访问性。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
别用 <table> 做后台导航布局，它会在滚动隔离、焦点顺序、响应式重排上直接失效——这不是兼容性问题，是模型错配。<h3>为什么 <code><table> 在后台导航里必然出问题<p>表格的渲染逻辑是「整行对齐」，一旦内容区高度变化，<code><tr> 会拉伸整个表格，导致 <code>position: fixed 的侧边栏脱离视口、被裁剪或消失。更关键的是：<td> 不支持 <code>overflow-y: auto，你设了 height: calc(100vh - 48px) 也无效，Safari 和旧 Edge 下几乎必崩。
<td class="content"> 里塞 50 行数据 → 滚动条出现在浏览器窗口边缘，侧边栏跟着滚<li>媒体查询切单列时，<code>colspan/rowspan失效，小屏下要重写 HTML 结构- 屏幕阅读器无法识别
<nav></nav>和<main></main>的语义关系，aria-label全白搭 - 外层容器设
display: flex; height: 100vh; - 侧边栏加
flex: 0 0 240px;（不是width: 240px，避免 flex 容器收缩时塌陷） - 主内容区设
flex: 1; overflow: auto;，滚动行为完全由它自己控制 - 如果侧边栏要 sticky 贴顶，确保父容器有
min-height: 100vh，且不要在<aside></aside>上设height
display: flex 实现固定宽度 + 独立滚动的最小可行方案
核心就两条：侧边栏不参与内容流的高度计算，主内容区自己管滚动。不需要 JS，也不依赖 vh 在单元格里瞎猜。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.layout { display: flex; height: 100vh; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; overflow: auto; }
折叠状态切换时，宽度和图标必须共用同一状态源
别监听 getBoundingClientRect().width 或靠 details[open] 伪类驱动旋转——这些是 DOM 快照，不是状态。折叠菜单的宽度缩到 64px 同时图标翻转 180°，必须绑定同一个布尔变量，比如 Vue 的 menuCollapsed 或 React 的 isCollapsed。
- 图标旋转用
transform: rotate(180deg)+transition: transform 0.25s，条件类名如is-collapsed - 侧边栏宽度用
width: var(--sidebar-width)，CSS 变量由 JS 动态更新：document.documentElement.style.setProperty('--sidebar-width', isCollapsed ? '64px' : '240px') - 文字区域用
v-show="!isCollapsed"（Vue）或aria-hidden={isCollapsed}（React），避免v-if导致 DOM 重建丢失焦点
移动端隐藏侧边栏后，<nav></nav> 的可访问性不能丢
小屏下设 display: none 很危险：屏幕阅读器会跳过整个导航结构。正确做法是视觉隐藏但保留语义可读性。
- 用
visibility: hidden; position: absolute; left: -9999px;替代display: none - 折叠按钮必须是
<button type="button"></button>，支持空格/回车触发，且有aria-expanded和aria-controls属性 - 展开后立刻
focus()到第一个<a></a>，否则键盘用户得狂按 Tab 才能进菜单
真正卡住后台导航的，从来不是“怎么让侧边栏缩进去”，而是“缩进去之后，谁还记得它存在”。
