在 DSH 插件化架构下，长对话窗口的消息定位效率直接影响开发与调试体验。dsh-user-message-timeline 插件通过在对话列内侧引入可视化导轨，解决了快速定位历史消息的需求。
这是什么¶
dsh-user-message-timeline 是一个客户端插件，由 huang-chunc 维护。它的核心功能是在对话列内侧，为每一条用户消息点亮一颗药丸。
核心功能¶
药丸漏斗¶
导轨常态为 12×4 布局，药丸间距 10px。悬停或激活时，药丸会放大。
sticky 预览¶
悬停时，经过 150ms 或连续 60ms 后，会弹出墨玉玻璃效果的预览气泡，宽度 240px，高度自适应。气泡内文本支持复制。
拖拽 scrub¶
支持拖拽操作。Scrub HUD 会跟随鼠标移动，显示“第X/N轮·预览首行”等信息。松开鼠标后，视图会平滑过渡到目标消息。
分页加载¶
当消息数量较多时，顶部会出现空心脉冲提示。点击可循环加载更多 20 条消息。
视口可滚动¶
当消息数量超过 16 颗时，导轨内部会出现滚动条，高度限制为 386px，边缘会淡出遮罩。
丝滑体验¶
插件内部使用 ResizeObserver 和 requestAnimationFrame (rAF) 保证渲染性能，并适配了 prefers-reduced-motion。
偏好设置¶
在侧边栏的插件卡片中，可以控制开关以及左右位置。深浅主题会自动适配（白底黑点/黑底灰点）。
安装与启用¶
前置条件¶
确保已安装 DSH（版本 ≥0.1.7）和 Node.js（版本 ≥20）。
安装步骤¶
- 执行安装命令：
dsh plugin --profile web add dsh-user-message-timeline
- 安装完成后，需硬刷新浏览器（Cmd/Ctrl+Shift+R）以使插件生效。
典型用法¶
- 悬停在漏斗药丸上，药丸会放大，并弹出 240px 宽的预览气泡。
- 点击药丸可跳转至对应消息。
- 拖拽 Scrub HUD 可跟随移动。
- 当消息超过 16 条时，导轨可滚动，支持左右贴边一键切换。
- 在侧边栏插件设置中调整位置和开关。
配置与调试¶
右侧适配¶
右侧布局目前仅适配 dsh-better-sidebar。
调试方式¶
在浏览器控制台执行以下命令开启调试日志：
localStorage.setItem('umtl:debug', '1')
总结¶
dsh-user-message-timeline 通过可视化的药丸导轨，提升了在长对话中定位消息的效率。结合分页加载、拖拽 scrub 等交互，能够显著优化 DSH 的使用体验。
