From 67f7b0e0c60969aaa5adcb17ef6c04a5bd593b5f Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 10 Jul 2024 00:54:53 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/VPDoc.vue         | 15 ++++-----
 .../client/components/VPDocAsideOutline.vue   | 11 ++-----
 theme/src/client/components/VPLocalNav.vue    | 11 ++-----
 theme/src/client/composables/outline.ts       | 31 +++++++++++++++++--
 theme/src/client/config.ts                    |  2 ++
 5 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index a4b7715f..13142d0b 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -9,23 +9,20 @@ import VPDocMeta from '@theme/VPDocMeta.vue'
 import { useEncrypt } from '../composables/encrypt.js'
 import { useSidebar } from '../composables/sidebar.js'
 import { useData } from '../composables/data.js'
+import { useHeaders } from '../composables/outline.js'
 
 const { page, theme, frontmatter, isDark } = useData()
 const route = useRoute()
 
 const { hasSidebar, hasAside, leftAside } = useSidebar()
+const headers = useHeaders()
 const { isPageDecrypted } = useEncrypt()
 
 const hasComments = computed(() => {
   return page.value.frontmatter.comments !== false && isPageDecrypted.value
 })
 
-const enableAside = computed(() => {
-  if (page.value.isBlogPost)
-    return hasAside.value && isPageDecrypted.value && page.value.headers.length
-
-  return hasAside.value && isPageDecrypted.value
-})
+const enableAside = computed(() => hasAside.value && headers.value.length)
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, ''),
@@ -68,7 +65,7 @@ watch(
     <div
       :key="page.path" class="vp-doc-container" :class="{
         'has-sidebar': hasSidebar,
-        'has-aside': hasAside,
+        'has-aside': enableAside,
         'is-blog': page.isBlogPost,
         'with-encrypt': !isPageDecrypted,
       }"
@@ -207,7 +204,7 @@ watch(
 .aside-container {
   position: sticky;
   top: 0;
-  min-height: calc(100vh - var(--vp-footer-height, 0px));
+  min-height: calc(100vh - var(--vp-nav-height, 0px) - var(--vp-footer-height, 0px));
   max-height: 100vh;
   padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
@@ -241,7 +238,7 @@ watch(
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-footer-height, 0px) + 48px));
   padding-bottom: 32px;
 }
 
diff --git a/theme/src/client/components/VPDocAsideOutline.vue b/theme/src/client/components/VPDocAsideOutline.vue
index 1c8397f4..aab8a179 100644
--- a/theme/src/client/components/VPDocAsideOutline.vue
+++ b/theme/src/client/components/VPDocAsideOutline.vue
@@ -1,19 +1,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import VPDocOutlineItem from '@theme/VPDocOutlineItem.vue'
-import { type MenuItem, getHeaders, useActiveAnchor } from '../composables/outline.js'
+import { type MenuItem, useActiveAnchor, useHeaders } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
 
-const { theme, frontmatter } = useData()
+const { theme } = useData()
 
-const headers = ref<MenuItem[]>([])
+const headers = useHeaders()
 const hasOutline = computed(() => headers.value.length > 0)
 
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
 const container = ref()
 const marker = ref()
 
diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue
index c96cdc67..409508a1 100644
--- a/theme/src/client/components/VPLocalNav.vue
+++ b/theme/src/client/components/VPLocalNav.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
-import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import VPLocalNavOutlineDropdown from '@theme/VPLocalNavOutlineDropdown.vue'
 import { useSidebar } from '../composables/sidebar.js'
-import { type MenuItem, getHeaders } from '../composables/outline.js'
+import { useHeaders } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
 
 const props = defineProps<{
@@ -14,23 +13,19 @@ const props = defineProps<{
 
 defineEmits<(e: 'openMenu') => void>()
 
-const { page, theme, frontmatter } = useData()
+const { page, theme } = useData()
 
 const { hasSidebar } = useSidebar()
 const { y } = useWindowScroll()
 
 const navHeight = ref(0)
 
-const headers = ref<MenuItem[]>([])
+const headers = useHeaders()
 
 const empty = computed(() => {
   return headers.value.length === 0 && !hasSidebar.value
 })
 
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
 onMounted(() => {
   navHeight.value = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue(
diff --git a/theme/src/client/composables/outline.ts b/theme/src/client/composables/outline.ts
index 215dc2e6..cf772c43 100644
--- a/theme/src/client/composables/outline.ts
+++ b/theme/src/client/composables/outline.ts
@@ -1,8 +1,10 @@
-import { onMounted, onUnmounted, onUpdated } from 'vue'
-import type { Ref } from 'vue'
+import { inject, onMounted, onUnmounted, onUpdated, provide, ref } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import type { ThemeOutline } from '../../shared/index.js'
 import { throttleAndDebounce } from '../utils/index.js'
 import { useAside } from './aside.js'
+import { useData } from './data.js'
 
 export interface Header {
   /**
@@ -41,6 +43,31 @@ export type MenuItem = Omit<Header, 'slug' | 'children'> & {
   children?: MenuItem[]
 }
 
+export const headersSymbol: InjectionKey<Ref<MenuItem[]>> = Symbol(
+  __VUEPRESS_DEV__ ? 'headers' : '',
+)
+
+export function setupHeaders(): Ref<MenuItem[]> {
+  const { frontmatter, theme } = useData()
+  const headers = ref<MenuItem[]>([])
+
+  onContentUpdated(() => {
+    headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+  })
+
+  provide(headersSymbol, headers)
+
+  return headers
+}
+
+export function useHeaders(): Ref<MenuItem[]> {
+  const headers = inject(headersSymbol)
+  if (!headers) {
+    throw new Error('useHeaders() is called without provider.')
+  }
+  return headers
+}
+
 export function getHeaders(range?: ThemeOutline): MenuItem[] {
   const headers = Array.from(
     document.querySelectorAll('.vp-doc :where(h1,h2,h3,h4,h5,h6)'),
diff --git a/theme/src/client/config.ts b/theme/src/client/config.ts
index c1e45453..9aecdd8e 100644
--- a/theme/src/client/config.ts
+++ b/theme/src/client/config.ts
@@ -6,6 +6,7 @@ import {
   enhanceScrollBehavior,
   setupDarkMode,
   setupEncrypt,
+  setupHeaders,
   setupSidebar,
   setupThemeData,
   setupWatermark,
@@ -23,6 +24,7 @@ export default defineClientConfig({
   },
   setup() {
     setupSidebar()
+    setupHeaders()
     setupEncrypt()
     setupWatermark()
   },