前言¶

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 或符号链接的方式从源码目录安装，这会导致依赖解析错误。
• 适用场景：适用于需要模型生成可交互工具、计算器或配置面板的场景。