在 DSH Web 的长对话场景中,快速定位用户消息往往需要手动滚动。dsh-conversation-nav-dots 在对话界面的右侧边缘添加了一列导航标记,每个标记对应一条用户消息,点击即可跳转。
这是一个由 yuioi666 维护的客户端插件,采用 MIT 许可证。插件不依赖额外的运行时库,核心作用是在右侧提供导航入口。
核心功能¶
- 极简 UI:寻常状态下只显示细横线标记,不干扰阅读。
- 悬停预览:鼠标悬停在右侧区域,展开完整消息预览面板。
- 即时跳转:点击任意标记或预览文本,直接跳转到对应消息(无动画)。
- 活跃跟踪:当前可见消息对应的标记显示蓝色高亮。
- 自动更新:切换对话时自动刷新导航点。
- 可滚动:消息过多时导航列表可滚动(最大高度约视口 20%)。
- 轻量:纯 DOM 实现,零运行时开销。
安装与启用¶
使用官方命令安装:
dsh plugin --profile web add dsh-conversation-nav-dots
安装完成后,需要重启 DSH Web 才能生效:
dsh web
使用说明¶
- 打开任意一个对话。
- 查看屏幕右侧边缘,会出现一列细横线标记。
- 悬停到标记上,会展开消息预览面板。
- 点击任意标记或预览文本,页面会跳转到对应的消息位置。
- 当前正在查看的消息对应的标记会显示为蓝色。
定制与限制¶
- 暗色主题:插件原生支持暗色主题,颜色通过 CSS 变量暴露,可自由定制。
- 桌面端优先:插件设计用于桌面端,移动端视口较窄时体验可能不佳。
- 适用场景:在 10 轮以上的长对话中效果最佳,几条消息的场景下无需使用。
- 性能:使用
IntersectionObserver和requestAnimationFrame跟踪滚动,性能开销极低。
开发者参考¶
如果需要通过代码监听导航跳转事件,可以在浏览器控制台执行:
document.querySelector('.dsh-nd-row')?.click()