diff --git a/app.vue b/app.vue
index 87786e7..a7a1da7 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-const loading = ref<HTMLDivElement | null>(null)
-const {$mitt} = useNuxtApp()
+const loading = ref<HTMLDivElement | null>(null),
+  { $mitt } = useNuxtApp()
 
-$mitt.on('startLoading', on => {
+$mitt.on('startLoading', (on) => {
   if (on) {
     loading.value?.classList.remove('stop')
     removeMobileTopColor()
-  } else {
+  }
+  else {
     loading.value?.classList.add('stop')
     setMobileTopColor()
   }
@@ -14,11 +15,14 @@ $mitt.on('startLoading', on => {
 </script>
 
 <template>
-  <div ref="loading" class="loading"></div>
+  <div
+    ref="loading"
+    class="loading"
+  />
   <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
-    <nav-bar/>
-    <nuxt-page/>
-    <footer-main/>
-    <alert-notification/>
+    <nav-bar />
+    <nuxt-page />
+    <footer-main />
+    <alert-notification />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/alert/Alert.vue b/components/alert/Alert.vue
index 885dc40..a5822cb 100644
--- a/components/alert/Alert.vue
+++ b/components/alert/Alert.vue
@@ -10,14 +10,21 @@ defineProps<{
   <div class="flex flex-grow flex-col items-center justify-center p-4 text-center min-h-[30rem]">
     <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
       <div class="mb-4 text-6xl">
-        <span v-if="icon" class="block text-blue-500">{{ icon }}</span>
+        <span
+          v-if="icon"
+          class="block text-blue-500"
+        >{{ icon }}</span>
         <span v-else>❓</span>
       </div>
-      <h1 class="mb-2 text-2xl font-bold">{{ title }}</h1>
-      <p class="mb-6 text-gray-600">{{ message }}</p>
+      <h1 class="mb-2 text-2xl font-bold">
+        {{ title }}
+      </h1>
+      <p class="mb-6 text-gray-600">
+        {{ message }}
+      </p>
       <router-link
-          to="/"
-          class="inline-block rounded-lg bg-blue-500 px-6 py-2 text-white shadow transition duration-200 hover:bg-blue-600"
+        to="/"
+        class="inline-block rounded-lg bg-blue-500 px-6 py-2 text-white shadow transition duration-200 hover:bg-blue-600"
       >
         返回首页
       </router-link>
@@ -27,4 +34,4 @@ defineProps<{
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/alert/Notification.vue b/components/alert/Notification.vue
index e6e0f49..16da720 100644
--- a/components/alert/Notification.vue
+++ b/components/alert/Notification.vue
@@ -1,42 +1,43 @@
 <script lang="ts" setup>
-const {$mitt} = useNuxtApp()
-const notifications = ref<INotification[]>([]);
-const typeClasses = {
-  success: 'bg-green-100 text-green-800 border border-green-400',
-  error: 'bg-red-100 text-red-800 border border-red-400',
-  warning: 'bg-yellow-100 text-yellow-800 border border-yellow-400',
-  info: 'bg-blue-100 text-blue-800 border border-blue-400',
-};
+const { $mitt } = useNuxtApp(),
+  notifications = ref<INotification[]>([]),
+  typeClasses = {
+    success: 'bg-green-100 text-green-800 border border-green-400',
+    error: 'bg-red-100 text-red-800 border border-red-400',
+    warning: 'bg-yellow-100 text-yellow-800 border border-yellow-400',
+    info: 'bg-blue-100 text-blue-800 border border-blue-400',
+  },
 
-const addNotification = (notification: INotification) => {
-  notifications.value.push(notification);
+  addNotification = (notification: INotification) => {
+    notifications.value.push(notification)
 
-  // 自动移除通知
-  setTimeout(() => {
-    notifications.value.shift();
-  }, 5000);
-  console.log(1)
-
-};
+    // 自动移除通知
+    setTimeout(() => {
+      notifications.value.shift()
+    }, 5000)
+    console.log(1)
+  }
 
 $mitt.on('eventBus', addNotification)
 
 onBeforeUnmount(() => {
-  $mitt.off('eventBus', addNotification);
-});
+  $mitt.off('eventBus', addNotification)
+})
 </script>
 
 <template>
   <div class="fixed top-5 right-5 z-50 space-y-4">
     <div
-        v-for="(notification, index) in notifications"
-        :key="index"
-        :class="[
+      v-for="(notification, index) in notifications"
+      :key="index"
+      :class="[
         'p-4 rounded-lg shadow-lg transition-all duration-300',
-        typeClasses[notification.level]
+        typeClasses[notification.level],
       ]"
     >
-      <h3 class="text-lg font-bold">{{ notification.title }}</h3>
+      <h3 class="text-lg font-bold">
+        {{ notification.title }}
+      </h3>
       <p>{{ notification.message }}</p>
     </div>
   </div>
diff --git a/components/card/ArticleCard.vue b/components/card/ArticleCard.vue
index 8a91768..636aae3 100644
--- a/components/card/ArticleCard.vue
+++ b/components/card/ArticleCard.vue
@@ -1,30 +1,35 @@
 <script lang="ts" setup>
-import {computed} from "vue";
-import {pos} from "ipx";
+import { computed } from 'vue'
+import { pos } from 'ipx'
 
 const props = defineProps<{
-  post: IPost
-}>()
+    post: IPost
+  }>(),
 
-const pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString())
+  pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString()),
 
-const thumbUrl = computed(() => props.post.fields.thumb.value)
-
-const randomId = computed(() => pid.data.value!)
+  thumbUrl = computed(() => props.post.fields.thumb.value),
 
+  randomId = computed(() => pid.data.value!)
 </script>
 
 <template>
-  <nuxt-link :title="post.title"
-       class="container relative overflow-hidden rounded-2xl bg-white transition-all duration-300 ease-in-out h-[31rem] hover:-translate-y-2 hover:cursor-pointer hover:shadow"
-       :to="{name: 'article-cid', params: {cid: post.cid}}">
+  <nuxt-link
+    :title="post.title"
+    class="container relative overflow-hidden rounded-2xl bg-white transition-all duration-300 ease-in-out h-[31rem] hover:-translate-y-2 hover:cursor-pointer hover:shadow"
+    :to="{ name: 'article-cid', params: { cid: post.cid } }"
+  >
     <!-- 图片 -->
     <div class="relative">
       <!-- 渐变 -->
-      <div class="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-t from-white"></div>
-      <img v-if="thumbUrl" :src="thumbUrl" alt=""
-           class="aspect-video w-full h-auto object-cover object-center">
-      <card-article-default-image :id="randomId"/>
+      <div class="absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-t from-white" />
+      <img
+        v-if="thumbUrl"
+        :src="thumbUrl"
+        alt=""
+        class="aspect-video w-full h-auto object-cover object-center"
+      >
+      <card-article-default-image :id="randomId" />
     </div>
     <!-- 文字部分 -->
     <div class="px-5">
@@ -37,4 +42,4 @@ const randomId = computed(() => pid.data.value!)
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/ArticleDefaultImage.vue b/components/card/ArticleDefaultImage.vue
index 93a1831..1c21c85 100644
--- a/components/card/ArticleDefaultImage.vue
+++ b/components/card/ArticleDefaultImage.vue
@@ -5,17 +5,45 @@ defineProps<{
 </script>
 
 <template>
-  <img src="~/assets/images/common/1.jpg" alt="" v-if="id === '1'"/>
-  <img src="~/assets/images/common/2.jpg" alt="" v-else-if="id === '2'"/>
-  <img src="~/assets/images/common/3.jpg" alt="" v-else-if="id === '3'"/>
-  <img src="~/assets/images/common/4.jpg" alt="" v-else-if="id === '4'"/>
-  <img src="~/assets/images/common/5.jpg" alt="" v-else-if="id === '5'"/>
-  <img src="~/assets/images/common/6.jpg" alt="" v-else-if="id === '6'"/>
-  <img src="~/assets/images/common/7.jpg" alt="" v-else-if="id === '7'"/>
+  <img
+    v-if="id === '1'"
+    src="~/assets/images/common/1.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '2'"
+    src="~/assets/images/common/2.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '3'"
+    src="~/assets/images/common/3.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '4'"
+    src="~/assets/images/common/4.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '5'"
+    src="~/assets/images/common/5.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '6'"
+    src="~/assets/images/common/6.jpg"
+    alt=""
+  >
+  <img
+    v-else-if="id === '7'"
+    src="~/assets/images/common/7.jpg"
+    alt=""
+  >
 </template>
 
 <style scoped>
 img {
   @apply aspect-[16/10] w-full h-auto object-cover object-center
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/ArticleDigestViewer.vue b/components/card/ArticleDigestViewer.vue
index 1ed3fb2..880e604 100644
--- a/components/card/ArticleDigestViewer.vue
+++ b/components/card/ArticleDigestViewer.vue
@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref} from "vue";
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const currentPost = ref<IPost | null>(null)
+const currentPost = ref<IPost | null>(null),
 
-const onOpenPost = (e: IPost) => {
-  currentPost.value = e;
-}
+  onOpenPost = (e: IPost) => {
+    currentPost.value = e
+  },
 
-const onClosePost = () => {
-  currentPost.value = null
-}
+  onClosePost = () => {
+    currentPost.value = null
+  },
 
-const thumbUrl = computed(() => {
-  if (currentPost.value && currentPost.value.fields.thumb.value) {
-    return currentPost.value.fields.thumb.value
-  }
-  return getAssetURL(`${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`)
-})
+  thumbUrl = computed(() => {
+    if (currentPost.value && currentPost.value.fields.thumb.value) {
+      return currentPost.value.fields.thumb.value
+    }
+    return getAssetURL(`${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`)
+  })
 
 onMounted(() => {
   emitter.on('openPost', onOpenPost)
@@ -28,31 +28,48 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="currentPost" class="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black bg-opacity-60">
+  <div
+    v-if="currentPost"
+    class="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black bg-opacity-60"
+  >
     <div class="container mx-auto my-10 max-h-full overflow-hidden overscroll-y-contain rounded-3xl bg-white">
       <!-- 标题栏 -->
       <div class="relative w-full border-b-2 border-b-gray-200">
         <!-- 文章头图 -->
         <div class="min-h-52">
-          <img :src="thumbUrl" alt="" class="max-h-64 w-full object-cover object-center"/>
+          <img
+            :src="thumbUrl"
+            alt=""
+            class="max-h-64 w-full object-cover object-center"
+          >
         </div>
         <!-- 预览标题 -->
         <div
-            class="absolute top-0 right-0 left-0 h-12 truncate bg-black bg-opacity-60 pr-16 pl-8 text-white backdrop-blur-3xl py-1.5">
-          <span :title="currentPost.title" class="text-3xl font-bold">
+          class="absolute top-0 right-0 left-0 h-12 truncate bg-black bg-opacity-60 pr-16 pl-8 text-white backdrop-blur-3xl py-1.5"
+        >
+          <span
+            :title="currentPost.title"
+            class="text-3xl font-bold"
+          >
             文章预览 /
           </span>
         </div>
         <!-- 关闭按钮 -->
         <div
-            class="absolute top-0 right-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-all my-1.5 hover:bg-gray-200 hover:text-black"
-            @click="onClosePost"
+          class="absolute top-0 right-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-all my-1.5 hover:bg-gray-200 hover:text-black"
+          @click="onClosePost"
         >
-          <font-awesome-icon :icon="['fas', 'xmark']" class="p-2"/>
+          <font-awesome-icon
+            :icon="['fas', 'xmark']"
+            class="p-2"
+          />
         </div>
       </div>
       <!-- 正文 -->
-      <div class="container overflow-y-auto p-8 h-[60vh] preview" v-html="currentPost.digest"></div>
+      <div
+        class="container overflow-y-auto p-8 h-[60vh] preview"
+        v-html="currentPost.digest"
+      />
     </div>
   </div>
 </template>
@@ -83,4 +100,4 @@ onUnmounted(() => {
     @apply line-clamp-1;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/CardTitle.vue b/components/card/CardTitle.vue
index 95b04ee..86ba53d 100644
--- a/components/card/CardTitle.vue
+++ b/components/card/CardTitle.vue
@@ -7,14 +7,15 @@ defineProps<{
 
 <template>
   <div class="my-16 relative">
-      <h3 class="text-5xl font-bold text-blue-400 relative z-10">{{ title }}</h3>
-      <div class="h-12 w-auto text-5xl text-blue-200 absolute left-48 top-0 -translate-y-6">
-        <font-awesome-icon :icon="icon"/>
-      </div>
+    <h3 class="text-5xl font-bold text-blue-400 relative z-10">
+      {{ title }}
+    </h3>
+    <div class="h-12 w-auto text-5xl text-blue-200 absolute left-48 top-0 -translate-y-6">
+      <font-awesome-icon :icon="icon" />
+    </div>
   </div>
-
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/FullScreenIntroCard.vue b/components/card/FullScreenIntroCard.vue
index ce58cb9..05a8d30 100644
--- a/components/card/FullScreenIntroCard.vue
+++ b/components/card/FullScreenIntroCard.vue
@@ -1,48 +1,48 @@
 <script lang="ts" setup>
-import {computed, ref} from "vue";
+import { computed, ref } from 'vue'
 
 // 使用 ref 跟踪鼠标的 x 和 y 坐标
-const mouseX = ref(0)
-const mouseY = ref(0)
-const characterUrl = ref("")
+const mouseX = ref(0),
+  mouseY = ref(0),
+  characterUrl = ref(''),
 
-const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
-const littleWidget = [
-  {
-    icon: ['fab', 'qq'],
-    url: "https://qm.qq.com/q/9fhtO8JJt0",
-    title: "QQ",
-  },
-  {
-    icon: ['fab', 'github-alt'],
-    url: "https://github.com/Aurora1949",
-    title: "Github",
-  },
-  {
-    icon: ['fab', 'weibo'],
-    url: "https://weibo.com/u/7923648952",
-    title: "微博"
-  },
-  {
-    icon: ['fab', 'steam-symbol'],
-    url: "https://steamcommunity.com/id/cantyonion/",
-    title: "Steam"
-  }
-]
+  typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000'],
+  littleWidget = [
+    {
+      icon: ['fab', 'qq'],
+      url: 'https://qm.qq.com/q/9fhtO8JJt0',
+      title: 'QQ',
+    },
+    {
+      icon: ['fab', 'github-alt'],
+      url: 'https://github.com/Aurora1949',
+      title: 'Github',
+    },
+    {
+      icon: ['fab', 'weibo'],
+      url: 'https://weibo.com/u/7923648952',
+      title: '微博',
+    },
+    {
+      icon: ['fab', 'steam-symbol'],
+      url: 'https://steamcommunity.com/id/cantyonion/',
+      title: 'Steam',
+    },
+  ],
 
-// 监听鼠标移动
-const handleMouseMove = (event: MouseEvent) => {
+  // 监听鼠标移动
+  handleMouseMove = (event: MouseEvent) => {
   // 根据窗口大小计算鼠标相对于中心位置的偏移比例
-  mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
-  mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
-}
+    mouseX.value = -(event.clientX / window.innerWidth - 0.5) * 100
+    mouseY.value = -(event.clientY / window.innerHeight - 0.5) * 100
+  },
 
-const debouncedMouseMove = debounce(handleMouseMove, 5)
+  debouncedMouseMove = debounce(handleMouseMove, 5),
 
-// 根据鼠标位置动态调整背景图像的位置
-const backgroundStyle = computed(() => ({
-  backgroundPosition: `${mouseX.value}px ${mouseY.value}px`
-}))
+  // 根据鼠标位置动态调整背景图像的位置
+  backgroundStyle = computed(() => ({
+    backgroundPosition: `${mouseX.value}px ${mouseY.value}px`,
+  }))
 
 onMounted(() => {
   characterUrl.value = getAssetURL('common/hoshino.png')
@@ -50,53 +50,81 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :style="backgroundStyle"
-       class="relative flex h-screen w-full items-center justify-center bg-blue-400 bg-fixed bg min-h-[40rem]"
-       @mousemove="debouncedMouseMove"
+  <div
+    :style="backgroundStyle"
+    class="relative flex h-screen w-full items-center justify-center bg-blue-400 bg-fixed bg min-h-[40rem]"
+    @mousemove="debouncedMouseMove"
   >
-    <div class="relative mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96
+    <div
+      class="relative mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96
                 md:mx-0 md:max-w-screen-md"
     >
-      <p class="text-gray-500">你好！欢迎来到</p>
+      <p class="text-gray-500">
+        你好！欢迎来到
+      </p>
       <div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all md:text-6xl lg:text-7xl">
-        <h1 style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
-        <h1 class="font-bold">超级基地</h1>
+        <h1 style="font-family: BaconyScript,sans-serif">
+          CantyOni_on's
+        </h1>
+        <h1 class="font-bold">
+          超级基地
+        </h1>
         <div class="absolute -z-10 text-blue-100 top-[3px] left-[3px]">
-          <h1 class="" style="font-family: BaconyScript,sans-serif">CantyOni_on's</h1>
-          <h1 class="font-bold">超级基地</h1>
+          <h1
+            class=""
+            style="font-family: BaconyScript,sans-serif"
+          >
+            CantyOni_on's
+          </h1>
+          <h1 class="font-bold">
+            超级基地
+          </h1>
         </div>
       </div>
 
       <!-- TypedJS -->
       <div class="flex flex-row text-gray-500">
-        <vue-typed :auto-insert-css="true" :backSpeed="30"
-                   :loop="true"
-                   :showCursor="true"
-                   :strings="typedString"
-                   :typeSpeed="50"
+        <vue-typed
+          :auto-insert-css="true"
+          :back-speed="30"
+          :loop="true"
+          :show-cursor="true"
+          :strings="typedString"
+          :type-speed="50"
         />
       </div>
 
       <!-- 社交媒体组件 -->
       <div class="flex flex-row text-gray-500">
-        <widget-social-media-widget v-for="item in littleWidget"
-                             :key="item.url"
-                             :icon="item.icon"
-                             :title="item.title"
-                             :url="item.url"
-                             class="h-10 w-10"
+        <widget-social-media-widget
+          v-for="item in littleWidget"
+          :key="item.url"
+          :icon="item.icon"
+          :title="item.title"
+          :url="item.url"
+          class="h-10 w-10"
         />
       </div>
 
       <!-- 人物背景 -->
-      <div class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
+      <div
+        class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
                   sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10"
       >
-        <img :src="characterUrl" alt="" class="float-right h-full" draggable="false"/>
+        <img
+          :src="characterUrl"
+          alt=""
+          class="float-right h-full"
+          draggable="false"
+        >
       </div>
     </div>
     <!-- 下箭头 -->
-    <font-awesome-icon :icon="['fas', 'chevron-down']" beat class="absolute bottom-12 h-auto w-6 text-white"/>
+    <font-awesome-icon
+      :icon="['fas', 'chevron-down']"
+      beat
+      class="absolute bottom-12 h-auto w-6 text-white"
+    />
   </div>
 </template>
 
diff --git a/components/card/GitCard.vue b/components/card/GitCard.vue
index 392b32d..9248d12 100644
--- a/components/card/GitCard.vue
+++ b/components/card/GitCard.vue
@@ -1,66 +1,73 @@
 <script lang="ts" setup>
-import {computed} from "vue";
+import { computed } from 'vue'
 
 const props = defineProps<{
-  commit: IActivity<IContent>
-}>()
+    commit: IActivity<IContent>
+  }>(),
 
-const icon = computed(() => {
-  switch (props.commit.op_type) {
-    case "merge_pull_request":
-      return ['fas', 'code-merge']
-    case "create_repo":
-      return ['fab', 'git-alt']
-    case "commit_repo":
-    default:
-      return ['fas', 'code-commit']
+  icon = computed(() => {
+    switch (props.commit.op_type) {
+      case 'merge_pull_request':
+        return ['fas', 'code-merge']
+      case 'create_repo':
+        return ['fab', 'git-alt']
+      case 'commit_repo':
+      default:
+        return ['fas', 'code-commit']
+    }
+  }),
+
+  time = computed(() => timeDifference(props.commit.created)),
+
+  timeDifference = (dateString: string): string => {
+    const targetDate = new Date(dateString),
+      currentDate = new Date(),
+
+      diffInMillis = currentDate.getTime() - targetDate.getTime(),
+
+      minutes = Math.floor(diffInMillis / (1000 * 60)),
+      hours = Math.floor(diffInMillis / (1000 * 60 * 60)),
+      days = Math.floor(diffInMillis / (1000 * 60 * 60 * 24)),
+      months = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 30)),
+      years = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 365))
+
+    if (minutes < 60) {
+      return `${minutes} 分钟前`
+    }
+    else if (hours < 24) {
+      return `${hours} 小时前`
+    }
+    else if (days < 30) {
+      return `${days} 天前`
+    }
+    else if (months < 12) {
+      return `${months} 个月前`
+    }
+
+    return `${years} 年前`
+  },
+
+  handleClick = () => {
+    window.open(props.commit.repo.html_url, '_self')
   }
-})
-
-const time = computed(() => timeDifference(props.commit.created))
-
-const timeDifference = (dateString: string): string => {
-  const targetDate = new Date(dateString);
-  const currentDate = new Date();
-
-  const diffInMillis = currentDate.getTime() - targetDate.getTime();
-
-  const minutes = Math.floor(diffInMillis / (1000 * 60));
-  const hours = Math.floor(diffInMillis / (1000 * 60 * 60));
-  const days = Math.floor(diffInMillis / (1000 * 60 * 60 * 24));
-  const months = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 30));
-  const years = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 365));
-
-  if (minutes < 60) {
-    return `${minutes} 分钟前`;
-  } else if (hours < 24) {
-    return `${hours} 小时前`;
-  } else if (days < 30) {
-    return `${days} 天前`;
-  } else if (months < 12) {
-    return `${months} 个月前`;
-  } else {
-    return `${years} 年前`;
-  }
-}
-
-const handleClick = () => {
-  window.open(props.commit.repo.html_url, '_self')
-}
-
 </script>
 
 <template>
-  <div class="group container relative flex h-36 w-full overflow-hidden rounded-2xl transition-all
+  <div
+    class="group container relative flex h-36 w-full overflow-hidden rounded-2xl transition-all
               hover:cursor-pointer hover:shadow-md"
-       @click="handleClick"
+    @click="handleClick"
   >
     <!-- 提交图标 -->
-    <div class="before:absolute relative before:top-0 before:right-0 before:bottom-0 flex h-36 before:w-2 w-36
+    <div
+      class="before:absolute relative before:top-0 before:right-0 before:bottom-0 flex h-36 before:w-2 w-36
                 items-center justify-center bg-pink-300 before:bg-pink-300 text-5xl text-white before:opacity-0
                 before:blur before:transition-all group-hover:before:opacity-100"
     >
-      <font-awesome-icon :icon="icon" class="transition-all group-hover:scale-110"/>
+      <font-awesome-icon
+        :icon="icon"
+        class="transition-all group-hover:scale-110"
+      />
     </div>
     <!-- 内容 -->
     <div class="flex-1 overflow-hidden bg-white p-4">
@@ -73,7 +80,10 @@ const handleClick = () => {
       </span>
 
       <span class="absolute right-0 bottom-0 m-4 rounded bg-gray-300 px-2">
-        <font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
+        <font-awesome-icon
+          :icon="['far', 'clock']"
+          class="mr-1 text-sm"
+        />
         {{ time }}
       </span>
     </div>
@@ -82,4 +92,4 @@ const handleClick = () => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/IntroCard.vue b/components/card/IntroCard.vue
index ff6755a..d070454 100644
--- a/components/card/IntroCard.vue
+++ b/components/card/IntroCard.vue
@@ -4,29 +4,29 @@ type Widget = {
   url: string
   title: string
 }
-// const welcomeWords = ['你好👋，很高兴认识你！']
+// Const welcomeWords = ['你好👋，很高兴认识你！']
 
 const littleWidget: Widget[] = [
   {
     icon: ['fab', 'qq'],
-    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
-    title: "QQ",
+    url: 'tencent://message/?uin=1922471905&Site=&Menu=yes',
+    title: 'QQ',
   },
   {
     icon: ['fab', 'github-alt'],
-    url: "https://github.com/Aurora1949",
-    title: "Github",
+    url: 'https://github.com/Aurora1949',
+    title: 'Github',
   },
   {
     icon: ['fab', 'weibo'],
-    url: "https://weibo.com/u/7923648952",
-    title: "微博"
+    url: 'https://weibo.com/u/7923648952',
+    title: '微博',
   },
   {
     icon: ['fab', 'steam-symbol'],
-    url: "https://steamcommunity.com/id/cantyonion/",
-    title: "Steam"
-  }
+    url: 'https://steamcommunity.com/id/cantyonion/',
+    title: 'Steam',
+  },
 ]
 </script>
 
@@ -34,21 +34,32 @@ const littleWidget: Widget[] = [
   <div class="container my-16 flex w-full">
     <!-- 头像部分 -->
     <div class="hidden h-32 w-32 overflow-hidden rounded-full bg-white hover:animate-pulse sm:block">
-      <img alt="" src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640">
+      <img
+        alt=""
+        src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640"
+      >
     </div>
 
     <!--  文字部分  -->
     <div class="container flex flex-1 flex-col justify-between px-4 sm:px-8">
-      <div class="text-4xl">Jeffrey Hsu</div>
-      <div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
-      <!--      <vue-typed-js :strings="['First text', 'Second Text']">-->
-      <!--        <h1 class="typing"></h1>-->
-      <!--      </vue-typed-js>-->
+      <div class="text-4xl">
+        Jeffrey Hsu
+      </div>
+      <div class="text-2xl text-gray-400">
+        你好👋，很高兴认识你！
+      </div>
+      <!--      <vue-typed-js :strings="['First text', 'Second Text']"> -->
+      <!--        <h1 class="typing"></h1> -->
+      <!--      </vue-typed-js> -->
       <div class="flex gap-4 text-xl">
-        <a v-for="item in littleWidget"
-           :key="item.url" :href=item.url :title=item.title
-           class="flex h-10 w-10 items-center justify-center rounded-full bg-green-400 text-white transition-all hover:scale-125">
-          <font-awesome-icon :icon="item.icon"/>
+        <a
+          v-for="item in littleWidget"
+          :key="item.url"
+          :href="item.url"
+          :title="item.title"
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-green-400 text-white transition-all hover:scale-125"
+        >
+          <font-awesome-icon :icon="item.icon" />
         </a>
       </div>
     </div>
@@ -57,4 +68,4 @@ const littleWidget: Widget[] = [
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/card/SectionCard.vue b/components/card/SectionCard.vue
index b2df102..6ff6cd0 100644
--- a/components/card/SectionCard.vue
+++ b/components/card/SectionCard.vue
@@ -6,46 +6,89 @@ defineProps<{
   errMsg?: object
 }>()
 
-const emit = defineEmits(['reload'])
+const emit = defineEmits(['reload']),
 
-const handleReload = () => {
-  emit('reload')
-}
+  handleReload = () => {
+    emit('reload')
+  }
 </script>
 
 <template>
-  <div :class="{'justify-center': (empty || error)}" class="container flex">
+  <div
+    :class="{ 'justify-center': (empty || error) }"
+    class="container flex"
+  >
     <!-- 加载骨架 -->
-    <div v-if="loading" class="h-56 w-full text-2xl font-bold">
+    <div
+      v-if="loading"
+      class="h-56 w-full text-2xl font-bold"
+    >
       <slot name="skeleton">
         <div class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <div v-for="index of 3" :key="index" class="h-56 animate-pulse rounded-2xl bg-gray-200"></div>
+          <div
+            v-for="index of 3"
+            :key="index"
+            class="h-56 animate-pulse rounded-2xl bg-gray-200"
+          />
         </div>
       </slot>
     </div>
-    <div v-else class="w-full">
+    <div
+      v-else
+      class="w-full"
+    >
       <!-- 错误处理 -->
-      <div v-if="error" @click="handleReload">
+      <div
+        v-if="error"
+        @click="handleReload"
+      >
         <div class="flex items-center justify-center gap-8">
-          <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">载入错误</p>
-          <img class="h-32 w-auto relative" src="~/assets/images/common/plana_e.png" alt="">
+          <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
+            载入错误
+          </p>
+          <img
+            class="h-32 w-auto relative"
+            src="~/assets/images/common/plana_e.png"
+            alt=""
+          >
         </div>
-        <div v-if="errMsg" class="bg-white mt-4 p-4 border border-dashed rounded-md" style="font-family: 'LXGW WenKai Mono', monospace">
+        <div
+          v-if="errMsg"
+          class="bg-white mt-4 p-4 border border-dashed rounded-md"
+          style="font-family: 'LXGW WenKai Mono', monospace"
+        >
           {{ errMsg }}
         </div>
-        <p class="text-right text-xs">(点击重试)</p>
+        <p class="text-right text-xs">
+          (点击重试)
+        </p>
       </div>
       <div v-else>
         <!-- 正式内容 -->
         <div v-if="empty">
-          <div v-if="empty" class="flex items-center justify-center gap-8" @click="handleReload">
-            <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">最近没有动态~</p>
-            <img class="h-32 w-auto relative" src="~/assets/images/common/plana_e.png" alt="">
+          <div
+            v-if="empty"
+            class="flex items-center justify-center gap-8"
+            @click="handleReload"
+          >
+            <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
+              最近没有动态~
+            </p>
+            <img
+              class="h-32 w-auto relative"
+              src="~/assets/images/common/plana_e.png"
+              alt=""
+            >
           </div>
-          <p class="text-right text-xs">(点击重试)</p>
+          <p class="text-right text-xs">
+            (点击重试)
+          </p>
         </div>
 
-        <slot v-else name="default"/>
+        <slot
+          v-else
+          name="default"
+        />
       </div>
     </div>
   </div>
@@ -53,4 +96,4 @@ const handleReload = () => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/footer/Main.vue b/components/footer/Main.vue
index 059233c..3839f7d 100644
--- a/components/footer/Main.vue
+++ b/components/footer/Main.vue
@@ -8,22 +8,41 @@
       <div class="grid-cols-4 gird min-h-48">
         <div>
           <div class="flex items-center gap-4">
-            <img alt="" class="h-20 w-20" src="~/assets/images/logo/c.png">
-            <div class="text-4xl leading-7 text-gray-500" style="font-family: BaconyScript, sans-serif">
+            <img
+              alt=""
+              class="h-20 w-20"
+              src="~/assets/images/logo/c.png"
+            >
+            <div
+              class="text-4xl leading-7 text-gray-500"
+              style="font-family: BaconyScript, sans-serif"
+            >
               <p>CantyOni_on's</p>
               <p>Index</p>
             </div>
           </div>
-          <p class="mt-20 leading-8 text-gray-500">&copy;2024 All rights reserved.</p>
+          <p class="mt-20 leading-8 text-gray-500">
+            &copy;2024 All rights reserved.
+          </p>
         </div>
       </div>
       <div class="flex flex-col text-gray-500 md:flex-row">
-        <a class="mr-4 hover:text-black" href="https://beian.miit.gov.cn/"
-           target="_blank">苏ICP备2022016243号-1</a>
+        <a
+          class="mr-4 hover:text-black"
+          href="https://beian.miit.gov.cn/"
+          target="_blank"
+        >苏ICP备2022016243号-1</a>
         <div>
-          <img alt="" class="inline-block w-4 pb-1" src="~/assets/images/common/beian.png"/>
-          <a class="hover:text-black" href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641/"
-             target="_blank">苏公网安备32050602011641</a>
+          <img
+            alt=""
+            class="inline-block w-4 pb-1"
+            src="~/assets/images/common/beian.png"
+          >
+          <a
+            class="hover:text-black"
+            href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641/"
+            target="_blank"
+          >苏公网安备32050602011641</a>
         </div>
       </div>
     </div>
@@ -37,4 +56,4 @@
   background-color: white;
   background-repeat: no-repeat;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/loader/LoaderView.vue b/components/loader/LoaderView.vue
index 9d7330e..1df6c7c 100644
--- a/components/loader/LoaderView.vue
+++ b/components/loader/LoaderView.vue
@@ -1,45 +1,46 @@
 <template>
   <div class="loader">
     <svg
-        class="icon"
-        height="200"
-        p-id="1166"
-        t="1676267704832"
-        version="1.1"
-        viewBox="0 0 1024 1024"
-        width="200"
-        xmlns="http://www.w3.org/2000/svg"
+      class="icon"
+      height="200"
+      p-id="1166"
+      t="1676267704832"
+      version="1.1"
+      viewBox="0 0 1024 1024"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-          d="M787.009641 293.979897c21.792821-0.183795 51.922051-0.459487 53.39241-0.722051a12.826256 12.826256 0 0 0 6.642872-3.610256l58.092308-57.737846a12.589949 12.589949 0 0 0 3.662769-6.603488c0.393846-2.376205-0.131282-4.424205-1.496615-5.802666l-67.872821-67.413334c-1.352205-1.378462-3.452718-1.890462-5.77641-1.522871a12.616205 12.616205 0 0 0-6.695385 3.610256l-58.092307 57.737846a12.826256 12.826256 0 0 0-3.675898 6.669128c-0.236308 1.575385 4.030359 35.997538 3.977846 57.803488-54.350769-40.539897-114.346667-68.096-184.595692-78.336V116.36841h25.915077c2.691282 0 10.660103-3.990974 12.524308-5.356307 2.021744-1.378462 8.388923-6.445949 8.388923-8.375795V7.286154c0-1.929846-6.419692-3.807179-8.310154-5.172513-1.929846-1.352205-9.885538-2.113641-12.603077-2.113641H419.052308c-2.743795 0-11.106462 0.774564-13.049436 2.139897-1.890462 1.352205-8.756513 3.21641-8.756513 5.146257v95.310769c0 1.969231 6.892308 7.036718 8.795897 8.402051 1.929846 1.339077 10.266256 5.369436 13.036308 5.369436h24.996103v81.657436C256.761436 227.511795 91.897436 400.108308 91.897436 608.518564 91.897436 837.618872 281.888821 1024 512.380718 1024 742.859487 1024 931.577436 837.632 931.577436 608.518564c-0.026256-125.702564-55.492923-238.316308-144.567795-314.538667z m-67.413333 146.116924L530.825846 627.698872a25.665641 25.665641 0 0 1-35.551179-0.590769 25.337436 25.337436 0 0 1-0.577641-35.341129l188.783589-187.602051a25.521231 25.521231 0 0 1 18.064411-7.443692 25.665641 25.665641 0 0 1 18.051282 7.443692 25.403077 25.403077 0 0 1 0 35.905641z"
-          fill="#ffffff"
-          p-id="1167"
-      ></path>
+        d="M787.009641 293.979897c21.792821-0.183795 51.922051-0.459487 53.39241-0.722051a12.826256 12.826256 0 0 0 6.642872-3.610256l58.092308-57.737846a12.589949 12.589949 0 0 0 3.662769-6.603488c0.393846-2.376205-0.131282-4.424205-1.496615-5.802666l-67.872821-67.413334c-1.352205-1.378462-3.452718-1.890462-5.77641-1.522871a12.616205 12.616205 0 0 0-6.695385 3.610256l-58.092307 57.737846a12.826256 12.826256 0 0 0-3.675898 6.669128c-0.236308 1.575385 4.030359 35.997538 3.977846 57.803488-54.350769-40.539897-114.346667-68.096-184.595692-78.336V116.36841h25.915077c2.691282 0 10.660103-3.990974 12.524308-5.356307 2.021744-1.378462 8.388923-6.445949 8.388923-8.375795V7.286154c0-1.929846-6.419692-3.807179-8.310154-5.172513-1.929846-1.352205-9.885538-2.113641-12.603077-2.113641H419.052308c-2.743795 0-11.106462 0.774564-13.049436 2.139897-1.890462 1.352205-8.756513 3.21641-8.756513 5.146257v95.310769c0 1.969231 6.892308 7.036718 8.795897 8.402051 1.929846 1.339077 10.266256 5.369436 13.036308 5.369436h24.996103v81.657436C256.761436 227.511795 91.897436 400.108308 91.897436 608.518564 91.897436 837.618872 281.888821 1024 512.380718 1024 742.859487 1024 931.577436 837.632 931.577436 608.518564c-0.026256-125.702564-55.492923-238.316308-144.567795-314.538667z m-67.413333 146.116924L530.825846 627.698872a25.665641 25.665641 0 0 1-35.551179-0.590769 25.337436 25.337436 0 0 1-0.577641-35.341129l188.783589-187.602051a25.521231 25.521231 0 0 1 18.064411-7.443692 25.665641 25.665641 0 0 1 18.051282 7.443692 25.403077 25.403077 0 0 1 0 35.905641z"
+        fill="#ffffff"
+        p-id="1167"
+      />
     </svg>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {watch} from "vue";
+import { watch } from 'vue'
 
 const props = defineProps({
   loading: {
     type: Boolean,
     default: false,
   },
-});
+})
 
 watch(
-    () => props.loading,
-    (v) => {
-      const el: HTMLElement = document.querySelector("body") as HTMLElement;
-      if (v) {
-        el.classList.add("loading");
-      } else {
-        el.classList.remove("loading");
-      }
+  () => props.loading,
+  (v) => {
+    const el: HTMLElement = document.querySelector('body') as HTMLElement
+    if (v) {
+      el.classList.add('loading')
     }
-);
+    else {
+      el.classList.remove('loading')
+    }
+  },
+)
 </script>
 
 <style scoped>
diff --git a/components/markdown/Section.vue b/components/markdown/Section.vue
index 70c6791..ee562ac 100644
--- a/components/markdown/Section.vue
+++ b/components/markdown/Section.vue
@@ -5,10 +5,12 @@ defineProps<{
 </script>
 
 <template>
-  <div class="markdown-body" v-html="$mdRender.render(content)"/>
+  <div
+    class="markdown-body"
+    v-html="$mdRender.render(content)"
+  />
 </template>
 
-
 <style lang="scss">
 .markdown-body {
   font-family: "LXGW WenKai", sans-serif;
@@ -34,4 +36,4 @@ defineProps<{
     scrollbar-width: none; /* Firefox */
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/nav/NavBar.vue b/components/nav/NavBar.vue
index 12eca52..5f457b0 100644
--- a/components/nav/NavBar.vue
+++ b/components/nav/NavBar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref} from "vue";
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 type Widget = {
   icon: string[]
@@ -8,99 +8,99 @@ type Widget = {
 }
 
 const props = defineProps({
-  navColor: {
-    default: false,
-    type: Boolean
-  }
-})
-// 使用 ref 跟踪是否滚动
-const scrolled = ref(false)
-const littleWidget: Widget[] = [
-  {
-    icon: ['fas', 'gauge'],
-    url: "/netdata/",
-    title: "Pi Dashboard",
+    navColor: {
+      default: false,
+      type: Boolean,
+    },
+  }),
+  // 使用 ref 跟踪是否滚动
+  scrolled = ref(false),
+  littleWidget: Widget[] = [
+    {
+      icon: ['fas', 'gauge'],
+      url: '/netdata/',
+      title: 'Pi Dashboard',
+    },
+    {
+      icon: ['fas', 'cloud'],
+      url: '/nas/',
+      title: 'Nextcloud',
+    },
+    {
+      icon: ['fas', 'code-branch'],
+      url: '/git/',
+      title: 'Git Repository',
+    },
+  ],
+  // Const logoUrl = getAssetURL("w.png")
+  logoType: string = 'logo',
+  showLogo = computed(() => logoType === 'text'),
+  isExpended = ref<boolean>(false),
+  route = useRoute(),
+
+  entry = [
+    {
+      title: '主页',
+      icon: ['fas', 'home'],
+      entry: [],
+      to: 'index',
+    },
+    {
+      title: '文章',
+      icon: ['fas', 'pen'],
+      entry: [
+        {
+          title: '博客',
+          url: false,
+          to: 'article',
+        },
+        {
+          title: '日记',
+          url: false,
+          to: 'diary',
+        },
+      ],
+    },
+    {
+      title: '作品',
+      icon: ['fas', 'brush'],
+      entry: [
+        {
+          title: '软件',
+          url: false,
+          to: 'soft',
+        },
+        {
+          title: '仓库',
+          url: true,
+          to: 'https://cantyonion.site/git/',
+        },
+      ],
+    },
+    {
+      title: '杂谈',
+      icon: ['fas', 'chess-rook'],
+      entry: [],
+      to: 'talk',
+    },
+  ],
+
+  menuExpanded = () => {
+    isExpended.value = !isExpended.value
   },
-  {
-    icon: ['fas', 'cloud'],
-    url: "/nas/",
-    title: "Nextcloud",
+
+  menuClose = () => {
+    isExpended.value = false
   },
-  {
-    icon: ['fas', 'code-branch'],
-    url: "/git/",
-    title: "Git Repository"
-  }
-]
-//const logoUrl = getAssetURL("w.png")
-const logoType: string = "logo";
-const showLogo = computed(() => logoType === 'text')
-const isExpended = ref<boolean>(false)
-const route = useRoute()
 
-const entry = [
-  {
-    title: '主页',
-    icon: ['fas', 'home'],
-    entry: [],
-    to: 'index'
+  // 监听 scroll 事件
+  handleScroll = () => {
+    scrolled.value = window.scrollY > 0
   },
-  {
-    title: '文章',
-    icon: ['fas', 'pen'],
-    entry: [
-      {
-        title: '博客',
-        url: false,
-        to: 'article'
-      },
-      {
-        title: '日记',
-        url: false,
-        to: 'diary'
-      },
-    ],
-  },
-  {
-    title: '作品',
-    icon: ['fas', 'brush'],
-    entry: [
-      {
-        title: '软件',
-        url: false,
-        to: 'soft'
-      },
-      {
-        title: '仓库',
-        url: true,
-        to: 'https://cantyonion.site/git/'
-      },
-    ],
-  },
-  {
-    title: '杂谈',
-    icon: ['fas', 'chess-rook'],
-    entry: [],
-    to: 'talk'
-  }
-]
 
-const menuExpanded = () => {
-  isExpended.value = !isExpended.value
-}
+  debouncedScroll = debounce(handleScroll, 10),
 
-const menuClose = () => {
-  isExpended.value = false
-}
-
-// 监听 scroll 事件
-const handleScroll = () => {
-  scrolled.value = window.scrollY > 0
-}
-
-const debouncedScroll = debounce(handleScroll, 10)
-
-const alwaysBlueBackground = computed(() => route.name !== 'index' || props.navColor)
+  alwaysBlueBackground = computed(() => route.name !== 'index' || props.navColor)
 
 // 在组件挂载和卸载时添加和移除事件监听
 onMounted(() => {
@@ -113,59 +113,86 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <nav :class="{'bg-transparent': !scrolled && !alwaysBlueBackground,
-                'bg-blue-400': scrolled || alwaysBlueBackground,
-                'shadow': scrolled}"
-       class="fixed top-0 z-20 h-16 w-full text-white transition-all duration-300"
+  <nav
+    :class="{ 'bg-transparent': !scrolled && !alwaysBlueBackground,
+              'bg-blue-400': scrolled || alwaysBlueBackground,
+              'shadow': scrolled }"
+    class="fixed top-0 z-20 h-16 w-full text-white transition-all duration-300"
   >
     <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
       <!-- 下拉菜单按钮 -->
-      <div class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
-           @click="menuExpanded"
+      <div
+        class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
+        @click="menuExpanded"
       >
-        <font-awesome-icon :icon="['fas', 'bars']" class="h-6"/>
+        <font-awesome-icon
+          :icon="['fas', 'bars']"
+          class="h-6"
+        />
       </div>
       <!--  Logo  -->
       <div class="absolute left-1/2 -translate-x-1/2 md:relative md:left-0 md:translate-x-0">
         <!-- 文字模式 -->
-        <div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
+        <div
+          v-if="showLogo"
+          class="h-full text-4xl min-w-16 logo py-3.5"
+        >
           <span>CantyOni_on's Index</span>
         </div>
         <!-- 图片模式 -->
-        <div v-else class="py-2">
-          <img src="~/assets/images/logo/w.png" alt="" class="h-12 w-12"/>
+        <div
+          v-else
+          class="py-2"
+        >
+          <img
+            src="~/assets/images/logo/w.png"
+            alt=""
+            class="h-12 w-12"
+          >
         </div>
       </div>
 
       <!--  Entry  -->
-      <div :class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
-           class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
-                  md:h-auto md:bg-transparent md:opacity-100"
+      <div
+        :class="{ 'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended }"
+        class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
+               md:h-auto md:bg-transparent md:opacity-100"
       >
-        <nav-bar-entry-item v-for="item in entry" :key="item.title"
-                            :entry="item.entry" :icon="item.icon"
-                            :title="item.title" :to="item.to"
-                            @on-go="menuClose"
+        <nav-bar-entry-item
+          v-for="item in entry"
+          :key="item.title"
+          :entry="item.entry"
+          :icon="item.icon"
+          :title="item.title"
+          :to="item.to"
+          @on-go="menuClose"
         />
       </div>
 
       <!--  快速跳转小组件  -->
       <div class="flex items-center justify-between gap-4 text-xl">
-        <a v-for="item in littleWidget"
-           :key="item.url" :href=item.url :title=item.title
-           class="transition-all hover:scale-125">
-          <font-awesome-icon :icon="item.icon"/>
+        <a
+          v-for="item in littleWidget"
+          :key="item.url"
+          :href="item.url"
+          :title="item.title"
+          class="transition-all hover:scale-125"
+        >
+          <font-awesome-icon :icon="item.icon" />
         </a>
       </div>
     </div>
   </nav>
 
   <!-- 用于隔开元素 -->
-  <div class="h-16 w-full" v-if="alwaysBlueBackground"></div>
+  <div
+    v-if="alwaysBlueBackground"
+    class="h-16 w-full"
+  />
 </template>
 
 <style scoped>
 .logo {
   font-family: BaconyScript, serif;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/nav/NavBarEntryItem.vue b/components/nav/NavBarEntryItem.vue
index 4fddb82..059a615 100644
--- a/components/nav/NavBarEntryItem.vue
+++ b/components/nav/NavBarEntryItem.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 const router = useRouter()
 type Entry = {
-  title: string,
-  url: boolean,
-  to: string,
+  title: string
+  url: boolean
+  to: string
 }
 
 const emit = defineEmits<{
   (e: 'onGo'): void
-}>();
+}>()
 
 defineProps<{
   title: string
@@ -18,44 +18,50 @@ defineProps<{
 }>()
 
 const onClick = (to: string | undefined, url: boolean) => {
-  if (to === undefined)
-    return
+  if (to === undefined) { return }
 
-  if (url)
-    window.open(to)
+  if (url) { window.open(to) }
   emit('onGo')
-  router.push({name: to})
+  router.push({ name: to })
 }
 </script>
 
 <template>
-  <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
-       @click="onClick(to, false)"
+  <div
+    class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
+    @click="onClick(to, false)"
   >
-    <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
-                md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
+    <div
+      class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
+             md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
     >
-      <font-awesome-icon :icon="icon" class="mx-2 h-5 w-5 md:h-8 md:w-8"/>
-      <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
-                   md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
+      <font-awesome-icon
+        :icon="icon"
+        class="mx-2 h-5 w-5 md:h-8 md:w-8"
+      />
+      <span
+        class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
+               md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
       >
         {{ title }}
       </span>
     </div>
 
     <!-- 下拉菜单 -->
-    <div v-if="entry"
-         class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
-                md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
-                md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
+    <div
+      v-if="entry"
+      class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
+             md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
+             md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
     >
-      <div v-for="item in entry" :key="item.title"
-           class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
-           @click="onClick(item.to, item.url)"
+      <div
+        v-for="item in entry"
+        :key="item.title"
+        class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
+        @click="onClick(item.to, item.url)"
       >
         {{ item.title }}
       </div>
-
     </div>
   </div>
 </template>
@@ -66,4 +72,4 @@ const onClick = (to: string | undefined, url: boolean) => {
     transform: perspective(500px) rotateX(-45deg) translateX(-50%);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/sponer/upyun.vue b/components/sponer/upyun.vue
index cfcf678..bc688a4 100644
--- a/components/sponer/upyun.vue
+++ b/components/sponer/upyun.vue
@@ -3,11 +3,18 @@
 </script>
 
 <template>
-  <a class="flex items-center justify-center" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">
-    本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务
+  <a
+    class="flex items-center justify-center"
+    href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"
+  >
+    本网站由<img
+      :src="getAssetURL('upyun.png')"
+      alt="又拍云"
+      class="h-8 w-auto"
+    >提供CDN加速/云储存服务
   </a>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/components/widget/SocialMediaWidget.vue b/components/widget/SocialMediaWidget.vue
index 05c275a..51b3ea1 100644
--- a/components/widget/SocialMediaWidget.vue
+++ b/components/widget/SocialMediaWidget.vue
@@ -8,13 +8,17 @@ defineProps<{
 
 <template>
   <div class="flex gap-4 text-xl">
-    <a :key="url" :href=url :title=title
-       class="flex items-center justify-center transition-all hover:scale-125">
-      <font-awesome-icon :icon="icon"/>
+    <a
+      :key="url"
+      :href="url"
+      :title="title"
+      class="flex items-center justify-center transition-all hover:scale-125"
+    >
+      <font-awesome-icon :icon="icon" />
     </a>
   </div>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/composables/function.ts b/composables/function.ts
index 509f83a..a78c69f 100644
--- a/composables/function.ts
+++ b/composables/function.ts
@@ -1,8 +1,7 @@
 export const getAssetURL = (image: string) => {
   // 参数一: 相对路径
   // 参数二: 当前路径的URL
-  if (import.meta.client)
-    return new URL(`../assets/images/${image}`, import.meta.url).href
+  if (import.meta.client) { return new URL(`../assets/images/${image}`, import.meta.url).href }
   return `/_nuxt/assets/images/${image}`
 }
 
@@ -17,20 +16,20 @@ export const debounce = (fn: Function, delay: number) => {
 }
 
 export const setMobileTopColor = () => {
-  const lightMeta = document.createElement('meta');
-  lightMeta.setAttribute('name', 'theme-color');
-  lightMeta.setAttribute('media', '(prefers-color-scheme: light)');
-  lightMeta.setAttribute('content', '#60a5fa');
+  const lightMeta = document.createElement('meta')
+  lightMeta.setAttribute('name', 'theme-color')
+  lightMeta.setAttribute('media', '(prefers-color-scheme: light)')
+  lightMeta.setAttribute('content', '#60a5fa')
 
-  const darkMeta = document.createElement('meta');
-  darkMeta.setAttribute('name', 'theme-color');
-  darkMeta.setAttribute('media', '(prefers-color-scheme: dark)');
-  darkMeta.setAttribute('content', '#60a5fa');
+  const darkMeta = document.createElement('meta')
+  darkMeta.setAttribute('name', 'theme-color')
+  darkMeta.setAttribute('media', '(prefers-color-scheme: dark)')
+  darkMeta.setAttribute('content', '#60a5fa')
 
-  document.head.appendChild(lightMeta);
-  document.head.appendChild(darkMeta);
+  document.head.appendChild(lightMeta)
+  document.head.appendChild(darkMeta)
 }
 
 export const removeMobileTopColor = () => {
-  document.querySelectorAll('meta[name="theme-color"]').forEach(meta => meta.remove());
+  document.querySelectorAll('meta[name="theme-color"]').forEach(meta => meta.remove())
 }
diff --git a/composables/network.ts b/composables/network.ts
index 9965b15..8f77ea1 100644
--- a/composables/network.ts
+++ b/composables/network.ts
@@ -1,28 +1,26 @@
 import type { AsyncData, UseFetchOptions } from '#app'
 
 export function requestCore<DataT>(url: string, options: UseFetchOptions<DataT>) {
-  // const config = useRuntimeConfig()
-  const {$mitt} = useNuxtApp()
+  // Const config = useRuntimeConfig()
+  const { $mitt } = useNuxtApp()
   return useFetch(url, {
-    baseURL: "https://cantyonion.site",
+    baseURL: 'https://cantyonion.site',
     retry: false,
     timeout: 3000,
     onRequest({ options }) {
-      let token: string = ""
+      let token: string = ''
       if (import.meta.client) {
-        token = localStorage.getItem("token") || ""
+        token = localStorage.getItem('token') || ''
       }
-      if (!options.headers.get('Authorization'))
-        options.headers.set('Authorization', `Bearer ${token}`)
+      if (!options.headers.get('Authorization')) { options.headers.set('Authorization', `Bearer ${token}`) }
     },
     onResponse({ response }) {
       // HTTP状态码2XX/3XX执行，否则不执行
       if (response.status < 200 || response.status >= 400) {
         console.error(`HTTP 错误: ${response.status}`)
-        return
       }
       // 业务code状态码判断
-      // if (response._data.code !== 200) {
+      // If (response._data.code !== 200) {
       //
       // }
     },
@@ -30,10 +28,10 @@ export function requestCore<DataT>(url: string, options: UseFetchOptions<DataT>)
       $mitt.emit('eventBus', {
         level: 'error',
         title: `HTTP错误：${response.status}`,
-        message: response.statusText
+        message: response.statusText,
       })
     },
-    ...options
+    ...options,
   })
 }
 
@@ -43,8 +41,7 @@ export function get<DataT, ErrorT>(url: string, options?: UseFetchOptions<DataT>
   return async (): Promise<DataT> => {
     if (result != null) {
       await result.refresh()
-      if (result.status.value === 'success')
-        return result.data.value
+      if (result.status.value === 'success') { return result.data.value }
       throw result.error
     }
 
@@ -54,4 +51,4 @@ export function get<DataT, ErrorT>(url: string, options?: UseFetchOptions<DataT>
     }) as AsyncData<DataT, ErrorT>
     return result.data.value
   }
-}
\ No newline at end of file
+}
diff --git a/error.vue b/error.vue
index 0009506..1530c72 100644
--- a/error.vue
+++ b/error.vue
@@ -3,49 +3,49 @@ import type { NuxtError } from '#app'
 import { setMobileTopColor } from '~/composables/function'
 
 const props = defineProps({
-  error: Object as () => NuxtError
-})
+    error: Object as () => NuxtError,
+  }),
 
-const {$mitt} = useNuxtApp()
+  { $mitt } = useNuxtApp(),
 
-const errorMessages: Record<string, { icon: string; title: string; message: string }> = {
-  '400': {
-    icon: '❓',
-    title: '哦豁！请求有点问题',
-    message: '请求似乎有点小问题，服务器君有点摸不着头脑呢！',
+  errorMessages: Record<string, { icon: string, title: string, message: string }> = {
+    400: {
+      icon: '❓',
+      title: '哦豁！请求有点问题',
+      message: '请求似乎有点小问题，服务器君有点摸不着头脑呢！',
+    },
+    403: {
+      icon: '🔒',
+      title: '哎呀！大门被锁住了',
+      message: '你没有权限访问这个角落，试试返回首页吧！',
+    },
+    404: {
+      icon: '🌌',
+      title: '哎呀！你发现了超级基地的秘密角落',
+      message: '看起来你找的页面藏到了未知的时空层里！',
+    },
+    500: {
+      icon: '🚀',
+      title: '糟糕！超级基地出了一点故障',
+      message: '服务器君正在努力解决问题，请稍等片刻！',
+    },
+    502: {
+      icon: '👽',
+      title: '糟糕！基地信号被外星人拦截了',
+      message: '网络通道似乎遇到了问题，请稍后再试！',
+    },
+    default: {
+      icon: '⚠️',
+      title: '哦豁！此时遇到了点小麻烦',
+      message: '请求在穿越洋葱星球时迷路了，请返回首页重新探索！',
+    },
   },
-  '403': {
-    icon: '🔒',
-    title: '哎呀！大门被锁住了',
-    message: '你没有权限访问这个角落，试试返回首页吧！',
-  },
-  '404': {
-    icon: '🌌',
-    title: '哎呀！你发现了超级基地的秘密角落',
-    message: '看起来你找的页面藏到了未知的时空层里！',
-  },
-  '500': {
-    icon: '🚀',
-    title: '糟糕！超级基地出了一点故障',
-    message: '服务器君正在努力解决问题，请稍等片刻！',
-  },
-  '502': {
-    icon: '👽',
-    title: '糟糕！基地信号被外星人拦截了',
-    message: '网络通道似乎遇到了问题，请稍后再试！',
-  },
-  default: {
-    icon: '⚠️',
-    title: '哦豁！此时遇到了点小麻烦',
-    message: '请求在穿越洋葱星球时迷路了，请返回首页重新探索！',
-  },
-};
 
-const errorContent = computed(() => errorMessages[props.error!.statusCode] || errorMessages['default']);
+  errorContent = computed(() => errorMessages[props.error!.statusCode] || errorMessages.default)
 console.error(props.error)
 
 onMounted(() => {
-  $mitt.emit("startLoading", false)
+  $mitt.emit('startLoading', false)
   setMobileTopColor()
 })
 
@@ -56,13 +56,17 @@ onUnmounted(() => {
 
 <template>
   <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
-    <nav-bar :nav-color="true"/>
-    <alert :title="errorContent.title" :message="errorContent.message" :icon="errorContent.icon"/>
-    <footer-main/>
-    <alert-notification/>
+    <nav-bar :nav-color="true" />
+    <alert
+      :title="errorContent.title"
+      :message="errorContent.message"
+      :icon="errorContent.icon"
+    />
+    <footer-main />
+    <alert-notification />
   </div>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2236f5e..f07c4b6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,7 @@
+import js from '@eslint/js'
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt({
-  files: ['**/*.ts', '**/*.tsx']
-})
\ No newline at end of file
+export default withNuxt([
+  js.configs.all,
+  { files: ['**/*.ts', '**/*.tsx'] },
+])
diff --git a/middleware/00.loading.global.ts b/middleware/00.loading.global.ts
index 9ba1d54..1ed11c5 100644
--- a/middleware/00.loading.global.ts
+++ b/middleware/00.loading.global.ts
@@ -1,4 +1,4 @@
 export default defineNuxtRouteMiddleware(() => {
-  const {$mitt} = useNuxtApp()
+  const { $mitt } = useNuxtApp()
   $mitt.emit('startLoading', true)
-})
\ No newline at end of file
+})
diff --git a/middleware/maintenance.global.ts b/middleware/maintenance.global.ts
index 4cc39ae..8450991 100644
--- a/middleware/maintenance.global.ts
+++ b/middleware/maintenance.global.ts
@@ -1,5 +1,4 @@
 export default defineNuxtRouteMiddleware((to, _) => {
-  if (to.meta.maintenance === true && import.meta.env.DEV)
-    return navigateTo('/error/maintenance')
+  if (to.meta.maintenance === true && import.meta.env.DEV) { return navigateTo('/error/maintenance') }
   return true
-})
\ No newline at end of file
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9b30341..f5bc495 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,12 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
-// see https://blog.csdn.net/m0_53022813/article/details/137379480
-import eslintPlugin from "vite-plugin-eslint";
+// See https://blog.csdn.net/m0_53022813/article/details/137379480
+import eslintPlugin from 'vite-plugin-eslint'
 
 export default defineNuxtConfig({
-  compatibilityDate: '2024-04-03',
-  devtools: { enabled: true },
   modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', '@nuxt/image', '@nuxt/eslint'],
+  components: true,
+  devtools: { enabled: true },
   app: {
     head: {
       title: 'CANTYONION.SITE',
@@ -18,50 +18,50 @@ export default defineNuxtConfig({
       ],
       link: [
         { rel: 'icon', href: '/favicon.png' },
-      ]
-    }
+      ],
+    },
   },
-  components: true,
   css: [
     '@fortawesome/fontawesome-svg-core/styles.css',
     'github-markdown-css/github-markdown-light.css',
-    '~/assets/css/main.scss'
+    '~/assets/css/main.scss',
   ],
+  runtimeConfig: {
+    public: {
+      gitApiKey: 'fb8aec429ea7d0a36f7238dbffda9d2d66c7b045',
+      baseURL: 'https://cantyonion.site',
+    },
+  },
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome', 'vue3-typed-js', 'pinia-plugin-persistedstate'],
+  },
+  devServer: {
+    host: '0.0.0.0',
+  },
+  compatibilityDate: '2024-04-03',
+  vite: {
+    plugins: [
+      eslintPlugin({
+        include: ['**/*.ts', '**/*.vue'],
+      }),
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler', // Or "modern"
+        },
+      },
+    },
+  },
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome', 'vue3-typed-js', 'pinia-plugin-persistedstate']
-  },
-  vite: {
-    plugins: [
-      eslintPlugin({
-        include: ['**/*.ts', '**/*.vue']
-      })
-    ],
-    css: {
-      preprocessorOptions: {
-        scss: {
-          api: 'modern-compiler' // or "modern"
-        }
-      }
-    },
-  },
-  runtimeConfig: {
-    public: {
-      gitApiKey: 'fb8aec429ea7d0a36f7238dbffda9d2d66c7b045',
-      baseURL: 'https://cantyonion.site'
-    }
-  },
-  devServer: {
-    host: '0.0.0.0'
-  },
   eslint: {
     config: {
-      stylistic: true
-    }
-  }
-})
\ No newline at end of file
+      stylistic: true,
+    },
+  },
+})
diff --git a/pages/[...default].vue b/pages/[...default].vue
index 9c21ff4..063ace4 100644
--- a/pages/[...default].vue
+++ b/pages/[...default].vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-navigateTo("/error/404")
+navigateTo('/error/404')
 </script>
 
 <template>
