From fdbc983d72932ec64adac6491711797068088463 Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Sun, 20 Apr 2025 16:03:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.astro      |   2 -
 src/components/ThemeToggle.astro | 241 ++++++++++++++++++-------------
 2 files changed, 138 insertions(+), 105 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 7c6f674..df340c3 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -288,8 +288,6 @@ const normalizedPath =
 <script>
 // Header组件逻辑 - 使用"进入→绑定→退出完全清理"模式
 (function() {
-  // 生成唯一ID用于日志跟踪
-  const headerId = 'header-' + (new Date().getTime());
   
   // 存储所有事件监听器，便于统一清理
   const listeners: Array<{
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 31fb008..5c6cca8 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -99,119 +99,135 @@ const {
     // 确保当前没有活动的主题切换按钮事件
     cleanup();
     
-    // 获取所有主题切换按钮
-    const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
-    
-    if (!themeToggleButtons.length) {
-      return;
-    }
-    
-    let transitioning = false;
-    
-    // 获取系统首选主题
-    const getSystemTheme = (): string => {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    };
-
-    // 初始化主题
-    const initializeTheme = (): void => {
-      const storedTheme = localStorage.getItem('theme');
-      const systemTheme = getSystemTheme();
+    // 添加延时确保DOM已准备好
+    setTimeout(() => {
+      // 获取所有主题切换按钮
+      const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
       
-      // 按照逻辑优先级应用主题
-      if (storedTheme) {
-        document.documentElement.dataset.theme = storedTheme;
-      } else if (systemTheme) {
-        document.documentElement.dataset.theme = systemTheme;
-      } else {
-        document.documentElement.dataset.theme = 'light';
-      }
-    };
-    
-    // 切换主题
-    const toggleTheme = (): void => {
-      if (transitioning) {
+      if (!themeToggleButtons.length) {
+        // 如果找不到按钮，再尝试一次延迟初始化
+        setTimeout(setupThemeToggle, 50);
         return;
       }
       
-      transitioning = true;
+      let transitioning = false;
       
-      // 获取当前主题
-      const currentTheme = document.documentElement.dataset.theme;
-      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-      
-      // 更新 HTML 属性
-      document.documentElement.dataset.theme = newTheme;
-      
-      // 更新本地存储
-      const systemTheme = getSystemTheme();
-      
-      if (newTheme === systemTheme) {
-        localStorage.removeItem('theme');
-      } else {
-        localStorage.setItem('theme', newTheme);
-      }
-      
-      // 添加防抖
-      if (transitionTimeout) {
-        clearTimeout(transitionTimeout);
-      }
-      
-      transitionTimeout = setTimeout(() => {
-        transitioning = false;
-      }, 300);
-    };
-    
-    // 监听系统主题变化
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    
-    const handleMediaChange = (e: MediaQueryListEvent): void => {
-      if (!localStorage.getItem('theme')) {
-        const newTheme = e.matches ? 'dark' : 'light';
-        document.documentElement.dataset.theme = newTheme;
-      }
-    };
-    
-    // 添加系统主题变化监听
-    addListener(mediaQuery, 'change', handleMediaChange as EventListener);
+      // 获取系统首选主题
+      const getSystemTheme = (): string => {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      };
 
-    // 为每个按钮添加事件
-    themeToggleButtons.forEach(button => {
-      (button as HTMLElement).style.pointerEvents = 'auto';
-      
-      // 创建点击处理函数
-      const clickHandler = (e: Event) => {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleTheme();
+      // 初始化主题
+      const initializeTheme = (): void => {
+        const storedTheme = localStorage.getItem('theme');
+        const systemTheme = getSystemTheme();
+        
+        // 按照逻辑优先级应用主题
+        if (storedTheme) {
+          document.documentElement.dataset.theme = storedTheme;
+        } else if (systemTheme) {
+          document.documentElement.dataset.theme = systemTheme;
+        } else {
+          document.documentElement.dataset.theme = 'light';
+        }
       };
       
-      // 点击事件 - 使用捕获模式
-      addListener(button, 'click', clickHandler, { capture: true });
-      
-      // 键盘事件
-      addListener(button, 'keydown', ((e: KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          toggleTheme();
+      // 切换主题
+      const toggleTheme = (): void => {
+        if (transitioning) {
+          return;
         }
-      }) as EventListener);
-    });
-    
-    // 处理移动端主题切换容器
-    const themeToggleContainer = document.getElementById('theme-toggle-container');
-    if (themeToggleContainer) {
-      addListener(themeToggleContainer, 'click', (e: Event) => {
+        
+        transitioning = true;
+        
+        // 获取当前主题
+        const currentTheme = document.documentElement.dataset.theme;
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        
+        // 更新 HTML 属性
+        document.documentElement.dataset.theme = newTheme;
+        
+        // 更新本地存储
+        const systemTheme = getSystemTheme();
+        
+        if (newTheme === systemTheme) {
+          localStorage.removeItem('theme');
+        } else {
+          localStorage.setItem('theme', newTheme);
+        }
+        
+        // 添加防抖
+        if (transitionTimeout) {
+          clearTimeout(transitionTimeout);
+        }
+        
+        transitionTimeout = setTimeout(() => {
+          transitioning = false;
+        }, 300);
+      };
+      
+      // 监听系统主题变化
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      
+      const handleMediaChange = (e: MediaQueryListEvent): void => {
+        if (!localStorage.getItem('theme')) {
+          const newTheme = e.matches ? 'dark' : 'light';
+          document.documentElement.dataset.theme = newTheme;
+        }
+      };
+      
+      // 添加系统主题变化监听
+      addListener(mediaQuery, 'change', handleMediaChange as EventListener);
+
+      // 为每个按钮添加事件
+      themeToggleButtons.forEach(button => {
+        (button as HTMLElement).style.pointerEvents = 'auto';
+        
+        // 创建点击处理函数
+        const clickHandler = (e: Event) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleTheme();
+        };
+        
+        // 点击事件 - 使用捕获模式
+        addListener(button, 'click', clickHandler, { capture: true, passive: false });
+        
+        // 键盘事件
+        addListener(button, 'keydown', ((e: KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleTheme();
+          }
+        }) as EventListener);
+      });
+      
+      // 处理移动端主题切换容器
+      const themeToggleContainer = document.getElementById('theme-toggle-container');
+      if (themeToggleContainer) {
+        addListener(themeToggleContainer, 'click', (e: Event) => {
+          const target = e.target as HTMLElement;
+          if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
+            e.stopPropagation();
+            toggleTheme();
+          }
+        }, { capture: true, passive: false });
+      }
+      
+      // 添加事件代理，确保即使在DOM重建后点击事件也能正常工作
+      addListener(document.body, 'click', (e: Event) => {
         const target = e.target as HTMLElement;
-        if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
+        // 检查是否点击了主题切换按钮
+        if (target.id === 'theme-toggle-button' || target.closest('#theme-toggle-button')) {
+          e.preventDefault();
           e.stopPropagation();
           toggleTheme();
         }
-      });
-    }
-    
-    // 初始化主题
-    initializeTheme();
+      }, { capture: true, passive: false });
+      
+      // 初始化主题
+      initializeTheme();
+    }, 0);
   }
   
   // 注册清理函数
@@ -229,8 +245,14 @@ const {
   
   // 初始化函数
   function init(): void {
-    setupThemeToggle();
-    registerCleanup();
+    // 确保先清理之前的事件
+    cleanup();
+    
+    // 设置延时确保DOM已完全更新
+    setTimeout(() => {
+      setupThemeToggle();
+      registerCleanup();
+    }, 10);
   }
   
   // 在页面加载后初始化
@@ -245,6 +267,19 @@ const {
   document.addEventListener('astro:page-load', init);
   
   // Swup页面内容替换后重新初始化
-  document.addEventListener('swup:contentReplaced', init);
+  document.addEventListener('swup:contentReplaced', () => {
+    // 先清理现有事件
+    cleanup();
+    
+    // 确保在微任务队列后执行，让DOM完全更新
+    Promise.resolve().then(() => {
+      // 再次确保事件已清理
+      cleanup();
+      // 重新设置主题切换
+      setupThemeToggle();
+      // 注册新的清理函数
+      registerCleanup();
+    });
+  });
 })();
 </script> 
\ No newline at end of file