积分榜模块
为体育队伍或俱乐部呈现的排名赛季表格:球队名称、赛/胜/平/负、得失分,以及积分,按积分降序排序,并标出前三名所在行。与分析与图表模块页面上的每一个模块不同,这个模块从不以图片形式渲染——在包括 Outlook 在内的每一个电子邮件客户端中,一张真正的 HTML <table> 就是整个模块。
工作原理
分析家族中的十三种图表模块,每一种都会渲染一张服务器端生成的位图图片,并配有文本回退。这是因为柱状图或折线图确实没有能在各个客户端一致显示的等效 HTML 标记。排名表格没有这个问题:排好序的行和列正是 <table> 标记本就能够原生、一致地在所有地方渲染出来的内容,包括 Outlook 基于 Word 的渲染引擎在内。这里没有图片加文本回退的拆分——只有一条渲染路径,无条件使用。
各行直接在检查器的行编辑器中手动录入,一行一支队伍。目前还没有实时数据源绑定,因此你需要在每场比赛后手动更新这个模块——这与 KPI 计分卡在绑定数据源之前,其手动输入的 value 所采用的手动更新模式相同。排序发生在渲染时:行会按积分列降序排序,并列的行保持它们原本手动输入的顺序而不会被重新打乱,因为 Array.prototype.sort 是一种稳定排序。排序后的前三行会得到一个排名徽章(🥇🥈🥉)而不是一个普通数字;第三名之后的每一行都得到一个普通的排名数字。
积分始终是你自己填写的数字。它绝不会根据胜/平/负自动计算,因为不同联赛的计分方式各不相同(直接的 3 分制胜利、高比分失利的附加分,等等),把一个公式写死对大多数运动来说都是错的。
对于没有平局的运动,比如篮球或大多数网球联赛,可以关闭显示平局列。这样做会把"平"这一列从表头和每一行中彻底移除,而不只是在视觉上隐藏它。高亮队伍会以不区分大小写的方式匹配某一行的队伍值,一旦匹配,就会把该行的文字加粗并为背景着色。这对家长摘要邮件很有用,一个家庭可以一眼找到自家孩子所在的队伍,而不必扫视整张表格。
如果没有任何一行填写了非空的队伍名称,模块仍会渲染标题和卡片外框,并用一条朴素的"请至少添加一支队伍以渲染积分榜"提示替代空表格。这与其他每一个分析模块在数据为空时的分支所遵循的"搭建过程中不要中途报错"惯例相同。
积分榜是纯内容:没有需要回答的内容,因此——与活动场地一样——它从不会出现在响应仪表盘、CSV 导出或点击热力图中。它上面的任何内容都不是链接。
可配置字段:
- 标题——显示在表格上方;留空则只渲染表格。
- 队伍——行列表:队伍、赛、胜、平、负、得分、失分、积分。
- 显示平局列——开关"平"这一列。
- 高亮队伍(精确名称匹配)——与队伍列进行不区分大小写的匹配。
- 卡片的背景色、内边距、边框和圆角半径。
- 标题颜色/字号,以及表格文字颜色/字号。
示例
Subject
Season standings after Week 10
体育队伍这个项目用途会在新建项目时,把积分榜与活动场地、添加到日历、RSVP 一起预置好。发送一封每周摘要,用最新结果更新同一个模块——完整模式参见体育队伍与俱乐部,包括如何在多个分队或年龄组之间共用同一份联系人名单。一份联赛通讯可以在一封邮件里回顾整个分组的结果,并把高亮队伍留空,因为没有单一的"主队"需要突出。一家青少年俱乐部会给每位家长发送同一封积分邮件,并通过 visibleWhen 受众筛选条件按分队分别设置高亮队伍,而不是为每支队伍分别发送一封邮件。
静态回退效果是什么样子
<div style="margin:12px 0;background-color:#ffffff;padding:16px;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Standings</p>
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:600">#</th>
<th style="text-align:left;padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:600">Team</th>
<th style="text-align:right;padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:600">Pts</th>
</tr>
<tr style="background-color:#eef2ff">
<td style="padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:700">🥇 1</td>
<td style="padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:700">Eagles</td>
<td style="text-align:right;padding:4px 8px;border-bottom:1px solid #e5e7eb;font-weight:700">23</td>
</tr>
</table>
</div>
这就是该模块真实且唯一的渲染结果——没有单独的回退层级,因为表格在每个客户端中都是相同的标记。(为简洁起见,这里省略了赛/胜/平/负/得分/失分列;带奖牌的那一行展示的是高亮队伍的着色效果应用在同一行上。)