fix: optimize code

recoluan · recoluan · commit 880a2a3cafcc · 2025-03-25T00:01:38.000+08:00
diff --git a/packages/vuepress-theme-reco/src/client/components/Home/Blog.vue b/packages/vuepress-theme-reco/src/client/components/Home/Blog.vue
@@ -27,7 +27,7 @@
       <ul class="category-wrapper">
         <li
           class="category-item"
-          v-for="({ label, length, categoryValue }, key, index) in categories"
+          v-for="({ label, length, categoryValue }, index) in categories"
           :key="index">
           <router-link
             class="category-link"
@@ -46,7 +46,7 @@
       <ul class="tag-wrapper">
         <li
           class="tag-item"
-          v-for="({ label, categoryValue }, key, index) in tags"
+          v-for="({ label, categoryValue }, index) in tags"
           :key="index"
           :style="{ borderColor: createOneColor() }"
         >
@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouteLocale, useRoute, useRouter, withBase } from 'vuepress/client'
 import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/composables'
 
@@ -139,22 +139,27 @@ if (!__VUEPRESS_SSR__) {
     })
   })
 
-  window.addEventListener(
-    'scroll',
-    throttle(() => {
-      const card = document.querySelector('.info-wrapper')
-
-      if (card) {
-        // @ts-ignore
-        card.setAttribute('data-x', card.offsetLeft)
-        // @ts-ignore
-        card.setAttribute('data-y', card.offsetTop)
-        // @ts-ignore
-        card.setAttribute('data-width', card.clientWidth)
-        // @ts-ignore
-        card.setAttribute('data-height', card.clientHeight)
-      }
-    }, 50)
-  )
+  // 使用远高的节流时间减少性能影响
+  const scrollHandler = throttle(() => {
+    const card = document.querySelector('.info-wrapper')
+
+    if (card) {
+      // @ts-ignore
+      card.setAttribute('data-x', card.offsetLeft)
+      // @ts-ignore
+      card.setAttribute('data-y', card.offsetTop)
+      // @ts-ignore
+      card.setAttribute('data-width', card.clientWidth)
+      // @ts-ignore
+      card.setAttribute('data-height', card.clientHeight)
+    }
+  }, 200) // 增加到200ms减少执行频率
+  
+  window.addEventListener('scroll', scrollHandler)
+  
+  // 在组件卸载时清理事件监听器
+  onUnmounted(() => {
+    window.removeEventListener('scroll', scrollHandler)
+  })
 }
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/PostList/PostItem.vue b/packages/vuepress-theme-reco/src/client/components/PostList/PostItem.vue
@@ -1,5 +1,6 @@
 <template>
-  <MagicCard class="post-item-container">
+  <!-- 使用v-memo来避免不必要的重新渲染 -->
+  <MagicCard class="post-item-container" v-memo="[data.path, data.title, data.frontmatter?.sticky, solution]">
     <div class="title">
       <SafeRouterLink :to="data.path">
         <Xicons v-if="data.frontmatter?.sticky" :icon="IconStar" />
diff --git a/packages/vuepress-theme-reco/src/client/components/SafeRouterLink.vue b/packages/vuepress-theme-reco/src/client/components/SafeRouterLink.vue
@@ -11,11 +11,22 @@
 // 注意：我们有意使用普通JavaScript而非Typescript
 // 这可以避免TS在编译期间检查导入的组件
 
-import { h, shallowRef, computed } from 'vue'
+import { shallowRef, computed, onMounted, onBeforeMount } from 'vue'
+import { useRouter } from 'vuepress/client'
 
 // 安全地检测我们是否在服务器上
 const isServer = typeof window === 'undefined'
 
+// 获取路由实例
+let router = null
+if (!isServer) {
+  try {
+    router = useRouter() 
+  } catch (e) {
+    console.warn('SafeRouterLink: Error getting router instance', e)
+  }
+}
+
 // 使用 shallowRef 避免 Vue 深入解析导入的组件
 const linkComponent = shallowRef('a')
 
