梦 -蒸汽波- 2.0

本片亮点特色

• 窗口式界面

  仿照操作系统的操作方式，每个介绍页面都是可以操作的独立窗口。

• 午夜电台

  基于浏览器原生 Audio API 实现的音乐播放器，可以切换曲目，一边逛一边听音乐。

• 三语切换

  系统语言可在繁体中文、简体中文与英文之间切换。

幕后花絮难题与解法

1. 01 窗口不能被拖出可视范围

   难题

   拖拽窗口时要计算窗口位置与屏幕边界，避免窗口被拖到可视范围之外。

   解法

   借助 AI 推导边界计算并调整参数，降低算错的风险。拖拽中容易忽略的底层细节，则交给 interact.js 处理。

2. 02 浏览器缩放后窗口定位错乱

   难题

   用户调整浏览器大小后，窗口如果不重新计算，就无法在新的尺寸下正确定位，拖拽时会出现不可预期的错误。

   解法

   用 debounce 等用户停止调整尺寸，再通过 :key 重新创建窗口并居中，让用户自行拖回想要的位置。用户很少反复缩放，比起按比例换算位置，这个做法简单又可靠。

3. 03 点击的窗口要置于最上层

   难题

   要像操作系统一样，点到哪个窗口，哪个窗口就移到最上层。

   解法

   记录当前最大的 z-index，窗口被点击时设为最大值加一。z-index 上限是 2147483647，正常使用几乎不可能用完。