前言¶
DSH 的定位是「一切皆插件」，對話、工具和界面都可以由插件擴展。但在標準對話裏，模型給出的通常是一段文本；當你想讓答案包含圖表、卡片或可交互組件時，純文本流並不直接滿足需求。
dsh-openui-studio 就是針對這個問題的插件。它由 zouyao-andy 維護，客戶端分類，目錄頁顯示 0 星，npm 版本 0.1.2。它的思路是在普通 DSH 對話里加入一個按需觸發的 /openui 命令：由當前會話選定的模型生成 OpenUI Lang，經過官方 OpenUI 聊天庫校驗後，用官方 OpenUI Renderer 渲染在對話裏。會話、推理、歷史、工具記錄和輸入框仍由 DSH 負責，插件不另起一套界面。
核心功能¶
下面介紹插件實際提供的能力，均來自倉庫 README 與 package.json。
- 按需生成：只有顯式出現
/openui請求的那一輪才啓用 OpenUI 生成，普通消息仍走 DSH 正常流程。附件受支持，只帶附件的/openui請求也會被接受。 - 生成與校驗：agent 帶着會話上下文調用
openui_generate。結果先經官方 OpenUI 聊天庫校驗，合法結果作爲 DSH 工具結果保存並顯示在主對話。首次校驗失敗時插件做一次修復調用；仍失敗則 DSH 顯示工具錯誤，不保存半成品界面。 - 官方渲染：渲染使用官方 OpenUI Renderer 和樣式表，插件不添加自己的對話數據庫、側欄、輸入框或 DSH 模式。
- 結果複用：已保存的結果在重新打開對話時直接渲染，不需要再觸發一次模型調用。
- 失敗可重試：模型沒有產出可用文本時，工具錯誤會報出流的結束原因、分塊數量和原始文本長度，但不記錄模型內容，也不會在本輪
/openui裏自動重試。 - 按鈕不自動發送：OpenUI 答案裏的按鈕只把建議問題填入 DSH 輸入框並聚焦，不會自動發送消息。
逐層重繪與回放¶
新答案使用 Swarm Rebuild 引擎逐層重建已渲染的 OpenUI DOM：光標畫框、輸入文字、放置媒體、複製重複元素、調整尺寸，並使用對齊參考線。回放會在對話裏滾動經過未完成的工作，再回到實時 OpenUI 答案；視口跟隨活動元素，密集段落放慢、稀疏段落加快。交接處等對話到達答案末尾，短暫交叉淡化到實時頁面。回放從可讀的答案內容開始，沒有純光標開場動畫。
已保存的答案會立即打開。點擊 OpenUI Studio 旁的 replay 圖標，可以在不重新生成的情況下重建一次；點擊畫布或按 Escape 回到可交互答案。系統請求減少動態效果、或新答案在 DSH 後臺完成時，回放會跳過。播放期間切換主題會回到實時答案。
動畫只對已渲染的 OpenUI DOM 做快照，不修改 OpenUI Lang 結果，也不向對話追加記錄。
渲染配置¶
渲染層通過編輯 render.js 自定義。可以在 DSH 裏點擊 OpenUI Studio 旁的配置圖標打開，也可以直接編輯文件。該文件導出一個 JavaScript 對象，配置項如下：
| 配置項 | 默認值 | 作用 |
|---|---|---|
showEditButton |
true |
顯示打開 render.js 的圖標。 |
toolbar |
['replay'] |
排序或隱藏 replay、debug、download-log。 |
animation.autoPlay |
true |
自動重繪新生成的答案，手動 replay 仍可用。 |
animation.followScroll |
true |
跟隨重建過程向下滾動；設爲 false 則立即顯示完整答案。 |
css |
內置樣式表 | 對 OpenUI 答案做作用域內的 CSS 覆蓋。 |
css 字符串裏包含 --openui-studio-font、--openui-studio-body-size、--openui-studio-body-leading、--openui-studio-heading-size 等排版變量。自定義選擇器要放在 .openui-answer 或 .openui-native 之下，避免影響 DSH 本體。這些設置只改變渲染和控件，不改變 LLM prompt 或已保存的答案。編輯 render.js 後需要完全退出並重新打開 DSH，不需要構建或再次調用模型；無效配置會回退到內置默認值並在答案標題旁報錯。
模型調用配置¶
模型調用參數單獨放在 cordis.patch.yml，字段爲 provider、model、maxTokens、temperature、reasoningEffort、maxQuestionChars、promptSuffix。
把 model 和生成類配置保留爲 null，就會沿用當前 DSH 會話的請求設置。會話沒有 token 預算時，插件讀取所選模型的 defaultMaxTokens；該值不存在時交給 DSH 決定。插件裏非 null 的值會覆蓋對應的會話設置。maxQuestionChars 限制發送給生成器的問題長度，promptSuffix 把環境相關說明追加到生成的官方 OpenUI prompt 之後。基礎 prompt 和校驗 schema 仍然來自已安裝的 OpenUI 包。修改插件配置後需要重啓 DSH。profile 的 cordis.patch.yml 在插件 bundle 之後應用，因此可以在不修改插件源碼的情況下覆蓋這些字段。界面控件跟隨 DSH 語言，答案文本跟隨問題語言。
安裝與啓用¶
官方安裝方式是在 DSH 的插件管理界面填寫插件標識，步驟如下。
- 裝好 DSH，並在 Settings → Models 裏選擇一個默認模型。
- 在 Settings → Plugins → Add plugin 中填入
dsh-openui-studio；也可以直接從 GitHub 倉庫安裝。 - 安裝或更新後完全退出並重新打開 DSH。
- 在 Standard 或 PTC 對話裏輸入命令，例如：
/openui Explain KV cache memory usage with a chart and a worked example
動畫診斷¶
排查回放問題時，可以開啓調試日誌。
- 在
render.js裏把toolbar設爲['replay', 'debug', 'download-log']，然後重啓 DSH。 - 點擊 OpenUI Studio 旁的蟲子圖標，回放同時記錄 block、cursor、animation、scroll、finish 事件。
- 回放結束後點擊下載圖標保存 JSON 日誌。
日誌包含時間和幾何信息，不包含答案文本，也不需要 DevTools Console。Debug 和下載按鈕默認隱藏。
本地開發¶
本地開發需要 Node.js 20 或更高版本。
git clone https://github.com/zouyao-andy/dsh-openui-studio.git
cd dsh-openui-studio
npm ci
npm run build
然後把這個目錄通過 DSH 插件管理器作爲本地 bundle 安裝。本地 checkout 與 npm 包使用同一個插件 ID，因此添加新安裝前要先移除舊的 @local/dsh-openui-studio。
npm test
npm run test:render
npm run build
源碼職責：src/host/index.js 處理命令、受門控的工具、模型調用和 OpenUI 校驗；src/client/chat-answer.js 把已保存結果放進 DSH 輪次；src/client/native-answer.js 使用官方 Renderer 和樣式表；src/client/swarm-reveal.js 把答案接到適配過的 Swarm Rebuild 引擎 src/client/vendor/swarm-rebuild.js。之前的繪製策略文件保留用於對比，但不再使用。scripts/gen.mjs 生成官方 OpenUI prompt 和 schema，scripts/build.mjs 生成 Host index.js 和 Client client.js bundle。修改插件源碼後需要重新構建並重啓 DSH。
適用場景與注意¶
適合已經在 DSH 裏做對話式工具或內容展示、希望答案自帶可交互界面的開發者，也適合想把 OpenUI Lang 生成納入現有會話、而不是另起界面的插件作者。
需要注意幾點：插件以當前 DSH 進程的權限運行，安裝前應先檢查源碼和許可證；生成結果依賴當前會話所選模型、輸出 token 預算和推理強度；沒有顯式 /openui 請求時不會改變普通對話流程；官方渲染器版本不支持早期自定義 Stack 答案。許可證是 MIT，繪製引擎改編自 Swarm Rebuild（commit 601f6e2），同樣是 MIT。
結尾¶
DSH 把界面渲染也交給插件，而 dsh-openui-studio 在保持會話歸 DSH 的前提下，把「生成 OpenUI 答案並按需重繪」放進了一次對話裏。目錄頁是獨立站點，與 DeepSeek / 幻方無官方從屬關係。
- 目錄頁：https://www.skillhub.cn/plugins/zouyao-andy/dsh-openui-studio
- 倉庫：https://github.com/zouyao-andy/dsh-openui-studio
