+
+
+
iBoard V0.2 · 界面设计
+
打卡 / 日历 / 清单 —— 移动端静态高保真原型（设计基线 420 × 820，适配 375~430px）
+
+ 版本 V0.2（0.2.0）分支 dev-0.2antd-mobile 风格
+ 底部 4 Tab（打卡默认）时区 Asia/Shanghai文档日期 2026-10-22 · 修订 2026-10-23
+
+
+
+
+
1 设计规范Design Tokens
+
沿用项目既有 :root 变量（src/styles/globals.css），本模块不引入新主题。
+
+
+
语义色
+
+
#1677ff主色 / 今日 / 链接
+
#00b578完成 / 进度条
+
#ffc53d部分完成 / 粒子
+
#a855f7超额完成
+
#ff8f1f连续天数 / 超额徽标
+
#ff3141危险操作
+
#f5f5f5页面底色
+
#f7fbf8已完成卡片底
+
+
+ 日历·全部完成
+ 日历·部分完成
+ 日历·超额
+
+
+
+
布局与圆角
+
+ 视口420 × 820（375~430 自适应）
+ NavBar 高45px
+ TabBar 高72px（含安全区）
+ 页面内边距左右 12px
+ 卡片圆角10px
+ 卡片间距10px 纵向
+ 卡片阴影0 1px 2px rgba(0,0,0,.04)
+ 环形尺寸58 × 58，环宽 6px
+ 最小点按区≥ 40 × 40
+
+
+
+
字号层级
+
18 / 700日期标题「10月22日」
+
17 / 600NavBar 标题「打卡」
+
16 / 700环形中心数字 / 弹窗标题
+
15 / 600打卡项名 / 清单标题
+
13 / 400正文 / 日历日期数字
+
12 / 400次要信息 / 操作链接
+
11 / 400备注 / 周期范围 / 徽标
+
+
+
+
+
2 主界面三个子视图（V0.2 现状；合并方案见 2.12 ②）
+
+
+
+
+
+
+
打卡
+
+
+
+
10月22日 周四
+
已完成 2 / 4
+
+
+
+
+
+
+
+
+
+
喝水
+
每天 2 次连续 12
+
今日
+
+
+
+
+
+
+
+
+
+
健身
+
每周 3 次连续 5
+
10-19 ~ 10-25
+
+
+
+
+
+
+
+
+
+
读书
+
每月 12 次连续 3
+
10-01 ~ 10-31
+
+
+
+
+
+
+
+
+
+
吃药
+
每天 1 次连续 30
+
今日超额 1
+
+
+
+
+
+
+
+
+
+
2.1 打卡视图 · 今天默认进入
+
头部日期 + 完成数；未完成卡片排在前面。环形中心未达标显示 done/target，达标显示对勾（每天 1 次打完即刻闭合）；超额在右上角显示 +n。点环或「打卡」按钮均可打卡，卡片底部提供撤销 / 编辑 / 归档。
+
+
+
+
+
+
+
打卡
+
+
+
+ ‹2026年10月›
+ 回到今天
+
+
+
+
+
一二三四五六日
+
+
28
+
29
+
30
+
1
+
2
+
3
+
4
+
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
+
26
+
27
+
28
+
29
+
30
+
31
+
1
+
+
+
+
本月完成率 82%
+
今天 · 2026-10-22
+
+
+ 喝水
+ 每天 2 次 · 当日 2/2
+ 已达标
+
+
+ 健身
+ 每周 3 次 · 当日 0/1
+ 打卡
+
+
+ 读书
+ 每月 12 次 · 当日 1/1
+ 已达标
+
+
+ 吃药
+ 每天 1 次 · 当日 2/1
+ 已达标
+
+
+
+
+
+
2.2 日历视图 · 今天选中
+
周一起始月历 + 「昨天 / 今天 / 明天」快捷分段；日期下方状态点：绿=全部完成、黄=部分完成、紫=超额、无点=未完成或未来。今天用主色数字并选中高亮，未来日期数字弱化。下方为该日明细，可直接打卡；底部展示本月完成率。
+
+
+
+
+
+
+
打卡
+
+
+
+
+
+
出差 · 杭州出差
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 全选全不选复制
+ 存为模板归档删除
+
+
+
+
+
+
+
+
+
+
2.3 清单视图 · 展开态
+
卡片头部常显标题、场景标签、进度条与 8/12；点击展开逐条勾选（勾选后绿色圆底、文字加删除线并弱化）。底部可继续添加检查项，并提供全选 / 全不选 / 复制 / 存为模板 / 归档 / 删除。收起态只保留头部一行。
+
+
+
+
+
+
+
打卡
+
+
+
+
10月22日 周四
+
已完成 2 / 4
+
+
+
+
+
+
+
+
新建打卡项
+
+
+
+
+
+
保存
+
取消
+
+
+
+
+
2.4 新建 / 编辑打卡项（底部弹层）
+
名称 ≤20 字；周期四选一（每天 / 每周 / 每月 / 每年）；目标次数用 Stepper，最小 1；颜色 7 色预设；备注可选。编辑态标题变为「编辑打卡项」并回填当前值。
+
+
+
+
+
+
+
打卡
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2.5 达标瞬间 · 完成特效
+
环形闭合 + 对勾缩放入场（0.32s）；同时 14 颗粒子沿圆周扩散（26~58px，交替主色与金色）+ 主色光环脉冲（0.7s），总时长 ≤900ms，pointer-events:none 不阻塞后续操作；并触发 18ms 轻震动。特效恒开（V0.2 设计变更：头部不再有开关）。
+
+
+
+
+
+
+
打卡
+
+
+
‹2026年10月›回到今天
+
+
+
一二三四五六日
+
+
28
29
30
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
27
+
28
29
+
30
31
+
1
+
+
+
本月完成率 82%
+
明天 · 2026-10-23计划（不可打卡）
+
喝水每天 2 次 · 当日 0/2待办
+
健身每周 3 次 · 当日 0/1待办
+
读书每月 12 次 · 当日 0/1待办
+
吃药每天 1 次 · 当日 0/1待办
+
+
+
+
+
2.6 日历 · 明天（计划，只读）
+
未来日期不允许打卡：标题右侧显示「计划（不可打卡）」徽标，条目右侧只显示「待办」文案而不渲染按钮，月历上未来日期数字弱化且不打点。昨天视图则相反——可补打最近 7 天内的漏打卡。
+
+
+
+
+
+
+
+
2.7 清单全部完成（12/12）
+
进度条 100%、计数变为 12/12、卡片底色转 #f7fbf8，并播放与打卡一致的完成特效。清单完成后用户通常选择「归档」或「复制」复用。
+
+
+
+
+
+
+
打卡
+
+
+
+
○
+
还没有打卡项
+
创建第一个打卡项
+
+
+
+
+
+
2.8 空态
+
三个视图均具备加载中 / 空态 / 错误（带重试）三态。空态给出明确引导按钮。V0.2 设计变更：打卡页头部不再有「特效开 / 特效关」开关，完成特效与触感反馈恒开，没有任何关闭入口。
+
+
+
+
+
+
+
宏观
+
+
+
+
报警3
新闻
+
油价
经济数据
策略研究
经济文章
+
+
›
+
+
+
+
央行开展 5000 亿元 MLF 操作，中标利率持平
+
本月 MLF 净投放 2000 亿元，市场流动性保持合理充裕…
+
妙想财经2026-10-22#1
+
+
+
9 月社零同比增长 3.2%，服务消费延续回暖
+
餐饮收入增速回升至 5.1%，可选消费分化明显…
+
妙想财经2026-10-21#2
+
+
+
美联储会议纪要偏鹰，美元指数小幅走强
+
点阵图显示年内或仍有一次降息空间，但分歧加大…
+
妙想财经2026-10-21#3
+
+
+
OPEC+ 维持减产节奏，国际油价日内涨逾 1%
+
布伦特原油重回 78 美元上方，化工链成本端承压…
+
妙想财经2026-10-20#4
+
+
+
+
+
+
+
2.9 宏观 · 原「首页」报警/新闻并入设计变更
+
「首页」Tab 取消，报警与新闻并入宏观。2026-10-23 调整：两者移到最左（报警 → 新闻 → 油价 → 经济数据 → 策略研究 → 经济文章），默认选中「新闻」；共 6 个子 Tab 可横向滚动，当前项底部有 3px 主色指示条；报警数量以红色角标挂在子 Tab 上。tab 条右侧增加渐变遮罩 + 箭头，提示还有未展示的 tab（详见 2.12 ④）。新闻详情为 /macro/news/:id，底部「宏观」保持高亮。
+
+
+
+
+
+
+
+
+
C
+
Cheney
+
qian.huang@sunyard.com
+
+
+
前端升级 (OTA)
+
当前版本v0.2.0 · 20261022.1530
+
运行资源内置
+
+
+
开发版本
+
按版本号判新：仅当服务端版本号更高时才提示更新
+
+
+
+
+
+
+
+
+
+
2.10 我的 · OTA「开发版本」关闭（默认）新功能
+
开关默认关闭 = 按版本号判新：取服务端 latest.json 的 version（如 0.2.0-ota），与当前运行版本按数字字段逐段比较，更高才提示更新。用于生产，避免旧分支被重建（sequence 变大但版本更小）把设备拉回旧版。开关值保存在设备端 localStorage.iboard_ota_dev_mode。
+
+
+
+
+
+
+
+
+
C
+
Cheney
+
qian.huang@sunyard.com
+
+
+
前端升级 (OTA)
+
当前版本v0.2.0 · 20261022.1530
+
运行资源内置
+
+
+
开发版本
+
按 build sequence 判新：每次构建都算新版本，便于开发联调
+
+
+
+
新版本v0.2.0-ota (288 KB)
+
+
+
+
+
+
+
2.11 我的 · OTA「开发版本」打开
+
开关打开 = 按 build sequence 判新：走 hotswap 插件的 checkUpdate()，只要服务端 sequence 比本地大就算新版本——每次 CI 构建 sequence 都会变（默认取时间戳），所以任何一次提交都能推到设备上，适合开发联调。切换开关会清空上一次的检查结果，避免上一种口径的结论误导。
+
+
+
+
+
+
+
2.12 V0.2.1 界面调整头部统一 / 日历·打卡合并 / 模板分类 / 宏观 tab 溢出
+
本节为 2026-10-23 提出的调整方案。其中 ①头部统一 / ③模板分类 / ④宏观 tab 溢出 已按本节实现；
+ ②日历与打卡合并 为待确认草案，确认后再改代码。
+
+
① 四个主 Tab 头部统一
+
+ | 页 | 调整前 | 调整后 |
|---|
+ | 打卡 | NavBar 45px，标题「打卡」17px 深色 | 23px，标题「打卡」12px 主色加粗，字距 1px |
+ | 宏观 | NavBar 45px，无标题（空白） | 23px + 标题「宏观」（同打卡规格） |
+ | 监控 | NavBar 45px，无标题（空白） | 23px + 标题「监控」（同打卡规格） |
+ | 我 | NavBar 45px 空白条 | 整条去掉，蓝色头像区直接顶到状态栏下方 |
+
+
实现为独立组件 PageHeader，只被打卡 / 宏观 / 监控 引用；「我」页不引用，因此三者互不影响。
+ 头部背景取页面底色 #f5f5f5（不再是卡片白），视觉上更轻。
+
+
+
+
+
+
①-a 打卡（头部已缩至 23px）已实现
+
原 45px 白色 NavBar 换成 23px 底色条 + 主色标题，页面上移，首屏多出一张卡片的高度。
+
+
+
+
+
+
宏观
+
+
+
+
报警1
新闻
油价
+
经济数据
策略研究
经济文章
+
+
›
+
+
+
+
央行开展 5000 亿元 MLF 操作，中标利率持平
+
本月 MLF 净投放 2000 亿元，市场流动性保持合理充裕…
+
妙想财经2026-10-22#1
+
+
+
9 月社零同比增长 3.2%，服务消费延续回暖
+
餐饮收入增速回升至 5.1%，可选消费分化明显…
+
妙想财经2026-10-21#2
+
+
+
+
+
+
+
①-b + ④ 宏观：头部标题化 · 报警/新闻置最左 · 右侧溢出提示已实现
+
顺序：报警 → 新闻 → 油价 → 经济数据 → 策略研究 → 经济文章，默认选中「新闻」（/macro 自动跳 /macro/news）。
+ 溢出提示：tab 条仍可向右滚动时，右边缘出现白色渐变遮罩 + 主色圆底箭头「›」（1.5s 轻微左右摆动，可点击向右翻页），滚到末尾自动消失；切换 tab 时自动把激活项滚到可视区中间。
+ antd-mobile Tabs 自带的右侧渐变遮罩只有 30px 且无箭头，用户难以察觉，故叠加此提示层。
+
+
+
+
+
② 打卡：日历 + 打卡合并（待确认草案）
+
把原来的「打卡」「日历」两个 tab 合成一个：上半部日历，下半部打卡卡片。取舍按下述规则：
+
+ | 项 | 规则 |
|---|
+ | 页面结构 | SwipeTabs 从 3 个减为 2 个：日历（含打卡） / 清单 |
+ | 上方日历 | 保留月历网格 + 月份左右切换 + 「回到今天」；去掉「昨天 / 今天 / 明天」分段控件（点日期即可，节省 38px 高度） |
+ | 日历高度 | 日期格子 38px → 31px，去掉 6 行补位中的空行；整块约 240px |
+ | 下方打卡 | 沿用现有打卡卡片样式，但紧凑化：内边距 12px → 8px，环形 58px → 42px（环宽 6 → 5），行高压缩，卡片间距 10 → 7px |
+ | 卡片内容 | 保留环形进度（含达标对勾 / 超额 +n）、名称、周期与目标、连续天数、打卡按钮；撤销 / 编辑 / 归档收进「⋯」，减少一行高度 |
+ | 分组 | 按周期类型分组：每天 → 每周 → 每月，每组一个小标题（左侧主色竖条 + 组名 + 条数）；去掉「每年」分组（已有年目标项并入「每月」区末尾的「其他周期」小标题，或建议直接隐藏年视图） |
+ | 联动 | 点日历某日 → 下方卡片即该日数据（进度仍按该日所属周期算）；未来日期只读，按钮变灰显示「计划」 |
+ | 空态 | 日历下方直接显示「该日没有打卡项」+「+ 新建」引导 |
+
+
+
+
+
+
打卡
+
+
+
+
+
+ ‹2026年10月›
+ 回到今天
+
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%今天 · 2026-10-22
+
+
+
今天已完成 2 / 4点环即打卡
+
+
+
每天2 项
+
+
+
+
+
喝水
+
每天 2 次 · 今日 1/2连续 12
+
+
打卡
+
⋯
+
+
+
+
+
+
吃药
+
每天 1 次 · 今日 2/1连续 30
+
+
再打一次
+
⋯
+
+
+
每周1 项
+
+
+
+
健身
+
每周 3 次 · 本周 1/3连续 5
+
+
打卡
+
⋯
+
+
+
每月1 项
+
+
+
+
读书
+
每月 12 次 · 本月 0/12
+
+
打卡
+
⋯
+
+
+
+
+
+
+
②-a 合并后的主视图（日历在上 · 打卡在下，按天 / 周 / 月分组）待确认
+
卡片整体压缩：环形 42px、内边距 8px、行距 7px，单卡高度约 58px（原 92px），一屏可看 4~5 项。分组顺序固定为 每天 → 每周 → 每月，
+ 组标题左侧 3px 主色竖条；无「每年」分组。日历顶部的「昨天 / 今天 / 明天」分段已去掉，直接点日期切换，选中日靠「今天」主色数字与蓝色实心块识别。
+
+
+
+
+
+
打卡
+
+
+
+
‹2026年10月›回到今天
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%明天 · 2026-10-23
+
+
明天计划（不可打卡）
+
+
+
+
+
+
②-b 未来日期（计划态）
+
选中未来日期时，打卡按钮统一变灰显示「计划」，点击不生效；环形仍显示该日所属周期的既有进度（此处举例为周期初）。
+ 补打窗口仍是最近 7 天，超出时同样只读。
+
+
+
+
+
+
打卡
+
+
+
+
‹2026年10月›回到今天
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%今天 · 2026-10-22
+
+
今天已完成 2 / 4点环即打卡
+
+
+
+
+
吃药 · 每天 1 次
+
撤销上次打卡今日 2 次
+
编辑打卡项名称 / 周期 / 目标
+
归档历史记录保留
+
取消
+
+
+
+
+
②-c 卡片「⋯」操作面板
+
紧凑化后卡片不再常显三个文字链接，改由右上角「⋯」唤出底部面板：撤销 / 编辑 / 归档。面板项 44px 高，
+ 「归档」用危险色；撤销仅在当日有记录时可用，否则置灰。
+
+
+
+
+
③ 清单：新增「模板」分类（与进行中 / 已归档并列）已实现
+
清单页分段从 2 个变为 3 个：进行中 / 已归档 / 模板。模板拥有独立的增删改查，按名称字母顺序（中文按拼音、数字按数值）排序；
+ 新建清单时只保留名称，去掉场景，模板改为点击后在右侧滑出的面板里选择。
+
+
+
+
+
打卡
+
+
+
+
+
+
出差预置11 项
+
+ 身份证 / 证件手机充电器 + 充电宝
+ 笔记本电脑 + 电源耳机+7
+
+
由此新建
+
+
+
+
回老家预置12 项
+
+ 身份证 / 证件钥匙
+ 手机充电器 + 充电宝换洗衣物+8
+
+
由此新建
+
+
+
+
露营装备2 项
+
帐篷睡袋
+
由此新建编辑删除
+
+
+
+
+
+
③-a 模板分类已实现
+
模板卡片：名称 + 「预置」标记 + 项数；下方最多展示 4 个检查项摘要（超出折叠为 +n）；底部操作「由此新建 / 编辑 / 删除」。
+ 系统预置模板不可编辑、不可删除（只保留「由此新建」）。右上角按钮随分段切换：模板页为「+ 新建模板」，其余为「+ 新建」。
+
+
+
+
+
+
打卡
+
+
+
+
+
+
选择模板×
+
按名称字母顺序排列
+
不使用模板空白清单
+
出差预置11 项
+
回老家预置12 项
+
露营装备2 项
+
+
+
+
+
+
③-b 新建清单 + 模板右侧滑出面板已实现
+
表单只剩两项：名称（≤20 字，必填）与 模板（可空）。场景选择器已移除——场景不再由用户填写，新建时沿用所选模板自带的场景（无模板则为空），历史数据仍正常展示场景标签。
+ 点模板行从右侧滑出 78% 宽面板：首项固定为「不使用模板」，其后按字母顺序列出全部模板（预置带标记、右侧显示项数），选中项主色高亮，点遮罩或 × 关闭。
+
+
+
+
+
+
+
③-c 模板编辑（增删改）已实现
+
新建 / 编辑共用同一弹层：模板名称（≤20 字）+ 检查项列表（逐条 ≤40 字，可删除、可追加）。保存时至少需 1 条有效检查项，名称为空或全空则拦截并 Toast 提示。
+ 删除模板需二次确认，且不影响已用该模板创建过的清单。
+
+
+
+
+
④ 补充：模板接口
+
+ | 方法 | 路径 | 说明 |
|---|
+ | GET | /api/checklists/templates | 模板列表（含预置），服务端按名称字母顺序排序 |
+ | GET | /api/checklists/templates/:id | 模板详情 |
+ | POST | /api/checklists/templates | 新建模板 { name, items[] } |
+ | PUT | /api/checklists/templates/:id | 改名称 / 检查项（预置模板拒绝） |
+ | DELETE | /api/checklists/templates/:id | 删自建模板（预置模板拒绝） |
+
+
排序口径：Intl.Collator('zh-Hans-CN', { numeric: true, sensitivity: 'base' })，中文按拼音、数字按数值比较，前后端一致。
+
+
+
3 组件状态定义Component States
+
+
3.0 页面头部（PageHeader）
+
+ | 项 | 取值 |
|---|
+ | 高度 | 23px（原 NavBar 45px 的一半），flex: 0 0 23px 不参与压缩 |
+ | 标题字号 / 字重 | 12px / 600 |
+ | 标题颜色 | 主色 #1677ff |
+ | 背景 | 页面底色 #f5f5f5 |
+ | 适用范围 | 打卡 / 宏观 / 监控；「我」页不使用 |
+
+
实现为独立组件 src/components/PageHeader.jsx，三页各自引用、互不影响；「我」页移除 NavBar 后头像区直接贴顶。
+
+
3.1 环形进度（尺寸 58，环宽 6，r=26，周长 163.4）
+
+ | 状态 | 条件 | 环形 | 中心 | 卡片底 | 按钮 |
|---|
+ | 未开始 | 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）；日历日标记 = 当日份额（当日次数 / 日均期望），两者口径不同，互不影响。
+
+
3.2 日历日期
+
+ | 状态 | 判定 | 视觉 |
|---|
+ 全部完成 full | 所有打卡项当日次数 ≥ 日均期望，且无超额 | 绿色圆点 |
+ 超额 over | 全部达标且存在任一打卡项当日次数 > 期望 | 紫色圆点 |
+ 部分完成 partial | 有完成但未全部完成 | 黄色圆点 |
+ 无 empty | 无记录 / 当天无打卡项 / 未来日期 | 不显示圆点 |
+ | 今天 | date = today | 数字主色加粗 |
+ | 选中 | 用户点击 | 主色实心底，数字与圆点转白 |
+ | 非本月 / 未来 | 月份不符 / date > today | 数字弱化（#c8c8c8 / #b0b0b0） |
+
+
+
3.3 清单检查项
+
+ | 状态 | 勾选框 | 文字 | 触发 |
|---|
+ | 未完成 | 1.5px 灰边圆圈，对勾透明 | #333 | 点击圆圈或文字切换 |
+ | 已完成 | 绿底绿边，白色对勾显现（0.2s） | #a0a0a0 + 删除线 | 同上，写 doneAt |
+ | 整单完成 | — | 进度条 100%、卡片转绿 | 最后一项勾选时播放特效 |
+
+
+
+
4 交互与动效Motion
+
+ | 动效 | 时长 | 曲线 / 实现 | 说明 |
|---|
+ | 环形增长 | 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 跟手横滑 | 与既有模块一致 |
+
+
+
4.1 打卡时序
+
用户点环 / 点「打卡」
+ └─ 前端乐观更新：done+1，重算 percent / completed / over，环形立即增长
+ └─ POST /api/checkin/habits/:id/check
+ ├─ 200 → 用服务端 item 覆盖本地；若 completed → 触发特效 + 震动
+ ├─ 400 → 回滚 + Toast（未来日期 / 超出 7 天补打窗口）
+ ├─ 409 → 视为已打卡，刷新一次（幂等）
+ └─ 网络失败 → 回滚 + Toast「打卡失败」
+
+
+
5 适配与可达性
+
+ | 项 | 约定 |
|---|
+ | 视口 | 设计稿 420×820；375~430px 内元素不换行、不裁切；底部 TabBar 4 项每项 ≥ 44px 可点宽度 |
+ | 安全区 | TabBar 使用 antd-mobile safeArea，页面底部留出 tabbar-h + safe-bottom |
+ | 动效 | 特效恒开（V0.2 设计变更，无开关）：单次 ≤900ms、pointer-events:none，不阻塞连续打卡；不再响应 prefers-reduced-motion |
+ | 大字号 | 卡片采用 grid 自适应列宽，文字超长换行不截断；名称限制 20 字、检查项 40 字 |
+ | 深色模式 | V0.2 沿用现有浅色主题，暂不适配 |
+
+
+
本文档为静态设计稿，不含脚本逻辑；实现对应 src/pages/checkin/*.jsx、src/components/RingProgress.jsx 与样式段（src/styles/globals.css）。接口与数据口径见《设计文档.md》与《数据库设计文档.md》。
+
+