refactor(theme): 优化文章列表翻页交互

packages/theme/src/client/components/BackToTop.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import { usePageFrontmatter } from '@vuepress/client'
 import { debounce } from 'ts-debounce'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getScrollTop, scrollTo } from '../utils'
 import { BackTopIcon } from './icons'
 
-const frontmatter = usePageFrontmatter()
-
 const opacity = ref<number>(0)
 const MAX_TOP = 300
 
@@ -14,20 +11,8 @@ const canShow = debounce((): void => {
   opacity.value = getScrollTop(document) >= MAX_TOP ? 1 : 0
 })
 
-const top = computed(() => {
-  if (__VUEPRESS_SSR__) return 0
-  if (
-    frontmatter.value.home &&
-    (frontmatter.value.banner || frontmatter.value.mobileBanner)
-  ) {
-    return document.documentElement.clientHeight - 58
-  } else {
-    return 0
-  }
-})
-
 const scrollToTop = (): void => {
-  scrollTo(document, top.value)
+  scrollTo(document, 0)
 }
 
 onMounted(() => {

packages/theme/src/client/components/BloggerInfo.vue

@@ -69,8 +69,6 @@ const useSocialList = (): SocialRef => {
 const socialList = useSocialList()
 
 const postStat = usePostStat()
-
-console.log(postStat)
 </script>
 <template>
   <DropdownTransition>

packages/theme/src/client/components/HomeBigBanner.vue

@@ -2,10 +2,7 @@
 import { usePageFrontmatter, withBase } from '@vuepress/client'
 import { isLinkHttp } from '@vuepress/shared'
 import { computed, onMounted, ref } from 'vue'
-import type {
+import type { PlumeThemeHomeFrontmatter } from '../../shared'
-  PlumeThemeHomeFrontmatter,
-  PlumeThemeLocaleOptions,
-} from '../../shared'
 import { useThemeLocaleData } from '../composables'
 import { scrollTo } from '../utils'
 import { ArrowBottomIcon } from './icons'

packages/theme/src/client/components/Pagination.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useOffsetPagination } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
+import { ArrowDoubleLeftIcon, ArrowDoubleRightIcon } from './icons'
 
 const emit = defineEmits(['togglePage'])
 const props = defineProps({
@@ -75,7 +76,7 @@ function handleJump(): void {
         :disabled="isFirstPage"
         @click="prev"
       >
-        prev
+        <ArrowDoubleLeftIcon />
       </button>
       <template v-for="count in pageList" :key="count">
         <button
@@ -94,7 +95,7 @@ function handleJump(): void {
         :disabled="isLastPage"
         @click="next"
       >
-        next
+        <ArrowDoubleRightIcon />
       </button>
     </div>
     <div class="pagination-form can-hide">
@@ -151,6 +152,15 @@ function handleJump(): void {
         color: var(--c-text);
       }
     }
+
+    &.btn-prev,
+    &.btn-next {
+      .icon {
+        width: 14px;
+        height: 14px;
+        vertical-align: text-top;
+      }
+    }
   }
 
   .pagination-form {

packages/theme/src/client/components/PostList.vue

@@ -33,23 +33,23 @@ watch(
 )
 
 const route = useRoute()
-
+let offsetHeight = 0
 onBeforeRouteUpdate((to) => {
   if (__VUEPRESS_SSR__) return
   setPostListPage((to.query.p as unknown as number) || 1)
   const { home, banner, mobileBanner } = frontmatter.value
   let top = 0
   if (home && (banner || mobileBanner)) {
-    rect =
+    offsetHeight =
-      rect || document.querySelector('.navbar-wrapper')?.getBoundingClientRect()
+      offsetHeight ||
-    top = document.documentElement.clientHeight - (rect?.height || 0)
+      document.querySelector<HTMLElement>('.navbar-wrapper')?.offsetHeight ||
+      0
+    top = document.documentElement.clientHeight - offsetHeight
   }
-  scrollTo(document, top)
+  setTimeout(() => scrollTo(document, top), 0)
 })
 
 setPostListPage((route.query.p as unknown as number) || 1)
-
-let rect: any
 const togglePage = (currentPage: number): void => {
   router.push({
     path: route.path,

packages/theme/src/client/components/icons/icon.ts

@@ -88,3 +88,22 @@ export const PostIcon: FunctionalComponent = () =>
     })
   )
 PostIcon.displayName = 'PostIcon'
+
+export const ArrowDoubleRightIcon: FunctionalComponent = () =>
+  h(IconBase, { name: 'arrow-double-right', viewBox: '0 0 1024 1024' }, () =>
+    h('path', {
+      d: 'M160.117 212.026v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L173.448 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.338-11.93L487.814 512 165.456 223.957a16 16 0 0 1-5.339-11.931z m272.057 0v-82.233a8 8 0 0 1 13.33-5.966l407.697 364.298c0.9 0.804 1.753 1.658 2.556 2.558 11.764 13.186 10.62 33.419-2.556 45.192L445.505 900.173a8 8 0 0 1-13.33-5.966v-82.233a16 16 0 0 1 5.339-11.93L759.87 512 437.514 223.957a16 16 0 0 1-5.34-11.931z',
+    })
+  )
+ArrowDoubleRightIcon.displayName = 'ArrowDoubleRightIcon'
+
+export const ArrowDoubleLeftIcon: FunctionalComponent = () =>
+  h(IconBase, { name: 'arrow-double-left', viewBox: '0 0 1024 1024' }, () => [
+    h('path', {
+      d: 'M495.976 476.195c19.777 17.656 21.494 48 3.837 67.774a48.003 48.003 0 0 1-3.837 3.836L536.082 512l-40.106-35.805zM864 212.083v-82.217a8 8 0 0 0-13.328-5.967L442.69 488.13c-0.9 0.804-1.754 1.657-2.558 2.557-11.772 13.184-10.626 33.412 2.558 45.183l407.983 364.231A8 8 0 0 0 864 894.134v-82.217a16 16 0 0 0-5.344-11.936L536.082 512l322.574-287.981A16 16 0 0 0 864 212.083zM495.976 476.195c19.777 17.656 21.494 48 3.837 67.774a48.003 48.003 0 0 1-3.837 3.836L536.082 512l-40.106-35.805zM864 212.083v-82.217a8 8 0 0 0-13.328-5.967L442.69 488.13c-0.9 0.804-1.754 1.657-2.558 2.557-11.772 13.184-10.626 33.412 2.558 45.183l407.983 364.231A8 8 0 0 0 864 894.134v-82.217a16 16 0 0 0-5.344-11.936L536.082 512l322.574-287.981A16 16 0 0 0 864 212.083z',
+    }),
+    h('path', {
+      d: 'M223.976 476.195c19.777 17.656 21.494 48 3.837 67.774a48.003 48.003 0 0 1-3.837 3.836L264.082 512l-40.106-35.805zM592 212.083v-82.217a8 8 0 0 0-13.328-5.967L170.69 488.13c-0.9 0.804-1.754 1.657-2.558 2.557-11.772 13.184-10.626 33.412 2.558 45.183l407.983 364.231A8 8 0 0 0 592 894.134v-82.217a16 16 0 0 0-5.344-11.936L264.082 512l322.574-287.981A16 16 0 0 0 592 212.083zM223.976 476.195c19.777 17.656 21.494 48 3.837 67.774a48.003 48.003 0 0 1-3.837 3.836L264.082 512l-40.106-35.805zM592 212.083v-82.217a8 8 0 0 0-13.328-5.967L170.69 488.13c-0.9 0.804-1.754 1.657-2.558 2.557-11.772 13.184-10.626 33.412 2.558 45.183l407.983 364.231A8 8 0 0 0 592 894.134v-82.217a16 16 0 0 0-5.344-11.936L264.082 512l322.574-287.981A16 16 0 0 0 592 212.083z',
+    }),
+  ])
+ArrowDoubleLeftIcon.displayName = 'ArrowDoubleLeftIcon'