# @kyoukisu/dsh-rich-ui 中文文档

规范地址：https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/

版本：0\.6\.2
npm 元数据更新时间：2026-11-01T14:22:06.668Z
中文译文更新时间：2026-11-01T17:46:34.524Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40kyoukisu/dsh-rich-ui
原文对照：https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/?lang=original
项目主页：https://github.com/kyoukisu/dsh-rich-ui#readme
源码仓库：https://github.com/kyoukisu/dsh-rich-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：304 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=22\.19\.0
- 运行依赖：3 个
- 首次发布：2026-10-29T11:03:27.133Z
- 最新版本发布：2026-11-01T14:22:06.517Z
- 已发布版本数：33（近 12 个月 33 个）

## 中文简介

chatgpt风格丰富的答案在DeepSeek线束：实体面板，KPI卡，图表，表格，图层和本地控件。

## 安装

```sh
npm install @kyoukisu/dsh-rich-ui
```

也可以使用：`pnpm add @kyoukisu/dsh-rich-ui`、`yarn add @kyoukisu/dsh-rich-ui`、`bun add @kyoukisu/dsh-rich-ui`

## README

# 丰富的用户界面

**chatgpt风格丰富的答案在DeepSeek线束。**

带有详细面板、KPI卡、多系列图表、可排序表格、流程和分层架构图的实体集合，以及可在拖动时重新计算的计算器——在内部原生呈现 [DeepSeek利用](https://github.com/deepseek-ai/deepseek-harness).

[![stars](https://shieldcn.dev/github/kyoukisu/dsh-rich-ui/stars.svg?variant=branded&size=xs)](https://github.com/kyoukisu/dsh-rich-ui/stargazers) [![license](https://shieldcn.dev/github/kyoukisu/dsh-rich-ui/license.svg?variant=branded&size=xs)](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/LICENSE) [![last commit](https://shieldcn.dev/github/kyoukisu/dsh-rich-ui/last-commit.svg?variant=branded&size=xs)](https://github.com/kyoukisu/dsh-rich-ui/commits/main) ![DSH](https://shieldcn.dev/badge/DSH-0.2.x-1f6feb.svg?variant=branded&size=xs) [![npm](https://img.shields.io/npm/v/@kyoukisu/dsh-rich-ui?label=npm&color=cb3837)](https://www.npmjs.com/package/@kyoukisu/dsh-rich-ui)

[现场演示](https://rich-ui.beako.best/) · [安装](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/#readme-install) · [快速启动](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/#readme-quick-start) · [合同](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/prompt-rich-ui/prompt.md) · [设计说明](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/PARITY.md) · [安全](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/#readme-safety)

![A product listing rendered by the plugin: summary strip, real photos, prices and a green highlight badge](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/listing-desktop.png)

## 这是什么，为什么

模型可以描述比较，但Markdown的墙让读者做布局工作。这个插件为模型提供了一个小的声明性语言，用于结构携带答案的情况：并排选项，您想要检查的对象，阅读器将更改的数字。

渲染器是一个真正的React树，隐藏在一个严格的模式下。没有生成HTML，没有 `eval`，没有shell访问，也没有来自模型的页面级JavaScript。本地控件在浏览器中重新计算；只有当读者明确要求时，才会再次调用模型。

![Film collection reflowed beside an open detail panel with two posters, facts, cast and sources](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/films-desktop.png)  
_在实验室里，答案在打开的面板旁回流。在Harness中，相同的实体作为本地右列选项卡打开，因此对话缩小而不是被覆盖-参见 [集成说明](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/DSH-INTEGRATION.md)._

![Software shortlist with wide screenshots on the left, full descriptions and source links on the right, followed by a captioned screenshot gallery](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/apps-desktop.png)  
_`entity-list layout:"feature"` 给出了一个软件入围名单的广泛预览，整个描述和它的来源。在它的下方，一个带标题的图库每次显示一个截图。_

![Dashboard answer with three KPI cards, a two-series line chart, a sortable, filterable table with status pills and a vertical flow](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/dashboard-desktop.png)  
_指标，一个带有单位和悬停的两系列图表，一个带有状态药丸的可过滤表格和一个有序的流程-一个文档。_

![Layered architecture: HTTP handlers containing a connection pool with three connections, an arrow to PostgreSQL, and a Go code block with syntax colour](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/layers-desktop.png)  
_框中框：池保存连接，箭头显示与之对话的对象。代码块保留语言标签、语法颜色和副本。_

![A calculator with sliders that recompute the result locally](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/calculator-dark.png)  
_滑块在浏览器中重新计算数字；不再调用该模型。_

![The same dashboard on a 390 pixel phone: two-column KPI cards, all six chart month labels and a four-column table that fits](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/dashboard-mobile.png)  
_390像素：两列的KPI卡片，每个图表标签和一个仍然适合的表格。_

## 现场演示

**[rich-ui.beako.best](https://rich-ui.beako.best/)** -实验室条件下的真实渲染器，无需安装。场景：仪表板、电影、列表、计算器、配置器、技术故障和拒绝块诊断；添加 `&theme=dark` 暗黑主题。演示数据是说明性的。

## 安装

需要DeepSeek挽具 `0.2.x` 和节点 `22.19+`． 没有NixOS的改变，没有修补的挽具。

```sh
dsh plugin --profile web add @kyoukisu/dsh-rich-ui
systemctl --user restart deepseek-harness   # or restart however your Harness runs
```

从checkout -这是作者使用的循环：

```sh
git clone https://github.com/kyoukisu/dsh-rich-ui && cd dsh-rich-ui
npm ci && npm run build:plugin
dsh plugin --profile web add link:$PWD
```

未释放的提交: `dsh plugin --profile web add github:kyoukisu/dsh-rich-ui`.

插件将自己注册为一个bundle；委婉的说法是 `rich-ui`.

## 快速启动

在新的会话中，要求从结构中受益的东西：

```text
Compare three electric kettles by price, volume and features. Make it clickable.
```

回复会以一个界面的形式出现：一个摘要条，几行照片，最便宜的选项会以绿色高亮显示。打开一行显示事实，来源和相关项目，而不离开谈话。

值得尝试的事情： _“制作一个有三个滑块的预算计算器”_， _“用图表和表格显示本季度”_， _“创建一个带有制表符和条件警告的配置器”_.

## 它可以渲染什么

| 集团 | 节点 |
| --- | --- |
| 布局 | `stack`， `row`， `grid`， `card`， `divider`， `meta` |
| 文本 | `text` 与内联 `code`， **大胆的**、连结及 `[[entityId]]` 芯片; `callout` 带有可选标题； `code` 具有语法颜色，语言标签，行号和副本 |
| 对象 | `entity-ref`， `entity-list` 在紧凑型或 `layout:"feature"` 行，海报，广场或景观预览；实体详细信息停靠在原生的右列中，或者退回到页面内的抽屉中，带有一个两层的图片库，或者一次一个带字幕的截图，再加上cast |
| 数据 | `stat` (KPI卡), `progress`， `status`， `table` （可排序，可过滤，状态和进度列，溢出时滚动提示）， `chart` （条形/线条/区域/甜甜圈/散点，1-6系列，单位，工具提示）， `computed` |
| 流 | `diagram` 具有有序的步长、连接器标签和分支深度； `layers` 用于具有成员芯片的盒中盒架构 |
| 媒体 | `image` 标题, `image-group` 具有可选的每帧标题和内联 `presentation:"gallery"`， `video` 和 `audio` 具有本地控件，画廊灯箱，弹出窗口，工具提示 |
| 控制 | `input` （文字/数字/日期）， `select`， `slider`， `switch`， `checkbox`， `radio`， `segmented`， `tabs` |
| 逻辑 | 表达式(`add`， `mul`， `round`比较……) `conditional`，地方行动； `send-message` |

大约有150个Lucide图标通过名称解析，带有语义音调(`success`， `warning`， `danger`， `muted`)所以颜色是有意义的。浅色和深色主题遵循主机调色板和字体。

## 合同共十行

````text
```rich-ui
{"version":1,"title":"Budget","initialState":{"spend":1200},
 "nodes":[
  {"type":"slider","stateKey":"spend","label":"Monthly spend, €","min":100,"max":5000,"step":100},
  {"type":"computed","label":"Per year, €","expr":{"op":"mul","args":[{"state":"spend"},12]}},
  {"type":"callout","tone":"info","content":"Recomputed locally — no model call."}
 ]}
```
````

实体，表格，图表和操作-一个完整的文档

```json
{"version":1,"title":"Films for tonight",
 "entities":[{"id":"a","kind":"Film","title":"Arrival","subtitle":"2016 · science fiction",
   "image":"https://example.org/poster.jpg",
   "facts":[{"label":"Director","value":"Denis Villeneuve"}],
   "sources":[{"title":"TMDB","url":"https://www.themoviedb.org/movie/329865-arrival"}],
   "badge":{"label":"Editors' pick","tone":"success"}}],
 "nodes":[
  {"type":"meta","items":[{"icon":"film","text":"3 films"},{"icon":"clock","text":"2 hours"}]},
  {"type":"entity-list","entityIds":["a"]},
  {"type":"table","columns":[{"key":"k","label":"What"},{"key":"v","label":"How many"}],
   "rows":[{"k":"Screenings","v":3}]},
  {"type":"chart","kind":"bar","data":[{"label":"Mon","value":2},{"label":"Tue","value":5}]}]}
```

权威文本是 [prompt-rich-ui / prompt.md](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/prompt-rich-ui/prompt.md);精确的字段、枚举和预算 [引用/ schema.md](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/prompt-rich-ui/references/schema.md)，以及工作文件 [引用/ examples.md](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/prompt-rich-ui/references/examples.md).

## 它是如何工作的

```mermaid
flowchart LR
  A["Model writes a rich-ui fence"] --> B["Adapter finds the code block"]
  B --> C{Strict JSON schema}
  C -- invalid --> D["Stays a normal code block"]
  C -- valid --> E["React renderer mounts"]
  E --> F["Local state, no model call"]
  F -- explicit button --> G["rich-ui action message"]
```

-   **节点的一半** 注册一个永远打开的系统提示部分，包含整个契约和引用文件的绝对路径，加上 `rich_ui_validate` 工具。该模型可以在发出JSON之前验证它；模式错误作为一个工具结果返回，而不是一个可见的用户消息。
-   **浏览器的一半** 验证栅栏并安装到插件拥有的根目录中。当模型仍在写入时，封闭节点在惰性预览中呈现，并在块确定时变为交互式。
-   格式错误的文档永远不会打补丁，也不会触发自动消息：它会显示一张诊断卡，上面有确切的错误和被拒绝的JSON，外加一个复制按钮。一个浏览器插件没有工具通道，所以卡片故意没有“询问模型”按钮。未完成的流保持代码状态，直到模型关闭它们。

## 安全

| 风险 | 缓解 |
| --- | --- |
| 任意代码执行 | 仅声明式JSON；没有HTML， CSS， JS `eval` 或者属性路径 |
| Prompt-injected行动 | 本地操作不能调用工具； `send-message` 需要显式单击，并作为普通用户文本传递 |
| UI中的秘密 | 拒绝密码/秘密状态密钥；不存在秘密输入组件 |
| 恶意网址 | `http(s)` 仅，拒绝url中的凭据 |
| 资源枯竭 | 有界深度，节点数，字符串大小和表达式预算 |
| 存储的数据 | 持久性是可选的，每个会话，从不存储文本或日期输入 |

## 与参考资料等值

测量的，未要求的： **19 / 27** 参考场景再现， **2部分**， **6失踪** -附有逐项偏差表 [文档/ PARITY.md](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/PARITY.md)． 今天缺少：美人鱼/ER图表，数学，地图，文物，持久面板和小程序。

已知限制：fence标签不被Harness保留，因此只有当其有效负载看起来像规范文档并通过严格解析器时，才声明未标记的块。一个 `json`\- labeled块永远不会被声明。

## 故障排除

**该块保留为代码。** JSON没有传递模式——通常是一个未知字段(`title` 在没有的节点内，或者 `items` 从另一个插件的语法)。声明的栅栏显示准确的错误和被拒绝的源，并根据请求复制它们。不会自动执行、重写或发送任何内容。模型应该调用 `rich_ui_validate` 在发送之前,如果没有，请它修复文档并验证它。

![Diagnostic card: rich block not parsed, missing value, and copy error](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/docs/images/diagnostic-light.png)  
_一个被拒绝的块解释它自己并复制精确的错误和源。没有什么是自动发送的。_

**图像显示占位符。** URL错误，被远程主机阻止，或者没有 `http(s)`． Ozon/WB cdn拒绝热链接；使用允许的来源或您自己的媒体主机。

**老 `dsh-ui` 消息停止呈现。** 这是一个不同的插件语法。这个声称 `rich-ui` 只有。

## 开发

```sh
npm ci
npm run dev            # lab at http://127.0.0.1:4173, HMR, no Harness needed
npm run build          # typecheck + lab build
npm run build:plugin   # the two real bundle artifacts
npm test               # 217 unit, schema and DOM tests
npm run test:browser   # 58 Playwright desktop + mobile checks (goldens never auto-update)
# Interaction timings: docs/PERFORMANCE.md
```

浏览器测试在固定的容器中运行，因此不需要系统库：

```sh
docker run --rm --network host --ipc host --user "$(id -u):$(id -g)" \
  -e HOME=/tmp -v "$PWD:/work" -w /work \
  mcr.microsoft.com/playwright:v1.64.1-noble npx playwright test
```

实验室场景： `?demo=dashboard`， `films`， `listing`， `apps`， `calculator`， `configurator`， `technical`， `primitives`,再加上 `&theme=dark`.

本自述文件中的屏幕截图是该实验室的截图，而不是模型。下面的金色图像 `tests/` 是回归基线，对另一个产品的保真度只字不提。

## 许可证

MIT -见 [许可证](https://npmcn.com/package/%40kyoukisu/dsh-rich-ui/LICENSE)． 演示图片来自维基共享资源，免费许可；价格和元数据可以说明问题。DeepSeek Harness是DeepSeek的一个独立项目；这个插件是独立的。ChatGPT是OpenAI的商标：描述指向丰富答案的风格，而不是任何从属关系，认可或共享代码。

## 常见问题

### @kyoukisu/dsh-rich-ui 是什么？

chatgpt风格丰富的答案在DeepSeek线束：实体面板，KPI卡，图表，表格，图层和本地控件。

### 如何安装 @kyoukisu/dsh-rich-ui？

在项目目录运行 npm install @kyoukisu/dsh-rich-ui，或使用 pnpm add / yarn add / bun add。

### @kyoukisu/dsh-rich-ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/kyoukisu\_\_dsh-rich-ui 是否存在。

### @kyoukisu/dsh-rich-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @kyoukisu/dsh-rich-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @kyoukisu/dsh-rich-ui 可以商用吗？

@kyoukisu/dsh-rich-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @kyoukisu/dsh-rich-ui 还在维护吗？

最新版本 0\.6\.2 发布于 2026/11/01（1 天前）；至今共发布 33 个版本，其中过去 12 个月发布了 33 个；首次发布于 2026/10/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。