SodaFridge OS: 像素风格重构开发记录

22 Apr 2026 #Jekyll

经过一系列迭代，我的博客站点的的像素风格重构工作已正式宣告完成啦。在它还只有一个主页的时候，Gemini 2.5 在 Web 端就帮了我很多忙；到最后复杂的重构和 JS 逻辑已经全部交给 Gemini CLI （3.1 inside）代劳了。 G 老师甚至有一些我在规划外的有趣 idea 在重构中被添加进去，然后被我发现后修改，迭代成一个真的很有意思的特性。比如开始进入的 BOOT 动画，思来想去我做了一些调整，还是把 G 老师的自作主张给留下了。

这次站点的超大重构不仅为了界面的视觉冲击力和交互逻辑，也有一部分在为自己的过去告别。

Gemini 为我做了本次重构的核心关键点总结：

1. 资源管理器式应用重构

我们将“文章列表”与“照片管理器”全面升级为类似 Windows 98 资源管理器 的深度交互模式：

  • 侧边栏集成：为文章列表添加了标签分类侧边栏，为照片管理器添加了集合（Collection）侧边栏，支持实时过滤。
  • 动态视图切换：实现了“详细列表”与“磁贴网格”视图的自由切换，满足不同场景下的浏览需求。
  • 实时搜索控制台：在工具栏中集成了像素风格的搜索框，支持对标题和标签的即时检索。
  • 智能照片查看器：照片管理器配备了支持最大化、点击缩放（原图/自适应切换）的专用查看窗，并针对高分辨率图片优化了渲染性能。

2. 系统交互逻辑优化

针对 OS 式网页的特殊性，我们优化了核心内核逻辑：

  • 双重持久化 BOOT 跳过机制：
    • 逻辑层：我们使用了 localStorage 来存储用户的“永久偏好”（如“永远跳过动画”），而使用 sessionStorage 来处理“会话状态”。
    • 实现：当用户从应用子页（如 Biocard 或 Articles）点击关闭返回首页时，脚本会设置一个 sodaOS_skipBootOnce: true 的会话标志。handleBootSequence 函数在执行前会进行双重校验：只要任一标志位为 true，就会立即执行 bootScreen.remove() 并直接触发 startDialogSystem()。这种设计避免了在单次访问内频繁观看 4.5 秒动画的疲劳感，同时保留了初次访问时的仪式感。
  • 对话框生成的洗牌算法（Shuffle Algorithm）：
    • 首页的弹窗系统并非简单的顺序读取，而是通过 Fisher-Yates 洗牌算法 对 _data/dialogs.yml 注入的索引数组进行打乱。
    • 在 initializeAvailableDialogs() 中，我们生成一个 [0, 1, 2, ...n] 的索引序列，通过随机置换保证了每次访问时弹窗出现的顺序都是不可预测的，从而模拟出“系统故障”或“内心戏”的随机感。

      BTW，这里的“内心戏”是Gemini自己分析得到的结果。我在一开始做这个弹窗的时候不可避免的和其他千禧风/电波感/精神有点问题感的作品影响，想塑造出不断弹出的略显病娇的内容来展现精神状态的一种氛围，感觉 Gemini 捕捉得还是很到位的。

  • 窗口层级（Z-Index）调度：
    • 重构了 Z-Index 系统。普通窗口采用递增步长（highestZIndex++），而系统设置窗口（System Control Panel）则被赋予了 5000+ 的硬性阈值。这种“分段式优先级”设计确保了关键管理界面永远拥有最高的“显示权重”。

3. 视觉与美学渲染内核

在保持复古韵味的同时，利用现代 Web 技术实现了像素风的硬件加速：

  • 像素渲染策略（Rendering Hints）：
    • 我们在 html 根层级强制开启了 image-rendering: pixelated。这在浏览器渲染流水线中指示 GPU 使用“最近邻插值（Nearest-neighbor interpolation）”而非双线性插值，确保了即使在视网膜屏幕上，像素边缘依然锐利如刀。
  • 阶梯式动画加载（Staggered Animation）：
    • 侧边栏菜单的弹出并非整块移动，而是通过 transition-delay 实现了 index * 0.07s 的线性延迟。这种微小的时延差异在视觉上产生了一种“数据流逐行加载”的电子感。
  • CRT 扫描线仿真：
    • 结合了透明度交替的 CSS 线性渐变与 flicker 关键帧动画。通过在 0.15s 内高频随机化 opacity（例如从 0.27 到 0.90），模拟出了早期阴极射线管显示器的电子束波动感。

4. 性能与细节

  • 延迟加载：在照片墙中引入了 IntersectionObserver，实现了图片的懒加载，显著提升了大量高清素材下的首屏加载速度。
  • 状态栏动态反馈：所有应用窗口的底部状态栏现在均能实时显示文件总数、选择状态及系统版本信息。

此次重构标志着 SodaFridge OS 在“复古未来主义”设计语言上的成熟。系统现在不仅是一个展示内容的博客，更是一个具备完整交互体验的、活着的虚拟操作系统。

“I feel quite alive.” —— SodaFridge OS Kernel

记录人：Timothyhay (via Gemini CLI)

这也是 Gemini 写的。实际上不如说记录人是我和它。