fa

src/contexts/SettingsContext.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+export interface Settings {
+  language: 'zh' | 'en';
+  logoText: string;
+  timezone: string;
+  theme: 'light' | 'dark' | 'system';
+}
+
+interface SettingsContextType {
+  settings: Settings;
+  updateSettings: (newSettings: Partial<Settings>) => void;
+}
+
+const defaultSettings: Settings = {
+  language: 'zh',
+  logoText: '蛋定-项目待办',
+  timezone: 'Asia/Shanghai',
+  theme: 'system',
+};
+
+const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettings] = useState<Settings>(defaultSettings);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    
+    // Load settings from localStorage
+    const savedSettings = localStorage.getItem('stark-settings');
+    if (savedSettings) {
+      try {
+        const parsed = JSON.parse(savedSettings);
+        // Merge with default settings to ensure all fields exist
+        const mergedSettings = { ...defaultSettings, ...parsed };
+        setSettings(mergedSettings);
+        console.log('[Settings] Loaded from localStorage:', mergedSettings);
+        // Apply theme immediately after loading
+        requestAnimationFrame(() => {
+          applyTheme(mergedSettings.theme);
+        });
+      } catch (error) {
+        console.error('[Settings] Failed to parse settings:', error);
+        // Use default settings on error
+        setSettings(defaultSettings);
+        applyTheme(defaultSettings.theme);
+      }
+    } else {
+      console.log('[Settings] No saved settings, using defaults:', defaultSettings);
+      // Save default settings to localStorage
+      localStorage.setItem('stark-settings', JSON.stringify(defaultSettings));
+      applyTheme(defaultSettings.theme);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isClient) return;
+    
+    // Save settings to localStorage whenever they change
+    try {
+      localStorage.setItem('stark-settings', JSON.stringify(settings));
+      console.log('[Settings] Saved to localStorage:', settings);
+    } catch (error) {
+      console.error('[Settings] Failed to save settings:', error);
+    }
+    
+    // Apply theme
+    applyTheme(settings.theme);
+  }, [settings, isClient]);
+
+  useEffect(() => {
+    if (!isClient) return;
+    
+    // Listen to system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = () => {
+      if (settings.theme === 'system') {
+        applyTheme('system');
+      }
+    };
+    
+    mediaQuery.addEventListener('change', handleChange);
+    
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [settings.theme, isClient]);
+
+  const applyTheme = (theme: 'light' | 'dark' | 'system') => {
+    if (typeof window === 'undefined') return;
+    
+    const root = document.documentElement;
+    
+    // 强制移除过渡效果，确保立即切换
+    root.style.setProperty('transition', 'none');
+    
+    if (theme === 'system') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    } else if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    // 强制重绘，确保立即生效
+    void root.offsetHeight;
+    
+    // 恢复过渡效果
+    requestAnimationFrame(() => {
+      root.style.removeProperty('transition');
+    });
+    
+    console.log(`[Theme] Applied theme: ${theme}, dark class: ${root.classList.contains('dark')}`);
+  };
+
+  const updateSettings = (newSettings: Partial<Settings>) => {
+    setSettings(prev => {
+      const updated = { ...prev, ...newSettings };
+      
+      console.log('[Settings] Updating settings:', { old: prev, new: newSettings, updated });
+      
+      // 如果更新了主题，立即应用
+      if (newSettings.theme !== undefined) {
+        requestAnimationFrame(() => {
+          applyTheme(newSettings.theme!);
+        });
+      }
+      
+      return updated;
+    });
+  };
+
+  return (
+    <SettingsContext.Provider value={{ settings, updateSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettings() {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error('useSettings must be used within SettingsProvider');
+  }
+  return context;
+}