在 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 的使用體驗。
