refactor: 调整components目录

- 将components根据作用范围/可复用性进行分类

app/components/pages/search/SearchResults.vue

@@ -0,0 +1,199 @@
+<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>内容类型: </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}` });
+    }
+
+    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>