fix: 修复左侧 toc 显示问题

Author: sty20030818

src/components/widgets/card-toc/CardTOC.astro

@@ -28,8 +28,10 @@ const { class: className, style } = Astro.props;
 	class={"group " + (className || "")}
 	style={style}
 >
-	<div class="toc-scroll-container">
-		<div class="toc-content" id="card-toc-content"></div>
+	<div data-card-toc-root>
+		<div class="toc-scroll-container">
+			<div class="toc-content" data-card-toc-content></div>
+		</div>
 	</div>
 </WidgetLayout>
 
@@ -51,76 +53,86 @@ const { class: className, style } = Astro.props;
 <script>
 	import { TOCManager } from "@/utils/tocManager";
 
-	if (typeof window.CardTOC === "undefined") {
-		window.CardTOC = {
-			manager: null,
-		};
-	}
+	const cardTocManagers = new WeakMap();
 
-	async function initCardTOC() {
-		const tocContent = document.getElementById("card-toc-content");
-		if (!tocContent) {
+	/**
+	 * 为单个 card-toc 实例初始化目录。
+	 * 目录绑定当前组件自己的内容容器，避免左侧多断点并存时命中隐藏实例。
+	 */
+	function initCardTOC(root) {
+		if (!(root instanceof HTMLElement)) {
 			return;
 		}
 
-		try {
-			// Ensure window.CardTOC is initialized
-			if (!window.CardTOC) {
-				window.CardTOC = { manager: null };
-			}
+		const tocContent = root.querySelector("[data-card-toc-content]");
+		if (!(tocContent instanceof HTMLElement)) {
+			return;
+		}
 
-			// Cleanup existing manager if present
-			const existingManager = window.CardTOC.manager;
-			if (existingManager && existingManager.cleanup) {
+		try {
+			const existingManager = cardTocManagers.get(root);
+			if (
+				existingManager &&
+				typeof existingManager.cleanup === "function"
+			) {
 				existingManager.cleanup();
 			}
 
-			// Create new manager
 			const manager = new TOCManager({
-				contentId: "card-toc-content",
-				indicatorId: "card-active-indicator",
+				contentElement: tocContent,
 				maxLevel: 3,
 				scrollOffset: 80,
 			});
 
-			window.CardTOC.manager = manager;
+			cardTocManagers.set(root, manager);
 			manager.init();
 		} catch (error) {
-			console.error("Failed to load TOCManager for CardTOC:", error);
+			if (typeof reportError === "function" && error instanceof Error) {
+				reportError(error);
+			}
 		}
 	}
 
+	/**
+	 * 页面内可能同时存在多个 card-toc 实例。
+	 * 统一批量初始化，确保可见和隐藏实例都各自绑定正确容器。
+	 */
+	function initAllCardTOCs() {
+		document.querySelectorAll("[data-card-toc-root]").forEach((root) => {
+			initCardTOC(root);
+		});
+	}
+
 	if (document.readyState === "loading") {
-		document.addEventListener("DOMContentLoaded", initCardTOC);
+		document.addEventListener("DOMContentLoaded", initAllCardTOCs);
 	} else {
-		initCardTOC();
+		initAllCardTOCs();
 	}
 
 	document.addEventListener("swup:contentReplaced", () => {
-		setTimeout(initCardTOC, 100);
+		setTimeout(initAllCardTOCs, 100);
 	});
 
 	document.addEventListener("astro:page-load", () => {
-		setTimeout(initCardTOC, 100);
+		setTimeout(initAllCardTOCs, 100);
 	});
 
 	document.addEventListener("astro:after-swap", () => {
-		setTimeout(initCardTOC, 100);
+		setTimeout(initAllCardTOCs, 100);
 	});
 
 	window.addEventListener("popstate", () => {
-		setTimeout(initCardTOC, 200);
+		setTimeout(initAllCardTOCs, 200);
 	});
 
 	window.addEventListener("hashchange", () => {
 		if (!window.tocInternalNavigation) {
-			setTimeout(initCardTOC, 100);
+			setTimeout(initAllCardTOCs, 100);
 		}
 		window.tocInternalNavigation = false;
 	});
 
 	document.addEventListener("password:decrypted", () => {
-		setTimeout(initCardTOC, 200);
+		setTimeout(initAllCardTOCs, 200);
 	});
 </script>
-

src/utils/tocManager.ts

@@ -8,8 +8,8 @@ import I18nKey from "../i18n/i18nKey";
 import { i18n } from "../i18n/translation";
 
 export interface TOCConfig {
-	contentId: string;
-	indicatorId: string;
+	contentId?: string;
+	contentElement?: HTMLElement;
 	maxLevel?: number;
 	scrollOffset?: number;
 }
@@ -20,17 +20,43 @@ export class TOCManager {
 	private minDepth = 10;
 	private maxLevel: number;
 	private scrollTimeout: number | null = null;
-	private contentId: string;
-	private indicatorId: string;
+	private contentId: string | null;
+	private contentElement: HTMLElement | null;
 	private scrollOffset: number;
 
 	constructor(config: TOCConfig) {
-		this.contentId = config.contentId;
-		this.indicatorId = config.indicatorId;
+		this.contentId = config.contentId ?? null;
+		this.contentElement = config.contentElement ?? null;
 		this.maxLevel = config.maxLevel || 3;
 		this.scrollOffset = config.scrollOffset || 80;
 	}
 
+	/**
+	 * 获取当前实例绑定的 TOC 容器。
+	 * 优先使用实例级元素引用，避免多实例时因为重复 id 命中错误节点。
+	 */
+	private getTOCContentElement(): HTMLElement | null {
+		if (this.contentElement) {
+			return this.contentElement;
+		}
+
+		if (!this.contentId) {
+			return null;
+		}
+
+		return document.getElementById(this.contentId);
+	}
+
+	/**
+	 * 获取当前实例内部的活动指示器。
+	 * 指示器限定在当前内容容器内查询，避免多个目录组件互相污染。
+	 */
+	private getIndicatorElement(): HTMLElement | null {
+		return this.getTOCContentElement()?.querySelector(
+			"[data-card-toc-indicator]",
+		) as HTMLElement | null;
+	}
+
 	private getContentContainer(): Element | null {
 		return (
 			document.querySelector(".custom-md") ||
@@ -177,19 +203,20 @@ export class TOCManager {
       `;
 		});
 
-		tocHTML += `<div id="${this.indicatorId}" style="opacity: 0;" class="toc-active-indicator"></div>`;
+		tocHTML +=
+			'<div data-card-toc-indicator style="opacity: 0;" class="toc-active-indicator"></div>';
 
 		return tocHTML;
 	}
 
 	public updateTOCContent(): void {
-		const tocContent = document.getElementById(this.contentId);
-		if (!tocContent) {return;}
+		const tocContent = this.getTOCContentElement();
+		if (!tocContent) {
+			return;
+		}
 
 		tocContent.innerHTML = this.generateTOCHTML();
-		this.tocItems = Array.from(
-			document.querySelectorAll(`#${this.contentId} a`),
-		);
+		this.tocItems = Array.from(tocContent.querySelectorAll("a"));
 	}
 
 	private getVisibleHeadingIds(): string[] {
@@ -233,7 +260,9 @@ export class TOCManager {
 	}
 
 	public updateActiveState(): void {
-		if (!this.tocItems || this.tocItems.length === 0) {return;}
+		if (!this.tocItems || this.tocItems.length === 0) {
+			return;
+		}
 
 		this.tocItems.forEach((item) => {
 			item.classList.remove("visible");
@@ -254,16 +283,20 @@ export class TOCManager {
 	}
 
 	private updateActiveIndicator(activeItems: HTMLElement[]): void {
-		const indicator = document.getElementById(this.indicatorId);
-		if (!indicator || !this.tocItems.length) {return;}
+		const indicator = this.getIndicatorElement();
+		if (!indicator || !this.tocItems.length) {
+			return;
+		}
 
 		if (activeItems.length === 0) {
 			indicator.style.opacity = "0";
 			return;
 		}
 
-		const tocContent = document.getElementById(this.contentId);
-		if (!tocContent) {return;}
+		const tocContent = this.getTOCContentElement();
+		if (!tocContent) {
+			return;
+		}
 
 		const contentRect = tocContent.getBoundingClientRect();
 		const firstActive = activeItems[0];
@@ -285,12 +318,14 @@ export class TOCManager {
 	}
 
 	private scrollToActiveItem(activeItem: HTMLElement): void {
-		if (!activeItem) {return;}
+		if (!activeItem) {
+			return;
+		}
 
-		const tocContainer = document
-			.querySelector(`#${this.contentId}`)
-			?.closest(".toc-scroll-container");
-		if (!tocContainer) {return;}
+		const tocContainer = activeItem.closest(".toc-scroll-container");
+		if (!tocContainer) {
+			return;
+		}
 
 		if (this.scrollTimeout) {
 			clearTimeout(this.scrollTimeout);