From dbe75ee08092e8b1b948d64e0dd0f147659e3924 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 2 Dec 2025 14:33:10 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将id相关类型由number修改为string，符合graphQL规范
---
 app/components/shared/ProductFilter.vue | 8 ++++----
 app/pages/support/documents.vue         | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/shared/ProductFilter.vue b/app/components/shared/ProductFilter.vue
index dc09d52..a03e5be 100644
--- a/app/components/shared/ProductFilter.vue
+++ b/app/components/shared/ProductFilter.vue
@@ -101,19 +101,19 @@
 
   defineProps({
     productTypeOptions: {
-      type: Array as () => Array<{ id: number; name: string }>,
+      type: Array as () => Array<DocumentListProductType>,
       default: () => [],
     },
     productOptions: {
-      type: Array as () => Array<{ id: number; name: string }>,
+      type: Array as () => Array<DocumentListProduct>,
       default: () => [],
     },
   });
 
   const model = defineModel<{
     keyword: string;
-    selectedType: number | null;
-    selectedProduct: number | null;
+    selectedType: string | null;
+    selectedProduct: string | null;
   }>();
 </script>
 
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 63519eb..4672931 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -30,8 +30,8 @@
   ];
 
   const filters = reactive({
-    selectedType: null as number | null,
-    selectedProduct: null as number | null,
+    selectedType: null as string | null,
+    selectedProduct: null as string | null,
     keyword: '',
   });
 

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 2/3] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E5=BA=93?=
 =?UTF-8?q?=E5=88=86=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>

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 3/3] =?UTF-8?q?feat:=20=E5=B8=B8=E8=A7=81=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=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>