2569718930@qq.com
cf5502b6d6
ScanTerminalDashboard had accumulated terminal fetching, theme persistence, local clock updates, and AI pinned-city hydration in one component. Moving those responsibilities into focused hooks keeps the screen component as the composition layer while preserving the existing UI and data flow. Constraint: Refactor must not change the current decision-card or scan-terminal behavior. Rejected: Split visual card components in the same commit | too much surface area for one safe refactor pass. Confidence: high Scope-risk: moderate Reversibility: clean Tested: npm run build Not-tested: Browser manual regression across map, calendar, and pinned-card interactions.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { formatUserLocalTime } from "@/components/dashboard/scan-terminal/decision-utils";
|
|
|
|
export type ThemeMode = "dark" | "light";
|
|
|
|
export function useUserLocalClock() {
|
|
const [userLocalTime, setUserLocalTime] = useState("--");
|
|
|
|
useEffect(() => {
|
|
setUserLocalTime(formatUserLocalTime());
|
|
const intervalId = window.setInterval(() => {
|
|
setUserLocalTime(formatUserLocalTime());
|
|
}, 10_000);
|
|
return () => window.clearInterval(intervalId);
|
|
}, []);
|
|
|
|
return userLocalTime;
|
|
}
|
|
|
|
export function useScanTerminalTheme() {
|
|
const [themeMode, setThemeMode] = useState<ThemeMode>("dark");
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
const hadLight = root.classList.contains("light");
|
|
const hadDark = root.classList.contains("dark");
|
|
root.classList.toggle("light", themeMode === "light");
|
|
root.classList.toggle("dark", themeMode === "dark");
|
|
return () => {
|
|
root.classList.toggle("light", hadLight);
|
|
root.classList.toggle("dark", hadDark);
|
|
};
|
|
}, [themeMode]);
|
|
|
|
useEffect(() => {
|
|
const stored = window.localStorage.getItem("polyweather_scan_theme");
|
|
if (stored === "light") {
|
|
setThemeMode("light");
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
window.localStorage.setItem("polyweather_scan_theme", themeMode);
|
|
}, [themeMode]);
|
|
|
|
return { setThemeMode, themeMode };
|
|
}
|