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
+ 新建
0/2
喝水
每天 2 次连续 12
今日
打卡
编辑归档
1/3
健身
每周 3 次连续 5
10-19 ~ 10-25
打卡
撤销编辑归档
读书
每月 12 次连续 3
10-01 ~ 10-31
再打一次
撤销编辑归档
+1
吃药
每天 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 日历视图 · 今天选中

周一起始月历 + 「昨天 / 今天 / 明天」快捷分段;日期下方状态点:绿=全部完成、黄=部分完成、紫=超额、无点=未完成或未来。今天用主色数字并选中高亮,未来日期数字弱化。下方为该日明细,可直接打卡;底部展示本月完成率。

打卡
日历
清单
进行中
已归档
模板
+ 新建
出差 · 杭州出差
8/12›
身份证 / 证件×
手机充电器 + 充电宝×
笔记本电脑 + 电源×
耳机×
换洗衣物×
洗漱包×
常用药×
车票 / 机票 / 酒店确认×
雨伞×
工牌 / 名片×
报销单据×
现金零钱×
添加检查项
添加
全选全不选复制 存为模板归档删除
回老家 · 国庆回老家
0/12›
打卡
宏观
监控
我
2.3 清单视图 · 展开态

卡片头部常显标题、场景标签、进度条与 8/12;点击展开逐条勾选(勾选后绿色圆底、文字加删除线并弱化)。底部可继续添加检查项,并提供全选 / 全不选 / 复制 / 存为模板 / 归档 / 删除。收起态只保留头部一行。

10月22日 周四
已完成 2 / 4
+ 新建
0/2
喝水
每天 2 次
今日
打卡
编辑归档
新建打卡项
例如:喝水 / 健身 / 读书
每天
每周
每月
每年
−1+
补充说明
保存
取消
打卡
宏观
监控
我
2.4 新建 / 编辑打卡项(底部弹层)

名称 ≤20 字;周期四选一(每天 / 每周 / 每月 / 每年);目标次数用 Stepper,最小 1;颜色 7 色预设;备注可选。编辑态标题变为「编辑打卡项」并回填当前值。

10月22日 周四
已完成 3 / 4
+ 新建
吃药
每天 1 次连续 30
今日
再打一次
撤销编辑归档
1/3
健身
每周 3 次
10-19 ~ 10-25
打卡
撤销编辑归档
打卡
宏观
监控
我
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 天内的漏打卡。

打卡
日历
清单
进行中
已归档
模板
+ 新建
出差 · 杭州出差
12/12›
回老家 · 国庆回老家
0/12›
打卡
宏观
监控
我
2.7 清单全部完成(12/12)

进度条 100%、计数变为 12/12、卡片底色转 #f7fbf8,并播放与打卡一致的完成特效。清单完成后用户通常选择「归档」或「复制」复用。

10月22日 周四
已完成 0 / 0
+ 新建
○

还没有打卡项

创建第一个打卡项
打卡
宏观
监控
我
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(不再是卡片白),视觉上更轻。

10月23日 周五
已完成 2 / 10
+ 新建
1/2
喝水
每天 2 次连续 12
今日
打卡
撤销编辑归档
0/1
俯卧撑
每周 1 次
10-19 ~ 10-25
打卡
编辑归档
打卡
宏观
监控
我
①-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 项
1/2
喝水
每天 2 次 · 今日 1/2连续 12
打卡
⋯
+1
吃药
每天 1 次 · 今日 2/1连续 30
再打一次
⋯
每周1 项
1/3
健身
每周 3 次 · 本周 1/3连续 5
打卡
⋯
每月1 项
0/12
读书
每月 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
明天计划(不可打卡)
每天2 项
0/2
喝水
每天 2 次 · 当日 0/2
计划
⋯
0/1
吃药
每天 1 次 · 当日 0/1
计划
⋯
每周1 项
1/3
健身
每周 3 次 · 本周 1/3
计划
⋯
打卡
宏观
监控
我
②-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点环即打卡
每天2 项
1/2
喝水
每天 2 次 · 今日 1/2
打卡
⋯
+1
吃药
每天 1 次 · 今日 2/1
再打一次
⋯
吃药 · 每天 1 次
撤销上次打卡今日 2 次
编辑打卡项名称 / 周期 / 目标
归档历史记录保留
取消
打卡
宏观
监控
我
②-c 卡片「⋯」操作面板

紧凑化后卡片不再常显三个文字链接,改由右上角「⋯」唤出底部面板:撤销 / 编辑 / 归档。面板项 44px 高, 「归档」用危险色;撤销仅在当日有记录时可用,否则置灰。

③ 清单:新增「模板」分类(与进行中 / 已归档并列)已实现

清单页分段从 2 个变为 3 个:进行中 / 已归档 / 模板。模板拥有独立的增删改查,按名称字母顺序(中文按拼音、数字按数值)排序; 新建清单时只保留名称,去掉场景,模板改为点击后在右侧滑出的面板里选择。

日历
清单
进行中
已归档
模板
+ 新建模板
出差预置11 项
身份证 / 证件手机充电器 + 充电宝 笔记本电脑 + 电源耳机+7
由此新建
回老家预置12 项
身份证 / 证件钥匙 手机充电器 + 充电宝换洗衣物+8
由此新建
露营装备2 项
帐篷睡袋
由此新建编辑删除
打卡
宏观
监控
我
③-a 模板分类已实现

模板卡片:名称 + 「预置」标记 + 项数;下方最多展示 4 个检查项摘要(超出折叠为 +n);底部操作「由此新建 / 编辑 / 删除」。 系统预置模板不可编辑、不可删除(只保留「由此新建」)。右上角按钮随分段切换:模板页为「+ 新建模板」,其余为「+ 新建」。

日历
清单
新建检查清单
周末露营
露营装备2 项 ›
创建
取消
选择模板×
按名称字母顺序排列
不使用模板空白清单
出差预置11 项
回老家预置12 项
露营装备2 项
打卡
宏观
监控
我
③-b 新建清单 + 模板右侧滑出面板已实现

表单只剩两项:名称(≤20 字,必填)与 模板(可空)。场景选择器已移除——场景不再由用户填写,新建时沿用所选模板自带的场景(无模板则为空),历史数据仍正常展示场景标签。
点模板行从右侧滑出 78% 宽面板:首项固定为「不使用模板」,其后按字母顺序列出全部模板(预置带标记、右侧显示项数),选中项主色高亮,点遮罩或 × 关闭。

日历
清单
编辑模板
露营装备
1
帐篷
×
2
睡袋
×
3
检查项内容
×
+ 添加检查项
保存
取消
打卡
宏观
监控
我
③-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

动效时长曲线 / 实现说明
环形增长450mscubic-bezier(.4,0,.2,1),stroke-dashoffset 过渡12 点方向顺时针增长
对勾入场320msscale(.4) → 1 + 透明度达标瞬间出现
完成粒子≤900ms14 颗粒子按角度 --a、距离 --d 扩散,交错 40ms 延迟不阻塞点击
光环脉冲700ms主色圆环放大淡出与粒子同时开始
触感反馈18msnavigator.vibrate(18)WebView 不支持则静默跳过
进度条填充400mswidth 过渡清单勾选后更新
视图切换—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》。