系統升級模擬器

升級模擬器是一個全螢幕瀏覽器覆蓋層，使用三個核心瀏覽器 API 重現作業系統升級畫面的視覺外觀：Fullscreen API、用於進度動畫的 CSS transition，以及用於階段排程的 JavaScript 計時器。當使用者點選「開始模擬」時，會呼叫 document.documentElement.requestFullscreen()——此 API 需要使用者手勢（點選或按鍵）作為安全措施，無法在頁面載入時自動呼叫，並會觸發瀏覽器通知告知使用者如何退出全螢幕。 進度動畫使用非線性緩動曲線而非線性遞增。時間 t 處的進度值 P(t)（t 從 0 到 1，總時長 30 秒）遵循二次緩入緩出：t < 0.5 時 P(t) = 2t²，t ≥ 0.5 時 P(t) = 1 − 2(1−t)²。這創造了快速開始（下載階段）、緩慢中間（安裝階段）和快速結束（設定階段）的效果，模仿了真實作業系統更新器的行為。進度條寬度由 CSS width 屬性的 transition 驅動，持續時間與 setInterval 的 tick 頻率（100 毫秒）匹配，緩動值被映射為 UI 中顯示的百分比。 階段排程使用有限狀態機搭配 setTimeout 鏈式回呼。Windows 模擬的階段在總時長的 0%、30%、60% 和 90% 處轉換，每個階段觸發文字更新，Windows 在 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 標誌 SVG、倒數計時器）、Linux（深色終端搭配等寬字型和紅/黃/綠視窗控制項）、Android（Material Design 綠色 #4CAF50、機器人圖示 SVG）
• 計時器清理：所有 setInterval 和 setTimeout 句柄儲存在 ref 中，並在停止函式和 useEffect 清理回呼中清除——這防止了元件在模擬進行中解除安裝時的記憶體洩漏和過期狀態更新