@sugarat/theme 0.1.48 → 0.1.50

package/src/components/BlogComment.vue

@@ -1,47 +1,3 @@
-<template>
-  <div
-    class="comment"
-    v-if="show"
-    id="giscus-comment"
-    data-pagefind-ignore="all"
-    ref="commentEl"
-  >
-    <el-affix
-      :class="{ hidden: commentIsVisible }"
-      class="comment-btn"
-      target="main"
-      position="bottom"
-      :offset="40"
-    >
-      <el-button
-        @click="handleScrollToComment"
-        plain
-        :icon="Comment"
-        type="primary"
-        >评论</el-button
-      >
-    </el-affix>
-    <component
-      v-if="showComment"
-      :is="'script'"
-      src="https://giscus.app/client.js"
-      :data-repo="commentConfig.repo"
-      :data-repo-id="commentConfig.repoId"
-      :data-category="commentConfig.category"
-      :data-category-id="commentConfig.categoryId"
-      :data-mapping="commentConfig.mapping || 'pathname'"
-      data-reactions-enabled="1"
-      data-emit-metadata="0"
-      :data-input-position="commentConfig.inputPosition || 'top'"
-      :data-theme="isDark ? 'dark' : 'light'"
-      :data-lang="commentConfig.lang || 'zh-CN'"
-      crossorigin="anonymous"
-      :data-loading="commentConfig.loading || 'eager'"
-      async
-    >
-    </component>
-  </div>
-</template>
 <script setup lang="ts">
 import { useElementVisibility } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
@@ -49,13 +5,13 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElAffix, ElButton } from 'element-plus'
 import { Comment } from '@element-plus/icons-vue'
 import { useGiscusConfig } from '../composables/config/blog'
-import { Theme } from '../composables/config/index'
+import type { Theme } from '../composables/config/index'
 
 const { frontmatter } = useData()
 const commentEl = ref(null)
 const commentIsVisible = useElementVisibility(commentEl)
 
