前言¶
在 DSH 裏和模型協作時，工作區文件往往要在瀏覽器會話、本地編輯器與終端之間來回切換。會話側能打開文件，但若缺少完整的樹形瀏覽、保存、Git 與 shell，改代碼和提交仍要跳出當前界面。下面介紹的 DSH Web IDE（npm 包名 @zhaoyang10/dsh-web-ide，倉庫 fengzhaoy/dsh-web-ide）把 Monaco 編輯器、資源管理器、Git、交互式終端和全局搜索收進會話頁第三個 Tab，並與當前 session 的工作區綁定，減少上下文切換。
這是什麼¶
DSH Web IDE 由社區維護者 fengzhaoy 發佈，分類爲 客戶端 插件。它以 DSH bundle 形式分發：瀏覽器側加載 lib/client.js 註冊 會話 → 軌跡 → IDE 中的 IDE Tab；Host 側通過 ideTools 遠程命名空間提供文件寫入校驗、Git、ripgrep 搜索、node-pty 終端以及運行/調試進程管理。許可證爲 MIT（見倉庫 README）。
插件聲明的 DSH 環境要求爲 >=0.2.0-rc.2（見 package.json 的 dsh.env.minVersion）；README 另建議本機已安裝 DSH CLI 且 dsh 命令可用（文檔中寫「建議 0.1.6+」），並具備可正常啓動的 web profile（默認目錄 ~/.dsh/profiles/web）。
核心功能¶
資源管理器與編輯器¶
- 無限層級目錄樹，按擴展名匹配文件圖標；新建/重命名/刪除經 Host 工作區路徑校驗，避免越界訪問。
- 文件條目展示 Git 狀態（未跟蹤、修改、已暫存等）；超過 2MB 的文件分頁展示。
- Monaco Editor + Dark Modern 主題：語法高亮、行號、摺疊、多 Tab；
Ctrl/Cmd+S或狀態欄保存；外部改動導致衝突時可選擇覆蓋或重新加載。 - Markdown 支持編輯/預覽切換；Monaco Worker 內嵌，diff 高亮不依賴 CDN。
源代碼管理（Git）¶
更改列表支持逐文件或批量暫存/取消暫存/丟棄；雙欄 Diff、Graph 提交歷史、分支檢出/新建/刪除與發佈（git push -u origin）、Fetch/Sync。提交支持常規、amend、signoff、提交併推送/同步。AI 生成提交信息會複用當前會話模型撰寫提交說明。
終端與全局搜索¶
- 終端：node-pty 真實交互式終端，多實例與分屏；關閉面板不殺進程，重開可回放 scrollback。
- 搜索：基於 ripgrep 的全工作區檢索，支持正則、大小寫與 include glob（如
*.ts）；入口爲命令面板「查看: 顯示搜索」（資源管理器標題欄搜索圖標用於按名稱篩選文件樹）。
運行與調試¶
- 右鍵或命令面板 運行當前文件（多種語言單文件）；自動發現
package.json、Makefile、Cargo.toml等中的任務。 - 運行結果記錄退出碼與耗時；輸出中的錯誤行可解析進 Problems 面板。
- Node.js 調試通過 Host 以
--inspect-brk拉起進程，瀏覽器 直連 V8 Inspector WebSocket；支持斷點、單步、調用棧與調試控制台求值；可配合 Chromechrome://inspect附加同一目標。
平臺集成¶
- 註冊爲會話頁 IDE Tab，卸載 bundle 後 Tab 自動移除。
- 會話側打開的文件會同步到 IDE；IDE 瀏覽時側邊欄高亮聯動。
- 中/英界面跟隨 DSH 客戶端語言設置。
安裝與啓用¶
安裝分兩步：把包裝入 web profile 依賴，再把包名寫入 profile 的 dsh.profile.bundles，最後重啓 dsh web。啓動時包內 cordis.patch.yml 會把 ui-ide 註冊進 web 客戶端 roster，一般無需手改 roster。
前置：dsh 可用；dsh web 能正常啓動。
從 npm 安裝（推薦）
1、安裝到 web profile：
dsh plugin --profile web add @zhaoyang10/dsh-web-ide
2、編輯 ~/.dsh/profiles/web/package.json，在 dsh.profile.bundles 數組末尾追加：
"dsh": {
"profile": {
"bundles": [
"...其他 bundle...",
"@zhaoyang10/dsh-web-ide"
]
}
}
3、重啓：
dsh web
驗證：瀏覽器右側工具欄應出現 IDE 入口；進入後檢查文件樹、編輯器、終端與 Git 面板。
卸載：先從 bundles 移除包名，再執行 dsh plugin --profile web remove @zhaoyang10/dsh-web-ide，並重啓 dsh web。
本地開發調試可使用 link: 或 file: 路徑安裝；若不想列入 bundle，可在 profile 的 cordis.patch.yml 手動插入 ui-ide roster 條目（詳見倉庫 README「安裝到 DSH」）。
典型用法¶
界面入口：會話頁頂部 會話 → 軌跡 → IDE；IDE 工作區對應當前 session 的 cwd。
編輯與保存：在樹中打開文件，修改後 Tab 與狀態欄顯示未保存；保存快捷鍵或狀態欄按鈕寫入磁盤；關閉未保存 Tab 會確認是否保存。
Git：打開 Source Control，暫存變更後編寫提交信息，Ctrl/Cmd+Enter 提交；需要時可點 AI 生成提交信息；「更多提交操作」含 amend、signoff、提交併推送/同步等。
終端：在終端面板新建實例，需要時用 Ctrl+C 中斷；面板關閉後進程仍在，重開可看歷史輸出。
運行/調試：活動欄「運行和調試」查看任務與斷點；編輯器右鍵 運行當前文件；對 JS/TS 使用 調試當前文件 時，IDE 會註冊斷點後放行 --inspect-brk 進程。
全局搜索：命令面板打開搜索視圖，輸入關鍵詞回車，點擊結果跳轉到文件與行號。
會話聯動：在會話裏讓模型打開的文件會自動出現在 IDE；在 IDE 中瀏覽文件時，會話側同步高亮。
適用場景與注意¶
適合：希望在 DSH web 會話同一頁面內完成瀏覽、編輯、Git、終端與 ripgrep 搜索的智能體開發者；需要與會話模型聯動寫提交說明、又希望 Git 操作圖形化的用戶。
注意：
- 插件 Host 服務以當前 dsh 進程權限 讀寫工作區、執行 Git 與終端命令；安裝前請閱讀源碼與 MIT 許可證，確認符合你的安全策略。
- 保存走本插件
ideTools.writeFile，含工作區校驗與 sandbox 圍欄；併發保存可能與磁盤版本衝突，界面會提示而非靜默覆蓋。 - 調試目標按會話歸屬管理，插件卸載或頁面卸載會終止相關進程；斷點記錄在瀏覽器側按工作區持久化。
- 社區目錄頁 skillhub.cn 插件條目 與 GitHub 倉庫由維護者發佈，與 DeepSeek / 幻方無官方從屬關係；DSH 生態遵循「一切皆插件」，本文事實以倉庫 README 與包內聲明爲準。
結尾¶
DSH Web IDE 把 VSCode 風格工作臺嵌入會話頁 IDE Tab，用 Monaco、Git 全流程、真實終端與 ripgrep 搜索覆蓋日常改碼路徑，並用會話模型輔助生成提交信息。安裝命令與 bundle 配置見上文；更多架構說明（瀏覽器 bundle 與 Host ideTools 分工、調試 CDP 直連方式）見 GitHub README，插件索引見 SkillHub 目錄頁。
