Files
claude-office/src/App.tsx
T
JianMiauandClaude Fable 5 b324775f65 記住主題/模式/面板偏好,重開頁面自動還原
摘要:
深色模式、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>
2026-07-20 14:29:38 +08:00

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>
);
}