@sugarat/theme 0.1.49 → 0.1.50

package/src/components/BlogItem.vue

@@ -1,51 +1,9 @@
-<template>
-  <a class="blog-item" :href="withBase(route)">
-    <i class="pin" v-if="!!pin"></i>
-    <!-- 标题 -->
-    <p class="title" v-if="inMobile">{{ title }}</p>
-    <div class="info-container">
-      <!-- 左侧信息 -->
-      <div class="info-part">
-        <!-- 标题 -->
-        <p class="title" v-if="!inMobile">{{ title }}</p>
-        <!-- 简短描述 -->
-        <p class="description" v-if="!descriptionHTML && !!description">
-          {{ description }}
-        </p>
-        <template v-if="descriptionHTML">
-          <div class="description-html" v-html="descriptionHTML"></div>
-        </template>
-        <!-- 底部补充描述 -->
-        <div class="badge-list" v-if="!inMobile">
-          <span class="split" v-if="author">{{ author }}</span>
-          <span class="split">{{ showTime }}</span>
-          <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
-        </div>
-      </div>
-      <!-- 右侧封面图 -->
-      <div
-        v-if="cover"
-        class="cover-img"
-        :style="`background-image: url(${cover});`"
-      ></div>
-    </div>
-    <!-- 底部补充描述 -->
-    <div class="badge-list" v-if="inMobile">
-      <span class="split" v-if="author">{{ author }}</span>
-      <span class="split">{{ showTime }}</span>
-      <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
-    </div>
-  </a>
-</template>
-
 <script lang="ts" setup>
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { formatShowDate } from '../utils/client'
 
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
 const props = defineProps<{
   route: string
   title: string
@@ -58,7 +16,8 @@ const props = defineProps<{
   cover?: string | boolean
   pin?: number
 }>()
-
+const { width } = useWindowSize()
+const inMobile = computed(() => width.value <= 500)
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
@@ -77,6 +36,46 @@ const showTime = computed(() => {
 // }
 </script>
 
+<template>
+  <a class="blog-item" :href="withBase(route)">
+    <i v-if="!!pin" class="pin" />
+    <!-- 标题 -->
+    <p v-if="inMobile" class="title">{{ title }}</p>
+    <div class="info-container">
+      <!-- 左侧信息 -->
+      <div class="info-part">
+        <!-- 标题 -->
+        <p v-if="!inMobile" class="title">{{ title }}</p>
+        <!-- 简短描述 -->
+        <p v-if="!descriptionHTML && !!description" class="description">
+          {{ description }}
+        </p>
+        <template v-if="descriptionHTML">
+          <div class="description-html" v-html="descriptionHTML" />
+        </template>
+        <!-- 底部补充描述 -->
+        <div v-if="!inMobile" class="badge-list">
+          <span v-if="author" class="split">{{ author }}</span>
+          <span class="split">{{ showTime }}</span>
+          <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+        </div>
+      </div>
+      <!-- 右侧封面图 -->
+      <div
+        v-if="cover"
+        class="cover-img"
+        :style="`background-image: url(${cover});`"
+      />
+    </div>
+    <!-- 底部补充描述 -->
+    <div v-if="inMobile" class="badge-list">
+      <span v-if="author" class="split">{{ author }}</span>
+      <span class="split">{{ showTime }}</span>
+      <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+    </div>
+  </a>
+</template>
+
 <style lang="scss" scoped>
 .blog-item .pin {
   position: absolute;

package/src/components/BlogList.vue

@@ -1,49 +1,16 @@
-<template>
-  <ul data-pagefind-ignore="all">
-    <li v-for="v in currentWikiData" :key="v.route">
-      <blog-item
-        :route="v.route"
-        :title="v.meta.title"
-        :description="v.meta.description"
-        :description-h-t-m-l="v.meta.descriptionHTML"
-        :date="v.meta.date"
-        :tag="v.meta.tag"
-        :cover="v.meta.cover"
-        :author="v.meta.author || globalAuthor"
-        :pin="v.meta.top"
-      />
-    </li>
-  </ul>
-  <!-- 解决element-ui bug -->
-  <ClientOnly>
-    <div class="el-pagination-wrapper">
-      <el-pagination
-        v-if="wikiList.length >= pageSize"
-        small
-        background
-        :default-current-page="1"
-        :current-page="currentPage"
-        @update:current-page="handleUpdatePageNum"
-        :page-size="pageSize"
-        :total="filterData.length"
-        layout="prev, pager, next, jumper"
-      />
-    </div>
-  </ClientOnly>
-</template>
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { ElPagination } from 'element-plus'
 import { useData, useRouter } from 'vitepress'
 import { useBrowserLocation } from '@vueuse/core'
-import BlogItem from './BlogItem.vue'
 import {
-  useArticles,
   useActiveTag,
+  useArticles,
   useBlogConfig,
   useCurrentPageNum
 } from '../composables/config/blog'
-import { Theme } from '../composables/config'
+import type { Theme } from '../composables/config'
+import BlogItem from './BlogItem.vue'
 
 const { theme, frontmatter } = useData<Theme.Config>()
 const globalAuthor = computed(() => theme.value.blog?.author || '')
@@ -54,22 +21,23 @@ const activeTag = useActiveTag()
 const activeTagLabel = computed(() => activeTag.value.label)
 
 const wikiList = computed(() => {
-  const topList = docs.value.filter((v) => !v.meta.hidden && !!v.meta.top)
+  const topList = docs.value.filter(v => !v.meta.hidden && !!v.meta.top)
   topList.sort((a, b) => {
     const aTop = a?.meta?.top
     const bTop = b?.meta.top
     return Number(aTop) - Number(bTop)
   })
   const data = docs.value.filter(
-    (v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
+    v => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
   )
   data.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
   return topList.concat(data)
 })
 
 const filterData = computed(() => {
-  if (!activeTagLabel.value) return wikiList.value
-  return wikiList.value.filter((v) =>
+  if (!activeTagLabel.value)
+    return wikiList.value
+  return wikiList.value.filter(v =>
     v.meta?.tag?.includes(activeTagLabel.value)
   )
 })
@@ -88,7 +56,7 @@ const currentWikiData = computed(() => {
 const router = useRouter()
 const location = useBrowserLocation()
 const queryPageNumKey = 'pageNum'
-const handleUpdatePageNum = (current: number) => {
+function handleUpdatePageNum(current: number) {
   if (currentPage.value === current) {
     return
   }
@@ -108,7 +76,8 @@ watch(
       const { searchParams } = new URL(location.value.href)
       if (searchParams.has(queryPageNumKey)) {
         currentPage.value = Number(searchParams.get(queryPageNumKey))
-      } else {
+      }
+      else {
         currentPage.value = 1
       }
     }
@@ -118,6 +87,41 @@ watch(
   }
 )
 </script>
+
+<template>
+  <ul data-pagefind-ignore="all">
+    <li v-for="v in currentWikiData" :key="v.route">
+      <BlogItem
+        :route="v.route"
+        :title="v.meta.title"
+        :description="v.meta.description"
+        :description-h-t-m-l="v.meta.descriptionHTML"
+        :date="v.meta.date"
+        :tag="v.meta.tag"
+        :cover="v.meta.cover"
+        :author="v.meta.author || globalAuthor"
+        :pin="v.meta.top"
+      />
+    </li>
+  </ul>
+  <!-- 解决element-ui bug -->
+  <ClientOnly>
+    <div class="el-pagination-wrapper">
+      <ElPagination
+        v-if="wikiList.length >= pageSize"
+        small
+        background
+        :default-current-page="1"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="filterData.length"
+        layout="prev, pager, next, jumper"
+        @update:current-page="handleUpdatePageNum"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
 <style lang="scss" scoped>
 .el-pagination-wrapper {
   :deep(.el-pagination li.is-active.number) {

package/src/components/BlogPopover.vue

@@ -1,39 +1,7 @@
-<template>
-  <div class="theme-blog-popover" v-show="show" data-pagefind-ignore="all">
-    <div class="header">
-      <div class="title-wrapper">
-        <el-icon size="20px"><Flag /></el-icon>
-        <span class="title">{{ popoverProps?.title }}</span>
-      </div>
-      <el-icon @click="show = false" class="close-icon" size="20px"
-        ><CircleCloseFilled
-      /></el-icon>
-    </div>
-    <div class="body content" v-if="bodyContent.length">
-      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-      <hr v-if="footerContent.length" />
-    </div>
-    <div class="footer content">
-      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-    </div>
-  </div>
-  <div
-    class="theme-blog-popover-close"
-    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
-    @click="show = true"
-  >
-    <el-icon size="20px"><Flag /></el-icon>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { ElIcon, ElButton } from 'element-plus'
-import { Flag, CircleCloseFilled } from '@element-plus/icons-vue'
-import { computed, onMounted, ref, h } from 'vue'
+import { ElButton, ElIcon } from 'element-plus'
+import { CircleCloseFilled, Flag } from '@element-plus/icons-vue'
+import { computed, h, onMounted, ref } from 'vue'
 import type { BlogPopover } from '@sugarat/theme'
 import { parseStringStyle } from '@vue/shared'
 import { useBlogConfig } from '../composables/config/blog'
@@ -77,10 +45,8 @@ onMounted(() => {
   }
 })
 
-const PopoverValue = (
-  props: { key: number; item: BlogPopover.Value },
-  { slots }: any
-) => {
+function PopoverValue(props: { key: number; item: BlogPopover.Value },
+  { slots }: any) {
   const { key, item } = props
   if (item.type === 'title') {
     return h(
@@ -130,6 +96,42 @@ const PopoverValue = (
 }
 </script>
 
+<template>
+  <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
+    <div class="header">
+      <div class="title-wrapper">
+        <ElIcon size="20px">
+          <Flag />
+        </ElIcon>
+        <span class="title">{{ popoverProps?.title }}</span>
+      </div>
+      <ElIcon class="close-icon" size="20px" @click="show = false">
+        <CircleCloseFilled />
+      </ElIcon>
+    </div>
+    <div v-if="bodyContent.length" class="body content">
+      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+      <hr v-if="footerContent.length">
+    </div>
+    <div class="footer content">
+      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+    </div>
+  </div>
+  <div
+    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
+    class="theme-blog-popover-close"
+    @click="show = true"
+  >
+    <ElIcon size="20px">
+      <Flag />
+    </ElIcon>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .theme-blog-popover {
   width: 258px;

package/src/components/BlogRecommendArticle.vue

@@ -1,36 +1,5 @@
-<template>
-  <div class="recommend" :class="{ card: sidebarStyle === 'card' }"
-    v-if="_recommend !== false && (recommendList.length || emptyText)" data-pagefind-ignore="all">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title" v-if="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">{{ startIdx + idx + 1 }}</i>
-        <!-- 简介 -->
-        <div class="des">
-          <!-- title -->
-          <el-link type="info" class="title" :class="{
-            current: isCurrentDoc(v.route)
-          }" :href="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>{{ emptyText }}</div>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, withBase } from 'vitepress'
 import { ElButton, ElLink } from 'element-plus'
 import { formatShowDate } from '../utils/client'
@@ -63,43 +32,43 @@ const recommendList = computed(() => {
   const paths = decodeURIComponent(route.path).split('/')
 
   const origin = docs.value
-    .map((v) => ({ ...v, route: withBase(v.route) }))
+    .map(v => ({ ...v, route: withBase(v.route) }))
     // 过滤出公共路由前缀
     // 限制为同路由前缀
     .filter(
-      (v) =>
-        v.route.split('/').length === paths.length &&
-        v.route.startsWith(paths.slice(0, paths.length - 1).join('/'))
+      v =>
+        v.route.split('/').length === paths.length
+        && v.route.startsWith(paths.slice(0, paths.length - 1).join('/'))
     )
     // 过滤出带标题的
-    .filter((v) => !!v.meta.title)
+    .filter(v => !!v.meta.title)
     // 过滤掉自己
     .filter(
-      (v) =>
-        (recommend.value?.showSelf ?? true) ||
-        v.route !== decodeURIComponent(route.path).replace(/.html$/, '')
+      v =>
+        (recommend.value?.showSelf ?? true)
+        || v.route !== decodeURIComponent(route.path).replace(/.html$/, '')
     )
     // 过滤掉不需要展示的
-    .filter((v) => v.meta.recommend !== false)
-    .filter((v) => recommend.value?.filter?.(v) ?? true)
+    .filter(v => v.meta.recommend !== false)
+    .filter(v => recommend.value?.filter?.(v) ?? true)
 
-  const topList = origin.filter((v) => v.meta?.recommend)
+  const topList = origin.filter(v => v.meta?.recommend)
   topList.sort((a, b) => Number(a.meta.recommend) - Number(b.meta.recommend))
 
-  const normalList = origin.filter((v) => !v.meta?.recommend)
+  const normalList = origin.filter(v => !v.meta?.recommend)
   normalList.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
 
   return topList.concat(normalList)
 })
 
-const isCurrentDoc = (value: string) => {
+function isCurrentDoc(value: string) {
   return value === decodeURIComponent(route.path).replace(/.html$/, '')
 }
 
 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
 }
 // 当前页开始的序号
@@ -116,6 +85,47 @@ const showChangeBtn = computed(() => {
 })
 </script>
 
+<template>
+  <div
+    v-if="_recommend !== false && (recommendList.length || emptyText)" class="recommend"
+    :class="{ card: sidebarStyle === 'card' }" data-pagefind-ignore="all"
+  >
+    <!-- 头部 -->
+    <div class="card-header">
+      <span v-if="title" 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">{{ startIdx + idx + 1 }}</i>
+        <!-- 简介 -->
+        <div class="des">
+          <!-- title -->
+          <ElLink
+            type="info" class="title" :class="{
+              current: isCurrentDoc(v.route),
+            }" :href="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">
+      {{ emptyText }}
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;