dsh-minimap:爲 DSH Web GUI 側邊欄添加 VS Code 風格的縮略圖

在 DSH 生態中,利用 dsh-better-sidebar 可以在 Web 界面查看文件。當處理長文本時,在編輯器內部滾動定位效率較低。dsh-minimap 通過在側邊欄文本編輯器邊緣疊加整篇文檔的微型文字縮略圖來解決這一問題。

插件定位

這是一個由 ping1999 維護的插件,旨在爲 DSH Web GUI 的側邊文件查看器提供類似 VS Code 的縮略圖導航。它通過文本縮略圖和可拖動的視口框,幫助開發者在長文件中快速定位。

核心功能

  1. 縮略圖顯示:疊加整篇文檔的微型文字縮略圖。
  2. 視口跟隨:半透明視口框實時跟隨滾動。
  3. 交互操作:
    * 點擊跳轉:點擊縮略圖任意位置,編輯器跳轉到對應位置。
    * 拖動定位:按住視口框拖動,編輯器跟隨滾動。
    * 懸停滾動:懸停縮略圖滾輪,等效於滾動編輯器。
  4. 視覺適配:語法着色,適配明暗主題;寬度自適應側欄(約編輯器寬度的 22%,鉗制在 56–110px),編輯器內容區自動預留間隙,長行文字不會被遮擋。
  5. 滾動映射:拖動到底即真正到底,比例映射以編輯器的真實滾動範圍爲基準。
  6. 架構設計:純疊加層,不改動側欄組件;多標籤頁各自獨立,關閉標籤頁或卸載插件後完全清理。

安裝與啓用

使用以下命令安裝插件:

dsh plugin --profile web add dsh-minimap

或從 GitHub 源碼安裝:

dsh plugin --profile web add github:ping1999/dsh-minimap

安裝後需重啓 web 服務才能生效:

pnpm dsh web

兼容性說明:已驗證與 dsh 0.1.5-rc.2 + dsh-better-sidebar 0.19.1 兼容,向下兼容 dsh 0.1.5-rc.1 / dsh-better-sidebar 0.19.0。

典型用法

  1. 打開任意會話,在右側 Files 側欄打開一個文本文件。
  2. 編輯器右緣即出現縮略圖。
  3. 操作方式:
    * 滾動編輯器 → 縮略圖視口框同步移動。
    * 點擊縮略圖任意位置 → 編輯器跳轉(視口居中)。
    * 按住視口框拖動 → 編輯器跟隨滾動(支持鼠標與觸屏)。
    * 懸停縮略圖滾輪 → 等效於滾動編輯器(含觸控板橫向滾動)。

適用場景與注意

  • 生效範圍:僅對 CodeMirror 6 文本查看器生效(即 dsh-better-sidebar 的文件查看器)。圖片 / PDF / Markdown 預覽不會出現縮略圖。
  • 語法着色:是漸進式的,CM6 只渲染可視行,行滾入視野至少一次後纔有顏色。
  • 服務重啓:安裝/升級後必須重啓 web 服務。
  • 配置項:暫無設置項。

總結

dsh-minimap 爲 DSH 的 Web 文件查看提供了全局概覽能力。通過簡單的疊加層實現,它在不改動側欄組件的前提下,顯著提升了長文本文件的瀏覽效率。

插件目錄 | GitHub 倉庫

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

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

小夜