app/components/SearchResults.vue

@@ -1,30 +1,31 @@
 <template>
   <div v-if="hasResults">
     <div class="search-results">
-      <el-card
+      <NuxtLink
         v-for="(hit, hitIndex) in paginatedHits"
         :key="`${getHitIdentifier(hit.content, hitIndex)}`"
-        class="result-card"
-        @click="navigateTo(resolveHitLink(hit.content))"
+        :to="localePath(resolveHitLink(hit.content))"
       >
-        <h3 class="result-title">{{ getHitTitle(hit.content) }}</h3>
-        <p v-if="getHitSummary(hit.content)" class="result-summary">
-          {{ getHitSummary(hit.content) }}
-        </p>
-        <p v-if="hit.type" class="result-type">
-          <span>内容类型: </span>
-          <span class="result-type-name">{{ getIndexLabel(hit.type) }}</span>
-        </p>
-      </el-card>
+        <el-card class="result-card">
+          <h3 class="result-title">{{ getHitTitle(hit.content) }}</h3>
+          <p v-if="getHitSummary(hit.content)" class="result-summary">
+            {{ getHitSummary(hit.content) }}
+          </p>
+          <p v-if="hit.type" class="result-type">
+            <span>内容类型: </span>
+            <span class="result-type-name">{{ getIndexLabel(hit.type) }}</span>
+          </p>
+        </el-card>
+      </NuxtLink>
     </div>
 
     <!-- 分页组件 -->
     <div class="pagination-container text-align-center mt-12">
       <el-pagination
+        v-model:current-page="page"
         class="justify-center"
         layout="prev, pager, next"
         hide-on-single-page
-        :current-page="currentPage"
         :page-size="pageSize"
         :total="filteredHits.length"
         @current-change="handleCurrentChange"
@@ -50,9 +51,12 @@
 
   const props = defineProps<{
     hitItems: HitItem[];
+    currentPage: number;
     category?: string;
   }>();
 
+  const emit = defineEmits(['update:current-page']);
+
   // i18n相关
   const { t } = useI18n();
 
@@ -61,7 +65,12 @@
   const route = useRoute();
 
   // 分页相关
-  const currentPage = ref(1);
+  const page = computed({
+    get: () => props.currentPage,
+    set: (val) => {
+      emit('update:current-page', val);
+    },
+  });
   const pageSize = ref(5);
 
   // 搜索相关
@@ -74,8 +83,8 @@
     }
   });
   const paginatedHits = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value;
-    const end = currentPage.value * pageSize.value;
+    const start = (page.value - 1) * pageSize.value;
+    const end = page.value * pageSize.value;
     return filteredHits.value.slice(start, end);
   });
 
@@ -173,9 +182,7 @@
     return null;
   };
 
-  const handleCurrentChange = (page: number) => {
-    currentPage.value = page;
-  };
+  const handleCurrentChange = () => {};
 </script>
 
 <style scoped>
@@ -217,4 +224,31 @@
     margin-left: 4px;
     color: var(--el-color-primary);
   }
+
+  :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/search.vue

@@ -28,31 +28,50 @@
     <div v-else-if="hasResults" class="search-results">
       <el-tabs v-model="activeTab">
         <el-tab-pane :label="`全部(${resultCount['all']})`" name="all">
-          <search-results :hit-items="hits" />
+          <search-results
+            v-model:current-page="currentPage"
+            :hit-items="hits"
+          />
         </el-tab-pane>
         <el-tab-pane
           :label="`产品(${resultCount['production'] || 0})`"
           name="production"
         >
-          <search-results :hit-items="hits" category="production" />
+          <search-results
+            v-model:current-page="currentPage"
+            :hit-items="hits"
+            category="production"
+          />
         </el-tab-pane>
         <el-tab-pane
           :label="`解决方案(${resultCount['solution'] || 0})`"
           name="solution"
         >
-          <search-results :hit-items="hits" category="solution" />
+          <search-results
+            v-model:current-page="currentPage"
+            :hit-items="hits"
+            category="solution"
+          />
         </el-tab-pane>
         <el-tab-pane
           :label="`相关问题(${resultCount['question'] || 0})`"
           name="question"
         >
-          <search-results :hit-items="hits" category="question" />
+          <search-results
+            v-model:current-page="currentPage"
+            :hit-items="hits"
+            category="question"
+          />
         </el-tab-pane>
         <el-tab-pane
           :label="`文档资料(${resultCount['document'] || 0})`"
           name="document"
         >
-          <search-results :hit-items="hits" category="document" />
+          <search-results
+            v-model:current-page="currentPage"
+            :hit-items="hits"
+            category="document"
+          />
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -118,6 +137,9 @@
     return map;
   });
 
+  // 分类控制
+  const currentPage = ref(1);
+
   const hasResults = computed(() =>
     filteredSections.value.some((section) => section.hits.length > 0)
   );