数据指标

一个指标由标签、数值，以及可选的变动组成。statGroup() 会把几个指标拼到同一块面上，中间用分隔线隔开。

基础指标

页面数

204

构建耗时

1.1 秒

客户端 JS

3.3 kB

statGroup(
  stat({ label: '页面数', value: '204' }),
  stat({ label: '构建耗时', value: '1.1 秒' }),
  stat({ label: '客户端 JS', value: '3.3 kB' }),
)

带变动

变动的颜色取自 color——数字朝好的方向走就用绿色，反之用红色。别只靠颜色说话：正负号或者文字要留着。

页面数

204

本周 +8

构建耗时

1.1 秒

−0.3 秒

打包体积

9.9 kB

+1.2 kB

statGroup(
  stat({ label: '页面数', value: '204', change: '本周 +8', color: 'success' }),
  stat({ label: '构建耗时', value: '1.1 秒', change: '−0.3 秒', color: 'success' }),
  stat({ label: '打包体积', value: '9.9 kB', change: '+1.2 kB', color: 'danger' }),
)

带图标

部署次数

128

贡献者

17

statGroup(
  stat({
    label: '部署次数',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: '贡献者',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

帮助文本

Lighthouse

100

无障碍

在 CI 里对每个英文页面测量。

Pagefind 索引

204

每次构建结束时重建。

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: '无障碍',
    color: 'success',
    help: '在 CI 里对每个英文页面测量。',
  }),
  stat({
    label: 'Pagefind 索引',
    value: '204',
    help: '每次构建结束时重建。',
  }),
)

单独使用

单个指标不需要分组——只是它自己没有一块面而已。

页面总数

204

+8

card(
  cardBody(stat({ label: '页面总数', value: '204', change: '+8', color: 'success' })),
)

固定列数

指标默认会自动适配列数。当这些数字必须待在同一行时，用 columns 把数量钉死。

通过

215

失败

0

statGroup({ columns: 'repeat(2, 1fr)' },
  stat({ label: '通过', value: '215', color: 'success' }),
  stat({ label: '失败', value: '0', color: 'success' }),
)

由数据生成

页面

204

资源

208

合计

9.7 MB

return (() => {
  const report = [
    { label: '页面', value: 204 },
    { label: '资源', value: 208 },
    { label: '合计', value: '9.7 MB' },
  ]

  return statGroup(
    report.map((entry) => stat({ label: entry.label, value: String(entry.value) })),
  )
})()

属性

属性类型默认值说明
labelChild—这个数字统计的是什么。
valueChild—数字本身，用等宽数字排版。
changeChild—一个增减量，颜色由 color 决定。
color'primary' | 'neutral' | 'success' | 'warning' | 'danger'—给变动和图标上色。
iconChild—标签上方的装饰性字形。
helpChild—压在最下方的一行更轻的文字。

statGroup() 接受 columns——任意 grid-template-columns 值。