前言¶

在 DSH（DeepSeek Harness）裏讓模型描述界面，常見做法是輸出 Markdown 或零散代碼塊：能讀，但不易在對話裏直接點選、試佈局，也難把一整頁帶走做演示或歸檔。若希望「規格寫在正文裏、瀏覽器裏立刻成頁、還能下成單文件 HTML」，需要把渲染邏輯接到宿主與前端半區，而不是每次手寫靜態頁。

下面介紹社區客戶端插件 dsh-fuse（維護者 K-W7，GitHub 倉庫 K-W7/dsh-fuse）：在回答裏寫 dsh-fuse 代碼圍欄，內容爲 JSON 規格；宿主把規格形狀注入系統提示，瀏覽器端渲染成真頁面，工具條可導出自包含 HTML、切換桌面/手機寬度。

這是什麼¶

dsh-fuse 當前版本 v2.0.6（MIT License），面向 DSH 0.2.x（>=0.2.0-rc.2 <0.3.0-0，README 記載 0.2.1-rc.3 桌面版實測），運行環境要求 Node ^22.19.0 或 >=24.0.0。分類爲客戶端插件：index.mjs 在宿主側註冊系統指令並懶注入 GET /api/fuse/config，lib/client.js 在瀏覽器側完成校驗、解析、渲染、導出與交互回傳。

一句話：對話裏一段 JSON → 對話內可點界面 → 可導出無外鏈的單頁 HTML。

核心功能¶

圍欄渲染與頁面類型¶

在正文裏使用語言標識爲 dsh-fuse 的代碼圍欄，圍欄內寫 JSON。根節點 type 必須是下列 10 種頁面類型之一：

login_form / signup_form / dashboard / settings_page / table_page / landing_page / profile_card / pricing_page / modal / form

組件樹放在 components 中；容器（page / card / grid / row / col / section / form 等）可遞歸嵌套。子節點字段 components 與 items 均可識別。

三態與規格約束¶

• 流式生成中：骨架屏。
• 規格非法：錯誤卡（原因 + 可摺疊的原始 JSON），整份拒絕渲染，不做靜默截斷或猜測降級。
• 正常：完整渲染。

規格預算（README 明確）：組件總數（含嵌套）≤ 60，嵌套深度 ≤ 8；超限同樣拒絕並顯示錯誤卡。組件僅認白名單 34 個：page card grid row col nav header footer section tabs hero text badge stat list table divider avatar chart steps loading skeleton progress alert timeline code form input select textarea checkbox radio button link。

可選根字段包括 title、theme（default / apple / dark，缺省 default）、context（{product, audience, task}）、actions（底部主操作條）。

主題令牌在 config/theme.json：三套主題各含 3 色 + 中性色，4/8 柵格，字號階梯 12/14/16/20/28/36/48。

導出、寬度與交互¶

• 導出 HTML：工具條「導出 HTML」下載自包含單頁，無外鏈、無運行時依賴。
• 寬度：桌面 / 手機（420px）兩檔；渲染寬度跟隨 composer，全屏模式不撐滿。
• 交互回傳：帶 action 的 button / input / select / textarea / checkbox / radio 觸發後，以 [fuse-action] 名字 回傳會話。

與 v1 的定位差異¶

v2 收斂爲「只渲染」：v1 中的走查器、撤銷快照、設置頁、代碼規範注入、預檢工具 validate_fuse_spec 等均已移除；每次請求注入的提示詞也更短。邊界上明確不做設置頁、走查器、預檢與平臺化能力。

安裝與啓用¶

安裝命令以 README 爲準（離線包方式，勿憑倉庫名自行拼接在線 add 命令）：

npm pack                     # 產出 dsh-fuse-2.0.6.tgz
dsh plugin --profile desktop add --offline file:<你的路徑>/dsh-fuse-2.0.6.tgz

注意：

• 修改插件 JS 後須重打包 + 重裝 + 重啓 DSH（ESM 模塊緩存，熱更不生效）。
• 卸載：dsh plugin --profile desktop remove dsh-fuse（會連同 profile 的 bundles 條目刪除；重裝後需確認包名仍在數組中）。

插件以當前 DSH 進程權限運行；安裝前請自行查看倉庫源碼與 MIT 許可證，確認符合你的環境與安全要求。

典型用法¶

示例規格（dashboard）¶

下面這段 JSON 與 README 中的運營看板示例一致；預覽圖 docs/preview.png 即由 tests/make-preview.mjs 用同一渲染器生成 HTML 後截圖，與對話內所見一致。

{"type":"dashboard","title":"今日運營","theme":"default","components":[
  {"type":"row","components":[
    {"type":"stat","value":"1,284","label":"今日新增"},
    {"type":"stat","value":"96.2%","label":"任務成功率"}
  ]},
  {"type":"card","title":"月度目標","components":[
    {"type":"progress","label":"完成度","value":68,"max":100}
  ]},
  {"type":"card","title":"近 5 日","components":[
    {"type":"chart","kind":"bars","data":[{"label":"一","value":12},{"label":"二","value":18}]}
  ]}
]}

使用步驟可以歸納爲：

1. 在 DSH 桌面 profile 按上文完成安裝並重啓。
2. 在對話中讓模型（或你自己）在正文裏輸出 ```dsh-fuse 圍欄，內容爲符合白名單與預算的 JSON。
3. 在對話內查看渲染結果，必要時切換手機寬度或點擊帶 action 的控件觀察 [fuse-action] 回傳。
4. 需要留存或外發時，用工具條「導出 HTML」得到單文件頁面。

倉庫內 npm test 運行 node tests/all.mjs（14 項測試，含瀏覽器白名單與 spec.mjs 字面同步）；CI 在 Node 22.x / 24.x 矩陣上執行安裝、測試與 npm pack --dry-run。

適用場景與注意¶

適合：需要在 Harness 對話裏快速原型化登錄頁、看板、表格頁、定價頁等；希望規格由模型生成且人能立刻點選驗證；要把界面快照成獨立 HTML 分享或歸檔的開發者。

不適合：依賴 v1 走查器、預檢工具或重度平臺化配置的場景——v2 已明確不包含這些能力。

生態說明：DSH 社區插件目錄（如 SkillHub 上的 dsh-fuse 條目）爲社區站點，與 DeepSeek / 幻方無官方從屬關係；插件列表與星標等信息以各站點當時展示爲準（GitHub 上該倉庫當前爲 1 star）。

結尾¶

dsh-fuse 把「JSON 規格 → 對話內可交互頁面 → 自包含 HTML 導出」收成單一客戶端插件，用白名單組件與硬預算約束換可預期的渲染結果。若你要在 DSH 0.2.x 桌面環境裏試同一套流程，可從目錄頁與倉庫 README 覈對版本與安裝步驟後開始。

• 目錄頁：https://www.skillhub.cn/plugins/K-W7/dsh-fuse
• GitHub：https://github.com/K-W7/dsh-fuse