@maple-design/cli-vue 0.0.0-stage → 1.1.0

package/site/pc/components/AppMobile.spec.ts

@@ -0,0 +1,204 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import AppMobile from './AppMobile.vue'
+
+vi.mock('@maple-design/cli-vue/client', () => ({ getMobileIndex: () => '/mobile.html' }))
+
+beforeEach(() => localStorage.clear())
+afterEach(() => {
+  localStorage.clear()
+  vi.restoreAllMocks()
+})
+
+describe('PC site mobile preview', () => {
+  it('loads the selected component demo in the iframe', async () => {
+    const wrapper = mount(AppMobile, {
+      props: { componentName: 'button', language: 'zh-CN', replace: 'button', hash: '' },
+    })
+
+    expect(wrapper.find('iframe').attributes('src')).toBe(
+      '/mobile.html#/button?language=zh-CN&platform=pc&replace=button',
+    )
+
+    await wrapper.setProps({ componentName: 'input', replace: 'input' })
+    expect(wrapper.find('iframe').attributes('src')).toBe(
+      '/mobile.html#/input?language=zh-CN&platform=pc&replace=input',
+    )
+    expect(new URL(wrapper.find('iframe').attributes('src')!, 'http://localhost:8080/guide/why/').pathname).toBe(
+      '/mobile.html',
+    )
+    await wrapper.setProps({
+      componentName: 'zh-CN/practiceDetail',
+      query: { project: 'P-1007', state: '500', language: 'en-US' },
+    })
+    const url = wrapper.find('iframe').attributes('src')!
+    expect(url).toContain('project=P-1007')
+    expect(url).toContain('state=500')
+    expect(url).toContain('language=zh-CN')
+    expect(url).not.toContain('language=en-US')
+  })
+})
+
+it('switches to the document outline without remounting the mobile preview', async () => {
+  const root = document.createElement('main')
+  root.innerHTML =
+    '<article class="maple-site-doc"><h2>案例</h2><h3 id="basic"><a>#</a>基础用法</h3><div class="loca-doc-preview__example"><h3>Demo content</h3></div></article>'
+  document.body.append(root)
+  const wrapper = mount(AppMobile, {
+    attachTo: document.body,
+    props: { docRoot: root, pageKey: '/button', language: 'zh-CN' },
+  })
+  const iframe = wrapper.get('iframe').element
+  const buttons = wrapper.findAll('.maple-site-mobile-toolbar button')
+  await buttons[1].trigger('click')
+  expect(buttons[1].attributes('aria-pressed')).toBe('true')
+  expect(wrapper.get('.maple-site-mobile-content').isVisible()).toBe(false)
+  const links = wrapper.findAll('.maple-site-outline__link')
+  expect(links.map((link) => link.text())).toEqual(['案例', '基础用法'])
+  await links[1].trigger('click')
+  expect(wrapper.emitted('navigate')).toEqual([['basic']])
+  await buttons[0].trigger('click')
+  expect(wrapper.get('iframe').element).toBe(iframe)
+  expect(wrapper.get('.maple-site-mobile-content').isVisible()).toBe(true)
+
+  root.innerHTML = '<article class="maple-site-doc"><h3 id="async">Async section</h3></article>'
+  await vi.waitFor(() =>
+    expect(wrapper.findAll('.maple-site-outline__link').map((link) => link.text())).toEqual(['Async section']),
+  )
+  await wrapper.setProps({ language: 'en-US', pageKey: '/input' })
+  expect(buttons[1].text()).toBe('On this page')
+  wrapper.unmount()
+  root.remove()
+})
+
+it.each(['preview', 'outline'] as const)(
+  'remembers %s mode across component changes and page reloads',
+  async (mode) => {
+    const wrapper = mount(AppMobile, { props: { componentName: 'button' } })
+    // Select the opposite mode first to verify saving both directions.
+    const index = mode === 'preview' ? 0 : 1
+    await wrapper.findAll('.maple-site-mobile-toolbar button')[1 - index].trigger('click')
+    await wrapper.findAll('.maple-site-mobile-toolbar button')[index].trigger('click')
+    await wrapper.setProps({ componentName: 'input', pageKey: '/input' })
+    expect(wrapper.findAll('.maple-site-mobile-toolbar button')[index].attributes('aria-pressed')).toBe('true')
+    expect(localStorage.getItem('MAPLE_UI_DOC_PANEL_MODE')).toBe(mode)
+    wrapper.unmount()
+
+    const reloaded = mount(AppMobile, { props: { componentName: 'select' } })
+    expect(reloaded.findAll('.maple-site-mobile-toolbar button')[index].attributes('aria-pressed')).toBe('true')
+    reloaded.unmount()
+  },
+)
+
+it('still switches when browser storage is unavailable', async () => {
+  vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+    throw new Error('Storage blocked')
+  })
+  vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+    throw new Error('Storage blocked')
+  })
+  const wrapper = mount(AppMobile)
+  const buttons = wrapper.findAll('.maple-site-mobile-toolbar button')
+  expect(buttons[0].attributes('aria-pressed')).toBe('true')
+  await buttons[1].trigger('click')
+  expect(buttons[1].attributes('aria-pressed')).toBe('true')
+  wrapper.unmount()
+})
+
+it('follows the active heading after the parent reveals the outline with v-show', async () => {
+  const root = document.createElement('main')
+  root.innerHTML = '<article class="maple-site-doc"><h3 id="current">Current section</h3></article>'
+  document.body.append(root)
+  vi.spyOn(root.querySelector('h3')!, 'getBoundingClientRect').mockReturnValue({ top: 100 } as DOMRect)
+  const wrapper = mount(AppMobile, { props: { docRoot: root } })
+  const nav = wrapper.get('.maple-site-outline').element as HTMLElement
+  const link = wrapper.get('.maple-site-outline__link').element
+  const scrollTo = vi.fn()
+  nav.scrollTo = scrollTo
+  vi.spyOn(nav, 'getBoundingClientRect').mockImplementation(
+    () => ({ top: 100, bottom: 300, height: nav.style.display === 'none' ? 0 : 200 }) as DOMRect,
+  )
+  vi.spyOn(link, 'getBoundingClientRect').mockReturnValue({ top: 350, bottom: 380 } as DOMRect)
+  await flushPromises()
+  expect(scrollTo).not.toHaveBeenCalled()
+  await wrapper.findAll('.maple-site-mobile-toolbar button')[1].trigger('click')
+  await flushPromises()
+  expect(scrollTo).toHaveBeenLastCalledWith({ top: 80, behavior: 'smooth' })
+  wrapper.unmount()
+  root.remove()
+})
+
+it('scrolls the existing iframe only when switching back to preview, even when the URL hash has not caught up', async () => {
+  const root = document.createElement('main')
+  root.innerHTML =
+    '<article class="maple-site-doc"><div class="card"><h3>First</h3><div data-mobile-demo="first"></div></div><div class="card"><h3>Second</h3><div data-mobile-demo="second"></div></div></article>'
+  let secondTop = 400
+  vi.spyOn(root.querySelectorAll('h3')[0], 'getBoundingClientRect').mockReturnValue({ top: 100 } as DOMRect)
+  vi.spyOn(root.querySelectorAll('h3')[1], 'getBoundingClientRect').mockImplementation(
+    () => ({ top: secondTop }) as DOMRect,
+  )
+  const wrapper = mount(AppMobile, { attachTo: document.body, props: { docRoot: root, hash: 'first' } })
+  const frame = wrapper.get('iframe').element as HTMLIFrameElement
+  const frameDoc = document.implementation.createHTMLDocument()
+  const scrollTo = vi.fn()
+  Object.defineProperty(frame, 'contentDocument', { value: frameDoc })
+  Object.defineProperty(frame, 'contentWindow', { value: { scrollY: 0, scrollTo } })
+  frameDoc.body.innerHTML =
+    '<header class="mobile-page-header"></header><section data-demo="first"></section><section data-demo="second"></section>'
+  vi.spyOn(frameDoc.querySelector('header')!, 'getBoundingClientRect').mockReturnValue({ height: 48 } as DOMRect)
+  vi.spyOn(frameDoc.querySelector('[data-demo="second"]')!, 'getBoundingClientRect').mockReturnValue({
+    top: 600,
+  } as DOMRect)
+  const buttons = wrapper.findAll('.maple-site-mobile-toolbar button')
+  await buttons[1].trigger('click')
+  secondTop = 100
+  document.dispatchEvent(new Event('scroll'))
+  await flushPromises()
+  expect(scrollTo).not.toHaveBeenCalled()
+  await buttons[0].trigger('click')
+  await flushPromises()
+  expect(scrollTo).toHaveBeenCalledWith({ top: 540, behavior: 'smooth' })
+  expect(wrapper.get('iframe').element).toBe(frame)
+  expect(wrapper.get('iframe').attributes('src')).toContain('#first')
+  scrollTo.mockClear()
+  document.dispatchEvent(new Event('scroll'))
+  await flushPromises()
+  await buttons[0].trigger('click')
+  await flushPromises()
+  expect(scrollTo).not.toHaveBeenCalled()
+  wrapper.unmount()
+})
+
+it('waits for a lazily mounted demo and cancels the switch request when leaving preview', async () => {
+  const root = document.createElement('main')
+  root.innerHTML =
+    '<article class="maple-site-doc"><div class="card"><h3>Late demo</h3><div data-mobile-demo="late"></div></div></article>'
+  vi.spyOn(root.querySelector('h3')!, 'getBoundingClientRect').mockReturnValue({ top: 100 } as DOMRect)
+  const wrapper = mount(AppMobile, { props: { docRoot: root } })
+  const frame = wrapper.get('iframe').element as HTMLIFrameElement
+  const doc = document.implementation.createHTMLDocument()
+  const scrollTo = vi.fn()
+  Object.defineProperty(frame, 'contentDocument', { value: doc })
+  Object.defineProperty(frame, 'contentWindow', { value: { scrollY: 0, scrollTo } })
+  const buttons = wrapper.findAll('.maple-site-mobile-toolbar button')
+  await buttons[1].trigger('click')
+  await buttons[0].trigger('click')
+  await flushPromises()
+  expect(scrollTo).not.toHaveBeenCalled()
+  const demo = doc.createElement('section')
+  demo.dataset.demo = 'late'
+  vi.spyOn(demo, 'getBoundingClientRect').mockReturnValue({ top: 500 } as DOMRect)
+  doc.body.append(demo)
+  await flushPromises()
+  expect(scrollTo).toHaveBeenCalledTimes(1)
+  demo.remove()
+  scrollTo.mockClear()
+  await buttons[1].trigger('click')
+  await buttons[0].trigger('click')
+  await flushPromises()
+  await buttons[1].trigger('click')
+  doc.body.append(demo)
+  await flushPromises()
+  expect(scrollTo).not.toHaveBeenCalled()
+  wrapper.unmount()
+})