-  
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/article.vue b/pages/article.vue
index 621f28e..33ebe74 100644
--- a/pages/article.vue
+++ b/pages/article.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-const {$mitt} = useNuxtApp()
+const { $mitt } = useNuxtApp()
 
-onMounted( () => {
+onMounted(() => {
   $mitt.emit('startLoading', false)
 })
 </script>
 
 <template>
-  <nuxt-page/>
+  <nuxt-page />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/article/[cid].vue b/pages/article/[cid].vue
index dbe1de7..33886fe 100644
--- a/pages/article/[cid].vue
+++ b/pages/article/[cid].vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-const route = useRoute()
-const cid = route.params.cid as string
-const content = ref<IBlogResponse<IPostFull>>()
+const route = useRoute(),
+  cid = route.params.cid as string,
+  content = ref<IBlogResponse<IPostFull>>(),
 
-const getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
-  params: {
-    cid: cid,
-    md: false
-  }
-})
+  getPost = get<IBlogResponse<IPostFull>, any>('/blog/index.php/api/post', {
+    params: {
+      cid,
+      md: false,
+    },
+  }),
 
-const title = computed(() => content.value?.data.title || 'Can not see me... can not see me...')
-const text = computed(() => content.value?.data.text || '## Ops!')
-const date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
+  title = computed(() => content.value?.data.title || 'Can not see me... can not see me...'),
+  text = computed(() => content.value?.data.text || '## Ops!'),
+  date = computed(() => new Date((content.value?.data.date.timeStamp || 0) * 1000)
     .toISOString()
-    .split('T')[0]
-)
-const category = computed(() => content.value?.data.category || 'default')
-const url = computed(() => content.value?.data.url || '/error/404')
+    .split('T')[0],
+  ),
+  category = computed(() => content.value?.data.category || 'default'),
+  url = computed(() => content.value?.data.url || '/error/404')
 
 content.value = await getPost()
 </script>
