src/components/controls/FloatingTOC.astro

---
import type { MarkdownHeading } from "astro";
import { Icon } from "astro-icon/components";
import FloatingButton from "@/components/common/FloatingButton.astro";
import { sidebarLayoutConfig } from "@/config/sidebarConfig";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import "@/styles/toc.css";

interface Props {
	headings: MarkdownHeading[];
}

let { headings: _ = [] } = Astro.props;
// ... (保留之前的逻辑)
// 检查侧边栏目录组件是否启用
const sidebarTocComponent = sidebarLayoutConfig.rightComponents?.find(
	(c) => c.type === "sidebarToc",
);
const isSidebarTocEnabled = sidebarTocComponent?.enable ?? false;
const sidebarPosition = sidebarLayoutConfig.position;
---

<!-- 悬浮TOC按钮 -->
<div id="floating-toc-wrapper" class="floating-toc-wrapper" data-is-sidebar-toc-enabled={String(isSidebarTocEnabled)} data-sidebar-position={sidebarPosition} data-show-right-sidebar-on-post={String(sidebarLayoutConfig.showRightSidebarOnPostPage ?? false)}>
  <FloatingButton
    id="floating-toc-btn"
    icon="material-symbols:format-list-bulleted"
    ariaLabel="Table of Contents"
    onclick="window.toggleFloatingTOC()"
    class="hide"
  />
  
  <!-- 悬浮TOC面板 - 移到 Wrapper 内部以便相对定位 -->
  <div
    id="floating-toc-panel"
    class="floating-toc-panel hide w-80 max-h-96 overflow-hidden rounded-2xl shadow-2xl backdrop-blur-lg border border-white/20 bg-white/60 dark:bg-black/60 dark:border-white/10 md:w-80 w-[calc(100vw-2rem)] md:max-h-96 max-h-[calc(100vh-8rem)]"
    style="background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.6);"
    >
    <div
        class="p-4 border-b border-gray-200 dark:border-gray-700 sticky top-0 backdrop-blur-xs z-10"
        style="background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.6);"
    >
        <div class="flex items-center justify-between">
        <h3
            class="text-lg font-bold text-(--primary) flex items-center gap-2"
        >
            {i18n(I18nKey.tableOfContents)}
        </h3>
        <button
            onclick="window.toggleFloatingTOC()"
            aria-label="Close TOC"
            class="btn-plain rounded-lg h-8 w-8 active:scale-90"
        >
            <Icon name="material-symbols:close" class="text-lg" />
        </button>
        </div>
    </div>

    <div class="toc-scroll-container p-4">
        <div
        class="toc-content"
        id="floating-toc-content"
        style="width: 100%; max-width: 100%;"
        >
        <!-- TOC内容将由JavaScript动态生成 -->
        </div>
    </div>
  </div>
</div>

<style lang="stylus">
.floating-toc-wrapper
	position: relative
	z-index: 999
	overflow: visible

.floating-toc-panel
	position: absolute
	bottom: calc(100% + 1rem)
	right: 0
	transition: all 0.3s ease
	transform: translateY(20px)
	opacity: 0
	pointer-events: none
	overflow: hidden
	box-sizing: border-box
	backdrop-filter: blur(20px)
	-webkit-backdrop-filter: blur(20px)
	z-index: 1001
	
	&.show
		transform: translateY(0)
		opacity: 1
		pointer-events: auto
		
	&.hide
		transform: translateY(20px)
		opacity: 0
		pointer-events: none
		visibility: hidden
		
.toc-scroll-container
	max-height: calc(24rem - 5rem)
	
	@media (max-width: 768px)
		max-height: calc(24rem - 5rem)

/* 移动端隐藏活动指示器 */
@media (max-width: 768px)
	#floating-active-indicator
		display: none

/* 响应式调整 - 仅保留 Panel 尺寸调整 */
@media (max-width: 1024px)
	.floating-toc-panel
		width: calc(100vw - 2rem)
		max-width: 20rem
		max-height: 20rem

@media (max-width: 768px)
	.floating-toc-panel
		width: calc(100vw - 1.5rem)
		max-width: 20rem
		max-height: 28rem
		bottom: calc(100% + 1rem)

/* 暗色主题半透明效果 */
:global(.dark) .floating-toc-panel
	background-color: rgba(0, 0, 0, 0.6) !important
	backdrop-filter: blur(20px)
	-webkit-backdrop-filter: blur(20px)

:global(.dark) .floating-toc-panel .p-4
	background-color: rgba(0, 0, 0, 0.8) !important
</style>

