# @design-parity/report-html 中文文档

规范地址：https://npmcn.com/package/%40design-parity/report-html/

版本：1\.18\.0
npm 元数据更新时间：2026-11-07T13:55:20.609Z
中文译文更新时间：2026-11-12T02:03:09.589Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40design-parity/report-html
原文对照：https://npmcn.com/package/%40design-parity/report-html/?lang=original
项目主页：https://github.com/yschimke/design-parity/tree/main/packages/report-html#readme
源码仓库：https://github.com/yschimke/design-parity

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

- 包体积（解压后）：166 kB，46 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-06-14T05:42:44.292Z
- 最新版本发布：2026-11-07T13:55:20.277Z
- 近 30 天下载量：3736（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：102（近 12 个月 102 个）

## 中文简介

自成一体的 HTML 比较页面每平分运行:参考 QQ 候选人 diff 与判决结果并列,内含一个离线.html文件(数据-URI PNGs + 内含 CSS/JS,无外出资产).

## 安装

```sh
npm install @design-parity/report-html
```

也可以使用：`pnpm add @design-parity/report-html`、`yarn add @design-parity/report-html`、`bun add @design-parity/report-html`

## README

# @ dedesign-parity/report-html (英语)

每个运行 **自定义 HTML 比较页面**: 丰富的文物a 审查器从 PR 打开到实际 _审查_ 一个不匹配.

一样 `(DesignReference, CandidateRender, Verdict)` 标记 概要用途——加上可选的 diff 面板 `renderHtmlReport` 发射 **一个 离线 `.html` 字符串**数字 :

-   **参考 qq 候选人 diff** 每个变体相并列 `state/theme/size`,当一方省略或重新标出大小时,容忍,并加上 香草不透明/ 覆盖滑块来擦去参考和候选之间 .
-   裁决结果 **数值顺序** (a11y + i18n → 令牌 → 语义 → ) )和显示的预想-vs-事实 内入从 `finding.detail`。 。 。 .
-   内含: CSS 在一个 `<style>`,滑动JS在一个 `<script>`,以及 每一个图像作为一个 `data:image/png;base64,…` URI (英语). **无外部请求** - 这个 从一个文件,作为 CI 的文物,或在 GitHub Pages 上打开.

这是一个 **叶类消费者**:仅取决于 `@design-parity/core`高级 面板作为通用 `DiffImage { key; png }`,所以它从来不取决于 `@design-parity/diff`。 。 。 .

输出为 **决定性** ——同输入,字节同为HTML. 没有时间戳, 随机编号,或 `Date.now()` (文件/PRINCIPLES.md,原则1).

## 使用量

```ts
import { renderHtmlReport } from "@design-parity/report-html";

const html = renderHtmlReport({
  reference, // DesignReference
  candidate, // CandidateRender
  verdict, // Verdict
  diffImages: triptychs.map((t) => ({ key: t.key, png: t.png })), // optional
  repoRoot, // resolves reference/candidate Image.uri (defaults to cwd)
});
// write `html` to one .html file
```

参考文献和候选PNG从磁盘上通过 `repoRoot + Image.uri` (diff引擎使用的同一分辨率)并内含. 无图像的一面 (一个语义/只听字的判决) 轻而易举地贬低——结论仍然得出.

## 分行登陆页

`report.html` 为每个组件; `renderIndex` 缝合整个跑道 已出版的文物分支有一个切入点,而不是墙壁 机器命名目录。 由于运行的组件 它返回 `{ readme, html }`数字 :

-   `README.md` —— GitHub 打开树枝后, “生成, 做 ” 不编辑"横幅,来源承诺,一个"打开棋盘"链接,和一个表格 将每个组成部分与报告联系起来.
-   `index.html` GitHub Pages / 本地视图自成一体的登陆页面, 一个小 **预览真实候选人渲染的缩略图** (真实性,不) 每个组件旁边,内嵌为 `data:` URI (英语).

因为GitHub为链接服务 `.html` 作为源头的blob(滑轮JS不会运行), 通过已出版的 `repoSlug` + 键 `branch` 以覆盖每个报告链接——和 "打开板"链接到 `index.html` 通过 `htmlpreview.github.io` 所以他们 在不使用 GitHub Pages 的情况下翻译链接;没有这些链接,链接是相对的(右) 页/ 本地视图)。 每个输入的缩略图来自呼叫者 `data:` URIs (`orchestrate` 插入候选人的第一个渲染, 保留此包 a 叶片没有磁盘读取。 决定主义, 与 `renderHtmlReport`。 。 。 .

何时 `repoSlug` + 键 `branch` 设置,每个条目也有一个 **历史** 链接到 GitHub对屏幕的承诺历史 `report.html`。自 `report.html` 实值 当屏幕的代码或模拟更改时,它的承诺日志是: 屏幕的更改时间表。 设计平价 `publishBaseline` 每一个运行重现 在树枝尖端(一条线性承诺链,无强力)上,所以这在 框中; 强制出版商将使分支平分到一个承诺和 链接只显示最近的运行.

## 国 际

小型CLI级舰只 `design-parity-report`数字 :

```sh
design-parity-report \
  --reference fixtures/figma/button-primary.reference.json \
  --candidate fixtures/candidate/button-primary.candidate.json \
  --verdict   out/verdict.json \
  --diff default/dark/compact=out/diff-dark.png \
  --repo . \
  --out report.html
```

## 常见问题

### @design-parity/report-html 是什么？

自成一体的 HTML 比较页面每平分运行:参考 QQ 候选人 diff 与判决结果并列,内含一个离线\.html文件\(数据-URI PNGs \+ 内含 CSS/JS,无外出资产\)\.

### 如何安装 @design-parity/report-html？

在项目目录运行 npm install @design-parity/report-html，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 design-parity-report，可以用 npx design-parity-report 直接运行。

### @design-parity/report-html 支持 TypeScript 吗？

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

### @design-parity/report-html 支持 ESM 还是 CommonJS？

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

### @design-parity/report-html 可以商用吗？

@design-parity/report-html 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @design-parity/report-html 的下载量有多少？

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

### @design-parity/report-html 还在维护吗？

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