企业官网建设流程全解析

用过 AI 聊天的人都熟悉那种「只有文字」的回答：一段数据、一堆表格、几行代码挤在一起，想筛选、想调参、想追问都得重新发一条消息。dsh-genui把这套体验整个换掉了——它是为 DeepSeek Harness 打造的交互式生成式 UI 引擎，让模型在回答正文里直接长出可排序的表格、能拖滑块的函数图、即时判卷的测验和常驻工作台，边流式输出边渲染。本文带你完整看懂它是什么、怎么装、为什么值得用。

一、先搞清楚：什么是「生成式 UI」？

传统对话里，AI 只能「说」，不能说「画」。你想看趋势，它只能给你一串数字；你想改个参数看效果，得再问一遍。生成式 UI（Generative UI）的思路是让模型在回答的正文中间，顺手输出一段带dsh-ui标记的 JSON「围栏」，渲染器把它画成真实的交互组件——文字在前后照常流动，组件就是回答的一部分。

dsh-genui同时交付了三层：

关键点：组件是回答，不是工具调用。没有这个插件时，围栏会优雅降级成普通 Markdown 代码块，绝不破坏会话历史。

二、装之前 vs 装之后：体验差在哪

同样一句「这个月订单表现如何？」，两种回答的差别是「可读」和「可操作」的距离。

下面是一张真实渲染出来的监控面板：回答本身就是仪表盘，主表明细的筛选、排序、钻取全部在本地完成，无需再次请求模型。

三、60 秒上手：一键安装 dsh-genui 插件

安装前只需确认两件事：DSH 版本为^0.2.0-rc.1 || ^0.2.1-rc.1，且pnpm在 PATH 中（没有就corepack enable或npm i -g pnpm）。

然后在终端执行一条命令，依赖全自动拉取：

# 安装并激活到 DSH web profile（公开包，无需登录 npm） dsh plugin --profile web add @changfenhuang/dsh-genui

验证三步：

1. 重启 DSH web 服务，浏览器硬刷新（Cmd + Shift + R/Ctrl + F5）。
2. 新开一个会话，发送：用 dsh-ui 画一个带可排序服务表的统计看板。
3. 打开控制台，看到[genui] client active; fence-channel=dom即代表客户端已激活。

⚠️避坑提醒：npm 上有个同名但无 Scope 的dsh-genui（别人基于 Vue 做的，不兼容）。认准带前缀的@changfenhuang/dsh-genui，否则会因 peer 依赖冲突装不上。

四、边流边渲染：回答没打完，界面已经在动

这是 dsh-genui 最「反直觉」也最惊艳的能力——组件跟随 Token 流式吐出，边生成边挂载，不用等整条回答结束。围栏一闭合就立即渲染，所以你能看着它一层层「长」出来。

配合函数图plot，这种即时性被放大到极致：

plot画的是数学曲线，参数会渲染成实时滑块。拖动滑块时曲线在浏览器端毫秒级重绘（Y 轴锁定、只变曲线不变数轴），还支持animateTo自动循环动画——全程不请求一次模型。SVG 还能拖拽平移、滚轮缩放，表达式支持三角、对数、幂运算等一整套白名单函数。

五、30+ 组件生态：从指标卡到 3D 场景

dsh-genui的组件全部受严格白名单约束，兼顾表现力与安全性。按用途大致分五族：

• 布局：textrowcolgridcardhero（封面块）dividercarousel（横向轮播）
• 展示：stattableprogresslisttimelinefile-treecalloutdiffjsonimageimage-groupaudiovideo……
• 图表：chart（轻量 bars/line/donut）、plot（函数图）、echart（ECharts 全功能，含雷达/仪表/漏斗/桑基/词云）、diagram（编辑级架构图）
• 交互：buttoninputselectcheckboxradioslidertabsaccordionsubmitquiz
• 高级：mermaidsvgscene3d（3D WebGL）、icon（内置 749 个图标）、blocks（色块图解）

先看一张典型排版：摘要区是带 sparkline 的指标卡（stat）+ 环形进度（progress），数据区是表格与清单——全部由模型声明式编排，深浅主题自动跟随。

再来看「重型」能力：echart的词云、svg的独立图片预览、diagram的架构图都能按需渲染。像 ECharts、Mermaid、Three.js 这类约 1MB 的引擎只在首次用到时才异步加载，没画图的会话绝不拖慢。

📌 组件完整字段、内容类型 → 组件映射表、以及六类「编排范式」，都写在 SKILL.md 里；carousel/image-group的用法见 docs/gallery.md。

