系统升级模拟器

升级模拟器是一个全屏浏览器覆盖层，使用三个核心浏览器 API 复现操作系统升级画面的视觉效果：Fullscreen API、用于进度动画的 CSS transition，以及用于阶段调度的 JavaScript 定时器。当用户点击「开始模拟」时，会调用 document.documentElement.requestFullscreen()——该 API 要求用户手势（点击或按键）作为安全措施，不能在页面加载时自动调用，并会触发浏览器通知，告知用户如何退出全屏。 进度动画使用非线性缓动曲线而非线性递增。在总时长 30 秒内，时间 t（从 0 到 1）对应的进度值 P(t) 采用二次缓入缓出：t < 0.5 时 P(t) = 2t²，t ≥ 0.5 时 P(t) = 1 − 2(1−t)²。这产生了快开始（下载阶段）、慢中间（安装阶段）、快结束（配置阶段）的效果，模拟了真实操作系统更新程序的行为。进度条宽度由 CSS width 属性的 transition 驱动，持续时间与 setInterval 的 100ms 节拍匹配，缓动值被映射为 UI 中显示的百分比。 阶段调度使用基于 setTimeout 链式回调的有限状态机。Windows 模拟在总时长的 0%、30%、60% 和 90% 处进行阶段转换，每个阶段触发文本更新，并在 100% 时显示重启消息。macOS 和 Android 模拟使用更简单的两阶段模型（准备/安装）。Linux 模拟通过根据当前进度值有条件地追加行来生成渐进式终端输出——每条新的 apt 日志行在特定进度阈值处出现，营造出实时包管理器的假象。 两个安全退出机制确保用户始终可以离开：覆盖层上的点击事件监听器调用 document.exitFullscreen() 并清除所有定时器；fullscreenchange 事件监听器检测用户按 ESC（无需页面参与即可退出全屏）并重置所有内部状态。fullscreenchange 事件在拥有全屏状态的元素上触发，因此在 document.documentElement 上监听可以捕获程序化和用户发起的退出。所有渲染均通过 HTML/CSS/JS 完成——页面不进行系统调用、不写入文件，关闭标签页即可完全恢复之前的视口状态。

• Fullscreen API 安全机制：requestFullscreen() 要求用户手势（点击/按键），符合 WHATWG Fullscreen Standard §1.2 规范——浏览器会显示「按 ESC 退出」覆盖层，页面无法抑制，确保用户始终知道自己处于全屏模式。
• 进度缓动：二次缓入缓出曲线 P(t) = 2t²（t < 0.5）/ 1−2(1−t)²（t ≥ 0.5）产生快-慢-快节奏，模拟真实操作系统更新程序——缓动在 JavaScript 中计算并作为 CSS 宽度百分比应用，将动画逻辑与渲染解耦。
• 阶段状态机：setTimeout 链沿预定义阶段阈值推进（Windows：0% → 30% → 60% → 90% → 100%），每个阶段更新显示的消息——退出时清除链条以防止覆盖层关闭后过期回调继续执行。
• Linux 终端模拟：渐进式 apt 输出通过在特定进度阈值（10%、25%、40%、55%、70%、85%、100%）有条件渲染行来生成——每个阈值添加逼真的包名和字节数，「Fetched X MB in Ys」行仅在达到总量时出现。
• 退出安全机制：覆盖层上的点击监听器调用 exitFullscreen() 并清除所有定时器；document.documentElement 上的 fullscreenchange 事件监听器检测 ESC 发起的退出并重置状态——两条路径独立保证清理。
• 平台特定渲染：每个操作系统变体使用不同的 CSS——Windows（#0078D4 蓝色、Segoe UI 字体、圆形旋转指示器）、macOS（黑色背景、San Francisco 字体、Apple logo SVG、倒计时器）、Linux（深色终端、等宽字体、红/黄/绿窗口控件）、Android（Material Design 绿色 #4CAF50、机器人图标 SVG）。
• 定时器清理：所有 setInterval 和 setTimeout 句柄存储在 ref 中，在 stop 函数和 useEffect 清理回调中均被清除——防止组件在活跃模拟期间卸载时出现内存泄漏和过期状态更新。