前言¶
DeepSeek Harness（DSH）把智能體能力拆成可插拔的插件，對話、工具、界面都可以按需擴展。但在默認體驗裏，模型回答大多還是純文字——表格要自己在腦子裏排版，圖表只能看 ASCII，點按鈕也沒法真的觸發下一步。
如果你希望「問一句、答一段、旁邊直接長出可排序的表格、可拖動的函數圖、能點能填的表單」，社區插件 dsh-genui 就是專門幹這件事的。它由 omdsh-dev 維護，在 SkillHub 插件庫 歸類爲客戶端插件，GitHub 倉庫約 326 stars（MIT 許可證）。需要說明的是：SkillHub 與 DeepSeek / 幻方並無官方從屬關係，只是社區整理的 DSH 插件目錄；DSH 本身則遵循「一切皆插件」的擴展理念。
這是什麼¶
dsh-genui 是一套面向 DeepSeek Harness 的 GenUI（生成式界面） 方案。模型在回覆裏輸出 dsh-ui 圍欄（fence），瀏覽器端渲染器把其中的 JSON 描述轉成內聯、可交互的 UI 組件——佈局、統計卡、表格、圖表、表單、測驗、Mermaid 流程圖、3D 場景等，都直接嵌在助手回答裏，文字說明不必消失。
這個倉庫一次交付三樣東西：
- 圍欄教學宿主插件（host plugin）：讓模型學會寫
dsh-ui規範； - 瀏覽器渲染器（client half）：在 Web 界面裏把圍欄變成真實組件；
- genui skill：可複製到
~/.dsh/skills/genui/，幫助模型更穩定地輸出合規 JSON。
當前 npm 包名爲 @changfenhuang/dsh-genui（v0.9.2 起由舊名 @omdsh-dev/dsh-genui 更名）。
核心功能與亮點¶
回答即界面¶
組件嵌在助手回覆中，支持流式渲染——模型寫到哪、界面就出到哪，不必等整段回答結束。裝插件前你看到的是代碼塊；裝上之後同一段 JSON 會變成統計卡、趨勢圖或排序表格。
30+ 白名單組件¶
官方文檔列出的能力覆蓋數據展示與交互兩大方向：
- 數據類：
stat統計卡、table可排序表格、chart/echart（ECharts 集成，引擎約 1 MB 按需懶加載）、progress進度條； - 探索類：
plot函數圖，參數滑塊拖動後本地即時重繪； - 反饋類：
quiz本地判題與解析，帶action時答案可回傳模型； - 佈局與結構：卡片、標籤頁、摺疊面板、文件樹、時間線、diff 等；
- 富媒體：瀏覽器可訪問的 http(s) 音視頻內嵌播放；
- 圖形：Mermaid 流程圖、Three.js 3D 場景（均按需加載，不拖慢啓動）。
所有組件走白名單規格守衛：模型無法塞入任意 HTML 或腳本，函數表達式經獨立解析器處理，不使用 eval。
雙通道渲染，無需改宿主源碼¶
插件自帶兩套渲染通道，宿主激活瀏覽器模塊後自動選擇：
- Registry 通道：新版 dsh 提供
fence-registry擴展點時，圍欄接入宿主流式渲染管線； - DOM 通道：原版 DSH 或舊構建沒有該擴展點時，插件觀察會話 DOM 自行掛載，併兼容多種代碼塊表面。
兩條通道下組件行爲、交互與持久化一致。成功激活後，瀏覽器控制檯會打印 [genui] client active; fence-channel=registry|dom。
交互事件迴環¶
按鈕、開關、輸入框、下拉、單選、測驗等組件可攜帶 action 字段。用戶點擊或提交後，事件回傳給模型，由模型更新下一段 UI，形成閉環。同名 action 有 300ms 尾沿防抖，避免連點刷屏。
此外還有會話面板（/panel 命令或 panel: true）：在輸入框上方提供可拖拽調高的常駐 dock，適合放監控看板、多標籤工作區。
本地優先與安全邊界¶
- 判卷、展開摺疊、表格排序等能在本地完成的操作即時完成，不必多一輪模型調用；
- 用戶輸入按「會話 + 內容指紋」持久化，刷新後可恢復（LRU 上限 200 塊）；
- 禁止索取密碼、API Key 等祕密，密碼框即使出現也不持久化、不進表單收集；
- 不帶
action的按鈕渲染爲禁用態，避免「看着能點、點了沒反應」的假交互。
安裝與啓用¶
前置條件¶
- 本機已安裝 dsh（開源版任意構建均可）；
pnpm在 PATH 上——dsh plugin命令依賴它。若未安裝，可執行corepack enable（或npm i -g pnpm），然後新開終端確認pnpm -v有輸出。
安裝命令¶
在 DSH 中安裝並激活（任選其一）：
# npm 公開包（無需 npm 賬號）
dsh plugin --profile web add @changfenhuang/dsh-genui
# 從 GitHub 公開源碼安裝
dsh plugin --profile web add git+https://github.com/omdsh-dev/dsh-genui.git
若你曾在 v0.9.2 之前裝過舊包名，需先遷移：
dsh plugin --profile web remove @omdsh-dev/dsh-genui
dsh plugin --profile web add @changfenhuang/dsh-genui
也可以 clone 後跑一鍵腳本：
git clone https://github.com/omdsh-dev/dsh-genui.git
cd dsh-genui
./scripts/install.sh
注意：不要用
link:指向剛 clone、尚未pnpm install的目錄——link:不會自動安裝 mermaid / three / react 等依賴，渲染器會掛。本地開發迭代應先pnpm install，再dsh plugin --profile web add link:$PWD。
安裝完成後，重啓 dsh web 並對瀏覽器硬刷新，在新會話中驗證。
典型用法示例¶
60 秒冒煙測試¶
在新會話裏輸入：
用 dsh-ui 畫一個帶可排序服務表的統計看板。
若安裝成功，回答會原地變成儀表盤，而不是停留在代碼塊。打開瀏覽器控制檯，應看到 [genui] client active; fence-channel=registry|dom。
模型輸出的圍欄長什麼樣¶
下面是一段官方 README 中的示例（你不需要手寫，模型會生成）：
{"title":"訂單概覽","items":[
{"type":"stat","label":"總收入","value":"¥128,430","delta":"+12.4%"},
{"type":"stat","label":"訂單數","value":"1,024","delta":"-3.1%"}
]}
界面上會出現兩張統計卡片。若要柱狀圖，可讓模型輸出帶 echart 節點的圍欄，例如 preset: "bar" 加 data 數組。
能力地圖速查¶
| 想試什麼 | 怎麼說 | 預期效果 |
|---|---|---|
| 數據看板 | 做訂單或服務監控面板 | stat、table、chart 直接出現在回覆裏 |
| 函數探索 | 用 plot 畫帶參數的曲線 |
拖滑塊本地重繪，不必等模型 |
| 小測驗 | 出一道選擇題 | 本地判題 + 解析，可選 action 回傳 |
| 常駐工作區 | /panel 或要求 panel: true |
輸入框上方出現可調整高度的 dock |
組件 JSON 完整語法見倉庫中的 SKILL.md。
適用場景與注意事項¶
適合誰用：
- 經常在 DSH Web 界面裏做數據分析、運維監控、教學演示的開發者；
- 希望模型「邊講邊畫界面」，而不是反覆複製 Markdown 表格的用戶；
- 需要按鈕、表單把用戶操作回傳給模型、驅動下一輪推理的智能體場景。
使用前請注意：
- 插件以當前 dsh 進程權限運行。安裝前請閱讀 GitHub 源碼 與 MIT 許可證，確認可接受其行爲。
- 若圍欄仍顯示爲代碼塊，先查控制檯是否有
[genui] client active日誌；沒有則說明客戶端未真正激活，需覈對包名與 profile 配置。 - mermaid、three、echarts 首次使用時會按需加載插件自帶資產路由上的 JS，若加載失敗可嘗試卸掉重裝插件並更新 dsh。
- 不裝插件時，
dsh-ui圍欄只是普通代碼塊，不會報錯，也不污染會話——屬於「零打擾」設計。
結尾¶
如果你厭倦了「滿屏文字、圖表靠想象」，dsh-genui 提供了一條務實路徑：模型繼續用 JSON 描述界面，DSH 在對話流裏把它變成可點、可拖、可回傳的組件。社區目錄頁：https://www.skillhub.cn/plugins/omdsh-dev/dsh-genui；源碼與演示：https://github.com/omdsh-dev/dsh-genui；在線產品站：https://omdsh-dev.github.io/dsh-genui/。
