From 97069815dce45f27b34243a2e35561838aa5eacf Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 2 Dec 2025 15:29:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=B8=E8=A7=81=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=86=E9=A1=B5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- el-pagination提供分页功能
- 从搜索页跳转到本路由时，自动跳转并聚焦指定问题
---
 app/components/shared/ProductFilter.vue |  4 +-
 app/pages/support/documents.vue         |  2 +-
 app/pages/support/faq.vue               | 81 ++++++++++++++++++++++++-
 3 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/app/components/shared/ProductFilter.vue b/app/components/shared/ProductFilter.vue
index a03e5be..c59c76d 100644
--- a/app/components/shared/ProductFilter.vue
+++ b/app/components/shared/ProductFilter.vue
@@ -101,11 +101,11 @@
 
   defineProps({
     productTypeOptions: {
-      type: Array as () => Array<DocumentListProductType>,
+      type: Array as () => Array<{ id: string; name: string }>,
       default: () => [],
     },
     productOptions: {
-      type: Array as () => Array<DocumentListProduct>,
+      type: Array as () => Array<{ id: string; name: string }>,
       default: () => [],
     },
   });
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 7c2b0f2..c03e8ea 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -22,7 +22,7 @@
           class="justify-center pagination-container"
           layout="prev, pager, next"
           hide-on-single-page
-          :page-size="10"
+          :page-size="documentsPerPage"
           :total="filteredDocuments.length"
         />
       </div>
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index dafe3c8..df53b44 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -17,7 +17,16 @@
           :product-options="productOptions"
         />
 
-        <question-list :questions="filteredQuestions" />
+        <question-list :questions="paginatedQuestions" />
+
+        <el-pagination
+          v-model:current-page="page"
+          class="justify-center pagination-container"
+          layout="prev, pager, next"
+          hide-on-single-page
+          :page-size="questionsPerPage"
+          :total="filteredQuestions.length"
+        />
       </div>
     </div>
   </div>
@@ -25,13 +34,21 @@
 
 <script setup lang="ts">
   const localePath = useLocalePath();
+  const route = useRoute();
 
   const filters = reactive({
-    selectedType: null as number | null,
-    selectedProduct: null as number | null,
+    selectedType: null as string | null,
+    selectedProduct: null as string | null,
     keyword: '',
   });
 
+  const page = ref(1);
+  const questionsPerPage = 10;
+
+  const focusQuestionId = ref<string | null>(
+    route.query.focus as string | null
+  );
+
   const breadcrumbItems = [
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.support'), to: localePath('/support') },
@@ -92,6 +109,34 @@
     });
   });
 
+  const paginatedQuestions = computed(() => {
+    const start = (page.value - 1) * questionsPerPage;
+    const end = page.value * questionsPerPage;
+    return filteredQuestions.value.slice(start, end);
+  });
+
+  watch(
+    focusQuestionId,
+    async (focusId) => {
+      if (!focusId) return;
+      if (!import.meta.client) return;
+
+      await nextTick();
+
+      const question = filteredQuestions.value.find((q) => q.id === focusId);
+      if (!question) return;
+
+      const targetIndex = filteredQuestions.value.indexOf(question);
+      const targetPage = Math.floor(targetIndex / questionsPerPage) + 1;
+      onMounted(() => {
+        if (page.value !== targetPage) {
+          page.value = targetPage;
+        }
+      });
+    },
+    { immediate: true }
+  );
+
   watch(
     () => filters.selectedType,
     () => {
@@ -136,4 +181,34 @@
   .page-content {
     padding: 1rem 2rem 2rem;
   }
+  .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>