前言¶

DeepSeek Harness（DSH）Web 版通過插件擴展界面與交互。對經常和 AI 一起改代碼的開發者來說，實際工作裏常見的問題不只是“能不能生成代碼”，而是如何快速查看工作區裏的 Markdown、代碼、圖片、HTML，運行本地項目並查看日誌，再把相關上下文交回對話。

dsh-web-preview-panel 針對這些動作做了一塊側邊面板：本地靜態託管、項目運行、元素標記批註、鏈接點擊接管、對話框直接拖入文件，以及 Markdown/代碼/圖片預覽。

這是什麼¶

這是一個用於 DSH Web 的插件，package.json 中 name 字段爲 dsh-web-preview-panel，倉庫地址爲 https://github.com/zoumutou/dsh-web-preview。

它把當前會話所屬工作區裏的靜態資源通過 DSH 自身的 HTTP 服務託管，並在對話界面右側打開預覽面板。許可證爲 MIT。

核心功能¶

側邊預覽¶

點擊對話右上角的 ▶ 按鈕，可打開右側玻璃卡片式預覽面板。

• 每個會話有獨立狀態。
• 地址欄會即時同步。
• 面板寬度可拖動，順序爲“擠壓對話 → 400px 封頂 → 覆蓋模式”。

本地文件預覽¶

工作區靜態文件通過 Harness 自身的 HTTP 服務託管，路徑形如：

/__dsh-preview/<sessionId>/...

支持：

• Markdown 渲染
• 代碼帶行號
• 圖片直顯
• HTML 原樣顯示

項目運行¶

插件可自動檢測以下項目類型：

• Cargo
• package.json
• go.mod
• Python 項目

支持運行與停止、日誌即時滾動。運行後如果能識別到 localhost:PORT，可加載預覽；也可以把日誌發給 AI 輔助診斷。

元素標記與批註¶

在標記模式下，可以：

• 懸停高亮
• 點擊選取元素
• 顯示批註氣泡
• 一鍵發送到對話

選擇器或 HTML 快照會自動剝離內部標記類。

對話框直接拖入文件¶

把文件拖入對話框後，文件會保存到工作區：

.dsh-drops/

然後以路徑引用加入草稿。

• 圖片單獨拖入時，仍走 DSH 原生圖片附件軌。
• 混合拖入時，圖片也會保存爲文件引用。
• 上傳上限爲 64 MB。

上傳接口爲：

POST /__dsh-preview/upload

請求頭包含：

• X-Dsh-Sid
• X-File-Name
• X-File-Size
• X-File-Type

鏈接點擊接管¶

對話中的以下內容都可以在側邊打開：

• http(s) 鏈接
• 相對/絕對文件路徑
• 純文本路徑

路徑支持 CJK/中文文件名。按住 Cmd 或 Ctrl 再點擊時，保留瀏覽器默認行爲。

主題跟隨與會話隔離¶

面板 UI、輸入區氣泡、代碼/Markdown/文件缺失預覽頁，以及標記/批註浮層會跟隨 DSH 的白天/夜間主題，切換即時生效，默認回退夜間。

每個會話獨立以下狀態：

• 預覽狀態
• 根目錄，默認當前會話所屬工作區
• 運行進程

安裝與啓用¶

要求 DSH Web 版。

先在 profile 目錄（如 ~/.dsh/profiles/web）執行安裝：

npm install dsh-web-preview-panel

然後在 cordis.patch.yml 中掛載插件：

- insert:
    - name: dsh-web-preview-panel

最後重啓：

dsh web

經過上面的步驟後，插件即可在 DSH Web 中啓用。

package.json 中還聲明瞭以下依賴與客戶端信息：

• @deepseek-ai/cordis: ^4.0.1
• react: ^18.2.0
• dsh.client.inject:
• @deepseek-ai/dsh-client-runtime
• @deepseek-ai/dsh-client-connection
• @deepseek-ai/dsh-client-ui-slots
• @deepseek-ai/dsh-client-locale
• dsh.client.platform: web

如果本地構建，可以執行：

npm run build

產出：

• lib/index.js
• lib/client.js

典型用法¶

下面是從安裝到日常使用的常見路徑：

1. 在 profile 目錄執行：

   npm install dsh-web-preview-panel

2. 在 cordis.patch.yml 中掛載：

   - insert:
       - name: dsh-web-preview-panel

3. 重啓：

   dsh web

4. 在對話右上角點擊 ▶ 按鈕，打開右側預覽面板。
5. 在側邊預覽中查看 Markdown、代碼、圖片、HTML。
6. 運行項目時，插件自動識別 localhost:PORT 並加載預覽。
7. 把文件拖入對話框，文件會保存到工作區 .dsh-drops/，並以路徑引用加入草稿。
8. 在對話中點擊鏈接、相對/絕對文件路徑或純文本路徑，在側邊打開。
9. 在標記模式下選取元素、寫批註，並把結果發送到對話。
10. 將項目日誌發給 AI，用於輔助診斷。

適用場景與注意¶

適合使用 DSH Web，並希望把以下動作集中到同一個側邊面板中的開發者：

• 查看工作區裏的 Markdown、代碼、圖片、HTML
• 運行本地項目並查看日誌
• 標記頁面元素並把上下文交給 AI
• 把文件直接拖入對話框
• 在對話與預覽之間保持會話隔離

需要注意：

• 該插件以當前 DSH 進程權限運行。
• 它會處理工作區靜態文件、運行本地項目、接收拖入文件。
• 安裝前應檢查源碼與許可證。
• 拖入文件上限爲 64 MB。
• 許可證爲 MIT。

結尾¶

dsh-web-preview-panel 的價值在於把本地文件預覽、項目運行、元素批註、文件拖入和鏈接接管集中到 DSH 的側邊面板中，適合需要在對話、工作區和本地項目之間頻繁切換的場景。

倉庫地址：https://github.com/zoumutou/dsh-web-preview