From c9b5b1fad9ad6b4694671f302afe15c4121d71f8 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 5 Dec 2025 14:56:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E6=90=9C=E7=B4=A2=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=8F=E7=9B=AE=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E7=BC=A9?=
 =?UTF-8?q?=E7=95=A5=E5=9B=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 图片预览：产品与解决方案栏目添加缩略图功能
- 组件提取：在搜索结果页，将单个搜索结果单独提取为组件SearchResultCard
---
 .../pages/search/SearchResultCard.vue         | 72 +++++++++++++++++++
 app/components/pages/search/SearchResults.vue | 11 +--
 server/utils/search-converters.ts             |  2 +
 shared/types/meilisearch/meili-index.ts       |  6 ++
 shared/types/views/search-item-view.ts        |  3 +
 5 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 app/components/pages/search/SearchResultCard.vue

diff --git a/app/components/pages/search/SearchResultCard.vue b/app/components/pages/search/SearchResultCard.vue
new file mode 100644
index 0000000..3aa76a3
--- /dev/null
+++ b/app/components/pages/search/SearchResultCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <el-card class="result-card">
+    <el-row>
+      <el-col :span="12">
+        <h3 class="result-title">{{ item.title }}</h3>
+        <p v-if="item.summary" class="result-summary">
+          {{ item.summary }}
+        </p>
+        <p v-if="item.type" class="result-type">
+          <span>{{ $t('search.section') }}: </span>
+          <span class="result-type-name">{{ typeLabel }}</span>
+        </p>
+      </el-col>
+      <el-col :span="12" class="image-col">
+        <el-image
+          v-if="item.thumbnail"
+          :src="item.thumbnail"
+          :alt="item.title"
+          style="width: 150px"
+        />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  defineProps<{
+    item: SearchItemView;
+    typeLabel: string;
+  }>();
+</script>
+
+<style scoped>
+  .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);
+  }
+
+  .image-col {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+  }
+</style>
diff --git a/app/components/pages/search/SearchResults.vue b/app/components/pages/search/SearchResults.vue
index 816f469..1cde91c 100644
--- a/app/components/pages/search/SearchResults.vue
+++ b/app/components/pages/search/SearchResults.vue
@@ -6,16 +6,7 @@
         :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>
+        <search-result-card :item="hit" :type-label="getIndexLabel(hit.type)" />
       </NuxtLink>
     </div>
 
diff --git a/server/utils/search-converters.ts b/server/utils/search-converters.ts
index 2cc6f97..b5a66dc 100644
--- a/server/utils/search-converters.ts
+++ b/server/utils/search-converters.ts
@@ -9,6 +9,7 @@ export const converters: {
     type: 'product',
     title: item.name,
     summary: item.summary,
+    thumbnail: `/api/assets/${item.cover}`,
   }),
 
   solutions: (item: MeiliIndexMap['solutions']): SearchItemView => ({
@@ -16,6 +17,7 @@ export const converters: {
     type: 'solution',
     title: item.title,
     summary: item.summary,
+    thumbnail: `/api/assets/${item.cover}`,
   }),
 
   questions: (item: MeiliIndexMap['questions']): SearchItemView => ({
diff --git a/shared/types/meilisearch/meili-index.ts b/shared/types/meilisearch/meili-index.ts
index 7b34473..d7a5810 100644
--- a/shared/types/meilisearch/meili-index.ts
+++ b/shared/types/meilisearch/meili-index.ts
@@ -16,6 +16,9 @@ export interface MeiliProductIndex {
 
   /** 产品类型 **/
   type: string;
+
+  /** 产品缩略图 **/
+  cover: string;
 }
 
 /**
@@ -36,6 +39,9 @@ export interface MeiliSolutionIndex {
 
   /** 解决方案类型 **/
   type: string;
+
+  /** 解决方案缩略图 **/
+  cover: string;
 }
 
 /**
diff --git a/shared/types/views/search-item-view.ts b/shared/types/views/search-item-view.ts
index e9070f0..594caed 100644
--- a/shared/types/views/search-item-view.ts
+++ b/shared/types/views/search-item-view.ts
@@ -10,4 +10,7 @@ export interface SearchItemView {
 
   /** 条目摘要 **/
   summary: string;
+
+  /** 条目预览图 **/
+  thumbnail?: string;
 }