Bili Progress 近况：封面修复、杯子活化，还有一次被手感推翻的设计

五月那篇《自建 B站学习进度追踪工具》发完之后，项目没有停在那个版本。这两个月陆续加了一些东西，挑几个有意思的记一下。

一句过时的话：封面终于能加载了

上一篇里写过一句「历史记录里的视频封面目前无法加载，只能靠标题识别」——这句话现在是错的，已经删掉了。

根因是 Chrome 的 ORB（Opaque Response Blocking）机制：跨域图片请求在某些情况下会被浏览器直接拦掉，不管服务端响应对不对。加一个 crossorigin 属性、让请求走标准 CORS 流程就解决了。属于那种「一行属性的事，但不知道原因之前完全无从下手」的坑。

杯子活化：加了又撤的一次视觉迭代

进度可视化那个”3D 圆柱体”，做了一轮叫”杯子活化”的美化：液面波浪从简单旋转改成双层错速晃动、杯里加了几颗气泡、杯口加单侧高光模拟玻璃质感。

做完之后拿真实设备做了组 A/B/C 对比，结果和预想的不一样——旋转的波浪比”更精致”的错速晃动更有动感，气泡在真实屏幕尺寸下太小反而显得多余。于是撤了一半：波浪动画退回最初的旋转方案，气泡整个删掉，只留下高光和液面亮线。桌面端顺带把网格的 960px 宽度限制也去掉了，宽屏下看着松快很多。

这次迭代最大的收获不是加了什么，而是确认了一件事：脑内设计和真机手感之间的差距，不看实物永远猜不准。

顺手的几个功能和加固

• 一键标记完成观看 + 设置页把已看完的视频折叠收起来，列表不再随着追踪的视频变多而拖得老长
• 同步引擎一轮修复：进度归档改成按自然日判断（避免临界点抖动）、拉取历史记录加了翻页上限和请求间隔（防止被限流）、并发请求加锁（同一时间只有一次同步在跑）——这轮还顺带把测试覆盖率补到了 21 个用例
• 设置接口以前把”SESSDATA 是否已配置”和”值本身”混在一次响应里判断，现在明确只回一个布尔值，绝不回传原值
• 前端错误处理统一收口，之前有的地方裸调 fetch、失败了界面还显示”成功”，现在所有请求走同一层，失败必有反馈

后来：一版叫「液体玻璃」的翻新

再往后又做了一轮完整的视觉语言翻新，方向叫「液体玻璃」：面板换成磨砂半透明加背景模糊，杯子的颜色向外晕染一圈，底部导航从通栏改成浮起条。

落地的时候给自己定了一条硬约束：杯子的波浪灌水动效保持原样，这版不碰它。backdrop-filter 也只用在卡片、导航、弹窗这些少数地方，杯子本身只留晕染不加模糊。headless 下 4 倍 CPU 节流实测 43–50fps，A/B 对比下来掉帧主要来自既有的波浪动画，玻璃化的增量很小。真机上的手感还在等最后确认。

项目页面见 Bili Progress →。