@@ -25,7 +25,9 @@ content.value = await getPost()
 <template>
   <section class="container m-4 mx-auto rounded-xl bg-white p-8 shadow-md lg:max-w-screen-lg">
     <div class="mb-4 border-b-2 border-dashed border-gray-200 pb-4">
-      <h1 class="text-center text-3xl font-bold">{{ title }}</h1>
+      <h1 class="text-center text-3xl font-bold">
+        {{ title }}
+      </h1>
       <div class="flex w-full items-center justify-center gap-4 text-gray-600">
         <!-- 日期 -->
         <div class="flex items-center gap-2">
@@ -43,10 +45,10 @@ content.value = await getPost()
         </div>
       </div>
     </div>
-    <markdown-section :content="text"/>
+    <markdown-section :content="text" />
   </section>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/article/index.vue b/pages/article/index.vue
index e44371f..33f8792 100644
--- a/pages/article/index.vue
+++ b/pages/article/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 definePageMeta({
-  maintenance: true
+  maintenance: true,
 })
 </script>
 
 <template>
-  <NuxtWelcome/>
+  <NuxtWelcome />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/auth.vue b/pages/auth.vue
index 96c0baf..f56c613 100644
--- a/pages/auth.vue
+++ b/pages/auth.vue
@@ -3,9 +3,8 @@
 </script>
 
 <template>