<script>
  import { TOCManager, isPostPage } from "@/utils/tocUtils";

  // 从 data 属性读取配置
  const wrapper = document.querySelector('.floating-toc-wrapper');
  const isSidebarTocEnabled = wrapper?.getAttribute('data-is-sidebar-toc-enabled') === 'true';

  if (typeof window.FloatingTOC === "undefined") {
    window.FloatingTOC = {
      btn: null,
      panel: null,
      manager: null,
      isPostPage: isPostPage // 使用导入的工具函数
    };
  }

  // 切换 TOC 面板
  window.toggleFloatingTOC = function () {
    const panel = window.FloatingTOC.panel;
    if (!panel) return;

    const isHidden = panel.classList.contains("hide");
    if (isHidden) {
      panel.classList.remove("hide");
      panel.classList.add("show");
    } else {
      panel.classList.remove("show");
      panel.classList.add("hide");
    }
  };

  // 关闭 TOC 面板
  function closeTOC() {
    const panel = window.FloatingTOC.panel;
    if (panel && !panel.classList.contains("hide")) {
      panel.classList.add("hide");
      panel.classList.remove("show");
    }
  }

  // 设置自动关闭功能
  function setupAutoClose() {
    // 监听页面卸载和隐藏
    window.addEventListener("beforeunload", closeTOC);
    window.addEventListener("pagehide", closeTOC);
    window.addEventListener("popstate", closeTOC);
    
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) closeTOC();
    });

    // 监听 Astro 页面切换
    document.addEventListener("astro:page-load", closeTOC);
    document.addEventListener("astro:before-preparation", closeTOC);

    // 监听 hashchange（排除TOC内部导航）
    window.addEventListener("hashchange", () => {
      if (!window.tocInternalNavigation) {
        closeTOC();
      }
      window.tocInternalNavigation = false;
    });

    // 监听外部链接点击
    document.addEventListener("click", (e) => {
      const target = e.target as Element | null;
      const link = target?.closest("a");
      if (!link || !link.href) return;

      const href = link.getAttribute("href");
      const isExternalLink = href && !href.startsWith("#") && !href.startsWith("javascript:");
      
      if (isExternalLink && !window.tocInternalNavigation) {
        const tocPanel = document.getElementById("floating-toc-panel");
        if (!tocPanel || !tocPanel.contains(link)) {
          closeTOC();
        }
      }
    });

    // 拦截 history API
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    history.pushState = function (...args) {
      closeTOC();
      return originalPushState.apply(this, args);
    };

    history.replaceState = function (...args) {
      closeTOC();
      return originalReplaceState.apply(this, args);
    };
  }

  // 检查是否应该显示悬浮目录
  function shouldShowFloatingTOC() {
    // 检查是否为文章页面
    if (!window.FloatingTOC.isPostPage()) {
      return false;
    }

    const wrapper = document.querySelector('.floating-toc-wrapper');
    const sidebarPosition = wrapper?.getAttribute('data-sidebar-position') || 'left';
    const showRightSidebarOnPost = wrapper?.getAttribute('data-show-right-sidebar-on-post') === 'true';

    // 双侧边栏模式或单侧边栏但在文章页启用了右侧边栏
    const effectiveIsBothSidebars = sidebarPosition === 'both' || (sidebarPosition === 'left' && showRightSidebarOnPost);

    if (effectiveIsBothSidebars) {
      // 在有效的双侧边栏时，小屏幕或侧边栏目录未启用时显示悬浮目录
      const isSmallScreen = window.innerWidth < 1280;
      return isSmallScreen || !isSidebarTocEnabled;
    }

    // 单侧边栏模式（且未启用showRightSidebarOnPostPage）时，始终显示悬浮目录
    return true;
  }

  // 更新悬浮目录的显示状态
  function updateFloatingTOCVisibility() {
    const btn = window.FloatingTOC.btn;
    if (!btn) return;

    if (shouldShowFloatingTOC()) {
      btn.classList.remove("hide");
    } else {
      btn.classList.add("hide");
      // 同时关闭面板
      closeTOC();
    }
  }

  // 初始化 FloatingTOC
  async function initFloatingTOC() {
    window.FloatingTOC.btn = document.getElementById("floating-toc-btn");
    window.FloatingTOC.panel = document.getElementById("floating-toc-panel");

    if (!window.FloatingTOC.btn || !window.FloatingTOC.panel) {
      return;
    }

    // 更新显示状态
    updateFloatingTOCVisibility();

    try {
      // 清理旧实例
      if (window.FloatingTOC.manager) {
        window.FloatingTOC.manager.cleanup();
      }

      // 创建新实例
      window.FloatingTOC.manager = new TOCManager({
        contentId: "floating-toc-content",
        indicatorId: "floating-active-indicator",
        maxLevel: 3,
        scrollOffset: 80,
      });

      // 初始化
      window.FloatingTOC.manager.init();

      // 设置点击事件 - 标记为 TOC 内部导航
      const tocContent = document.getElementById("floating-toc-content");
      if (tocContent) {
        tocContent.addEventListener("click", (e) => {
          const target = e.target as Element | null;
          const anchor = target?.closest('a[href^="#"]');
          if (anchor) {
            window.tocInternalNavigation = true;
          }
        }, { capture: true });
      }

      // 设置自动关闭
      setupAutoClose();
    } catch (error) {
      console.error("Failed to load TOCManager:", error);
    }
  }

  // 初始化
  initFloatingTOC();

  // 监听页面切换事件
  if (typeof window !== "undefined" && !window.floatingTOCListenersInitialized) {
    window.floatingTOCListenersInitialized = true;

    // Swup 路由切换
    document.addEventListener("swup:contentReplaced", () => {
      setTimeout(initFloatingTOC, 100);
    });
    
    // Astro 页面切换事件
    document.addEventListener("astro:page-load", () => {
      setTimeout(initFloatingTOC, 100);
    });
    
    // 浏览器导航事件
    window.addEventListener("popstate", () => {
      setTimeout(initFloatingTOC, 200);
    });

    // 监听布局模式切换（通过自定义事件）
    window.addEventListener('layoutChange', () => {
      updateFloatingTOCVisibility();
    });

    // 监听窗口大小变化
    let resizeTimeout: ReturnType<typeof setTimeout>;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        updateFloatingTOCVisibility();
      }, 300);
    });
  }
</script>