Update DownloadPage.vue

Author: CJKmkp

docs/.vitepress/theme/components/DownloadPage.vue

@@ -48,6 +48,18 @@
           </footer>
         </article>
       </div>
+      
+      <div class="release-navigation">
+        <button class="btn btn--outlined" :disabled="currentIndex === 0" @click="prevRelease">
+          <span class="material-symbols-outlined">arrow_back</span>
+          <span>上一版</span>
+        </button>
+        <span class="typescale-body-medium card-subtitle">{{ currentIndex + 1 }} / {{ paginatedReleases.length }}</span>
+        <button class="btn btn--outlined" :disabled="currentIndex === paginatedReleases.length - 1" @click="nextRelease">
+          <span>下一版</span>
+          <span class="material-symbols-outlined">arrow_forward</span>
+        </button>
+      </div>
     </div>
 
     <dialog class="modal" ref="downloadModalRef">
@@ -284,6 +296,18 @@ const toggleBeta = async () => {
   loading.value = false;
 };
 
+const prevRelease = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  }
+};
+
+const nextRelease = () => {
+  if (currentIndex.value < paginatedReleases.value.length - 1) {
+    currentIndex.value++;
+  }
+};
+
 // --- 初始化 ---
 onMounted(async () => {
   // 智教镜像检测
@@ -606,8 +630,8 @@ onMounted(async () => {
 /* 通用布局与组件 */
 .download-container {
   padding: 1rem;
-  max-width: 1200px;
-  margin: 0;
+  max-width: 900px;
+  margin: 0 auto;
   color: var(--md-sys-color-on-surface);
   font-family: var(--md-sys-typescale-font-family);
 }
@@ -641,6 +665,13 @@ onMounted(async () => {
   gap: 1rem;
   padding: 4rem 0;
 }
+.release-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 0;
+}
 .modal {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
@@ -710,7 +741,6 @@ onMounted(async () => {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
-  justify-items: start;
 }
 @media (min-width: 768px) {
   .release-grid {