jinshen-website/app/components/pages/search/SearchResults.vue

<template>
  <div v-if="hasResults">
    <div class="search-results">
      <NuxtLink
        v-for="hit in paginatedHits"
        :key="`${hit.type}-${hit.id}`"
        :to="localePath(resolveHitLink(hit))"
      >
        <el-card class="result-card">
          <h3 class="result-title">{{ hit.title }}</h3>
          <p v-if="hit.summary" class="result-summary">
            {{ hit.summary }}
          </p>
          <p v-if="hit.type" class="result-type">
            <span>{{ $t('search.section') }}: </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
        :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">
  const props = defineProps<{
    searchItems: SearchItemView[];
    currentPage: number;
    category?: string;
  }>();

  const emit = defineEmits(['update:current-page']);

  // i18n相关
  const { t } = useI18n();

  // 路由相关
  const localePath = useLocalePath();
  const route = useRoute();

  // 分页相关
  const page = computed({
    get: () => props.currentPage,
    set: (val) => {
      emit('update:current-page', val);
    },
  });
  const pageSize = ref(5);

  // 搜索相关
  const items = props.searchItems;
  const filteredHits = computed(() => {
    if (props.category) {
      return items.filter((item) => item.type === props.category);
    } else {
      return items;
    }
  });
  const paginatedHits = computed(() => {
    const start = (page.value - 1) * pageSize.value;
    const end = page.value * pageSize.value;
    return filteredHits.value.slice(start, end);
  });

  const indexLabels = computed<Record<string, string>>(() => ({
    product: t('search.sections.product'),
    solution: t('search.sections.solution'),
    question: t('search.sections.faq'),
    document: t('search.sections.document'),
    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;
  });

  /**
   * 解析条目链接
   * 根据条目类型返回正确的跳转链接
   * @param item 搜索条目
   */
  const resolveHitLink = (item: SearchItemView) => {
    const slugCandidate = item.id;

    if (!slugCandidate) {
      return null;
    }

    const slug = String(slugCandidate);

    if (item.type === 'product') {
      return localePath({ path: `/products/${slug}` });
    }

    if (item.type === 'solution') {
      return localePath({ path: `/solutions/${slug}` });
    }

    if (item.type === 'document') {
      return localePath({ path: `/download/${slug}` });
    }

    if (item.type === 'question') {
      return localePath({ path: `/support/faq`, query: { focus: slug } });
    }

    return null;
  };

  const handleCurrentChange = () => {};
</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);
  }

  :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>