@max-null/dsh-chat-rail:DSH 會話的畫卷式消息導航欄

前言

DSH 會話一旦拉長,找一個歷史消息就要反覆滾動。常見的導航做法是點開後彈出一個面板,或者靠瀏覽器原生 title 顯示預覽,前者容易與側邊欄、底欄錯位遮擋,後者信息量有限。@max-null/dsh-chat-rail 走的是另一條路:在會話面板右側放一條豎排導航,每條用戶消息一個指示點,hover 時像打開畫卷一樣展開完整列表,點擊即可跳轉。下面介紹這個插件的功能、安裝方式和使用方法。

這是什麼

@max-null/dsh-chat-rail 是 Max-Null 維護的 DSH 插件,定位是「畫卷式消息導航欄」:右側豎條 hover 展開畫卷,scroll-spy 高亮跟隨閱讀位置,消息項帶編號、相對時間和完整預覽。當前 package.json 版本號爲 0.6.1,許可證 MIT。

它屬於 @max-null/* 插件系列,這一系列共同構成 SSID(思靈 · Seek Soul in Darkness)桌面體驗。兼容性方面,要求 DSH ≥ 0.1.0-rc.6,完整適配 DSH 0.1.2-alpha.4。

核心功能

畫卷式展開與 scroll-spy

  • 收起時是一條幹淨的豎條,hover 時從右往左平滑展開。展開走單容器,各消息項高度天然一致。
  • scroll-spy 跟隨閱讀位置:無論會話滾到哪裏,當前消息的指示點始終保持在導航條可視區中央,導航條會自動滾動補償。
  • 切換會話時,自動定位到新會話當前閱讀位置,而不是回到頂部。

與 better-sidebar 的同步避讓

  • 安裝了 dsh-better-sidebar 時,導航欄的右緣和垂直位置跟隨 --dsh-sidebar-width / --dsh-sidebar-height CSS 變量,與面板共享同一段 transition 動畫,右欄、底欄展開收起時同步移動,互不遮擋。
  • 沒有 better-sidebar 時走 CSS fallback(右緣 12px + 垂直居中),純 DSH 環境開箱即用。
  • DSH 0.1.2-alpha.1+ 自帶 TurnNavigator 輪次導航豎軌。安裝本插件後會自動隱藏官方豎軌(通過 aria-label 雙文案錨點定位,不依賴構建 hash),由本插件統一承擔會話導航;卸載本插件後官方導航照常顯示。

深歷史跳轉

長會話的歷史是分頁加載的,跳到未加載的消息需要先補載。本插件的處理:

  1. DSH 0.1.2-alpha.3+ 內核:走官方 loadThrough(seq) 精確跳轉裝載器,200 條/頁一次到位。
  2. 舊內核:自動回退爲逐頁 loadOlder 循環,50 條/頁。

跳轉遠距離消息時顯示 spinner 和「加載中」反饋,導航條收起態只留圖標。

tip 預覽面板

hover 消息項時左側彈出 tip 面板:顯示完整內容,在展開動畫結束後精準定位,避免面板位置跳動。面板內是編號 + 相對時間 + 文本三列對齊,編號固定寬、時間靠右,文本區域最大化。

含圖消息在展開態顯示柔和圖片角標(收起態不顯示,保持豎條幹淨),tip 面板則在文本上方顯示圖片縮略圖。

收藏與快速填充

  • 每條用戶消息的複製按鈕左側有兩個操作按鈕:星 ★ 收藏/取消收藏(收藏後變黃色實心星);加號 + 一鍵把該消息全文和附件回填輸入框,歷史圖片經官方附件通道回填。
  • 收藏狀態按會話持久化在 localStorage,刷新與重啓後保留。
  • 導航條聯動:收藏消息的指示條顯示爲黃色,展開態在標題前顯示小星標。
  • 導航條頂部有星形過濾開關,點亮後只顯示已收藏的消息,再點恢復全部。

主題適配

全部使用 DSH 主題變量(--dsw-alias-*),淺深色自動適配。

架構簡述

插件分爲兩半:

  • host 半端(lib/index.mjs):註冊 chatRail 會話投影,從 session log 摺疊用戶消息錨點 { seq, time, text, id },排除插件和工具注入的上下文行。
  • client 半端(lib/client.js):向 conversation.input.dock 槽注入,通過 portal 渲染到 body。

數據源優先序爲:chatRail 投影 → 已加載聊天節點 → 後臺 loadOlder 循環。

安裝與啓用

使用官方安裝命令:

dsh plugin --profile <name> add @max-null/dsh-chat-rail

或手動編輯 profile 的 package.json,在 dependencies 中加入包名,並在 dsh.profile.bundles 中登記:

- id: chat-rail
  name: '@max-null/dsh-chat-rail'

安裝重啓後無需配置,導航豎條會出現在會話面板右側,同時 DSH 自帶的 TurnNavigator 豎軌自動隱藏。

想參與開發的話,倉庫提供以下腳本:

pnpm install
pnpm typecheck   # tsc 嚴格類型檢查
pnpm build       # 產出 lib/

典型用法

日常使用圍繞幾個動作:

  1. hover 導航條:畫卷展開,瀏覽消息的編號、相對時間和預覽。
  2. hover 消息項:左側彈出 tip 面板查看完整內容,含圖消息會先看到縮略圖。
  3. 點擊消息項:跳轉到對應消息,未加載的歷史自動補載。
  4. 滾動會話:高亮點跟隨閱讀位置並保持居中。
  5. 星標重要消息:之後用頂部星形開關只看收藏,用加號把某條消息全文和附件回填輸入框繼續追問。

適用場景與注意

適合的人羣:經常在 DSH 裏跑長會話、需要回看和整理歷史消息的人;使用 better-sidebar 雙面板佈局、希望導航不與側邊欄底欄錯位的人;想用收藏功能沉澱重要消息的人。

使用前注意幾點:

  • 插件以當前 dsh 進程的權限運行,收藏狀態會寫入 localStorage。安裝前建議檢查源碼與許可證,本插件爲 MIT。
  • 需要 DSH ≥ 0.1.0-rc.6;深歷史精確跳轉依賴 0.1.2-alpha.3+ 內核,舊內核會自動回退逐頁加載。
  • 安裝後官方 TurnNavigator 會隱藏,導航職責由本插件接管;不想要這個行爲就卸載本插件,官方導航恢復顯示。

結尾

@max-null/dsh-chat-rail 把「在長會話裏找消息」變成一條豎條上的定位操作:收起不佔空間,hover 展開全貌,滾動時高亮跟隨,跳轉遠距離歷史也有加載反饋。配合收藏和快速填充,它同時承擔了回看和整理兩類需求。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