摘要:
深色模式、LIVE 模式與面板收合狀態存入 localStorage,
頁面載入時自動套用,不需每次手動切換。
根本原因:
theme/mode/panelOpen 只存在 Zustand 記憶體 state,
重新整理即重置為淺色 + 模擬模式。
影響:
使用者偏好跨重整保留;LIVE 偏好在開機時由 runtime.setMode 套用,
確保 SSE 連線流程正確執行。無痕模式等 localStorage 不可用時安全降級。
修法:
- office-store:loadPref/savePref 包裝(try/catch),
theme/panelOpen 初始值讀取,setTheme/setMode/togglePanel 寫入
- App:啟動時 loadPreferredMode() === "live" 則呼叫 setMode("live")
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
27 lines
794 B
TypeScript
27 lines
794 B
TypeScript
import { useEffect } from "react";
|
|
import { FloorPlan } from "./components/FloorPlan";
|
|
import { HeaderBar } from "./components/HeaderBar";
|
|
import { SidePanel } from "./components/SidePanel";
|
|
import { setMode, startRuntime } from "./sim/runtime";
|
|
import { loadPreferredMode, useOfficeStore } from "./store/office-store";
|
|
|
|
export default function App() {
|
|
const theme = useOfficeStore((s) => s.theme);
|
|
const panelOpen = useOfficeStore((s) => s.panelOpen);
|
|
|
|
useEffect(() => {
|
|
startRuntime();
|
|
if (loadPreferredMode() === "live") setMode("live");
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`app ${theme}`}>
|
|
<HeaderBar />
|
|
<div className={`main-row ${panelOpen ? "" : "panel-closed"}`}>
|
|
<FloorPlan />
|
|
{panelOpen && <SidePanel />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|