前言¶
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/。
