前言¶
在 DSH 对话里，模型常见输出是长段 Markdown：对比、图表、表格、分步说明往往挤在同一块文本里，读者要自己扫标题和列表，改一个数字也无法联动更新。也有人让模型直接写 HTML 或脚本，但那样难以校验、难以在会话日志里稳定复现，换主题或续聊时更容易失真。
beex-labs 维护的客户端插件 dsh-smart-ui（npm 包名 dsh-intelligent-ui，GitHub：beex-labs/dsh-smart-ui）走另一条路：模型只调用工具 ui_render，写出纯 JSON 的 UI Schema，由页面渲染成固定卡片或带状态的交互界面，不写 HTML/JSX/JavaScript。规格是明文 JSON，可随会话记录、fork 与 resume 保持不变。
这是什么¶
dsh-smart-ui 面向 DSH 的 Web 客户端，属于社区插件目录中的「客户端」分类。它在对话工具视图中接管 ui_render 的展示：Host 侧提供工具 schema 与提示片段，Client 侧用 React 与主题 token 渲染；图表与流程图通过 ECharts、Mermaid 的懒加载 chunk 绘制。
维护者：beex-labs。当前 GitHub 星标为 0；package.json 标明版本 1.0.0、许可证 MIT。
两套词汇：固定卡片与生成式 UI¶
固定卡片（单结构、无状态）¶
适合「一次回答、一种版面」，kind 选定后主要填数据字段：
kind |
用途概要 |
|---|---|
compare |
三项及以上在同一维度上对比 |
chart |
柱状/折线/饼图或环形图等序列 |
stats |
两到六个 headline 数字 |
progress |
单一比例（通过率、配额等） |
steps |
有序步骤列表 |
table |
行列数据表 |
diagram |
节点边图或原始 mermaid |
calculator |
用户可改数字的重算（如分账、小费） |
unit |
单位换算 |
note |
需要强调的短提示 |
生成式 UI（kind: "app" 与 playground）¶
app：交互工具、模拟器或仪表盘。用state、compute、tree（组件树：id、type、props、bind、on、children）和可选stream描述；组件类型来自约 71 类注册表（含图表别名、地图、quiz/flashcard/countdown等）。bind在安全的表达式语言上求值（无eval，固定函数表）；on支持set、toggle、copy、open、submit、call等动作，经 Action Router 只上报真实发生的效果。playground：可编辑的 JSON UI Schema，带校验与实时预览；source为 JSON 文本，故意允许不完整 schema 以便调试。
语义色调会解析为主题 token，固定卡片与 app 在浅色/深色下共用同一套规则。DSH 主题会把内容字号写入 --dsh-content-font-size（10–22px），整张卡片可按该变量缩放；宽表横向滚动，表体超过 15 行时在卡片内纵向滚动并固定表头。
运行架构（简述）¶
模型写出 plain JSON spec
↓
index.js Host：ui_render 工具、normalizeSpec、diagram 编译为 Mermaid 源写入日志
↓
engine.cjs 共享：注册表、安全表达式、validateApp、computeAll、流式协议
↓
client.js Client：固定卡片、app 运行时、REGISTRY、Playground、Mock Streaming
engine.cjs 与打包后的 client.engine.js 同源逻辑，Host 与 Client 校验与求值一致，避免两侧漂移。structured diagram 在 Host 编译，会话里保存的是实际绘制的图。
更细的字段说明见仓库内 docs/schema.md、docs/components.md、docs/architecture.md。
安装与启用¶
插件依赖 生成产物（client.engine.js、client.echarts.js、client.mermaid.js 等，仓库中 git-ignore）。未构建时图表会退化为纯文本摘要，app 也无法加载引擎。
在插件源码目录先构建：
pnpm install
node build-engine.mjs && node build-echarts.mjs && node build-mermaid.mjs
再把它加入 DSH Profile 依赖（本地 link: 或 GitHub URL 均可）。在 Profile 的 package.json 中示例：
{
"dependencies": { "dsh-intelligent-ui": "link:<absolute path>" },
"dsh": { "profile": { "bundles": ["dsh-intelligent-ui"] } }
}
在 Profile 的 cordis.patch.yml 中插入 bundle：
- insert:
- id: intelligent-ui
name: 'dsh-intelligent-ui'
然后在 Profile 目录安装：
cd "$DSH_PROFILE_DIR"
pnpm install --no-frozen-lockfile
说明：社区目录页为 beex-labs/dsh-smart-ui，安装步骤以 GitHub README 为准，不要凭仓库名拼接未在文档出现的 dsh plugin add 命令。
典型用法¶
- 在系统提示或工具说明中引导模型：需要结构化展示时调用
ui_render，payload 为符合 schema 的 JSON，不要输出 markup。 - 静态回答：选用上表中的
kind，例如销售对比用compare，趋势用chart（series、variant、unit），清单用table（columns、rows）。 - 可交互回答：
kind设为app，定义初始state、派生compute与tree；用户改控件后依赖同一state的 KPI、图表、表格一并更新。 - 学习与调试：仓库
demos/下有七个可运行的app规格（旅行规划、销售仪表盘、复利模拟、勾股定理讲解、AA 分账、地理问答、流式负载看板等）。可将文件内容包在{"spec": {"kind": "app", …}}中传给ui_render，或粘贴进playground的source字段预览。
calculator 示例形态（字段以 docs/schema.md 为准）：
{
"kind": "calculator",
"mode": "split",
"fields": [
{ "label": "总金额", "value": 100 },
{ "label": "人数", "value": 4, "min": 1 }
]
}
适用场景与注意¶
适合：需要在 DSH 对话里稳定呈现对比表、图表、流程图、计算器与单位换算；或需要小型仪表盘、表单、地图选点、测验卡片等「改一下就联动」的界面，又希望规格可存档、可审计。
注意：
- 插件在 当前 DSH 进程权限 下运行，安装前请自行审阅源码与 MIT 许可证，确认依赖（如
echarts、mermaid）可接受。 - 必须先完成
build-engine/build-echarts/build-mermaid，否则能力不完整。 app的call等动作是否连到真实后端，取决于你在 schema 与 Host 环境中的配置；仓库 demo 中部分call会明确提示未连接，勿误以为自带远端服务。- 社区目录 skillhub.cn 与 DeepSeek / 幻方无官方从属关系；DSH 生态强调「一切皆插件」，本文事实均来自上述 README 与
package.json。
结尾¶
dsh-smart-ui 把「模型写数据、客户端渲染」落到一条工具链：ui_render + JSON Schema，覆盖十种固定卡片与可组合的 app 运行时。若你正在做 DSH 智能体并想把回答变成可读的交互卡片，可从目录页了解概况，在 GitHub 按 README 构建并挂入 Profile。
- 目录页：https://www.skillhub.cn/plugins/beex-labs/dsh-smart-ui
- 源码与文档：https://github.com/beex-labs/dsh-smart-ui
