feat(market): scroll to top when page update, fix #170

packages/market/client/components/list.vue

@@ -1,6 +1,15 @@
 <template>
-  <div class="market-list">
+  <div class="market-list" ref="root">
     <slot name="header" v-bind="{ all, packages, hasFilter: hasFilter(modelValue) }"></slot>
+    <el-pagination
+      class="pagination"
+      background
+      v-model:current-page="page"
+      :pager-count="5"
+      :page-size="limit"
+      :total="packages.length"
+      layout="prev, pager, next"
+    />
     <div class="market-container">
       <market-package
         v-for="data in pages[page - 1]"
@@ -28,7 +37,7 @@
 
 <script lang="ts" setup>
 
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import { SearchObject } from '@koishijs/registry'
 import { getSorted, getFiltered, hasFilter, kConfig } from '../utils'
 import MarketPackage from './package.vue'
@@ -40,7 +49,7 @@ const props = defineProps<{
   gravatar?: string,
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'update:page'])
 
 const config = inject(kConfig, {})
 
@@ -60,6 +69,8 @@ const limit = computed(() => {
 
 const page = ref(1)
 
+watch(page, (page) => emit('update:page', page))
+
 const pages = computed(() => {
   const result: SearchObject[][] = []
   for (let i = 0; i < packages.value.length; i += limit.value) {

plugins/market/client/components/market.vue

@@ -15,11 +15,12 @@
       </div>
     </div>
 
-    <el-scrollbar v-else-if="store.market.total">
+    <el-scrollbar ref="root" v-else-if="store.market.total">
       <market-list
         v-model="words"
         :data="data"
-        :gravatar="store.market.gravatar">
+        :gravatar="store.market.gravatar"
+        @update:page="scrollToTop">
         <template #header="{ hasFilter, all, packages }">
           <market-search v-model="words"></market-search>
           <div class="market-hint">
@@ -64,6 +65,8 @@ provide(kConfig, {
   installed: global.static ? undefined : installed,
 })
 
+const root = ref()
+
 const words = ref<string[]>([''])
 
 const prompt = computed(() => words.value.filter(w => w).join(' '))
@@ -92,6 +95,10 @@ function handleClick(data: SearchObject) {
   active.value = data.package.name
 }
 
+function scrollToTop() {
+  root.value?.scrollTo(0, 0)
+}
+
 </script>
 
 <style lang="scss">