在 DSH (DeepSeek Harness) 環境中進行開發時，頻繁切換窗口去查看代碼、文檔或編輯文件會影響效率。dsh-preview-ui 插件在瀏覽器內直接集成了文件樹瀏覽、多格式預覽、在線編輯以及版本管理功能，使所有操作均可在當前 Web 界面完成。
這是一個由 xusuyang030218 維護的 DSH 客戶端插件。它允許用戶在瀏覽器中瀏覽當前工作區的文件樹，預覽包括代碼、Markdown、圖片、PDF、Office 文檔、HTML 在內的多種格式，支持在線編輯文本文件，並自動保留本地版本歷史。
安裝與啓用¶
使用 pnpm 安裝插件。
# 本地鏈接安裝（實時同步）
pnpm dsh plugin --profile web add "dsh-preview-ui@link:d:/dsh-preview-ui"
# 或從 GitHub 安裝
pnpm dsh plugin --profile web add "github:xusuyang030218/dsh-preview-ui"
安裝後進入項目目錄進行構建：
cd d:\dsh-preview-ui
pnpm install
pnpm run build
重啓 DSH Web 服務，訪問 http://127.0.0.1:3080，在輸入框左側會出現「預覽」按鈕。該插件通過 /plugins/dsh-preview-ui/client.js 提供。
核心功能¶
- 文件樹瀏覽：以樹形結構展示工作區目錄，支持按文件名過濾和懶加載子目錄。
- 多格式預覽：
- 代碼與文本：支持語法高亮。
- Markdown：渲染標題、列表、表格、代碼塊等。
- 圖片：支持 PNG、JPG、GIF、SVG、WebP、BMP、ICO。
- PDF：使用瀏覽器原生查看器。
- Office：支持 DOCX、XLSX、PPTX 解析。
- HTML：在 iframe 沙箱中預覽，禁用腳本執行。
- 二進制：顯示前 4KB 的十六進制轉儲。
- 在線編輯：使用帶高亮遮罩層的 textarea 進行編輯。按下
Ctrl+S保存時，系統會自動創建版本快照。 - 版本歷史：快照存儲在
.dsh-preview-ui/versions/目錄下。支持回滾操作，單個文件最多保留 50 個版本。 - 全文搜索：支持按文件名或文件內容搜索工作區內的文件。
- 拖入預覽：支持將文檔或整個項目文件夾拖入面板，遞歸生成文件樹並預覽。
- Agent 工具：插件註冊了
list_files和preview_file工具，Agent 可以主動觸發預覽面板。
典型用法¶
- 重啓服務後，在
http://127.0.0.1:3080界面左側找到「預覽」按鈕。 - 將本地文檔或項目文件夾直接拖入預覽面板，系統會自動解析文件樹。
- 在編輯器模式下編輯文本文件，按
Ctrl+S保存，系統會自動保存前創建版本快照。 - 在 DSH Agent 中調用
list_files或preview_file工具，可主動打開預覽面板。
安全與注意¶
插件的所有 API 均錨定在 DSH 配置的工作區根目錄。系統拒絕絕對路徑、路徑穿越攻擊以及直接訪問版本快照目錄。HTML 預覽使用了無腳本權限的 iframe 沙箱，raw 端點返回安全 MIME 類型並附帶 X-Content-Type-Options: nosniff 頭部。
作爲運行在當前 DSH 進程權限下的插件，安裝前請檢查源碼與許可證（MIT）。
生態背景¶
DSH 的設計理念是「一切皆插件」。該插件收錄於社區目錄，與 DeepSeek 或幻方沒有官方從屬關係。
