dsh-plugin-workbench:把 DSH 網頁做成可編輯文件工作臺

前言

在 DSH 工作流裏,文件和消息常常需要一起使用:消息裏引用一個路徑、聊天時查看一張圖片、臨時改一處代碼,或者從本地工作區移動、複製、重命名文件。如果這些操作都要離開 DSH Web,流程會頻繁中斷。

dsh-plugin-workbench 解決的就是這個問題:它在 DSH 網頁中加入 VS Code 風格的工作臺,包括文件樹、可編輯代碼預覽、右鍵文件操作和圖片內聯預覽。裝上之後,DSH 網頁可以作爲一個輕量代碼編輯器使用。

這是什麼

dsh-plugin-workbench 由 Pasumao 維護,許可證爲 MIT。

它定位爲 DSH Web 的文件工作臺插件,主要提供:

  • 左側文件樹側欄
  • 可編輯代碼預覽
  • 標籤頁、行號欄、語法高亮
  • 右鍵文件操作
  • 圖片內聯預覽
  • Markdown 渲染
  • 消息中 @ 引用工作區文件
  • 把文件拖入聊天輸入框
  • 每工作區獨立的撤銷與偏好狀態

已覈實資料中的版本爲 0.0.15,Node 要求 >=18。

核心能力

文件樹與編輯視圖

  • 文件樹側欄支持懶加載,並有 2 秒自動刷新。
  • 文件樹展開狀態按工作區獨立保存。
  • 標籤頁支持多文件打開、拖拽排序、收起/彈出。
  • 亮暗主題可一鍵切換。
  • 編輯器左側有行號欄,顯示邏輯行號,並與文本滾動鎖定對齊。

可編輯代碼預覽採用透明 textarea 疊加語法高亮的方式,支持 Ctrl/Cmd+S 保存。

語法高亮使用 highlight.js,已覈實資料列出的支持範圍包括:

JS/TS
Python
JSON
HTML
CSS
Shell

自動換行偏好會持久化,可在軟換行和長行橫向滾動之間切換。

文件操作

右鍵菜單提供 VS Code 風格的文件操作,包括:

  • 新建文件
  • 新建文件夾
  • 重命名
  • 刪除
  • 複製路徑
  • 複製
  • 剪切
  • 粘貼
  • 刷新
  • 在系統中打開
  • 在資源管理器打開

複製、剪切、粘貼支持 Ctrl/Cmd+C/X/V,也支持右鍵菜單和跨工作區粘貼。複製到同名目標時,會詢問是否覆蓋。

批量操作支持多選、批量刪除、拖拽整組移動。

操作可撤銷:

  • Ctrl+Z 或右上角撤銷
  • 每工作區獨立
  • 上限 30 條
  • 刪除爲可撤銷刪除

磁盤變更同步方面,外部修改打開的文件時,乾淨標籤頁會自動重讀;帶未保存編輯的標籤頁會顯示重載徽標。

預覽、引用與會話插入

圖片預覽支持:

png
jpg
gif
webp
avif
svg

圖片內聯渲染上限爲 20MB,走同源路由:

/dsh-plugin-files/raw/<path>

該路由僅響應圖片擴展名。

Markdown 渲染使用 markdown-it,原始 HTML 會被轉義,相對路徑圖片經同源路由內聯顯示。

@ 引用文件時,可以在文件上選擇“@ 在消息中引用”,把 @相對工作區路徑 插入聊天輸入框;發送後,消息中的相對路徑會渲染爲可點擊鏈接。

拖文件進會話時,把文件從左欄拖到聊天區任意位置,路徑文本會插入輸入框光標處。

安裝與啓用

環境與配置要求

Node 要求:

>=18

插件無需環境變量或配置文件,無外部配置項。

行爲偏好按工作區持久化,包括:

  • 自動換行
  • 亮暗主題
  • 標籤佈局
  • 文件樹展開狀態

安裝命令

已覈實資料給出兩種安裝命令。

npm 安裝:

dsh plugin --profile web add dsh-plugin-workbench

GitHub 安裝:

dsh plugin --profile web add github:Pasumao/dsh-plugin-workbench

安裝後重啓 DSH Web。

0.0.9 起,佈局補丁自動檢測並重打;0.0.15 起自動識別 npm 與 DSH Desktop 構建產物,DSH Desktop 開箱即用。

如果自動重打失敗,例如錨點失效,可以執行:

node node_modules/dsh-plugin-workbench/scripts/patch-layout.mjs

然後重啓 dsh web。

卸載

卸載命令:

dsh plugin --profile web remove dsh-plugin-workbench

並還原佈局 bundle。

典型用法

下面介紹幾個常見操作。

1、打開工作區後,在左側文件樹中定位文件。

2、右鍵文件,選擇“@ 在消息中引用”,把 @相對工作區路徑 插入聊天輸入框。

3、把文件從左欄拖到聊天區任意位置,路徑文本會插入輸入框光標處。

4、在編輯器中修改代碼,使用:

Ctrl/Cmd+S

保存。

5、執行文件級複製、剪切、粘貼,使用:

Ctrl/Cmd+C
Ctrl/Cmd+X
Ctrl/Cmd+V

也可以使用右鍵菜單。

6、需要撤銷最近操作時,使用:

Ctrl+Z

或右上角撤銷按鈕。

適用場景與注意

適合使用 dsh-plugin-workbench 的場景包括:

  • 在 DSH Web 中查看和編輯工作區文件
  • 在聊天中快速引用工作區文件路徑
  • 預覽圖片、Markdown 和代碼
  • 做簡單的文件複製、移動、重命名、刪除
  • 需要輕量文件操作和撤銷能力

安裝前需要注意:

  • 文件操作通道僅限 loopback RPC /dsh-plugin-files
  • 寫操作顯式以 danger-full-access 執行
  • 插件以當前 dsh 進程權限運行,安裝前應檢查源碼與許可證,並確認當前 dsh 進程可訪問目標工作區
  • DSH 升級會覆蓋佈局 bundle;插件啓動時自動檢測並重打補丁
  • 錨點失效時需要更新:
scripts/patch-layout.mjs
  • 本倉庫不包含 DSH 編譯產物
  • 部分源碼與文檔由 AI 輔助生成(DeepSeek Harness),經人工審查與實機驗證
  • 權限相關邏輯已按最小權限原則複覈

資源

GitHub 倉庫:

https://github.com/Pasumao/dsh-plugin-workbench

當前已覈實資料未提供可覈實的目錄頁 URL;如需查找,建議以 GitHub 倉庫爲準。

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

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

小夜