前言¶

DeepSeek Harness (DSH) 採用插件化架構，開發者可以通過插件擴展能力。在構建智能體時，模型通常以文本形式輸出結果。dsh-intelligent-ui 插件改變了這一模式，它讓模型直接生成可交互的界面，而非僅僅描述界面。

插件簡介¶

名稱：dsh-intelligent-ui
所有者：yunyv
定位：DSH 插件，實現模型編寫聲明式 DSL 界面。模型生成的回答不再只是關於儀表盤的描述，而是儀表盤本身。

核心能力¶

該插件具備以下能力：
1. 聲明式 DSL 界面編寫：模型編寫類似 {@body const...} 的 DIL 代碼來生成界面。
2. 無 DOM Worker 沙箱執行：代碼在無 DOM 的 Worker 環境中執行，確保安全性。
3. 宿主原生 DOM 渲染：渲染樹由宿主（主應用）使用原生 DOM 繪製，而非插件內部。
4. 支持原地改寫：模型可以在不丟失上下文的情況下修改界面。
5. 支持版本歷史：所有修改都會記錄版本歷史。
6. 跨重啓可 patch：界面狀態持久化，應用重啓後仍可保持修改。
7. 雙渲染路徑：支持 engine: 'dil'（編譯路徑）或 engine: 'html'（逃逸路徑）。

安裝與啓用¶

安裝該插件需要 DeepSeek Harness 版本 >= 0.2.1-rc.1。

1. CLI 安裝：
   在終端中執行以下命令：

    dsh plugin --profile <profile> add dsh-intelligent-ui

*注意：禁止通過鏈接源目錄安裝，否則會暴露 `node_modules` 並導致加載失敗。*

2. Electron 桌面端：
   如果使用 Electron 桌面 profile，請使用應用內的 Plugin Manager 進行安裝，CLI 會拒絕該 profile。

安裝完成後請重啓應用。

使用方法¶

使用該插件無需額外配置。模型在生成回答時，會根據上下文決定是否調用此工具。

1. 查看組件清單：
   在對話中輸入以下命令查看組件規則：

    skill genui

2. 掛載 Artifact：
   模型會在回答中插入 fenced block，使用 dsh-artifact 語言標記掛載界面：

```dsh-artifact
    artifact-id

3.  **DSL 語法示例**：
    模型編寫的界面代碼類似於以下 DIL 片段：
```dil
    {@body const [seats,setSeats] = DIL.useState(5)}
    {@body const [yearly,setYearly] = DIL.useState(false)}
    <box gap={4}>
      <slider label="Seats" value={seats} onChange={setSeats} min={1} max={50}/>
    </box>

工作原理與存儲¶

• 執行流程：模型編寫聲明式 DSL 文檔，DSH 在無 DOM Worker 沙箱中編譯並運行它，生成渲染樹，最終由宿主使用原生 DOM 渲染。
• 沙箱特性：沙箱是執行容器而非顯示容器。代碼在 Worker 中運行，不會直接接觸 DOM，但可以通過渲染樹影響宿主的界面。
• 數據持久化：所有 Artifact 數據存儲在 ~/.dsh/storages/dsh-intelligent-ui/ 目錄下。

注意事項¶

• 依賴版本：必須滿足 DSH 版本要求。
• 源碼鏈接限制：嚴禁通過 npm link 或符號鏈接的方式從源碼目錄安裝，這會導致依賴解析錯誤。
• 適用場景：適用於需要模型生成可交互工具、計算器或配置面板的場景。