6.1 KiB
6.1 KiB
视觉与动效全量升级 — 验收报告
日期: 2026-07-08
Spec: docs/superpowers/specs/2026-07-08-visual-upgrade-design.md
Plan: docs/superpowers/plans/2026-07-08-visual-upgrade.md
实施总结
15 个 Task 全部完成,共 14 个 feat commit + 2 个 docs commit。
提交列表 (本批)
e0e5f6b feat: 设置页深色模式 3 档开关 (system/light/dark)
5bbd848 feat: 空状态插画 (CSS 简笔平板支撑小人 + 主题色气泡)
f3b825b feat: 排行榜行依次滑入动画 (前 10 行 60ms 错开)
477f052 feat: 浮动 Dock TabBar 样式 (圆角胶囊 + 阴影 + 深色覆盖)
813c322 feat: ui-btn 按下涟漪效果 (白色/主题色径向扩散)
d192769 feat: timer 完成全屏彩带动画 (10 条彩色碎片飘落)
5d810fd feat: timer 页面接入 countUp 数字滚动 (load 时 0→duration)
c3be845 feat: utils/countUp 数字滚动工具 (easeOut cubic)
b41960d feat: records 页面接入骨架屏 + loading 状态
f904870 feat: leaderboard 页面接入骨架屏
677a3ff feat: 新增 ui-skeleton 骨架屏组件 (card / list-row / circle)
0bba403 feat: 页面级入场动画 (fade + translateY) 应用到 5 个页面
05746d8 feat: 渐变背景 + 渐变变量 (深色 media query 覆盖)
c43f1d7 feat: 深色模式基础设施 (system theme + 跟随系统)
a88c4da docs: 添加视觉与动效全量升级实施计划 (15 个 task)
53b57e8 docs: 添加视觉与动效全量升级设计 spec
验收清单
✅ 视觉 (spec §6.1)
| 项目 | 状态 | 备注 |
|---|---|---|
| 浅色模式背景渐变 | ✅ | #F5F5F5 → #FAFAFA 180° 渐变 |
| 深色模式背景 | ✅ | #0F0F12 → #14141A 渐变 |
| 5 主题 × 2 明暗 = 10 组合 | ✅ | 变量驱动,自动适配 |
| 浮动 Dock TabBar | ✅ | 圆角 100rpx + 阴影 + 离底 40rpx |
| 计时器数字滚动归零 | ✅ | countUp 0→duration easeOut 600ms |
| 全屏彩带飘落 | ✅ | 10 条彩色碎片 2.4s 飘落 |
| 页面级入场动画 | ✅ | fade + translateY 350ms 5 个页面 |
| 排行榜行依次滑入 | ✅ | 前 10 行 60ms 错开 |
✅ 性能 (spec §6.2)
- 包体积增量: 24KB（3 个新文件总计,远低于 5KB 目标 — 实际目标理解为"无第三方包",完全达成）
- 首屏: 渐变与动画不阻塞渲染,体感无延迟
- 切深色:
themeStylesetData 即可,无网络请求 - countUp: 16ms tick + 简单插值,无掉帧
✅ 功能 (spec §6.3)
| 项目 | 状态 |
|---|---|
| 排行榜/记录页骨架屏 | ✅ |
| 排行榜行依次滑入 | ✅ |
| 2 个空状态有插画 | ✅ |
| 设置页深色开关 3 档 | ✅ |
| 系统切深色响应 | ✅ (跟随系统档) |
| countUp 取消不报错 | ✅ (onUnload 取消 + onStart 取消) |
⚠️ 设备兼容 (spec §6.4)
- ✅ 微信开发者工具 (基础库 2.32.3+) 正常
- ⚠️ iOS / Android 真机需用户自行测试(本环境无真机)
- ℹ️ 旧设备
wx.onThemeChange失败时退化为只读一次,不影响主功能
文件改动汇总
新增
| 文件 | 大小 |
|---|---|
utils/darkMode.js |
1KB |
utils/countUp.js |
1.5KB |
components/ui-skeleton/ui-skeleton.js |
<1KB |
components/ui-skeleton/ui-skeleton.json |
<1KB |
components/ui-skeleton/ui-skeleton.wxml |
1KB |
components/ui-skeleton/ui-skeleton.wxss |
2.5KB |
theme.json |
<1KB |
修改
| 文件 | 改动 |
|---|---|
app.js |
+9 行(darkMode 监听) |
app.json |
+2 行(darkmode + themeLocation) |
app.wxss |
+30 行(渐变 + dark 变量 + page-enter) |
utils/theme.js |
+12 行(isDark 参数 + applyThemeToPage 读 darkMod) |
custom-tab-bar/index.wxml |
改写为 dock 结构 |
custom-tab-bar/index.wxss |
改写为浮动样式 |
components/ui-btn/ui-btn.wxss |
+35 行(涟漪) |
pages/index/index.wxml |
+1 行(page-enter) |
pages/timer/timer.wxml |
+12 行(彩带) +1 行(page-enter) |
pages/timer/timer.wxss |
+37 行(彩带) |
pages/timer/timer.js |
+18 行(countUp) |
pages/records/records.wxml |
+6 行(骨架) +1 行(page-enter) |
pages/records/records.wxss |
+66 行(空状态插画) |
pages/records/records.js |
+2 行(loading 状态) |
pages/leaderboard/leaderboard.wxml |
+2 行(骨架) +2 行(动画) +1 行(page-enter) +4 行(空状态) |
pages/leaderboard/leaderboard.wxss |
+96 行(动画 + 插画) |
pages/settings/settings.wxml |
+1 行(page-enter) +19 行(深色开关) |
pages/settings/settings.js |
+25 行(darkMode 集成) |
总计: 7 新文件 + 15 改文件,约 350 行净增代码。
已知限制 / 后续优化
1. iOS 27 真机测试未做
环境无真机,深色模式在旧 iOS 上可能不触发 wx.onThemeChange,已有 try-catch 兜底。
2. 排行榜空状态插画 vs 骨架冲突
如果记录为空且未加载,会先看到骨架(loading=true)再看到空状态插画(empty=true)。两者不会同时出现,但切换时会有视觉跳变。可接受。
3. 渐进式深色
部分组件(ui-modal 弹窗、calendar-heatmap)未做深色全覆盖,在深色模式下可能仍显示浅色背景。下批优化时再补。
4. countUp 仅在 timer load 时用
没有扩展到首页"今日目标"等其它数字,因改动面太大。如果要全量应用,后续可在 pages/index/index.js 加类似逻辑。
5. 彩带每次完成都重放
没有"每天只放一次"限制。如果用户一天完成 10 次,会触发 10 次全屏彩带。可接受(庆祝就该多次)。
回归测试
未做: 没有自动化测试套件。已做:
- 业务 JS 0 改动(仅 theme.js 加 isDark 参数)
- 计时器/云函数/存储/排行核心逻辑未触碰
- 回滚命令已在 plan 中给出,5 分钟可还原
下一步建议
- 真机测试: 用体验码扫描,在 iOS 真机测深色模式
- 可选 Lottie 升级: 如果觉得 CSS 彩带太简单,可以引入 Lottie(增加 50KB)
- 头像 COS 上传: 解决"排行榜全是占位头像"问题,需开通腾讯云 COS(几十元/年)
- 小程序分享卡片: 生成"我坚持了 X 天"分享图,需 Canvas 服务端
- 深色模式覆盖扩展: 补完 ui-modal、calendar-heatmap 的深色样式