背景
冲刺合集里有相当多的长文章,例如「整合管理精讲」一万两千字、11 个大节。老用户反馈:页面上看不到全文结构,每次找某一节都要手动滚很久。
方案
在课时详情页新增「本讲目录」:
- 桌面端(≥1280px 屏幕):右侧 240px sticky 侧栏,与正文并列
- 移动端(<1280px,包括平板和手机):右下角橙色"? 目录"胶囊按钮,点击弹出底部抽屉
- 抽屉/侧栏内容自动从正文 h1/h2/h3 标签生成,无需维护
交互细节
- 点击目录项:平滑滚动到对应节,URL hash 同步更新
- 滚动正文:当前所在节在目录里自动高亮(橙色)
- 首次进入页面:1.5 秒后弹出「点这里看本讲目录」小气泡,4.5 秒自动消失;点按钮也会立即消失
- 抽屉打开:遮罩半透明黑,点遮罩关闭;内部可滚动;底部适配 iOS 安全区
- 目录项少于 3 条时不显示(避免两节标题也出目录)
位置避让
移动端右侧本来就有三个浮动按钮:「↑ 回到顶部」、「咨询」、「意见反馈」。新增的「目录」胶囊按钮放在「意见反馈」上方,与其他按钮垂直错位,互不遮挡。
适配范围
- 所有付费课时(通过 article_content HTML 渲染)
- 所有免费 fallback 课时(通过 MarkdownRenderer)
- 正文容器被标记
data-lesson-article,目录组件通过选择器自动识别