refactor: 重构搜索页

- 提取页面部分为SearchHeader与SearchTabs组件

app/components/pages/search/SearchHeader.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="search-header">
+    <h1 class="page-title">{{ $t('search.title') }}</h1>
+    <div class="search-bar">
+      <el-input
+        v-model="keyword"
+        class="search-input"
+        :placeholder="$t('search-placeholder')"
+        :prefix-icon="Search"
+        clearable
+        @keyup.enter="navigateToQuery(keyword)"
+        @clear="handleClear"
+      />
+      <el-button
+        type="primary"
+        class="search-button"
+        @click="navigateToQuery(keyword)"
+      >
+        {{ $t('search.search-button') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
+  const keyword = defineModel<string>({ default: '' });
+  const localePath = useLocalePath();
+  const router = useRouter();
+
+  const navigateToQuery = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    navigateTo({
+      path: localePath('/search'),
+      query: { query: trimmed },
+    });
+  };
+
+  const handleClear = () => {
+    keyword.value = '';
+    router.replace(localePath({ path: '/search' }));
+  };
+</script>
+
+<style scoped>
+  .search-header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .page-title {
+    font-size: 2.25rem;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .search-bar {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    font-size: 16px;
+  }
+
+  .search-input {
+    flex: 1;
+    height: 50px;
+  }
+
+  .search-button {
+    height: 50px;
+    width: 100px;
+    font-size: 16px;
+  }
+</style>

app/components/pages/search/SearchTabs.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-tabs v-model="activeTab">
+    <el-tab-pane
+      v-for="tab in tabs"
+      :key="tab.name"
+      :label="`${tab.label}(${resultCount[tab.name] || 0})`"
+      :name="tab.name"
+    >
+      <SearchResults
+        v-model:current-page="currentPage"
+        :search-items="searchItems"
+        :category="tab.name === 'all' ? undefined : tab.name"
+      />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps<{
+    // resultCount: Record<string, number>;
+    searchItems: SearchItemView[];
+  }>();
+
+  const tabs = [
+    { name: 'all', label: '全部' },
+    { name: 'product', label: '产品' },
+    { name: 'solution', label: '解决方案' },
+    { name: 'question', label: '相关问题' },
+    { name: 'document', label: '文档资料' },
+  ];
+
+  const resultCount = computed(() => {
+    const map: Record<string, number> = { all: props.searchItems.length };
+    for (const item of props.searchItems) {
+      map[item.type] = (map[item.type] ?? 0) + 1;
+    }
+    return map;
+  });
+
+  // 分类控制
+  const activeTab = ref('all');
+
+  // 分页控制
+  const currentPage = ref(1);
+
+  watch(activeTab, () => {
+    currentPage.value = 1; // 重置页码
+  });
+</script>