feat: 搜索页图片预览 & 文档列表显示文档类型

- 缩略图预览：搜索页栏目右侧添加缩略图预览功能 - 细分类型：搜索页栏目添加细分类型展示：如产品(原纸分切机) - 接口调整：调整可选字段类型使其符合搜索引擎索引格式；将搜索条目中的type改为sectionType用于大类分类，并将type作为细分类型使用 - 文档类型：文档页添加文档类型展示功能，当用户未指定文档类型时，在标题右侧显示文档类型 - 查询调整：产品查询添加文档类型查询 ISSUE: Resolve #94
2025-12-05 17:23:34 +08:00
parent 246a0b9d4f 63cdff9c41
commit 5530776035
13 changed files with 221 additions and 42 deletions
--- a/app/components/pages/search/SearchResultCard.vue
+++ b/app/components/pages/search/SearchResultCard.vue
@ -0,0 +1,75 @@
+<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.sectionType" class="result-type">
+          <span>{{ $t('search.section') }}: </span>
+          <span class="result-type-name">{{ typeLabel }}</span>
+          <span v-if="item.type" class="result-type-name"
+            >({{ item.type }})</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>
--- a/app/components/pages/search/SearchResults.vue
+++ b/app/components/pages/search/SearchResults.vue
@ -3,19 +3,13 @@
    <div class="search-results">
      <NuxtLink
        v-for="hit in paginatedHits"
-        :key="`${hit.type}-${hit.id}`"
+        :key="`${hit.sectionType}-${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.sectionType)"
+        />
      </NuxtLink>
    </div>

@ -72,7 +66,7 @@
  const items = props.searchItems;
  const filteredHits = computed(() => {
    if (props.category) {
-      return items.filter((item) => item.type === props.category);
+      return items.filter((item) => item.sectionType === props.category);
    } else {
      return items;
    }
@ -116,19 +110,19 @@

    const slug = String(slugCandidate);

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

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

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

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

--- a/app/components/pages/search/SearchTabs.vue
+++ b/app/components/pages/search/SearchTabs.vue
@ -32,7 +32,7 @@
  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;
+      map[item.sectionType] = (map[item.sectionType] ?? 0) + 1;
    }
    return map;
  });
--- a/app/components/shared/DocumentList.vue
+++ b/app/components/shared/DocumentList.vue
@ -7,7 +7,17 @@
      @click="handleClick(doc.fileId)"
    >
      <div class="document-info">
-        <h3>{{ doc.title }}</h3>
+        <div class="document-title">
+          <h3>
+            {{ doc.title }}
+            <span v-if="showCategory && doc.type" class="document-category">
+              |
+            </span>
+            <span v-if="showCategory && doc.type" class="document-category">
+              {{ doc.type.name }}
+            </span>
+          </h3>
+        </div>
        <div class="document-content">
          <span v-if="doc.size" class="document-meta"
            >{{ $t('document-meta.size') }}: {{ formatFileSize(doc.size) }}
@ -28,6 +38,10 @@
      type: Array as () => Array<ProductDocumentView>,
      default: () => [],
    },
+    showCategory: {
+      type: Boolean,
+      default: true,
+    },
  });

  const localePath = useLocalePath();
@ -63,6 +77,15 @@
    color: var(--el-text-color-secondary);
  }

+  .document-title {
+    margin-bottom: 0.5rem;
+  }
+
+  .document-category {
+    font-size: 0.75rem;
+    color: var(--el-text-color-secondary);
+  }
+
  .download-button {
    margin-left: auto;
  }
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@ -17,7 +17,13 @@
          :document-type-options="documentTypeOptions"
        />

-        <document-list :documents="paginatedDocuments" />
+        <document-list
+          :documents="paginatedDocuments"
+          :show-category="
+            filters.selectedDocumentType === null ||
+            filters.selectedDocumentType === undefined
+          "
+        />

        <el-pagination
          v-model:current-page="page"
