倒计时

本页说明首页首屏生日倒计时的配置方式、自动跨年逻辑、刷新机制与隐藏方法。目标日期在 site.config.js 中配置，无需修改组件代码。

首页首屏的生日倒计时由 CountdownTimer 组件与 useCountdown Hook 实现，渲染为四个液态玻璃卡片：天 / 时 / 分 / 秒。

配置来源

倒计时目标读取 site.config.js：

birthday: {
  month: 11,            // 自然月：11 月就是 11
  day: 20,
  eventName: '刻晴生日',
},

• month / day：目标日期。month 使用自然月，写 11 表示 11 月（内部 Hook 会自动做 -1 转换，映射为 JavaScript 月份）
• eventName：倒计时文案中的事件名

倒计时文案格式：

距离 {目标年份} 年{month}月{day}日{eventName}还有

渲染效果：「距离 2026 年11月20日刻晴生日还有」+ 四个数字卡片。

自动跨年

useCountdown（src/hooks/useCountdown.js）的核心逻辑：

const target = new Date(currentYear, month - 1, day);
if (now > target) {
  return new Date(currentYear + 1, month - 1, day); // 今年已过 → 指向明年
}

不同情况下倒计时指向的目标如下表所示：

情况	倒计时指向
今年生日还没到	今年生日当天 0 点
今年生日已过	明年同一天 0 点

因此每年不需要手动修改配置，网站可以长期运行。

刷新机制

• 组件挂载时计算一次剩余时间与目标日期
• 之后每 1 秒通过 setInterval 更新四个数字
• 秒数显示两位补零（padStart(2, '0')），保证卡片宽度稳定不跳动

提示

目标时间在挂载时确定。若页面连续挂在显示器上数天而不刷新，日期跳变后以刷新页面为准（浏览器会降低后台标签页定时器的触发频率，回到前台后自动恢复正常计时）。

样式

• 四个卡片使用 LiquidGlass 容器，跟随 theme.config.js 的 preset 卡片风格
• 数字使用渐变文字（accentPurple → accentPink 方向）
• 移动端卡片更窄（min-w-[80px]），桌面端 min-w-[120px]

关闭 / 隐藏

倒计时内嵌在 HeroSection 中，配置中没有单独开关。如需隐藏：

1. 隐藏整个首屏：把 content.config.js 中 hero 板块的 status 设为 'disable'（会同时隐藏大标题、轮播图和按钮，请谨慎使用）
2. 仅移除倒计时：编辑 src/components/HeroSection.jsx，删除 <CountdownTimer /> 一行

用于非生日场景

将 site.config.js 的 birthday 改为任意目标日期即可，文案会自动显示对应日期；事件名可改为「投稿截止」等文字。倒计时逻辑与生日无关，适用于任何每年一次的日期。