fix(CopyrightInfo): 🎨 use computed instead of watch

Author: BeiyanYunyi

package.json

@@ -38,9 +38,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
-    "dev": "vitepress dev",
-    "preview": "vitepress preview"
+    "build": "unbuild"
   },
   "peerDependencies": {
     "@iconify-json/carbon": "^1.2.1",

src/components/AppFooter.vue

@@ -10,7 +10,7 @@ const { theme } = useData<PjtsThemeConfig>()
 
 // 定义一个 ref 来存储动态 key
 const componentKey = ref(0)
-const frontmatter = ref<Record<string, any>>({})
+const frontmatter = ref(route.data?.frontmatter)
 const isFrontmatterLoaded = ref(false)
 
 // 更新 key 和 frontmatter 的函数

src/components/CopyrightInfo.vue

@@ -6,16 +6,15 @@ import { data } from '../plugins/CopyrightLoader.data'
 
 const orgName = useData().theme.value.org
 
-// 初始化需要更新的变量
-const attrs = ref<Record<string, any> | null>(null)
-
 const route = useRoute() // 获取当前路由对象
 
-// 定义一个函数，基于当前路由路径更新数据
-function updateData() {
-  const paths = route.path.replace('.md', '').split('/').filter((item: string) => item !== '')
-  attrs.value = searchClosestInTrie(data, paths)
-}
+const attrs = computed(() => {
+  const paths = route.path
+    .replace('.md', '')
+    .split('/')
+    .filter((item: string) => item !== '')
+  return searchClosestInTrie(data, paths)
+})
 
 function searchClosestInTrie(
   that: Trie<Record<string, any>>,
@@ -25,7 +24,11 @@ function searchClosestInTrie(
   if (path.length === 0)
     return node.value
   if (path[0] in node.children) {
-    let value = searchClosestInTrie(that, path.slice(1), node.children[path[0]])
+    let value = searchClosestInTrie(
+      that,
+      path.slice(1),
+      node.children[path[0]],
+    )
     if (value === null)
       value = node.value
     return value
@@ -45,15 +48,6 @@ const authors = computed(() => {
 const displayAuthors = computed(() => {
   return `${authors.value.join(' , ')}`
 })
-
-// 监听页面路由变化，路由变化时更新数据
-watch(
-  () => route.path,
-  () => {
-    updateData() // 路由变化时调用更新逻辑
-  },
-  { immediate: true }, // 确保在初次加载时也能更新数据
-)
 </script>
 
 <template>
@@ -66,24 +60,35 @@ watch(
         <span>这篇文章 </span>
         <span>{{ `“${attrs!.title}”` }}</span>
         <span> 由 </span>
-        <a v-if="attrs?.copyright?.url" :href="attrs.copyright.url">{{ displayAuthors }}</a>
+        <a v-if="attrs?.copyright?.url" :href="attrs.copyright.url">{{
+          displayAuthors
+        }}</a>
         <span v-else>{{ displayAuthors }}</span>
         <span> 创作</span>
         <span v-if="attrs?.copyright?.org && attrs?.copyright?.license">
           ，{{ attrs.copyright.org }} 在
-          <a v-if="attrs?.copyright?.licenseUrl" :href="attrs.copyright.licenseUrl">{{ attrs.copyright.license }}</a>
+          <a
+            v-if="attrs?.copyright?.licenseUrl"
+            :href="attrs.copyright.licenseUrl"
+          >{{ attrs.copyright.license }}</a>
           <span v-else>{{ attrs.copyright.license }}</span>
           许可下使用
         </span>
         <span v-else-if="orgName && attrs?.copyright?.license">
           ，{{ orgName }} 在
-          <a v-if="attrs?.copyright?.licenseUrl" :href="attrs.copyright.licenseUrl">{{ attrs.copyright.license }}</a>
+          <a
+            v-if="attrs?.copyright?.licenseUrl"
+            :href="attrs.copyright.licenseUrl"
+          >{{ attrs.copyright.license }}</a>
           <span v-else>{{ attrs.copyright.license }}</span>
           许可下使用
         </span>
         <span v-else-if="attrs?.copyright?.license">
           ，Project Trans 在
-          <a v-if="attrs?.copyright?.licenseUrl" :href="attrs.copyright.licenseUrl">{{ attrs.copyright.license }}</a>
+          <a
+            v-if="attrs?.copyright?.licenseUrl"
+            :href="attrs.copyright.licenseUrl"
+          >{{ attrs.copyright.license }}</a>
           <span v-else>{{ attrs.copyright.license }}</span>
           许可下使用
         </span>

src/theme.ts

@@ -12,7 +12,7 @@ import DefaultTheme from 'vitepress/theme-without-fonts'
 import { onMounted } from 'vue'
 
 import Layout from './Layout.vue'
-import { addFontSwitchListener } from './plugins/fontSwitcher.js'
+import { addFontSwitchListener } from './plugins/fontSwitcher'
 import './style.css'
 
 import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'