feat: 搜索页添加分类功能

- 使用Element Plus的tab组件搜索页添加了分类功能
- 重构搜索页代码，将搜索结果作为单独的组件
- 调整代码格式，去除部分无用代码

app/components/SearchResults.vue

@@ -0,0 +1,220 @@
+<template>
+  <div v-if="hasResults">
+    <div class="search-results">
+      <el-card
+        v-for="(hit, hitIndex) in paginatedHits"
+        :key="`${getHitIdentifier(hit.content, hitIndex)}`"
+        class="result-card"
+        @click="navigateTo(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>
+    </div>
+
+    <!-- 分页组件 -->
+    <div class="pagination-container text-align-center mt-12">
+      <el-pagination
+        class="justify-center"
+        layout="prev, pager, next"
+        hide-on-single-page
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="filteredHits.length"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <el-empty
+      :description="
+        route.query.query
+          ? $t('search.no-results', { query: route.query?.query })
+          : $t('search.no-query')
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface HitItem {
+    content: SearchHit;
+    type: string;
+  }
+
+  const props = defineProps<{
+    hitItems: HitItem[];
+    category?: string;
+  }>();
+
+  // i18n相关
+  const { t } = useI18n();
+
+  // 路由相关
+  const localePath = useLocalePath();
+  const route = useRoute();
+
+  // 分页相关
+  const currentPage = ref(1);
+  const pageSize = ref(5);
+
+  // 搜索相关
+  const hits = props.hitItems;
+  const filteredHits = computed(() => {
+    if (props.category) {
+      return hits.filter((hit) => hit.type === props.category);
+    } else {
+      return hits;
+    }
+  });
+  const paginatedHits = computed(() => {
+    const start = (currentPage.value - 1) * pageSize.value;
+    const end = currentPage.value * pageSize.value;
+    return filteredHits.value.slice(start, end);
+  });
+
+  const indexLabels = computed<Record<string, string>>(() => ({
+    production: t('search.sections.production'),
+    solution: t('search.sections.solution'),
+    support: t('search.sections.support'),
+    default: t('search.sections.default'),
+  }));
+
+  /**
+   * 根据indexUid获取标签名
+   * @param indexUid 搜索条目的IndexUid
+   */
+  const getIndexLabel = (indexUid: string) =>
+    indexLabels.value[indexUid] || indexLabels.value.default;
+
+  const hasResults = computed(() => {
+    return filteredHits.value.length > 0;
+  });
+
+  /**
+   * 获取搜索条目的唯一标识符
+   * 尝试根据搜索条目的相关词条获取唯一标识符
+   * 若未找到，则fallback至给定的index
+   * @param hit 搜索条目
+   * @param index 条目索引
+   */
+  const getHitIdentifier = (hit: SearchHit, index: number) => {
+    const candidate = [hit.objectID, hit.documentId, hit.id, hit.slug].find(
+      (value) =>
+        ['string', 'number'].includes(typeof value) && String(value).length > 0
+    );
+    return candidate != null ? String(candidate) : String(index);
+  };
+
+  /**
+   * 获取搜索条目的标题
+   * @param hit 搜索条目
+   */
+  const getHitTitle = (hit: SearchHit) => {
+    const candidate = [
+      hit.title,
+      hit.name,
+      hit.heading,
+      hit.documentTitle,
+    ].find((value) => typeof value === 'string' && value.trim().length > 0);
+    return candidate ? String(candidate) : t('search.untitled');
+  };
+
+  /**
+   * 获取搜索条目的摘要
+   * @param hit 搜索条目
+   */
+  const getHitSummary = (hit: SearchHit) => {
+    const candidate = [
+      hit.summary,
+      hit.description,
+      hit.snippet,
+      hit.content,
+      hit.text,
+    ].find((value) => typeof value === 'string' && value.trim().length > 0);
+    return candidate ? String(candidate) : '';
+  };
+
+  /**
+   * 解析条目链接
+   * 根据条目类型返回正确的跳转链接
+   * @param hit 搜索条目
+   */
+  const resolveHitLink = (hit: SearchHit) => {
+    if (typeof hit.route === 'string' && hit.route.trim().length > 0) {
+      return localePath(hit.route);
+    }
+
+    const slugCandidate = [hit.slug, hit.documentId, hit.id, hit.objectID].find(
+      (value) =>
+        ['string', 'number'].includes(typeof value) && String(value).length > 0
+    );
+
+    if (!slugCandidate) {
+      return null;
+    }
+
+    const slug = String(slugCandidate);
+
+    if (hit.indexUid === 'production') {
+      return localePath({ path: `/productions/${slug}` });
+    }
+
+    if (hit.indexUid === 'solution') {
+      return localePath({ path: `/solutions/${slug}` });
+    }
+
+    return null;
+  };
+
+  const handleCurrentChange = (page: number) => {
+    currentPage.value = page;
+  };
+</script>
+
+<style scoped>
+  .search-results {
+    display: grid;
+    gap: 1.5rem;
+    padding: 0.5rem;
+  }
+
+  .result-card {
+    border-radius: 12px;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .result-card:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  }
+
+  .result-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--el-color-primary);
+    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);
+  }
+</style>

