打卡 / 日历 / 清单 —— 移动端静态高保真原型（设计基线 420 × 820，适配 375~430px）
沿用项目既有 :root 变量（src/styles/globals.css），本模块不引入新主题。
头部日期 + 完成数；未完成卡片排在前面。环形中心未达标显示 done/target，达标显示对勾（每天 1 次打完即刻闭合）；超额在右上角显示 +n。点环或「打卡」按钮均可打卡，卡片底部提供撤销 / 编辑 / 归档。
周一起始月历 + 「昨天 / 今天 / 明天」快捷分段；日期下方状态点：绿=全部完成、黄=部分完成、紫=超额、无点=未完成或未来。今天用主色数字并选中高亮，未来日期数字弱化。下方为该日明细，可直接打卡；底部展示本月完成率。
卡片头部常显标题、场景标签、进度条与 8/12；点击展开逐条勾选（勾选后绿色圆底、文字加删除线并弱化）。底部可继续添加检查项，并提供全选 / 全不选 / 复制 / 存为模板 / 归档 / 删除。收起态只保留头部一行。
名称 ≤20 字；周期四选一（每天 / 每周 / 每月 / 每年）；目标次数用 Stepper，最小 1；颜色 7 色预设；备注可选。编辑态标题变为「编辑打卡项」并回填当前值。
环形闭合 + 对勾缩放入场（0.32s）；同时 14 颗粒子沿圆周扩散（26~58px，交替主色与金色）+ 主色光环脉冲（0.7s），总时长 ≤900ms，pointer-events:none 不阻塞后续操作；并触发 18ms 轻震动。可在头部一键关闭（持久化开关），系统「减弱动效」时自动降级。
未来日期不允许打卡：标题右侧显示「计划（不可打卡）」徽标，条目右侧只显示「待办」文案而不渲染按钮，月历上未来日期数字弱化且不打点。昨天视图则相反——可补打最近 7 天内的漏打卡。
进度条 100%、计数变为 12/12、卡片底色转 #f7fbf8，并播放与打卡一致的完成特效。清单完成后用户通常选择「归档」或「复制」复用。
还没有打卡项
三个视图均具备加载中 / 空态 / 错误（带重试）三态。空态给出明确引导按钮；头部「特效开 / 特效关」为全局动效开关，关闭后仅保留环形与对勾，不播放粒子与震动。
| 状态 | 条件 | 环形 | 中心 | 卡片底 | 按钮 |
|---|---|---|---|---|---|
| 未开始 | done = 0 | 仅灰底环 | 0/2 | 白 | 打卡（主色） |
| 进行中 | 0 < done < target | 按 done/target 填充（45°…330°） | 1/3 | 白 | 打卡（主色） |
| 已达标 | done = target | 闭合整圈 | 对勾（主色） | #f7fbf8 | 再打一次（灰） |
| 超额 | done > target | 闭合 + 右上角 +n 橙标 | 对勾 | #f7fbf8 | 再打一次（灰） |
| 每日 1 次达标 | target = 1 且已打卡 | 直接整圈闭合，不做渐增生长期 | 对勾 | #f7fbf8 | 再打一次 |
环形进度 = 周期完成度（done / n）；日历日标记 = 当日份额（当日次数 / 日均期望），两者口径不同，互不影响。
| 状态 | 判定 | 视觉 |
|---|---|---|
全部完成 full | 所有打卡项当日次数 ≥ 日均期望，且无超额 | 绿色圆点 |
超额 over | 全部达标且存在任一打卡项当日次数 > 期望 | 紫色圆点 |
部分完成 partial | 有完成但未全部完成 | 黄色圆点 |
无 empty | 无记录 / 当天无打卡项 / 未来日期 | 不显示圆点 |
| 今天 | date = today | 数字主色加粗 |
| 选中 | 用户点击 | 主色实心底，数字与圆点转白 |
| 非本月 / 未来 | 月份不符 / date > today | 数字弱化（#c8c8c8 / #b0b0b0） |
| 状态 | 勾选框 | 文字 | 触发 |
|---|---|---|---|
| 未完成 | 1.5px 灰边圆圈，对勾透明 | #333 | 点击圆圈或文字切换 |
| 已完成 | 绿底绿边，白色对勾显现（0.2s） | #a0a0a0 + 删除线 | 同上，写 doneAt |
| 整单完成 | — | 进度条 100%、卡片转绿 | 最后一项勾选时播放特效 |
| 动效 | 时长 | 曲线 / 实现 | 说明 |
|---|---|---|---|
| 环形增长 | 450ms | cubic-bezier(.4,0,.2,1)，stroke-dashoffset 过渡 | 12 点方向顺时针增长 |
| 对勾入场 | 320ms | scale(.4) → 1 + 透明度 | 达标瞬间出现 |
| 完成粒子 | ≤900ms | 14 颗粒子按角度 --a、距离 --d 扩散，交错 40ms 延迟 | 不阻塞点击 |
| 光环脉冲 | 700ms | 主色圆环放大淡出 | 与粒子同时开始 |
| 触感反馈 | 18ms | navigator.vibrate(18) | WebView 不支持则静默跳过 |
| 进度条填充 | 400ms | width 过渡 | 清单勾选后更新 |
| 视图切换 | — | SwipeTabs 跟手横滑 | 与既有模块一致 |
| 项 | 约定 |
|---|---|
| 视口 | 设计稿 420×820；375~430px 内元素不换行、不裁切；底部 TabBar 5 项每项 ≥ 40px 可点宽度 |
| 安全区 | TabBar 使用 antd-mobile safeArea，页面底部留出 tabbar-h + safe-bottom |
| 减弱动效 | 系统开启「减弱动效」或用户关闭特效开关 → 不播放粒子 / 光环 / 震动，只保留环形与对勾 |
| 大字号 | 卡片采用 grid 自适应列宽，文字超长换行不截断；名称限制 20 字、检查项 40 字 |
| 深色模式 | V0.2 沿用现有浅色主题，暂不适配 |
本文档为静态设计稿，不含脚本逻辑；实现对应 src/pages/checkin/*.jsx、src/components/RingProgress.jsx 与样式段（src/styles/globals.css）。接口与数据口径见《设计文档.md》与《数据库设计文档.md》。