-
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/diary.vue b/pages/diary.vue
index e44371f..33f8792 100644
--- a/pages/diary.vue
+++ b/pages/diary.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 definePageMeta({
-  maintenance: true
+  maintenance: true,
 })
 </script>
 
 <template>
-  <NuxtWelcome/>
+  <NuxtWelcome />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/error/[code].vue b/pages/error/[code].vue
index df33a49..95631e6 100644
--- a/pages/error/[code].vue
+++ b/pages/error/[code].vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-const route = useRoute()
-const errorCode = parseInt(route.params.code as string, 10)
+const route = useRoute(),
+  errorCode = parseInt(route.params.code as string, 10)
 
-if (import.meta.server)
+if (import.meta.server) {
   throw createError({
     statusCode: errorCode,
   })
-else
-  showError({statusCode: errorCode})
-
+}
+else { showError({ statusCode: errorCode }) }
 </script>
 
 <template>
-
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/error/maintenance.vue b/pages/error/maintenance.vue
index 068d3ba..3a64f2d 100644
--- a/pages/error/maintenance.vue
+++ b/pages/error/maintenance.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-const {$mitt} = useNuxtApp()
+const { $mitt } = useNuxtApp()
 
 onMounted(() => {
-  $mitt.emit("startLoading", false)
+  $mitt.emit('startLoading', false)
 })
 </script>
 
 <template>
