refactor: 调整components目录

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

app/components/pages/products/SpecTable.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="spec-collapse">
+    <el-collapse v-model="activeName">
+      <el-collapse-item
+        v-for="item in data"
+        :key="item.name"
+        :title="item.name"
+        :name="item.name"
+      >
+        <el-descriptions :column="1" border>
+          <el-descriptions-item
+            v-for="subItem in item.specs"
+            :key="subItem.key"
+            :label="subItem.value"
+          >
+            {{ subItem.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Object as () => ProductSpecGroupView[],
+      required: true,
+    },
+  });
+
+  // 默认全部展开
+  const activeName = ref<string[]>(
+    props.data.map((item: ProductSpecGroupView) => {
+      return item.name;
+    }) || []
+  );
+</script>
+
+<style scoped>
+  .spec-collapse ::v-deep(.el-collapse-item__header) {
+    font-size: 1rem;
+    padding: 1rem;
+  }
+</style>

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>

app/components/pages/support/SupportTabs.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="page-tab">
+    <el-segmented
+      v-model="activeTab"
+      class="segmented"
+      :options="options"
+      block
+      size="large"
+      @change="handleSegmentedChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const activeTab = ref(props.modelValue || '');
+  const options = [
+    { label: '服务支持', value: '' },
+    { label: '常见问题', value: 'faq' },
+    { label: '文档资料', value: 'documents' },
+    { label: '联系售后', value: 'contact-us' },
+  ];
+
+  const handleSegmentedChange = (value: string) => {
+    const localePath = useLocalePath();
+    navigateTo(localePath(`/support/${value}`));
+  };
+</script>
+
+<style scoped>
+  .segmented {
+    --el-segmented-bg-color: transparent;
+    --el-segmented-item-active-color: var(--el-color-primary);
+    --el-segmented-item-color: var(--el-text-color-secondary);
+    --el-segmented-item-hover-color: var(--el-color-primary);
+    --el-segmented-item-border-color: transparent;
+    --el-segmented-item-active-border-color: transparent;
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
+
+  .segmented :deep(.el-segmented__item-selected) {
+    /* --el-border-radius-base: 16px; */
+    transition: none;
+    background: transparent;
+  }
+
+  .segmented :deep(.el-segmented__item) {
+    &:hover {
+      background: transparent;
+      color: var(--el-color-primary);
+    }
+
+    &.is-selected {
+      color: var(--el-color-primary-dark-2);
+      border-bottom: 4px solid var(--el-color-primary-dark-2);
+    }
+  }
+</style>