-const handleScrollToComment = () => {
+function handleScrollToComment() {
   document.querySelector('#giscus-comment')?.scrollIntoView({
     behavior: 'smooth',
     block: 'start'
@@ -78,10 +34,10 @@ const show = computed(() => {
     return giscusConfig
   }
   return (
-    giscusConfig.repo &&
-    giscusConfig.repoId &&
-    giscusConfig.category &&
-    giscusConfig.categoryId
+    giscusConfig.repo
+    && giscusConfig.repoId
+    && giscusConfig.category
+    && giscusConfig.categoryId
   )
 })
 
@@ -110,6 +66,53 @@ watch(isDark, () => {
   })
 })
 </script>
+
+<template>
+  <div
+    v-if="show"
+    id="giscus-comment"
+    ref="commentEl"
+    class="comment"
+    data-pagefind-ignore="all"
+  >
+    <ElAffix
+      :class="{ hidden: commentIsVisible }"
+      class="comment-btn"
+      target="main"
+      position="bottom"
+      :offset="40"
+    >
+      <ElButton
+        plain
+        :icon="Comment"
+        type="primary"
+        @click="handleScrollToComment"
+      >
+        评论
+      </ElButton>
+    </ElAffix>
+    <!-- eslint-disable-next-line vue/require-component-is -->
+    <component
+      is="script"
+      v-if="showComment"
+      src="https://giscus.app/client.js"
+      :data-repo="commentConfig.repo"
+      :data-repo-id="commentConfig.repoId"
+      :data-category="commentConfig.category"
+      :data-category-id="commentConfig.categoryId"
+      :data-mapping="commentConfig.mapping || 'pathname'"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      :data-input-position="commentConfig.inputPosition || 'top'"
+      :data-theme="isDark ? 'dark' : 'light'"
+      :data-lang="commentConfig.lang || 'zh-CN'"
+      crossorigin="anonymous"
+      :data-loading="commentConfig.loading || 'eager'"
+      async
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .comment {
   width: 100%;

package/src/components/BlogDocCover.vue

@@ -1,7 +1,3 @@
-<template>
-  <img class="blog-doc-cover" v-if="cover && !hiddenCover" :src="cover" />
-</template>
-
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import { computed } from 'vue'
@@ -15,6 +11,10 @@ const hiddenCover = computed(
 )
 </script>
 
+<template>
+  <img v-if="cover && !hiddenCover" class="blog-doc-cover" :src="cover">
+</template>
+
 <style lang="scss" scoped>
 img.blog-doc-cover.blog-doc-cover.blog-doc-cover {
   width: 100%;

package/src/components/BlogFriendLink.vue

@@ -1,33 +1,3 @@
-<template>
-  <div class="card friend-wrapper" v-if="friendList?.length">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title svg-icon"><svg width="512" height="512" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#EF9645"
-            d="M16.428 30.331a2.31 2.31 0 0 0 3.217-.568a.798.798 0 0 0-.197-1.114l-1.85-1.949l4.222 2.955a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-3.596-3.305l5.375 3.763a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-4.766-4.073l5.864 4.105a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089L4.733 11.194l-3.467 5.521c-.389.6-.283 1.413.276 1.891l7.786 6.671c.355.304.724.591 1.107.859l5.993 4.195z" />
-          <path fill="#FFDC5D"
-            d="M29.802 21.752L18.5 13.601l-.059-.08l.053-.08l.053-.053l.854.469c.958.62 3.147 1.536 4.806 1.536c1.135 0 1.815-.425 2.018-1.257a1.409 1.409 0 0 0-1.152-1.622a6.788 6.788 0 0 1-2.801-1.091l-.555-.373c-.624-.421-1.331-.898-1.853-1.206c-.65-.394-1.357-.585-2.163-.585c-1.196 0-2.411.422-3.585.83l-1.266.436a5.18 5.18 0 0 1-1.696.271c-1.544 0-3.055-.586-4.516-1.152l-.147-.058a1.389 1.389 0 0 0-1.674.56L1.35 15.669a1.357 1.357 0 0 0 .257 1.761l7.785 6.672c.352.301.722.588 1.1.852l6.165 4.316a2 2 0 0 0 2.786-.491a.803.803 0 0 0-.196-1.115l-1.833-1.283a.424.424 0 0 1-.082-.618a.422.422 0 0 1 .567-.075l3.979 2.785a1.4 1.4 0 0 0 1.606-2.294l-3.724-2.606a.424.424 0 0 1-.082-.618a.423.423 0 0 1 .567-.075l5.132 3.593a1.4 1.4 0 0 0 1.606-2.294l-4.868-3.407a.42.42 0 0 1-.081-.618a.377.377 0 0 1 .506-.066l5.656 3.959a1.4 1.4 0 0 0 1.606-2.295z" />
-          <path fill="#EF9645"
-            d="M16.536 27.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 23.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.495 1.495 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 23.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 25.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm16.555-4.137l.627-.542l-6.913-10.85l-12.27 1.985a1.507 1.507 0 0 0-1.235 1.737c.658 2.695 6.003.693 8.355-.601l11.436 8.271z" />
-          <path fill="#FFCC4D"
-            d="M16.536 26.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 22.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.497 1.497 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 22.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 24.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm21.557-7.456a1.45 1.45 0 0 0 .269-1.885l-.003-.005l-3.467-6.521a1.488 1.488 0 0 0-1.794-.6c-1.992.771-4.174 1.657-6.292.937l-1.098-.377c-1.948-.675-4.066-1.466-6-.294c-.695.409-1.738 1.133-2.411 1.58a6.873 6.873 0 0 1-2.762 1.076a1.502 1.502 0 0 0-1.235 1.737c.613 2.512 5.3.908 7.838-.369a.968.968 0 0 1 1.002.081l11.584 8.416l4.369-3.776z" />
-        </svg> 友情链接</span>
-    </div>
-    <!-- 文章列表 -->
-    <ol class="friend-list">
-      <li v-for="v in friendList" :key="v.nickname">
-        <a :href="v.url" target="_blank">
-          <el-avatar :size="50" :src="v.avatar" :alt="v.alt" />
-          <div>
-            <span class="nickname">{{ v.nickname }}</span>
-            <p class="des">{{ v.des }}</p>
-          </div>
-        </a>
-      </li>
-    </ol>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { ElAvatar } from 'element-plus'
 import { useDark } from '@vueuse/core'
@@ -58,6 +28,44 @@ const friendList = computed(() => {
 })
 </script>
 
+<template>
+  <div v-if="friendList?.length" class="card friend-wrapper">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title svg-icon"><svg width="512" height="512" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill="#EF9645"
+          d="M16.428 30.331a2.31 2.31 0 0 0 3.217-.568a.798.798 0 0 0-.197-1.114l-1.85-1.949l4.222 2.955a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-3.596-3.305l5.375 3.763a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-4.766-4.073l5.864 4.105a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089L4.733 11.194l-3.467 5.521c-.389.6-.283 1.413.276 1.891l7.786 6.671c.355.304.724.591 1.107.859l5.993 4.195z"
+        />
+        <path
+          fill="#FFDC5D"
+          d="M29.802 21.752L18.5 13.601l-.059-.08l.053-.08l.053-.053l.854.469c.958.62 3.147 1.536 4.806 1.536c1.135 0 1.815-.425 2.018-1.257a1.409 1.409 0 0 0-1.152-1.622a6.788 6.788 0 0 1-2.801-1.091l-.555-.373c-.624-.421-1.331-.898-1.853-1.206c-.65-.394-1.357-.585-2.163-.585c-1.196 0-2.411.422-3.585.83l-1.266.436a5.18 5.18 0 0 1-1.696.271c-1.544 0-3.055-.586-4.516-1.152l-.147-.058a1.389 1.389 0 0 0-1.674.56L1.35 15.669a1.357 1.357 0 0 0 .257 1.761l7.785 6.672c.352.301.722.588 1.1.852l6.165 4.316a2 2 0 0 0 2.786-.491a.803.803 0 0 0-.196-1.115l-1.833-1.283a.424.424 0 0 1-.082-.618a.422.422 0 0 1 .567-.075l3.979 2.785a1.4 1.4 0 0 0 1.606-2.294l-3.724-2.606a.424.424 0 0 1-.082-.618a.423.423 0 0 1 .567-.075l5.132 3.593a1.4 1.4 0 0 0 1.606-2.294l-4.868-3.407a.42.42 0 0 1-.081-.618a.377.377 0 0 1 .506-.066l5.656 3.959a1.4 1.4 0 0 0 1.606-2.295z"
+        />
+        <path
+          fill="#EF9645"
+          d="M16.536 27.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 23.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.495 1.495 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 23.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 25.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm16.555-4.137l.627-.542l-6.913-10.85l-12.27 1.985a1.507 1.507 0 0 0-1.235 1.737c.658 2.695 6.003.693 8.355-.601l11.436 8.271z"
+        />
+        <path
+          fill="#FFCC4D"
+          d="M16.536 26.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 22.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.497 1.497 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 22.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 24.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm21.557-7.456a1.45 1.45 0 0 0 .269-1.885l-.003-.005l-3.467-6.521a1.488 1.488 0 0 0-1.794-.6c-1.992.771-4.174 1.657-6.292.937l-1.098-.377c-1.948-.675-4.066-1.466-6-.294c-.695.409-1.738 1.133-2.411 1.58a6.873 6.873 0 0 1-2.762 1.076a1.502 1.502 0 0 0-1.235 1.737c.613 2.512 5.3.908 7.838-.369a.968.968 0 0 1 1.002.081l11.584 8.416l4.369-3.776z"
+        />
+      </svg> 友情链接</span>
+    </div>
+    <!-- 文章列表 -->
+    <ol class="friend-list">
+      <li v-for="v in friendList" :key="v.nickname">
+        <a :href="v.url" target="_blank">
+          <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
+          <div>
+            <span class="nickname">{{ v.nickname }}</span>
+            <p class="des">{{ v.des }}</p>
+          </div>
+        </a>
+      </li>
+    </ol>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -128,4 +136,5 @@ const friendList = computed(() => {
       font-size: 14px;
     }
   }
-}</style>
+}
+</style>

package/src/components/BlogHomeBanner.vue

@@ -1,14 +1,3 @@
-<template>
-  <div>
-    <h1>
-      <span class="name">{{ name }}</span>
-      <span class="motto" v-show="motto">{{ motto }}</span>
-    </h1>
-    <div class="inspiring-wrapper">
-      <h2 @click="changeSlogan" v-show="!!inspiring">{{ inspiring }}</h2>
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useData } from 'vitepress'
@@ -28,7 +17,7 @@ const inspiringList = computed<string[]>(() => {
     ...new Set(
       [frontmatter.value.blog?.inspiring, home?.inspiring]
         .flat()
-        .filter((v) => !!v)
+        .filter(v => !!v)
     )
   ]
 })
