烧饼论坛评论树 (sb.sb Comment Tree)

一个为烧饼论坛（sb.sb）话题页增加评论树视图的油猴脚本（Userscript）。

论坛原生的回复列表是完全平铺的，一条回复引用了谁只能靠正文里的 @某人 #N 链接去猜上下文。本脚本把回复按引用关系重新组织成嵌套树，让对话脉络一目了然。

功能特性

1. 评论树视图

2. 多重引用拆分

一条回复同时引用了多个楼层时（比如同时回复 #1、#2、#3），正文会按引用切开：回给谁的部分就显示在谁的楼层下，每个位置只出现属于自己的那一段，不再是整条复制。

3. 自动合并全部分页

话题回复超过一页（每页 50 条）时，脚本自动抓取其余分页并合并为一页显示，分页条被移除，头部显示「已合并全部 N 页」。采用工作队列逐页发现新页码，即使分页条带省略号也能把所有页找齐。

4. 树形 / 平铺切换

回复区标题右侧提供「树形」「平铺」切换按钮。平铺模式即论坛原生视图（按楼层号排序），切换不刷新页面，偏好写入 localStorage 记忆。

5. 目标楼层定位高亮

从 ?reply=N 链接（楼层锚点、引用链接、通知跳转）进入时，树形重组完成后自动滚动到目标楼层并黄色闪烁 2.5 秒。

6. 实时更新

页面实时追加的新回复（无需刷新）会被自动检测并重新挂载到正确的位置，防抖 300ms。

7. 样式适配

• 连接线、按钮全部使用站点自身的 CSS 变量，深色模式自动适配
• 窄屏（≤560px）自动收紧缩进
• 子列表右侧用负 margin 抵消父项内边距，各层级右缘精确对齐（引用回复/点亮/#N 操作区不会逐层内缩）

安装

前置要求

• Chrome / Edge / Firefox 等现代浏览器
• 一个用户脚本管理器扩展（任选其一）：
  • Tampermonkey（推荐）
  • Violentmonkey
  • Greasemonkey

步骤

1. 点击浏览器中的 Tampermonkey 图标，选择「添加新脚本」（或 Alt+N）
2. 删除编辑器里的模板内容
3. 把 index.js 的全部内容粘贴进去
4. Ctrl+S 保存

或者直接把 index.js 文件拖入浏览器，由 Tampermonkey 接管安装。

也可以在 Tampermonkey 的「实用工具」页把文件作为 ZIP 导入。

使用

安装后无需任何配置。访问 sb.sb 的任意话题页（https://sb.sb/t/<话题ID>/），脚本自动生效：

操作	效果
打开话题页	自动加载全部分页 → 合并为一页 → 树形渲染
点击「平铺」	切回论坛原生平铺视图（楼层号升序）
点击「树形」	切回评论树视图
点击 @某人 #N 引用链接	跳转到对应楼层并高亮
页面实时新回复	自动挂载到被引楼层下

视图偏好（树形/平铺）在同一浏览器内全局记忆。

实现原理

• 数据来源：回复项的楼层号取自 data-reply-no 属性；引用关系取自正文里指向本话题、更早楼层的 ?reply=N 链接（/u/ 用户提及、后向引用、跨话题引用均被排除）
• 树构建：移动原 DOM 节点而非克隆，站点自身绑定的事件监听器（引用预览、点亮表单、引用回复按钮）在树形模式下完全可用；多重引用的后续位置用克隆副本（.ct-split），切换平铺时清除
• 内容拆分：用 DOM Range 按引用链接位置切分正文，段边界智能取整（引用位于段落开头时边界取整段之前，不会切出空段落）
• 分页合并：fetch + DOMParser 抓取各分页 HTML，按 data-reply-no 去重后 adoptNode 注入当前列表
• 布局：子列表以 grid-column: 1 / -1 占满父项（grid 布局）整行；连接线用伪元素绘制；水平 padding 运行时测量写入 CSS 变量 --ct-px

已知边界行为

• 引用已删除楼层（悬空引用）的回复自动挂到根部
• 悬空 + 有效引用混合时，挂到有效的那一个
• 回复目标楼层的子回复链在每个拆分位置都完整保留（保持对话线程）
• 0 回复的话题不启用（无列表可操作）

文件

文件	说明
index.js	油猴脚本本体

兼容性

• 匹配范围：*://sb.sb/t/*（仅话题页）
• @grant none，不申请任何特殊权限，不发起站外请求
• @run-at document-idle，页面空闲时注入

---

本脚本由 GLM-5.3 生成，页面结构与样式参数均取自 sb.sb 线上实际 DOM 测量。