全站主题切换与动效优化

今天做了什么

  • $frontend-design 定方向:深色科技感 + 荧光绿 + 杂志拼贴不变,浅色主题走「工程图纸纸面」,而不是通用奶油白。
  • Base.astroPindou.astro 加无闪烁主题初始化:localStorage 优先,其次跟随系统 prefers-color-scheme
  • 新增共享 site/src/scripts/theme.tssite/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] 即可继承同一套动效语言。