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;
   }

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"

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

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: '',
       },
     ]);

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;
   });
 }

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;
 }