侧边栏

教程正文需要完整的阅读宽度，但用户也需要知道当前章节。Sidebar 把章节目录作为独立区域放在旁边，主内容仍然负责解释主题。

• 开始时：正文独占空间，目录入口没有清楚的页面位置。
• 完成后：侧栏显示章节和当前项，正文保持连续阅读。

当需求是放置章节目录、筛选或辅助入口时，定义一个 Sidebar 区域；响应式布局 负责说明窄屏是否收起或改成抽屉，Flex 布局 负责某一层的排列。侧边栏 ≠ 响应式，也不是 Flex 的另一个名字。

• 想改变目录在页面中的职责和内容，处理的是 Sidebar 区域；想让手机上不挤压正文，处理的是响应式策略。
• 想让侧栏和正文沿一条轴排列，可以使用 Flex；但 Flex 本身不决定哪一块是目录。

看阅读页的真实界面：标注会落在侧栏区域、收起入口、当前章节、主内容和页面分隔上。

• 点击编号或说明行可以固定当前部件，悬停离开后恢复已固定的部件。
• 区域和正文来自真实 DOM 测量，不用图片坐标猜页面骨架。

点击章节链接后，正文定位到对应标题，侧边栏保留当前位置；到达提示由全局消息组件展示。

判断重点是持续导航和局部补充：前者需要 Sidebar，后者就地用 Popover。

• 什么时候用：长内容需要持续保留目录、当前位置和跳转入口。
• 什么时候不用：只补充一小段局部信息时，用 Popover 贴着当前入口说明。

怎么判断：先看信息是否需要持续占据阅读空间，再选择 Sidebar 或 Popover。

请用 Sidebar 实现教程阅读页：左侧显示“章节目录”和当前章节，右侧保留主内容的连续阅读宽度；桌面端侧栏宽 196px，目录项可键盘聚焦，390px 与 320px 时收起为“显示目录”入口，不遮挡正文、不制造页面横向滚动；使用真实 DOM 和项目布局变量。