app/pages/search.vue

@@ -20,84 +20,41 @@
           {{ $t('search.search-button') }}
         </el-button>
       </div>
-      <p v-if="hasResults" class="search-meta">
-        {{ $t('search.results-for', { query: route.query?.query }) }}
-      </p>
     </div>
 
     <div v-if="loading" class="search-state">
       <el-skeleton :rows="4" animated />
     </div>
     <div v-else-if="hasResults" class="search-results">
-      <!-- <section -->
+      <el-tabs v-model="activeTab">
-      <!--   v-for="section in filteredSections" -->
+        <el-tab-pane :label="`全部(${resultCount['all']})`" name="all">
-      <!--   :key="section.indexUid" -->
+          <search-results :hit-items="hits" />
-      <!--   class="search-section" -->
+        </el-tab-pane>
-      <!-- > -->
+        <el-tab-pane
-      <!--   <header class="section-header"> -->
+          :label="`产品(${resultCount['production'] || 0})`"
-      <!--     <h2 class="section-title"> -->
+          name="production"
-      <!--       {{ getIndexLabel(section.indexUid) }} -->
-      <!--       <span class="section-count">{{ -->
-      <!--         $t('search.result-count', { count: section.estimatedTotalHits }) -->
-      <!--       }}</span> -->
-      <!--     </h2> -->
-      <!--   </header> -->
-      <!--   <div class="section-results"> -->
-      <!--     <el-card -->
-      <!--       v-for="(hit, hitIndex) in section.hits" -->
-      <!--       :key="`${section.indexUid}-${getHitIdentifier(hit, hitIndex)}`" -->
-      <!--       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
+          <search-results :hit-items="hits" category="production" />
-            v-if="resolveHitLink(hit.content)"
+        </el-tab-pane>
-            :to="resolveHitLink(hit.content) || ''"
+        <el-tab-pane
-            class="result-title"
+          :label="`解决方案(${resultCount['solution'] || 0})`"
-          >
+          name="solution"
-            {{ getHitTitle(hit.content) }}
+        >
-          </NuxtLink>
+          <search-results :hit-items="hits" category="solution" />
-          <h3 v-else class="result-title">{{ getHitTitle(hit.content) }}</h3>
+        </el-tab-pane>
-          <p v-if="getHitSummary(hit.content)" class="result-summary">
+        <el-tab-pane
-            {{ getHitSummary(hit.content) }}
+          :label="`相关问题(${resultCount['question'] || 0})`"
-          </p>
+          name="question"
-          <p v-if="hit.type" class="result-type">
+        >
-            <span>内容类型: </span>
+          <search-results :hit-items="hits" category="question" />
-            <span class="result-type-name">{{ getIndexLabel(hit.type) }}</span>
+        </el-tab-pane>
-          </p>
+        <el-tab-pane
-        </el-card>
+          :label="`文档资料(${resultCount['document'] || 0})`"
-      </div>
+          name="document"
-
+        >
-      <!-- 分页组件 -->
+          <search-results :hit-items="hits" category="document" />
-      <div class="pagination-container text-align-center mt-12">
+        </el-tab-pane>
-        <el-pagination
+      </el-tabs>
-          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
@@ -113,118 +70,58 @@
 
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
-  import type { SearchHit, SearchSection } from '~/composables/useMeilisearch';
 
+  // i18n相关
   const { t } = useI18n();
+  const { getStrapiLocale } = useLocalizations();
+  const strapiLocale = getStrapiLocale();
+
+  // 路由相关
   const route = useRoute();
   const router = useRouter();
   const localePath = useLocalePath();
 
-  const { getStrapiLocale } = useLocalizations();
+  // 搜索相关
-  const strapiLocale = getStrapiLocale();
-
-  const { search } = useMeilisearch();
-
   const loading = ref(true);
+  const { search } = useMeilisearch();
   const keyword = ref('');
-  const currentPage = ref(1);
+  const activeRequestId = ref(0);
-  const pageSize = ref(5);
+
   const sections = ref<SearchSection[]>([]);
-  const localeSections = computed(() =>
+  // 本地化+空Section过滤
-    sections.value.map((section) => ({
-      ...section,
-      hits: section.hits.filter(
-        (hit) =>
-          !hit.locale ||
-          String(hit.locale).toLowerCase() === strapiLocale.toLowerCase()
-      ),
-    }))
-  );
   const filteredSections = computed(() =>
-    localeSections.value.filter((section) => section.hits.length > 0)
+    sections.value
+      .map((section) => ({
+        ...section,
+        hits: section.hits.filter(
+          (hit) =>
+            !hit.locale ||
+            String(hit.locale).toLowerCase() === strapiLocale.toLowerCase()
+        ),
+      }))
+      .filter((section) => section.hits.length > 0)
   );