@@ -41,7 +30,7 @@ watch(inspiringTimeout, () => {
   startTimer()
 })
 const timer = ref<any>(0)
-const startTimer = () => {
+function startTimer() {
   if (timer.value) {
     clearTimeout(timer.value)
   }
@@ -61,15 +50,17 @@ onUnmounted(() => {
   }
 })
 
-const changeSlogan = async () => {
+async function changeSlogan() {
   // 顺手启动定时器
   startTimer()
 
-  if (inspiringList.value.length < 1) return
+  if (inspiringList.value.length < 1)
+    return
 
   inspiringIndex.value = (inspiringIndex.value + 1) % inspiringList.value.length
   const newValue = inspiringList.value[inspiringIndex.value]
-  if (newValue === inspiring.value) return
+  if (newValue === inspiring.value)
+    return
 
   // 重新渲染数据，同时触发动画
   inspiring.value = ''
@@ -78,6 +69,21 @@ const changeSlogan = async () => {
   }, 100)
 }
 </script>
+
+<template>
+  <div>
+    <h1>
+      <span class="name">{{ name }}</span>
+      <span v-show="motto" class="motto">{{ motto }}</span>
+    </h1>
+    <div class="inspiring-wrapper">
+      <h2 v-show="!!inspiring" @click="changeSlogan">
+        {{ inspiring }}
+      </h2>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 h1 {
   text-align: center;

package/src/components/BlogHomeOverview.vue

@@ -1,22 +1,3 @@
-<template>
-  <div class="card overview-data">
-    <div class="overview-item">
-      <span class="count">{{ notHiddenArticles.length }}</span>
-      <span class="label">博客文章</span>
-    </div>
-    <div class="split"></div>
-    <div class="overview-item">
-      <span class="count">+{{ currentMonth?.length }}</span>
-      <span class="label">本月更新</span>
-    </div>
-    <div class="split"></div>
-    <div class="overview-item">
-      <span class="count">+{{ currentWeek?.length }}</span>
-      <span class="label">本周更新</span>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { isCurrentWeek } from '../utils/client'
@@ -24,7 +5,7 @@ import { useArticles } from '../composables/config/blog'
 
 const docs = useArticles()
 const notHiddenArticles = computed(() => {
-  return docs.value.filter((v) => v.meta?.publish !== false)
+  return docs.value.filter(v => v.meta?.publish !== false)
 })
 const nowMonth = new Date().getMonth()
 const nowYear = new Date().getFullYear()
@@ -43,6 +24,25 @@ const currentWeek = computed(() => {
 })
 </script>
 
+<template>
+  <div class="card overview-data">
+    <div class="overview-item">
+      <span class="count">{{ notHiddenArticles.length }}</span>
+      <span class="label">博客文章</span>
+    </div>
+    <div class="split" />
+    <div class="overview-item">
+      <span class="count">+{{ currentMonth?.length }}</span>
+      <span class="label">本月更新</span>
+    </div>
+    <div class="split" />
+    <div class="overview-item">
+      <span class="count">+{{ currentWeek?.length }}</span>
+      <span class="label">本周更新</span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;

package/src/components/BlogHomeTags.vue

@@ -1,38 +1,3 @@
-<template>
-  <div class="card tags" v-if="tags.length" data-pagefind-ignore="all">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title svg-icon"><svg t="1695048840129" class="icon" viewBox="0 0 1024 1024" version="1.1"
-          xmlns="http://www.w3.org/2000/svg" p-id="4290" width="200" height="200">
-          <path
-            d="M810.88 245.888a118.432 118.432 0 1 0 0 236.864 118.432 118.432 0 0 0 0-236.864z m-151.008 118.432a151.008 151.008 0 1 1 302.016 0 151.008 151.008 0 0 1-302.016 0z"
-            fill="#D3D3D3" p-id="4291"></path>
-          <path
-            d="M774.08 565.6l61.76-160.64c6.4-16.64 2.56-35.84-10.24-48.64l-151.04-151.04c-12.8-12.8-31.68-16.64-48.64-10.24l-160.64 61.76c-12.16 4.8-23.36 11.84-32.64 21.12l-355.2 355.2c-17.92 17.92-17.92 46.72 0 64.32l256 256c17.92 17.92 46.72 17.92 64.32 0l355.2-355.2c9.28-9.28 16.32-20.16 21.12-32.64z m-159.36-149.12c-22.08-22.08-22.08-57.6 0-79.68 22.08-22.08 57.6-22.08 79.68 0 22.08 22.08 22.08 57.6 0 79.68-22.08 21.76-57.92 21.76-79.68 0z"
-            fill="#FCD53F" p-id="4292"></path>
-          <path
-            d="M654.4 320.48c14.4 0 28.8 5.44 39.68 16.64 22.08 22.08 22.08 57.6 0 79.68-10.88 10.88-25.28 16.64-39.68 16.64-14.4 0-28.8-5.44-39.68-16.64-22.08-22.08-22.08-57.6 0-79.68 10.88-11.2 25.28-16.64 39.68-16.64z m0-30.08c-23.04 0-44.8 8.96-61.12 25.28a86.72 86.72 0 0 0 0 122.24c16.32 16.32 38.08 25.28 61.12 25.28s44.8-8.96 61.12-25.28a86.72 86.72 0 0 0 0-122.24c-16.32-16.32-38.08-25.28-61.12-25.28z"
-            fill="#F8312F" p-id="4293"></path>
-          <path
-            d="M676.16 348.032c8.992 0 16.288 7.296 16.288 16.288a118.144 118.144 0 0 0 64.288 105.44h0.064c22.24 11.296 47.36 15.264 71.68 11.84a16.288 16.288 0 0 1 4.48 32.32 154.24 154.24 0 0 1-90.848-15.04 150.72 150.72 0 0 1-82.24-134.56c0-8.992 7.296-16.288 16.288-16.288z"
-            fill="#D3D3D3" p-id="4294"></path>
-        </svg> 标签</span>
-      <el-tag v-if="activeTag.label" :type="(activeTag.type as any)" :effect="colorMode" closable @close="handleCloseTag">
-        {{ activeTag.label }}
-      </el-tag>
-    </div>
-    <!-- 标签列表 -->
-    <ul class="tag-list">
-      <li v-for="(tag, idx) in tags" :key="tag">
-        <el-tag :type="tagType[idx % tagType.length]" @click="handleTagClick(tag, tagType[idx % tagType.length])"
-          :effect="colorMode">
-          {{ tag }}
-        </el-tag>
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
@@ -47,7 +12,7 @@ import {
 const docs = useArticles()
 
 const tags = computed(() => {
-  return [...new Set(docs.value.map((v) => v.meta.tag || []).flat(3))]
+  return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
 })
 
 const activeTag = useActiveTag()
@@ -60,18 +25,18 @@ const colorMode = computed(() => (isDark.value ? 'light' : 'dark'))
 
 const tagType: any = ['', 'info', 'success', 'warning', 'danger']
 const currentPage = useCurrentPageNum()
+const router = useRouter()
 
-const handleCloseTag = () => {
+function handleCloseTag() {
   activeTag.value.label = ''
   activeTag.value.type = ''
   currentPage.value = 1
   router.go(`${window.location.origin}${router.route.path}`)
 }
 
-const router = useRouter()
 const location = useBrowserLocation()
 
-const handleTagClick = (tag: string, type: string) => {
+function handleTagClick(tag: string, type: string) {
   if (tag === activeTag.value.label) {
     handleCloseTag()
     return
@@ -99,6 +64,49 @@ watch(
 )
 </script>
 
+<template>
+  <div v-if="tags.length" class="card tags" data-pagefind-ignore="all">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title svg-icon"><svg
+        t="1695048840129" class="icon" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" p-id="4290" width="200" height="200"
+      >
+        <path
+          d="M810.88 245.888a118.432 118.432 0 1 0 0 236.864 118.432 118.432 0 0 0 0-236.864z m-151.008 118.432a151.008 151.008 0 1 1 302.016 0 151.008 151.008 0 0 1-302.016 0z"
+          fill="#D3D3D3" p-id="4291"
+        />
+        <path
+          d="M774.08 565.6l61.76-160.64c6.4-16.64 2.56-35.84-10.24-48.64l-151.04-151.04c-12.8-12.8-31.68-16.64-48.64-10.24l-160.64 61.76c-12.16 4.8-23.36 11.84-32.64 21.12l-355.2 355.2c-17.92 17.92-17.92 46.72 0 64.32l256 256c17.92 17.92 46.72 17.92 64.32 0l355.2-355.2c9.28-9.28 16.32-20.16 21.12-32.64z m-159.36-149.12c-22.08-22.08-22.08-57.6 0-79.68 22.08-22.08 57.6-22.08 79.68 0 22.08 22.08 22.08 57.6 0 79.68-22.08 21.76-57.92 21.76-79.68 0z"
+          fill="#FCD53F" p-id="4292"
+        />
+        <path
+          d="M654.4 320.48c14.4 0 28.8 5.44 39.68 16.64 22.08 22.08 22.08 57.6 0 79.68-10.88 10.88-25.28 16.64-39.68 16.64-14.4 0-28.8-5.44-39.68-16.64-22.08-22.08-22.08-57.6 0-79.68 10.88-11.2 25.28-16.64 39.68-16.64z m0-30.08c-23.04 0-44.8 8.96-61.12 25.28a86.72 86.72 0 0 0 0 122.24c16.32 16.32 38.08 25.28 61.12 25.28s44.8-8.96 61.12-25.28a86.72 86.72 0 0 0 0-122.24c-16.32-16.32-38.08-25.28-61.12-25.28z"
+          fill="#F8312F" p-id="4293"
+        />
+        <path
+          d="M676.16 348.032c8.992 0 16.288 7.296 16.288 16.288a118.144 118.144 0 0 0 64.288 105.44h0.064c22.24 11.296 47.36 15.264 71.68 11.84a16.288 16.288 0 0 1 4.48 32.32 154.24 154.24 0 0 1-90.848-15.04 150.72 150.72 0 0 1-82.24-134.56c0-8.992 7.296-16.288 16.288-16.288z"
+          fill="#D3D3D3" p-id="4294"
+        />
+      </svg> 标签</span>
+      <ElTag v-if="activeTag.label" :type="activeTag.type as any" :effect="colorMode" closable @close="handleCloseTag">
+        {{ activeTag.label }}
+      </ElTag>
+    </div>
+    <!-- 标签列表 -->
+    <ul class="tag-list">
+      <li v-for="(tag, idx) in tags" :key="tag">
+        <ElTag
+          :type="tagType[idx % tagType.length]" :effect="colorMode"
+          @click="handleTagClick(tag, tagType[idx % tagType.length])"
+        >
+          {{ tag }}
+        </ElTag>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -145,4 +153,5 @@ watch(
     margin-bottom: 10px;
     cursor: pointer;
   }
-}</style>
+}
+</style>

package/src/components/BlogHotArticle.vue

@@ -1,40 +1,11 @@
-<template>
-  <div class="card recommend" v-if="recommendList.length || empty" data-pagefind-ignore="all">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title" v-html="title"></span>
-      <el-button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">{{ nextText }}</el-button>
-    </div>
-    <!-- 文章列表 -->
-    <ol class="recommend-container" v-if="currentWikiData.length">
-      <li v-for="(v, idx) in currentWikiData" :key="v.route">
-        <!-- 序号 -->
-        <i class="num">{{ idx + 1 }}</i>
-        <!-- 简介 -->
-        <div class="des">
-          <!-- title -->
-          <el-link type="info" class="title" :href="withBase(v.route)">{{
-            v.meta.title
-          }}</el-link>
-          <!-- 描述信息 -->
-          <div class="suffix">
-            <!-- 日期 -->
-            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
-          </div>
-        </div>
-      </li>
-    </ol>
-    <div class="empty-text" v-else>{{ empty }}</div>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import { ElButton, ElLink } from 'element-plus'
 import { withBase } from 'vitepress'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 import { formatShowDate } from '../utils/client'
 import { fireSVG } from '../constants/svg'
+
 const { hotArticle } = useBlogConfig()
 const title = computed(() => hotArticle?.title || (`<span class="svg-icon">${fireSVG}</span>` + ' 精选文章'))
 const nextText = computed(() => hotArticle?.nextText || '换一组')
@@ -44,15 +15,15 @@ const empty = computed(() => hotArticle?.empty ?? '暂无精选内容')
 const docs = useArticles()
 
 const recommendList = computed(() => {
-  const data = docs.value.filter((v) => v.meta.sticky)
+  const data = docs.value.filter(v => v.meta.sticky)
   data.sort((a, b) => b.meta.sticky! - a.meta.sticky!)
   return [...data]
 })
 
 const currentPage = ref(1)
-const changePage = () => {
-  const newIdx =
-    currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
+function changePage() {
+  const newIdx
+    = currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
   currentPage.value = newIdx + 1
 }
 
@@ -67,6 +38,42 @@ const showChangeBtn = computed(() => {
 })
 </script>
 
+<template>
+  <div v-if="recommendList.length || empty" class="card recommend" data-pagefind-ignore="all">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title" v-html="title" />
+      <ElButton v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
+        {{ nextText }}
+      </ElButton>
+    </div>
+    <!-- 文章列表 -->
+    <ol v-if="currentWikiData.length" class="recommend-container">
+      <li v-for="(v, idx) in currentWikiData" :key="v.route">
+        <!-- 序号 -->
+        <i class="num">{{ idx + 1 }}</i>
+        <!-- 简介 -->
+        <div class="des">
+          <!-- title -->
+          <ElLink type="info" class="title" :href="withBase(v.route)">
+            {{
+              v.meta.title
+            }}
+          </ElLink>
+          <!-- 描述信息 -->
+          <div class="suffix">
+            <!-- 日期 -->
+            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
+          </div>
+        </div>
+      </li>
+    </ol>
+    <div v-else class="empty-text">
+      {{ empty }}
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -170,4 +177,4 @@ const showChangeBtn = computed(() => {
   font-size: 14px;
   text-align: center;
 }
-</style>
+</style>

package/src/components/BlogImagePreview.vue

@@ -10,15 +10,15 @@ const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
     idx: 0
   }
 )
-const previewImage = (e: Event) => {
+function previewImage(e: Event) {
   const target = e.target as HTMLElement
   const currentTarget = e.currentTarget as HTMLElement
   if (target.tagName.toLowerCase() === 'img') {
     const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
       '.content-container .main img'
     )
-    const idx = Array.from(imgs).findIndex((el) => el === target)
-    const urls = Array.from(imgs).map((el) => el.src)
+    const idx = Array.from(imgs).findIndex(el => el === target)
+    const urls = Array.from(imgs).map(el => el.src)
 
     const url = target.getAttribute('src')
     previewImageInfo.url = url!
@@ -45,6 +45,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ElImageViewer :infinite="false" hide-on-click-modal teleported @close="show = false" :url-list="previewImageInfo.list"
-    :initial-index="previewImageInfo.idx" v-if="show" />
+  <ElImageViewer
+    v-if="show" :infinite="false" hide-on-click-modal teleported :url-list="previewImageInfo.list"
+    :initial-index="previewImageInfo.idx" @close="show = false"
+  />
 </template>