fix: 修复水合错误

Author: longsizhuo

app/components/Header.tsx

@@ -10,10 +10,12 @@ import { LiveEditionLabel } from "./LiveEditionLabel";
 export function Header() {
   const now = new Date();
   const editionTimestampMs = now.getTime();
+  // 使用 UTC 时区格式化日期，保证服务端渲染结果与客户端一致
   const formattedDate = now.toLocaleDateString("en-US", {
     month: "long",
     day: "numeric",
     year: "numeric",
+    timeZone: "Australia/Sydney",
   });
   return (
     <header className="fixed top-0 w-full z-50 bg-[var(--background)] border-b border-[var(--foreground)] py-2 transition-colors duration-300">

app/components/LiveEditionLabel.tsx

@@ -34,8 +34,17 @@ export function LiveEditionLabel({ initialTimestamp }: LiveEditionLabelProps) {
     return () => clearInterval(intervalId);
   }, []);
 
-  const editionDay = currentDate.getDate();
-  const editionMonth = currentDate.toLocaleString("en-US", { month: "long" });
+  // 初次渲染（水合阶段）使用固定时区（悉尼），保证服务端/客户端一致，
+  // 避免时区差异导致 React error #418（hydration mismatch）。
+  // 挂载后也继续使用悉尼时区保持一致性。
+  const TIMEZONE = "Australia/Sydney";
+  const editionDay = Number(
+    currentDate.toLocaleString("en-US", { day: "numeric", timeZone: TIMEZONE }),
+  );
+  const editionMonth = currentDate.toLocaleString("en-US", {
+    month: "long",
+    timeZone: TIMEZONE,
+  });
 
   return (
     <>

app/components/ThemeProvider.tsx

@@ -27,19 +27,22 @@ export function ThemeProvider({
   storageKey = "vite-ui-theme",
   ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(() => {
-    if (typeof window === "undefined") {
-      return defaultTheme;
-    }
+  // 初始状态始终使用 defaultTheme，保证服务端/客户端一致，
+  // 避免 localStorage 读取导致水合不匹配。
+  // layout.tsx 中的内联脚本已确保首屏无闪烁（在 React 水合前设置了 CSS class）。
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
 
+  // 挂载后从 localStorage 读取用户之前保存的主题
+  useEffect(() => {
     try {
       const stored = localStorage.getItem(storageKey) as Theme | null;
-      return stored ?? defaultTheme;
+      if (stored) {
+        setTheme(stored);
+      }
     } catch {
-      console.error("Error reading theme from localStorage");
-      return defaultTheme;
+      // 忽略 localStorage 访问错误
     }
-  });
+  }, [storageKey]);
 
   useEffect(() => {
     const root = window.document.documentElement;