From e395e981283dab367474196ec7df7f11db6c2d53 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 5 Jun 2024 00:33:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=AE=9A=E4=BD=8D=E5=88=B0=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Page.vue    | 32 +++++++++++++++++++++++--
 theme/src/client/components/Sidebar.vue | 19 ++++++++++++++-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index b0a49ef3..fc2ecaf3 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vuepress/client'
 import { useData, useSidebar } from '../composables/index.js'
 import { usePageEncrypt } from '../composables/encrypt.js'
 import PageAside from './PageAside.vue'
@@ -10,6 +11,7 @@ import TransitionFadeSlideY from './TransitionFadeSlideY.vue'
 
 const { hasSidebar, hasAside } = useSidebar()
 const { page, isDark } = useData()
+const route = useRoute()
 
 const { isPageDecrypted } = usePageEncrypt()
 
@@ -23,6 +25,32 @@ const enableAside = computed(() => {
 
   return hasAside.value && isPageDecrypted.value
 })
+
+const asideEl = ref<HTMLElement>()
+watch(
+  () => route.hash,
+  hash =>
+    nextTick(() => {
+      if (!asideEl.value)
+        return
+      const activeItem = asideEl.value.querySelector(
+        `.outline-link[href="${hash}"]`,
+      )
+      if (!activeItem || !hash) {
+        asideEl.value.scrollTop = 0
+        return
+      }
+
+      const { top: navTop, height: navHeight }
+        = asideEl.value.getBoundingClientRect()
+      const { top: activeTop, height: activeHeight }
+        = activeItem.getBoundingClientRect()
+
+      if (activeTop < navTop || activeTop + activeHeight > navTop + navHeight)
+        activeItem.scrollIntoView({ block: 'center' })
+    }),
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -37,7 +65,7 @@ const enableAside = computed(() => {
     >
       <div class="container">
         <div v-if="enableAside" class="aside">
-          <div class="aside-container">
+          <div ref="asideEl" class="aside-container">
             <div class="aside-content">
               <PageAside />
             </div>
diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 55e421c2..2fe2552c 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useScrollLock } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRoutePath } from 'vuepress/client'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
 import SidebarItem from './SidebarItem.vue'
@@ -11,6 +12,7 @@ const props = defineProps<{
 }>()
 
 const { sidebarGroups, hasSidebar, sidebarKey } = useSidebar()
+const routePath = useRoutePath()
 
 // a11y: focus Nav element when menu has opened
 const navEl = ref<HTMLElement | null>(null)
@@ -27,6 +29,21 @@ watch(
   },
   { immediate: true, flush: 'post' },
 )
+
+onMounted(() => {
+  const activeItem = document.querySelector(
+    `.sidebar-wrapper .auto-link[href*="${routePath.value}"]`,
+  )
+  if (!activeItem || !navEl.value)
+    return
+
+  const { top: navTop, height: navHeight } = navEl.value.getBoundingClientRect()
+  const { top: activeTop, height: activeHeight }
+    = activeItem.getBoundingClientRect()
+
+  if (activeTop < navTop || activeTop + activeHeight > navTop + navHeight)
+    activeItem.scrollIntoView({ block: 'center' })
+})
 </script>
 
 <template>