六、本地优先：滑块、排序、判卷，全都 0 往返

dsh-genui 的铁律是LOCAL-FIRST：前端能独立完成的状态变化——表格排序、过滤、展开收起、标签切换、滑块重绘、测验判题——一律在浏览器本地即时完成，绝不进行不必要的模型往返。

这带来两个实打实的体验：

• 即时判卷：quiz点选即判题、展示解析、可重试；多题卷子用submit统一交卷，groups控制必填项，分数当场出现在 UI 里，不用等模型。
• 状态持久化：表单输入、单选多选、测验进度按「会话 + 内容指纹」自动存进 LRU 缓存（200 块），刷新页面、重开会话，状态原样恢复。

只有那些必须模型参与的事（生成新内容、执行工具、下一步建议）才会带上action回传。

七、Action 事件闭环：点一下，模型接着干

这是「生成式 UI」和「普通前端」的本质区别：UI 能把动作喂回给模型。

• 带action字段的按钮，点击即组装成结构化事件[genui-action]回传大模型，触发下一轮推理；
• 诚实交互设计：没声明action的按钮自动渲染为禁用态，杜绝「看着能点、点了没反应」的假交互；
• 智能防抖：离散点击立即发送，连续滑块拖动走尾沿防抖，只回传最终停顿值，不刷屏。

整条链路是：用户点按钮 → 渲染器派发 payload → 宿主回传给模型 → 模型响应或原地更新面板。渲染器核心交互逻辑见 src/client/GenuiBlock.tsx。

八、常驻工作台：模板中心 + 探索成就

除了正文内联，dsh-genui 还支持一个常驻 Dock 面板——通过/panel或panel: true把 UI 固化在输入框上方，可拖拽边框调高，支持append: true增量追加标签页。面板默认折叠成一行，展开后正文依旧可滚动。

面板顶部有两个惊喜：

① 模板中心：11 类典型场景模板（项目仪表盘、方案对比、五步上手、随机测验、趋势状图……）分七类陈列，点「试一试」就把指令插入输入框，让模型一键生成对应界面。

② 探索成就：内置 12 项本地趣味成就，按渲染围栏数、出现面板的会话数、组件交互次数解锁，纯计数、绝不读取消息内容，本地保存跨会话不丢。

九、安全与自愈：白名单 + 沙箱 + 同回合纠错

「让模型输出 UI」天然有安全顾虑，dsh-genui 用三层防线兜住：

1. 白名单沙箱：只认白名单 JSON 组件，杜绝脚本注入与eval；严禁索取 / 收集密码、API Key 等任何秘密，密码类输入强制打码且不持久化。
2. 同回合自修（Fence Steer Repair）：围栏格式有缺陷时，插件在同一回合内把精确节点诊断喂回模型，让它自主纠正重发（可用fenceFeedback: false关闭）。
3. 节点级降级：单个异常节点被静默丢弃，同级正常组件照常渲染，绝不因一个错点拖垮整屏；Mermaid 常见语法缺陷还会自动修复重试。

校验与自愈逻辑集中在 src/client/guard.ts，validate_dsh_ui工具可让模型在发围栏前先自检。

十、深入架构：一次渲染到底发生了什么

把流程串起来看，dsh-genui 的运行时是这样运转的：

1. 模型流式吐出 Markdown 正文 +dsh-ui围栏；
2. 宿主 DOM 捕获围栏节点，做白名单结构规范化；
3. 需要重型引擎时，通过插件自带的静态路由按需拉取 ECharts / Mermaid / Three；
4. 渲染器原地挂载独立 React 组件树，实时流式上屏；
5. 本地交互（排序 / 滑块 / 判卷）前端秒回；
6. 触发action时回传结构化事件，驱动模型进入下一轮。

插件如何把自己「插进」宿主系统（系统提示、工具、技能、静态路由），完整实现在 src/plugin/index.ts；30+ 组件的渲染族分布在 src/client/blocks/ 目录。想自己跑起来做联调，可参考 README.zh-CN.md 里的 Link 模式与 E2E 验证命令。

结语

dsh-genui 做的其实只有一件事：把 AI 回答从「能读」升级到「能操作」。流式渲染、本地优先、事件闭环、白名单沙箱这四块拼图，让交互式生成式 UI 不再是概念 demo，而是能装进你聊天里、随手就能用的日常工具。

如果你也受够了「问一句、等一张、想改再问一遍」，不妨花 60 秒装上它——下一句回答里，界面会自己动给你看。