@@ -41,15 +52,51 @@ const props = defineProps({
 
 // 计算出给组件的属性
 const componentProps = computed(() => {
+  // 处理对象形式的 to 属性，确保在使用 a 标签时有正确的 href
+  const toPath = typeof props.to === 'string'
+    ? props.to
+    : (props.to && typeof props.to === 'object' && props.to.path)
+      ? props.to.path
+      : '/'
+
   if (isServer) {
-    // 在服务器端，我们使用普通的a标签
+    // 在服务器端使用正常的a标签
     return {
       class: 'router-link-fallback',
-      href: typeof props.to === 'string' ? props.to : '',
+      href: toPath,
+      // 添加 onclick 防止默认行为
+      onclick: 'return false;',
+      ...props.$attrs
+    }
+  } else if (linkComponent.value === 'a') {
+    // 在客户端但RouterLink还未加载完成时
+    // 使用 a 标签并自己处理导航逻辑
+    return {
+      class: 'router-link-fallback',
+      href: toPath,
+      // 实现对点击事件的处理，阻止页面刷新但仍然能实现路由跳转
+      onClick: (e) => {
+        e.preventDefault(); // 阻止默认行为
+        
+        // 如果有路由实例，手动调用导航
+        if (router) {
+          const path = typeof props.to === 'string' ? props.to : 
+                      (props.to && typeof props.to === 'object') ? props.to : '/';
+          
+          if (props.replace) {
+            router.replace(path);
+          } else {
+            router.push(path);
+          }
+        } else {
+          // 如果没有路由实例，回退到正常行为
+          window.location.href = toPath;
+        }
+      },
       ...props.$attrs
     }
   } else {
-    // 在客户端，我们使用RouterLink的属性
+    // 在客户端且RouterLink已加载，使用RouterLink的属性
     return {
       to: props.to,
       custom: props.custom,
@@ -60,24 +107,42 @@ const componentProps = computed(() => {
   }
 })
 
-// 只在客户端环境下动态导入和使用RouterLink
-if (!isServer) {
-  // 时间函数延迟运行，确保到了客户端才运行
-  setTimeout(() => {
-    try {
-      // 动态导入RouterLink
-      // 先尝试从 vuepress/client 中导入，这样在不同包管理器下都能正常工作
-      import('vuepress/client').then(vuepress => {
-        // 检查是否存在RouterLink
+// 在组件创建前就开始加载 RouterLink
+onBeforeMount(() => {
+  if (!isServer) {
+    // 使用缓存避免重复导入RouterLink
+    if (window.__ROUTER_LINK_LOADED__) {
+      linkComponent.value = window.__ROUTER_LINK_COMPONENT__
+      return
+    }
+
+    // 使用立即执行的异步函数
+    (async () => {
+      try {
+        // 使用 await 等待导入完成
+        const vuepress = await import('vuepress/client')
         if (vuepress.RouterLink) {
+          // 缓存RouterLink组件引用
+          window.__ROUTER_LINK_COMPONENT__ = vuepress.RouterLink
+          window.__ROUTER_LINK_LOADED__ = true
           linkComponent.value = vuepress.RouterLink
         }
-      }).catch(e => {
+      } catch (e) {
         console.warn('SafeRouterLink: Failed to load RouterLink, using fallback link', e)
-      })
-    } catch (e) {
-      console.warn('SafeRouterLink: Error importing RouterLink', e)
-    }
-  }, 0)
-}
+      }
+    })();
+  }
+})
+
+// 也保留 onMounted 钩子，确保 RouterLink 被正确加载
+onMounted(() => {
+  if (!isServer && !window.__ROUTER_LINK_LOADED__) {
+    // 如果 onBeforeMount 没有成功加载，再次尝试
+    setTimeout(() => {
+      if (window.__ROUTER_LINK_LOADED__) {
+        linkComponent.value = window.__ROUTER_LINK_COMPONENT__
+      }
+    }, 0)
+  }
+})
 </script>
