前言¶
DeepSeek Harness (DSH) Web Client 採用了插件化架構，擴展了系統的能力邊界。在進行本地代碼開發或文件瀏覽時，原生的 Web 界面往往缺乏對文件系統的深度集成能力。dsh-sidebar 插件通過注入一個獨立的側欄組件，將本地文件管理、Git 追蹤與網頁預覽整合到了 DSH 的界面中，填補了原生 Web 界面在本地文件操作體驗上的空白。
是什麼¶
dsh-sidebar 是一個由用戶 kaijia323 維護的 DSH Web Client 插件，採用 MIT 許可證。它不依賴 DSH 原生的 details slot，而是作爲 #root 的兄弟節點掛載在 document.body 上，通過 CSS 佈局將原生界面向右擠壓，從而實現“真佔位”的側欄效果。
核心功能¶
該插件主要提供以下能力：
- 虛擬化文件樹：支持對當前會話工作區目錄進行懶加載展示，使用虛擬滾動技術處理大目錄，避免渲染性能問題。
- 多格式預覽：支持文本/代碼（帶行號與基礎語法高亮）、Markdown 渲染/源碼切換、常見圖片（png/jpg/jpeg/gif/webp/bmp/ico/avif）預覽。
- VSCode 風格 Activity Bar：側欄最右側提供常駐的 Activity Bar，包含“文件資源管理器”、“Git 追蹤”和“瀏覽器”三個視圖切換入口。
- 多文件 Tabs：支持在預覽區打開多個文件，具備橫向滾動和關閉功能。
- Git 追蹤視圖：提供分支、改動、歷史記錄等 Git 功能，支持 Pull/Push 操作及狀態自動刷新。
- 瀏覽器視圖：集成 iframe 瀏覽器，支持地址欄導航、搜索、Edge 風格標籤頁管理，並可直接打開本地 HTML 文件。
- 文件監聽：使用
chokidar監聽文件變化，實現文件樹與預覽內容的自動刷新。
安裝與啓用¶
安裝前請確保 DSH 版本爲 0.1.2-alpha.2 或更新版本。
安裝命令：
dsh plugin --profile web add @kaijia/dsh-sidebar
安裝完成後，重啓 dsh web 即可啓用插件。側欄默認會根據當前會話的工作區（cwd）生成文件樹。
典型用法¶
- 預覽文件：點擊文件樹中的文件，內容會在側欄下方顯示預覽區。
- 切換視圖：點擊側欄右側的 Activity Bar 圖標（文件、Git、瀏覽器），切換不同的功能視圖。
- 調整側欄：拖拽側欄的左側邊緣可以調整寬度（最小 280px）。
- 收起/展開：點擊當前視圖的圖標可以收起側欄，再次點擊或切換視圖可展開。
- 打開本地 HTML：在文件樹中選擇
.html文件，會自動跳轉到瀏覽器視圖並在新標籤頁中打開。
注意事項¶
- 工作區要求：當前會話必須帶有工作區目錄（cwd），否則側欄內容無法正常顯示。
- 編碼與格式：非 UTF-8 文本內容會回退爲二進制提示；圖片預覽有格式和大小限制。
- Git 依賴：Git 追蹤視圖需要本機安裝 Git 命令，且當前工作目錄必須在 Git 倉庫內。
- 兼容性：插件依賴 DSH 0.1.2-alpha.2 或更新版本，升級 DSH 後需注意佈局兼容性。
