From 02aaa16629457cb9ca7311882c18e8a4b50336d9 Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Wed, 21 May 2025 14:43:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99=E7=9B=AE=E5=BD=95=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E6=89=80=E6=9C=89?=
 =?UTF-8?q?css=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.astro      |  79 ---------------
 src/pages/articles/[...id].astro | 123 +++++++++++------------
 src/styles/articles-mermaid.css  | 106 +++++---------------
 src/styles/articles.css          | 167 ++++++++++++-------------------
 src/styles/global.css            |  89 ----------------
 src/styles/header.css            |  77 ++++++++++++++
 src/styles/swup-transitions.css  |  89 ++++++++++++++++
 src/styles/theme-toggle.css      |   2 +-
 8 files changed, 315 insertions(+), 417 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 6e4e523..e5c8a51 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -303,85 +303,6 @@ const hasActiveNavItem = activeItem || activeGroupId || activeSubItem ? true : f
   </nav>
 </header>
 
-<style is:global>
-  /* 汉堡菜单动画样式 */
-  .hamburger-menu {
-    width: 24px;
-    height: 24px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-  }
-
-  .hamburger-line {
-    width: 100%;
-    height: 2px;
-    background-color: currentColor;
-    border-radius: 2px;
-    transition: all 0.3s ease;
-    transform-origin: center;
-  }
-
-  /* 菜单打开时的样式 */
-  [aria-expanded="true"] .hamburger-menu .line-1 {
-    transform: translateY(8px) rotate(45deg);
-  }
-
-  [aria-expanded="true"] .hamburger-menu .line-2 {
-    opacity: 0;
-  }
-
-  [aria-expanded="true"] .hamburger-menu .line-3 {
-    transform: translateY(-8px) rotate(-45deg);
-  }
-  
-  /* 移动端子菜单展开动画 */
-  .mobile-menu-arrow {
-    transition: transform 0.3s ease;
-  }
-  
-  /* 移动端菜单图标容器 */
-  .mobile-menu-icon {
-    position: relative;
-    transition: transform 0.3s ease;
-  }
-  
-  /* 子菜单展开/收起动画 - 完全重写 */
-  .mobile-submenu {
-    height: auto;
-    max-height: 0;
-    visibility: hidden;
-    opacity: 0;
-    overflow: hidden;
-    transform: translateY(-10px);
-    transition: 
-      max-height 0.3s ease, 
-      opacity 0.3s ease, 
-      transform 0.3s ease,
-      visibility 0s linear 0.3s,  /* 延迟visibility变化 */
-      padding 0.3s ease;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  
-  .mobile-submenu.menu-visible {
-    max-height: 500px; /* 足够大以容纳所有内容 */
-    visibility: visible;
-    opacity: 1;
-    transform: translateY(0);
-    transition: 
-      max-height 0.3s ease, 
-      opacity 0.3s ease, 
-      transform 0.3s ease,
-      visibility 0s linear 0s, /* 立即改变visibility */
-      padding 0.3s ease;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-</style>
-
 <script is:inline>
 // 导航逻辑 - 自销毁模式
 (function() {
diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro
index d8e3c1e..bf9fadc 100644
--- a/src/pages/articles/[...id].astro
+++ b/src/pages/articles/[...id].astro
@@ -174,7 +174,7 @@ function getArticleUrl(articleId: string) {
 // 预先生成目录结构
 function generateTableOfContents(headings: Heading[]) {
   if (!headings || headings.length === 0) {
-    return '<p class="text-secondary-500 dark:text-secondary-400 italic">此文章没有目录</p>';
+    return '<p class="text-gray-500 dark:text-gray-400 italic">此文章没有目录</p>';
   }
 
   // 查找最低级别的标题（数值最小）
@@ -232,7 +232,7 @@ function generateTableOfContents(headings: Heading[]) {
     if (items.length === 0) return '';
     
     const isTopLevel = level === 0;
-    let html = `<ul class="space-y-2 toc-list ${isTopLevel ? '' : 'toc-sublist hidden'}" ${level > 0 ? 'aria-expanded="false"' : ''}>`;
+    let html = `<ul class="toc-list space-y-2 ${isTopLevel ? '' : 'toc-sublist hidden'}" ${level > 0 ? 'aria-expanded="false"' : ''}>`;
     
     items.forEach(item => {
       const hasChildren = item.children && item.children.length > 0;
@@ -241,15 +241,15 @@ function generateTableOfContents(headings: Heading[]) {
       html += `<li class="toc-item" data-depth="${item.depth}">
         <div class="toc-item-container">
           <a href="#${item.slug}" 
-             class="toc-link block duration-50 ${
+             class="toc-link ${
                isHigherLevel
-                 ? "text-secondary-800 dark:text-secondary-200 font-medium"
-                 : "text-secondary-600 dark:text-secondary-400"
-             }"
+                 ? "text-gray-800 dark:text-gray-200 font-medium"
+                 : "text-gray-600 dark:text-gray-400"
+             } hover:text-primary-600 dark:hover:text-primary-400"
              style="padding-left: ${item.depth * 0.75}rem;">
             ${item.text}
           </a>
-          ${hasChildren ? `<button class="toc-toggle ml-1 p-1 text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400" aria-expanded="false">
+          ${hasChildren ? `<button class="toc-toggle text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 ml-1 p-1" aria-expanded="false">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
@@ -531,34 +531,21 @@ const tableOfContents = generateTableOfContents(headings);
 
     <!-- 目录 -->
     <section
-      class="hidden 2xl:block"
+      class="hidden 2xl:block fixed right-[calc(50%-44rem)] top-20 w-64 z-30 transition-transform duration-300"
       id="toc-panel"
     >
-      <div>
-        <div
-          class="panel-header"
-        >
-          <h3>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h16M4 18h7"
-              ></path>
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl flex flex-col backdrop-blur-sm bg-opacity-95 dark:bg-opacity-95 shadow-lg transition-opacity duration-300">
+        <div class="border-b border-gray-200 dark:border-gray-700 p-4 pb-3 sticky top-0 z-10 rounded-t-xl bg-white dark:bg-gray-800 bg-opacity-95 backdrop-blur-sm">
+          <h3 class="font-bold text-primary-700 dark:text-primary-400 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
             </svg>
             文章目录
           </h3>
         </div>
         <div
           id="toc-content"
-          class="scrollbar-thin scrollbar-thumb-primary-200 dark:scrollbar-thumb-primary-800 scrollbar-track-transparent"
+          class="text-sm p-4 pt-2 overflow-y-auto max-h-[calc(100vh-8rem-42px)] bg-white dark:bg-gray-800 scroll-smooth scrollbar-thin scrollbar-thumb-primary-200 dark:scrollbar-thumb-primary-800 scrollbar-track-transparent"
           set:html={tableOfContents}
         >
         </div>
@@ -783,10 +770,8 @@ const tableOfContents = generateTableOfContents(headings);
           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");
             }
           }
 
@@ -804,23 +789,21 @@ const tableOfContents = generateTableOfContents(headings);
               const expanded = toggle.getAttribute("aria-expanded") === "true";
               toggle.setAttribute("aria-expanded", expanded ? "false" : "true");
               
-              // 更新图标旋转
-              const svg = toggle.querySelector("svg");
-              if (svg) {
-                svg.style.transform = expanded ? "" : "rotate(-180deg)";
-              }
-              
               // 切换子菜单显示状态
               const listItem = toggle.closest(".toc-item");
               if (listItem) {
                 const sublist = listItem.querySelector(".toc-sublist");
                 if (sublist) {
                   if (expanded) {
+                    // 收起子菜单
                     sublist.classList.add("hidden");
                     sublist.setAttribute("aria-expanded", "false");
+                    toggle.querySelector("svg").classList.remove("rotate-180");
                   } else {
+                    // 展开子菜单
                     sublist.classList.remove("hidden");
                     sublist.setAttribute("aria-expanded", "true");
+                    toggle.querySelector("svg").classList.add("rotate-180");
                   }
                 }
               }
@@ -849,6 +832,7 @@ const tableOfContents = generateTableOfContents(headings);
                   behavior: "smooth",
                 });
 
+                // 增强高亮效果
                 targetElement.classList.add(
                   "bg-primary-50",
                   "dark:bg-primary-900/20",
@@ -856,7 +840,7 @@ const tableOfContents = generateTableOfContents(headings);
                 setTimeout(() => {
                   targetElement.classList.remove(
                     "bg-primary-50",
-                    "dark:bg-primary-900/20",
+                    "dark:bg-primary-900/20"
                   );
                 }, 2000);
               }
@@ -876,14 +860,15 @@ const tableOfContents = generateTableOfContents(headings);
               article.querySelectorAll("h1, h2, h3, h4, h5, h6"),
             );
             const tocLinks = Array.from(tocContent.querySelectorAll(".toc-link"));
-            const tocItems = Array.from(tocContent.querySelectorAll(".toc-item"));
 
             // 清除所有活动状态
             tocLinks.forEach((link) => {
+              // 移除活动类
               link.classList.remove(
+                "toc-link-active",
                 "text-primary-600",
                 "dark:text-primary-400",
-                "font-medium",
+                "font-medium"
               );
             });
 
@@ -914,9 +899,10 @@ const tableOfContents = generateTableOfContents(headings);
                 if (activeLink) {
                   // 高亮当前目录项
                   activeLink.classList.add(
+                    "toc-link-active",
                     "text-primary-600",
                     "dark:text-primary-400",
-                    "font-medium",
+                    "font-medium"
                   );
 
                   // 展开当前激活项的所有父菜单并收集到活动项集合中
@@ -929,15 +915,13 @@ const tableOfContents = generateTableOfContents(headings);
                     const parentToggle = parent.querySelector(".toc-toggle");
                     
                     if (parentSublist && parentSublist.classList.contains("hidden")) {
+                      // 使用平滑动画展开
                       parentSublist.classList.remove("hidden");
                       parentSublist.setAttribute("aria-expanded", "true");
                       
                       if (parentToggle) {
                         parentToggle.setAttribute("aria-expanded", "true");
-                        const svg = parentToggle.querySelector("svg");
-                        if (svg) {
-                          svg.style.transform = "rotate(-180deg)";
-                        }
+                        parentToggle.querySelector("svg")?.classList.add("rotate-180");
                       }
                     }
                     
@@ -945,28 +929,42 @@ const tableOfContents = generateTableOfContents(headings);
                     parent = parent.parentElement?.closest(".toc-item");
                   }
 
-                  // 确保当前激活的目录项在可视区域内
-                  const tocContainer = tocContent;
-                  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;
+                  // 确保当前激活的目录项在可视区域内 - 添加平滑滚动
+                  setTimeout(() => {
+                    // 延迟执行确保DOM已更新
+                    if (tocContent) {
+                      // 重新计算activeLink的位置，因为父菜单可能已展开
+                      const linkRect = activeLink.getBoundingClientRect();
+                      const containerRect = tocContent.getBoundingClientRect();
+                      
+                      // 检查当前项是否在目录容器的可视区域内
+                      const isInView = (
+                        linkRect.top >= containerRect.top &&
+                        linkRect.bottom <= containerRect.bottom
+                      );
+                      
+                      // 如果当前激活项不在视口内，滚动目录
+                      if (!isInView) {
+                        // 计算滚动位置，使激活项在容器中居中
+                        const scrollTop = tocContent.scrollTop + 
+                                         (linkRect.top - containerRect.top) - 
+                                         (containerRect.height / 2) + 
+                                         (linkRect.height / 2);
+                                            
+                        tocContent.scrollTo({
+                          top: scrollTop,
+                          behavior: "smooth"
+                        });
+                      }
                     }
-                  }
+                  }, 100); // 添加短延迟确保DOM已更新
                 }
               }
             }
 
-            // 关闭不在当前活动路径上的所有子菜单
-            tocItems.forEach(item => {
+            // 关闭不在当前活动路径上的所有子菜单 - 使用平滑动画
+            const allItems = Array.from(tocContent.querySelectorAll(".toc-item"));
+            allItems.forEach(item => {
               // 如果不在活动路径上且有子菜单
               if (!activeItems.has(item)) {
                 const sublist = item.querySelector('.toc-sublist');
@@ -978,10 +976,7 @@ const tableOfContents = generateTableOfContents(headings);
                   
                   if (toggle) {
                     toggle.setAttribute('aria-expanded', 'false');
-                    const svg = toggle.querySelector('svg');
-                    if (svg) {
-                      svg.style.transform = '';
-                    }
+                    toggle.querySelector("svg")?.classList.remove("rotate-180");
                   }
                 }
               }
diff --git a/src/styles/articles-mermaid.css b/src/styles/articles-mermaid.css
index 659baaa..7a22bb7 100644
--- a/src/styles/articles-mermaid.css
+++ b/src/styles/articles-mermaid.css
@@ -1,78 +1,56 @@
 /* 基础Mermaid样式覆盖 */
-.mermaid {
+.mermaid * {
   background-color: transparent !important;
 }
 
 /* Mermaid文本颜色统一 */
-.mermaid .label,
-.mermaid text,
-.mermaid span,
-.mermaid .messageText,
-.mermaid .loopText,
-.mermaid .noteText,
-.mermaid .taskText {
+.mermaid :is(text, span, div,span,p) {
   color: var(--color-secondary-800) !important;
   fill: var(--color-secondary-800) !important;
   font-family: inherit !important;
 }
 
 /* 添加edgeLabel文本颜色样式 */
-.mermaid .edgeLabel,
-.mermaid .edgeLabel p,
-.mermaid .edgeLabel span {
+.mermaid :is(.edgeLabel, .edgeLabel p, .edgeLabel div, .edgeLabel span) {
   color: var(--color-secondary-800) !important;
   fill: var(--color-secondary-800) !important;
-  background-color: transparent !important;
 }
 
 /* 节点样式设置 */
-.mermaid .node rect, 
-.mermaid .node circle, 
-.mermaid .node ellipse, 
-.mermaid .node polygon,
-.mermaid .node path {
+.mermaid :is(.node rect, .node circle, .node ellipse, .node polygon, .node path) {
   fill: var(--color-gray-100) !important;
   stroke: var(--color-gray-400) !important;
   stroke-width: 1px !important;
 }
 
 /* 连接线样式 */
-.mermaid .edgePath .path,
-.mermaid .flowchart-link,
-.mermaid line,
-.mermaid .messageLine0,
-.mermaid .messageLine1 {
+.mermaid :is(.edgePath .path, .flowchart-link, line, .messageLine0, .messageLine1) {
   stroke: var(--color-gray-600) !important;
   stroke-width: 1px !important;
   fill: none !important; /* 确保线条没有填充 */
 }
 
 /* 箭头填充 */
-.mermaid .arrowheadPath,
-.mermaid marker path {
+.mermaid :is(.arrowheadPath, marker path) {
   fill: var(--color-gray-600) !important;
   stroke: none !important;
 }
 
 /* 文本标签背景 */
-.mermaid .edgeLabel rect,
-.mermaid .labelBox {
+.mermaid :is(.edgeLabel rect, .labelBox) {
   fill: white !important;
   background-color: white !important;
 }
 
 /* 标题样式 */
-.mermaid .titleText,
-.mermaid .classTitle,
-.mermaid .cluster-label text {
+.mermaid :is(.titleText, .classTitle, .cluster-label text) {
   fill: var(--color-secondary-900) !important;
   color: var(--color-secondary-900) !important;
   font-weight: bold !important;
 }
 
 /* 集群/子图样式 */
-.mermaid .cluster rect,
-.mermaid .cluster polygon {
+.mermaid :is(.cluster rect, .cluster polygon) {
   fill: var(--color-gray-50) !important;
   stroke: var(--color-gray-400) !important;
   stroke-width: 1px !important;
@@ -92,22 +70,17 @@
 }
 
 /* 甘特图特殊样式 */
-.mermaid .section0,
-.mermaid .section2 {
+.mermaid :is(.section0, .section2) {
   fill: var(--color-gray-50) !important;
   opacity: 0.5 !important;
 }
 
-.mermaid .section1,
-.mermaid .section3 {
+.mermaid :is(.section1, .section3) {
   fill: var(--color-gray-100) !important;
   opacity: 0.4 !important;
 }
 
-.mermaid .task0,
-.mermaid .task1,
-.mermaid .task2,
-.mermaid .task3 {
+.mermaid :is(.task0, .task1, .task2, .task3) {
   fill: var(--color-primary-600) !important;
   stroke: var(--color-gray-400) !important;
 }
@@ -119,76 +92,50 @@
 }
 
 /* 暗色模式样式 */
-[data-theme='dark'] .mermaid .label,
-[data-theme='dark'] .mermaid text,
-[data-theme='dark'] .mermaid span,
-[data-theme='dark'] .mermaid .messageText,
-[data-theme='dark'] .mermaid .loopText,
-[data-theme='dark'] .mermaid .noteText,
-[data-theme='dark'] .mermaid .taskText,
-[data-theme='dark'] .mermaid .classLabel .label {
+[data-theme='dark'] .mermaid :is(.label, text, span, .messageText, .loopText, .noteText, .taskText, .classLabel .label) {
   color: var(--color-secondary-300) !important;
   fill: var(--color-secondary-300) !important;
 }
 
 /* 暗色模式edgeLabel文本颜色样式 */
-[data-theme='dark'] .mermaid .edgeLabel,
-[data-theme='dark'] .mermaid .edgeLabel p,
-[data-theme='dark'] .mermaid .edgeLabel span {
+[data-theme='dark'] .mermaid :is(.edgeLabel, .edgeLabel p, .edgeLabel span) {
   color: var(--color-secondary-300) !important;
   fill: var(--color-secondary-300) !important;
 }
 
-[data-theme='dark'] .mermaid .node rect, 
-[data-theme='dark'] .mermaid .node circle, 
-[data-theme='dark'] .mermaid .node ellipse, 
-[data-theme='dark'] .mermaid .node polygon,
-[data-theme='dark'] .mermaid .node path,
-[data-theme='dark'] .mermaid .actor {
+[data-theme='dark'] .mermaid :is(.node rect, .node circle, .node ellipse, .node polygon, .node path, .actor) {
   fill: var(--color-dark-hover) !important;
   stroke: var(--color-gray-600) !important;
 }
 
-/* 暗色模式连接线样式 - 分开处理 */
-[data-theme='dark'] .mermaid .edgePath .path,
-[data-theme='dark'] .mermaid .flowchart-link,
-[data-theme='dark'] .mermaid line,
-[data-theme='dark'] .mermaid .messageLine0,
-[data-theme='dark'] .mermaid .messageLine1 {
+/* 暗色模式连接线样式 */
+[data-theme='dark'] .mermaid :is(.edgePath .path, .flowchart-link, line, .messageLine0, .messageLine1) {
   stroke: var(--color-gray-400) !important;
-  fill: none !important; /* 确保线条没有填充 */
+  fill: none !important;
 }
 
-/* 暗色模式箭头样式 - 分开处理 */
-[data-theme='dark'] .mermaid .arrowheadPath,
-[data-theme='dark'] .mermaid marker path {
+/* 暗色模式箭头样式 */
+[data-theme='dark'] .mermaid :is(.arrowheadPath, marker path) {
   fill: var(--color-gray-400) !important;
   stroke: none !important;
 }
 
-[data-theme='dark'] .mermaid .edgeLabel rect,
-[data-theme='dark'] .mermaid .labelBox {
+[data-theme='dark'] .mermaid :is(.edgeLabel rect, .labelBox) {
   fill: var(--color-dark-surface) !important;
   background-color: var(--color-dark-surface) !important;
 }
 
-[data-theme='dark'] .mermaid .titleText,
-[data-theme='dark'] .mermaid .classTitle,
-[data-theme='dark'] .mermaid .cluster-label text {
+[data-theme='dark'] .mermaid :is(.titleText, .classTitle, .cluster-label text) {
   fill: var(--color-secondary-100) !important;
   color: var(--color-secondary-100) !important;
 }
 
-[data-theme='dark'] .mermaid .cluster rect,
-[data-theme='dark'] .mermaid .cluster polygon,
-[data-theme='dark'] .mermaid .section0,
-[data-theme='dark'] .mermaid .section2 {
+[data-theme='dark'] .mermaid :is(.cluster rect, .cluster polygon, .section0, .section2) {
   fill: var(--color-dark-card) !important;
   stroke: var(--color-gray-600) !important;
 }
 
-[data-theme='dark'] .mermaid .section1,
-[data-theme='dark'] .mermaid .section3 {
+[data-theme='dark'] .mermaid :is(.section1, .section3) {
   fill: var(--color-dark-hover) !important;
 }
 
@@ -196,10 +143,7 @@
   fill: var(--color-primary-300) !important;
 }
 
-[data-theme='dark'] .mermaid .task0,
-[data-theme='dark'] .mermaid .task1,
-[data-theme='dark'] .mermaid .task2,
-[data-theme='dark'] .mermaid .task3 {
+[data-theme='dark'] .mermaid :is(.task0, .task1, .task2, .task3) {
   fill: var(--color-primary-400) !important;
   stroke: var(--color-gray-600) !important;
 }
\ No newline at end of file
diff --git a/src/styles/articles.css b/src/styles/articles.css
index f168e53..6a8fd34 100644
--- a/src/styles/articles.css
+++ b/src/styles/articles.css
@@ -195,7 +195,7 @@
   color: var(--color-primary-600);
   text-decoration: none;
   border-bottom: 1px solid var(--color-primary-300);
-  transition: all 0.2s ease;
+  transition: border-bottom-color 0.2s ease;
 }
 
 .prose a:hover {
@@ -220,8 +220,6 @@
   border-bottom-color: var(--color-primary-400);
 }
 
-
-
 /* 收纳内容样式 */
 .details-content {
   margin-left: 1.5em;
@@ -243,7 +241,7 @@
   border-radius: 0.5rem;
   border: 1px solid var(--color-secondary-200);
   background-color: var(--color-gray-50);
-  transition: all 0.2s ease;
+  transition: box-shadow 0.2s ease;
   overflow: hidden;
 }
 
@@ -275,7 +273,7 @@
   display: flex;
   align-items: center;
   gap: 0.75em;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease;
   background: linear-gradient(to right, var(--color-primary-50), var(--color-gray-50));
   border-left: 4px solid var(--color-primary-100);
 }
@@ -361,13 +359,18 @@
   border-left-color: var(--color-primary-400);
 }
 
-/* 目录菜单样式 */
-/* 目录项样式 */
+/* 目录组件样式 */
+/* 目录项基础样式 */
+.toc-item {
+  position: relative;
+}
+
 .toc-item-container {
   display: flex;
   align-items: center;
 }
 
+/* 目录链接基础样式 */
 .toc-link {
   flex: 1;
   white-space: nowrap;
@@ -375,30 +378,38 @@
   text-overflow: ellipsis;
   padding: 0.25rem 0;
   border-radius: 0.25rem;
+  transition: background-color 0.3s ease;
+  position: relative;
 }
 
-/* 黑暗模式文本颜色 */
-.dark .text-secondary-800,
-[data-theme="dark"] .text-secondary-800 {
-  color: var(--color-secondary-200);
+/* 目录链接高亮指示器 */
+.toc-link-active::before {
+  content: '';
+  position: absolute;
+  left: -0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 1rem;
+  background: linear-gradient(to bottom, var(--color-primary-600), var(--color-primary-400));
+  border-radius: 0 2px 2px 0;
+  opacity: 1;
 }
 
-.dark .text-secondary-600,
-[data-theme="dark"] .text-secondary-600 {
-  color: var(--color-secondary-400);
+[data-theme="dark"] .toc-link-active::before {
+  background: linear-gradient(to bottom, var(--color-primary-400), var(--color-primary-600));
 }
 
+/* 目录链接悬停样式 */
 .toc-link:hover {
   background-color: rgba(0, 0, 0, 0.05);
-  color: var(--color-primary-600);
 }
 
-.dark .toc-link:hover,
 [data-theme="dark"] .toc-link:hover {
   background-color: rgba(255, 255, 255, 0.05);
-  color: var(--color-primary-400);
 }
 
+/* 目录切换按钮样式 */
 .toc-toggle {
   display: inline-flex;
   align-items: center;
@@ -409,25 +420,33 @@
   min-height: 1.5rem;
 }
 
+/* 展开/折叠图标动画 */
+.toc-toggle svg {
+  transition: transform 0.3s ease;
+}
+
+.toc-toggle[aria-expanded="true"] svg {
+  transform: rotate(-180deg);
+}
+
+/* 目录切换按钮悬停样式 */
 .toc-toggle:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.dark .toc-toggle:hover,
 [data-theme="dark"] .toc-toggle:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-/* 动画效果 */
-.toc-sublist.hidden {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
+/* 子目录列表样式 */
+.toc-list {
+  list-style-type: none;
+  transition: padding 0.3s ease;
 }
 
-.toc-sublist:not(.hidden) {
-  max-height: 1000px;
-  opacity: 1;
+/* 子目录展开/收起动画 */
+.toc-sublist {
+  transition: max-height 0.3s ease, opacity 0.3s ease;
 }
 
 /* 目录面板样式 */
@@ -437,99 +456,41 @@
   top: 5rem;
   width: 16rem;
   z-index: 30;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-#toc-panel > div {
-  background-color: white;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  backdrop-filter: blur(4px);
-  background-opacity: 0.95;
-}
-
-.dark #toc-panel > div,
-[data-theme="dark"] #toc-panel > div {
-  background-color: var(--color-gray-800);
-  border-color: var(--color-gray-700);
-  background-opacity: 0.95;
-}
-
-#toc-panel .panel-header {
-  border-bottom: 1px solid var(--color-secondary-100);
-  padding: 1rem;
-  padding-bottom: 0.75rem;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
-  background-color: white;
-  background-opacity: 0.95;
-  backdrop-filter: blur(4px);
-}
-
-.dark #toc-panel .panel-header,
-[data-theme="dark"] #toc-panel .panel-header {
-  border-bottom-color: var(--color-gray-700);
-  background-color: var(--color-gray-800);
-}
-
-#toc-panel h3 {
-  font-weight: 700;
-  color: var(--color-primary-700);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dark #toc-panel h3,
-[data-theme="dark"] #toc-panel h3 {
-  color: var(--color-primary-400);
+@media (max-width: 1535px) {
+  #toc-panel.hidden {
+    opacity: 0;
+    transform: translateX(10px);
+    pointer-events: none;
+  }
 }
 
+/* 目录内容容器样式 */
 #toc-content {
   font-size: 0.875rem;
   padding: 1rem;
   padding-top: 0.5rem;
   overflow-y: auto;
   max-height: calc(100vh - 8rem - 42px);
-  background-color: white;
+  scroll-behavior: smooth;
 }
 
-.dark #toc-content,
-[data-theme="dark"] #toc-content {
-  background-color: var(--color-gray-800);
+/* 目录内容滚动条样式 */
+#toc-content::-webkit-scrollbar {
+  width: 4px;
 }
 
-/* 目录列表样式 */
-.toc-list {
-  list-style-type: none;
+#toc-content::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-/* 黑暗模式适配 */
-.dark .text-secondary-800,
-[data-theme="dark"] .text-secondary-800 {
-  color: var(--color-secondary-200);
+#toc-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary-200);
+  border-radius: 4px;
 }
 
-.dark .text-secondary-600,
-[data-theme="dark"] .text-secondary-600 {
-  color: var(--color-secondary-400);
-}
-
-.dark .text-primary-600,
-[data-theme="dark"] .text-primary-600 {
-  color: var(--color-primary-400);
-}
-
-/* 扩展目录高亮样式 */
-.toc-link.text-primary-600 {
-  font-weight: 500;
-}
-
-.dark .toc-link.text-primary-600,
-[data-theme="dark"] .toc-link.text-primary-600 {
-  font-weight: 500;
+[data-theme="dark"] #toc-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary-800);
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index c895d05..f9e6229 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,95 +4,6 @@
 /* 定义深色模式选择器 */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
-/* 加载旋转动画 - 无遮罩版本 */
-.loading-spinner-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 9999;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none; /* 允许点击穿透 */
-}
-
-/* 激活状态 */
-.loading-spinner-container.is-active {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* 旋转动画元素 */
-.loading-spinner {
-  width: 50px;
-  height: 50px;
-  border: 3px solid transparent;
-  border-top-color: var(--color-primary-500);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  position: relative;
-  /* 添加背景色以增强可见性 */
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-  padding: 15px;
-}
-
-/* 深色模式下旋转动画颜色 */
-[data-theme='dark'] .loading-spinner {
-  border-top-color: var(--color-primary-400);
-  background-color: rgba(15, 23, 42, 0.8);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-}
-
-.loading-spinner:before,
-.loading-spinner:after {
-  content: '';
-  position: absolute;
-  border: 3px solid transparent;
-  border-radius: 50%;
-}
-
-.loading-spinner:before {
-  top: -3px;
-  left: -3px;
-  right: -3px;
-  bottom: -3px;
-  border-top-color: var(--color-primary-300);
-  animation: spin 1.5s linear infinite;
-}
-
-.loading-spinner:after {
-  top: 6px;
-  left: 6px;
-  right: 6px;
-  bottom: 6px;
-  border-top-color: var(--color-primary-600);
-  animation: spin 0.75s linear infinite;
-}
-
-/* 深色模式下的内外圈颜色 */
-[data-theme='dark'] .loading-spinner:before {
-  border-top-color: var(--color-primary-200);
-}
-
-[data-theme='dark'] .loading-spinner:after {
-  border-top-color: var(--color-primary-500);
-}
-
-/* 旋转动画 */
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @theme {
   /* 主色调 - 使用更现代的蓝紫色 */
   --color-primary-50: #f5f7ff;
diff --git a/src/styles/header.css b/src/styles/header.css
index a91e89a..7958b33 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -60,4 +60,81 @@
 .nav-selector[data-has-active="true"] #nav-primary-highlight,
 .nav-selector[data-has-active="true"] #nav-secondary-highlight {
   opacity: 1;
+}
+
+/* 汉堡菜单动画样式 */
+.hamburger-menu {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.hamburger-line {
+  width: 100%;
+  height: 2px;
+  background-color: currentColor;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+  transform-origin: center;
+}
+
+/* 菜单打开时的样式 */
+[aria-expanded="true"] .hamburger-menu .line-1 {
+  transform: translateY(8px) rotate(45deg);
+}
+
+[aria-expanded="true"] .hamburger-menu .line-2 {
+  opacity: 0;
+}
+
+[aria-expanded="true"] .hamburger-menu .line-3 {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+/* 移动端子菜单展开动画 */
+.mobile-menu-arrow {
+  transition: transform 0.3s ease;
+}
+
+/* 移动端菜单图标容器 */
+.mobile-menu-icon {
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+/* 子菜单展开/收起动画 - 完全重写 */
+.mobile-submenu {
+  height: auto;
+  max-height: 0;
+  visibility: hidden;
+  opacity: 0;
+  overflow: hidden;
+  transform: translateY(-10px);
+  transition: 
+    max-height 0.3s ease, 
+    opacity 0.3s ease, 
+    transform 0.3s ease,
+    visibility 0s linear 0.3s,  /* 延迟visibility变化 */
+    padding 0.3s ease;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.mobile-submenu.menu-visible {
+  max-height: 500px; /* 足够大以容纳所有内容 */
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+  transition: 
+    max-height 0.3s ease, 
+    opacity 0.3s ease, 
+    transform 0.3s ease,
+    visibility 0s linear 0s, /* 立即改变visibility */
+    padding 0.3s ease;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
\ No newline at end of file
diff --git a/src/styles/swup-transitions.css b/src/styles/swup-transitions.css
index cdac852..093abf7 100644
--- a/src/styles/swup-transitions.css
+++ b/src/styles/swup-transitions.css
@@ -33,4 +33,93 @@ html.is-changing .transition-fade,
 html.is-changing .swup-transition-article,
 html.is-changing #article-content {
   opacity: 1;
+}
+
+/* 加载旋转动画 - 无遮罩版本 */
+.loading-spinner-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* 允许点击穿透 */
+}
+
+/* 激活状态 */
+.loading-spinner-container.is-active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* 旋转动画元素 */
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 3px solid transparent;
+  border-top-color: var(--color-primary-500);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  position: relative;
+  /* 添加背景色以增强可见性 */
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+}
+
+/* 深色模式下旋转动画颜色 */
+[data-theme='dark'] .loading-spinner {
+  border-top-color: var(--color-primary-400);
+  background-color: rgba(15, 23, 42, 0.8);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+}
+
+.loading-spinner:before,
+.loading-spinner:after {
+  content: '';
+  position: absolute;
+  border: 3px solid transparent;
+  border-radius: 50%;
+}
+
+.loading-spinner:before {
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border-top-color: var(--color-primary-300);
+  animation: spin 1.5s linear infinite;
+}
+
+.loading-spinner:after {
+  top: 6px;
+  left: 6px;
+  right: 6px;
+  bottom: 6px;
+  border-top-color: var(--color-primary-600);
+  animation: spin 0.75s linear infinite;
+}
+
+/* 深色模式下的内外圈颜色 */
+[data-theme='dark'] .loading-spinner:before {
+  border-top-color: var(--color-primary-200);
+}
+
+[data-theme='dark'] .loading-spinner:after {
+  border-top-color: var(--color-primary-500);
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 } 
\ No newline at end of file
diff --git a/src/styles/theme-toggle.css b/src/styles/theme-toggle.css
index 1e589ec..9563969 100644
--- a/src/styles/theme-toggle.css
+++ b/src/styles/theme-toggle.css
@@ -22,7 +22,7 @@
 }
 
 /* 暗色模式下使用不同颜色变量 */
-.dark .theme-ripple {
+[data-theme="dark"] .theme-ripple {
   background-color: rgba(var(--theme-ripple-color, 200, 200, 200), 0.15);
 }