-<alert icon="🚧" title="建设中" message="此页面正在建设中，请稍后再来查看更新。"/>
+  <alert
+    icon="🚧"
+    title="建设中"
+    message="此页面正在建设中，请稍后再来查看更新。"
+  />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 75a96d3..e4c7a8d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,96 +1,98 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from "vue";
+import { computed, onMounted, ref } from 'vue'
 
 type errObj = {
-  blog?: object,
+  blog?: object
   git?: object
 }
 
-const {$mitt} = useNuxtApp()
-const recentPosts = ref<IPost[] | null>(null);
-const recentActivities = ref<IActivity[] | null>(null);
-const isLoading = ref({
-  blog: true,
-  git: true
-});
-const isError = ref({
-  blog: false,
-  git: false
-});
-const errMsg = ref<errObj>({
-  blog: undefined,
-  git: undefined
-})
+const { $mitt } = useNuxtApp(),
+  recentPosts = ref<IPost[] | null>(null),
+  recentActivities = ref<IActivity[] | null>(null),
+  isLoading = ref({
+    blog: true,
+    git: true,
+  }),
+  isError = ref({
+    blog: false,
+    git: false,
+  }),
+  errMsg = ref<errObj>({
+    blog: undefined,
+    git: undefined,
+  }),
 
-const config = useRuntimeConfig()
-const getBlogRecentPost = get<IBlogResponse<IPostsData>, any>('/blog/index.php/api/posts', {
-  params: {
-    showDigest: "excerpt",
-    limit: 100
-  }
-})
-const getActivity = get<IActivity[], any>('/git/api/v1/users/cantyonion/activities/feeds', {
-  headers: {
-    Authorization: ` ${config.public.gitApiKey}`
-  },
-  params: {
-    limit: 10,
-  }
-})
+  config = useRuntimeConfig(),
+  getBlogRecentPost = get<IBlogResponse<IPostsData>, any>('/blog/index.php/api/posts', {
+    params: {
+      showDigest: 'excerpt',
+      limit: 100,
+    },
+  }),
+  getActivity = get<IActivity[], any>('/git/api/v1/users/cantyonion/activities/feeds', {
+    headers: {
+      Authorization: ` ${config.public.gitApiKey}`,
+    },
+    params: {
+      limit: 10,
+    },
+  }),
 
