前言¶
用 DSH（DeepSeek Harness）寫前端頁面時，驗證效果通常要走一套固定流程：讓模型輸出 HTML，複製到本地文件，再切到瀏覽器打開。頁面每改一輪，就要重複一次複製和切換。dsh-page-preview 把這一步收進了 DSH 的 web 界面：模型輸出的 HTML 代碼塊可以就地渲染成可交互預覽，本地工程或在線網址也能放進一個浮動小窗即時查看。下面介紹它的定位、功能、安裝步驟與典型用法。
這是什麼¶
dsh-page-preview 是一個 DSH web 插件，當前版本 1.0.0，由 watericetangcw 維護，採用 MIT 許可證。它解決的問題是：讓 DSH 直接在網頁裏把頁面「顯示」給你看，而不是隻給你一段代碼。能力分爲兩塊：
1、把 DSH 輸出的 html page-preview 代碼塊行內渲染成預覽面板；
2、提供一組工具，在界面上打開一個可拖動的浮動預覽小窗，查看本地頁面或網址。
插件依賴 @deepseek-ai/dsh-tools ^0.1.0-rc.6，要求 Node 版本 ^22.19.0 || >=24.0.0。
核心功能¶
行內預覽¶
讓 DSH 輸出一個 html page-preview 代碼塊。答案發送後，它會在消息下方渲染爲一個可交互預覽面板，支持全屏、收起、在新窗口打開，而代碼塊本身仍然是普通代碼塊，可以照常查看和複製。注意，行內預覽要求頁面裏的 CSS 與 JS 全部內聯。
浮動小窗¶
插件提供四個工具，覆蓋預覽的完整生命週期：
| 工具 | 作用 |
|---|---|
preview_register |
註冊並打開預覽，支持本地 HTML 文件、含 index.html 的目錄，或 http(s) 網址 |
preview_replace |
更換一個頁面繼續預覽 |
preview_refresh |
改完文件後一鍵刷新 |
preview_unregister |
解除註冊並關閉 |
小窗可拖動、可縮放、可全屏，內容按虛擬桌面寬度等比縮放。關閉小窗時，它會收縮爲右上角一枚帶綠色呼吸燈的膠囊，點擊即恢復。預覽按會話隔離，切換會話互不打擾。
安裝與啓用¶
DSH 的理念是「一切皆插件」，這個插件同樣是一條命令即可安裝：
dsh plugin --profile web add github:watericetangcw/dsh-page-preview
安裝完成後，先重啓 dsh web，再刷新一次瀏覽器頁面，插件即可使用。
典型用法¶
下面三個示例來自項目 README，安裝後可直接複製提示詞發給 DSH。
① 行內預覽——生成並展示一個頁面：
請編寫一個完整的靜態 HTML 頁面（CSS 與 JS 全部內聯），用 `html page-preview` 代碼塊展示出來，內容是一個即時時鐘卡片。
② 浮動小窗——預覽在線頁面：
請用 preview_register 預覽這個網頁：https://watericetangcw.github.io/dsh-page-preview/hello-world
③ 浮動小窗——預覽本地工程並刷新：
請用 preview_register 預覽 docs/demo-site 目錄，然後把頁面標題改成「dsh-page-preview 演示」，再調用 preview_refresh 讓我看到更新。
總結一下浮動小窗的工作流：先用 preview_register 註冊頁面，改動文件後調用 preview_refresh 查看更新，需要換頁面用 preview_replace，結束時 preview_unregister 關閉。
項目還提供了兩個在線演示頁面，安裝後可以用示例 ② 的方式直接預覽：
- https://watericetangcw.github.io/dsh-page-preview/hello-world
- https://watericetangcw.github.io/dsh-page-preview/demo-site/
適用場景與注意¶
適合在瀏覽器裏使用 DSH web、經常讓模型生成或修改靜態頁面的開發者；也適合邊改本地 HTML 工程邊看效果的場景。
使用時注意兩點：
1、行內預覽要求 CSS 與 JS 全部內聯；
2、預覽按會話隔離，切換會話互不打擾。
安全方面需要說明：與所有 DSH 插件一樣，插件以當前 dsh 進程的權限運行。安裝前建議先閱讀項目源碼並確認許可證（本項目爲 MIT），再決定是否啓用。
小結¶
dsh-page-preview 把「生成頁面 → 複製 → 打開瀏覽器」壓縮成了 DSH 界面內的行內預覽與浮動小窗，改完即刷，會話之間互不影響。如果你常在 DSH 裏寫頁面，可以裝上試試。
- 倉庫：https://github.com/watericetangcw/dsh-page-preview
- 社區目錄頁：https://www.skillhub.cn/plugins/watericetangcw/dsh-page-preview
其中目錄爲社區維護的獨立站點，與 DeepSeek / 幻方沒有官方從屬關係。
