Countdown 倒计时
xy-countdown 复用了 xy-statistic 的标题、前后缀和数值骨架，用来展示发版窗口、活动结束时间、支付剩余时长等倒计时场景。Statistic 负责外层展示，Countdown 负责时间计算和事件。
基础倒计时
最常见的场景是状态面板里展示“距离某个截止时间还剩多久”。
正在加载倒计时...
格式串与事件
通过 format 控制展示粒度，并通过 change / finish 接进业务状态更新。
最近一次 change 回调还剩 0 秒。
订单保留时间
在订单中心、客服催付和大促履约后台里，更常见的是把倒计时嵌进列表行或任务卡片，直接表达“超时后会发生什么”。
付款超时后自动释放库存和优惠占位，适合订单中心、客服催付和大促履约后台。
SLA 升级看板
change / finish 很适合拿来驱动工单、告警和审批任务的 SLA 状态切换，让剩余时间直接映射到风险等级。
P1 · 值班人 Mia
API 侧已止损，等待补偿批次完成
P2 · 值班人 Lucas
外部网关恢复中，需在 15 分钟内确认是否切备用通道
P1 · 值班人 Sophie
已经逼近升级阈值，需决定是否执行限流策略
营销场次排期
大促作战室里经常会同时盯多个场次的开场时间。这个场景更适合把 title / prefix / suffix 插槽和 value-style 一起用起来。
站内 Push + Banner · 负责人 Aiden
适合把倒计时直接挂进作战室面板，提醒运营同学什么时候切换资源位。
直播会场 + 首页 Hero · 负责人 Chloe
临近开场时自动切成高风险色，便于大促作战室快速扫盘。
秒杀流量池 · 负责人 Mason
适合搭配 title / prefix / suffix 插槽，把倒计时做成更贴业务的话术。
发布冻结窗口
当倒计时本身会推动业务阶段切换时，可以把 finish 作为状态机触发点，让一个组件承接“即将冻结 -> 冻结中 -> 已恢复”的完整链路。
把“何时开始冻结、何时恢复变更”统一收进同一块发布看板里。
适合承接发版窗口、数据库迁移或节假日大促前的变更冻结提示。
- 核心链路只允许紧急热修复申请
- 数据库变更统一切到下一批窗口
- 值班群内同步冻结状态和恢复时间
审批截止面板
如果倒计时结束后需要马上进入下一步结果态，可以把 Countdown 和 Result、按钮区放进同一块审批面板里，直接表达“超时后会发生什么”。
适合接在财务复核、发版审批和风控人工确认这类“超时后必须有后续动作”的面板里。
使用提示
value支持number、Date和dayjs()；number按时间戳毫秒处理。format支持Y / M / D / H / m / s / S和中括号转义，例如DD [days] HH:mm:ss。change会在每一帧同步剩余毫秒数；如果业务只关心整秒变化，建议在接收端自行节流。- 组件样式完全复用
xy-statistic的 CSS 变量，只额外增加了根类名xy-countdown。
API
Countdown Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 目标时间 | number | Date | Dayjs | 0 |
format | 展示格式串 | string | 'HH:mm:ss' |
title | 标题文案 | string | '' |
prefix | 前缀文案 | string | '' |
suffix | 后缀文案 | string | '' |
value-style | 数值区域样式 | StyleValue | undefined |
Countdown Events
| 事件 | 说明 | 参数 |
|---|---|---|
change | 每次倒计时更新时触发 | CountdownChangeHandler |
finish | 倒计时结束时触发 | CountdownFinishHandler |
Countdown Slots
| 插槽 | 说明 |
|---|---|
title | 自定义标题区域 |
prefix | 自定义前缀区域 |
suffix | 自定义后缀区域 |
Countdown Exposes
| 暴露项 | 说明 | 类型 |
|---|---|---|
displayValue | 当前展示文本 | CountdownInstance["displayValue"] |