diff --git a/src/assets/wasm/search/search_wasm_bg.wasm b/src/assets/wasm/search/search_wasm_bg.wasm
index 14ecec5..1ab0863 100644
Binary files a/src/assets/wasm/search/search_wasm_bg.wasm and b/src/assets/wasm/search/search_wasm_bg.wasm differ
diff --git a/src/components/ArticleFilter.tsx b/src/components/ArticleFilter.tsx
index a5d16fd..54dee3a 100644
--- a/src/components/ArticleFilter.tsx
+++ b/src/components/ArticleFilter.tsx
@@ -1092,12 +1092,20 @@ const ArticleFilter: React.FC<ArticleFilterProps> = ({ searchParams = {} }) => {
       currentPage: 1,
       date: "all",
     };
+    
     // 先更新UI状态
     setActiveFilters(defaultFilters);
 
-    // 直接传递重置后的状态给筛选函数，并更新URL
-    applyFilters(defaultFilters);
-  }, []);
+    // 清除URL参数
+    if (typeof window !== 'undefined') {
+      window.history.pushState({}, "", window.location.pathname);
+    }
+
+    // 如果WASM模块已加载，直接调用筛选逻辑以确保实际应用
+    if (wasmModule && isArticlesLoaded) {
+      applyFilteringLogic(defaultFilters);
+    }
+  }, [wasmModule, isArticlesLoaded]);
 
   // 渲染错误信息
   const renderError = () => (
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index fce9d71..acc50e8 100644
--- a/src/components/Breadcrumb.astro
+++ b/src/components/Breadcrumb.astro
@@ -187,99 +187,101 @@ const breadcrumbs: Breadcrumb[] = pathSegments
 </div> 
 
 <script is:inline>
-  // 返回按钮点击事件处理
+  // 面包屑返回按钮处理 - 自销毁模式
   (function() {
-    // 页面导航计数器
-    let pageNavigationCount = 0;
-    
-    // 存储事件监听器，便于统一清理
-    const listeners = [];
-    
-    // 清理按钮事件监听器
-    function cleanupButtonListeners() {
-      // 查找所有返回按钮
-      const buttons = document.querySelectorAll('.back-button');
-      
-      buttons.forEach(button => {
-        // 移除所有可能的事件
-        if (button._clickHandler) {
-          button.removeEventListener('click', button._clickHandler);
-          delete button._clickHandler;
-        }
-        
-        // 清除其他可能的事件
-        const otherClickHandlers = button.__backButtonClickHandlers || [];
-        otherClickHandlers.forEach(handler => {
-          try {
-            button.removeEventListener('click', handler);
-          } catch (e) {
-            // 忽略错误
-          }
-        });
-        
-        // 重置处理函数数组
-        button.__backButtonClickHandlers = [];
-      });
+
+    // 跳过非文章页面，只在文章详情页执行
+    const isArticlePage = document.querySelector('.back-button');
+    if (!isArticlePage) {
+      return;
     }
     
+    // 集中管理所有事件监听器
+    const allListeners = [];
+    
+    // 单独保存清理事件的监听器引用
+    const cleanupListeners = [];
+    
     // 添加事件监听器并记录，方便后续统一清理
     function addListener(element, eventType, handler, options) {
-      if (!element) return null;
-      
-      // 确保先移除可能已存在的同类型事件处理函数
-      if (eventType === 'click' && element.classList.contains('back-button')) {
-        if (element._clickHandler) {
-          element.removeEventListener('click', element._clickHandler);
-        }
-        element._clickHandler = handler;
-        
-        // 保存到数组中以便清理
-        if (!element.__backButtonClickHandlers) {
-          element.__backButtonClickHandlers = [];
-        }
-        element.__backButtonClickHandlers.push(handler);
+      if (!element) {
+        console.warn(`[面包屑尝试为不存在的元素添加事件`);
+        return null;
       }
-      
+
       element.addEventListener(eventType, handler, options);
-      listeners.push({ element, eventType, handler, options });
+      allListeners.push({ element, eventType, handler, options });
       return handler;
     }
     
-    // 清理函数 - 移除所有事件监听器
-    function cleanup() {
-      // 先直接从按钮清理事件
-      cleanupButtonListeners();
-      
-      // 移除所有监听器
-      listeners.forEach(({ element, eventType, handler, options }) => {
+    // 统一的清理函数，执行完整清理并自销毁
+    function selfDestruct() {
+      // 1. 移除所有普通事件监听器
+      allListeners.forEach(({ element, eventType, handler, options }) => {
         try {
           element.removeEventListener(eventType, handler, options);
         } catch (err) {
-          // 忽略错误
+          console.error(`[面包屑移除事件监听器出错:`, err);
         }
       });
       
-      // 清空数组
-      listeners.length = 0;
+      // 清空监听器数组
+      allListeners.length = 0;
+      
+      // 2. 最后移除清理事件监听器自身
+      cleanupListeners.forEach(({ element, eventType, handler, options }) => {
+        try {
+          element.removeEventListener(eventType, handler, options);
+        } catch (err) {
+          console.error(`[面包屑移除清理监听器出错:`, err);
+        }
+      });
+      
+      // 清空清理监听器数组
+      cleanupListeners.length = 0;
     }
     
-    // 设置返回按钮事件
-    function setupBackButton() {
-      // 确保当前没有活动的返回按钮事件
-      cleanup();
+    // 注册清理事件，并保存引用
+    function registerCleanupEvents() {
+      // 创建一次性事件处理函数
+      const beforeSwapHandler = () => {
+        selfDestruct();
+      };
       
+      const beforeUnloadHandler = () => {
+        selfDestruct();
+      };
+      
+      // 添加清理事件监听器并保存引用
+      document.addEventListener("astro:before-swap", beforeSwapHandler, { once: true });
+      window.addEventListener("beforeunload", beforeUnloadHandler, { once: true });
+      
+      // 如果页面使用swup，也注册swup相关的清理事件
+      if (typeof window.swup !== 'undefined') {
+        document.addEventListener("swup:willReplaceContent", beforeSwapHandler, { once: true });
+      }
+      
+      // 保存清理事件引用，用于完全销毁
+      cleanupListeners.push(
+        { element: document, eventType: "astro:before-swap", handler: beforeSwapHandler, options: { once: true } },
+        { element: window, eventType: "beforeunload", handler: beforeUnloadHandler, options: { once: true } }
+      );
+      
+      if (typeof window.swup !== 'undefined') {
+        cleanupListeners.push(
+          { element: document, eventType: "swup:willReplaceContent", handler: beforeSwapHandler, options: { once: true } }
+        );
+      }
+    }
+    
+    // 设置返回按钮功能
+    function setupBackButton() {
       const backButton = document.querySelector('.back-button');
       
       if (!backButton) {
         return;
       }
       
-      try {
-        backButton.style.pointerEvents = 'auto';
-      } catch (e) {
-        // 忽略样式错误
-      }
-      
       const clickHandler = (e) => {
         e.preventDefault();
         
@@ -301,100 +303,43 @@ const breadcrumbs: Breadcrumb[] = pathSegments
       addListener(backButton, 'click', clickHandler);
     }
     
-    // 注册清理函数 - 确保在每次页面转换前清理事件
-    function registerCleanup() {
-      const cleanupEvents = [
-        'astro:before-preparation',
-        'astro:before-swap',
-        'astro:beforeload',
-        'swup:willReplaceContent'
-      ];
+    // 主初始化函数
+    function init() {
+      // 注册清理事件
+      registerCleanupEvents();
       
-      // 为每个事件注册一次性清理函数
-      cleanupEvents.forEach(eventName => {
-        const handler = () => {
-          cleanup();
+      // 设置返回按钮
+      setupBackButton();
+      
+      // 注册页面加载后的处理函数 - 仅当使用View Transitions或Swup时
+      if (typeof document.startViewTransition !== 'undefined' || typeof window.swup !== 'undefined') {
+        // 仅监听一个事件，保持最小侵入性
+        const pageLoadHandler = () => {
+          // 检查是否在文章页面
+          const backButton = document.querySelector('.back-button');
+          if (backButton) {
+            // 先销毁已有的所有处理函数
+            selfDestruct();
+            // 重新初始化
+            init();
+          }
         };
         
-        document.addEventListener(eventName, handler, { once: true });
-      });
-      
-      // 页面卸载时清理
-      window.addEventListener('beforeunload', () => {
-        cleanup();
-      }, { once: true });
-    }
-    
-    // 初始化函数
-    function init() {
-      pageNavigationCount++;
-      setupBackButton();
-      registerCleanup();
-    }
-    
-    // 监听页面转换事件
-    function setupPageTransitionEvents() {
-      // 确保事件处理程序唯一性的函数
-      function setupUniqueEvent(eventName, callback) {
-        const eventKey = `__back_button_event_${eventName.replace(/:/g, '_')}`;
-        
-        // 移除可能存在的旧处理函数
-        if (window[eventKey]) {
-          document.removeEventListener(eventName, window[eventKey]);
+        if (typeof document.startViewTransition !== 'undefined') {
+          addListener(document, 'astro:page-load', pageLoadHandler);
         }
         
-        // 保存新处理函数并注册
-        window[eventKey] = callback;
-        document.addEventListener(eventName, window[eventKey]);
+        if (typeof window.swup !== 'undefined') {
+          addListener(document, 'swup:contentReplaced', pageLoadHandler);
+        }
       }
-      
-      // 页面转换后事件
-      const pageTransitionEvents = [
-        { name: 'astro:after-swap', delay: 10 },
-        { name: 'astro:page-load', delay: 10 },
-        { name: 'swup:contentReplaced', delay: 10 }
-      ];
-      
-      // 设置每个页面转换事件
-      pageTransitionEvents.forEach(({ name, delay }) => {
-        setupUniqueEvent(name, () => {
-          cleanupButtonListeners(); // 立即清理按钮上的事件
-          
-          // 延迟初始化，确保DOM完全更新
-          setTimeout(() => {
-            cleanupButtonListeners(); // 再次清理，确保没有遗漏
-            init();
-          }, delay);
-        });
-      });
-      
-      // 特别处理 swup:pageView 事件
-      setupUniqueEvent('swup:pageView', () => {
-        // 对于偶数次页面跳转，特别确保事件被正确重新绑定
-        if (pageNavigationCount % 2 === 0) {
-          setTimeout(() => {
-            const buttons = document.querySelectorAll('.back-button');
-            if (buttons.length > 0) {
-              cleanupButtonListeners();
-              setupBackButton();
-            }
-          }, 50);
-        }
-      });
     }
     
-    // 设置页面转换事件监听
-    setupPageTransitionEvents();
-    
-    // 在页面加载后初始化
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => {
-        init();
-      }, { once: true });
+    // 判断DOM是否已加载
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init, { once: true });
     } else {
-      setTimeout(() => {
-        init();
-      }, 0);
+      init();
     }
   })();
 </script> 
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index ac84403..8826b14 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -332,8 +332,85 @@ const navSelectorClassName = "mr-4";
 
 
 <script is:inline>
-// 自执行函数封装所有导航逻辑
-(function initNavSelector() {
+// 导航逻辑 - 自销毁模式
+(function() {
+  // 尽早检查导航元素是否存在，如果不存在则终止执行
+  const navSelector = document.querySelector('.nav-selector');
+  if (!navSelector) {
+    console.warn(`导航脚本未找到导航选择器元素，不执行导航脚本`);
+    return;
+  }
+  
+  // 集中管理所有事件监听器
+  const allListeners = [];
+  
+  // 单独保存清理事件的监听器引用
+  const cleanupListeners = [];
+  
+  // 添加事件监听器并记录，方便后续统一清理
+  function addListener(element, eventType, handler, options) {
+    if (!element) {
+      console.warn(`导航脚本尝试为不存在的元素添加事件:`, eventType);
+      return null;
+    }
+
+    element.addEventListener(eventType, handler, options);
+    allListeners.push({ element, eventType, handler, options });
+    return handler;
+  }
+  
+  // 统一的清理函数，执行完整清理并自销毁
+  function selfDestruct() {
+    
+    // 1. 移除所有普通事件监听器
+    allListeners.forEach(({ element, eventType, handler, options }) => {
+      try {
+        element.removeEventListener(eventType, handler, options);
+      } catch (err) {
+        console.error(`导航脚本移除事件监听器出错:`, err);
+      }
+    });
+    
+    // 清空监听器数组
+    allListeners.length = 0;
+    
+    // 2. 最后移除清理事件监听器自身
+    cleanupListeners.forEach(({ element, eventType, handler, options }) => {
+      try {
+        element.removeEventListener(eventType, handler, options);
+      } catch (err) {
+        console.error(`导航脚本移除清理监听器出错:`, err);
+      }
+    });
+    
+    // 清空清理监听器数组
+    cleanupListeners.length = 0;
+    
+  }
+  
+  // 注册清理事件，并保存引用
+  function registerCleanupEvents() {
+    
+    // 创建一次性事件处理函数
+    const beforeSwapHandler = () => {
+      selfDestruct();
+    };
+    
+    const beforeUnloadHandler = () => {
+      selfDestruct();
+    };
+    
+    // 添加清理事件监听器并保存引用
+    document.addEventListener("astro:before-swap", beforeSwapHandler, { once: true });
+    window.addEventListener("beforeunload", beforeUnloadHandler, { once: true });
+    
+    // 保存清理事件引用，用于完全销毁
+    cleanupListeners.push(
+      { element: document, eventType: "astro:before-swap", handler: beforeSwapHandler, options: { once: true } },
+      { element: window, eventType: "beforeunload", handler: beforeUnloadHandler, options: { once: true } }
+    );
+  }
+
   // 创建一个共享的计算高亮位置的函数
   function calculateHighlightPositions(options = {}) {
     const { navSelector, immediate = false } = options;
@@ -537,7 +614,6 @@ const navSelectorClassName = "mr-4";
   
   // 在DOMContentLoaded前预先执行一次定位，减少闪烁
   (function prePositionHighlights() {
-    const navSelector = document.querySelector('.nav-selector');
     if (!navSelector) return;
     
     // 如果有活动项，尝试预先定位高亮
@@ -553,755 +629,683 @@ const navSelectorClassName = "mr-4";
     }
   })();
   
-  // DOM加载完成后执行
-  document.addEventListener('DOMContentLoaded', function() {
-    // 存储所有事件监听器，便于统一清理
-    const listeners = [];
+  // 注册清理事件
+  registerCleanupEvents();
+  
+  // DOM加载完成后执行初始化
+  function initNavigation() {
+    // 检查DOM是否已加载
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", setupNavigation, { once: true });
+    } else {
+      setupNavigation();
+    }
+  }
+  
+  // 主要设置函数
+  function setupNavigation() {
     
-    // 添加事件监听器并记录，方便后续统一清理
-    function addListener(element, eventType, handler, options) {
-      if (!element) return null;
-      element.addEventListener(eventType, handler, options);
-      listeners.push({ element, eventType, handler, options });
-      return handler;
+    // 设置桌面导航
+    setupNavSelector();
+    
+    // 设置移动端导航
+    setupMobileNav();
+    
+  }
+  
+  // 初始化导航选择器
+  function setupNavSelector() {
+    // 获取DOM元素
+    if (!navSelector) return;
+    
+    const primaryHighlight = document.getElementById('nav-primary-highlight');
+    const secondaryHighlight = document.getElementById('nav-secondary-highlight');
+    const navItems = document.querySelectorAll('.nav-item');
+    const navGroups = document.querySelectorAll('.nav-group');
+    const navToggles = document.querySelectorAll('.nav-group-toggle');
+    const navSubItems = document.querySelectorAll('.nav-subitem');
+    
+    if (!primaryHighlight || !secondaryHighlight) {
+      console.warn(`导航脚本未找到高亮元素，导航功能可能不完整`);
     }
     
-    // 清理函数 - 移除所有事件监听器
-    function cleanup() {
-      listeners.forEach(({ element, eventType, handler, options }) => {
+    // 获取过渡动画持续时间
+    const transitionDuration = parseInt(navSelector.dataset.duration || 300);
+    const activeClass = "font-medium";
+    
+    // 当前活动项的状态 - 从DOM中提取当前激活状态
+    let activeItemId = null;
+    let activeSubItemId = null;
+    let activeGroupId = null;
+    
+    // 读取初始激活状态
+    const activeItemElement = document.querySelector('.nav-item.active');
+    if (activeItemElement) {
+      activeItemId = activeItemElement.dataset.itemId;
+    }
+    
+    const activeSubItemElement = document.querySelector('.nav-subitem.active');
+    if (activeSubItemElement) {
+      activeSubItemId = activeSubItemElement.dataset.subitemId;
+      activeGroupId = activeSubItemElement.dataset.parentId;
+    }
+    
+    const activeGroupElement = document.querySelector('.nav-group.active');
+    if (activeGroupElement && !activeSubItemId) {
+      activeGroupId = activeGroupElement.dataset.groupId;
+    }
+    
+    // 设置CSS变量
+    function setCssVariables() {
+      // 从primaryHighlight和secondaryHighlight中提取背景色
+      if (primaryHighlight && secondaryHighlight) {
+        const primaryStyle = window.getComputedStyle(primaryHighlight);
+        const secondaryStyle = window.getComputedStyle(secondaryHighlight);
+        
+        // 设置CSS变量
+        navSelector.style.setProperty('--primary-highlight-bg', primaryStyle.backgroundColor);
+        navSelector.style.setProperty('--secondary-highlight-bg', secondaryStyle.backgroundColor);
+      }
+    }
+    
+    // 初始调用一次设置CSS变量
+    setCssVariables();
+    
+    // 重置所有菜单状态
+    function resetAllMenus() {
+      // 关闭所有二级菜单
+      navGroups.forEach(group => {
+        const items = group.querySelector('.nav-group-items');
+        const toggle = group.querySelector('.nav-group-toggle');
+        
+        if (items) {
+          items.classList.remove('menu-visible');
+          items.classList.add('hidden');
+          items.classList.remove('menu-hidden');
+        }
+        
+        if (toggle) {
+          toggle.classList.remove('menu-up');
+        }
+        
+        // 移除组的激活状态
+        group.classList.remove('active');
+      });
+    }
+    
+    // 兼容swup的导航方法
+    function navigateTo(href) {
+      // 如果使用swup
+      const hasSwup = typeof window.swup !== 'undefined';
+      
+      if (hasSwup) {
         try {
-          element.removeEventListener(eventType, handler, options);
+          // 正确使用swup的API
+          window.swup.navigate(href);
+          return;
         } catch (err) {
-          console.error('移除导航事件监听器出错:', err);
+          // 尝试使用swup的替代方法
+          try {
+            window.swup.loadPage({
+              url: href
+            });
+            return;
+          } catch (err2) {
+            console.warn(`导航脚本Swup导航失败:`, err2);
+          }
+        }
+      }
+      
+      // 检查是否有匹配的链接，使用其点击事件可能会触发注册在链接上的swup事件
+      const existingLink = document.querySelector(`a[href="${href}"]`);
+      if (existingLink) {
+        existingLink.click();
+        return;
+      }
+      
+      // 以下是在swup不可用或出错时的回退方案
+      
+      // 如果使用Astro的View Transitions
+      if (document.startViewTransition) {
+        document.startViewTransition(() => {
+          window.location.href = href;
+        });
+        return;
+      }
+      
+      // 最后的回退：普通导航
+      window.location.href = href;
+    }
+    
+    // 更新高亮背景
+    function updateHighlights(immediate = false) {
+      requestAnimationFrame(() => {
+        const highlightPositions = calculateHighlightPositions({
+          navSelector,
+          immediate
+        });
+        
+        if (highlightPositions) {
+          highlightPositions.applyPositions(immediate);
         }
       });
-      listeners.length = 0;
     }
     
-    // 初始化导航选择器
-    function setupNavSelector() {
-      // 获取DOM元素
-      const navSelector = document.querySelector('.nav-selector');
-      if (!navSelector) return;
+    // 设置激活的一级菜单项
+    function setActiveItem(itemId) {
+      // 清除所有菜单状态
+      resetAllMenus();
       
-      const primaryHighlight = document.getElementById('nav-primary-highlight');
-      const secondaryHighlight = document.getElementById('nav-secondary-highlight');
-      const navItems = document.querySelectorAll('.nav-item');
-      const navGroups = document.querySelectorAll('.nav-group');
-      const navToggles = document.querySelectorAll('.nav-group-toggle');
-      const navSubItems = document.querySelectorAll('.nav-subitem');
+      // 清除所有激活状态
+      navItems.forEach(item => {
+        item.classList.remove(...activeClass.split(' '));
+        item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      });
       
-      // 获取过渡动画持续时间
-      const transitionDuration = parseInt(navSelector.dataset.duration || 300);
-      const activeClass = "font-medium";
+      navSubItems.forEach(item => {
+        item.classList.remove(...activeClass.split(' '));
+        item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      });
       
-      // 当前活动项的状态 - 从DOM中提取当前激活状态
-      let activeItemId = null;
-      let activeSubItemId = null;
-      let activeGroupId = null;
-      
-      // 读取初始激活状态
-      const activeItemElement = document.querySelector('.nav-item.active');
-      if (activeItemElement) {
-        activeItemId = activeItemElement.dataset.itemId;
-      }
-      
-      const activeSubItemElement = document.querySelector('.nav-subitem.active');
-      if (activeSubItemElement) {
-        activeSubItemId = activeSubItemElement.dataset.subitemId;
-        activeGroupId = activeSubItemElement.dataset.parentId;
-      }
-      
-      const activeGroupElement = document.querySelector('.nav-group.active');
-      if (activeGroupElement && !activeSubItemId) {
-        activeGroupId = activeGroupElement.dataset.groupId;
-      }
-      
-      // 设置CSS变量
-      function setCssVariables() {
-        // 从primaryHighlight和secondaryHighlight中提取背景色
-        if (primaryHighlight && secondaryHighlight) {
-          const primaryStyle = window.getComputedStyle(primaryHighlight);
-          const secondaryStyle = window.getComputedStyle(secondaryHighlight);
-          
-          // 设置CSS变量
-          navSelector.style.setProperty('--primary-highlight-bg', primaryStyle.backgroundColor);
-          navSelector.style.setProperty('--secondary-highlight-bg', secondaryStyle.backgroundColor);
+      // 清除所有组的激活状态和按钮样式
+      navGroups.forEach(group => {
+        group.classList.remove('active');
+        
+        // 清除组内按钮的激活状态
+        const toggle = group.querySelector('.nav-group-toggle');
+        if (toggle) {
+          toggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+          toggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
         }
-      }
+      });
       
-      // 初始调用一次设置CSS变量
-      setCssVariables();
-      
-      // 重置所有菜单状态
-      function resetAllMenus() {
-        // 关闭所有二级菜单
-        navGroups.forEach(group => {
-          const items = group.querySelector('.nav-group-items');
-          const toggle = group.querySelector('.nav-group-toggle');
-          
-          if (items) {
-            items.classList.remove('menu-visible');
-            items.classList.add('hidden');
-            items.classList.remove('menu-hidden');
-          }
-          
-          if (toggle) {
-            toggle.classList.remove('menu-up');
-          }
-          
-          // 移除组的激活状态
-          group.classList.remove('active');
-        });
-      }
-      
-      // 兼容swup的导航方法
-      function navigateTo(href) {
-        // 如果使用swup
-        if (window.swup) {
-          try {
-            // 正确使用swup的API
-            window.swup.navigate(href);
-            return;
-          } catch (err) {
-            // 尝试使用swup的替代方法
-            try {
-              window.swup.loadPage({
-                url: href
-              });
-              return;
-            } catch (err2) {
-              console.error("Swup替代导航也出错:", err2);
-            }
-          }
-        }
-        
-        // 检查是否有匹配的链接，使用其点击事件可能会触发注册在链接上的swup事件
-        const existingLink = document.querySelector(`a[href="${href}"]`);
-        if (existingLink) {
-          existingLink.click();
-          return;
-        }
-        
-        // 以下是在swup不可用或出错时的回退方案
-        
-        // 如果使用Astro的View Transitions
-        if (document.startViewTransition) {
-          document.startViewTransition(() => {
-            window.location.href = href;
-          });
-          return;
-        }
-        
-        // 最后的回退：普通导航
-        window.location.href = href;
-      }
-      
-      // 更新高亮背景
-      function updateHighlights(immediate = false) {
-        requestAnimationFrame(() => {
-          const highlightPositions = calculateHighlightPositions({
-            navSelector,
-            immediate
-          });
-          
-          if (highlightPositions) {
-            highlightPositions.applyPositions(immediate);
-          }
-        });
-      }
-      
-      // 设置激活的一级菜单项
-      function setActiveItem(itemId) {
-        // 清除所有菜单状态
-        resetAllMenus();
-        
-        // 清除所有激活状态
-        navItems.forEach(item => {
-          item.classList.remove(...activeClass.split(' '));
-          item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        });
-        
-        navSubItems.forEach(item => {
-          item.classList.remove(...activeClass.split(' '));
-          item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        });
-        
-        // 清除所有组的激活状态和按钮样式
-        navGroups.forEach(group => {
-          group.classList.remove('active');
-          
-          // 清除组内按钮的激活状态
-          const toggle = group.querySelector('.nav-group-toggle');
-          if (toggle) {
-            toggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-            toggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-          }
-        });
-        
-        // 设置新的激活状态
-        const targetItem = document.querySelector(`.nav-item[data-item-id="${itemId}"]`);
-        if (targetItem) {
-          targetItem.classList.add(...activeClass.split(' '));
-          targetItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          targetItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-          
-          // 更新状态
-          activeItemId = itemId;
-          activeGroupId = null;
-          activeSubItemId = null;
-        }
-        
-        // 更新高亮背景
-        updateHighlights();
-      }
-      
-      // 设置激活的二级菜单项
-      function setActiveSubItem(subItemId) {
-        if (!subItemId) {
-          return;
-        }
-        
-        // 查找目标项
-        const targetItem = document.querySelector(`.nav-subitem[data-subitem-id="${subItemId}"]`);
-        if (!targetItem) {
-          return;
-        }
-        
-        // 获取父组ID
-        const parentId = targetItem.dataset.parentId;
-        if (!parentId) {
-          return;
-        }
-        
-        // 清除所有普通菜单项的高亮
-        navItems.forEach(item => {
-          item.classList.remove(...activeClass.split(' '));
-          item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        });
-        
-        // 清除所有二级菜单项的高亮
-        navSubItems.forEach(item => {
-          item.classList.remove(...activeClass.split(' '));
-          item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        });
-        
-        // 清除所有组按钮的激活状态
-        navGroups.forEach(group => {
-          const groupId = group.dataset.groupId;
-          // 只保留当前激活组的激活状态
-          if (groupId !== parentId) {
-            group.classList.remove('active');
-            const toggle = group.querySelector('.nav-group-toggle');
-            if (toggle) {
-              toggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-              toggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-            }
-            
-            // 确保子菜单是隐藏的
-            const items = group.querySelector('.nav-group-items');
-            if (items) {
-              items.classList.add('hidden');
-              items.classList.remove('menu-visible');
-            }
-          }
-        });
-        
-        // 设置新的激活状态
+      // 设置新的激活状态
+      const targetItem = document.querySelector(`.nav-item[data-item-id="${itemId}"]`);
+      if (targetItem) {
         targetItem.classList.add(...activeClass.split(' '));
         targetItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
         targetItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
         
         // 更新状态
-        activeSubItemId = subItemId;
-        activeGroupId = parentId;
-        activeItemId = null;
-        
-        // 确保父组处于激活状态
-        const parentGroup = document.querySelector(`.nav-group[data-group-id="${parentId}"]`);
-        if (parentGroup) {
-          parentGroup.classList.add('active');
-          
-          // 确保二级菜单可见
-          const items = parentGroup.querySelector('.nav-group-items');
-          const toggle = parentGroup.querySelector('.nav-group-toggle');
-          
-          if (items && toggle) {
-            toggle.classList.add('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-            toggle.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-            items.classList.remove('hidden');
-            items.classList.add('menu-visible');
-          }
-        }
-        
-        // 更新高亮背景
-        updateHighlights();
+        activeItemId = itemId;
+        activeGroupId = null;
+        activeSubItemId = null;
       }
       
-      // 切换导航组的显示状态
-      function toggleNavGroup(groupId, forceState = null) {
-        const targetGroup = document.querySelector(`.nav-group[data-group-id="${groupId}"]`);
-        if (!targetGroup) {
-          return;
-        }
-        
-        const items = targetGroup.querySelector('.nav-group-items');
-        const toggle = targetGroup.querySelector('.nav-group-toggle');
-        
-        if (!items || !toggle) {
-          return;
-        }
-        
-        // 获取过渡动画持续时间
-        const duration = parseInt(navSelector.dataset.duration || 300);
-        
-        // 当前菜单是否可见
-        const isVisible = items.classList.contains('menu-visible');
-        
-        // 确定最终状态（展开或收起）
-        const shouldOpen = forceState !== null ? forceState : !isVisible;
-        
-        // 如果状态相同，无需操作
-        if ((shouldOpen && isVisible) || (!shouldOpen && !isVisible)) {
-          return;
-        }
-        
-        // 清除所有普通菜单项的高亮状态
-        navItems.forEach(item => {
-          item.classList.remove(...activeClass.split(' '));
-          item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        });
-        
-        // 收起菜单
-        if (!shouldOpen) {
-          // 先设置过渡类
-          items.classList.add('menu-hidden');
-          
-          // 延迟隐藏菜单，等待过渡完成
-          setTimeout(() => {
-            // 移除组的激活状态
-            targetGroup.classList.remove('active');
-            
-            // 显示一级菜单按钮
+      // 更新高亮背景
+      updateHighlights();
+    }
+    
+    // 设置激活的二级菜单项
+    function setActiveSubItem(subItemId) {
+      if (!subItemId) {
+        return;
+      }
+      
+      // 查找目标项
+      const targetItem = document.querySelector(`.nav-subitem[data-subitem-id="${subItemId}"]`);
+      if (!targetItem) {
+        return;
+      }
+      
+      // 获取父组ID
+      const parentId = targetItem.dataset.parentId;
+      if (!parentId) {
+        return;
+      }
+      
+      // 清除所有普通菜单项的高亮
+      navItems.forEach(item => {
+        item.classList.remove(...activeClass.split(' '));
+        item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      });
+      
+      // 清除所有二级菜单项的高亮
+      navSubItems.forEach(item => {
+        item.classList.remove(...activeClass.split(' '));
+        item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      });
+      
+      // 清除所有组按钮的激活状态
+      navGroups.forEach(group => {
+        const groupId = group.dataset.groupId;
+        // 只保留当前激活组的激活状态
+        if (groupId !== parentId) {
+          group.classList.remove('active');
+          const toggle = group.querySelector('.nav-group-toggle');
+          if (toggle) {
             toggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
             toggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-            
-            // 隐藏二级菜单
-            items.classList.remove('menu-visible');
+          }
+          
+          // 确保子菜单是隐藏的
+          const items = group.querySelector('.nav-group-items');
+          if (items) {
             items.classList.add('hidden');
-            items.classList.remove('menu-hidden');
-            
-            // 清除激活状态
-            if (activeGroupId === groupId) {
-              activeGroupId = null;
-              activeSubItemId = null;
-              
-              // 重置高亮背景，确保切换时背景样式清理干净
-              if (primaryHighlight) primaryHighlight.style.opacity = '0';
-              if (secondaryHighlight) secondaryHighlight.style.opacity = '0';
-              navSelector.setAttribute('data-has-active', 'false');
-            }
-            
-            // 给DOM渲染一些时间，然后更新高亮
-            setTimeout(() => {
-              updateHighlights(true);
-            }, 50);
-          }, duration);
-        } 
-        // 展开菜单
-        else {
-          // 先关闭所有其他菜单组
-          resetAllMenus();
-          
-          // 清除一级菜单的高亮状态
-          activeItemId = null;
-          
-          // 清除所有组的激活状态和按钮样式
-          navGroups.forEach(group => {
-            const gid = group.dataset.groupId;
-            if (gid !== groupId) {
-              group.classList.remove('active');
-              
-              // 清除组内按钮的激活状态
-              const groupToggle = group.querySelector('.nav-group-toggle');
-              if (groupToggle) {
-                groupToggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-                groupToggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-              }
-            }
-          });
-          
-          // 标记组为激活状态
-          targetGroup.classList.add('active');
-          
-          // 设置一级菜单按钮样式
+            items.classList.remove('menu-visible');
+          }
+        }
+      });
+      
+      // 设置新的激活状态
+      targetItem.classList.add(...activeClass.split(' '));
+      targetItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+      targetItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      
+      // 更新状态
+      activeSubItemId = subItemId;
+      activeGroupId = parentId;
+      activeItemId = null;
+      
+      // 确保父组处于激活状态
+      const parentGroup = document.querySelector(`.nav-group[data-group-id="${parentId}"]`);
+      if (parentGroup) {
+        parentGroup.classList.add('active');
+        
+        // 确保二级菜单可见
+        const items = parentGroup.querySelector('.nav-group-items');
+        const toggle = parentGroup.querySelector('.nav-group-toggle');
+        
+        if (items && toggle) {
           toggle.classList.add('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
           toggle.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-          
-          // 展开二级菜单
-          items.classList.remove('hidden', 'menu-hidden');
-          
-          // 使用requestAnimationFrame确保DOM更新后再添加visible类
-          requestAnimationFrame(() => {
-            items.classList.add('menu-visible');
-            
-            // 当菜单展开后更新高亮背景
-            setTimeout(() => {
-              updateHighlights(true);
-            }, 50);
-          });
-          
-          // 设置激活状态
-          activeGroupId = groupId;
-          
-          // 如果没有选中的二级菜单项，则选中第一个并导航
-          if (!activeSubItemId || !activeSubItemId.startsWith(groupId)) {
-            const firstSubItem = targetGroup.querySelector('.nav-subitem');
-            if (firstSubItem) {
-              const subItemId = firstSubItem.dataset.subitemId;
-              const href = firstSubItem.getAttribute('href');
-              
-              // 清除所有二级菜单项的高亮
-              navSubItems.forEach(item => {
-                item.classList.remove(...activeClass.split(' '));
-                item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-                item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-              });
-              
-              // 设置新的二级菜单项高亮
-              firstSubItem.classList.add(...activeClass.split(' '));
-              firstSubItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-              firstSubItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-              
-              // 设置高亮
-              activeSubItemId = subItemId;
-              
-              // 导航到第一个子项
-              if (href) {
-                navigateTo(href);
-              }
-            }
-          } else {
-            // 已有选中的二级菜单项，找到并重新设置高亮
-            const activeSubItem = document.querySelector(`.nav-subitem[data-subitem-id="${activeSubItemId}"]`);
-            if (activeSubItem) {
-              // 清除所有二级菜单项的高亮
-              navSubItems.forEach(item => {
-                item.classList.remove(...activeClass.split(' '));
-                item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-                item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-              });
-              
-              // 设置高亮
-              activeSubItem.classList.add(...activeClass.split(' '));
-              activeSubItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
-              activeSubItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-            }
-            
-            // 更新高亮
-            updateHighlights(true);
-          }
+          items.classList.remove('hidden');
+          items.classList.add('menu-visible');
         }
       }
       
-      // 查找匹配当前路径的导航项
-      function findMatchingNavItem() {
-        const currentPath = window.location.pathname;
-        const normalizedPath = currentPath === '/' ? '/' : 
-          currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
-        
-        // 首先检查子项
-        for (const subItem of navSubItems) {
-          const href = subItem.getAttribute('href');
-          if (href === normalizedPath) {
-            return {
-              type: 'subitem',
-              subitemId: subItem.dataset.subitemId,
-              parentId: subItem.dataset.parentId,
-              element: subItem
-            };
-          }
-        }
-        
-        // 再检查主导航项
-        for (const item of navItems) {
-          const href = item.getAttribute('href');
-          if (href === normalizedPath) {
-            return {
-              type: 'item',
-              itemId: item.dataset.itemId,
-              element: item
-            };
-          }
-        }
-        
-        // 没有完全匹配，尝试前缀匹配（用于文章详情等页面）
-        for (const subItem of navSubItems) {
-          const href = subItem.getAttribute('href');
-          if (normalizedPath.startsWith(href) && href !== '/') {
-            return {
-              type: 'subitem',
-              subitemId: subItem.dataset.subitemId,
-              parentId: subItem.dataset.parentId,
-              element: subItem
-            };
-          }
-        }
-        
-        for (const item of navItems) {
-          const href = item.getAttribute('href');
-          if (normalizedPath.startsWith(href) && href !== '/') {
-            return {
-              type: 'item',
-              itemId: item.dataset.itemId,
-              element: item
-            };
-          }
-        }
-        
-        return null;
+      // 更新高亮背景
+      updateHighlights();
+    }
+    
+    // 切换导航组的显示状态
+    function toggleNavGroup(groupId, forceState = null) {
+      const targetGroup = document.querySelector(`.nav-group[data-group-id="${groupId}"]`);
+      if (!targetGroup) {
+        return;
       }
       
-      // 初始化当前页面的激活状态
-      function initActiveState() {
-        // 高亮背景已经在服务器端渲染时预设，现在需确保应用正确的文字颜色
-        
-        // 查找当前活动项
-        const activeItemElement = document.querySelector('.nav-item.active');
-        const activeSubItemElement = document.querySelector('.nav-subitem.active');
-        const activeGroupElement = document.querySelector('.nav-group.active');
-        
-        // 应用激活文字样式
-        if (activeItemElement) {
-          activeItemElement.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          activeItemElement.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        }
-        
-        if (activeSubItemElement) {
-          activeSubItemElement.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
-          activeSubItemElement.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-        }
-        
-        if (activeGroupElement) {
-          const toggle = activeGroupElement.querySelector('.nav-group-toggle');
-          if (toggle) {
-            toggle.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
-            toggle.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
-          }
-        }
-        
-        // 计算正确高亮位置
-        updateHighlights(true);
+      const items = targetGroup.querySelector('.nav-group-items');
+      const toggle = targetGroup.querySelector('.nav-group-toggle');
+      
+      if (!items || !toggle) {
+        return;
       }
       
-      // 注册事件监听
+      // 获取过渡动画持续时间
+      const duration = parseInt(navSelector.dataset.duration || 300);
       
-      // 普通菜单项点击
+      // 当前菜单是否可见
+      const isVisible = items.classList.contains('menu-visible');
+      
+      // 确定最终状态（展开或收起）
+      const shouldOpen = forceState !== null ? forceState : !isVisible;
+      
+      // 如果状态相同，无需操作
+      if ((shouldOpen && isVisible) || (!shouldOpen && !isVisible)) {
+        return;
+      }
+      
+      // 清除所有普通菜单项的高亮状态
       navItems.forEach(item => {
-        addListener(item, 'click', (e) => {
-          e.preventDefault();
+        item.classList.remove(...activeClass.split(' '));
+        item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      });
+      
+      // 收起菜单
+      if (!shouldOpen) {
+        // 先设置过渡类
+        items.classList.add('menu-hidden');
+        
+        // 延迟隐藏菜单，等待过渡完成
+        setTimeout(() => {
+          // 移除组的激活状态
+          targetGroup.classList.remove('active');
           
-          const itemId = item.dataset.itemId;
-          const href = item.getAttribute('href');
+          // 显示一级菜单按钮
+          toggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+          toggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
           
-          // 设置高亮
-          setActiveItem(itemId);
+          // 隐藏二级菜单
+          items.classList.remove('menu-visible');
+          items.classList.add('hidden');
+          items.classList.remove('menu-hidden');
           
-          // 导航到目标页面
-          if (href) {
-            navigateTo(href);
+          // 清除激活状态
+          if (activeGroupId === groupId) {
+            activeGroupId = null;
+            activeSubItemId = null;
+            
+            // 重置高亮背景，确保切换时背景样式清理干净
+            if (primaryHighlight) primaryHighlight.style.opacity = '0';
+            if (secondaryHighlight) secondaryHighlight.style.opacity = '0';
+            navSelector.setAttribute('data-has-active', 'false');
+          }
+          
+          // 给DOM渲染一些时间，然后更新高亮
+          setTimeout(() => {
+            updateHighlights(true);
+          }, 50);
+        }, duration);
+      } 
+      // 展开菜单
+      else {
+        // 先关闭所有其他菜单组
+        resetAllMenus();
+        
+        // 清除一级菜单的高亮状态
+        activeItemId = null;
+        
+        // 清除所有组的激活状态和按钮样式
+        navGroups.forEach(group => {
+          const gid = group.dataset.groupId;
+          if (gid !== groupId) {
+            group.classList.remove('active');
+            
+            // 清除组内按钮的激活状态
+            const groupToggle = group.querySelector('.nav-group-toggle');
+            if (groupToggle) {
+              groupToggle.classList.remove('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+              groupToggle.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+            }
           }
         });
-      });
-      
-      // 一级菜单按钮点击
-      navToggles.forEach(toggle => {
-        addListener(toggle, 'click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
+        
+        // 标记组为激活状态
+        targetGroup.classList.add('active');
+        
+        // 设置一级菜单按钮样式
+        toggle.classList.add('menu-up', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        toggle.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+        
+        // 展开二级菜单
+        items.classList.remove('hidden', 'menu-hidden');
+        
+        // 使用requestAnimationFrame确保DOM更新后再添加visible类
+        requestAnimationFrame(() => {
+          items.classList.add('menu-visible');
           
-          const groupId = toggle.dataset.toggleId;
-          
-          // 切换菜单状态
-          toggleNavGroup(groupId);
+          // 当菜单展开后更新高亮背景
+          setTimeout(() => {
+            updateHighlights(true);
+          }, 50);
         });
-      });
-      
-      // 二级菜单项点击
-      navSubItems.forEach(item => {
-        addListener(item, 'click', (e) => {
-          e.preventDefault();
-          
-          const subItemId = item.dataset.subitemId;
-          const href = item.getAttribute('href');
-          
-          // 设置高亮
-          setActiveSubItem(subItemId);
-          
-          // 导航到目标页面
-          if (href) {
-            navigateTo(href);
+        
+        // 设置激活状态
+        activeGroupId = groupId;
+        
+        // 如果没有选中的二级菜单项，则选中第一个并导航
+        if (!activeSubItemId || !activeSubItemId.startsWith(groupId)) {
+          const firstSubItem = targetGroup.querySelector('.nav-subitem');
+          if (firstSubItem) {
+            const subItemId = firstSubItem.dataset.subitemId;
+            const href = firstSubItem.getAttribute('href');
+            
+            // 清除所有二级菜单项的高亮
+            navSubItems.forEach(item => {
+              item.classList.remove(...activeClass.split(' '));
+              item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+              item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+            });
+            
+            // 设置新的二级菜单项高亮
+            firstSubItem.classList.add(...activeClass.split(' '));
+            firstSubItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+            firstSubItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+            
+            // 设置高亮
+            activeSubItemId = subItemId;
+            
+            // 导航到第一个子项
+            if (href) {
+              navigateTo(href);
+            }
           }
-        });
-      });
-      
-      // 初始化
-      initActiveState();
-      
-      // 处理页面切换
-      if (window.swup) {
-        // 页面内容替换后重新初始化
-        addListener(document, 'swup:contentReplaced', () => {
-          setTimeout(initActiveState, 50);
-        });
-        
-        // 页面内容替换前保存当前状态
-        addListener(document, 'swup:willReplaceContent', () => {
-        });
-        
-        // 视图转换开始
-        addListener(document, 'swup:animationInStart', () => {
-        });
-        
-        // 视图转换结束
-        addListener(document, 'swup:animationInDone', () => {
-          // 再次调用初始化
-          initActiveState();
-          // 确保高亮背景位置正确
+        } else {
+          // 已有选中的二级菜单项，找到并重新设置高亮
+          const activeSubItem = document.querySelector(`.nav-subitem[data-subitem-id="${activeSubItemId}"]`);
+          if (activeSubItem) {
+            // 清除所有二级菜单项的高亮
+            navSubItems.forEach(item => {
+              item.classList.remove(...activeClass.split(' '));
+              item.classList.remove('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+              item.classList.add('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+            });
+            
+            // 设置高亮
+            activeSubItem.classList.add(...activeClass.split(' '));
+            activeSubItem.classList.add('active', 'font-semibold', 'text-primary-700', 'dark:text-primary-300');
+            activeSubItem.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+          }
+          
+          // 更新高亮
           updateHighlights(true);
-        });
+        }
+      }
+    }
+    
+    // 初始化当前页面的激活状态
+    function initActiveState() {
+      // 高亮背景已经在服务器端渲染时预设，现在需确保应用正确的文字颜色
+      
+      // 查找当前活动项
+      const activeItemElement = document.querySelector('.nav-item.active');
+      const activeSubItemElement = document.querySelector('.nav-subitem.active');
+      const activeGroupElement = document.querySelector('.nav-group.active');
+      
+      // 应用激活文字样式
+      if (activeItemElement) {
+        activeItemElement.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        activeItemElement.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
       }
       
-      // 窗口大小变化时重新计算高亮位置
-      addListener(window, 'resize', () => {
-        updateHighlights(true);
+      if (activeSubItemElement) {
+        activeSubItemElement.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
+        activeSubItemElement.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+      }
+      
+      if (activeGroupElement) {
+        const toggle = activeGroupElement.querySelector('.nav-group-toggle');
+        if (toggle) {
+          toggle.classList.add('font-semibold', 'text-primary-700', 'dark:text-primary-300');
+          toggle.classList.remove('text-gray-600', 'dark:text-gray-300', 'hover:text-primary-600', 'dark:hover:text-primary-400');
+        }
+      }
+      
+      // 计算正确高亮位置
+      updateHighlights(true);
+    }
+    
+    // 注册事件监听
+    
+    // 普通菜单项点击
+    navItems.forEach(item => {
+      addListener(item, 'click', (e) => {
+        e.preventDefault();
+        
+        const itemId = item.dataset.itemId;
+        const href = item.getAttribute('href');
+        
+        // 设置高亮
+        setActiveItem(itemId);
+        
+        // 导航到目标页面
+        if (href) {
+          navigateTo(href);
+        }
+      });
+    });
+    
+    // 一级菜单按钮点击
+    navToggles.forEach(toggle => {
+      addListener(toggle, 'click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const groupId = toggle.dataset.toggleId;
+        
+        // 切换菜单状态
+        toggleNavGroup(groupId);
+      });
+    });
+    
+    // 二级菜单项点击
+    navSubItems.forEach(item => {
+      addListener(item, 'click', (e) => {
+        e.preventDefault();
+        
+        const subItemId = item.dataset.subitemId;
+        const href = item.getAttribute('href');
+        
+        // 设置高亮
+        setActiveSubItem(subItemId);
+        
+        // 导航到目标页面
+        if (href) {
+          navigateTo(href);
+        }
+      });
+    });
+    
+    // 初始化
+    initActiveState();
+    
+    // 处理页面切换
+    const hasSwup = typeof window.swup !== 'undefined';
+    if (hasSwup) {
+      // 页面内容替换后重新初始化
+      addListener(document, 'swup:contentReplaced', () => {
+        setTimeout(initActiveState, 50);
       });
       
-      // 在document上添加自定义方法，方便外部调用
+      // 视图转换开始
+      addListener(document, 'swup:animationInStart', () => {
+        // 这里可以添加动画开始时的处理逻辑
+      });
+      
+      // 视图转换结束
+      addListener(document, 'swup:animationInDone', () => {
+        // 再次调用初始化
+        initActiveState();
+        // 确保高亮背景位置正确
+        updateHighlights(true);
+      });
+    }
+    
+    // 添加Astro View Transitions事件监听
+    addListener(document, 'astro:page-load', () => {
+      setTimeout(initActiveState, 50);
+      updateHighlights(true);
+    });
+    
+    // 窗口大小变化时重新计算高亮位置
+    addListener(window, 'resize', () => {
+      updateHighlights(true);
+    });
+    
+    // 在document上添加自定义方法，方便外部调用，但使用弱引用避免内存泄漏
+    if (!document.resetNavigation) {
       document.resetNavigation = function() {
         initActiveState();
       };
-
-      // 动态检测swup实例
-      function checkSwup() {
-        if (!window.swup && typeof MutationObserver !== 'undefined') {
-          // 监听DOM变化，检查swup实例是否被后续加载
-          const observer = new MutationObserver((mutations) => {
-            if (window.swup) {
-              // 添加swup事件监听
-              addListener(document, 'swup:contentReplaced', () => {
-                setTimeout(initActiveState, 50);
-              });
-              
-              // 停止观察
-              observer.disconnect();
-            }
-          });
-          
-          // 开始观察文档
-          observer.observe(document.documentElement, {
-            childList: true,
-            subtree: true
-          });
-          
-          // 5秒后自动停止观察，避免长时间监听
-          setTimeout(() => {
-            observer.disconnect();
-          }, 5000);
-        }
-      }
-      
-      // 检测swup实例
-      checkSwup();
-      
-      // 返回清理函数
-      return cleanup;
+    }
+  }
+  
+  // 初始化移动端菜单和搜索功能
+  function setupMobileNav() {
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileSearchButton = document.getElementById('mobile-search-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const mobileSearch = document.getElementById('mobile-search');
+    const menuOpenIcon = document.getElementById('menu-open-icon');
+    const menuCloseIcon = document.getElementById('menu-close-icon');
+    
+    if (!mobileMenuButton || !mobileMenu) {
+      console.warn(`导航脚本未找到移动端菜单组件`);
+      return;
     }
     
-    // 初始化移动端菜单和搜索功能
-    function setupMobileNav() {
-      const mobileMenuButton = document.getElementById('mobile-menu-button');
-      const mobileSearchButton = document.getElementById('mobile-search-button');
-      const mobileMenu = document.getElementById('mobile-menu');
-      const mobileSearch = document.getElementById('mobile-search');
-      const menuOpenIcon = document.getElementById('menu-open-icon');
-      const menuCloseIcon = document.getElementById('menu-close-icon');
+    // 更新移动端菜单高亮状态的函数
+    function updateMobileMenuHighlight() {
       
-      // 更新移动端菜单高亮状态的函数
-      function updateMobileMenuHighlight() {
-        // 获取当前路径
-        const currentPath = window.location.pathname;
-        const normalizedPath = currentPath === '/' ? '/' : 
-          currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
-        
-        // 选择所有移动端菜单项
-        const mobileMenuItems = document.querySelectorAll('#mobile-menu a');
-        
-        // 找到匹配的菜单项并设置高亮
-        mobileMenuItems.forEach(item => {
-          const href = item.getAttribute('href');
-          // 检查是否完全匹配或者路径前缀匹配（但排除根路径'/'的前缀匹配）
-          if (href === normalizedPath || (normalizedPath.startsWith(href) && href !== '/')) {
-            // 应用高亮样式
-            item.classList.add('text-white', 'bg-primary-600', 'dark:bg-primary-500', 'shadow-sm');
-            item.classList.remove('text-gray-700', 'dark:text-gray-200', 'hover:bg-gray-100', 'dark:hover:bg-gray-800/70');
-            
-            // 如果是子菜单项，自动展开其父菜单
-            const submenu = item.closest('.mobile-submenu');
-            if (submenu) {
-              const parentId = submenu.getAttribute('data-parent-id');
-              const toggle = document.querySelector(`[data-mobile-menu-toggle="${parentId}"]`);
-              if (toggle && submenu.classList.contains('hidden')) {
-                // 模拟点击父菜单，展开子菜单
-                toggleSubmenu(parentId, true);
-              }
+      // 获取当前路径
+      const currentPath = window.location.pathname;
+      const normalizedPath = currentPath === '/' ? '/' : 
+        currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
+      
+      // 选择所有移动端菜单项
+      const mobileMenuItems = document.querySelectorAll('#mobile-menu a');
+      
+      // 找到匹配的菜单项并设置高亮
+      mobileMenuItems.forEach(item => {
+        const href = item.getAttribute('href');
+        // 检查是否完全匹配或者路径前缀匹配（但排除根路径'/'的前缀匹配）
+        if (href === normalizedPath || (normalizedPath.startsWith(href) && href !== '/')) {
+          // 应用高亮样式
+          item.classList.add('text-white', 'bg-primary-600', 'dark:bg-primary-500', 'shadow-sm');
+          item.classList.remove('text-gray-700', 'dark:text-gray-200', 'hover:bg-gray-100', 'dark:hover:bg-gray-800/70');
+          
+          // 如果是子菜单项，自动展开其父菜单
+          const submenu = item.closest('.mobile-submenu');
+          if (submenu) {
+            const parentId = submenu.getAttribute('data-parent-id');
+            const toggle = document.querySelector(`[data-mobile-menu-toggle="${parentId}"]`);
+            if (toggle && submenu.classList.contains('hidden')) {
+              // 展开子菜单
+              toggleSubmenu(parentId, true);
             }
-          } else {
-            // 移除高亮样式
-            item.classList.remove('text-white', 'bg-primary-600', 'dark:bg-primary-500', 'shadow-sm');
-            item.classList.add('text-gray-700', 'dark:text-gray-200', 'hover:bg-gray-100', 'dark:hover:bg-gray-800/70');
           }
-        });
-      }
-      
-      // 切换子菜单显示状态
-      function toggleSubmenu(parentId, forceOpen = null) {
-        const toggle = document.querySelector(`[data-mobile-menu-toggle="${parentId}"]`);
-        const submenu = document.querySelector(`.mobile-submenu[data-parent-id="${parentId}"]`);
-        const arrow = toggle ? toggle.querySelector('.mobile-menu-arrow') : null;
-        
-        if (!toggle || !submenu) return;
-        
-        // 确定是展开还是收起
-        const isHidden = submenu.classList.contains('hidden');
-        const shouldOpen = forceOpen !== null ? forceOpen : isHidden;
-        
-        if (shouldOpen) {
-          // 展开子菜单
-          submenu.classList.remove('hidden');
-          if (arrow) arrow.style.transform = 'rotate(180deg)';
         } else {
-          // 收起子菜单
-          submenu.classList.add('hidden');
-          if (arrow) arrow.style.transform = '';
+          // 移除高亮样式
+          item.classList.remove('text-white', 'bg-primary-600', 'dark:bg-primary-500', 'shadow-sm');
+          item.classList.add('text-gray-700', 'dark:text-gray-200', 'hover:bg-gray-100', 'dark:hover:bg-gray-800/70');
         }
-      }
+      });
+    }
+    
+    // 切换子菜单显示状态
+    function toggleSubmenu(parentId, forceOpen = null) {
+      const toggle = document.querySelector(`[data-mobile-menu-toggle="${parentId}"]`);
+      const submenu = document.querySelector(`.mobile-submenu[data-parent-id="${parentId}"]`);
+      const arrow = toggle ? toggle.querySelector('.mobile-menu-arrow') : null;
       
-      // 关闭所有子菜单
-      function closeAllSubmenus() {
-        const toggles = document.querySelectorAll('[data-mobile-menu-toggle]');
-        toggles.forEach(toggle => {
-          const parentId = toggle.getAttribute('data-mobile-menu-toggle');
-          if (parentId) {
-            toggleSubmenu(parentId, false);
-          }
-        });
+      if (!toggle || !submenu) return;
+      
+      // 确定是展开还是收起
+      const isHidden = submenu.classList.contains('hidden');
+      const shouldOpen = forceOpen !== null ? forceOpen : isHidden;
+      
+      if (shouldOpen) {
+        // 展开子菜单
+        submenu.classList.remove('hidden');
+        if (arrow) arrow.style.transform = 'rotate(180deg)';
+      } else {
+        // 收起子菜单
+        submenu.classList.add('hidden');
+        if (arrow) arrow.style.transform = '';
       }
+    }
+    
+    // 关闭所有子菜单
+    function closeAllSubmenus() {
+      const toggles = document.querySelectorAll('[data-mobile-menu-toggle]');
+      toggles.forEach(toggle => {
+        const parentId = toggle.getAttribute('data-mobile-menu-toggle');
+        if (parentId) {
+          toggleSubmenu(parentId, false);
+        }
+      });
+    }
+    
+    // 为所有子菜单切换按钮添加点击事件
+    function setupMobileSubmenuToggles() {
+      // 关闭所有子菜单（默认状态）
+      closeAllSubmenus();
       
       // 为所有子菜单切换按钮添加点击事件
       const submenuToggles = document.querySelectorAll('[data-mobile-menu-toggle]');
@@ -1313,223 +1317,163 @@ const navSelectorClassName = "mr-4";
           }
         });
       });
-      
-      // 关闭移动端菜单
-      function closeMobileMenu() {
-        if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
-          mobileMenu.classList.add('hidden');
-          
-          if (mobileMenuButton) {
-            mobileMenuButton.setAttribute('aria-expanded', 'false');
-            
-            // 重置菜单图标
-            if (menuOpenIcon && menuCloseIcon) {
-              menuOpenIcon.classList.remove('hidden');
-              menuCloseIcon.classList.add('hidden');
-            }
-          }
-          
-          // 同时关闭所有子菜单
-          closeAllSubmenus();
-        }
-      }
-      
-      // 关闭移动端搜索
-      function closeMobileSearch() {
-        if (mobileSearch && !mobileSearch.classList.contains('hidden')) {
-          mobileSearch.classList.add('hidden');
-          
-          if (mobileSearchButton) {
-            mobileSearchButton.setAttribute('aria-expanded', 'false');
-          }
-        }
-      }
-      
-      // 初始调用一次更新高亮状态（会自动展开包含当前页面的子菜单）
-      updateMobileMenuHighlight();
-      
-      if (mobileMenuButton && mobileMenu) {
-        addListener(mobileMenuButton, 'click', () => {
-          // 切换菜单显示状态
-          const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
-          
-          // 更新按钮状态
-          mobileMenuButton.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
-          
-          // 切换图标
-          if (menuOpenIcon && menuCloseIcon) {
-            menuOpenIcon.classList.toggle('hidden');
-            menuCloseIcon.classList.toggle('hidden');
-          }
-          
-          // 显示/隐藏菜单
-          mobileMenu.classList.toggle('hidden');
-          
-          // 如果搜索面板是开着的，关闭它
-          closeMobileSearch();
-          
-          // 确保高亮状态是最新的
-          updateMobileMenuHighlight();
-        });
-      }
-      
-      if (mobileSearchButton && mobileSearch) {
-        addListener(mobileSearchButton, 'click', () => {
-          // 切换搜索面板显示状态
-          const isExpanded = mobileSearchButton.getAttribute('aria-expanded') === 'true';
-          
-          // 更新按钮状态
-          mobileSearchButton.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
-          
-          // 显示/隐藏搜索面板
-          mobileSearch.classList.toggle('hidden');
-          
-          // 如果菜单是开着的，关闭它
-          closeMobileMenu();
-        });
-      }
-      
-      // 为移动端菜单的所有链接添加点击事件，点击后关闭菜单
-      const mobileMenuLinks = document.querySelectorAll('#mobile-menu a');
-      mobileMenuLinks.forEach(link => {
-        addListener(link, 'click', (e) => {
-          // 如果使用客户端路由（如swup或Astro View Transitions），阻止默认行为
-          if (window.swup || document.startViewTransition) {
-            e.preventDefault();
-            
-            // 获取链接地址
-            const href = link.getAttribute('href');
-            if (href) {
-              // 先关闭菜单
-              closeMobileMenu();
-              closeMobileSearch();
-              
-              // 延迟导航，确保菜单关闭动画完成
-              setTimeout(() => {
-                // 使用适当的导航方法
-                if (window.swup) {
-                  try {
-                    window.swup.navigate(href);
-                  } catch (err) {
-                    try {
-                      window.swup.loadPage({ url: href });
-                    } catch (err2) {
-                      window.location.href = href;
-                    }
-                  }
-                } else if (document.startViewTransition) {
-                  document.startViewTransition(() => {
-                    window.location.href = href;
-                  });
-                } else {
-                  window.location.href = href;
-                }
-              }, 50);
-            }
-          } else {
-            // 普通链接导航，浏览器会自动处理跳转
-            // 但仍然需要关闭菜单
-            closeMobileMenu();
-            closeMobileSearch();
-          }
-        });
-      });
-      
-      // 处理主题切换容器点击
-      const themeToggleContainer = document.getElementById('theme-toggle-container');
-      if (themeToggleContainer) {
-        addListener(themeToggleContainer, 'click', (e) => {
-          // 触发其中的ThemeToggle组件点击
-          const themeToggle = themeToggleContainer.querySelector('button');
-          if (themeToggle) {
-            themeToggle.click();
-          }
-        });
-      }
-      
-      // 处理页面切换，确保移动端菜单高亮状态更新
-      if (window.swup) {
-        // swup页面内容替换后
-        addListener(document, 'swup:contentReplaced', () => {
-          setTimeout(() => {
-            // 更新移动端菜单项的事件监听器，因为DOM已经更新
-            setupMobileSubmenuToggles();
-            // 更新高亮状态
-            updateMobileMenuHighlight();
-            // 确保菜单关闭
-            closeMobileMenu();
-            closeMobileSearch();
-          }, 50);
-        });
-        
-        // swup动画结束后
-        addListener(document, 'swup:animationInDone', () => {
-          updateMobileMenuHighlight();
-        });
-      }
-      
-      // 如果使用Astro的View Transitions
-      addListener(document, 'astro:page-load', () => {
-        // 更新移动端菜单项的事件监听器，因为DOM已经更新
-        setupMobileSubmenuToggles();
-        // 更新高亮状态
-        updateMobileMenuHighlight();
-        // 确保菜单关闭
-        closeMobileMenu();
-        closeMobileSearch();
-      });
-      
-      // 普通页面加载事件
-      addListener(window, 'popstate', () => {
-        setTimeout(() => {
-          // 更新移动端菜单项的事件监听器，因为DOM可能已经更新
-          setupMobileSubmenuToggles();
-          // 更新高亮状态
-          updateMobileMenuHighlight();
-          // 确保菜单关闭
-          closeMobileMenu();
-          closeMobileSearch();
-        }, 50);
-      });
-      
-      // 辅助函数：为移动端子菜单添加切换事件（用于页面切换后重新绑定）
-      function setupMobileSubmenuToggles() {
-        // 关闭所有子菜单（默认状态）
-        closeAllSubmenus();
-        
-        // 重新添加事件监听器
-        const submenuToggles = document.querySelectorAll('[data-mobile-menu-toggle]');
-        submenuToggles.forEach(toggle => {
-          // 移除可能存在的旧监听器（通过克隆和替换元素）
-          const newToggle = toggle.cloneNode(true);
-          toggle.parentNode.replaceChild(newToggle, toggle);
-          
-          // 添加新的事件监听器
-          addListener(newToggle, 'click', (e) => {
-            const parentId = newToggle.getAttribute('data-mobile-menu-toggle');
-            if (parentId) {
-              toggleSubmenu(parentId);
-            }
-          });
-        });
-      }
-      
-      // 暴露更新和关闭函数到全局，方便其他地方调用
-      document.updateMobileMenuHighlight = updateMobileMenuHighlight;
-      document.closeMobileMenu = closeMobileMenu;
-      document.closeMobileSearch = closeMobileSearch;
-      document.toggleMobileSubmenu = toggleSubmenu;
-      
-      return updateMobileMenuHighlight;
     }
     
-    // 执行初始化
-    const cleanupNav = setupNavSelector();
-    const updateMobileHighlight = setupMobileNav();
+    // 关闭移动端菜单
+    function closeMobileMenu() {
+      if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+        mobileMenu.classList.add('hidden');
+        
+        if (mobileMenuButton) {
+          mobileMenuButton.setAttribute('aria-expanded', 'false');
+          
+          // 重置菜单图标
+          if (menuOpenIcon && menuCloseIcon) {
+            menuOpenIcon.classList.remove('hidden');
+            menuCloseIcon.classList.add('hidden');
+          }
+        }
+        
+        // 同时关闭所有子菜单
+        closeAllSubmenus();
+      }
+    }
     
-    // 页面卸载时清理
-    window.addEventListener('beforeunload', cleanupNav);
-  });
+    // 关闭移动端搜索
+    function closeMobileSearch() {
+      if (mobileSearch && !mobileSearch.classList.contains('hidden')) {
+        mobileSearch.classList.add('hidden');
+        
+        if (mobileSearchButton) {
+          mobileSearchButton.setAttribute('aria-expanded', 'false');
+        }
+      }
+    }
+    
+    // 移动端菜单按钮点击事件
+    if (mobileMenuButton && mobileMenu) {
+      addListener(mobileMenuButton, 'click', () => {
+        // 切换菜单显示状态
+        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+        
+        // 更新按钮状态
+        mobileMenuButton.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+        
+        // 切换图标
+        if (menuOpenIcon && menuCloseIcon) {
+          menuOpenIcon.classList.toggle('hidden');
+          menuCloseIcon.classList.toggle('hidden');
+        }
+        
+        // 显示/隐藏菜单
+        mobileMenu.classList.toggle('hidden');
+        
+        // 如果搜索面板是开着的，关闭它
+        closeMobileSearch();
+        
+        // 确保高亮状态是最新的
+        updateMobileMenuHighlight();
+      });
+    }
+    
+    // 移动端搜索按钮点击事件
+    if (mobileSearchButton && mobileSearch) {
+      addListener(mobileSearchButton, 'click', () => {
+        // 切换搜索面板显示状态
+        const isExpanded = mobileSearchButton.getAttribute('aria-expanded') === 'true';
+        
+        // 更新按钮状态
+        mobileSearchButton.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+        
+        // 显示/隐藏搜索面板
+        mobileSearch.classList.toggle('hidden');
+        
+        // 如果菜单是开着的，关闭它
+        closeMobileMenu();
+      });
+    }
+    
+    // 为移动端菜单的所有链接添加点击事件，点击后关闭菜单
+    const mobileMenuLinks = document.querySelectorAll('#mobile-menu a');
+    mobileMenuLinks.forEach(link => {
+      addListener(link, 'click', (e) => {
+        // 如果使用客户端路由（如swup或Astro View Transitions），阻止默认行为
+        const hasSwup = typeof window.swup !== 'undefined';
+        const hasViewTransitions = typeof document.startViewTransition !== 'undefined';
+        
+        if (hasSwup || hasViewTransitions) {
+          e.preventDefault();
+          
+          // 获取链接地址
+          const href = link.getAttribute('href');
+          if (!href) return;
+          
+          // 先关闭菜单
+          closeMobileMenu();
+          closeMobileSearch();
+          
+          // 延迟导航，确保菜单关闭动画完成
+          setTimeout(() => {
+            // 使用适当的导航方法
+            if (hasSwup) {
+              try {
+                window.swup.navigate(href);
+              } catch (err) {
+                try {
+                  window.swup.loadPage({ url: href });
+                } catch (err2) {
+                  window.location.href = href;
+                }
+              }
+            } else if (hasViewTransitions) {
+              document.startViewTransition(() => {
+                window.location.href = href;
+              });
+            } else {
+              window.location.href = href;
+            }
+          }, 50);
+        } else {
+          // 普通链接导航，浏览器会自动处理跳转
+          // 但仍然需要关闭菜单
+          closeMobileMenu();
+          closeMobileSearch();
+        }
+      });
+    });
+    
+    // 为Astro View Transitions添加事件处理
+    addListener(document, 'astro:page-load', () => {
+      setupMobileSubmenuToggles();
+      updateMobileMenuHighlight();
+      closeMobileMenu();
+      closeMobileSearch();
+    });
+    
+    // 监听地址栏变化
+    addListener(window, 'popstate', () => {
+      setTimeout(() => {
+        updateMobileMenuHighlight();
+        closeMobileMenu();
+        closeMobileSearch();
+      }, 50);
+    });
+    
+    // 初始调用一次设置子菜单切换按钮和更新高亮状态
+    setupMobileSubmenuToggles();
+    updateMobileMenuHighlight();
+    
+    // 在document上添加自定义方法，方便外部调用（可选）
+    document.updateMobileMenuHighlight = updateMobileMenuHighlight;
+    document.closeMobileMenu = closeMobileMenu;
+    document.closeMobileSearch = closeMobileSearch;
+    document.toggleMobileSubmenu = toggleSubmenu;
+    
+    return updateMobileMenuHighlight;
+  }
+  
+  // 开始初始化
+  initNavigation();
 })();
 </script>
 
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 6bbf830..ae576aa 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -204,7 +204,6 @@ const Search: React.FC<SearchProps> = ({
         
         // 如果是取消的请求，不显示错误
         if (err instanceof Error && (err.name === 'AbortError' || err.message.includes('aborted'))) {
-          console.log('索引加载请求被取消:', err.message);
           return;
         }
         
@@ -239,7 +238,7 @@ const Search: React.FC<SearchProps> = ({
       }
     };
 
-    window.addEventListener('resize', handleResize, { passive: true });
+    window.addEventListener('resize', handleResize, { passive: false });
     return () => {
       window.removeEventListener('resize', handleResize);
     };
@@ -248,18 +247,35 @@ const Search: React.FC<SearchProps> = ({
   // 处理点击外部关闭搜索结果和建议
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      // 获取事件目标元素
+      const target = event.target as Node;
+      
+      // 检查是否点击了清除按钮、Tab按钮或其子元素
+      const clearButtonEl = document.querySelector('.clear-search-button');
+      const tabButtonEl = document.querySelector('.tab-completion-button');
+      
+      const isClickOnClearButton = clearButtonEl && (clearButtonEl === target || clearButtonEl.contains(target));
+      const isClickOnTabButton = tabButtonEl && (tabButtonEl === target || tabButtonEl.contains(target));
+      
+      // 如果点击了清除按钮或Tab按钮，不做任何操作
+      if (isClickOnClearButton || isClickOnTabButton) {
+        return;
+      }
+      
+      // 原有的逻辑：点击搜索框和结果区域之外时关闭
       if (
         searchResultsRef.current && 
-        !searchResultsRef.current.contains(event.target as Node) &&
+        !searchResultsRef.current.contains(target) &&
         searchInputRef.current &&
-        !searchInputRef.current.contains(event.target as Node)
+        !searchInputRef.current.contains(target)
       ) {
+        // 当点击搜索框和结果区域之外时，才隐藏结果
         setShowResults(false);
         setInlineSuggestion(prev => ({ ...prev, visible: false })); // 也隐藏内联建议
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside, { passive: true });
+    document.addEventListener("mousedown", handleClickOutside, { passive: false });
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
@@ -299,6 +315,7 @@ const Search: React.FC<SearchProps> = ({
       setSuggestions([]);
       setInlineSuggestion(prev => ({ ...prev, visible: false }));
       setSelectedSuggestionIndex(0); // 重置选中索引
+      console.log("[建议] 没有符合条件的查询或模块未加载");
       return;
     }
 
@@ -324,6 +341,7 @@ const Search: React.FC<SearchProps> = ({
       }
       
       const searchResult = JSON.parse(result) as SearchResult;
+
       
       // 检查组件是否仍然挂载
       if (!isMountedRef.current) return;
@@ -347,6 +365,7 @@ const Search: React.FC<SearchProps> = ({
       const firstSuggestion = searchResult.suggestions[0];
       
       if (firstSuggestion) {
+        
         setInlineSuggestion(prev => ({
           ...prev,
           text: firstSuggestion.text,
@@ -363,7 +382,7 @@ const Search: React.FC<SearchProps> = ({
       // 检查组件是否仍然挂载
       if (!isMountedRef.current) return;
       
-      console.error("获取内联建议失败:", err);
+      console.error("[建议错误]", err);
       setInlineSuggestion(prev => ({ ...prev, visible: false }));
       setSelectedSuggestionIndex(0); // 重置选中索引
     }
@@ -432,9 +451,11 @@ const Search: React.FC<SearchProps> = ({
 
   // 修改处理键盘导航的函数，增加上下箭头键切换建议
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    
     // Tab键处理内联建议补全
     if (e.key === "Tab" && inlineSuggestion.visible && inlineSuggestion.text) {
       e.preventDefault(); // 阻止默认的Tab行为
+      e.stopPropagation(); // 防止事件冒泡
       completeInlineSuggestion();
       return;
     }
@@ -532,50 +553,13 @@ const Search: React.FC<SearchProps> = ({
       }
     };
 
-    document.addEventListener('selectionchange', handleSelectionChange, { passive: true });
+    // 使用非被动模式，确保在某些上下文中可以调用preventDefault
+    document.addEventListener('selectionchange', handleSelectionChange, { passive: false });
     return () => {
       document.removeEventListener('selectionchange', handleSelectionChange);
     };
   }, [updateCaretPosition]);
 
-  // 自动补全内联建议
-  const completeInlineSuggestion = () => {
-    if (inlineSuggestion.visible && inlineSuggestion.text) {
-      // 保存建议文本
-      const suggestionText = inlineSuggestion.text;
-      const isCorrection = inlineSuggestion.type === 'correction';
-      
-      // 完全清除内联建议状态
-      setInlineSuggestion({
-        text: "",
-        visible: false,
-        caretPosition: 0,
-        selection: {start: 0, end: 0},
-        type: 'completion',
-        matchedText: "",
-        suggestionText: ""
-      });
-      
-      // 设置完整的建议作为新的查询
-      setQuery(suggestionText);
-      
-      // 将光标移到末尾并执行搜索
-      setTimeout(() => {
-        if (searchInputRef.current) {
-          searchInputRef.current.focus();
-          searchInputRef.current.setSelectionRange(
-            suggestionText.length, 
-            suggestionText.length
-          );
-        }
-        
-        // 直接使用suggestionText执行搜索，而不是依赖query状态
-        // 因为React状态更新是异步的，此时query可能还未更新
-        performSearch(suggestionText, false);
-      }, 0);
-    }
-  };
-
   // 执行搜索
   const performSearch = async (searchQuery: string, isLoadMore: boolean = false) => {
     if (!wasmModule || !isIndexLoaded || !indexData || !searchQuery.trim()) {
@@ -666,6 +650,46 @@ const Search: React.FC<SearchProps> = ({
       });
     }
   };
+
+  // 自动补全内联建议 - 不使用useCallback，避免循环依赖
+  const completeInlineSuggestion = () => {
+    if (inlineSuggestion.visible && inlineSuggestion.text) {
+      // 保存建议文本
+      const textToComplete = inlineSuggestion.text;
+      
+      // 直接更新DOM和状态
+      if (searchInputRef.current) {
+        // 立即更新输入框值
+        searchInputRef.current.value = textToComplete;
+      }
+      
+      // 清除内联建议状态
+      setInlineSuggestion({
+        text: "",
+        visible: false,
+        caretPosition: 0,
+        selection: {start: 0, end: 0},
+        type: 'completion',
+        matchedText: "",
+        suggestionText: ""
+      });
+      
+      // 更新React状态
+      setQuery(textToComplete);
+      
+      // 立即执行搜索
+      performSearch(textToComplete, false);
+      
+      // 聚焦输入框并设置光标位置
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+        searchInputRef.current.setSelectionRange(
+          textToComplete.length, 
+          textToComplete.length
+        );
+      }
+    }
+  };
   
   // 高亮显示匹配文本 - 不再处理高亮，完全依赖后端
   const processHighlightedContent = (content: string) => {
@@ -790,6 +814,59 @@ const Search: React.FC<SearchProps> = ({
         suggestionEl.style.fontWeight = inputStyle.fontWeight;
         suggestionEl.style.letterSpacing = inputStyle.letterSpacing;
         suggestionEl.style.lineHeight = inputStyle.lineHeight;
+        
+        // 计算并调整可用空间
+        if (inlineSuggestion.type === 'correction') {
+          // 获取输入框宽度
+          const inputWidth = searchInputRef.current!.offsetWidth;
+          // 估算查询文本宽度 (使用更精确的字体宽度估算方法)
+          // 创建一个临时元素用于测量实际宽度
+          const tempMeasureEl = document.createElement('span');
+          tempMeasureEl.style.visibility = 'hidden';
+          tempMeasureEl.style.position = 'absolute';
+          tempMeasureEl.style.whiteSpace = 'pre';
+          tempMeasureEl.style.fontSize = inputStyle.fontSize;
+          tempMeasureEl.style.fontFamily = inputStyle.fontFamily;
+          tempMeasureEl.style.fontWeight = inputStyle.fontWeight;
+          tempMeasureEl.style.letterSpacing = inputStyle.letterSpacing;
+          tempMeasureEl.innerText = query;
+          document.body.appendChild(tempMeasureEl);
+          const queryTextWidth = tempMeasureEl.offsetWidth;
+          document.body.removeChild(tempMeasureEl);
+          
+          // 计算右侧边距 (确保TAB按钮和清除按钮有足够空间)
+          // 根据屏幕尺寸调整右侧边距
+          let rightMargin = 90; // 默认桌面环境
+          
+          // 根据窗口宽度调整边距（响应式设计）
+          if (window.innerWidth < 640) { // 小屏幕设备
+            rightMargin = 100; // 移动设备上按钮占据更多相对空间
+          } else if (window.innerWidth < 768) { // 中等屏幕设备
+            rightMargin = 95;
+          }
+          
+          // 计算建议可用最大宽度
+          // 根据屏幕尺寸调整最大宽度百分比
+          let maxWidthPercentage = 0.8; // 默认最大宽度百分比
+          
+          if (window.innerWidth < 640) {
+            maxWidthPercentage = 0.7; // 在小屏幕上减少最大宽度百分比
+          }
+          
+          const maxAllowedWidth = Math.floor(inputWidth * maxWidthPercentage);
+          
+          // 计算最终的可用宽度
+          const availableWidth = Math.min(
+            maxAllowedWidth,
+            Math.max(inputWidth - queryTextWidth - rightMargin, 80) // 最小宽度降低到80px以适应更小的设备
+          );
+          
+          // 设置最大宽度
+          const suggestionTextContainer = suggestionEl.querySelector('div > div:nth-child(2) > span');
+          if (suggestionTextContainer) {
+            (suggestionTextContainer as HTMLElement).style.maxWidth = `${availableWidth}px`;
+          }
+        }
       };
       
       updateSuggestionStyles();
@@ -802,14 +879,46 @@ const Search: React.FC<SearchProps> = ({
         resizeObserver.disconnect();
       };
     }
-  }, [inlineSuggestion.visible, query]);
+  }, [inlineSuggestion.visible, query, inlineSuggestion.type]);
+
+  // 处理Tab键盘事件 - 简化逻辑，改进处理方式
+  useEffect(() => {
+    // 创建键盘事件处理函数
+    const handleTabKey = (e: KeyboardEvent) => {
+      const isFocused = document.activeElement === searchInputRef.current;
+      const hasVisibleSuggestion = inlineSuggestion.visible && inlineSuggestion.text;
+      
+      if (e.key === 'Tab' && isFocused && hasVisibleSuggestion) {
+        e.preventDefault();
+        e.stopPropagation();
+        completeInlineSuggestion();
+      }
+    };
+    
+    // 添加键盘事件监听器，确保使用非被动模式
+    document.addEventListener('keydown', handleTabKey, { passive: false, capture: true });
+    
+    return () => {
+      document.removeEventListener('keydown', handleTabKey, { capture: true });
+    };
+
+  }, []);
+  
 
   // 清除搜索
   const clearSearch = () => {
+    // 清除查询和结果，但保持搜索框的可见状态
     setQuery("");
+    if (searchInputRef.current) {
+      searchInputRef.current.value = "";
+    }
+    
+    // 清除搜索结果
     setSearchResults(null);
     setAllItems([]);
     setSuggestions([]);
+    
+    // 清除内联建议
     setInlineSuggestion({
       text: "",
       visible: false,
@@ -819,10 +928,13 @@ const Search: React.FC<SearchProps> = ({
       matchedText: "",
       suggestionText: ""
     });
-    setShowResults(false);
+    
+    // 保持结果区域可见，但无内容
+    setShowResults(true);
     setCurrentPage(1);
     setHasMoreResults(true);
     
+    // 确保输入框保持焦点
     if (searchInputRef.current) {
       searchInputRef.current.focus();
     }
@@ -844,8 +956,8 @@ const Search: React.FC<SearchProps> = ({
       }
     };
     
-    window.addEventListener('focus', checkFocus, { passive: true, capture: true });
-    window.addEventListener('blur', checkFocus, { passive: true, capture: true });
+    window.addEventListener('focus', checkFocus, { passive: false, capture: true });
+    window.addEventListener('blur', checkFocus, { passive: false, capture: true });
     
     return () => {
       window.removeEventListener('focus', checkFocus, { capture: true });
@@ -853,22 +965,6 @@ const Search: React.FC<SearchProps> = ({
     };
   }, [isFocused]);
   
-  // 处理Tab键盘事件
-  useEffect(() => {
-    const handleTabKey = (e: KeyboardEvent) => {
-      if (e.key === 'Tab' && document.activeElement === searchInputRef.current && inlineSuggestion.visible) {
-        e.preventDefault();
-        completeInlineSuggestion();
-      }
-    };
-    
-    document.addEventListener('keydown', handleTabKey);
-    
-    return () => {
-      document.removeEventListener('keydown', handleTabKey);
-    };
-  }, [inlineSuggestion.visible, completeInlineSuggestion]);
-
   // 获取当前placeholder文本
   const getCurrentPlaceholder = () => {
     if (isLoadingIndex) {
@@ -1090,7 +1186,7 @@ const Search: React.FC<SearchProps> = ({
             onSelect={updateCaretPosition}
             onFocus={handleInputFocus}
             placeholder={getCurrentPlaceholder()}
-            className="w-full py-1.5 md:py-1.5 lg:py-2.5 pl-8 md:pl-8 lg:pl-10 pr-8 md:pr-8 lg:pr-10 text-sm md:text-sm lg:text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg md:rounded-lg lg:rounded-xl text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-transparent focus:shadow-md transition-all duration-200 relative z-10"
+            className="w-full py-2.5 md:py-1.5 lg:py-2.5 pl-10 md:pl-8 lg:pl-10 pr-10 md:pr-8 lg:pr-10 text-base md:text-sm lg:text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg md:rounded-lg lg:rounded-xl text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-transparent focus:shadow-md transition-all duration-200 relative z-10"
             disabled={isLoadingIndex || !isIndexLoaded}
             style={{ backgroundColor: 'transparent' }} // 确保背景是透明的，这样可以看到下面的建议
           />
@@ -1106,25 +1202,37 @@ const Search: React.FC<SearchProps> = ({
               }}
             >
               {/* 修改显示方式，确保与输入文本对齐，同时支持响应式布局 */}
-              <div className="flex w-full px-8 md:px-8 lg:px-10 overflow-hidden"> {/* 使用与输入框相同的水平内边距，添加溢出隐藏 */}
+              <div className="flex w-full px-10 md:px-8 lg:px-10 overflow-hidden"> {/* 使用与输入框相同的水平内边距，添加溢出隐藏 */}
                 {/* 纠正建议和补全建议都显示在已输入内容的右侧 */}
                 <>
                   {/* 创建与输入文本宽度完全相等的不可见占位 */}
                   <div className="flex-shrink-0">
-                    <span className="invisible whitespace-pre text-sm md:text-sm lg:text-base">{query}</span>
+                    <span className="invisible whitespace-pre text-base md:text-sm lg:text-base">{query}</span>
                   </div>
                   {/* 显示建议的剩余部分 */}
-                  <div className="flex-shrink-0 max-w-[70%]">
+                  <div className={`flex-shrink-0 ${
+                    // 根据建议类型调整最大宽度
+                    inlineSuggestion.type === 'correction' 
+                      ? 'max-w-[calc(100%-1.25rem)]' // 纠正建议给予更多空间，但仍然保留一些边距
+                      : 'max-w-[80%]' // 补全建议使用固定比例
+                  }`}>
                     <span 
-                      className={`whitespace-pre text-sm md:text-sm lg:text-base truncate block ${
+                      className={`whitespace-pre text-base md:text-sm lg:text-base ${
+                        // 对纠正建议使用ellipsis确保文本不会溢出
                         inlineSuggestion.type === 'correction' 
-                          ? 'text-amber-500/80 dark:text-amber-400/80 ml-1' 
+                          ? 'text-amber-500/80 dark:text-amber-400/80 ml-1 block truncate' 
                           : 'text-gray-400/70 dark:text-gray-500/70'
                       }`}
                       style={{ 
-                        fontWeight: 'bold',
+                        fontWeight: inlineSuggestion.type === 'correction' ? '600' : 'bold',
+                        textDecoration: inlineSuggestion.type === 'correction' ? 'underline dotted 1px' : 'none',
+                        textUnderlineOffset: '2px',
                         marginLeft: inlineSuggestion.type === 'completion' ? '0px' : undefined,
+                        // 确保溢出时有优雅的省略效果
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
                       }}
+                      title={inlineSuggestion.type === 'correction' ? inlineSuggestion.text : undefined} // 在纠正模式下添加完整文本提示
                     >
                       {inlineSuggestion.suggestionText}
                     </span>
@@ -1135,43 +1243,89 @@ const Search: React.FC<SearchProps> = ({
           )}
           
           {/* 搜索图标 */}
-          <div className="absolute left-2.5 md:left-2.5 left-3.5 top-1/2 transform -translate-y-1/2 z-20">
-            <svg className="h-3.5 w-3.5 md:h-3.5 md:w-3.5 h-4.5 w-4.5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <div className="absolute left-3.5 md:left-2.5 lg:left-3.5 top-1/2 transform -translate-y-1/2 z-20">
+            <svg className="h-5 w-5 md:h-3.5 md:w-3.5 lg:h-4.5 lg:w-4.5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
           </div>
           
           {/* 加载指示器或清除按钮 */}
-          <div className="absolute right-2.5 md:right-2.5 right-3.5 top-1/2 transform -translate-y-1/2 z-20 flex items-center">
+          <div className="absolute right-3.5 md:right-2.5 lg:right-3.5 top-1/2 transform -translate-y-1/2 z-20 flex items-center">
             {isLoading ? (
-              <div className="animate-spin rounded-full h-3.5 w-3.5 md:h-3.5 md:w-3.5 h-4.5 w-4.5 border-2 border-primary-600 border-t-transparent"></div>
+              <div className="animate-spin rounded-full h-5 w-5 md:h-3.5 md:w-3.5 lg:h-4.5 lg:w-4.5 border-2 border-primary-600 border-t-transparent"></div>
             ) : query ? (
               <>
                 <button
                   type="button"
-                  onClick={clearSearch}
-                  className="text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 focus:outline-none active:text-primary-600 dark:active:text-primary-300 flex items-center justify-center p-1 -m-1"
+                  className="text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 focus:outline-none active:text-primary-600 dark:active:text-primary-300 flex items-center justify-center p-2 -m-1 clear-search-button"
                   title="清除搜索"
+                  style={{ touchAction: 'none' }}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.nativeEvent.stopImmediatePropagation(); // 阻止事件冒泡到document
+                    // 只清除文本，始终不关闭搜索框
+                    clearSearch();
+                  }}
+                  onTouchStart={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onTouchEnd={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.nativeEvent.stopImmediatePropagation(); // 阻止事件冒泡到document
+                    clearSearch();
+                  }}
                 >
-                  <svg className="h-3.5 w-3.5 md:h-3.5 md:w-3.5 h-4.5 w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <svg className="h-5 w-5 md:h-3.5 md:w-3.5 lg:h-4.5 lg:w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
                 {inlineSuggestion.visible && inlineSuggestion.text && (
                   <div 
-                    className="text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 active:text-primary-600 dark:active:text-primary-300 flex items-center justify-center cursor-pointer p-1  ml-1" 
-                    title="按Tab键补全"
-                    onClick={completeInlineSuggestion}
+                    className={`text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 active:text-primary-600 dark:active:text-primary-300 flex items-center justify-center cursor-pointer p-1 ml-1 tab-completion-button ${
+                      inlineSuggestion.type === 'correction' ? 'animate-pulse' : ''
+                    }`}
+                    title={inlineSuggestion.type === 'correction' ? "按Tab键接受纠正" : "按Tab键补全"}
+                    onClick={(e) => {
+                      // 阻止冒泡和默认行为 
+                      e.preventDefault();
+                      e.stopPropagation();
+                      
+                      // 直接执行补全操作，不再使用延迟和多次更新
+                      completeInlineSuggestion();
+                    }}
+                    onMouseDown={(e) => {
+                      // 阻止失去焦点
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onTouchStart={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onTouchEnd={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      completeInlineSuggestion();
+                    }}
                     role="button"
                     tabIndex={0}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
+                        e.stopPropagation();
                         completeInlineSuggestion();
                       }
                     }}
+                    style={{ touchAction: 'none' }}
                   >
-                    <div className="border border-current rounded px-1 py-px text-[8px] md:text-[8px] leading-none font-semibold flex items-center justify-center">
+                    <div className={`border ${
+                      inlineSuggestion.type === 'correction' 
+                        ? 'border-amber-500/80 text-amber-500/90 dark:border-amber-400/80 dark:text-amber-400/90' 
+                        : 'border-current'
+                    } rounded px-1 py-px text-[10px] md:text-[8px] lg:text-[8px] leading-none font-semibold flex items-center justify-center`}>
                       TAB
                     </div>
                   </div>
@@ -1179,11 +1333,11 @@ const Search: React.FC<SearchProps> = ({
               </>
             ) : error ? (
               <div className="flex items-center">
-                <div className="rounded-full h-2 w-2 md:h-2 md:w-2 h-3 w-3 bg-red-500 shadow-sm shadow-red-500/50"></div>
+                <div className="rounded-full h-3 w-3 md:h-2 md:w-2 lg:h-3 lg:w-3 bg-red-500 shadow-sm shadow-red-500/50"></div>
               </div>
             ) : isLoadingIndex ? (
               <div className="flex items-center">
-                <div className="animate-pulse rounded-full h-2 w-2 md:h-2 md:w-2 h-3 w-3 bg-yellow-500 shadow-sm shadow-yellow-500/50"></div>
+                <div className="animate-pulse rounded-full h-3 w-3 md:h-2 md:w-2 lg:h-3 lg:w-3 bg-yellow-500 shadow-sm shadow-yellow-500/50"></div>
               </div>
             ) : null}
           </div>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index c8b49b1..9bdbed7 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -116,21 +116,20 @@ const {
 </style>
 
 <script is:inline>
-  // 主题切换逻辑
-  (function () {
-    // 页面导航计数器（跟踪页面跳转次数）
-    let pageNavigationCount = 0;
-
-    // 存储事件监听器，便于统一清理
-    const listeners = [];
-
-    // 定时器
-    let transitionTimeout = null;
+  // 主题切换逻辑 - 自销毁模式
+  (function() {
     
-    // 波纹动画定时器
+    // 集中管理所有事件监听器
+    const allListeners = [];
+    
+    // 单独保存清理事件的监听器引用
+    const cleanupListeners = [];
+    
+    // 定时器引用
+    let transitionTimeout = null;
     let rippleTimeout = null;
     
-    // 主题过渡模式 - 从localStorage读取，如果没有则使用默认值
+    // 主题过渡模式
     const TRANSITION_MODES = {
       EXPAND: 'expand',     // 扩散模式
       SHRINK: 'shrink',     // 收缩模式
@@ -138,7 +137,12 @@ const {
       REVERSE_AUTO: 'reverse-auto'  // 反向自动模式
     };
     
-    // 从本地存储获取主题过渡模式，如果没有则使用默认值
+    // 动画持续时间配置（毫秒）
+    const ANIMATION_DURATION = 700; // 动画持续时间
+    const ANIMATION_BUFFER = 100;   // 动画缓冲时间
+    const TOTAL_TRANSITION_TIME = ANIMATION_DURATION + ANIMATION_BUFFER; // 总过渡时间
+    
+    // 从本地存储获取主题过渡模式
     function getThemeTransitionMode() {
       const savedMode = localStorage.getItem('theme-transition-mode');
       return Object.values(TRANSITION_MODES).includes(savedMode) 
@@ -146,141 +150,38 @@ const {
         : TRANSITION_MODES.AUTO;
     }
 
-    // 直接从按钮移除事件监听器
-    function cleanupButtonListeners() {
-      // 查找所有主题切换按钮
-      const buttons = document.querySelectorAll("#theme-toggle-button");
-
-      buttons.forEach((button) => {
-        // 移除所有可能的事件
-        if (button._clickHandler) {
-          button.removeEventListener("click", button._clickHandler, {
-            capture: true,
-          });
-          delete button._clickHandler;
-        }
-
-        if (button._keydownHandler) {
-          button.removeEventListener("keydown", button._keydownHandler);
-          delete button._keydownHandler;
-        }
-
-        // 清除其他可能的事件
-        const otherClickHandlers = button.__themeToggleClickHandlers || [];
-        otherClickHandlers.forEach((handler) => {
-          try {
-            button.removeEventListener("click", handler, { capture: true });
-          } catch (e) {
-            // 忽略错误
-          }
-        });
-
-        const otherKeydownHandlers = button.__themeToggleKeydownHandlers || [];
-        otherKeydownHandlers.forEach((handler) => {
-          try {
-            button.removeEventListener("keydown", handler);
-          } catch (e) {
-            // 忽略错误
-          }
-        });
-
-        // 重置处理函数数组
-        button.__themeToggleClickHandlers = [];
-        button.__themeToggleKeydownHandlers = [];
-      });
-
-      // 清理容器
-      const container = document.getElementById("theme-toggle-container");
-      if (container) {
-        if (container._clickHandler) {
-          container.removeEventListener("click", container._clickHandler);
-          delete container._clickHandler;
-        }
-
-        // 清除其他可能的事件
-        const otherClickHandlers = container.__themeToggleClickHandlers || [];
-        otherClickHandlers.forEach((handler) => {
-          try {
-            container.removeEventListener("click", handler);
-          } catch (e) {
-            // 忽略错误
-          }
-        });
-
-        // 重置处理函数数组
-        container.__themeToggleClickHandlers = [];
-      }
-    }
-
     // 添加事件监听器并记录，方便后续统一清理
     function addListener(element, eventType, handler, options) {
-      if (!element) return null;
-
-      // 确保先移除可能已存在的同类型事件处理函数
-      if (eventType === "click" && element.id === "theme-toggle-button") {
-        if (element._clickHandler) {
-          element.removeEventListener("click", element._clickHandler, {
-            capture: true,
-          });
-        }
-        element._clickHandler = handler;
-
-        // 保存到数组中以便清理
-        if (!element.__themeToggleClickHandlers) {
-          element.__themeToggleClickHandlers = [];
-        }
-        element.__themeToggleClickHandlers.push(handler);
-      }
-
-      if (eventType === "keydown" && element.id === "theme-toggle-button") {
-        if (element._keydownHandler) {
-          element.removeEventListener("keydown", element._keydownHandler);
-        }
-        element._keydownHandler = handler;
-
-        // 保存到数组中以便清理
-        if (!element.__themeToggleKeydownHandlers) {
-          element.__themeToggleKeydownHandlers = [];
-        }
-        element.__themeToggleKeydownHandlers.push(handler);
-      }
-
-      if (eventType === "click" && element.id === "theme-toggle-container") {
-        if (element._clickHandler) {
-          element.removeEventListener("click", element._clickHandler);
-        }
-        element._clickHandler = handler;
-
-        // 保存到数组中以便清理
-        if (!element.__themeToggleClickHandlers) {
-          element.__themeToggleClickHandlers = [];
-        }
-        element.__themeToggleClickHandlers.push(handler);
+      if (!element) {
+        console.warn(`主题切换尝试为不存在的元素添加事件:`, eventType);
+        return null;
       }
 
       element.addEventListener(eventType, handler, options);
-      listeners.push({ element, eventType, handler, options });
+      allListeners.push({ element, eventType, handler, options });
       return handler;
     }
 
-    // 清理函数 - 移除所有事件监听器
-    function cleanup() {
-      // 先直接从按钮清理事件
-      cleanupButtonListeners();
-
-      // 移除所有监听器
-      listeners.forEach(({ element, eventType, handler, options }) => {
+    // 统一的清理函数，执行完整清理并自销毁
+    function selfDestruct() {
+      // 0. 取消正在进行的transition
+      if (window._themeTransition && typeof window._themeTransition.skipTransition === 'function') {
         try {
-          element.removeEventListener(eventType, handler, options);
+          window._themeTransition.skipTransition();
+          console.debug(`主题切换清理阶段取消transition成功`);
         } catch (err) {
-          // 忽略错误
+          // 降级为debug日志
+          if (err.name === 'AbortError') {
+            console.debug(`主题切换清理阶段: 过渡已被跳过，这是正常现象`);
+          } else {
+            console.debug(`主题切换清理阶段取消transition出错:`, err);
+          }
+        } finally {
+          window._themeTransition = null;
         }
-      });
-
-      // 清空数组
-      listeners.length = 0;
-
-      // 清理任何定时器
+      }
+      
+      // 1. 清理所有计时器
       if (transitionTimeout) {
         clearTimeout(transitionTimeout);
         transitionTimeout = null;
@@ -290,6 +191,68 @@ const {
         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. 移除普通事件监听器
+      allListeners.forEach(({ element, eventType, handler, options }) => {
+        try {
+          element.removeEventListener(eventType, handler, options);
+        } catch (err) {
+          console.error(`主题切换移除事件监听器出错:`, err);
+        }
+      });
+      
+      // 清空监听器数组
+      allListeners.length = 0;
+      
+      // 6. 最后移除清理事件监听器自身
+      cleanupListeners.forEach(({ element, eventType, handler, options }) => {
+        try {
+          element.removeEventListener(eventType, handler, options);
+        } catch (err) {
+          console.error(`主题切换移除清理监听器出错:`, err);
+        }
+      });
+      
+      // 清空清理监听器数组
+      cleanupListeners.length = 0;
+    }
+    
+    // 注册清理事件，并保存引用
+    function registerCleanupEvents() {
+      // 创建一次性事件处理函数
+      const beforeSwapHandler = () => {
+        selfDestruct();
+      };
+      
+      const beforeUnloadHandler = () => {
+        selfDestruct();
+      };
+      
+      // 添加清理事件监听器并保存引用
+      document.addEventListener("astro:before-swap", beforeSwapHandler, { once: true });
+      window.addEventListener("beforeunload", beforeUnloadHandler, { once: true });
+      
+      // 保存清理事件引用，用于完全销毁
+      cleanupListeners.push(
+        { element: document, eventType: "astro:before-swap", handler: beforeSwapHandler, options: { once: true } },
+        { element: window, eventType: "beforeunload", handler: beforeUnloadHandler, options: { once: true } }
+      );
     }
     
     // 创建波纹动画元素
@@ -316,7 +279,9 @@ const {
       
       // 自动清理波纹元素
       rippleTimeout = setTimeout(() => {
-        ripple.remove();
+        if (ripple.parentNode) {
+          ripple.parentNode.removeChild(ripple);
+        }
       }, 1000);
       
       return ripple;
@@ -352,6 +317,21 @@ const {
     
     // 使用View Transitions API创建全屏过渡效果
     function createViewTransition(callback, x, y, fromTheme, toTheme, transitionMode) {
+      // 如果已有正在进行的过渡，先取消它
+      if (window._themeTransition) {
+        try {
+          if (typeof window._themeTransition.skipTransition === 'function') {
+            window._themeTransition.skipTransition();
+          }
+        } catch (e) {
+          // 降级为debug日志，不需要显示警告
+          console.debug(`主题切换取消先前过渡失败:`, e);
+        } finally {
+          // 无论成功与否，都清除引用
+          window._themeTransition = null;
+        }
+      }
+      
       // 检查浏览器是否支持View Transitions API
       if (!document.startViewTransition) {
         // 尝试使用简单的回退动画
@@ -386,13 +366,15 @@ const {
             
             // 然后执行动画
             setTimeout(() => {
-              mask.style.transition = 'clip-path 0.7s ease-out';
+              mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-out`;
               mask.style.clipPath = `circle(150vmax at ${x}px ${y}px)`;
               
               // 动画结束后删除遮罩
               setTimeout(() => {
-                mask.remove();
-              }, 700);
+                if (mask.parentNode) {
+                  mask.parentNode.removeChild(mask);
+                }
+              }, ANIMATION_DURATION);
             }, 20);
           } else {
             // 收缩效果 - 从全屏向点击位置收缩
@@ -400,7 +382,7 @@ const {
             document.body.appendChild(mask);
             
             // 添加过渡样式
-            mask.style.transition = 'clip-path 0.7s ease-in';
+            mask.style.transition = `clip-path ${ANIMATION_DURATION/1000}s ease-in`;
             
             // 强制回流
             void mask.offsetWidth;
@@ -411,11 +393,13 @@ const {
             // 等待动画结束后切换主题并移除遮罩
             setTimeout(() => {
               callback();
-              mask.remove();
-            }, 700);
+              if (mask.parentNode) {
+                mask.parentNode.removeChild(mask);
+              }
+            }, ANIMATION_DURATION);
           }
           
-          return new Promise(resolve => setTimeout(resolve, 800));
+          return new Promise(resolve => setTimeout(resolve, TOTAL_TRANSITION_TIME));
         } catch (e) {
           // 如果回退方案也失败，直接执行回调
           callback();
@@ -424,6 +408,15 @@ const {
       }
       
       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;
@@ -448,14 +441,32 @@ const {
         // 确定动画类型
         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(() => {
-          // 执行主题切换回调
-          callback();
-          
-          // 确保DOM已更新
-          document.documentElement.dataset.theme = toTheme;
-        });
+        const transition = document.startViewTransition(safeCallback);
+        
+        // 存储transition引用以便清理
+        window._themeTransition = transition;
         
         // 生成动画需要的SVG资源
         const gradientOffset = 0.75;
@@ -465,88 +476,47 @@ const {
         // 计算动画需要多大才能覆盖整个屏幕
         const maxRadius = Math.ceil(maxDistance / gradientOffset);
         
-        // 过渡开始后，应用自定义动画
-        transition.ready.then(() => {
-          // 应用基础样式到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;
+        // 准备应用自定义动画的操作
+        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') {
+                console.debug(`主题切换过渡准备超时，使用备用策略`);
+                // 收缩模式时此处超时更常见，立即使用备用方案
+                if (animationType === TRANSITION_MODES.SHRINK) {
+                  applyFallbackAnimation();
+                  return; // 跳过后续代码，使用备用方案
+                }
+              } else if (err.name === 'AbortError') {
+                // 如果是AbortError，我们也立即使用备用方案
+                applyFallbackAnimation();
+                return; // 跳过后续代码，使用备用方案
+              } else {
+                console.debug(`主题切换过渡准备错误:`, err);
               }
-            `;
-            document.head.appendChild(style);
+            }
             
-            // 强制重新计算样式
-            window.getComputedStyle(document.documentElement).getPropertyValue('--force-reflow');
+            // 应用基础样式到document
+            const style = document.createElement('style');
+            style.id = 'theme-transition-temp-style';
             
-            // 立即设置最终状态
-            setTimeout(() => {
+            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 - 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 0.7s ease-out, -webkit-mask-size 0.7s ease-out,
-                             mask-position 0.7s ease-out, mask-size 0.7s ease-out !important;
-                }
-              `;
-            }, 20);
-            
-            // 清理临时样式
-            setTimeout(() => {
-              if (document.getElementById('theme-transition-temp-style')) {
-                document.getElementById('theme-transition-temp-style').remove();
-              }
-            }, 1000);
-            
-          } 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');
-            
-            // 立即设置最终状态
-            setTimeout(() => {
-              style.textContent = `
-                ::view-transition-old(root) {
                   animation: none !important;
                   -webkit-mask-image: url('${maskUrl}') !important;
                   mask-image: url('${maskUrl}') !important;
@@ -556,38 +526,264 @@ const {
                   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;
-                  transition: -webkit-mask-position 0.7s ease-in, -webkit-mask-size 0.7s ease-in,
-                             mask-position 0.7s ease-in, mask-size 0.7s ease-in !important;
                 }
                 ::view-transition-new(root) {
                   z-index: 998 !important;
                 }
               `;
-            }, 20);
+              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();
               }
-            }, 1000);
+            }, TOTAL_TRANSITION_TIME);
+          } catch (error) {
+            // AbortError是正常的，我们完全可以忽略它，但仍保留调试日志
+            if (error.name === 'AbortError') {
+              // 降级为debug级别日志，不要吓到用户
+              console.debug(`主题切换过渡被跳过，这是正常现象`);
+              // 使用备用动画方案
+              applyFallbackAnimation();
+            } else if (error.message === 'Ready timeout') {
+              // 超时是我们主动抛出的，只需要降级处理
+              console.debug(`主题切换过渡准备超时，继续执行动画`);
+              
+              // 即使ready超时，我们仍然可以应用样式
+              // 这里可以直接调用备用方案应用动画
+              applyFallbackAnimation();
+            } else {
+              // 只有真正意外的错误才输出error级别日志
+              console.error(`主题切换应用自定义动画出错:`, error);
+              // 尝试使用备用方案
+              applyFallbackAnimation();
+            }
           }
-        }).catch(error => {
-          console.error('过渡动画错误', error);
+        };
+        
+        // 添加备用动画方案
+        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.debug(`主题切换应用备用动画方案出错:`, err);
+          }
+        };
+        
+        // 非阻塞执行自定义动画应用
+        applyCustomAnimation().catch(error => {
+          console.error(`主题切换应用动画过程出错:`, error);
         });
         
         // 返回过渡完成的Promise
-        return transition.finished.then(() => {
-          // 移除主题过渡标记类
-          document.documentElement.classList.remove('theme-transition-active');
-        }).catch(error => {
-          console.error('过渡动画错误', error);
-          // 确保标记类被移除
-          document.documentElement.classList.remove('theme-transition-active');
-        });
+        return transition.finished
+          .then(() => {
+            // 移除主题过渡标记类
+            document.documentElement.classList.remove('theme-transition-active');
+            window._themeTransition = null;
+          })
+          .catch(error => {
+            if (error.name === 'AbortError') {
+              console.debug(`主题切换过渡被中断: 这是正常现象，可能是新的过渡开始或页面导航变化`);
+            } else {
+              console.error(`主题切换过渡动画错误:`, error);
+            }
+            // 确保标记类被移除
+            document.documentElement.classList.remove('theme-transition-active');
+            
+            // 清除引用
+            window._themeTransition = null;
+          });
       } catch (error) {
-        console.error('主题切换错误', error);
+        console.error(`主题切换错误:`, error);
         // 在出错时也要执行回调
         callback();
         // 确保标记类被移除
@@ -596,17 +792,13 @@ const {
       }
     }
 
-    // 初始化主题切换功能
+    // 设置主题切换功能
     function setupThemeToggle() {
-      // 确保当前没有活动的主题切换按钮事件
-      cleanup();
-
       // 获取所有主题切换按钮
-      const themeToggleButtons = document.querySelectorAll(
-        "#theme-toggle-button",
-      );
+      const themeToggleButtons = document.querySelectorAll("#theme-toggle-button");
 
       if (!themeToggleButtons.length) {
+        console.warn(`主题切换未找到主题切换按钮`);
         return;
       }
 
@@ -642,70 +834,145 @@ const {
 
         transitioning = true;
         
-        // 记录点击坐标
-        const clickX = e instanceof Event ? e.clientX : window.innerWidth / 2;
-        const clickY = e instanceof Event ? e.clientY : window.innerHeight / 2;
+        // 更可靠的点击坐标获取
+        let clickX, clickY;
         
-        // 在按钮上创建小波纹效果
-        if (e instanceof Event && e.target) {
-          const button = e.target.closest("#theme-toggle-button");
-          if (button) {
-            createRippleEffect(clickX, clickY, button);
+        try {
+          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 {
+            // 如果无法获取有效坐标，使用屏幕中心点
+            clickX = window.innerWidth / 2;
+            clickY = window.innerHeight / 2;
+            
+            // 尝试从目标元素获取位置
+            if (e && e.target) {
+              const button = e.target.closest ? e.target.closest("#theme-toggle-button") : null;
+              if (button) {
+                const rect = button.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;
+          
+          // 在按钮上创建小波纹效果
+          if (e && e.target) {
+            const button = e.target.closest ? e.target.closest("#theme-toggle-button") : null;
+            if (button) {
+              createRippleEffect(clickX, clickY, button);
+            }
           }
-        }
 
-        // 获取当前主题
-        const currentTheme = document.documentElement.dataset.theme;
-        const newTheme = currentTheme === "light" ? "dark" : "light";
-        
-        // 获取过渡模式
-        const button = e.target?.closest("#theme-toggle-button");
-        // 首先尝试从按钮属性获取过渡模式，如果没有则从本地存储获取
-        const transitionMode = button?.dataset?.transitionMode || getThemeTransitionMode();
-        
-        // 使用视图过渡API切换主题
-        createViewTransition(
-          () => {
-            // 更新 HTML 属性
+          // 获取当前主题
+          const currentTheme = document.documentElement.dataset.theme;
+          const newTheme = currentTheme === "light" ? "dark" : "light";
+          
+          // 获取过渡模式
+          let transitionMode = TRANSITION_MODES.AUTO; // 默认自动模式
+          
+          if (e && e.target) {
+            const button = e.target.closest ? e.target.closest("#theme-toggle-button") : null;
+            if (button && button.dataset && button.dataset.transitionMode) {
+              transitionMode = button.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(() => {
+              transitioning = false;
+            }, ANIMATION_BUFFER); // 添加缓冲时间，确保动画完全结束
+          }).catch(error => {
+            // 出现错误时强制执行主题切换以确保功能可用
+            if (error.name !== 'AbortError') {
+              console.error(`主题切换过渡动画错误:`, error);
+              // 如果不是因为过渡被跳过而是真正的错误，直接执行主题切换
+              safeThemeChangeCallback();
+            } else {
+              console.debug(`主题切换过渡被跳过，这是正常现象`);
+            }
+            
+            setTimeout(() => {
+              transitioning = false;
+            }, ANIMATION_BUFFER);
+          });
+
+          // 设置防抖保底 - 防止transition.finished不触发导致状态卡死
+          transitionTimeout = setTimeout(() => {
+            transitioning = 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 = getSystemTheme();
-            
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
             if (newTheme === systemTheme) {
               localStorage.removeItem("theme");
             } else {
               localStorage.setItem("theme", newTheme);
             }
-          }, 
-          clickX, 
-          clickY, 
-          currentTheme, 
-          newTheme,
-          transitionMode
-        ).then(() => {
-          // 过渡完成后恢复状态
-          setTimeout(() => {
-            transitioning = false;
-          }, 50);
-        }).catch(error => {
-          console.error('过渡动画错误', error);
+          } catch (fallbackErr) {
+            console.error(`主题切换降级处理失败:`, fallbackErr);
+          }
+          
+          // 确保状态被重置
           transitioning = false;
-        });
-
-        // 添加防抖
-        if (transitionTimeout) {
-          clearTimeout(transitionTimeout);
         }
-
-        transitionTimeout = setTimeout(() => {
-          transitioning = false;
-        }, 800); // 延长时间以匹配动画持续时间
       };
 
       // 监听系统主题变化
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
       const handleMediaChange = (e) => {
         if (!localStorage.getItem("theme")) {
           const newTheme = e.matches ? "dark" : "light";
@@ -717,23 +984,7 @@ const {
       addListener(mediaQuery, "change", handleMediaChange);
 
       // 为每个按钮添加事件
-      themeToggleButtons.forEach((button, index) => {
-        // 确保移除旧的事件监听
-        if (button._clickHandler) {
-          button.removeEventListener("click", button._clickHandler, {
-            capture: true,
-          });
-        }
-        if (button._keydownHandler) {
-          button.removeEventListener("keydown", button._keydownHandler);
-        }
-
-        try {
-          button.style.pointerEvents = "auto";
-        } catch (e) {
-          // 忽略样式错误
-        }
-
+      themeToggleButtons.forEach(button => {
         // 创建点击处理函数
         const clickHandler = (e) => {
           e.preventDefault();
@@ -741,7 +992,7 @@ const {
           toggleTheme(e);
         };
 
-        // 点击事件 - 使用捕获模式并保存引用
+        // 点击事件 - 使用捕获模式
         addListener(button, "click", clickHandler, { capture: true });
 
         // 键盘事件
@@ -767,140 +1018,66 @@ const {
         };
         addListener(button, "keydown", keydownHandler);
       });
-
-      // 处理移动端主题切换容器
-      const themeToggleContainer = document.getElementById(
-        "theme-toggle-container",
-      );
+      
+      // 处理移动端主题切换容器 - 重新添加此功能以提供更一致的用户体验
+      const themeToggleContainer = document.getElementById("theme-toggle-container");
       if (themeToggleContainer) {
-        // 确保移除旧的事件监听
-        if (themeToggleContainer._clickHandler) {
-          themeToggleContainer.removeEventListener(
-            "click",
-            themeToggleContainer._clickHandler,
-          );
-        }
-
         const containerClickHandler = (e) => {
-          const target = e.target;
-          if (
-            target.id !== "theme-toggle-button" &&
-            !target.closest("#theme-toggle-button")
-          ) {
-            e.stopPropagation();
-            toggleTheme(e);
+          // 只有当点击不是直接在按钮上时，才托管事件处理
+          if (!e.target.closest("#theme-toggle-button")) {
+            // 找到容器内的主题切换按钮
+            const button = themeToggleContainer.querySelector("#theme-toggle-button");
+            if (button) {
+              // 从点击事件中提取坐标
+              const clickX = e.clientX || 0;
+              const clickY = e.clientY || 0;
+              
+              // 使用更可靠的坐标计算方法
+              const rect = button.getBoundingClientRect();
+              const centerX = clickX || (rect.left + rect.width / 2);
+              const centerY = clickY || (rect.top + rect.height / 2);
+              
+              // 创建一个更可靠的合成事件对象
+              const simulatedEvent = {
+                clientX: centerX,
+                clientY: centerY,
+                target: button,
+                preventDefault: () => {},
+                stopPropagation: () => {}
+              };
+              
+              // 阻止事件冒泡
+              e.preventDefault();
+              e.stopPropagation();
+              
+              // 调用主题切换函数
+              toggleTheme(simulatedEvent);
+            }
           }
         };
-
-        addListener(themeToggleContainer, "click", containerClickHandler);
+        
+        // 使用capture模式确保事件在捕获阶段就被处理
+        addListener(themeToggleContainer, "click", containerClickHandler, { capture: true });
       }
 
       // 初始化主题
       initializeTheme();
     }
 
-    // 注册清理函数 - 确保在每次页面转换前清理事件
-    function registerCleanup() {
-      const cleanupEvents = [
-        "astro:before-preparation",
-        "astro:before-swap",
-        "swup:willReplaceContent",
-      ];
-
-      // 为每个事件注册一次性清理函数
-      cleanupEvents.forEach((eventName) => {
-        const handler = () => {
-          cleanup();
-        };
-
-        document.addEventListener(eventName, handler, { once: true });
-      });
-
-      // 页面卸载时清理
-      window.addEventListener(
-        "beforeunload",
-        () => {
-          cleanup();
-        },
-        { once: true },
-      );
-    }
-
     // 初始化函数
     function init() {
-      pageNavigationCount++;
+      // 注册清理事件
+      registerCleanupEvents();
+      
+      // 设置主题切换功能
       setupThemeToggle();
-      registerCleanup();
     }
 
-    // 监听页面转换事件
-    function setupPageTransitionEvents() {
-      // 确保事件处理程序唯一性的函数
-      function setupUniqueEvent(eventName, callback) {
-        const eventKey = `__theme_toggle_event_${eventName.replace(/:/g, "_")}`;
-
-        // 移除可能存在的旧处理函数
-        if (window[eventKey]) {
-          document.removeEventListener(eventName, window[eventKey]);
-        }
-
-        // 保存新处理函数并注册
-        window[eventKey] = callback;
-        document.addEventListener(eventName, window[eventKey]);
-      }
-
-      // 页面转换后事件
-      const pageTransitionEvents = [
-        { name: "astro:after-swap", delay: 10 },
-        { name: "astro:page-load", delay: 10 },
-        { name: "swup:contentReplaced", delay: 10 },
-      ];
-
-      // 设置每个页面转换事件
-      pageTransitionEvents.forEach(({ name, delay }) => {
-        setupUniqueEvent(name, () => {
-          cleanupButtonListeners(); // 立即清理按钮上的事件
-
-          // 延迟初始化，确保DOM完全更新
-          setTimeout(() => {
-            cleanupButtonListeners(); // 再次清理，确保没有遗漏
-            init();
-          }, delay);
-        });
-      });
-
-      // 特别处理 swup:pageView 事件
-      setupUniqueEvent("swup:pageView", () => {
-        // 对于偶数次页面跳转，特别确保事件被正确重新绑定
-        if (pageNavigationCount % 2 === 0) {
-          setTimeout(() => {
-            const buttons = document.querySelectorAll("#theme-toggle-button");
-            if (buttons.length > 0) {
-              cleanupButtonListeners();
-              setupThemeToggle();
-            }
-          }, 50);
-        }
-      });
-    }
-
-    // 设置页面转换事件监听
-    setupPageTransitionEvents();
-
-    // 在页面加载后初始化
+    // 判断DOM是否已加载
     if (document.readyState === "loading") {
-      document.addEventListener(
-        "DOMContentLoaded",
-        () => {
-          init();
-        },
-        { once: true },
-      );
+      document.addEventListener("DOMContentLoaded", init, { once: true });
     } else {
-      setTimeout(() => {
-        init();
-      }, 0);
+      init();
     }
-    
   })();
 </script>
\ No newline at end of file
diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro
index 99339ad..ff834b8 100644
--- a/src/pages/articles/[...id].astro
+++ b/src/pages/articles/[...id].astro
@@ -473,356 +473,471 @@ const tableOfContents = generateTableOfContents(headings);
 
 <!-- 文章页面脚本 -->
 <script is:inline>
-  // 文章页面交互脚本
-  (function () {
-    // 存储事件监听器，便于统一清理
-    const listeners = [];
-
+  // 文章页面交互脚本 - 自销毁模式
+  (function() {
+    // 如果不是文章页面，立即退出，不执行任何代码
+    if (!document.querySelector("article")) {
+      return;
+    }
+    
+    const scriptInstanceId = Date.now();
+    console.log(`[文章脚本:${scriptInstanceId}] 检测到文章页面，开始初始化`);
+    
+    // 集中管理所有事件监听器
+    const allListeners = [];
+    
+    // 为特殊清理任务准备的数组
+    const customCleanupTasks = [];
+    
+    // 单独保存清理事件的监听器引用
+    const cleanupListeners = [];
+    
     // 添加事件监听器并记录，方便后续统一清理
     function addListener(element, eventType, handler, options) {
-      if (!element) return null;
+      if (!element) {
+        console.warn(`[文章脚本:${scriptInstanceId}] 尝试为不存在的元素添加事件:`, eventType);
+        return null;
+      }
 
+      console.log(`[文章脚本:${scriptInstanceId}] 添加事件监听器: ${eventType} 到`, element.tagName || "Window/Document");
       element.addEventListener(eventType, handler, options);
-      listeners.push({ element, eventType, handler, options });
+      allListeners.push({ element, eventType, handler, options });
       return handler;
     }
 
-    // 清理函数，移除所有事件监听器
-    function cleanup() {
-      listeners.forEach(({ element, eventType, handler, options }) => {
+    // 统一的清理函数，执行完整清理并自销毁
+    function selfDestruct() {
+      console.log(`[文章脚本:${scriptInstanceId}] 执行自销毁流程`);
+      
+      // 1. 先移除普通事件监听器
+      console.log(`[文章脚本:${scriptInstanceId}] 移除常规监听器，数量:`, allListeners.length);
+      allListeners.forEach(({ element, eventType, handler, options }) => {
         try {
+          console.log(`[文章脚本:${scriptInstanceId}] 移除事件监听器: ${eventType} 从`, element.tagName || "Window/Document");
           element.removeEventListener(eventType, handler, options);
         } catch (err) {
-          // 忽略错误
+          console.error(`[文章脚本:${scriptInstanceId}] 移除事件监听器出错:`, err);
         }
       });
-
-      listeners.length = 0;
+      
+      // 清空监听器数组
+      allListeners.length = 0;
+      
+      // 2. 执行特殊清理任务
+      console.log(`[文章脚本:${scriptInstanceId}] 执行特殊清理任务，数量:`, customCleanupTasks.length);
+      customCleanupTasks.forEach(task => {
+        try {
+          task();
+        } catch (err) {
+          console.error(`[文章脚本:${scriptInstanceId}] 执行特殊清理任务出错:`, err);
+        }
+      });
+      
+      // 清空特殊任务数组
+      customCleanupTasks.length = 0;
+      
+      // 3. 最后移除清理事件监听器自身
+      console.log(`[文章脚本:${scriptInstanceId}] 移除清理监听器，数量:`, cleanupListeners.length);
+      cleanupListeners.forEach(({ element, eventType, handler, options }) => {
+        try {
+          console.log(`[文章脚本:${scriptInstanceId}] 移除清理监听器: ${eventType} 从`, element.tagName || "Window/Document");
+          element.removeEventListener(eventType, handler, options);
+        } catch (err) {
+          console.error(`[文章脚本:${scriptInstanceId}] 移除清理监听器出错:`, err);
+        }
+      });
+      
+      console.log(`[文章脚本:${scriptInstanceId}] 完全销毁完成`);
     }
     
-    // 代码块复制功能
-    function setupCodeCopy() {
-      const copyButtons = document.querySelectorAll('.code-block-copy');
-      if (copyButtons.length === 0) return;
-
-      copyButtons.forEach(button => {
-        addListener(button, 'click', async () => {
-          try {
-            // 使用Base64解码获取代码文本
-            const encodedCode = button.getAttribute('data-code');
-            if (!encodedCode) return;
-            
-            // 解码并复制到剪贴板
-            const code = atob(encodedCode);
-            await navigator.clipboard.writeText(code);
-            
-            const originalHTML = button.innerHTML;
-            button.classList.add('copied');
-            button.innerHTML = `
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-              已复制
-            `;
-            
-            setTimeout(() => {
-              button.classList.remove('copied');
-              button.innerHTML = originalHTML;
-            }, 2000);
-          } catch (err) {
-            console.error('复制失败:', err);
-            button.innerHTML = `
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="8" x2="12" y2="12"></line>
-                <line x1="12" y1="16" x2="12.01" y2="16"></line>
-              </svg>
-              失败
-            `;
-            setTimeout(() => {
+    // 注册清理事件，并保存引用
+    function registerCleanupEvents() {
+      console.log(`[文章脚本:${scriptInstanceId}] 注册清理事件`);
+      
+      // 创建一次性事件处理函数
+      const beforeSwapHandler = () => {
+        console.log(`[文章脚本:${scriptInstanceId}] astro:before-swap 触发，执行自销毁`);
+        selfDestruct();
+      };
+      
+      const beforeUnloadHandler = () => {
+        console.log(`[文章脚本:${scriptInstanceId}] beforeunload 触发，执行自销毁`);
+        selfDestruct();
+      };
+      
+      // 添加清理事件监听器并保存引用
+      document.addEventListener("astro:before-swap", beforeSwapHandler, { once: true });
+      window.addEventListener("beforeunload", beforeUnloadHandler, { once: true });
+      
+      // 保存清理事件引用，用于完全销毁
+      cleanupListeners.push(
+        { element: document, eventType: "astro:before-swap", handler: beforeSwapHandler, options: { once: true } },
+        { element: window, eventType: "beforeunload", handler: beforeUnloadHandler, options: { once: true } }
+      );
+    }
+    
+    // 初始化所有功能
+    function initializeFeatures() {
+      console.log(`[文章脚本:${scriptInstanceId}] 开始初始化各功能`);
+      
+      // 1. 代码块复制功能
+      function setupCodeCopy() {
+        console.log(`[文章脚本:${scriptInstanceId}] 初始化代码复制功能`);
+        const copyButtons = document.querySelectorAll('.code-block-copy');
+        if (copyButtons.length === 0) {
+          console.log(`[文章脚本:${scriptInstanceId}] 未找到代码复制按钮`);
+          return;
+        }
+        
+        console.log(`[文章脚本:${scriptInstanceId}] 找到代码复制按钮数量:`, copyButtons.length);
+        copyButtons.forEach(button => {
+          addListener(button, 'click', async () => {
+            try {
+              const encodedCode = button.getAttribute('data-code');
+              if (!encodedCode) return;
+              
+              const code = atob(encodedCode);
+              await navigator.clipboard.writeText(code);
+              
+              const originalHTML = button.innerHTML;
+              button.classList.add('copied');
               button.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  <path d="M20 6L9 17l-5-5"></path>
                 </svg>
-                复制
+                已复制
               `;
-            }, 2000);
-          }
-        });
-      });
-    }
-
-    // 4. 设置阅读进度条
-    function setupProgressBar() {
-      const progressBar = document.getElementById("progress-bar");
-      const backToTopButton = document.getElementById("back-to-top");
-
-      if (!progressBar) return;
-
-      function updateReadingProgress() {
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        const progress = (scrollTop / scrollHeight) * 100;
-
-        progressBar.style.width = `${progress}%`;
-
-        if (backToTopButton) {
-          if (scrollTop > 300) {
-            backToTopButton.classList.add(
-              "opacity-100",
-              "visible",
-              "translate-y-0"
-            );
-            backToTopButton.classList.remove(
-              "opacity-0",
-              "invisible",
-              "translate-y-5"
-            );
-          } else {
-            backToTopButton.classList.add(
-              "opacity-0",
-              "invisible",
-              "translate-y-5"
-            );
-            backToTopButton.classList.remove(
-              "opacity-100",
-              "visible",
-              "translate-y-0"
-            );
-          }
-        }
-      }
-
-      addListener(window, "scroll", updateReadingProgress);
-
-      if (backToTopButton) {
-        addListener(backToTopButton, "click", () => {
-          window.scrollTo({
-            top: 0,
-            behavior: "smooth",
+              
+              setTimeout(() => {
+                button.classList.remove('copied');
+                button.innerHTML = originalHTML;
+              }, 2000);
+            } catch (err) {
+              console.error(`[文章脚本:${scriptInstanceId}] 复制失败:`, err);
+              button.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <line x1="12" y1="8" x2="12" y2="12"></line>
+                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+                失败
+              `;
+              setTimeout(() => {
+                button.innerHTML = `
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  </svg>
+                  复制
+                `;
+              }, 2000);
+            }
           });
         });
       }
 
-      updateReadingProgress();
-    }
-    
-    // 5. 管理目录交互
-    function setupTableOfContents() {
-      const tocContent = document.getElementById("toc-content");
-      const tocPanel = document.querySelector("#toc-panel");
+      // 2. 阅读进度条
+      function setupProgressBar() {
+        console.log(`[文章脚本:${scriptInstanceId}] 初始化阅读进度条`);
+        const progressBar = document.getElementById("progress-bar");
+        const backToTopButton = document.getElementById("back-to-top");
 
-      if (!tocPanel || !tocContent) return;
-
-      // 检查窗口大小调整目录面板显示
-      function checkTocVisibility() {
-        if (window.innerWidth < 1536) {
-          tocPanel.classList.add("hidden");
-          tocPanel.classList.remove("2xl:block");
-        } else {
-          tocPanel.classList.remove("hidden");
-          tocPanel.classList.add("2xl:block");
+        if (!progressBar) {
+          console.warn(`[文章脚本:${scriptInstanceId}] 未找到进度条元素`);
+          return;
         }
-      }
 
-      addListener(window, "resize", checkTocVisibility);
-      checkTocVisibility();
+        function updateReadingProgress() {
+          const scrollTop = window.scrollY || document.documentElement.scrollTop;
+          const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          const progress = (scrollTop / scrollHeight) * 100;
 
-      // 处理目录链接点击跳转
-      const tocLinks = tocContent.querySelectorAll("a");
-      tocLinks.forEach(link => {
-        addListener(link, "click", (e) => {
-          e.preventDefault();
-          const targetId = link.getAttribute("href")?.substring(1);
-          if (!targetId) return;
+          progressBar.style.width = `${progress}%`;
 
-          const targetElement = document.getElementById(targetId);
-          if (targetElement) {
-            const offset = 100;
-            const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - offset;
+          if (backToTopButton) {
+            if (scrollTop > 300) {
+              backToTopButton.classList.add(
+                "opacity-100",
+                "visible",
+                "translate-y-0"
+              );
+              backToTopButton.classList.remove(
+                "opacity-0",
+                "invisible",
+                "translate-y-5"
+              );
+            } else {
+              backToTopButton.classList.add(
+                "opacity-0",
+                "invisible",
+                "translate-y-5"
+              );
+              backToTopButton.classList.remove(
+                "opacity-100",
+                "visible",
+                "translate-y-0"
+              );
+            }
+          }
+        }
 
+        addListener(window, "scroll", updateReadingProgress);
+
+        if (backToTopButton) {
+          addListener(backToTopButton, "click", () => {
             window.scrollTo({
-              top: targetPosition,
+              top: 0,
               behavior: "smooth",
             });
+          });
+        }
 
-            targetElement.classList.add("bg-primary-50", "dark:bg-primary-900/20");
-            setTimeout(() => {
-              targetElement.classList.remove("bg-primary-50", "dark:bg-primary-900/20");
-            }, 2000);
-          }
-        });
-      });
+        // 初始更新一次进度条
+        updateReadingProgress();
+      }
+      
+      // 3. 目录交互
+      function setupTableOfContents() {
+        console.log(`[文章脚本:${scriptInstanceId}] 初始化目录交互`);
+        const tocContent = document.getElementById("toc-content");
+        const tocPanel = document.querySelector("#toc-panel");
 
-      // 监听滚动以更新当前活动的目录项
-      const article = document.querySelector("article");
-      if (!article) return;
+        if (!tocPanel || !tocContent) {
+          console.warn(`[文章脚本:${scriptInstanceId}] 未找到目录面板或内容`);
+          return;
+        }
 
-      let ticking = false;
-
-      function updateActiveHeading() {
-        const headings = Array.from(article.querySelectorAll("h1, h2, h3, h4, h5, h6"));
-        const tocLinks = Array.from(tocContent.querySelectorAll("a"));
-
-        // 清除所有活动状态
-        tocLinks.forEach((link) => {
-          link.classList.remove("text-primary-600", "dark:text-primary-400", "font-medium");
-        });
-
-        // 找出当前可见的标题
-        const scrollPosition = window.scrollY + 150;
-        let currentHeading = null;
-
-        for (const heading of headings) {
-          const headingTop = heading.getBoundingClientRect().top + window.scrollY;
-          if (headingTop <= scrollPosition) {
-            currentHeading = heading;
+        // 检查窗口大小调整目录面板显示
+        function checkTocVisibility() {
+          if (window.innerWidth < 1536) {
+            tocPanel.classList.add("hidden");
+            tocPanel.classList.remove("2xl:block");
           } else {
-            break;
+            tocPanel.classList.remove("hidden");
+            tocPanel.classList.add("2xl:block");
           }
         }
 
-        // 高亮当前标题对应的目录项
-        if (currentHeading) {
-          const id = currentHeading.getAttribute('id');
-          if (id) {
-            const activeLink = tocLinks.find(
-              (link) => link.getAttribute("href") === `#${id}`
-            );
-            if (activeLink) {
-              // 高亮当前目录项
-              activeLink.classList.add("text-primary-600", "dark:text-primary-400", "font-medium");
-              
-              // 可选: 确保当前激活的目录项在可视区域内
-              const tocContainer = tocContent.querySelector('ul');
-              if (tocContainer) {
-                const linkOffsetTop = activeLink.offsetTop;
-                const containerScrollTop = tocContainer.scrollTop;
-                const containerHeight = tocContainer.clientHeight;
+        addListener(window, "resize", checkTocVisibility);
+        checkTocVisibility();
+
+        // 处理目录链接点击跳转
+        const tocLinks = tocContent.querySelectorAll("a");
+        console.log(`[文章脚本:${scriptInstanceId}] 找到目录链接数量:`, tocLinks.length);
+        
+        tocLinks.forEach(link => {
+          addListener(link, "click", (e) => {
+            e.preventDefault();
+            const targetId = link.getAttribute("href")?.substring(1);
+            if (!targetId) return;
+
+            const targetElement = document.getElementById(targetId);
+            if (targetElement) {
+              const offset = 100;
+              const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - offset;
+
+              window.scrollTo({
+                top: targetPosition,
+                behavior: "smooth",
+              });
+
+              targetElement.classList.add("bg-primary-50", "dark:bg-primary-900/20");
+              setTimeout(() => {
+                targetElement.classList.remove("bg-primary-50", "dark:bg-primary-900/20");
+              }, 2000);
+            }
+          });
+        });
+
+        // 监听滚动以更新当前活动的目录项
+        const article = document.querySelector("article");
+        if (!article) {
+          console.warn(`[文章脚本:${scriptInstanceId}] 未找到文章内容元素`);
+          return;
+        }
+
+        let ticking = false;
+
+        function updateActiveHeading() {
+          const headings = Array.from(article.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+          const tocLinks = Array.from(tocContent.querySelectorAll("a"));
+
+          // 清除所有活动状态
+          tocLinks.forEach((link) => {
+            link.classList.remove("text-primary-600", "dark:text-primary-400", "font-medium");
+          });
+
+          // 找出当前可见的标题
+          const scrollPosition = window.scrollY + 150;
+          let currentHeading = null;
+
+          for (const heading of headings) {
+            const headingTop = heading.getBoundingClientRect().top + window.scrollY;
+            if (headingTop <= scrollPosition) {
+              currentHeading = heading;
+            } else {
+              break;
+            }
+          }
+
+          // 高亮当前标题对应的目录项
+          if (currentHeading) {
+            const id = currentHeading.getAttribute('id');
+            if (id) {
+              const activeLink = tocLinks.find(
+                (link) => link.getAttribute("href") === `#${id}`
+              );
+              if (activeLink) {
+                // 高亮当前目录项
+                activeLink.classList.add("text-primary-600", "dark:text-primary-400", "font-medium");
                 
-                // 如果当前项不在视口内，滚动目录
-                if (linkOffsetTop < containerScrollTop || 
-                    linkOffsetTop > containerScrollTop + containerHeight) {
-                  tocContainer.scrollTop = linkOffsetTop - containerHeight / 2;
+                // 可选: 确保当前激活的目录项在可视区域内
+                const tocContainer = tocContent.querySelector('ul');
+                if (tocContainer) {
+                  const linkOffsetTop = activeLink.offsetTop;
+                  const containerScrollTop = tocContainer.scrollTop;
+                  const containerHeight = tocContainer.clientHeight;
+                  
+                  // 如果当前项不在视口内，滚动目录
+                  if (linkOffsetTop < containerScrollTop || 
+                      linkOffsetTop > containerScrollTop + containerHeight) {
+                    tocContainer.scrollTop = linkOffsetTop - containerHeight / 2;
+                  }
                 }
               }
             }
           }
         }
+
+        addListener(window, "scroll", () => {
+          if (!ticking) {
+            window.requestAnimationFrame(() => {
+              updateActiveHeading();
+              ticking = false;
+            });
+            ticking = true;
+          }
+        });
+
+        updateActiveHeading();
       }
 
-      addListener(window, "scroll", () => {
-        if (!ticking) {
-          window.requestAnimationFrame(() => {
-            updateActiveHeading();
-            ticking = false;
-          });
-          ticking = true;
+      // 4. Mermaid图表渲染
+      function setupMermaid() {
+        console.log(`[文章脚本:${scriptInstanceId}] 检查Mermaid图表`);
+        // 查找所有mermaid代码块
+        const mermaidBlocks = document.querySelectorAll(
+          'pre.language-mermaid, pre > code.language-mermaid, .mermaid'
+        );
+        
+        if (mermaidBlocks.length === 0) {
+          console.log(`[文章脚本:${scriptInstanceId}] 未找到Mermaid图表`);
+          return;
         }
-      });
-
-      updateActiveHeading();
-    }
-
-    // 6. 处理Mermaid图表渲染
-    function setupMermaid() {
-      // 查找所有mermaid代码块 - 支持多种可能的类名和选择器
-      const mermaidBlocks = document.querySelectorAll(
-        'pre.language-mermaid, pre > code.language-mermaid, .mermaid'
-      );
-      
-      if (mermaidBlocks.length === 0) return;
-      
-      console.log('找到Mermaid代码块:', mermaidBlocks.length);
-      
-      // 动态加载mermaid库
-      const script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
-      
-      script.onload = function() {
-        console.log('Mermaid库加载完成，开始渲染图表');
         
-        // 初始化mermaid配置 - 始终使用默认主题，通过CSS控制样式
-        window.mermaid.initialize({
-          startOnLoad: false,
-          theme: 'default',
-          securityLevel: 'loose'
-        });
+        console.log(`[文章脚本:${scriptInstanceId}] 找到Mermaid图表数量:`, mermaidBlocks.length);
         
-        // 将所有mermaid代码块转换为可渲染的格式
-        mermaidBlocks.forEach((block, index) => {
-          // 获取mermaid代码
-          let code = '';
+        // 动态加载mermaid库
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
+        
+        script.onload = function() {
+          console.log(`[文章脚本:${scriptInstanceId}] Mermaid库加载成功`);
           
-          // 检查元素类型并相应处理
-          if (block.tagName === 'CODE' && block.classList.contains('language-mermaid')) {
-            // 处理 code.language-mermaid 元素
-            code = block.textContent || '';
-            const pre = block.closest('pre');
-            if (pre) {
-              // 创建新的div元素替换整个pre
+          if (!window.mermaid) {
+            console.error(`[文章脚本:${scriptInstanceId}] Mermaid库加载后window.mermaid不存在`);
+            return;
+          }
+          
+          // 初始化mermaid配置
+          window.mermaid.initialize({
+            startOnLoad: false,
+            theme: 'default',
+            securityLevel: 'loose'
+          });
+          
+          // 将所有mermaid代码块转换为可渲染的格式
+          mermaidBlocks.forEach((block, index) => {
+            // 获取mermaid代码
+            let code = '';
+            
+            // 检查元素类型并相应处理
+            if (block.tagName === 'CODE' && block.classList.contains('language-mermaid')) {
+              // 处理 code.language-mermaid 元素
+              code = block.textContent || '';
+              const pre = block.closest('pre');
+              if (pre) {
+                // 创建新的div元素替换整个pre
+                const div = document.createElement('div');
+                div.className = 'mermaid';
+                div.id = 'mermaid-diagram-' + index;
+                div.textContent = code;
+                pre.parentNode.replaceChild(div, pre);
+              }
+            } else if (block.tagName === 'PRE' && block.classList.contains('language-mermaid')) {
+              // 处理 pre.language-mermaid 元素
+              code = block.textContent || '';
               const div = document.createElement('div');
               div.className = 'mermaid';
               div.id = 'mermaid-diagram-' + index;
               div.textContent = code;
-              pre.parentNode.replaceChild(div, pre);
+              block.parentNode.replaceChild(div, block);
+            } else if (block.classList.contains('mermaid') && block.tagName !== 'DIV') {
+              // 如果是其他带mermaid类的元素但不是div，转换为div
+              code = block.textContent || '';
+              const div = document.createElement('div');
+              div.className = 'mermaid';
+              div.id = 'mermaid-diagram-' + index;
+              div.textContent = code;
+              block.parentNode.replaceChild(div, block);
             }
-          } else if (block.tagName === 'PRE' && block.classList.contains('language-mermaid')) {
-            // 处理 pre.language-mermaid 元素
-            code = block.textContent || '';
-            const div = document.createElement('div');
-            div.className = 'mermaid';
-            div.id = 'mermaid-diagram-' + index;
-            div.textContent = code;
-            block.parentNode.replaceChild(div, block);
-          } else if (block.classList.contains('mermaid') && block.tagName !== 'DIV') {
-            // 如果是其他带mermaid类的元素但不是div，转换为div
-            code = block.textContent || '';
-            const div = document.createElement('div');
-            div.className = 'mermaid';
-            div.id = 'mermaid-diagram-' + index;
-            div.textContent = code;
-            block.parentNode.replaceChild(div, block);
-          }
-        });
-        
-        // 初始化渲染
-        try {
-          console.log('开始渲染Mermaid图表');
-          window.mermaid.run().catch(err => {
-            console.error('Mermaid渲染出错:', err);
           });
-        } catch (error) {
-          console.error('初始化Mermaid渲染失败:', error);
-        }
-      };
-      
-      script.onerror = function() {
-        console.error('加载Mermaid库失败');
-        // 显示错误信息
-        mermaidBlocks.forEach(block => {
-          if (block.tagName === 'CODE') block = block.closest('pre');
-          if (block) {
-            block.innerHTML = '<div class="mermaid-error-message">无法加载Mermaid图表库</div>';
+          
+          // 初始化渲染
+          try {
+            console.log(`[文章脚本:${scriptInstanceId}] 开始渲染Mermaid图表`);
+            window.mermaid.run().catch(err => {
+              console.error(`[文章脚本:${scriptInstanceId}] Mermaid渲染出错:`, err);
+            });
+          } catch (error) {
+            console.error(`[文章脚本:${scriptInstanceId}] 初始化Mermaid渲染失败:`, error);
           }
-        });
-      };
-      
-      document.head.appendChild(script);
-      
-      // 添加到清理列表，确保后续页面跳转时能删除脚本
-      listeners.push({
-        element: script,
-        eventType: 'remove',
-        handler: () => {
+        };
+        
+        script.onerror = function() {
+          console.error(`[文章脚本:${scriptInstanceId}] 加载Mermaid库失败`);
+          // 显示错误信息
+          mermaidBlocks.forEach(block => {
+            if (block.tagName === 'CODE') block = block.closest('pre');
+            if (block) {
+              block.innerHTML = '<div class="mermaid-error-message">无法加载Mermaid图表库</div>';
+            }
+          });
+        };
+        
+        document.head.appendChild(script);
+        
+        // 添加Mermaid清理任务
+        customCleanupTasks.push(() => {
+          console.log(`[文章脚本:${scriptInstanceId}] 执行Mermaid特殊清理`);
+          
+          // 移除脚本标签
           if (script.parentNode) {
             script.parentNode.removeChild(script);
           }
           
           // 清除全局mermaid对象
           if (window.mermaid) {
-            window.mermaid = undefined;
+            console.log(`[文章脚本:${scriptInstanceId}] 清除window.mermaid对象`);
+            try {
+              // 尝试清理mermaid内部状态
+              if (typeof window.mermaid.destroy === 'function') {
+                window.mermaid.destroy();
+              }
+              window.mermaid = undefined;
+            } catch (e) {
+              console.error(`[文章脚本:${scriptInstanceId}] 清理mermaid对象出错:`, e);
+            }
           }
           
           // 移除页面上可能留下的mermaid相关元素
@@ -837,70 +952,27 @@ const tableOfContents = generateTableOfContents(headings);
             
             document.querySelectorAll(mermaidElements.join(', ')).forEach(el => {
               if (el && el.parentNode) {
+                console.log(`[文章脚本:${scriptInstanceId}] 移除Mermaid元素:`, el.id || el.className);
                 el.parentNode.removeChild(el);
               }
             });
           } catch (e) {
-            console.error('清理Mermaid元素时出错:', e);
+            console.error(`[文章脚本:${scriptInstanceId}] 清理Mermaid元素时出错:`, e);
           }
-        },
-        options: null
-      });
-    }
-
-    // 初始化所有功能
-    function init() {
-      if (!document.querySelector("article")) return;
+        });
+      }
       
-      setupCodeCopy();  // 只保留代码复制功能
+      // 启动所有功能
+      setupCodeCopy();
       setupProgressBar();
       setupTableOfContents();
       setupMermaid();
+      
+      console.log(`[文章脚本:${scriptInstanceId}] 所有功能初始化完成`);
     }
-
-    // 注册清理函数
-    function registerCleanup() {
-      // 使用 once: true 确保事件只触发一次
-      document.addEventListener("astro:before-preparation", cleanup, { once: true });
-      document.addEventListener("astro:before-swap", cleanup, { once: true });
-      document.addEventListener("swup:willReplaceContent", cleanup, { once: true });
-      window.addEventListener("beforeunload", cleanup, { once: true });
-    }
-
-    // 处理页面跳转事件
-    function setupPageTransitionEvents() {
-      // 页面转换后事件
-      const pageTransitionEvents = [
-        { name: "astro:after-swap", delay: 10 },
-        { name: "astro:page-load", delay: 10 },
-        { name: "swup:contentReplaced", delay: 10 },
-      ];
-
-      // 设置每个页面转换事件
-      pageTransitionEvents.forEach(({ name, delay }) => {
-        document.addEventListener(name, () => {
-          cleanup(); // 立即清理
-
-          // 延迟初始化，确保DOM完全更新
-          setTimeout(() => {
-            cleanup(); // 再次清理，确保没有遗漏
-            init();
-          }, delay);
-        });
-      });
-    }
-
-    // 页面加载后初始化
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () => {
-        init();
-        registerCleanup();
-        setupPageTransitionEvents();
-      }, { once: true });
-    } else {
-      init();
-      registerCleanup();
-      setupPageTransitionEvents();
-    }
+    
+    // 执行初始化
+    registerCleanupEvents();
+    initializeFeatures();
   })();
 </script>
diff --git a/src/styles/articles-code.css b/src/styles/articles-code.css
index 9bc3343..ba96530 100644
--- a/src/styles/articles-code.css
+++ b/src/styles/articles-code.css
@@ -1,7 +1,7 @@
 /* 代码块容器样式 - 简化背景和阴影 */
 .code-block-container {
-  margin: 1rem 0;
-  border-radius: 0.5rem;
+  margin: 0.75rem 0;
+  border-radius: 0.4rem;
   overflow: hidden;
   border: 1px solid #e2e8f0;
   background-color: transparent;
@@ -13,11 +13,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.4rem 0.8rem;
+  padding: 0.3rem 0.6rem;
   background-color: #f1f5f9;
   border-bottom: 1px solid #e2e8f0;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
 }
 
 /* 代码语言标签 */
@@ -42,10 +42,10 @@
   color: #475569;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
+  gap: 0.2rem;
+  padding: 0.2rem 0.4rem;
   border-radius: 0.25rem;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   transition: all 0.2s ease;
 }
 
@@ -67,14 +67,14 @@
 /* 基础代码块样式 - 减小内边距 */
 pre {
   margin: 0;
-  padding: 0.2rem 0;
+  padding: 0.15rem 0;
   overflow-x: auto;
 }
 
 pre code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 1.05rem;
-  line-height: 1.5rem;
+  font-size: 0.9rem;
+  line-height: 1.4rem;
   padding: 0;
   display: block;
 }
@@ -92,7 +92,7 @@ pre code {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 3rem;
+  width: 2.5rem;
   background-color: #f1f5f9;
   border-right: 1px solid #e2e8f0;
   z-index: 1;
@@ -102,9 +102,9 @@ pre code {
 .line-numbers .line {
   position: relative;
   counter-increment: line;
-  padding-left: 3.5rem;
-  padding-right: 0.5rem;
-  min-height: 1.5rem;
+  padding-left: 3rem;
+  padding-right: 0.4rem;
+  min-height: 1.4rem;
   white-space: pre;
 }
 
@@ -114,11 +114,11 @@ pre code {
   position: absolute;
   left: 0;
   top: 0;
-  width: 3rem;
+  width: 2.5rem;
   height: 100%;
   text-align: center;
   color: #94a3b8;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   user-select: none;
   z-index: 2;
   display: flex;
@@ -196,3 +196,57 @@ pre.shiki, pre.astro-code,
   color: var(--shiki-dark) !important;
 }
 
+/* 行内代码块样式 */
+:not(pre) > code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875rem;
+  color: var(--color-primary-700);
+  background-color: var(--color-primary-50);
+  padding: 0.2rem 0.4rem;
+  margin: 0 0.2rem;
+  border-radius: 0.3rem;
+  border: 1px solid var(--color-primary-100);
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.4;
+}
+
+/* 行内代码块黑暗模式样式 */
+[data-theme='dark'] :not(pre) > code {
+  color: var(--color-primary-300);
+  background-color: rgba(75, 107, 255, 0.1);
+  border-color: var(--color-primary-700);
+}
+
+/* 长路径的行内代码块样式特殊处理 */
+:not(pre) > code:has(path), 
+:not(pre) > code.file-path {
+  white-space: pre-wrap;       /* 保留空格但允许换行 */
+  overflow-wrap: break-word;   /* 允许在任何地方断行 */
+  word-break: break-all;       /* 允许在任何字符间断行 */
+  max-width: 100%;
+  display: inline-block;
+  font-size: 0.85rem;          /* 略微减小字体尺寸 */
+  padding: 0.2rem 0.4rem;
+  line-height: 1.4;
+}
+
+/* 针对文件路径的特殊样式 - 适用于Windows路径 */
+:not(pre) > code.file-path {
+  color: var(--color-gray-700);
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-200);
+}
+
+/* 针对文件路径的特殊样式 - 黑暗模式 */
+[data-theme='dark'] :not(pre) > code.file-path {
+  color: var(--color-gray-300);
+  background-color: var(--color-gray-800);
+  border-color: var(--color-gray-700);
+}
+
diff --git a/wasm/search/src/lib.rs b/wasm/search/src/lib.rs
index e28a509..fa958f8 100644
--- a/wasm/search/src/lib.rs
+++ b/wasm/search/src/lib.rs
@@ -140,7 +140,7 @@ fn get_search_suggestions(search_index: &ArticleSearchIndex, query: &str) -> Vec
                 suggestion_type: SuggestionType::Completion,
                 frequency: *freq
             });
-        } else if query.starts_with(&term_lower) || term_lower.contains(&query) {
+        } else if term_lower.contains(&query) {
             // 包含关系，作为纠正建议
             candidates.push(SuggestionCandidate {
                 text: term.clone(),