前言¶

在 DSH（DeepSeek Harness）里让模型描述界面，常见做法是输出 Markdown 或零散代码块：能读，但不易在对话里直接点选、试布局，也难把一整页带走做演示或归档。若希望「规格写在正文里、浏览器里立刻成页、还能下成单文件 HTML」，需要把渲染逻辑接到宿主与前端半区，而不是每次手写静态页。

下面介绍社区客户端插件 dsh-fuse（维护者 K-W7，GitHub 仓库 K-W7/dsh-fuse）：在回答里写 dsh-fuse 代码围栏，内容为 JSON 规格；宿主把规格形状注入系统提示，浏览器端渲染成真页面，工具条可导出自包含 HTML、切换桌面/手机宽度。

这是什么¶

dsh-fuse 当前版本 v2.0.6（MIT License），面向 DSH 0.2.x（>=0.2.0-rc.2 <0.3.0-0，README 记载 0.2.1-rc.3 桌面版实测），运行环境要求 Node ^22.19.0 或 >=24.0.0。分类为客户端插件：index.mjs 在宿主侧注册系统指令并懒注入 GET /api/fuse/config，lib/client.js 在浏览器侧完成校验、解析、渲染、导出与交互回传。

一句话：对话里一段 JSON → 对话内可点界面 → 可导出无外链的单页 HTML。

核心功能¶

围栏渲染与页面类型¶

在正文里使用语言标识为 dsh-fuse 的代码围栏，围栏内写 JSON。根节点 type 必须是下列 10 种页面类型之一：

login_form / signup_form / dashboard / settings_page / table_page / landing_page / profile_card / pricing_page / modal / form

组件树放在 components 中；容器（page / card / grid / row / col / section / form 等）可递归嵌套。子节点字段 components 与 items 均可识别。

三态与规格约束¶

• 流式生成中：骨架屏。
• 规格非法：错误卡（原因 + 可折叠的原始 JSON），整份拒绝渲染，不做静默截断或猜测降级。
• 正常：完整渲染。

规格预算（README 明确）：组件总数（含嵌套）≤ 60，嵌套深度 ≤ 8；超限同样拒绝并显示错误卡。组件仅认白名单 34 个：page card grid row col nav header footer section tabs hero text badge stat list table divider avatar chart steps loading skeleton progress alert timeline code form input select textarea checkbox radio button link。

可选根字段包括 title、theme（default / apple / dark，缺省 default）、context（{product, audience, task}）、actions（底部主操作条）。

主题令牌在 config/theme.json：三套主题各含 3 色 + 中性色，4/8 栅格，字号阶梯 12/14/16/20/28/36/48。

导出、宽度与交互¶

• 导出 HTML：工具条「导出 HTML」下载自包含单页，无外链、无运行时依赖。
• 宽度：桌面 / 手机（420px）两档；渲染宽度跟随 composer，全屏模式不撑满。
• 交互回传：带 action 的 button / input / select / textarea / checkbox / radio 触发后，以 [fuse-action] 名字 回传会话。

与 v1 的定位差异¶

v2 收敛为「只渲染」：v1 中的走查器、撤销快照、设置页、代码规范注入、预检工具 validate_fuse_spec 等均已移除；每次请求注入的提示词也更短。边界上明确不做设置页、走查器、预检与平台化能力。

安装与启用¶

安装命令以 README 为准（离线包方式，勿凭仓库名自行拼接在线 add 命令）：

npm pack                     # 产出 dsh-fuse-2.0.6.tgz
dsh plugin --profile desktop add --offline file:<你的路径>/dsh-fuse-2.0.6.tgz

注意：

• 修改插件 JS 后须重打包 + 重装 + 重启 DSH（ESM 模块缓存，热更不生效）。
• 卸载：dsh plugin --profile desktop remove dsh-fuse（会连同 profile 的 bundles 条目删除；重装后需确认包名仍在数组中）。

插件以当前 DSH 进程权限运行；安装前请自行查看仓库源码与 MIT 许可证，确认符合你的环境与安全要求。

典型用法¶

示例规格（dashboard）¶

下面这段 JSON 与 README 中的运营看板示例一致；预览图 docs/preview.png 即由 tests/make-preview.mjs 用同一渲染器生成 HTML 后截图，与对话内所见一致。

{"type":"dashboard","title":"今日运营","theme":"default","components":[
  {"type":"row","components":[
    {"type":"stat","value":"1,284","label":"今日新增"},
    {"type":"stat","value":"96.2%","label":"任务成功率"}
  ]},
  {"type":"card","title":"月度目标","components":[
    {"type":"progress","label":"完成度","value":68,"max":100}
  ]},
  {"type":"card","title":"近 5 日","components":[
    {"type":"chart","kind":"bars","data":[{"label":"一","value":12},{"label":"二","value":18}]}
  ]}
]}

使用步骤可以归纳为：

1. 在 DSH 桌面 profile 按上文完成安装并重启。
2. 在对话中让模型（或你自己）在正文里输出 ```dsh-fuse 围栏，内容为符合白名单与预算的 JSON。
3. 在对话内查看渲染结果，必要时切换手机宽度或点击带 action 的控件观察 [fuse-action] 回传。
4. 需要留存或外发时，用工具条「导出 HTML」得到单文件页面。

仓库内 npm test 运行 node tests/all.mjs（14 项测试，含浏览器白名单与 spec.mjs 字面同步）；CI 在 Node 22.x / 24.x 矩阵上执行安装、测试与 npm pack --dry-run。

适用场景与注意¶

适合：需要在 Harness 对话里快速原型化登录页、看板、表格页、定价页等；希望规格由模型生成且人能立刻点选验证；要把界面快照成独立 HTML 分享或归档的开发者。

不适合：依赖 v1 走查器、预检工具或重度平台化配置的场景——v2 已明确不包含这些能力。

生态说明：DSH 社区插件目录（如 SkillHub 上的 dsh-fuse 条目）为社区站点，与 DeepSeek / 幻方无官方从属关系；插件列表与星标等信息以各站点当时展示为准（GitHub 上该仓库当前为 1 star）。

结尾¶

dsh-fuse 把「JSON 规格 → 对话内可交互页面 → 自包含 HTML 导出」收成单一客户端插件，用白名单组件与硬预算约束换可预期的渲染结果。若你要在 DSH 0.2.x 桌面环境里试同一套流程，可从目录页与仓库 README 核对版本与安装步骤后开始。

• 目录页：https://www.skillhub.cn/plugins/K-W7/dsh-fuse
• GitHub：https://github.com/K-W7/dsh-fuse