前言¶

在 DeepSeek Harness 的 Web 端開發中，瀏覽和編輯對話工作區的文件通常需要切換到本地終端或外部編輯器。dsh-explorer-editor 插件在 Web 界面中引入了 VS Code 風格的文件管理體驗：左側側邊欄展示當前對話工作區的文件樹，中間列提供 Monaco 編輯器進行源碼編輯。

功能概覽¶

1. 側邊欄文件樹與主區域編輯
   側邊欄以樹形結構展示當前工作區的文件目錄。點擊文件後，中間列的“文件”視圖會加載並顯示該文件內容，支持 Monaco 編輯器的語法高亮。

2. Markdown 源碼與預覽切換
   對於 .md 文件，支持在源碼編輯模式和預覽模式間切換。工具欄提供切換按鈕，預覽模式基於 Markdown 渲染，支持標題、列表、代碼塊等 GFM 格式。

3. 主題設置與導入導出
   提供類似 VS Code 的主題設置面板。支持自定義背景色、文字色和字號（10-28px）。支持將主題導出爲 JSON 文件或從 JSON 文件導入，方便在不同環境間遷移配色。

4. 文件操作
   支持新建文件、新建目錄、重命名、刪除、剪切、複製、粘貼等操作。右鍵菜單提供完整的上下文操作。

5. 鍵盤導航與右鍵菜單
   文件樹支持方向鍵導航（上下移動、左右展開收起、Enter 打開）。右鍵菜單提供剪切、複製、重命名、刪除、複製路徑等選項。

6. 編碼自動識別
   文本文件優先按 UTF-8 讀取，遇到非法字符時自動回退至 GBK 或 GB2312，解決 Windows 下常見中文亂碼問題。保存後統一轉爲 UTF-8。

7. 會話恢復與實時刷新
   打開的文件標籤與未保存內容會持久化到瀏覽器本地存儲，刷新頁面後可恢復。目錄樹通過 SSE 推送實時刷新，監聽文件系統變更。

安裝與配置¶

插件使用 MIT 許可證，由 oneirictouch 維護。

Web 端安裝¶

# 在插件目錄內執行
cd /path/to/dsh-explorer-editor
dsh plugin --profile web add .

桌面端安裝¶

# 在插件目錄內執行
cd /path/to/dsh-explorer-editor
dsh plugin --profile desktop add .

安裝後桌面端需完全退出並重啓應用才能生效。

配置說明¶

在 cordis.patch.yml 中配置 root 作爲兜底根目錄，allowArbitraryRoot 用於限制安全邊界：

- insert:
    - id: dsh-explorer-editor
      name: 'dsh-explorer-editor'
      config:
        root: !!js process.cwd()   # 僅作爲兜底根目錄
        allowArbitraryRoot: true   # 是否允許 setRoot 越出 root

• root：無會話時的默認根目錄。
• setRoot：文件管理器打開時自動解析當前會話工作區並固定根目錄。
• allowArbitraryRoot：默認爲 true。設爲 false 可限制 setRoot 僅在 root 範圍內，防止越界讀取。

使用說明¶

1. 瀏覽與編輯
   點擊側邊欄文件樹中的文件，中間列即可進行編輯。使用 Ctrl+S 保存文件，修改內容會有 Dirty 標記。

2. Markdown 預覽
   打開 .md 文件，點擊工具欄“主題”按鈕旁的預覽/源碼切換按鈕，可切換至只讀渲染模式。

3. 主題管理
   點擊工具欄“主題”按鈕打開設置面板，選擇預設主題或自定義顏色，配置會自動保存。

4. 文件管理
   使用方向鍵在文件樹中移動，右鍵菜單進行剪切、複製、粘貼等操作。

注意事項¶

• Profile 分離：Web 端和桌面端使用獨立的 profile，插件不會自動共享。Web 端安裝的插件在桌面端不會顯示。
• 安全性：所有文件操作受“工作區邊界”約束，路徑一旦逃逸出當前固定的根即被拒絕。
• 依賴：編輯器核心爲 Monaco，若 CDN 不可達將降級爲純文本編輯器。

結語¶

dsh-explorer-editor 爲 DeepSeek Harness 提供了在 Web 端直接管理代碼文件的解決方案，配合 Monaco 編輯器和主題系統，能滿足從代碼瀏覽到詳細編輯的各種需求。

GitHub 倉庫 | 插件目錄