feat(CMS)!: 将项目后端由Strapi迁移至Directus

- 将项目后端由Strapi迁移至Directus
- 加强类型标注
- 调整部分路由名称
- 分离原始后端数据与视图对象数据

Issue: resolve #42

app/pages/support/contact-us.vue

@@ -23,7 +23,7 @@
     </div>
 
     <div v-if="!pending" class="page-content">
-      <markdown-renderer :content="content || ''" />
+      <markdown-renderer :content="content.content || ''" />
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="5" animated />
@@ -32,18 +32,9 @@
 </template>
 
 <script setup lang="ts">
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { data, pending, error } = await useContactInfo();
 
-  const { data, pending, error } = useAsyncData('contact-info', () =>
-    findOne<StrapiContactInfo>('contact-info', undefined, {
-      populate: '*',
-      locale: strapiLocale,
-    })
-  );
-
-  const content = computed(() => data.value?.data.content ?? '');
+  const content = computed(() => toContactInfoView(data.value));
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

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

app/pages/support/faq.vue

@@ -36,25 +36,25 @@
               clearable
             >
               <el-option
-                v-for="type in productionTypeOptions"
-                :key="type.documentId"
-                :label="type.type"
-                :value="type.documentId"
+                v-for="type in productTypeOptions"
+                :key="type.id"
+                :label="type.name"
+                :value="type.id"
               />
             </el-select>
           </el-col>
           <el-col :span="8">
             <span class="select-label">产品系列</span>
             <el-select
-              v-model="selectedProduction"
+              v-model="selectedProduct"
               placeholder="选择系列产品"
               clearable
             >
               <el-option
-                v-for="production in productionOptions"
-                :key="production.documentId"
-                :label="production.title"
-                :value="production.documentId"
+                v-for="product in productOptions"
+                :key="product.id"
+                :label="product.name"
+                :value="product.id"
               />
             </el-select>
           </el-col>
@@ -78,68 +78,58 @@
 
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
-  const { find } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
-  const { data, pending, error } = useAsyncData('questions', () =>
-    find<Question>('questions', {
-      populate: {
-        related_productions: {
-          populate: ['production_type'],
-        },
-      },
-      locale: strapiLocale,
-    })
+  const { data, pending, error } = await useQuestionList();
+
+  const questions = computed(
+    () => data.value.map((item) => toQuestionListView(item)) ?? null
   );
 
-  const questions = computed(() => data.value?.data ?? null);
-
   const keyword = ref('');
 
-  const selectedType = ref<string | null>(null);
-  const selectedProduction = ref<string | null>(null);
+  const selectedType = ref<number | null>(null);
+  const selectedProduct = ref<number | null>(null);
 
-  const productionTypeOptions = computed(() => {
-    const types: ProductionType[] = [];
-    questions.value.forEach((q: Question) => {
-      q.related_productions?.forEach((production: Production) => {
-        const productionType = production?.production_type;
-        if (!types.some((p) => p.documentId === productionType.documentId)) {
-          types.push(productionType);
+  const productTypeOptions = computed(() => {
+    const types: QuestionListProductType[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
+        const productType = product.type;
+        if (!types.some((p) => p.id === productType.id)) {
+          types.push(productType);
         }
       });
     });
     return types;
   });
 
-  const productionOptions = computed(() => {
+  const productOptions = computed(() => {
     if (!selectedType.value) return [];
-    const productions: Production[] = [];
-    questions.value.forEach((question: Question) => {
-      question.related_productions.forEach((production: Production) => {
+    const products: QuestionListProduct[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
         if (
-          production.production_type?.documentId === selectedType.value &&
-          !productions.some((p) => p.documentId === production.documentId)
+          product.type.id === selectedType.value &&
+          !products.some((p) => p.id === product.id)
         ) {
-          productions.push(production);
+          products.push(product);
         }
       });
     });
-    return productions;
+    return products;
   });
 
   const filteredQuestions = computed(() => {
-    return questions.value.filter((question: Question) => {
-      const matchProduction = selectedProduction.value
-        ? question.related_productions?.some(
-            (production: Production) =>
-              production.documentId === selectedProduction.value
+    return questions.value.filter((question: QuestionListView) => {
+      const matchProduct = selectedProduct.value
+        ? question.products?.some(
+            (product: QuestionListProduct) =>
+              product.id === selectedProduct.value
           )
         : selectedType.value
-          ? question.related_productions?.some(
-              (production: Production) =>
-                production.production_type?.documentId === selectedType.value
+          ? question.products?.some(
+              (product: QuestionListProduct) =>
+                product.type.id === selectedType.value
             )
           : true;
 
@@ -148,12 +138,12 @@
           (question.content && question.content.includes(keyword.value))
         : true;
 
-      return matchProduction && matchKeyword;
+      return matchProduct && matchKeyword;
     });
   });
 
   watch(selectedType, () => {
-    selectedProduction.value = null;
+    selectedProduct.value = null;
   });
 
   watch(data, (newVal) => {