perf(theme): 优化 侧边栏 分组结构

theme/src/client/components/VPSidebar.vue

@@ -2,7 +2,7 @@
 import { useScrollLock } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 import { useRoutePath } from 'vuepress/client'
-import VPSidebarItem from '@theme/VPSidebarItem.vue'
+import VPSidebarGroup from '@theme/VPSidebarGroup.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
@@ -71,13 +71,7 @@ onMounted(() => {
 
           <slot name="sidebar-nav-before" />
 
-          <div
-            v-for="item in sidebarGroups"
-            :key="item.text"
-            class="group"
-          >
-            <VPSidebarItem :item="item" :depth="0" />
-          </div>
+          <VPSidebarGroup :items="sidebarGroups" />
 
           <slot name="sidebar-nav-after" />
         </nav>
@@ -170,17 +164,4 @@ onMounted(() => {
 .nav {
   outline: 0;
 }
-
-.group + .group {
-  padding-top: 10px;
-  border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
-}
-
-@media (min-width: 960px) {
-  .group {
-    width: calc(var(--vp-sidebar-width) - 64px);
-    padding-top: 10px;
-  }
-}
 </style>

theme/src/client/components/VPSidebarGroup.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type { ResolvedSidebarItem } from '../../shared/resolved/sidebar.js'
+import VPSidebarItem from './VPSidebarItem.vue'
+
+defineProps<{
+  items: ResolvedSidebarItem[]
+}>()
+
+const disableTransition = ref(true)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    timer = null
+    disableTransition.value = false
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  if (timer != null) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <div
+    v-for="item in items"
+    :key="item.text"
+    class="group"
+    :class="{ 'no-transition': disableTransition }"
+  >
+    <VPSidebarItem :item="item" :depth="0" />
+  </div>
+</template>
+
+<style scoped>
+.no-transition :deep(.caret-icon) {
+  transition: none;
+}
+
+.group + .group {
+  padding-top: 10px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+@media (min-width: 960px) {
+  .group {
+    width: calc(var(--vp-sidebar-width) - 64px);
+    padding-top: 10px;
+  }
+}
+</style>

theme/src/client/components/VPSidebarItem.vue

@@ -56,7 +56,7 @@ function onCaretClick() {
 </script>
 
 <template>
-  <Component :is="sectionTag" class="vp-sidebar-item" :class="classes">
+  <Component :is="sectionTag" class="vp-sidebar-item sidebar-item" :class="classes">
     <div
       v-if="item.text"
       class="item"