package/site/pc/components/AppMobile.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="maple-site-mobile">
+    <div class="maple-site-mobile-toolbar" role="group" :aria-label="language === 'en-US' ? 'Right panel' : '右侧面板'">
+      <button type="button" :aria-pressed="showPreview" @click="showMobilePreview">
+        {{ language === 'en-US' ? 'Mobile preview' : '移动预览' }}
+      </button>
+      <button type="button" :aria-pressed="!showPreview" @click="mode = 'outline'">
+        {{ language === 'en-US' ? 'On this page' : '本页目录' }}
+      </button>
+    </div>
+    <div v-show="showPreview" class="maple-site-mobile-content">
+      <iframe
+        id="mobile"
+        ref="previewFrame"
+        @load="followPendingDemo"
+        :title="language === 'en-US' ? 'Mobile preview' : '移动端预览'"
+        :src="
+          mobilePreviewUrl(getMobileIndex(), componentName || '', language || 'zh-CN', replace || '', hash, query ?? {})
+        "
+      ></iframe>
+    </div>
+    <app-outline
+      v-show="!showPreview"
+      :root="docRoot"
+      :visible="!showPreview"
+      :page-key="pageKey"
+      :language="language"
+      @navigate="emit('navigate', $event)"
+      @active-change="emit('active-change', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { getMobileIndex } from '@maple-design/cli-vue/client'
+import AppOutline from './AppOutline.vue'
+import { mobilePreviewUrl } from './mobile-preview-url'
+import { currentMobileDemo } from './preview-section'
+
+const props = defineProps<{
+  query?: Record<string, unknown>
+  componentName?: string
+  language?: string
+  replace?: string
+  hash?: string
+  docRoot?: HTMLElement | null
+  pageKey?: string
+}>()
+const emit = defineEmits<{ navigate: [id: string]; 'active-change': [id: string] }>()
+const previewFrame = ref<HTMLIFrameElement | null>(null)
+let pendingDemo: string | undefined
+let demoObserver: MutationObserver | undefined
+
+function cancelPendingDemo() {
+  pendingDemo = undefined
+  demoObserver?.disconnect()
+  demoObserver = undefined
+}
+
+function followPendingDemo() {
+  demoObserver?.disconnect()
+  if (!pendingDemo || !showPreview.value) return
+  const frame = previewFrame.value
+  const doc = frame?.contentDocument
+  const view = frame?.contentWindow
+  if (!doc || !view) return
+  const target = Array.from(doc.querySelectorAll<HTMLElement>('[data-demo]')).find(
+    (element) => element.dataset.demo === pendingDemo,
+  )
+  if (target) {
+    const headerHeight = doc.querySelector('.mobile-page-header')?.getBoundingClientRect().height ?? 0
+    view.scrollTo({
+      top: Math.max(0, view.scrollY + target.getBoundingClientRect().top - headerHeight - 12),
+      behavior: 'smooth',
+    })
+    cancelPendingDemo()
+  } else {
+    // The iframe can finish loading before its async Vue route has mounted.
+    demoObserver = new MutationObserver(followPendingDemo)
+    demoObserver.observe(doc, { childList: true, subtree: true })
+  }
+}
+
+async function showMobilePreview() {
+  if (showPreview.value) return
+  const demoId = currentMobileDemo(props.docRoot)
+  mode.value = 'preview'
+  await nextTick()
+  if (!showPreview.value || !demoId) return
+  pendingDemo = decodeURIComponent(demoId)
+  followPendingDemo()
+}
+
+watch(() => [props.pageKey, props.componentName, props.language], cancelPendingDemo)
+onBeforeUnmount(cancelPendingDemo)
+
+const modeStorageKey = 'MAPLE_UI_DOC_PANEL_MODE'
+function savedMode(): 'preview' | 'outline' {
+  try {
+    return localStorage.getItem(modeStorageKey) === 'outline' ? 'outline' : 'preview'
+  } catch {
+    return 'preview'
+  }
+}
+const mode = ref(savedMode())
+watch(
+  mode,
+  (value) => {
+    if (value === 'outline') cancelPendingDemo()
+    try {
+      localStorage.setItem(modeStorageKey, value)
+    } catch {
+      // Keep switching available when browser storage is disabled.
+    }
+  },
+  { flush: 'sync' },
+)
+const showPreview = computed(() => mode.value === 'preview')
+</script>
+
+<style lang="less">
+.maple-site-mobile {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  flex: 0 1 clamp(300px, 27vw, 375px);
+  min-width: 0;
+  top: 80px;
+  height: calc(100vh - 100px);
+  margin-right: clamp(12px, 2.5vw, 38px);
+  overflow: visible;
+  margin-top: 20px;
+
+  &-toolbar {
+    display: flex;
+    flex-shrink: 0;
+    gap: 20px;
+    padding: 8px 16px;
+
+    button {
+      min-height: 36px;
+      padding: 6px 0;
+      border: 0;
+      background: transparent;
+      color: var(--site-config-color-sub-text);
+      font: inherit;
+      font-size: 13px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--site-config-color-text);
+      }
+
+      &[aria-pressed='true'] {
+        color: var(--site-config-color-text);
+        font-weight: 600;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--site-config-color-text);
+        outline-offset: -2px;
+      }
+    }
+  }
+
+  &-content,
+  .maple-site-outline {
+    flex: 1;
+    min-height: 0;
+  }
+
+  &-content {
+    width: 100%;
+    margin-top: 8px;
+    overflow: hidden;
+    border-radius: 2px;
+    background: var(--site-config-color-bar);
+    box-shadow: 0 4px 16px var(--site-config-color-shadow);
+  }
+
+  &-image {
+    width: 100%;
+    pointer-events: none;
+    height: 100%;
+    top: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+</style>

package/site/pc/components/AppOutline.spec.ts

@@ -0,0 +1,89 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, expect, it, vi } from 'vitest'
+import AppOutline from './AppOutline.vue'
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+})
+
+it('debounces document scroll, ignores nested scrollers, and cancels pending work on page change', async () => {
+  vi.useFakeTimers()
+  const root = document.createElement('main')
+  root.innerHTML =
+    '<article class="maple-site-doc"><h3 id="first">First</h3><h3 id="second">Second</h3><div class="demo-scroller"></div></article>'
+  document.body.append(root)
+  let top = 300
+  vi.spyOn(root.querySelector('#first')!, 'getBoundingClientRect').mockImplementation(
+    () => ({ top: top - 200 }) as DOMRect,
+  )
+  vi.spyOn(root.querySelector('#second')!, 'getBoundingClientRect').mockImplementation(() => ({ top }) as DOMRect)
+  const onActiveChange = vi.fn()
+  const wrapper = mount(AppOutline, { props: { root, pageKey: '/button' }, attrs: { onActiveChange } })
+  expect(wrapper.emitted('active-change')).toBeUndefined()
+  top = 100
+  document.dispatchEvent(new Event('scroll'))
+  document.dispatchEvent(new Event('scroll'))
+  await vi.advanceTimersByTimeAsync(149)
+  expect(wrapper.emitted('active-change')).toBeUndefined()
+  await vi.advanceTimersByTimeAsync(1)
+  expect(wrapper.emitted('active-change')).toEqual([['second']])
+  expect(wrapper.get('[aria-current="location"]').text()).toBe('Second')
+
+  root.querySelector('.demo-scroller')!.dispatchEvent(new Event('scroll'))
+  await vi.advanceTimersByTimeAsync(200)
+  expect(wrapper.emitted('active-change')).toHaveLength(1)
+
+  top = 300
+  document.dispatchEvent(new Event('scroll'))
+  await wrapper.setProps({ pageKey: '/input' })
+  await vi.advanceTimersByTimeAsync(200)
+  expect(wrapper.emitted('active-change')).toHaveLength(1)
+  // Back above the first heading clears the section hash.
+  top = 500
+  document.dispatchEvent(new Event('scroll'))
+  await vi.advanceTimersByTimeAsync(150)
+  expect(wrapper.emitted('active-change')?.at(-1)).toEqual([''])
+  document.dispatchEvent(new Event('scroll'))
+  wrapper.unmount()
+  await vi.advanceTimersByTimeAsync(200)
+  expect(onActiveChange).toHaveBeenCalledTimes(2)
+  root.remove()
+})
+
+it('keeps the active link visible without moving the page, and catches up when the outline is shown', async () => {
+  const root = document.createElement('main')
+  root.innerHTML = '<article class="maple-site-doc"><h3 id="section">Section</h3></article>'
+  document.body.append(root)
+  vi.spyOn(root.querySelector('h3')!, 'getBoundingClientRect').mockReturnValue({ top: 100 } as DOMRect)
+  const wrapper = mount(AppOutline, { props: { root, visible: false } })
+  const container = wrapper.get('nav').element as HTMLElement
+  const link = wrapper.get('a').element
+  const scrollTo = vi.fn()
+  container.scrollTo = scrollTo
+  container.scrollTop = 50
+  vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({ top: 100, bottom: 300, height: 200 } as DOMRect)
+  const itemBounds = vi.spyOn(link, 'getBoundingClientRect').mockReturnValue({ top: 310, bottom: 340 } as DOMRect)
+
+  await wrapper.setProps({ visible: true })
+  await wrapper.vm.$nextTick()
+  expect(scrollTo).toHaveBeenLastCalledWith({ top: 90, behavior: 'smooth' })
+  scrollTo.mockClear()
+  itemBounds.mockReturnValue({ top: 80, bottom: 110 } as DOMRect)
+  document.dispatchEvent(new Event('scroll'))
+  await wrapper.vm.$nextTick()
+  expect(scrollTo).toHaveBeenLastCalledWith({ top: 30, behavior: 'smooth' })
+
+  scrollTo.mockClear()
+  itemBounds.mockReturnValue({ top: 150, bottom: 180 } as DOMRect)
+  document.dispatchEvent(new Event('scroll'))
+  await wrapper.vm.$nextTick()
+  expect(scrollTo).not.toHaveBeenCalled()
+  await wrapper.setProps({ visible: false })
+  itemBounds.mockReturnValue({ top: 310, bottom: 340 } as DOMRect)
+  document.dispatchEvent(new Event('scroll'))
+  await wrapper.vm.$nextTick()
+  expect(scrollTo).not.toHaveBeenCalled()
+  wrapper.unmount()
+  root.remove()
+})

