fix: slugging

src/App.tsx

@@ -43,7 +43,7 @@ const App: Component = () => {
         </div>
       </header>
       <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 2xl:ml-auto flex justify-center items-center">
-        <Article class="prose-sm max-w-none flex-1" src={currentPath()} />
+        <Article class="prose-sm max-w-full xl:max-w-none flex-1" src={currentPath()} />
       </main>
     </div>
   );

src/components/FileTree.tsx

@@ -81,7 +81,7 @@ export const HeadingNode: Component<{
   depth: number;
 }> = (props) => {
   const navigate = useNavigate();
-  const anchor = props.node.title.toLowerCase().replace(/\s+/g, "-");
+  const anchor = props.node.id || "";
   const href = `${props.basePath}#${anchor}`;
 
   const handleClick = (e: MouseEvent) => {

src/data-loader/toc.ts

@@ -1,8 +1,11 @@
+import Slugger from "github-slugger";
+
 /**
  * 目录树节点
  */
 export interface TocNode {
   title: string;
+  id?: string;
   path?: string;
   level: number;
   children?: TocNode[];
@@ -24,6 +27,7 @@ export function extractHeadings(content: string): TocNode[] {
   const headings: TocNode[] = [];
   const lines = content.split("\n");
   const stack: { node: TocNode; level: number }[] = [];
+  const slugger = new Slugger();
 
   for (const line of lines) {
     const match = line.match(/^(#{1,6})\s+(.+)$/);
@@ -31,7 +35,9 @@ export function extractHeadings(content: string): TocNode[] {
 
     const level = match[1].length;
     const title = match[2].trim();
-    const node: TocNode = { title, level };
+    // 使用 github-slugger 生成 ID，与 marked-gfm-heading-id 保持一致
+    const id = slugger.slug(title.toLowerCase());
+    const node: TocNode = { title, id, level };
 
     // 找到合适的父节点
     while (stack.length > 0 && stack[stack.length - 1].level >= level) {