fix(toc): fix headers is empty in toc

- Set `headers: true` in markdown config
- Refactor `useToc` to fit new apis

Related Issue: #1879

Author: fu050409

packages/devui-vue/docs/.vitepress/config.mts

@@ -11,6 +11,7 @@ export default defineConfig({
 
   head,
   markdown: {
+    headers: true,
     config: (md) => {
       md.use(demoblockPlugin as any);
     },

packages/devui-vue/docs/.vitepress/devui-theme/composables/activeBar.ts

@@ -47,7 +47,7 @@ export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<H
   let prevActiveLink: HTMLAnchorElement | null = null;
 
   function activateLink(hash: string) {
-    prevActiveLink && deactiveLink(prevActiveLink);
+    prevActiveLink && deactivateLink(prevActiveLink);
 
     const activeLink = (prevActiveLink =
       hash == null
@@ -64,7 +64,7 @@ export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<H
       }
   }
 
-  function deactiveLink(link: HTMLElement) {
+  function deactivateLink(link: HTMLElement) {
     link && link.classList.remove('active');
   }
 

packages/devui-vue/docs/.vitepress/devui-theme/composables/useToc.ts

@@ -1,59 +1,39 @@
-import { computed } from 'vue'
-import { useData } from 'vitepress'
-import { joinUrl } from '../utils'
+import { computed } from 'vue';
+import { useData } from 'vitepress';
 
-import type { PageData } from 'vitepress'
+import type { PageData, Header } from 'vitepress';
 
-type EnhanceArrayElement<T, P> = T extends Array<infer U> ? (U & P)[] : never
+type EnhanceArrayElement<T, P> = T extends Array<infer U> ? (U & P)[] : never;
 
 type Headers = EnhanceArrayElement<
   PageData['headers'],
   {
-    children?: Headers
+    children?: Headers;
   }
->
+>;
 
 export const useToc = () => {
-  const { page } = useData()
-
-  return computed(() => resolveHeaders(page.value.headers))
-}
-
-export const resolveLink = (base: string, path: string) => {
-  if (path === undefined) {
-    return path
-  }
-  // keep relative hash to the same page
-  if (path.startsWith('#')) {
-    return path
-  }
-  return joinUrl(base, path)
-}
-
-export const resolveHeaders = (headers: PageData['headers']) => {
-  if (!headers) return;
-
-  return mapHeaders(groupHeaders(headers))
-}
-
-export function groupHeaders(headers: PageData['headers']) {
-  headers = headers.map((h) => Object.assign({}, h))
-  let lastH2
-
-  headers.forEach((h) => {
-    if (h.level === 3) {
-      lastH2 = h
-    } else if (lastH2) {
-      ;(lastH2.children || (lastH2.children = [])).push(h)
-    }
-  })
-  return headers.filter((h) => h.level === 3)
-}
-
-export function mapHeaders(headers: Headers) {
-  return headers.map((header) => ({
+  const { page } = useData();
+
+  return computed(() => resolveHeaders(page.value.headers));
+};
+
+export const resolveHeaders = (_headers: PageData['headers']) => {
+  if (!_headers) return;
+
+  let headers = Array<Header>();
+  _headers.forEach((h: Header) => {
+    console.log(h, h.level);
+    if (h.level === 2) {
+      headers.push(h);
+      h.children.forEach((h: Header) => {
+        if (h.level === 3) headers.push(h);
+      });
+    } else if (h.level === 3) headers.push(h);
+  });
+  return headers.map((header: Header) => ({
     text: header.title,
     link: `#${header.slug}`,
-    children: header.children ? mapHeaders(header.children) : undefined,
-  }))
-}
+    children: undefined,
+  }));
+};