@ 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).
使用量
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.htmlGitHub 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数字 :
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