--- a/server/assets/graphql/product.graphql
+++ b/server/assets/graphql/product.graphql
@ -51,6 +51,13 @@ query GetProduct($id: ID!, $locale: String!) {
      id
      product_documents_id(filter: { status: { _eq: "published" } }) {
        id
+        type {
+          id
+          translations(filter: { languages_code: { code: { _eq: $locale } } }) {
+            id
+            name
+          }
+        }
        file {
          id
          filesize
--- a/server/mappers/productMapper.test.ts
+++ b/server/mappers/productMapper.test.ts
@ -347,6 +347,15 @@ describe('toProductDocumentView', () => {
            filesize: 1000,
            filename_download: 'doc1.pdf',
          },
+          type: {
+            id: 1,
+            translations: [
+              {
+                id: 1,
+                name: 'manual',
+              },
+            ],
+          },
          translations: [
            {
              id: 1,
@ -363,6 +372,10 @@ describe('toProductDocumentView', () => {
        fileId: 'rand-om__-uuid-1234',
        filename: 'doc1.pdf',
        title: 'Document Title 1',
+        type: {
+          id: '1',
+          name: 'manual',
+        },
        size: 1000,
        url: '/api/assets/rand-om__-uuid-1234',
      },
@ -391,6 +404,10 @@ describe('toProductDocumentView', () => {
        fileId: 'rand-om__-uuid-1234',
        filename: 'doc1.pdf',
        title: '',
+        type: {
+          id: '-1',
+          name: '',
+        },
        size: 1000,
        url: '/api/assets/rand-om__-uuid-1234',
      },
@ -413,6 +430,10 @@ describe('toProductDocumentView', () => {
        filename: '',
        title: '',
        size: 0,
+        type: {
+          id: '-1',
+          name: '',
+        },
        url: '',
      },
      {
@ -421,6 +442,10 @@ describe('toProductDocumentView', () => {
        filename: '',
        title: '',
        size: 0,
+        type: {
+          id: '-1',
+          name: '',
+        },
        url: '',
      },
    ]);
--- a/server/mappers/productMapper.ts
+++ b/server/mappers/productMapper.ts
@ -1,4 +1,5 @@
 import { isObject } from '../../server/utils/object';
+import { toDocumentTypeView } from './documentMapper';

 /**
 * 将 Directus 返回的 ProductImage 数据转换为 ProductImageView 视图模型
@ -161,6 +162,10 @@ export function toProductDocumentView(
        size: 0,
        title: '',
        url: '',
+        type: {
+          id: '-1',
+          name: '',
+        },
      } satisfies ProductDocumentView;
    }

@ -173,6 +178,10 @@ export function toProductDocumentView(
        size: 0,
        title: '',
        url: '',
+        type: {
+          id: '-1',
+          name: '',
+        },
      } satisfies ProductDocumentView;
    }

@ -184,6 +193,8 @@ export function toProductDocumentView(

    const trans = document.translations?.[0];

+    const typeView = toDocumentTypeView(document.type ?? null);
+
    return {
      id: item.id.toString(),
      fileId: file?.id ?? '',
@ -191,6 +202,7 @@ export function toProductDocumentView(
      size: file?.filesize ?? 0,
      title: trans?.title ?? '',
      url: url,
+      type: typeView,
    } satisfies ProductDocumentView;
  });
 }
--- a/server/utils/search-converters.test.ts
+++ b/server/utils/search-converters.test.ts
@ -12,13 +12,16 @@ describe('converters', () => {
      summary: 'High efficiency',
      description: 'Detailed description',
      type: 'pump',
+      cover: 'rand-om__-uuid-1234',
    };
    const result = converters.products(item);
    expect(result).toEqual({
      id: 1,
-      type: 'product',
+      sectionType: 'product',
      title: 'Hydraulic Pump',
      summary: 'High efficiency',
+      type: 'pump',
+      thumbnail: '/api/assets/rand-om__-uuid-1234',
    });
  });

@ -29,13 +32,16 @@ describe('converters', () => {
      summary: 'Effective solution',
      content: 'Detailed content',
      type: 'Type A',
+      cover: 'rand-om__-uuid-5678',
    };
    const result = converters.solutions(item);
    expect(result).toEqual({
      id: 1,
-      type: 'solution',
+      sectionType: 'solution',
      title: 'Solution A',
      summary: 'Effective solution',
+      type: 'Type A',
+      thumbnail: '/api/assets/rand-om__-uuid-5678',
    });
  });

@ -47,13 +53,15 @@ describe('converters', () => {
        'This is a detailed explanation of how to use the product effectively.',
      products: ['Product A'],
      product_types: ['Type A'],
+      type: 'Question Type',
    };
    const result = converters.questions(item);
    expect(result).toEqual({
      id: 1,
      title: 'How to use product?',
-      summary: '',
-      type: 'question',
+      summary: undefined,
+      type: 'Question Type',
+      sectionType: 'question',
    });
  });

@ -64,13 +72,15 @@ describe('converters', () => {
      products: ['Product A'],
      product_types: ['Type A'],
      fileUUID: 'TEST-UUID',
+      type: 'manual',
    };
    const result = converters.product_documents(item);
    expect(result).toEqual({
      id: 'TEST-UUID',
      title: 'User Manual',
-      summary: '',
-      type: 'document',
+      summary: undefined,
+      sectionType: 'document',
+      type: 'manual',
    });
  });
 });
--- a/server/utils/search-converters.ts
+++ b/server/utils/search-converters.ts
@ -6,31 +6,35 @@ export const converters: {
 } = {
  products: (item: MeiliIndexMap['products']): SearchItemView => ({
    id: item.id,
-    type: 'product',
+    sectionType: 'product',
    title: item.name,
-    summary: item.summary,
+    summary: item?.summary,
+    type: item?.type,
+    thumbnail: item?.cover ? `/api/assets/${item.cover}` : undefined,
  }),

  solutions: (item: MeiliIndexMap['solutions']): SearchItemView => ({
    id: item.id,
-    type: 'solution',
+    sectionType: 'solution',
    title: item.title,
-    summary: item.summary,
+    summary: item?.summary,
+    type: item?.type,
+    thumbnail: item?.cover ? `/api/assets/${item.cover}` : undefined,
  }),

  questions: (item: MeiliIndexMap['questions']): SearchItemView => ({
    id: item.id,
-    type: 'question',
+    sectionType: 'question',
    title: item.title,
-    summary: '',
+    type: item?.type,
  }),

  product_documents: (
    item: MeiliIndexMap['product_documents']
  ): SearchItemView => ({
    id: item.fileUUID || item.id,
-    type: 'document',
+    sectionType: 'document',
    title: item.title,
-    summary: '',
+    type: item?.type,
  }),
 };
--- a/shared/types/meilisearch/meili-index.ts
+++ b/shared/types/meilisearch/meili-index.ts
@ -9,13 +9,16 @@ export interface MeiliProductIndex {
  name: string;

  /** 产品简介 **/
-  summary: string;
+  summary?: string;

  /** 产品详情 **/
-  description: string;
+  description?: string;

  /** 产品类型 **/
-  type: string;
+  type?: string;
+
+  /** 产品缩略图 **/
+  cover?: string;
 }

 /**
@ -29,13 +32,16 @@ export interface MeiliSolutionIndex {
  title: string;

  /** 解决方案摘要 **/
-  summary: string;
+  summary?: string;

  /** 解决方案内容 **/
-  content: string;
+  content?: string;

  /** 解决方案类型 **/
-  type: string;
+  type?: string;
+
+  /** 解决方案缩略图 **/
+  cover?: string;
 }

 /**
@ -49,7 +55,10 @@ export interface MeiliQuestionIndex {
  title: string;

  /** 问题内容 **/
-  content: string;
+  content?: string;
+
+  /** 问题类型 **/
+  type?: string;

  /** 相关产品 **/
  products: string[];
@ -68,6 +77,9 @@ export interface MeiliProductDocumentIndex {
  /** 文档标题 **/
  title: string;

+  /** 文档类型 **/
+  type?: string;
+
  /** 相关产品 **/
  products: string[];

--- a/shared/types/views/product-view.ts
+++ b/shared/types/views/product-view.ts
@ -1,3 +1,5 @@
+import type { DocumentTypeView } from './document-list-view';
+
 /**
 * 产品图片视图模型
 * 用于产品详情页(/products/[slug])中的产品图片数据结构
@ -73,6 +75,9 @@ export interface ProductDocumentView {
  /** 文档大小 **/
  size: number;

+  /** 文档类型 **/
+  type: DocumentTypeView;
+
  /** 文档链接 **/
  url: string;
 }
--- a/shared/types/views/search-item-view.ts
+++ b/shared/types/views/search-item-view.ts
@ -3,11 +3,17 @@ export interface SearchItemView {
  id: number | string;

  /** 条目类型 **/
-  type: 'product' | 'solution' | 'question' | 'document';
+  sectionType: 'product' | 'solution' | 'question' | 'document';

  /** 条目标题 **/
  title: string;

  /** 条目摘要 **/
-  summary: string;
+  summary?: string;
+
+  /** 条目分类 **/
+  type?: string;
+
+  /** 条目预览图 **/
+  thumbnail?: string;
 }