+  // 展平hits
   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;
+  const activeTab = ref('all');
-    return hits.value.slice(start, end);
+  const resultCount = computed(() => {
+    const map: Record<string, number> = { all: hits.value.length };
+    for (const hit of hits.value) {
+      map[hit.type] = (map[hit.type] ?? 0) + 1;
+    }
+    return map;
   });
-  const activeRequestId = ref(0);
-
-  const indexLabels = computed<Record<string, string>>(() => ({
-    production: t('search.sections.production'),
-    solution: t('search.sections.solution'),
-    support: t('search.sections.support'),
-    default: t('search.sections.default'),
-  }));
-
-  const getIndexLabel = (indexUid: string) =>
-    indexLabels.value[indexUid] || indexLabels.value.default;
 
   const hasResults = computed(() =>
-    localeSections.value.some((section) => section.hits.length > 0)
+    filteredSections.value.some((section) => section.hits.length > 0)
   );
 
-  const getHitIdentifier = (hit: SearchHit, index: number) => {
-    const candidate = [hit.objectID, hit.documentId, hit.id, hit.slug].find(
-      (value) =>
-        ['string', 'number'].includes(typeof value) && String(value).length > 0
-    );
-    return candidate != null ? String(candidate) : String(index);
-  };
-
-  const getHitTitle = (hit: SearchHit) => {
-    const candidate = [
-      hit.title,
-      hit.name,
-      hit.heading,
-      hit.documentTitle,
-    ].find((value) => typeof value === 'string' && value.trim().length > 0);
-    return candidate ? String(candidate) : t('search.untitled');
-  };
-
-  const getHitSummary = (hit: SearchHit) => {
-    const candidate = [
-      hit.summary,
-      hit.description,
-      hit.snippet,
-      hit.content,
-      hit.text,
-    ].find((value) => typeof value === 'string' && value.trim().length > 0);
-    return candidate ? String(candidate) : '';
-  };
-
-  const resolveHitLink = (hit: SearchHit) => {
-    if (typeof hit.route === 'string' && hit.route.trim().length > 0) {
-      return localePath(hit.route);
-    }
-
-    const slugCandidate = [hit.slug, hit.documentId, hit.id, hit.objectID].find(
-      (value) =>
-        ['string', 'number'].includes(typeof value) && String(value).length > 0
-    );
-
-    if (!slugCandidate) {
-      return null;
-    }
-
-    const slug = String(slugCandidate);
-
-    if (hit.indexUid === 'production') {
-      return localePath({ path: `/productions/${slug}` });
-    }
-
-    if (hit.indexUid === 'solution') {
-      return localePath({ path: `/solutions/${slug}` });
-    }
-
-    return null;
-  };
-
   const navigateToQuery = (value: string) => {
     const trimmed = value.trim();
     if (!trimmed) return;
@@ -253,7 +150,7 @@
         sections.value = results;
       }
       console.log('hits:', hits.value);
-      console.log('paginatedHits:', paginatedHits.value);
+      console.log(resultCount.value);
     } catch (error) {
       console.error('Failed to perform search', error);
       if (requestId === activeRequestId.value) {
@@ -266,32 +163,12 @@
     }
   };
 
-  function debounce<T extends (...args: never[]) => void>(
-    fn: T,
-    delay: number
-  ): (...args: Parameters<T>) => void {
-    let timer: ReturnType<typeof setTimeout> | null = null;
-
-    return function (this: never, ...args: Parameters<T>) {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        fn.apply(this, args);
-      }, delay);
-    };
-  }
-
   const handleClear = () => {
     keyword.value = '';
     sections.value = [];
     router.replace(localePath({ path: '/search' }));
   };
 
-  const handleCurrentChange = (page: number) => {
-    currentPage.value = page;
-  };
-
   watch(
     () => route.query.query,
     (newQuery) => {
@@ -368,73 +245,6 @@
     padding: 3rem 0;
   }
 
-  .search-results {
-    display: flex;
-    flex-direction: column;
-    gap: 2.5rem;
-  }
-
-  .search-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .section-header {
-    display: flex;
-    align-items: baseline;
-    gap: 0.75rem;
-  }
-
-  .section-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: var(--el-text-color-primary);
-  }
-
-  .section-count {
-    font-size: 0.9rem;
-    color: var(--el-text-color-secondary);
-  }
-
-  .section-results {
-    display: grid;
-    gap: 1.5rem;
-  }
-
-  .result-card {
-    border-radius: 12px;
-    transition: box-shadow 0.2s ease;
-  }
-
-  .result-card:hover {
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
-  }
-
-  .result-title {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--el-color-primary);
-    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;