init

Author: 1ssqq1lxr

src/components/Header.tsx

@@ -9,6 +9,7 @@ import FluxMQLogo from "./FluxMQLogo";
 const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDark, setIsDark] = useState(false);
+  const [currentLanguage, setCurrentLanguage] = useState('en');
   const { t, i18n } = useTranslation();
 
   useEffect(() => {
@@ -27,12 +28,35 @@ const Header = () => {
     return () => mediaQuery.removeEventListener('change', checkDarkMode);
   }, []);
 
+  // 监听语言变化，确保状态同步
+  useEffect(() => {
+    const handleLanguageChange = (lng: string) => {
+      setCurrentLanguage(lng);
+    };
+
+    // 设置初始语言状态
+    setCurrentLanguage(i18n.language);
+
+    // 监听语言变化
+    i18n.on('languageChanged', handleLanguageChange);
+
+    return () => {
+      i18n.off('languageChanged', handleLanguageChange);
+    };
+  }, [i18n]);
+
   const changeLanguage = (lng: string) => {
-    i18n.changeLanguage(lng);
+    // 防止重复切换
+    if (i18n.language === lng) return;
+    
+    // 平滑切换语言，避免页面晃动
+    i18n.changeLanguage(lng).then(() => {
+      setCurrentLanguage(lng);
+    });
   };
 
   const getCurrentLanguage = () => {
-    return i18n.language === 'zh' ? '中文' : 'English';
+    return currentLanguage === 'zh' ? '中文' : 'English';
   };
 
   return (
@@ -133,14 +157,14 @@ const Header = () => {
                   </div>
                   <div className="flex space-x-2">
                     <Button 
-                      variant={i18n.language === 'en' ? 'default' : 'ghost'} 
+                      variant={currentLanguage === 'en' ? 'default' : 'ghost'} 
                       size="sm"
                       onClick={() => changeLanguage('en')}
                     >
                       English
                     </Button>
                     <Button 
-                      variant={i18n.language === 'zh' ? 'default' : 'ghost'} 
+                      variant={currentLanguage === 'zh' ? 'default' : 'ghost'} 
                       size="sm"
                       onClick={() => changeLanguage('zh')}
                     >

src/index.css

@@ -9,6 +9,15 @@
     /* Dark theme for tech/developer tool aesthetic */
     --background: 222 47% 4%;
     --foreground: 210 40% 98%;
+    
+    /* 防止语言切换时页面晃动 */
+    html {
+      scroll-behavior: smooth;
+    }
+    
+    body {
+      transition: none !important;
+    }
 
     --card: 222 47% 6%;
     --card-foreground: 210 40% 98%;

src/lib/i18n.ts

@@ -985,13 +985,16 @@ i18n
   .init({
     resources,
     fallbackLng: 'en',
+    lng: 'en', // 设置默认语言为英文
     debug: false,
     interpolation: {
       escapeValue: false
     },
     detection: {
       order: ['localStorage', 'navigator', 'htmlTag'],
-      caches: ['localStorage']
+      caches: ['localStorage'],
+      lookupLocalStorage: 'i18nextLng',
+      checkWhitelist: true
     }
   });