# @gainratio/receipt-ui 中文文档

规范地址：https://npmcn.com/package/%40gainratio/receipt-ui/

版本：0\.3\.0
npm 元数据更新时间：2026-10-02T22:43:34.771Z
中文译文更新时间：2026-11-15T21:31:09.253Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40gainratio/receipt-ui
原文对照：https://npmcn.com/package/%40gainratio/receipt-ui/?lang=original
项目主页：https://github.com/hseshadr/avow/tree/main/ts/packages/receipt-ui#readme
源码仓库：https://github.com/hseshadr/avow

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

- 包体积（解压后）：30 kB，31 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.13
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，@gainratio/avow ^0\.5\.2
- 首次发布：2026-10-02T17:46:51.772Z
- 最新版本发布：2026-10-02T22:43:34.440Z
- 近 30 天下载量：3451（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

反应组件,可以渲染并验证Avow signed Recept——可调和的徽章和面板,并带有一个失效的,三态的判决(已验证/被篡改/不信任的签名符).

## 安装

```sh
npm install @gainratio/receipt-ui
```

也可以使用：`pnpm add @gainratio/receipt-ui`、`yarn add @gainratio/receipt-ui`、`bun add @gainratio/receipt-ui`

## README

# @gainratio/ receipt-ui (英语)

渲染并验证 Avow `SignedReceipt` 在反应.

您的应用程序在引擎级别上签名收据; 这可以显示用户是否 实际检查出来。 掉进一个 `<ReceiptBadge>` 或者说 `<ReceiptPanel>`把手拿过来 收据和您所信任的公用钥匙, 它在挂起并制造 四个明显、失败的状态之一:

-   **正在校验..** ——验收在逃(初始,未完成).
-   **已验证** —签名有效 _财务报告和审定财务报表_ 由被绑定的密钥签名 .
-   **未核实的——被篡改或无效的签名** ——核查员拒绝了.
-   **未验证的—— 不信任的签名符** - 收据的钥匙不是你绑的.

只有按下被钉住的密钥的解析校正 _已验证_任意 其它——拒绝,错误,未绑定的密钥,或检查前时刻 返回——读取为未验证。 状态通过图标传递 **财务报告和审定财务报表** 文本( 从未 在ARIA内部 `role="status"` 生活区.

## 安装

```sh
pnpm add @gainratio/receipt-ui @gainratio/avow react
```

`@gainratio/avow` 财务报告和审定财务报表 `react` 是同伴的依附关系——应用程序提供了它们,所以 只有一个案件和一个案件 `SignedReceipt` 整个应用程序的类型 和这个包裹.

| 实收 | `@gainratio/avow` 端点 | 收到格式 |
| --- | --- | --- |
| 0.3.x (单位:千美元) | `^0.5.2` | `avow.receipt/v1` (卡车a `schema` 字段) |
| 0.1.x - 0.2.x (中文(简体) ) | `^0.1.0` | (从旧的 `hseshadr/assay` 转接) |

收据,没有 `avow.receipt/v1` 计划 _未核实_ 打开 0.3.x:avow 0.5拒绝,而这个包裹永远不会推翻avow的判决.

## 使用

```tsx
import { ReceiptPanel } from "@gainratio/receipt-ui";

// `receipt` came from your engine (avow `signPayload`); `SIGNER_KEY` is the
// hex public key you trust. `verify` is optional — it defaults to avow's own
// `verifySignature`, so omit it unless your app injects a custom verifier.
<ReceiptPanel
  receipt={receipt}
  expectedPublicKey={SIGNER_KEY}
  renderPayload={(p) => <p>Score: {p.score}</p>}
/>;
```

`ReceiptBadge` 一样 `receipt` 编号 : `expectedPublicKey` 编号 : `verify` 道具 并做出一线判决; `ReceiptPanel` 添加信封元数据 (算法、缩短了的签名键、有效载荷散列、签名)和有效载荷体.

判决维持在 `useReceiptVerification` 钩子,如果你想建你的 自我介绍; `StatusPill` 是独立的判决芯片.

## 本地化

> **要求数 `@gainratio/receipt-ui` 0.2.0或更新出头.** 0.1.0没有 `labels` 道克——它使内置的英语字符串沉默地忽略了 对象。 在提交错误前检查您解决的版本 。 见 [`CHANGELOG.md`](https://npmcn.com/package/%40gainratio/receipt-ui/CHANGELOG.md)。 。 。 .

每个转换的字符串都可以注射:通过 a `labels` 对象( 类型) `ReceiptLabels`改为: `StatusPill`, (中文(简体) ), `ReceiptBadge` 或者说 `ReceiptPanel`这是一个 深度部分 —— 省略任何保留内置的英语默认值:

```tsx
<ReceiptPanel
  receipt={receipt}
  expectedPublicKey={SIGNER_KEY}
  labels={{
    status: { verified: { text: t("receipt.verified") } },
    panel: { receipt: t("receipt.section"), algorithm: t("receipt.algorithm") },
  }}
/>;
```

`labels.status` 覆盖每个状态的判决芯片(`checking` 编号 : `verified` 编号 : `invalid` 编号 : `wrong-key`,每个 `{ text?, icon? }`(三); `labels.panel` 覆盖 面板的元字符串( r)`receipt` ——"亚亚"-"标签"一款外加 `algorithm`, (中文(简体) ), `signerKey`, (中文(简体) ), `payloadHash`, (中文(简体) ), `signature`) (中文(简体) ).

## 开发

这个包裹住在 [`hseshadr/avow`](https://github.com/hseshadr/avow) pnpm 工作空间 `ts/packages/receipt-ui` 和对阴道源的试验 内 `ts/`,而不是出版的拷贝.

```sh
pnpm --dir ts install
pnpm --dir ts build                      # receipt-ui imports avow from ts/dist
pnpm --dir ts/packages/receipt-ui gate   # biome -> tsc strict -> vitest (+coverage) -> build
```

释放是标记驱动的,与avow分离 `vX.Y.Z` 标记: 起伏 `package.json` 财务报告和审定财务报表 `CHANGELOG.md`,合并,然后推 `receipt-ui-vX.Y.Z`。 。 。 . `.github/workflows/publish-receipt-ui.yml` 通过信任的 npm 发布 以出处出版.

测试建立真实的 Avow 收据( 有效、 被篡改、 错误的键) 并重放 Avow 的 共享金色向量( e)`testdata/vectors/receipts.json`),主张 部分反映了avow自己的判断——财产而不是形状.

## 常见问题

### @gainratio/receipt-ui 是什么？

反应组件,可以渲染并验证Avow signed Recept——可调和的徽章和面板,并带有一个失效的,三态的判决\(已验证/被篡改/不信任的签名符\)\.

### 如何安装 @gainratio/receipt-ui？

在项目目录运行 npm install @gainratio/receipt-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、@gainratio/avow（^0\.5\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @gainratio/receipt-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @gainratio/receipt-ui 支持 ESM 还是 CommonJS？

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

### @gainratio/receipt-ui 需要什么版本的 Node\.js？

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

### @gainratio/receipt-ui 可以商用吗？

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

### @gainratio/receipt-ui 的下载量有多少？

根据 npm 官方下载统计，@gainratio/receipt-ui 在 2026/10/16 – 2026/11/14 这 30 天内被下载 3,451 次，日均约 115 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @gainratio/receipt-ui 还在维护吗？

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