From 5194c7269552e6c7b567c7075294f8528786d92a Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 2 Dec 2025 14:49:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E5=BA=93=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- el-pagination提供分页功能
---
 app/pages/support/documents.vue | 52 ++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 4672931..7c2b0f2 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -15,7 +15,16 @@
           :product-type-options="productTypeOptions"
           :product-options="productOptions"
         />
-        <document-list :documents="filteredDocuments" />
+        <!-- <document-list :documents="filteredDocuments" /> -->
+        <document-list :documents="paginatedDocuments" />
+        <el-pagination
+          v-model:current-page="page"
+          class="justify-center pagination-container"
+          layout="prev, pager, next"
+          hide-on-single-page
+          :page-size="10"
+          :total="filteredDocuments.length"
+        />
       </div>
     </div>
   </div>
@@ -35,6 +44,9 @@
     keyword: '',
   });
 
+  const page = ref(1);
+  const documentsPerPage = 10;
+
   const { data: documents, pending, error } = await useDocumentList();
 
   const productTypeOptions = computed(() => {
@@ -92,6 +104,13 @@
     });
   });
 
+  const paginatedDocuments = computed(() => {
+    return filteredDocuments.value.slice(
+      (page.value - 1) * documentsPerPage,
+      page.value * documentsPerPage
+    );
+  });
+
   watch(
     () => filters.selectedType,
     () => {
@@ -153,4 +172,35 @@
     height: 40px;
     font-size: 0.9rem;
   }
+
+  .pagination-container {
+    margin-top: 2rem;
+  }
+
+  :deep(.el-pagination) {
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 24px;
+      }
+    }
+
+    .el-pager {
+      gap: 0.5rem;
+    }
+    .el-pager li {
+      font-size: 1rem;
+      /* border: 1px solid #409eff; */
+      border-radius: 50%;
+
+      &:hover {
+        background-color: #ecf5ff;
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
+    }
+  }
 </style>