今天做了什么
$frontend-design 定方向:深色科技感 + 荧光绿 + 杂志拼贴不变,浅色主题走「工程图纸纸面」,而不是通用奶油白。
- 在
Base.astro 与 Pindou.astro 加无闪烁主题初始化:localStorage 优先,其次跟随系统 prefers-color-scheme。
- 新增共享
site/src/scripts/theme.ts 与 site/src/scripts/site-motion.ts,首页流水线时间轴从 index.astro 迁入共享脚本。
- 全站加
[data-reveal] / [data-reveal-group] 滚动入场:页头、统计条、卡片网格、记录列表、拼豆各分区;卡片组用 0.04s stagger。
- 过滤与折叠展开后派发
ds:refresh 并调用 ScrollTrigger.refresh();prefers-reduced-motion 下内容直接可见。
- Playwright 双端验证:1440/390 无横向溢出、无 console/page error、主题切换可持久化、reduced-motion 可见。
过程与坑
- GSAP 会给元素写
translate: none; rotate: none; scale: none;,原筛选脚本用 :not([style*="none"]) 统计可见卡片,导致分组被误判为全隐藏;改成 card.style.display !== 'none' 判断。
- 动效隐藏态只挂在
.js 上,JS 未启用或 reduced-motion 时不会出现内容不可见。
home-light 截图最初拍成深色,是因为测试脚本把「初始主题 + 点击切换」当成同一步;补拍了正确浅色图。
下一步
- 上线后观察真实设备手感,动效过重或滚动触发过早再按
review-animations 标准回调。
- 后续新页面沿用
[data-reveal] / [data-reveal-group] 即可继承同一套动效语言。