前言¶
在 DSH Web GUI 中，一個會話往往包含多輪用戶消息、agent 運行中發送的 steering 消息，以及對應的模型回覆。對話變長之後，靠上下滾動定位某一輪消息並不方便。
下面介紹 KeLearns/dsh-navigation-bar：它把單個會話裏的用戶消息映射爲一排“鋼琴鍵”，支持懸停預覽和點擊跳轉，用於會話內多輪對話導航。
這是什麼¶
KeLearns/dsh-navigation-bar 是一個 DSH 客戶端插件，面向 DSH Web GUI 的單個會話提供多輪對話導航。
- 維護者：
KeLearns - 許可證：
MIT - 平臺聲明：
dsh.client.platform爲web - 插件形態：基於 DSH 官方雙面插件機制（host + browser half），不侵入 DSH 源碼
它的核心思路是：一根鍵對應一條用戶消息，模型回覆不單獨佔鍵，而是併入對應輪次的預覽中。
核心功能¶
會話內導航¶
導航條只錨定用戶消息：
- 一根鍵 = 一條用戶消息
- 包含 agent 運行中發送的 steering 消息
- 按鍵按時間正序排列
- 模型回覆不單獨佔鍵，併入對應輪次的預覽
這樣導航條的粒度是“一輪用戶輸入”，而不是每條消息都單獨生成一個導航項。
視覺規格¶
導航條採用參考圖級視覺規格：
- 鍵距：
10px - 鍵高：
2px - 最短長度：
6px - 懸停長度：
26px（約4.3×） - 位置：在消息區內垂直居中
配色按參考圖逐像素測量：
淺色主題：#D2D3D3 / #767779 / #1A1C1F
深色主題：#454545 / #A3A3A3 / #FFFFFF
懸停階梯¶
懸停某根鍵時，該鍵會變長、變色，上下相鄰鍵形成 3 級階梯：
20px / 14px / 10px
≈77% / 54% / 38%
第 4 鄰鍵恢復最短長度。首鍵或尾鍵懸停時，階梯會在邊界處自然單側裁剪。
懸停氣泡¶
懸停時會顯示該輪消息預覽：
- 用戶消息：單行省略
- 對應模型回覆：最多 3 行
- 截斷方式：寬度模型 JS 截斷 +
-webkit-line-clamp雙保險 - 超出部分：以
…省略
當前位高亮與跳轉¶
非懸停狀態下，當前查看內容對應的鍵僅變色，長度不變，並隨滾動即時聯動。
點擊對應鍵可以跳轉到該輪消息位置。插件支持深淺色主題自適應：
data-ds-dark-theme
prefers-color-scheme
安裝與啓用¶
正式包安裝到 web profile：
dsh plugin --profile web add @kelearns/dsh-navigation-bar
執行後需要重啓 dsh web 實例，再刷新頁面，使插件在瀏覽器側生效。
也可以在 dsh 設置頁的 Plugin Market（dsh-market）中搜索 navigation-bar，進行一鍵安裝。
本地開發¶
本地開發時可以使用 link 方式安裝：
dsh plugin --profile web add link:<本目錄>
修改 lib/client.js 後，刷新頁面即可看到變化。
運行與依賴要求如下：
{
"engines": {
"node": "^22.19.0 || >=24.0.0"
},
"peerDependencies": {
"@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
平臺聲明爲 web：
dsh.client.platform: web
數據來源與 DOM 錨點¶
據資料聲明，插件使用 DSH 官方 API 獲取當前會話數據：
ctx.sessions.binding(currentId).session → ConversationSnapshot
頁面定位依賴以下 DOM 錨點：
滾動容器：[data-conversation-scroll]
消息行：[data-chat-anchor-key]
這意味着導航條主要圍繞當前會話快照和已有消息錨點進行渲染，不依賴額外自造消息結構。
適用場景與注意¶
這個插件適合在 DSH Web GUI 中使用，並且希望快速定位某一輪用戶輸入、agent steering 消息或對應模型回覆的場景。
安裝前建議：
- 檢查源碼與
MIT許可證是否可接受。 - 確認運行環境滿足 Node 版本與 peer 依賴要求。
- 注意插件會以當前
dsh進程權限運行，安裝來源應可驗證。 - 新裝插件後重啓
dsh web實例，再刷新頁面。
該插件已收錄於 awesome-dsh-plugin 精選目錄。
鏈接¶
- GitHub：
https://github.com/KeLearns/dsh-navigation-bar - 插件線索中給出的目錄頁 URL：
https://www.skillhub.cn/plugins/KeLearns/dsh-navigation-bar（該 URL 來自插件線索，未能在已抓取資料中核驗，訪問前請先確認）
