@wsxjs/wsx-press 0.0.25 → 0.0.27

package/src/client/components/DocTOC.wsx

@@ -135,7 +135,8 @@ export default class DocTOC extends LightComponent {
     }
 
     /**
-     * 为文档中的标题元素设置 ID
+     * 收集文档中的标题元素（使用已有的 ID）
+     * 注意：不再重新设置 ID，而是使用 Heading 组件已经设置好的 ID
      */
     private setupHeadingIds(): void {
         const docContent = document.querySelector(".doc-content");
@@ -143,36 +144,52 @@ export default class DocTOC extends LightComponent {
             return;
         }
 
-        // 查找所有标题元素（包括 wsx-marked-heading 和标准 h1-h6）
-        const headings = docContent.querySelectorAll("h1, h2, h3, h4, h5, h6, wsx-marked-heading");
         this.headingElements.clear();
 
-        headings.forEach((heading) => {
-            // 获取标题文本
-            const text = heading.textContent?.trim() || "";
-            if (!text) return;
-
-            // 生成 ID
-            const id = this.generateId(text);
+        // 查找 wsx-marked-heading 组件内的标题元素（它们已经有正确的 ID）
+        const markedHeadings = docContent.querySelectorAll("wsx-marked-heading");
+        markedHeadings.forEach((wrapper) => {
+            // 获取内部的 h1-h6 元素（Heading 组件渲染的带 ID 的元素）
+            const heading = wrapper.querySelector("h1, h2, h3, h4, h5, h6");
+            if (heading instanceof HTMLElement && heading.id) {
+                this.headingElements.set(heading.id, heading);
+            }
+        });
 
-            // 设置 ID
+        // 也支持直接的 h1-h6 元素（非 wsx-marked-heading 的情况）
+        const directHeadings = docContent.querySelectorAll(
+            ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5, :scope > h6"
+        );
+        directHeadings.forEach((heading) => {
             if (heading instanceof HTMLElement) {
-                heading.id = id;
-                this.headingElements.set(id, heading);
+                // 如果已经有 ID，直接使用
+                if (heading.id) {
+                    this.headingElements.set(heading.id, heading);
+                } else {
+                    // 否则生成 ID 并设置
+                    const text = heading.textContent?.trim() || "";
+                    if (text) {
+                        const id = this.generateId(text);
+                        heading.id = id;
+                        this.headingElements.set(id, heading);
+                    }
+                }
             }
         });
     }
 
     /**
      * 生成锚点 ID
+     * 必须与服务端 toc.ts 和 marked-utils.ts 中的 generateId 保持一致
+     * 保留中文等 Unicode 字符，只移除特殊符号
      */
     private generateId(text: string): string {
         return text
             .toLowerCase()
-            .replace(/[^\w\s-]/g, "")
-            .replace(/\s+/g, "-")
-            .replace(/-+/g, "-")
-            .trim();
+            .replace(/\s+/g, "-") // 空格转连字符
+            .replace(/[^\p{L}\p{N}-]/gu, "") // 保留字母、数字、连字符（Unicode-aware）
+            .replace(/-+/g, "-") // 合并多个连字符
+            .replace(/^-+|-+$/g, ""); // 移除首尾连字符
     }
 
     /**
@@ -214,11 +231,21 @@ export default class DocTOC extends LightComponent {
      */
     private handleTOCClick = (id: string, e: Event): void => {
         e.preventDefault();
-        const element = this.headingElements.get(id);
+        // 优先从缓存中获取，如果没有则通过 DOM 查找
+        let element = this.headingElements.get(id);
+        if (!element) {
+            element = document.getElementById(id) as HTMLElement | null;
+            if (element) {
+                // 缓存找到的元素
+                this.headingElements.set(id, element);
+            }
+        }
         if (element) {
             element.scrollIntoView({ behavior: "smooth", block: "start" });
             // 更新 URL hash（不触发滚动）
             window.history.replaceState(null, "", `#${id}`);
+        } else {
+            logger.warn(`Heading element not found for id: ${id}`);
         }
     };
 

package/src/node/toc.ts

@@ -64,7 +64,7 @@ export function extractTOCFromMarkdown(markdown: string): TOCItem[] {
 
                 const item: TOCItem = {
                     level,
-                    text,
+                    text: text.trim(),
                     id,
                     children: [],
                 };
@@ -112,14 +112,15 @@ function extractTextFromTokens(tokens: Token[]): string {
 
 /**
  * 生成锚点 ID
+ * 保留中文等 Unicode 字符，只移除特殊符号
  */
 function generateId(text: string): string {
     return text
         .toLowerCase()
-        .replace(/[^\w\s-]/g, "")
-        .replace(/\s+/g, "-")
-        .replace(/-+/g, "-")
-        .trim();
+        .replace(/\s+/g, "-") // 空格转连字符
+        .replace(/[^\p{L}\p{N}-]/gu, "") // 保留字母、数字、连字符（Unicode-aware）
+        .replace(/-+/g, "-") // 合并多个连字符
+        .replace(/^-+|-+$/g, ""); // 移除首尾连字符
 }
 
 /**