feat: 将/support/documents路由的数据获取由Strapi转为Directus

- 修改/support/documents.vue，将相关数据获取迁移到Directus
- 增添相应的视图模型与映射方法

app/composables/directus/index.ts

@@ -5,3 +5,4 @@ export * from './useProduct';
 export * from './useSolutionList';
 export * from './useSolution';
 export * from './useQuestionList';
+export * from './useDocumentList';

app/composables/directus/useDocumentList.ts

@@ -0,0 +1,67 @@
+import { readItems } from '@directus/sdk';
+
+export const useDocumentList = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`document-list-${locale}`, async () => {
+    return await $directus.request(
+      readItems('product_documents', {
+        fields: [
+          'id',
+          {
+            file: ['id', 'filesize', 'filename_download'],
+          },
+          {
+            translations: ['id', 'title'],
+          },
+          {
+            products: [
+              'id',
+              {
+                products_id: [
+                  'id',
+                  {
+                    translations: ['id', 'name'],
+                  },
+                  {
+                    product_type: [
+                      'id',
+                      {
+                        translations: ['id', 'name'],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: { _eq: locale },
+            },
+          },
+          products: {
+            products_id: {
+              translations: {
+                _filter: {
+                  languages_code: { _eq: locale },
+                },
+              },
+              product_type: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: locale },
+                  },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};

app/models/mappers/documentMapper.ts

@@ -1,13 +1,15 @@
 /**
- * 将 Directus 返回的 Document 数据转换为 DocumentView 视图模型
+ * 将 Directus 返回的 Document 数据转换为 ProductDocumentView 视图模型
  *
  * @param raw: 原始的 Document 数据
- * @returns 转换后的 DocumentView 对象
+ * @returns 转换后的 ProductDocumentView 对象
  *
  * @example
- * const view = toDocumentView(rawDocument);
+ * const view = toProductDocumentView(rawDocument);
  */
-export function toDocumentView(raw: ProductDocument): ProductDocumentView {
+export function toProductDocumentView(
+  raw: ProductDocument
+): ProductDocumentView {
   const trans = raw.translations?.[0] ?? {
     title: '',
   };
@@ -27,3 +29,49 @@ export function toDocumentView(raw: ProductDocument): ProductDocumentView {
     size: file.filesize,
   };
 }
+
+/**
+ * 将 Directus 返回的 Document 数据转换为 DocumentListView 视图模型
+ *
+ * @param raw: 原始的 Document 数据
+ * @returns 转换后的 DocumentListView 对象
+ *
+ * @example
+ * const view = toDocumentListView(rawDocument);
+ */
+export function toDocumentListView(raw: ProductDocument): DocumentListView {
+  const trans = raw.translations?.[0] ?? { title: '' };
+
+  const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
+  const file = raw.file as DirectusFile;
+
+  const { getFileUrl } = useDirectusFiles();
+  const url = getFileUrl(fileId);
+
+  const related_products: DocumentListProduct[] = raw.products
+    ?.filter(isObject<ProductsProductDocument>)
+    .map((item) => item.products_id)
+    .filter(isObject<Product>)
+    .map((item) => {
+      const productType =
+        isObject<ProductType>(item.product_type) &&
+        ({
+          id: item.product_type.id,
+          name: item.product_type.translations?.[0]?.name,
+        } satisfies DocumentListProductType);
+      return {
+        id: item.id,
+        name: item.translations?.[0]?.name,
+        type: productType,
+      };
+    });
+
+  return {
+    id: raw.id,
+    filename: file.filename_download,
+    title: trans.title,
+    url: url,
+    size: file.filesize,
+    products: related_products,
+  };
+}

app/models/mappers/productMapper.ts

@@ -106,13 +106,13 @@ export function toProductView(raw: Product): ProductView {
     .filter(isObject<ProductsQuestion>)
     .map((item) => item.questions_id)
     .filter(isObject<Question>)
-    .map((item) => toQuestionView(item));
+    .map((item) => toProductQuestionView(item));
 
   const documents = (raw.documents ?? [])
     .filter(isObject<ProductsProductDocument>)
     .map((item) => item.product_documents_id)
     .filter(isObject<ProductDocument>)
-    .map((item) => toDocumentView(item));
+    .map((item) => toProductDocumentView(item));
 
   return {
     id: raw.id,

app/models/views/DocumentListView.ts

@@ -0,0 +1,42 @@
+/**
+ * 文档关联产品类型模型
+ * 用于在文档库中提供产品筛选功能
+ */
+export interface DocumentListProductType {
+  id: number;
+  name: string;
+}
+
+/**
+ * 文档关联产品模型
+ * 用于在文档库中提供产品筛选功能
+ */
+export interface DocumentListProduct {
+  id: number;
+  name: string;
+  type: DocumentListProductType;
+}
+
+/**
+ * 文档列表模型
+ * 用于文档库(/support/documents)页面渲染的数据结构
+ */
+export interface DocumentListView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 文件名 **/
+  filename: string;
+
+  /** 文档标题 **/
+  title: string;
+
+  /** 文档大小 **/
+  size: number;
+
+  /** 文档链接 **/
+  url: string;
+
+  /** 相关产品 **/
+  products: DocumentListProduct[];
+}

app/models/views/ProductDocumentView.ts

@@ -1,6 +1,6 @@
 /**
  * 文档视图模型
- * 用于文档页(/support/documents)渲染的数据结构
+ * 用于文档列表渲染的数据结构
  */
 export interface ProductDocumentView {
   /** 唯一标识符 **/

app/pages/support/documents.vue

@@ -28,22 +28,22 @@
       <div class="document-category">
         <el-select v-model="selectedType" placeholder="选择产品类型" clearable>
           <el-option
-            v-for="type in productionTypeOptions"
+            v-for="type in productTypeOptions"
-            :key="type.documentId"
+            :key="type.id"
-            :label="type.type"
+            :label="type.name"
-            :value="type.documentId"
+            :value="type.id"
           />
         </el-select>
         <el-select
-          v-model="selectedProduction"
+          v-model="selectedProduct"
           placeholder="选择系列产品"
           clearable
         >
           <el-option
-            v-for="production in productionOptions"
+            v-for="product in productOptions"
-            :key="production.documentId"
+            :key="product.id"
-            :label="production.title"
+            :label="product.name"
-            :value="production.documentId"
+            :value="product.id"
           />
         </el-select>
         <el-input
@@ -63,37 +63,24 @@
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
 
-  const { find } = useStrapi();
+  const { data, pending, error } = await useDocumentList();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
-  const { data, pending, error } = useAsyncData('documents', () =>
+  const documents = computed(
-    find<ProductionDocument>('production-documents', {
+    () => data?.value.map((item) => toDocumentListView(item)) ?? []
-      populate: ['document', 'related_productions.production_type'],
-      locale: strapiLocale,
-    })
   );
 
-  // const documents = computed(
-  //   () =>
-  //     data.value?.data.map((item) => ({
-  //       ...item.document,
-  //     })) || []
-  // );
-  const documents = computed(() => data.value?.data ?? []);
-
   const keyword = ref('');
 
-  const selectedType = ref<string | null>(null);
+  const selectedType = ref<number | null>(null);
-  const selectedProduction = ref<string | null>(null);
+  const selectedProduct = ref<number | null>(null);
 
-  const productionTypeOptions = computed(() => {
+  const productTypeOptions = computed(() => {
-    const types: ProductionType[] = [];
+    const types: DocumentListProductType[] = [];
-    documents.value.forEach((document: ProductionDocument) => {
+    documents.value.forEach((doc: DocumentListView) => {
-      document.related_productions?.forEach((production: Production) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
-        const productionType = production?.production_type;
+        const productType = product.type;
-        if (!types.some((p) => p.documentId === productionType.documentId)) {
+        if (!types.some((item) => item.id === productType.id)) {
-          types.push(productionType);
+          types.push(productType);
         }
       });
     });
@@ -101,51 +88,48 @@
     return types;
   });
 
-  const productionOptions = computed(() => {
+  const productOptions = computed(() => {
     if (!selectedType.value) return [];
-    const productions: Production[] = [];
+    const products: DocumentListProduct[] = [];
-    documents.value.forEach((document: ProductionDocument) => {
+
-      document.related_productions.forEach((production: Production) => {
+    documents.value.forEach((doc: DocumentListView) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
         if (
-          production.production_type?.documentId === selectedType.value &&
+          product.type.id === selectedType.value &&
-          !productions.some((p) => p.documentId === production.documentId)
+          !products.some((item) => item.id === product.id)
         ) {
-          productions.push(production);
+          products.push(product);
         }
       });
     });
-    return productions;
+
+    return products;
   });
 
   const filteredDocuments = computed(() =>
-    documents.value
+    documents.value.filter((doc: DocumentListView) => {
-      .filter((document: ProductionDocument) => {
+      const matchProduction = selectedProduct.value
-        const matchProduction = selectedProduction.value
+        ? doc.products?.some(
-          ? document.related_productions?.some(
+            (product: DocumentListProduct) =>
-              (production: Production) =>
+              product.id === selectedProduct.value
-                production.documentId === selectedProduction.value
+          )
+        : selectedType.value
+          ? doc.products?.some(
+              (product: DocumentListProduct) =>
+                product.type?.id === selectedType.value
             )
-          : selectedType.value
-            ? document.related_productions?.some(
-                (production: Production) =>
-                  production.production_type?.documentId === selectedType.value
-              )
-            : true;
-
-        const matchKeyword = keyword.value
-          ? document.document.caption &&
-            document.document.caption.includes(keyword.value)
           : true;
 
-        return matchProduction && matchKeyword;
+      const matchKeyword = keyword.value
-      })
+        ? doc.title && doc.title.includes(keyword.value)
-      .map((item) => ({
+        : true;
-        ...item.document,
+
-      }))
+      return matchProduction && matchKeyword;
+    })
   );
 
   watch(selectedType, () => {
-    selectedProduction.value = null;
+    selectedProduct.value = null;
   });
 
   watch(documents, (value) => {