From c1f240d007cb9de29841c7481ff655f26fe6826b Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Thu, 19 Jun 2025 10:24:48 +0800
Subject: [PATCH] refactor(i18n): simplify language handling across components

use Astro.currentLocale as single source of truth for language
remove manual lang prop passing to components
components now read language from document lang attribute
---
 src/components/Footer.tsx           | 17 +++++++++++++++--
 src/components/GlassHeader.tsx      | 17 +++++++++++++++--
 src/components/LanguageSwitcher.tsx | 29 ++++++++++++++++++++++-------
 src/layouts/BlogLayout.astro        |  4 ++--
 src/pages/blog/index.astro          |  5 +++++
 src/pages/index.astro               |  5 +++--
 src/pages/projects.astro            |  5 +++--
 src/pages/zh/blog/index.astro       |  5 +++++
 src/pages/zh/index.astro            |  8 +++++---
 src/pages/zh/projects.astro         |  5 +++--
 10 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 47932bc..2b28cf2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,12 +1,25 @@
 import { useTranslations, type Lang } from "@/i18n/utils";
 import { personalInfo } from "@/lib/data";
 import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import { defaultLang } from "@/i18n/ui";
 
 interface FooterProps {
-  lang: Lang;
+  lang?: Lang;
 }
 
-export default function Footer({ lang }: FooterProps) {
+export default function Footer({ lang: propLang }: FooterProps) {
+  // 优先使用props传入的语言，如果没有则尝试从HTML lang属性获取
+  const [lang, setLang] = useState<Lang>(propLang || defaultLang);
+  
+  useEffect(() => {
+    // 在客户端运行时，从HTML lang属性获取当前语言
+    const htmlLang = document.documentElement.lang as Lang;
+    if (htmlLang && (!propLang || htmlLang !== lang)) {
+      setLang(htmlLang);
+    }
+  }, [propLang, lang]);
+
   const t = useTranslations(lang);
   return (
     <footer className="border-t border-purple-500/10 py-6 bg-gradient-to-b from-background to-muted/20 backdrop-blur-sm">
diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 3a37fc5..32cb98f 100644
--- a/src/components/GlassHeader.tsx
+++ b/src/components/GlassHeader.tsx
@@ -4,12 +4,25 @@ import ThemeToggle from "./ui/theme-toggle";
 import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
 import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
+import { defaultLang } from "@/i18n/ui";
 
+// 从window.document.documentElement.lang获取当前语言
 interface GlassHeaderProps {
-  lang: Lang;
+  lang?: Lang;
 }
 
-export default function GlassHeader({ lang }: GlassHeaderProps) {
+export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
+  // 优先使用props传入的语言，如果没有则尝试从HTML lang属性获取
+  const [lang, setLang] = useState<Lang>(propLang || defaultLang);
+  
+  useEffect(() => {
+    // 在客户端运行时，从HTML lang属性获取当前语言
+    const htmlLang = document.documentElement.lang as Lang;
+    if (htmlLang && (!propLang || htmlLang !== lang)) {
+      setLang(htmlLang);
+    }
+  }, [propLang, lang]);
+
   const t = useTranslations(lang);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 60a3644..12797f6 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { getLocalizedPath, type Lang } from "@/i18n/utils"; // getLangFromUrl is removed as Astro.currentLocale is used now.
+import { getLocalizedPath, type Lang } from "@/i18n/utils";
 import { languages as i18nLanguages, defaultLang } from "@/i18n/ui";
 import { Languages, Check, ChevronDown } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
@@ -7,26 +7,41 @@ import { motion, AnimatePresence } from "framer-motion";
 const availableLanguages = Object.entries(i18nLanguages).map(([code, name]) => ({
   code: code as Lang,
   name,
-  // You can add icons here if you have a mapping or a more complex structure in ui.ts
+  // 语言图标映射
   icon: code === 'en' ? '🇬🇧' : code === 'zh' ? '🇨🇳' : '🌐' 
 }));
 
 interface LanguageSwitcherProps {
-  lang: Lang;
+  lang?: Lang;
 }
 
-export default function LanguageSwitcher({ lang: initialLang }: LanguageSwitcherProps) {
+export default function LanguageSwitcher({ lang: propLang }: LanguageSwitcherProps) {
   const [isOpen, setIsOpen] = useState(false);
+  // 获取当前语言，优先使用props传入的语言
+  const [currentLang, setCurrentLang] = useState<Lang>(propLang || defaultLang);
+  
+  // 在客户端运行时，从HTML lang属性获取当前语言
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      const htmlLang = document.documentElement.lang as Lang;
+      if (htmlLang && (!propLang || htmlLang !== currentLang)) {
+        setCurrentLang(htmlLang);
+      }
+    }
+  }, [propLang, currentLang]);
+  
   const [selectedLanguage, setSelectedLanguage] = useState(() => {
-    return availableLanguages.find(l => l.code === initialLang) || availableLanguages.find(l => l.code === defaultLang) || availableLanguages[0];
+    return availableLanguages.find(l => l.code === currentLang) || 
+           availableLanguages.find(l => l.code === defaultLang) || 
+           availableLanguages[0];
   });
 
   useEffect(() => {
-    const currentLangObject = availableLanguages.find(l => l.code === initialLang);
+    const currentLangObject = availableLanguages.find(l => l.code === currentLang);
     if (currentLangObject && currentLangObject.code !== selectedLanguage.code) {
       setSelectedLanguage(currentLangObject);
     }
-  }, [initialLang, selectedLanguage.code]);
+  }, [currentLang, selectedLanguage.code]);
 
   const toggleOpen = () => setIsOpen(!isOpen);
 
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 589c1a5..4f887d3 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -39,7 +39,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
       <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10"></div>
     </div>
     <!-- Glass Header with navigation -->
-    <GlassHeader lang={lang} client:load />
+    <GlassHeader client:load />
     
     <!-- Main content with proper spacing for fixed header -->
     <div class="pt-16">
@@ -47,7 +47,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
     </div>
     
     <!-- Footer -->
-    <Footer lang={lang} client:load />
+    <Footer client:load />
   </body>
 </html>
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 54a6b9b..338adc6 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,6 +1,11 @@
 ---
 import BlogLayout from '../../layouts/BlogLayout.astro';
 import BlogList from '../../components/BlogList.tsx';
+import { type Lang } from '@/i18n/utils';
+import { defaultLang } from '@/i18n/ui';
+
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 
 // Sample blog data - inline for now
 const blogPosts = [
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5679fec..a3e1bde 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,13 +7,14 @@ import { useTranslations, type Lang } from "@/i18n/utils";
 import { defaultLang } from "@/i18n/ui";
 import { personalInfo } from "@/lib/data";
 
-const lang: Lang = defaultLang;
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 const t = useTranslations(lang);
 const pageTitle = t('site.title'); 
 ---
 
 <Layout title={pageTitle}>
-  <GlassHeader lang={lang} client:only="react" />
+  <GlassHeader client:only="react" />
   <main class="min-h-screen">
     <!-- Hero Section - Inlined Content -->
     <section class="py-32 relative overflow-hidden min-h-screen flex items-center">
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 0d30fcb..ee7a0c6 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -5,13 +5,14 @@ import Footer from "@/components/Footer";
 import { useTranslations, type Lang } from "@/i18n/utils";
 import { defaultLang } from "@/i18n/ui";
 
-const lang: Lang = defaultLang;
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 const t = useTranslations(lang);
 const pageTitle = t('projects.title');
 ---
 
 <Layout title={pageTitle}>
-  <GlassHeader lang={lang} client:only="react" />
+  <GlassHeader client:only="react" />
   <main class="min-h-screen">
     <!-- Projects Hero Section -->
     <section class="py-24 relative overflow-hidden">
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index e3b8e26..0e70abe 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -1,6 +1,11 @@
 ---
 import BlogLayout from '../../../layouts/BlogLayout.astro';
 import BlogList from '../../../components/BlogList.tsx';
+import { type Lang } from '@/i18n/utils';
+import { defaultLang } from '@/i18n/ui';
+
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 
 // 示例博客数据 - 暂时内联
 const blogPosts = [
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index 46a7602..fd62081 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -3,16 +3,18 @@ import Layout from "@/layouts/Layout.astro";
 import GlassHeader from "@/components/GlassHeader.tsx";
 import SkillsMarquee from "@/components/SkillsMarquee.tsx";
 import Footer from "@/components/Footer.tsx";
-import { useTranslations } from "@/i18n/utils";
+import { useTranslations, type Lang } from "@/i18n/utils";
+import { defaultLang } from "@/i18n/ui";
 import { personalInfo } from "@/lib/data";
 
-const lang: "en" | "zh" = 'zh';
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 const t = useTranslations(lang);
 const pageTitle = t('site.title');
 ---
 
 <Layout title={pageTitle}>
-  <GlassHeader lang={lang} client:only="react" />
+  <GlassHeader client:only="react" />
   <main class="min-h-screen">
     <!-- Hero Section - Inlined Content -->
     <section class="py-32 relative overflow-hidden min-h-screen flex items-center">
diff --git a/src/pages/zh/projects.astro b/src/pages/zh/projects.astro
index cffa9e1..76f9391 100644
--- a/src/pages/zh/projects.astro
+++ b/src/pages/zh/projects.astro
@@ -5,13 +5,14 @@ import Footer from "@/components/Footer";
 import { useTranslations, type Lang } from "@/i18n/utils";
 import { defaultLang } from "@/i18n/ui";
 
-const lang: Lang = 'zh';
+// 使用Astro.currentLocale获取当前语言环境
+const lang = Astro.currentLocale as Lang || defaultLang;
 const t = useTranslations(lang);
 const pageTitle = t('projects.title');
 ---
 
 <Layout title={pageTitle}>
-  <GlassHeader lang={lang} client:only="react" />
+  <GlassHeader client:only="react" />
   <main class="min-h-screen">
     <!-- Projects Hero Section -->
     <section class="py-24 relative overflow-hidden">