app/pages/search.vue

@@ -29,39 +29,75 @@
       <el-skeleton :rows="4" animated />
     </div>
     <div v-else-if="hasResults" class="search-results">
-      <section
+      <!-- <section -->
-        v-for="section in filteredSections"
+      <!--   v-for="section in filteredSections" -->
-        :key="section.indexUid"
+      <!--   :key="section.indexUid" -->
-        class="search-section"
+      <!--   class="search-section" -->
-      >
+      <!-- > -->
-        <header class="section-header">
+      <!--   <header class="section-header"> -->
-          <h2 class="section-title">
+      <!--     <h2 class="section-title"> -->
-            {{ getIndexLabel(section.indexUid) }}
+      <!--       {{ getIndexLabel(section.indexUid) }} -->
-            <span class="section-count">{{
+      <!--       <span class="section-count">{{ -->
-              $t('search.result-count', { count: section.estimatedTotalHits })
+      <!--         $t('search.result-count', { count: section.estimatedTotalHits }) -->
-            }}</span>
+      <!--       }}</span> -->
-          </h2>
+      <!--     </h2> -->
-        </header>
+      <!--   </header> -->
-        <div class="section-results">
+      <!--   <div class="section-results"> -->
-          <el-card
+      <!--     <el-card -->
-            v-for="(hit, hitIndex) in section.hits"
+      <!--       v-for="(hit, hitIndex) in section.hits" -->
-            :key="`${section.indexUid}-${getHitIdentifier(hit, hitIndex)}`"
+      <!--       :key="`${section.indexUid}-${getHitIdentifier(hit, hitIndex)}`" -->
-            class="result-card"
+      <!--       class="result-card" -->
+      <!--     > -->
+      <!--       <NuxtLink -->
+      <!--         v-if="resolveHitLink(hit)" -->
+      <!--         :to="resolveHitLink(hit) || ''" -->
+      <!--         class="result-title" -->
+      <!--       > -->
+      <!--         {{ getHitTitle(hit) }} -->
+      <!--       </NuxtLink> -->
+      <!--       <h3 v-else class="result-title">{{ getHitTitle(hit) }}</h3> -->
+      <!--       <p v-if="getHitSummary(hit)" class="result-summary"> -->
+      <!--         {{ getHitSummary(hit) }} -->
+      <!--       </p> -->
+      <!--     </el-card> -->
+      <!--   </div> -->
+      <!-- </section> -->
+
+      <div class="section-results">
+        <el-card
+          v-for="(hit, hitIndex) in paginatedHits"
+          :key="`${getHitIdentifier(hit.content, hitIndex)}`"
+          class="result-card"
+        >
+          <NuxtLink
+            v-if="resolveHitLink(hit.content)"
+            :to="resolveHitLink(hit.content) || ''"
+            class="result-title"
           >
-            <NuxtLink
+            {{ getHitTitle(hit.content) }}
-              v-if="resolveHitLink(hit)"
+          </NuxtLink>
-              :to="resolveHitLink(hit) || ''"
+          <h3 v-else class="result-title">{{ getHitTitle(hit.content) }}</h3>
-              class="result-title"
+          <p v-if="getHitSummary(hit.content)" class="result-summary">
-            >
+            {{ getHitSummary(hit.content) }}
-              {{ getHitTitle(hit) }}
+          </p>
-            </NuxtLink>
+          <p v-if="hit.type" class="result-type">
-            <h3 v-else class="result-title">{{ getHitTitle(hit) }}</h3>
+            <span>内容类型: </span>
-            <p v-if="getHitSummary(hit)" class="result-summary">
+            <span class="result-type-name">{{ getIndexLabel(hit.type) }}</span>
-              {{ getHitSummary(hit) }}
+          </p>
-            </p>
+        </el-card>
-          </el-card>
+      </div>
-        </div>
+
-      </section>
+      <!-- 分页组件 -->
+      <div class="pagination-container text-align-center mt-12">
+        <el-pagination
+          class="justify-center"
+          layout="prev, pager, next"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total="hits.length"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
     <div v-else class="search-state">
       <el-empty
@@ -91,6 +127,8 @@
 
   const loading = ref(true);
   const keyword = ref('');
+  const currentPage = ref(1);
+  const pageSize = ref(5);
   const sections = ref<SearchSection[]>([]);
   const localeSections = computed(() =>
     sections.value.map((section) => ({
@@ -105,6 +143,16 @@
   const filteredSections = computed(() =>
     localeSections.value.filter((section) => section.hits.length > 0)
   );
+  const hits = computed(() =>
+    filteredSections.value.flatMap((item) =>
+      item.hits.map((content) => ({ content, type: item.indexUid }))
+    )
+  );
+  const paginatedHits = computed(() => {
+    const start = (currentPage.value - 1) * pageSize.value;
+    const end = currentPage.value * pageSize.value;
+    return hits.value.slice(start, end);
+  });
   const activeRequestId = ref(0);
 
   const indexLabels = computed<Record<string, string>>(() => ({
@@ -204,8 +252,8 @@
       if (requestId === activeRequestId.value) {
         sections.value = results;
       }
-      console.log(results);
+      console.log('hits:', hits.value);
-      console.log(localeSections.value);
+      console.log('paginatedHits:', paginatedHits.value);
     } catch (error) {
       console.error('Failed to perform search', error);
       if (requestId === activeRequestId.value) {
@@ -234,16 +282,16 @@
     };
   }
 
-  // const handleInput = debounce((value: string) => {
-  //   performSearch(value);
-  // }, 300);
-
   const handleClear = () => {
     keyword.value = '';
     sections.value = [];
     router.replace(localePath({ path: '/search' }));
   };
 
+  const handleCurrentChange = (page: number) => {
+    currentPage.value = page;
+  };
+
   watch(
     () => route.query.query,
     (newQuery) => {
@@ -367,16 +415,26 @@
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--el-color-primary);
-    margin-bottom: 0.5rem;
     display: inline-block;
   }
 
   .result-summary {
     font-size: 0.95rem;
     color: var(--el-text-color-regular);
+    margin-bottom: 0.5rem;
     line-height: 1.6;
   }
 
+  .result-type {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .result-type-name {
+    margin-left: 4px;
+    color: var(--el-color-primary);
+  }
+
   @media (max-width: 640px) {
     .search-page {
       padding: 2rem 1rem;

nuxt.config.ts

@@ -36,6 +36,16 @@ export default defineNuxtConfig({
     provider: 'local',
   },
 
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        noUnUsedLocals: false,
+        noUnUsedParameters: false,
+        strict: false,
+      },
+    },
+  },
+
   // css
   css: [
     '@unocss/reset/tailwind.css',