feat: 常见问题页面分页逻辑

- el-pagination提供分页功能
- 从搜索页跳转到本路由时，自动跳转并聚焦指定问题

app/components/shared/ProductFilter.vue

@@ -101,19 +101,19 @@
 
   defineProps({
     productTypeOptions: {
-      type: Array as () => Array<{ id: number; name: string }>,
+      type: Array as () => Array<{ id: string; name: string }>,
       default: () => [],
     },
     productOptions: {
-      type: Array as () => Array<{ id: number; name: string }>,
+      type: Array as () => Array<{ id: string; name: string }>,
       default: () => [],
     },
   });
 
   const model = defineModel<{
     keyword: string;
-    selectedType: number | null;
+    selectedType: string | null;
-    selectedProduct: number | null;
+    selectedProduct: string | null;
   }>();
 </script>
 

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="documentsPerPage"
+          :total="filteredDocuments.length"
+        />
       </div>
     </div>
   </div>
@@ -30,11 +39,14 @@
   ];
 
   const filters = reactive({
-    selectedType: null as number | null,
+    selectedType: null as string | null,
-    selectedProduct: null as number | null,
+    selectedProduct: null as string | null,
     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>

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,
+    selectedType: null as string | null,
-    selectedProduct: null as number | 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>