package/site/pc/components/AppOutline.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{ root?: HTMLElement | null; language?: string; pageKey?: string; visible?: boolean }>(),
+  { visible: true },
+)
+const emit = defineEmits<{ navigate: [id: string]; 'active-change': [id: string] }>()
+const headings = ref<{ id: string; title: string; level: number; element: HTMLElement }[]>([])
+const activeId = ref('')
+const outline = ref<HTMLElement | null>(null)
+let observer: MutationObserver | undefined
+let scrollTimer: ReturnType<typeof setTimeout> | undefined
+
+function updateActive() {
+  let active: (typeof headings.value)[number] | undefined
+  for (const heading of headings.value) {
+    if (heading.element.getBoundingClientRect().top > 120) break
+    active = heading
+  }
+  activeId.value = active?.id ?? headings.value[0]?.id ?? ''
+  return active?.id ?? ''
+}
+
+function followActive() {
+  const container = outline.value
+  if (!props.visible || !container) return
+  const link = container.querySelector<HTMLElement>('[aria-current="location"]')
+  if (!link) return
+  const bounds = container.getBoundingClientRect()
+  if (!bounds.height) return
+  const item = link.getBoundingClientRect()
+  if (item.top < bounds.top) {
+    container.scrollTo({ top: container.scrollTop + item.top - bounds.top, behavior: 'smooth' })
+  } else if (item.bottom > bounds.bottom) {
+    container.scrollTo({ top: container.scrollTop + item.bottom - bounds.bottom, behavior: 'smooth' })
+  }
+}
+
+watch([activeId, () => props.visible, () => props.pageKey], () => nextTick(followActive), { flush: 'post' })
+
+function onScroll(event: Event) {
+  // Ignore independent demo, sidebar and outline scrolling.
+  if (event.target !== document && event.target !== props.root) return
+  updateActive()
+  nextTick(followActive)
+  clearTimeout(scrollTimer)
+  scrollTimer = setTimeout(() => emit('active-change', updateActive()), 150)
+}
+
+function collect() {
+  const elements = props.root?.querySelectorAll<HTMLElement>('.maple-site-doc h2, .maple-site-doc h3') ?? []
+  headings.value = Array.from(elements)
+    .filter((element) => !element.closest('.loca-doc-preview__example, details'))
+    .map((element, index) => {
+      if (!element.id) {
+        let id = `maple-doc-section-${index}`
+        while (document.getElementById(id)) id += '-section'
+        element.id = id
+      }
+      const label = element.cloneNode(true) as HTMLElement
+      label.querySelectorAll('a').forEach((link) => {
+        if (link.textContent?.trim() === '#') link.remove()
+      })
+      return {
+        id: element.id,
+        title: label.textContent?.trim() ?? '',
+        level: Number(element.tagName.slice(1)),
+        element,
+      }
+    })
+    .filter((heading) => heading.title)
+  updateActive()
+}
+
+watch(
+  () => [props.root, props.pageKey],
+  () => {
+    observer?.disconnect()
+    clearTimeout(scrollTimer)
+    collect()
+    if (props.root) {
+      observer = new MutationObserver(collect)
+      observer.observe(props.root, { childList: true, subtree: true, characterData: true })
+    }
+  },
+  { immediate: true, flush: 'post' },
+)
+
+// Capture also covers a document container that scrolls independently of the window.
+document.addEventListener('scroll', onScroll, { capture: true, passive: true })
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  clearTimeout(scrollTimer)
+  document.removeEventListener('scroll', onScroll, true)
+})
+</script>
+
+<template>
+  <nav ref="outline" class="maple-site-outline" :aria-label="language === 'en-US' ? 'On this page' : '本页目录'">
+    <a
+      v-for="heading in headings"
+      :key="heading.id"
+      :href="`#${heading.id}`"
+      class="maple-site-outline__link"
+      :class="{ 'maple-site-outline__link--nested': heading.level === 3 }"
+      :aria-current="activeId === heading.id ? 'location' : undefined"
+      @click.prevent="emit('navigate', heading.id)"
+      >{{ heading.title }}</a
+    >
+    <p v-if="!headings.length" class="maple-site-outline__empty">
+      {{ language === 'en-US' ? 'No headings on this page' : '本页暂无目录' }}
+    </p>
+  </nav>
+</template>
+
+<style lang="less">
+.maple-site-outline {
+  padding: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--site-config-color-border) transparent;
+
+  &__link {
+    display: block;
+    padding: 3px 12px;
+    border-left: 2px solid var(--site-config-color-border);
+    color: var(--site-config-color-sub-text);
+    font-size: 14px;
+    line-height: 1.7rem;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+
+    &--nested {
+      padding-left: 20px;
+      font-size: 13px;
+    }
+
+    &:hover {
+      color: var(--mp-sys-color-content-brand, var(--site-config-color-text));
+    }
+
+    &[aria-current='location'] {
+      color: var(--mp-sys-color-content-brand, var(--site-config-color-text));
+      border-left-color: currentColor;
+      font-weight: 600;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--site-config-color-text);
+      outline-offset: -2px;
+    }
+  }
+
+  &__empty {
+    color: var(--site-config-color-sub-text);
+    font-size: 14px;
+  }
+}
+</style>