-const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
-const hasActivities = computed(() => (recentActivities.value ?? []).length > 0);
-const postsData = computed(() => {
-  if (!recentPosts.value) return [];
-  if (recentPosts.value.length > 4)
-    return recentPosts.value.slice(0, 4)
-  return recentPosts.value
-})
-const activitiesData = computed((): IActivity<IContent>[] => {
-  if (!Array.isArray(recentActivities.value)) return [];
-  return recentActivities.value.map(item => {
-    try {
-      if (item.op_type === "commit_repo")
-        return {
-          ...item,
-          content: JSON.parse(item.content)
+  hasPosts = computed(() => (recentPosts.value ?? []).length > 0),
+  hasActivities = computed(() => (recentActivities.value ?? []).length > 0),
+  postsData = computed(() => {
+    if (!recentPosts.value) { return [] }
+    if (recentPosts.value.length > 4) { return recentPosts.value.slice(0, 4) }
+    return recentPosts.value
+  }),
+  activitiesData = computed((): IActivity<IContent>[] => {
+    if (!Array.isArray(recentActivities.value)) { return [] }
+    return recentActivities.value.map((item) => {
+      try {
+        if (item.op_type === 'commit_repo') {
+          return {
+            ...item,
+            content: JSON.parse(item.content),
+          }
         }
-      else return null
-    } catch (e) {
-      return null
+        return null
+      }
+      catch (e) {
+        return null
+      }
+    }).filter(item => item !== null)
+  }),
+
+  reloadPosts = async () => {
+    try {
+      isLoading.value.blog = true
+      isError.value.blog = false
+      const postData = await getBlogRecentPost()
+      if (postData !== null) { recentPosts.value = postData.data.dataSet }
     }
-  }).filter(item => item !== null)
-})
+    catch (e) {
+      isError.value.blog = true
+      errMsg.value.blog = e as object
+    }
+    finally {
+      isLoading.value.blog = false
+    }
+  },
 
-const reloadPosts = async () => {
-  try {
-    isLoading.value.blog = true
-    isError.value.blog = false
-    const postData = await getBlogRecentPost()
-    if (postData !== null)
-      recentPosts.value = postData.data.dataSet
-  } catch (e) {
-    isError.value.blog = true
-    errMsg.value.blog = e as object
+  reloadActivities = async () => {
+    try {
+      isLoading.value.git = true
+      isError.value.git = false
+      recentActivities.value = await getActivity()
+    }
+    catch (e) {
+      isError.value.git = true
+      errMsg.value.git = e as object
+    }
+    finally {
+      isLoading.value.git = false
+    }
   }
-  finally {
-    isLoading.value.blog = false
-  }
-}
-
-const reloadActivities = async () => {
-  try {
-    isLoading.value.git = true
-    isError.value.git = false
-    recentActivities.value = await getActivity()
-  } catch (e) {
-    isError.value.git = true
-    errMsg.value.git = e as object
-  }
-  finally {
-    isLoading.value.git = false
-  }
-}
 
 await Promise.allSettled([reloadPosts(), reloadActivities()])
 
@@ -101,18 +103,31 @@ onMounted(() => {
 
 <template>
   <!--  个人介绍  -->
-  <card-full-screen-intro-card/>
+  <card-full-screen-intro-card />
 
   <div class="container mx-auto xl:max-w-screen-xl">
     <!-- 博客部分 -->
     <section class="w-full px-4 sm:px-0">
       <!-- 标题部分 -->
-      <card-title :icon="['fas', 'blog']"  title="最近文章"/>
+      <card-title
+        :icon="['fas', 'blog']"
+        title="最近文章"
+      />
 
-      <card-section-card :empty="!hasPosts" :error="isError.blog" :loading="isLoading.blog" @reload="reloadPosts" :err-msg="errMsg.blog">
-        <template v-slot:default>
+      <card-section-card
+        :empty="!hasPosts"
+        :error="isError.blog"
+        :loading="isLoading.blog"
+        :err-msg="errMsg.blog"
+        @reload="reloadPosts"
+      >
+        <template #default>
           <div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            <card-article-card v-for="item in postsData" :key="item.cid" :post="item"/>
+            <card-article-card
+              v-for="item in postsData"
+              :key="item.cid"
+              :post="item"
+            />
           </div>
         </template>
       </card-section-card>
@@ -120,12 +135,25 @@ onMounted(() => {
 
     <!-- Git部分 -->
     <section class="my-4 w-full px-4 sm:px-0">
-      <card-title :icon="['fas', 'code']" title="最近活动"/>
+      <card-title
+        :icon="['fas', 'code']"
+        title="最近活动"
+      />
 
-      <card-section-card :empty="!hasActivities" :error="isError.git" :loading="isLoading.git" @reload="reloadActivities" :err-msg="errMsg.git">
-        <template v-slot:default>
+      <card-section-card
+        :empty="!hasActivities"
+        :error="isError.git"
+        :loading="isLoading.git"
+        :err-msg="errMsg.git"
+        @reload="reloadActivities"
+      >
+        <template #default>
           <div class="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
-            <card-git-card v-for="item in activitiesData" :key="item.id" :commit="item"/>
+            <card-git-card
+              v-for="item in activitiesData"
+              :key="item.id"
+              :commit="item"
+            />
           </div>
         </template>
       </card-section-card>
@@ -135,4 +163,4 @@ onMounted(() => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/soft.vue b/pages/soft.vue
index e44371f..33f8792 100644
--- a/pages/soft.vue
+++ b/pages/soft.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 definePageMeta({
-  maintenance: true
+  maintenance: true,
 })
 </script>
 
 <template>
-  <NuxtWelcome/>
+  <NuxtWelcome />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/talk.vue b/pages/talk.vue
index e44371f..33f8792 100644
--- a/pages/talk.vue
+++ b/pages/talk.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 definePageMeta({
-  maintenance: true
+  maintenance: true,
 })
 </script>
 
 <template>
-  <NuxtWelcome/>
+  <NuxtWelcome />
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/plugins/fontawsome.ts b/plugins/fontawsome.ts
index e6480fe..b811e61 100644
--- a/plugins/fontawsome.ts
+++ b/plugins/fontawsome.ts
@@ -1,24 +1,24 @@
-import {library, config} from '@fortawesome/fontawesome-svg-core'
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
-import {faClock, faFolder} from '@fortawesome/free-regular-svg-icons'
+import { config, library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faClock, faFolder } from '@fortawesome/free-regular-svg-icons'
 import {
-  faXmark,
+  faBars,
   faBlog,
-  faGauge,
-  faCodeBranch,
-  faCloud,
-  faChevronRight,
-  faCodeCommit,
-  faCode,
-  faHouse,
-  faPen,
   faBrush,
   faChessRook,
-  faBars,
   faChevronDown,
-  faLink
+  faChevronRight,
+  faCloud,
+  faCode,
+  faCodeBranch,
+  faCodeCommit,
+  faGauge,
+  faHouse,
+  faLink,
+  faPen,
+  faXmark,
 } from '@fortawesome/free-solid-svg-icons'
-import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
+import { faGithubAlt, faQq, faSteamSymbol, faWeibo } from '@fortawesome/free-brands-svg-icons'
 
 // 因为默认添加了 nuxt会造成一些错误，所以不自动添加样式
 config.autoAddCss = false
@@ -26,8 +26,8 @@ config.autoAddCss = false
 export default defineNuxtPlugin((nuxtApp) => {
   library.add(
     faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink
+    faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown, faFolder, faLink,
   )
 
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
-})
\ No newline at end of file
+})
diff --git a/plugins/markdown-it.ts b/plugins/markdown-it.ts
index c02ecac..ca631d1 100644
--- a/plugins/markdown-it.ts
+++ b/plugins/markdown-it.ts
@@ -1,48 +1,49 @@
 import md, { type Options } from 'markdown-it'
 // @ts-ignore
 import mm from 'markdown-it-mathjax3'
+
 const options: Options = {
-    // Enable HTML tags in source
-    html: true,
+  // Enable HTML tags in source
+  html: true,
 
-    // Use '/' to close single tags (<br />).
-    // This is only for full CommonMark compatibility.
-    xhtmlOut: true,
+  // Use '/' to close single tags (<br />).
+  // This is only for full CommonMark compatibility.
+  xhtmlOut: true,
 
-    // Convert '\n' in paragraphs into <br>
-    breaks: true,
+  // Convert '\n' in paragraphs into <br>
+  breaks: true,
 
-    // CSS language prefix for fenced blocks. Can be
-    // useful for external highlighters.
-    langPrefix: 'language-',
+  // CSS language prefix for fenced blocks. Can be
+  // Useful for external highlighters.
+  langPrefix: 'language-',
 
-    // Autoconvert URL-like text to links
-    linkify: true,
+  // Autoconvert URL-like text to links
+  linkify: true,
 
-    // Enable some language-neutral replacement + quotes beautification
-    // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs
-    typographer: true,
+  // Enable some language-neutral replacement + quotes beautification
+  // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs
+  typographer: true,
 
-    // Double + single quotes replacement pairs, when typographer enabled,
-    // and smartquotes on. Could be either a String or an Array.
-    //
-    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
-    // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
-    quotes: '“”‘’',
+  // Double + single quotes replacement pairs, when typographer enabled,
+  // And smartquotes on. Could be either a String or an Array.
+  //
+  // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
+  // And ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
+  quotes: '“”‘’',
 
-    // Highlighter function. Should return escaped HTML,
-    // or '' if the source string is not changed and should be escaped externally.
-    // If result starts with <pre... internal wrapper is skipped.
-    highlight: function (/*str, lang*/) { return ''; }
+  // Highlighter function. Should return escaped HTML,
+  // Or '' if the source string is not changed and should be escaped externally.
+  // If result starts with <pre... internal wrapper is skipped.
+  highlight(/* Str, lang */) { return '' },
 }
 
 export default defineNuxtPlugin(() => {
-    const render = md(options)
-        .use(mm, {
-        })
-    return {
-        provide: {
-            mdRender: render
-        }
-    }
-})
\ No newline at end of file
+  const render = md(options)
+    .use(mm, {
+    })
+  return {
+    provide: {
+      mdRender: render,
+    },
+  }
+})
diff --git a/plugins/mitt.ts b/plugins/mitt.ts
index d6ce654..8733f84 100644
--- a/plugins/mitt.ts
+++ b/plugins/mitt.ts
@@ -1,19 +1,17 @@
 import mitt from 'mitt'
 
 type Events = {
-    openPost: IPost
-    startLoading: boolean
-    eventBus: INotification
+  openPost: IPost
+  startLoading: boolean
+  eventBus: INotification
 }
 
-
-
 export default defineNuxtPlugin(() => {
-    const emitter = mitt<Events>()
+  const emitter = mitt<Events>()
 
-    return {
-        provide: {
-            mitt: emitter
-        }
-    }
-})
\ No newline at end of file
+  return {
+    provide: {
+      mitt: emitter,
+    },
+  }
+})
diff --git a/plugins/typedjs.ts b/plugins/typedjs.ts
index cdf9391..f1f74fd 100644
--- a/plugins/typedjs.ts
+++ b/plugins/typedjs.ts
@@ -3,4 +3,4 @@ import VueTyped from 'vue3-typed-js'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueTyped)
-})
\ No newline at end of file
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
index be9696b..d911017 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,16 +2,15 @@ import type { Config } from 'tailwindcss'
 
 export default {
   content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
+    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    './app.vue',
+    './error.vue',
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 } satisfies Config
-
diff --git a/types/blog.d.ts b/types/blog.d.ts
index f9bd602..acacea9 100644
--- a/types/blog.d.ts
+++ b/types/blog.d.ts
@@ -66,4 +66,4 @@ declare interface IDate {
 
 declare interface IPostFull extends IPost {
   text: string
-}
\ No newline at end of file
+}
diff --git a/types/git.d.ts b/types/git.d.ts
index 13fca47..70279f0 100644
--- a/types/git.d.ts
+++ b/types/git.d.ts
@@ -1,5 +1,5 @@
 declare interface IActivity<T = string> {
-  id: string;
+  id: string
   content: T
   op_type: string
   repo: {
@@ -17,11 +17,11 @@ declare interface IContent {
 }
 
 declare interface ICommit {
-  Sha1: string,
-  Message: string,
-  AuthorEmail: string,
-  AuthorName: string,
-  CommitterEmail: string,
-  CommitterName: string,
+  Sha1: string
+  Message: string
+  AuthorEmail: string
+  AuthorName: string
+  CommitterEmail: string
+  CommitterName: string
   Timestamp: string
-}
\ No newline at end of file
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 30e8966..ee986f3 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2,4 +2,4 @@ declare interface IBlogResponse<T = null> {
   status: string
   message: string
   data: T
-}
\ No newline at end of file
+}
diff --git a/types/notification.d.ts b/types/notification.d.ts
index 33979be..0ac69e7 100644
--- a/types/notification.d.ts
+++ b/types/notification.d.ts
@@ -1,5 +1,5 @@
 declare interface INotification {
-    level: 'warning' | 'error' | 'info' | 'success'
-    title: string
-    message: string
-}
\ No newline at end of file
+  level: 'warning' | 'error' | 'info' | 'success'
+  title: string
+  message: string
+}