From 4005345f4ec104afb611add3a9a6617845d4f267 Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Tue, 13 May 2025 19:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=92=8Cswup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemeToggle.astro | 1556 ++++++++++++------------------
 src/scripts/swup-init.js         |    7 +-
 2 files changed, 603 insertions(+), 960 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 7b16334..a2da222 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -4,9 +4,9 @@ interface Props {
   width?: number;
   fill?: string;
   className?: string;
-  // 更新主题过渡动画模式配置
+  // 过渡动画模式配置
   transitionMode?: "expand" | "shrink" | "auto" | "reverse-auto";
-  // 新增自定义主题切换动画时间
+  // 自定义主题切换动画时间
   transitionDuration?: number;
 }
 
@@ -66,950 +66,544 @@ import "../styles/theme-toggle.css";
 </button>
 
 <script is:inline>
-  // 主题切换逻辑 - 自销毁模式
-  (function() {
-    
-    // 集中管理所有事件监听器
-    const allListeners = [];
-    
-    // 单独保存清理事件的监听器引用
-    const cleanupListeners = [];
-    
-    // 定时器引用
-    let transitionTimeout = null;
-    let rippleTimeout = null;
-    
-    // 局部存储当前过渡的引用
-    let currentTransition = null;
-    
-    // 主题过渡模式
-    const TRANSITION_MODES = {
-      EXPAND: 'expand',     // 扩散模式
-      SHRINK: 'shrink',     // 收缩模式
-      AUTO: 'auto',         // 自动模式（根据切换方向选择）
-      REVERSE_AUTO: 'reverse-auto'  // 反向自动模式
-    };
-    
-    // 获取用户自定义的动画持续时间
-    let ANIMATION_DURATION = 700; // 默认动画持续时间
-    const customDuration = document.querySelector('#theme-toggle-button')?.dataset?.transitionDuration;
-    if (customDuration && !isNaN(parseInt(customDuration))) {
-      ANIMATION_DURATION = parseInt(customDuration);
+// 主题切换逻辑 - 精简版
+(function() {
+  // 常量定义
+  const TRANSITION_MODES = {
+    EXPAND: 'expand',     // 扩散模式
+    SHRINK: 'shrink',     // 收缩模式
+    AUTO: 'auto',         // 自动模式
+    REVERSE_AUTO: 'reverse-auto'  // 反向自动模式
+  };
+  
+  // 状态变量
+  let currentTransition = null;
+  let transitionTimeout = null;
+  let rippleTimeout = null;
+  let lastThemeToggleTime = 0;
+  const allListeners = [];
+  
+  // 获取自定义动画持续时间
+  let ANIMATION_DURATION = 700; // 默认值
+  const button = document.querySelector('#theme-toggle-button');
+  if (button?.dataset?.transitionDuration) {
+    const customDuration = parseInt(button.dataset.transitionDuration);
+    if (!isNaN(customDuration)) {
+      ANIMATION_DURATION = customDuration;
     }
+  }
+  
+  // 计算动画相关时间
+  const ANIMATION_BUFFER = 100;
+  const TOTAL_TRANSITION_TIME = ANIMATION_DURATION + ANIMATION_BUFFER;
+  const COOLDOWN_TIME = TOTAL_TRANSITION_TIME + 200;
+  
+  // 工具函数
+  function setTransitioning(button, isTransitioning) {
+    if (button) button.dataset.themeTransitioning = isTransitioning.toString();
+  }
+  
+  function isTransitioning(button) {
+    return button && button.dataset.themeTransitioning === 'true';
+  }
+  
+  function canToggleTheme() {
+    return Date.now() - lastThemeToggleTime >= COOLDOWN_TIME;
+  }
+  
+  function recordToggleTime() {
+    lastThemeToggleTime = Date.now();
+  }
+  
+  function addListener(element, eventType, handler, options) {
+    if (!element) return null;
     
-    // 动画配置（毫秒）
-    const ANIMATION_BUFFER = 100;   // 动画缓冲时间
-    const TOTAL_TRANSITION_TIME = ANIMATION_DURATION + ANIMATION_BUFFER; // 总过渡时间
-    // 简化的冷却时间追踪 - 使用单一的上次切换时间
-    let lastThemeToggleTime = 0;
-    const COOLDOWN_TIME = TOTAL_TRANSITION_TIME + 200; // 防抖冷却时间
-    
-    // 辅助函数：设置/获取按钮的过渡状态
-    function setTransitioning(button, isTransitioning) {
-      if (!button) return;
-      button.dataset.themeTransitioning = isTransitioning.toString();
-    }
-    
-    function isTransitioning(button) {
-      if (!button) return false;
-      return button.dataset.themeTransitioning === 'true';
-    }
-    
-    // 检查是否可以执行切换（冷却中检查）
-    function canToggleTheme() {
-      const now = Date.now();
-      // 如果距离上次切换时间小于冷却时间，不允许切换
-      if (now - lastThemeToggleTime < COOLDOWN_TIME) {
-        return false;
+    element.addEventListener(eventType, handler, options);
+    allListeners.push({ element, eventType, handler, options });
+    return handler;
+  }
+  
+  function cleanupResources() {
+    // 取消正在进行的transition
+    if (currentTransition && typeof currentTransition.skipTransition === 'function') {
+      try {
+        currentTransition.skipTransition();
+      } catch (err) {
+        // 忽略AbortError
+      } finally {
+        currentTransition = null;
       }
-      return true;
     }
     
-    // 记录切换时间
-    function recordToggleTime() {
-      lastThemeToggleTime = Date.now();
+    // 清理计时器
+    if (transitionTimeout) {
+      clearTimeout(transitionTimeout);
+      transitionTimeout = null;
     }
     
-    // 从本地存储获取主题过渡模式
-    function getThemeTransitionMode() {
-      const savedMode = localStorage.getItem('theme-transition-mode');
-      return Object.values(TRANSITION_MODES).includes(savedMode) 
-        ? savedMode 
-        : TRANSITION_MODES.AUTO;
+    if (rippleTimeout) {
+      clearTimeout(rippleTimeout);
+      rippleTimeout = null;
     }
-
-    // 添加事件监听器并记录，方便后续统一清理
-    function addListener(element, eventType, handler, options) {
-      if (!element) {
-        console.error(`主题切换尝试为不存在的元素添加事件:`, eventType);
-        return null;
+    
+    // 清理临时样式
+    const tempStyle = document.getElementById('theme-transition-temp-style');
+    if (tempStyle) tempStyle.remove();
+    
+    // 移除过渡动画标记
+    document.documentElement.classList.remove('theme-transition-active');
+    
+    // 移除波纹元素
+    document.querySelectorAll(".theme-ripple").forEach(ripple => {
+      if (ripple.parentNode) ripple.parentNode.removeChild(ripple);
+    });
+    
+    // 重置切换按钮状态
+    document.querySelectorAll("#theme-toggle-button").forEach(btn => {
+      setTransitioning(btn, false);
+    });
+    
+    // 移除所有事件监听器
+    allListeners.forEach(({ element, eventType, handler, options }) => {
+      try {
+        element.removeEventListener(eventType, handler, options);
+      } catch (err) {
+        console.error(`移除事件监听器出错:`, err);
       }
-
-      element.addEventListener(eventType, handler, options);
-      allListeners.push({ element, eventType, handler, options });
-      return handler;
+    });
+    allListeners.length = 0;
+  }
+  
+  // 创建波纹动画
+  function createRippleEffect(x, y, element) {
+    const container = element.querySelector("#ripple-container") || element;
+    
+    // 清理旧的波纹
+    container.querySelectorAll(".theme-ripple").forEach(ripple => ripple.remove());
+    
+    // 创建新波纹
+    const ripple = document.createElement("span");
+    ripple.classList.add("theme-ripple");
+    
+    // 设置波纹位置
+    const rect = element.getBoundingClientRect();
+    ripple.style.left = `${x - rect.left}px`;
+    ripple.style.top = `${y - rect.top}px`;
+    
+    // 添加到容器
+    container.appendChild(ripple);
+    
+    // 自动清理
+    rippleTimeout = setTimeout(() => {
+      if (ripple.parentNode) ripple.parentNode.removeChild(ripple);
+    }, 1000);
+    
+    return ripple;
+  }
+  
+  // 确定动画类型
+  function determineAnimationType(transitionMode, fromTheme, toTheme) {
+    // 固定模式直接返回
+    if ([TRANSITION_MODES.EXPAND, TRANSITION_MODES.SHRINK].includes(transitionMode)) {
+      return transitionMode;
     }
-
-    // 统一的清理函数，执行完整清理并自销毁
-    function selfDestruct() {
-      // 0. 取消正在进行的transition
-      if (currentTransition && typeof currentTransition.skipTransition === 'function') {
-        try {
+    
+    // 自动模式
+    if (transitionMode === TRANSITION_MODES.AUTO) {
+      return (fromTheme === 'light' && toTheme === 'dark') 
+        ? TRANSITION_MODES.EXPAND 
+        : TRANSITION_MODES.SHRINK;
+    }
+    
+    // 反向自动模式
+    if (transitionMode === TRANSITION_MODES.REVERSE_AUTO) {
+      return (fromTheme === 'light' && toTheme === 'dark') 
+        ? TRANSITION_MODES.SHRINK 
+        : TRANSITION_MODES.EXPAND;
+    }
+    
+    // 默认扩散
+    return TRANSITION_MODES.EXPAND;
+  }
+  
+  // 使用View Transitions API创建过渡效果
+  function createViewTransition(callback, x, y, fromTheme, toTheme, transitionMode) {
+    // 取消先前的过渡
+    if (currentTransition) {
+      try {
+        if (typeof currentTransition.skipTransition === 'function') {
           currentTransition.skipTransition();
-        } catch (err) {
-          // 忽略AbortError，这是正常现象
-        } finally {
-          currentTransition = null;
         }
+      } catch (e) {
+        // 忽略错误
+      } finally {
+        currentTransition = null;
       }
+    }
+    
+    // 如果不支持View Transitions API，直接执行回调
+    if (!document.startViewTransition) {
+      callback();
+      return Promise.resolve();
+    }
+    
+    try {
+      // 清除状态标记
+      document.documentElement.classList.remove('theme-transition-active');
       
-      // 1. 清理所有计时器
+      // 清除可能存在的临时样式
+      const oldStyle = document.getElementById('theme-transition-temp-style');
+      if (oldStyle) oldStyle.remove();
+      
+      // 计算从点击位置到页面四个角的最大距离
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const maxDistance = Math.max(
+        Math.hypot(x, y),                  // 左上角
+        Math.hypot(w - x, y),              // 右上角
+        Math.hypot(x, h - y),              // 左下角
+        Math.hypot(w - x, h - y)           // 右下角
+      );
+      
+      // 设置波纹颜色CSS变量
+      document.documentElement.style.setProperty(
+        '--theme-ripple-color',
+        toTheme === 'dark' ? '230, 230, 230' : '20, 20, 20'
+      );
+      
+      // 添加过渡标记类
+      document.documentElement.classList.add('theme-transition-active');
+      
+      // 确定动画类型
+      const animationType = determineAnimationType(transitionMode, fromTheme, toTheme);
+      
+      // 简化的回调函数
+      const safeCallback = () => {
+        try {
+          // 更新HTML属性
+          document.documentElement.dataset.theme = toTheme;
+          
+          // 更新本地存储
+          const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+          if (toTheme === systemTheme) {
+            localStorage.removeItem("theme");
+          } else {
+            localStorage.setItem("theme", toTheme);
+          }
+          
+          // 执行用户回调
+          callback();
+        } catch (err) {
+          console.error(`主题切换回调执行出错:`, err);
+        }
+      };
+      
+      // 启动视图过渡
+      const transition = document.startViewTransition(safeCallback);
+      currentTransition = transition;
+      
+      // 生成动画需要的SVG资源
+      const gradientOffset = 0.75;
+      const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs><radialGradient id="toggle-theme-gradient"><stop offset="${gradientOffset}"/><stop offset="1" stop-opacity="0"/></radialGradient></defs><circle cx="4" cy="4" r="4" fill="url(#toggle-theme-gradient)"/></svg>`;
+      const maskUrl = `data:image/svg+xml;base64,${btoa(maskSvg)}`;
+      
+      // 计算动画需要多大才能覆盖整个屏幕
+      const maxRadius = Math.ceil(maxDistance / gradientOffset);
+      
+      // 异步应用自定义动画
+      (async function applyAnimation() {
+        try {
+          // 等待过渡准备完成
+          await transition.ready;
+          
+          // 创建样式元素
+          const style = document.createElement('style');
+          style.id = 'theme-transition-temp-style';
+          
+          if (animationType === TRANSITION_MODES.EXPAND) {
+            // 扩散效果 - 新主题从点击位置向外扩散
+            style.textContent = `
+              ::view-transition-new(root) {
+                animation: none !important;
+                -webkit-mask-image: url('${maskUrl}') !important;
+                mask-image: url('${maskUrl}') !important;
+                -webkit-mask-repeat: no-repeat !important;
+                mask-repeat: no-repeat !important;
+                -webkit-mask-position: ${x}px ${y}px !important;
+                mask-position: ${x}px ${y}px !important;
+                -webkit-mask-size: 0 !important;
+                mask-size: 0 !important;
+                z-index: 1000 !important;
+              }
+            `;
+            
+            document.head.appendChild(style);
+            
+            // 强制重新计算样式
+            window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
+            
+            // 使用requestAnimationFrame确保样式先被应用
+            requestAnimationFrame(() => {
+              if (style.parentNode) {
+                style.textContent = `
+                  ::view-transition-new(root) {
+                    animation: none !important;
+                    -webkit-mask-image: url('${maskUrl}') !important;
+                    mask-image: url('${maskUrl}') !important;
+                    -webkit-mask-repeat: no-repeat !important;
+                    mask-repeat: no-repeat !important;
+                    -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
+                    mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
+                    -webkit-mask-size: ${maxRadius * 2}px !important;
+                    mask-size: ${maxRadius * 2}px !important;
+                    z-index: 1000 !important;
+                    transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-out, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-out,
+                              mask-position ${ANIMATION_DURATION/1000}s ease-out, mask-size ${ANIMATION_DURATION/1000}s ease-out !important;
+                  }
+                `;
+              }
+            });
+            
+          } else {
+            // 收缩效果 - 旧主题从全屏收缩到点击位置
+            style.textContent = `
+              ::view-transition-old(root) {
+                animation: none !important;
+                -webkit-mask-image: url('${maskUrl}') !important;
+                mask-image: url('${maskUrl}') !important;
+                -webkit-mask-repeat: no-repeat !important;
+                mask-repeat: no-repeat !important;
+                -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
+                mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
+                -webkit-mask-size: ${maxRadius * 2}px !important;
+                mask-size: ${maxRadius * 2}px !important;
+                z-index: 999 !important;
+              }
+              ::view-transition-new(root) {
+                z-index: 998 !important;
+              }
+            `;
+            
+            document.head.appendChild(style);
+            
+            // 强制重新计算样式
+            window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
+            
+            // 使用requestAnimationFrame确保样式先被应用
+            requestAnimationFrame(() => {
+              if (style.parentNode) {
+                style.textContent = `
+                  ::view-transition-old(root) {
+                    animation: none !important;
+                    -webkit-mask-image: url('${maskUrl}') !important;
+                    mask-image: url('${maskUrl}') !important;
+                    -webkit-mask-repeat: no-repeat !important;
+                    mask-repeat: no-repeat !important;
+                    -webkit-mask-position: ${x}px ${y}px !important;
+                    mask-position: ${x}px ${y}px !important;
+                    -webkit-mask-size: 0 !important;
+                    mask-size: 0 !important;
+                    z-index: 999 !important;
+                    transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-in, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-in,
+                              mask-position ${ANIMATION_DURATION/1000}s ease-in, mask-size ${ANIMATION_DURATION/1000}s ease-in !important;
+                  }
+                  ::view-transition-new(root) {
+                    z-index: 998 !important;
+                  }
+                `;
+              }
+            });
+          }
+          
+          // 清理临时样式
+          setTimeout(() => {
+            if (document.getElementById('theme-transition-temp-style')) {
+              document.getElementById('theme-transition-temp-style').remove();
+            }
+          }, TOTAL_TRANSITION_TIME);
+          
+        } catch (error) {
+          // 处理错误 - 如果View Transitions API失败，至少确保主题被切换
+          if (error.name !== 'AbortError') {
+            console.error(`应用主题过渡动画出错:`, error);
+            // 确保主题被切换
+            safeCallback();
+          }
+        }
+      })();
+      
+      // 返回过渡完成的Promise
+      return transition.finished
+        .then(() => {
+          // 移除主题过渡标记类
+          document.documentElement.classList.remove('theme-transition-active');
+          currentTransition = null;
+        })
+        .catch(error => {
+          if (error.name !== 'AbortError') {
+            console.error(`主题切换过渡动画错误:`, error);
+          }
+          // 确保标记类被移除
+          document.documentElement.classList.remove('theme-transition-active');
+          currentTransition = null;
+        });
+        
+    } catch (error) {
+      console.error(`主题切换错误:`, error);
+      // 出错时也执行回调确保主题切换
+      callback();
+      document.documentElement.classList.remove('theme-transition-active');
+      return Promise.resolve();
+    }
+  }
+  
+  // 设置主题切换功能
+  function setupThemeToggle() {
+    const themeToggleButtons = document.querySelectorAll("#theme-toggle-button");
+    
+    if (!themeToggleButtons.length) {
+      console.error(`未找到主题切换按钮`);
+      return;
+    }
+    
+    // 状态清理函数
+    const resetThemeToggleState = () => {
       if (transitionTimeout) {
         clearTimeout(transitionTimeout);
         transitionTimeout = null;
       }
       
-      if (rippleTimeout) {
-        clearTimeout(rippleTimeout);
-        rippleTimeout = null;
-      }
-      
-      // 2. 清理临时样式元素
-      const tempStyle = document.getElementById('theme-transition-temp-style');
-      if (tempStyle) {
-        tempStyle.remove();
-      }
-      
-      // 3. 移除过渡动画标记
-      document.documentElement.classList.remove('theme-transition-active');
-      
-      // 4. 移除所有波纹效果元素
-      document.querySelectorAll(".theme-ripple").forEach(ripple => {
-        if (ripple.parentNode) {
-          ripple.parentNode.removeChild(ripple);
-        }
-      });
-
-      // 5. 重置全局状态
+      // 重置全局状态
       lastThemeToggleTime = 0;
-
-      // 6. 重置所有主题切换按钮的状态
-      document.querySelectorAll("#theme-toggle-button").forEach(button => {
+      
+      // 重置所有按钮状态
+      themeToggleButtons.forEach(button => {
         setTransitioning(button, false);
       });
       
-      // 7. 移除普通事件监听器
-      allListeners.forEach(({ element, eventType, handler, options }) => {
-        try {
-          element.removeEventListener(eventType, handler, options);
-        } catch (err) {
-          console.error(`主题切换移除事件监听器出错:`, err);
-        }
+      // 移除波纹效果
+      document.querySelectorAll(".theme-ripple").forEach(ripple => {
+        if (ripple.parentNode) ripple.parentNode.removeChild(ripple);
       });
-      
-      // 清空监听器数组
-      allListeners.length = 0;
-      
-      // 8. 最后移除清理事件监听器自身
-      cleanupListeners.forEach(({ element, eventType, handler, options }) => {
-        try {
-          element.removeEventListener(eventType, handler, options);
-        } catch (err) {
-          console.error(`主题切换移除清理监听器出错:`, err);
-        }
-      });
-      
-      // 清空清理监听器数组
-      cleanupListeners.length = 0;
-    }
+    };
     
-    // 注册清理事件，并保存引用
-    function registerCleanupEvents() {
-      // 创建统一的清理处理函数
-      const cleanup = () => {
-        selfDestruct();
-      };
-      
-      // 定义需要监听的所有清理事件
-      const cleanupEventTypes = [
-        { element: document, eventType: "astro:before-swap", options: { once: true } },
-        { element: window, eventType: "beforeunload", options: { once: true } },
-        { element: document, eventType: "page-transition", options: { once: true } }
-      ];
-      
-      // 注册所有清理事件
-      cleanupEventTypes.forEach(({ element, eventType, options }) => {
-        // 添加事件监听
-        element.addEventListener(eventType, cleanup, options);
-        
-        // 保存事件引用到清理列表
-        cleanupListeners.push({
-          element,
-          eventType,
-          handler: cleanup,
-          options
-        });
-      });
-    }
+    // 监听Astro页面切换事件
+    document.addEventListener('astro:before-swap', resetThemeToggleState);
+    document.addEventListener('astro:after-swap', resetThemeToggleState);
+    allListeners.push(
+      { element: document, eventType: 'astro:before-swap', handler: resetThemeToggleState },
+      { element: document, eventType: 'astro:after-swap', handler: resetThemeToggleState }
+    );
     
-    // 创建波纹动画元素
-    function createRippleEffect(x, y, element) {
-      // 清理旧的波纹元素
-      const container = element.querySelector("#ripple-container") || element;
-      const oldRipples = container.querySelectorAll(".theme-ripple");
-      oldRipples.forEach(ripple => ripple.remove());
+    // 全局点击事件拦截器
+    const globalClickHandler = (e) => {
+      if (!e || !e.target) return;
       
-      // 创建新的波纹元素
-      const ripple = document.createElement("span");
-      ripple.classList.add("theme-ripple");
+      const button = e.target.closest('#theme-toggle-button');
       
-      // 设置波纹位置
-      const rect = element.getBoundingClientRect();
-      const relativeX = x - rect.left;
-      const relativeY = y - rect.top;
-      
-      ripple.style.left = `${relativeX}px`;
-      ripple.style.top = `${relativeY}px`;
-      
-      // 添加波纹到容器
-      container.appendChild(ripple);
-      
-      // 自动清理波纹元素
-      rippleTimeout = setTimeout(() => {
-        if (ripple.parentNode) {
-          ripple.parentNode.removeChild(ripple);
-        }
-      }, 1000);
-      
-      return ripple;
-    }
+      if (button && (isTransitioning(button) || !canToggleTheme())) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
     
-    // 确定应该使用的动画类型
-    function determineAnimationType(transitionMode, fromTheme, toTheme) {
-      // 如果是固定模式，直接返回
-      if (transitionMode === TRANSITION_MODES.EXPAND || 
-          transitionMode === TRANSITION_MODES.SHRINK) {
-        return transitionMode;
-      }
-      
-      // 如果是自动模式，根据切换方向决定
-      if (transitionMode === TRANSITION_MODES.AUTO) {
-        // 默认自动模式：亮色->暗色用扩散，暗色->亮色用收缩
-        return (fromTheme === 'light' && toTheme === 'dark') 
-          ? TRANSITION_MODES.EXPAND 
-          : TRANSITION_MODES.SHRINK;
-      }
-      
-      // 如果是反向自动模式，反向选择
-      if (transitionMode === TRANSITION_MODES.REVERSE_AUTO) {
-        // 反向自动模式：亮色->暗色用收缩，暗色->亮色用扩散
-        return (fromTheme === 'light' && toTheme === 'dark') 
-          ? TRANSITION_MODES.SHRINK 
-          : TRANSITION_MODES.EXPAND;
-      }
-      
-      // 默认返回扩散模式
-      return TRANSITION_MODES.EXPAND;
-    }
+    // 在document级别添加事件捕获
+    document.addEventListener('click', globalClickHandler, { capture: true });
+    allListeners.push({ 
+      element: document, 
+      eventType: 'click', 
+      handler: globalClickHandler, 
+      options: { capture: true } 
+    });
     
-    // 使用View Transitions API创建全屏过渡效果
-    function createViewTransition(callback, x, y, fromTheme, toTheme, transitionMode) {
-      // 如果已有正在进行的过渡，先取消它
-      if (currentTransition) {
-        try {
-          if (typeof currentTransition.skipTransition === 'function') {
-            currentTransition.skipTransition();
-          }
-        } catch (e) {
-          // 忽略取消先前过渡的错误
-        } finally {
-          // 无论成功与否，都清除引用
-          currentTransition = null;
-        }
+    // 获取系统首选主题
+    const getSystemTheme = () => {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    };
+    
+    // 初始化主题
+    const initializeTheme = () => {
+      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";
+      }
+    };
+    
+    // 处理主题切换的统一函数
+    const handleThemeToggle = (e, targetButton) => {
+      // 防止事件默认行为和冒泡
+      if (e && typeof e.preventDefault === 'function') {
+        e.preventDefault();
+      }
+      if (e && typeof e.stopPropagation === 'function') {
+        e.stopPropagation();
       }
       
-      // 检查浏览器是否支持View Transitions API
-      if (!document.startViewTransition) {
-        // 尝试使用简单的回退动画
-        try {
-          // 创建一个圆形蒙版元素
-          const mask = document.createElement('div');
-          mask.style.position = 'fixed';
-          mask.style.zIndex = '9999';
-          mask.style.top = '0';
-          mask.style.left = '0';
-          mask.style.width = '100vw';
-          mask.style.height = '100vh';
-          mask.style.pointerEvents = 'none';
-          
-          // 设置当前主题的背景颜色
-          if (fromTheme === 'dark') {
-            mask.style.backgroundColor = '#1a1a1a'; // 暗色主题背景色
-          } else {
-            mask.style.backgroundColor = '#ffffff'; // 亮色主题背景色
-          }
-          
-          // 创建圆形过渡裁剪区域
-          const clipType = determineAnimationType(transitionMode, fromTheme, toTheme);
-          
-          if (clipType === TRANSITION_MODES.EXPAND) {
-            // 扩散效果 - 从点击位置向外扩散
-            mask.style.clipPath = `circle(0px at ${x}px ${y}px)`;
-            document.body.appendChild(mask);
-            
-            // 先执行回调改变主题
-            callback();
-            
-            // 然后执行动画
-            setTimeout(() => {
-              mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-out`;
-              mask.style.clipPath = `circle(150vmax at ${x}px ${y}px)`;
-              
-              // 动画结束后删除遮罩
-              setTimeout(() => {
-                if (mask.parentNode) {
-                  mask.parentNode.removeChild(mask);
-                }
-              }, ANIMATION_DURATION);
-            }, 20);
-          } else {
-            // 收缩效果 - 从全屏向点击位置收缩
-            mask.style.clipPath = `circle(150vmax at ${x}px ${y}px)`;
-            document.body.appendChild(mask);
-            
-            // 添加过渡样式
-            mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-in`;
-            
-            // 强制回流
-            void mask.offsetWidth;
-            
-            // 设置目标状态
-            mask.style.clipPath = `circle(0px at ${x}px ${y}px)`;
-            
-            // 等待动画结束后切换主题并移除遮罩
-            setTimeout(() => {
-              callback();
-              if (mask.parentNode) {
-                mask.parentNode.removeChild(mask);
-              }
-            }, ANIMATION_DURATION);
-          }
-          
-          return new Promise(resolve => setTimeout(resolve, TOTAL_TRANSITION_TIME));
-        } catch (e) {
-          // 如果回退方案也失败，直接执行回调
-          callback();
-          return Promise.resolve();
-        }
+      // 确保有按钮可操作
+      if (!targetButton && e) {
+        targetButton = e.target.closest('#theme-toggle-button');
       }
       
-      try {
-        // 清除状态标记，为下一次过渡做准备
-        document.documentElement.classList.remove('theme-transition-active');
-        
-        // 清除可能存在的临时样式
-        const oldStyle = document.getElementById('theme-transition-temp-style');
-        if (oldStyle) {
-          oldStyle.remove();
-        }
-        
-        // 计算从点击位置到页面四个角的最大距离
-        const w = window.innerWidth;
-        const h = window.innerHeight;
-        
-        // 计算最大半径，确保覆盖整个屏幕
-        const maxDistance = Math.max(
-          Math.hypot(x, y),                  // 左上角
-          Math.hypot(w - x, y),              // 右上角
-          Math.hypot(x, h - y),              // 左下角
-          Math.hypot(w - x, h - y)           // 右下角
-        );
-        
-        // 设置CSS变量用于波纹颜色
-        document.documentElement.style.setProperty(
-          '--theme-ripple-color',
-          toTheme === 'dark' ? '230, 230, 230' : '20, 20, 20'
-        );
-        
-        // 添加主题过渡标记类
-        document.documentElement.classList.add('theme-transition-active');
-        
-        // 确定动画类型
-        const animationType = determineAnimationType(transitionMode, fromTheme, toTheme);
-        
-        // 创建一个简单回调函数，避免复杂操作导致transition跳过
-        const safeCallback = () => {
-          try {
-            // 更新HTML属性
-            document.documentElement.dataset.theme = toTheme;
-            
-            // 更新本地存储
-            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            if (toTheme === systemTheme) {
-              localStorage.removeItem("theme");
-            } else {
-              localStorage.setItem("theme", toTheme);
-            }
-            
-            // 最后执行用户回调
-            callback();
-          } catch (err) {
-            console.error(`主题切换回调执行出错:`, err);
-          }
-        };
-        
-        // 启动视图过渡
-        const transition = document.startViewTransition(safeCallback);
-        
-        // 存储transition引用以便清理
-        currentTransition = transition;
-        
-        // 生成动画需要的SVG资源
-        const gradientOffset = 0.75;
-        const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs><radialGradient id="toggle-theme-gradient"><stop offset="${gradientOffset}"/><stop offset="1" stop-opacity="0"/></radialGradient></defs><circle cx="4" cy="4" r="4" fill="url(#toggle-theme-gradient)"/></svg>`;
-        const maskUrl = `data:image/svg+xml;base64,${btoa(maskSvg)}`;
-        
-        // 计算动画需要多大才能覆盖整个屏幕
-        const maxRadius = Math.ceil(maxDistance / gradientOffset);
-        
-        // 准备应用自定义动画的操作
-        const applyCustomAnimation = async () => {
-          try {
-            // 使用race和超时Promise，改进超时策略
-            const readyPromise = Promise.race([
-              transition.ready,
-              new Promise((_, reject) => {
-                // 增加超时时间到50ms，提高收缩模式的成功率
-                setTimeout(() => reject(new Error('Ready timeout')), 50);
-              })
-            ]);
-            
-            try {
-              // 等待过渡准备完成
-              await readyPromise;
-            } catch (err) {
-              // 超时处理或过渡中断，使用备用方案
-              if (err.message === 'Ready timeout' && animationType === TRANSITION_MODES.SHRINK) {
-                applyFallbackAnimation();
-                return; // 跳过后续代码，使用备用方案
-              } else if (err.name === 'AbortError') {
-                // 如果是AbortError，我们也立即使用备用方案
-                applyFallbackAnimation();
-                return; // 跳过后续代码，使用备用方案
-              }
-            }
-            
-            // 应用基础样式到document
-            const style = document.createElement('style');
-            style.id = 'theme-transition-temp-style';
-            
-            if (animationType === TRANSITION_MODES.EXPAND) {
-              // 扩散效果 - 新主题从点击位置向外扩散
-              style.textContent = `
-                ::view-transition-new(root) {
-                  animation: none !important;
-                  -webkit-mask-image: url('${maskUrl}') !important;
-                  mask-image: url('${maskUrl}') !important;
-                  -webkit-mask-repeat: no-repeat !important;
-                  mask-repeat: no-repeat !important;
-                  -webkit-mask-position: ${x}px ${y}px !important;
-                  mask-position: ${x}px ${y}px !important;
-                  -webkit-mask-size: 0 !important;
-                  mask-size: 0 !important;
-                  z-index: 1000 !important;
-                }
-              `;
-              document.head.appendChild(style);
-              
-              // 强制重新计算样式
-              window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
-              
-              // 立即设置最终状态
-              requestAnimationFrame(() => {
-                if (style.parentNode) {
-                  style.textContent = `
-                    ::view-transition-new(root) {
-                      animation: none !important;
-                      -webkit-mask-image: url('${maskUrl}') !important;
-                      mask-image: url('${maskUrl}') !important;
-                      -webkit-mask-repeat: no-repeat !important;
-                      mask-repeat: no-repeat !important;
-                      -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                      mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                      -webkit-mask-size: ${maxRadius * 2}px !important;
-                      mask-size: ${maxRadius * 2}px !important;
-                      z-index: 1000 !important;
-                      transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-out, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-out,
-                                mask-position ${ANIMATION_DURATION/1000}s ease-out, mask-size ${ANIMATION_DURATION/1000}s ease-out !important;
-                    }
-                  `;
-                }
-              });
-              
-              // 清理临时样式
-              setTimeout(() => {
-                if (document.getElementById('theme-transition-temp-style')) {
-                  document.getElementById('theme-transition-temp-style').remove();
-                }
-              }, TOTAL_TRANSITION_TIME);
-              
-            } else {
-              // 改进收缩效果实现
-              style.textContent = `
-                ::view-transition-old(root) {
-                  animation: none !important;
-                  -webkit-mask-image: url('${maskUrl}') !important;
-                  mask-image: url('${maskUrl}') !important;
-                  -webkit-mask-repeat: no-repeat !important;
-                  mask-repeat: no-repeat !important;
-                  -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                  mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                  -webkit-mask-size: ${maxRadius * 2}px !important;
-                  mask-size: ${maxRadius * 2}px !important;
-                  z-index: 999 !important;
-                }
-                ::view-transition-new(root) {
-                  z-index: 998 !important;
-                }
-              `;
-              document.head.appendChild(style);
-              
-              // 强制重新计算样式
-              window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
-              
-              // 使用双重requestAnimationFrame确保样式先被应用
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  if (style.parentNode) {
-                    style.textContent = `
-                      ::view-transition-old(root) {
-                        animation: none !important;
-                        -webkit-mask-image: url('${maskUrl}') !important;
-                        mask-image: url('${maskUrl}') !important;
-                        -webkit-mask-repeat: no-repeat !important;
-                        mask-repeat: no-repeat !important;
-                        -webkit-mask-position: ${x}px ${y}px !important;
-                        mask-position: ${x}px ${y}px !important;
-                        -webkit-mask-size: 0 !important;
-                        mask-size: 0 !important;
-                        z-index: 999 !important;
-                        transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-in, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-in,
-                                  mask-position ${ANIMATION_DURATION/1000}s ease-in, mask-size ${ANIMATION_DURATION/1000}s ease-in !important;
-                      }
-                      ::view-transition-new(root) {
-                        z-index: 998 !important;
-                      }
-                    `;
-                  }
-                });
-              });
-            }
-            
-            // 清理临时样式
-            setTimeout(() => {
-              if (document.getElementById('theme-transition-temp-style')) {
-                document.getElementById('theme-transition-temp-style').remove();
-              }
-            }, TOTAL_TRANSITION_TIME);
-          } catch (error) {
-            // 处理错误情况
-            if (error.name === 'AbortError' || error.message === 'Ready timeout') {
-              // AbortError或超时是正常的，使用备用动画方案
-              applyFallbackAnimation();
-            } else {
-              // 只有真正意外的错误才输出error级别日志
-              console.error(`主题切换应用自定义动画出错:`, error);
-              // 尝试使用备用方案
-              applyFallbackAnimation();
-            }
-          }
-        };
-        
-        // 添加备用动画方案
-        const applyFallbackAnimation = () => {
-          try {
-            // 创建并应用样式但不等待transition.ready
-            const style = document.createElement('style');
-            style.id = 'theme-transition-temp-style';
-            
-            if (animationType === TRANSITION_MODES.EXPAND) {
-              // 扩散效果样式 - 保持不变
-              style.textContent = `
-                ::view-transition-new(root) {
-                  animation: none !important;
-                  -webkit-mask-image: url('${maskUrl}') !important;
-                  mask-image: url('${maskUrl}') !important;
-                  -webkit-mask-repeat: no-repeat !important;
-                  mask-repeat: no-repeat !important;
-                  -webkit-mask-position: ${x}px ${y}px !important;
-                  mask-position: ${x}px ${y}px !important;
-                  -webkit-mask-size: 0 !important;
-                  mask-size: 0 !important;
-                  z-index: 1000 !important;
-                }
-              `;
-              document.head.appendChild(style);
-              
-              // 强制重新计算样式
-              window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
-              
-              // 使用双重requestAnimationFrame确保样式先被应用
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  if (style.parentNode) {
-                    style.textContent = `
-                      ::view-transition-new(root) {
-                        animation: none !important;
-                        -webkit-mask-image: url('${maskUrl}') !important;
-                        mask-image: url('${maskUrl}') !important;
-                        -webkit-mask-repeat: no-repeat !important;
-                        mask-repeat: no-repeat !important;
-                        -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                        mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                        -webkit-mask-size: ${maxRadius * 2}px !important;
-                        mask-size: ${maxRadius * 2}px !important;
-                        z-index: 1000 !important;
-                        transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-out, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-out,
-                                  mask-position ${ANIMATION_DURATION/1000}s ease-out, mask-size ${ANIMATION_DURATION/1000}s ease-out !important;
-                      }
-                    `;
-                  }
-                });
-              });
-            } else {
-              // 改进收缩效果实现
-              style.textContent = `
-                ::view-transition-old(root) {
-                  animation: none !important;
-                  -webkit-mask-image: url('${maskUrl}') !important;
-                  mask-image: url('${maskUrl}') !important;
-                  -webkit-mask-repeat: no-repeat !important;
-                  mask-repeat: no-repeat !important;
-                  -webkit-mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                  mask-position: ${x - maxRadius}px ${y - maxRadius}px !important;
-                  -webkit-mask-size: ${maxRadius * 2}px !important;
-                  mask-size: ${maxRadius * 2}px !important;
-                  z-index: 999 !important;
-                }
-                ::view-transition-new(root) {
-                  z-index: 998 !important;
-                }
-              `;
-              document.head.appendChild(style);
-              
-              // 强制重新计算样式
-              window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
-              
-              // 使用双重requestAnimationFrame确保样式先被应用
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  if (style.parentNode) {
-                    style.textContent = `
-                      ::view-transition-old(root) {
-                        animation: none !important;
-                        -webkit-mask-image: url('${maskUrl}') !important;
-                        mask-image: url('${maskUrl}') !important;
-                        -webkit-mask-repeat: no-repeat !important;
-                        mask-repeat: no-repeat !important;
-                        -webkit-mask-position: ${x}px ${y}px !important;
-                        mask-position: ${x}px ${y}px !important;
-                        -webkit-mask-size: 0 !important;
-                        mask-size: 0 !important;
-                        z-index: 999 !important;
-                        transition: -webkit-mask-position ${ANIMATION_DURATION/1000}s ease-in, -webkit-mask-size ${ANIMATION_DURATION/1000}s ease-in,
-                                  mask-position ${ANIMATION_DURATION/1000}s ease-in, mask-size ${ANIMATION_DURATION/1000}s ease-in !important;
-                      }
-                      ::view-transition-new(root) {
-                        z-index: 998 !important;
-                      }
-                    `;
-                  }
-                });
-              });
-            }
-            
-            // 清理临时样式
-            setTimeout(() => {
-              if (document.getElementById('theme-transition-temp-style')) {
-                document.getElementById('theme-transition-temp-style').remove();
-              }
-            }, TOTAL_TRANSITION_TIME);
-          } catch (err) {
-            console.error(`主题切换应用备用动画方案出错:`, err);
-          }
-        };
-        
-        // 非阻塞执行自定义动画应用
-        applyCustomAnimation().catch(error => {
-          console.error(`主题切换应用动画过程出错:`, error);
-        });
-        
-        // 返回过渡完成的Promise
-        return transition.finished
-          .then(() => {
-            // 移除主题过渡标记类
-            document.documentElement.classList.remove('theme-transition-active');
-            currentTransition = null;
-          })
-          .catch(error => {
-            if (error.name !== 'AbortError') {
-              console.error(`主题切换过渡动画错误:`, error);
-            }
-            // 确保标记类被移除
-            document.documentElement.classList.remove('theme-transition-active');
-            
-            // 清除引用
-            currentTransition = null;
-          });
-      } catch (error) {
-        console.error(`主题切换错误:`, error);
-        // 在出错时也要执行回调
-        callback();
-        // 确保标记类被移除
-        document.documentElement.classList.remove('theme-transition-active');
-        return Promise.resolve();
-      }
-    }
-
-    // 设置主题切换功能
-    function setupThemeToggle() {
-      // 获取所有主题切换按钮
-      const themeToggleButtons = document.querySelectorAll("#theme-toggle-button");
-
-      if (!themeToggleButtons.length) {
-        console.error(`主题切换未找到主题切换按钮`);
+      if (!targetButton) return;
+      
+      // 冷却期和过渡状态检查
+      if (!canToggleTheme() || isTransitioning(targetButton) || currentTransition) {
         return;
       }
-
-      // 状态清理函数 - 在页面切换、错误和超时情况下调用
-      const resetThemeToggleState = () => {
+      
+      // 记录切换时间并设置状态
+      recordToggleTime();
+      setTransitioning(targetButton, true);
+      
+      try {
+        // 计算点击坐标或使用按钮中心坐标
+        let clickX, clickY;
+        
+        if (e instanceof Event && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
+          clickX = e.clientX;
+          clickY = e.clientY;
+        } else if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
+          clickX = e.clientX;
+          clickY = e.clientY;
+        } else {
+          const rect = targetButton.getBoundingClientRect();
+          clickX = rect.left + rect.width / 2;
+          clickY = rect.top + rect.height / 2;
+        }
+        
+        // 确保坐标有效
+        clickX = isFinite(clickX) ? clickX : window.innerWidth / 2;
+        clickY = isFinite(clickY) ? clickY : window.innerHeight / 2;
+        
+        // 创建波纹效果
+        createRippleEffect(clickX, clickY, targetButton);
+        
+        // 获取当前主题和新主题
+        const currentTheme = document.documentElement.dataset.theme || 'light';
+        const newTheme = currentTheme === "light" ? "dark" : "light";
+        
+        // 获取过渡模式
+        let transitionMode = TRANSITION_MODES.AUTO;
+        
+        if (targetButton.dataset.transitionMode) {
+          transitionMode = targetButton.dataset.transitionMode;
+        }
+        
+        // 重置延时清除
         if (transitionTimeout) {
           clearTimeout(transitionTimeout);
           transitionTimeout = null;
         }
         
-        // 重置全局切换时间状态
-        lastThemeToggleTime = 0;
-        
-        // 重置所有按钮的状态
-        themeToggleButtons.forEach(button => {
-          setTransitioning(button, false);
-        });
-        
-        // 移除所有残留的波纹效果
-        document.querySelectorAll(".theme-ripple").forEach(ripple => {
-          if (ripple.parentNode) {
-            ripple.parentNode.removeChild(ripple);
-          }
-        });
-      };
-      
-      // 监听Astro的页面切换事件
-      document.addEventListener('astro:before-swap', resetThemeToggleState, { once: false });
-      document.addEventListener('astro:after-swap', resetThemeToggleState, { once: false });
-      allListeners.push(
-        { element: document, eventType: 'astro:before-swap', handler: resetThemeToggleState, options: { once: false } },
-        { element: document, eventType: 'astro:after-swap', handler: resetThemeToggleState, options: { once: false } }
-      );
-      
-      // 监听视图过渡事件
-      if (typeof document.startViewTransition === 'function') {
-        document.addEventListener('view-transition-start', resetThemeToggleState, { once: false });
-        document.addEventListener('view-transition-end', resetThemeToggleState, { once: false });
-        allListeners.push(
-          { element: document, eventType: 'view-transition-start', handler: resetThemeToggleState, options: { once: false } },
-          { element: document, eventType: 'view-transition-end', handler: resetThemeToggleState, options: { once: false } }
-        );
-      }
-
-      // 全局事件拦截器 - 拦截所有冒泡阶段的点击事件，防止重复触发
-      const globalClickHandler = (e) => {
-        // 不处理未冒泡到document的事件
-        if (!e || !e.target) return;
-        
-        // 获取点击的按钮元素
-        const button = e.target.closest('#theme-toggle-button');
-        
-        // 如果点击按钮，且按钮正在过渡中或在冷却期内，拦截后续处理
-        if (button && (isTransitioning(button) || !canToggleTheme())) {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      };
-      
-      // 在document级别添加事件捕获，确保所有相关点击都能被拦截
-      document.addEventListener('click', globalClickHandler, { capture: true });
-      // 清理时记得移除
-      allListeners.push({ 
-        element: document, 
-        eventType: 'click', 
-        handler: globalClickHandler, 
-        options: { capture: true } 
-      });
-
-      // 获取系统首选主题
-      const getSystemTheme = () => {
-        return window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light";
-      };
-
-      // 初始化主题
-      const initializeTheme = () => {
-        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";
-        }
-      };
-
-      // 为所有触发点提供统一的处理函数
-      const handleThemeToggle = (e, targetButton) => {
-        // 防止事件默认行为和冒泡，无论如何都要先阻止
-        if (e && typeof e.preventDefault === 'function') {
-          e.preventDefault();
-        }
-        if (e && typeof e.stopPropagation === 'function') {
-          e.stopPropagation();
-        }
-        
-        // 确保有有效的按钮参数，必要时从事件中获取
-        if (!targetButton && e) {
-          targetButton = e.target.closest('#theme-toggle-button');
-        }
-        
-        // 确保有按钮可以操作
-        if (!targetButton) {
-          return;
-        }
-
-        // 保护：全局冷却期检查
-        if (!canToggleTheme()) {
-          return;
-        }
-
-        // 保护：按钮过渡中检查
-        if (isTransitioning(targetButton)) {
-          return;
-        }
-
-        // 保护：视图过渡检查
-        if (currentTransition) {
-          return;
-        }
-
-        // 记录此次切换时间
-        recordToggleTime();
-        
-        // 立即设置过渡状态，阻止后续点击
-        setTransitioning(targetButton, true);
-        
-        try {
-          // 计算点击坐标或使用按钮中心坐标
-          let clickX, clickY;
-          
-          if (e instanceof Event && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
-            clickX = e.clientX;
-            clickY = e.clientY;
-          } else if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number') {
-            clickX = e.clientX;
-            clickY = e.clientY;
-          } else {
-            const rect = targetButton.getBoundingClientRect();
-            clickX = rect.left + rect.width / 2;
-            clickY = rect.top + rect.height / 2;
-          }
-          
-          // 确保坐标有效（防止NaN或无限值）
-          clickX = isFinite(clickX) ? clickX : window.innerWidth / 2;
-          clickY = isFinite(clickY) ? clickY : window.innerHeight / 2;
-          
-          // 在按钮上创建小波纹效果
-          createRippleEffect(clickX, clickY, targetButton);
-
-          // 获取当前主题
-          const currentTheme = document.documentElement.dataset.theme;
-          const newTheme = currentTheme === "light" ? "dark" : "light";
-          
-          // 获取过渡模式
-          let transitionMode = TRANSITION_MODES.AUTO; // 默认自动模式
-          
-          if (targetButton && targetButton.dataset && targetButton.dataset.transitionMode) {
-            transitionMode = targetButton.dataset.transitionMode;
-          } else {
-            // 如果无法从按钮获取，从本地存储获取
-            transitionMode = getThemeTransitionMode();
-          }
-          
-          // 在开始新的过渡前，先重置transitioning的延时清除
-          if (transitionTimeout) {
-            clearTimeout(transitionTimeout);
-            transitionTimeout = null;
-          }
-
-          // 创建一个安全的主题切换回调
-          const safeThemeChangeCallback = () => {
-            try {
-              // 直接在这里执行主题切换的核心逻辑
-              const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-              if (newTheme === systemTheme) {
-                localStorage.removeItem("theme");
-              } else {
-                localStorage.setItem("theme", newTheme);
-              }
-            } catch (err) {
-              console.error(`主题切换回调执行出错:`, err);
-            }
-          };
-
-          // 调用视图过渡
-          createViewTransition(
-            safeThemeChangeCallback, 
-            clickX, 
-            clickY, 
-            currentTheme, 
-            newTheme,
-            transitionMode
-          ).then(() => {
-            // 过渡完成后恢复状态
-            setTimeout(() => {
-              setTransitioning(targetButton, false);
-            }, ANIMATION_BUFFER); // 添加缓冲时间
-          }).catch(error => {
-            // 出现错误时强制执行主题切换以确保功能可用
-            if (error.name !== 'AbortError') {
-              console.error(`主题切换过渡动画错误:`, error);
-              // 如果不是因为过渡被跳过而是真正的错误，直接执行主题切换
-              safeThemeChangeCallback();
-            }
-            
-            setTimeout(() => {
-              setTransitioning(targetButton, false);
-            }, ANIMATION_BUFFER);
-          });
-
-          // 设置防抖保底 - 防止transition.finished不触发导致状态卡死
-          transitionTimeout = setTimeout(() => {
-            setTransitioning(targetButton, false);
-          }, TOTAL_TRANSITION_TIME + 200); // 总过渡时间加额外缓冲
-        } catch (err) {
-          // 即使发生错误，也要确保主题能切换
-          console.error(`主题切换处理过程出错:`, err);
-          
-          // 尝试直接切换主题
+        // 创建主题切换回调
+        const safeThemeChangeCallback = () => {
           try {
-            const currentTheme = document.documentElement.dataset.theme || 'light';
-            const newTheme = currentTheme === "light" ? "dark" : "light";
-            
-            // 更新HTML属性
-            document.documentElement.dataset.theme = newTheme;
-            
             // 更新本地存储
             const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
             if (newTheme === systemTheme) {
@@ -1017,63 +611,107 @@ import "../styles/theme-toggle.css";
             } else {
               localStorage.setItem("theme", newTheme);
             }
-          } catch (fallbackErr) {
-            console.error(`主题切换降级处理失败:`, fallbackErr);
-          }
-          
-          // 确保状态被重置
-          setTransitioning(targetButton, false);
-        }
-      };
-
-      // 监听系统主题变化
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      const handleMediaChange = (e) => {
-        if (!localStorage.getItem("theme")) {
-          const newTheme = e.matches ? "dark" : "light";
-          document.documentElement.dataset.theme = newTheme;
-        }
-      };
-
-      // 添加系统主题变化监听
-      addListener(mediaQuery, "change", handleMediaChange);
-
-      // 为每个按钮添加事件
-      themeToggleButtons.forEach(button => {
-        // 确保初始化状态
-        setTransitioning(button, false);
-        
-        // 点击事件 - 使用捕获模式
-        addListener(button, "click", (e) => handleThemeToggle(e, button), { capture: true });
-
-        // 键盘事件
-        const keydownHandler = (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleThemeToggle(e, button);
+          } catch (err) {
+            console.error(`主题切换回调出错:`, err);
           }
         };
-        addListener(button, "keydown", keydownHandler);
-      });
+        
+        // 调用视图过渡
+        createViewTransition(
+          safeThemeChangeCallback,
+          clickX,
+          clickY,
+          currentTheme,
+          newTheme,
+          transitionMode
+        ).then(() => {
+          setTimeout(() => {
+            setTransitioning(targetButton, false);
+          }, ANIMATION_BUFFER);
+        }).catch(error => {
+          if (error.name !== 'AbortError') {
+            console.error(`主题切换过渡动画错误:`, error);
+            safeThemeChangeCallback();
+          }
+          
+          setTimeout(() => {
+            setTransitioning(targetButton, false);
+          }, ANIMATION_BUFFER);
+        });
+        
+        // 设置防抖保底
+        transitionTimeout = setTimeout(() => {
+          setTransitioning(targetButton, false);
+        }, TOTAL_TRANSITION_TIME + 200);
+      } catch (err) {
+        console.error(`主题切换处理过程出错:`, err);
+        
+        // 尝试直接切换主题
+        try {
+          const currentTheme = document.documentElement.dataset.theme || 'light';
+          const newTheme = currentTheme === "light" ? "dark" : "light";
+          
+          // 更新HTML属性
+          document.documentElement.dataset.theme = newTheme;
+          
+          // 更新本地存储
+          const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+          if (newTheme === systemTheme) {
+            localStorage.removeItem("theme");
+          } else {
+            localStorage.setItem("theme", newTheme);
+          }
+        } catch (fallbackErr) {
+          console.error(`主题切换降级处理失败:`, fallbackErr);
+        }
+        
+        // 确保状态被重置
+        setTransitioning(targetButton, false);
+      }
+    };
+    
+    // 监听系统主题变化
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleMediaChange = (e) => {
+      if (!localStorage.getItem("theme")) {
+        document.documentElement.dataset.theme = e.matches ? "dark" : "light";
+      }
+    };
+    
+    // 添加系统主题变化监听
+    addListener(mediaQuery, "change", handleMediaChange);
+    
+    // 为每个按钮添加事件
+    themeToggleButtons.forEach(button => {
+      // 确保初始状态
+      setTransitioning(button, false);
       
-      // 初始化主题
-      initializeTheme();
-    }
-
-    // 初始化函数
-    function init() {
-      // 注册清理事件
-      registerCleanupEvents();
+      // 点击事件
+      addListener(button, "click", (e) => handleThemeToggle(e, button), { capture: true });
       
-      // 设置主题切换功能
-      setupThemeToggle();
-    }
-
-    // 判断DOM是否已加载
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", init, { once: true });
-    } else {
-      init();
-    }
-  })();
+      // 键盘事件
+      const keydownHandler = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleThemeToggle(e, button);
+        }
+      };
+      addListener(button, "keydown", keydownHandler);
+    });
+    
+    // 初始化主题
+    initializeTheme();
+    
+    // 添加清理监听
+    document.addEventListener("astro:before-swap", cleanupResources, { once: true });
+    window.addEventListener("beforeunload", cleanupResources, { once: true });
+  }
+  
+  // 初始化
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", setupThemeToggle, { once: true });
+  } else {
+    setupThemeToggle();
+  }
+})();
 </script>
\ No newline at end of file
diff --git a/src/scripts/swup-init.js b/src/scripts/swup-init.js
index 16df6d3..7cf125d 100644
--- a/src/scripts/swup-init.js
+++ b/src/scripts/swup-init.js
@@ -111,7 +111,12 @@ document.addEventListener('DOMContentLoaded', () => {
   swup.use(preloadPlugin);
   
   // 创建并注册Head插件，用于解决CSS丢失问题
-  const headPlugin = new SwupHeadPlugin();
+  const headPlugin = new SwupHeadPlugin({
+    persistTags: 'link[rel="stylesheet"], style, meta',  // 保留所有样式表和相关标签
+    persistAssets: true, // 保留已加载的资源
+    keepScrollOnReload: true, // 保持滚动位置
+    awaitAssets: true // 等待资源加载完成再显示页面
+  });
   swup.use(headPlugin);
   
   // 添加Scripts插件 - 确保页面转场后脚本能重新执行