docs(site): paginate the release list

Same pattern as the blog list: page the releases at 9 per page with numbered
controls, only shown once there are more than one page.

Author: qianmoQ

docs/src/pages/ReleaseList.vue

@@ -7,7 +7,7 @@
       {{ t('releaseList.intro') }}
     </p>
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-      <RouterLink v-for="r in releases" :key="r.version" :to="`/release/${r.version}`"
+      <RouterLink v-for="r in pagedReleases" :key="r.version" :to="`/release/${r.version}`"
                   class="group relative flex flex-col p-6 rounded-2xl border-2 border-slate-200 dark:border-slate-800 hover:border-brand-400 dark:hover:border-brand-500 bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-900/50 hover:shadow-xl hover:shadow-brand-500/10 dark:hover:shadow-brand-500/20 transition-all duration-300 hover:-translate-y-1">
         <!-- 版本号和箭头 -->
         <div class="flex items-center justify-between mb-4">
@@ -42,12 +42,46 @@
         <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-500/0 via-brand-500/0 to-brand-500/5 dark:to-brand-500/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
       </RouterLink>
     </div>
+
+    <!-- 分页 -->
+    <nav v-if="totalPages > 1" class="flex items-center justify-center gap-2 mt-12" aria-label="分页">
+      <button type="button" :disabled="page === 1" @click="goTo(page - 1)"
+              class="w-10 h-10 flex items-center justify-center rounded-xl border-2 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 enabled:hover:border-brand-400 dark:enabled:hover:border-brand-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+        </svg>
+      </button>
+      <button v-for="n in totalPages" :key="n" type="button" @click="goTo(n)"
+              :aria-current="n === page ? 'page' : undefined"
+              :class="n === page
+                ? 'w-10 h-10 flex items-center justify-center rounded-xl border-2 border-brand-500 bg-brand-500 text-white font-semibold'
+                : 'w-10 h-10 flex items-center justify-center rounded-xl border-2 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:border-brand-400 dark:hover:border-brand-500 transition-colors'">
+        {{ n }}
+      </button>
+      <button type="button" :disabled="page === totalPages" @click="goTo(page + 1)"
+              class="w-10 h-10 flex items-center justify-center rounded-xl border-2 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 enabled:hover:border-brand-400 dark:enabled:hover:border-brand-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+      </button>
+    </nav>
   </div>
 </template>
 
 <script setup lang="ts">
+import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {releases, latestRelease} from '../content/releases'
 
 const {t} = useI18n()
+
+const PAGE_SIZE = 9
+const page = ref(1)
+const totalPages = computed(() => Math.max(1, Math.ceil(releases.length / PAGE_SIZE)))
+const pagedReleases = computed(() => releases.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE))
+
+const goTo = (n: number) => {
+  page.value = Math.min(Math.max(1, n), totalPages.value)
+  if (typeof window !== 'undefined') window.scrollTo({top: 0, behavior: 'smooth'})
+}
 </script>