feat: production页的CMS变更

app/pages/productions/index.vue

@@ -27,10 +27,10 @@
             <div class="group-list">
               <production-card
                 v-for="production in group"
-                :key="production.documentId || production.id"
-                :slug="production.documentId"
-                :image-url="useStrapiMedia(production?.cover?.url || '')"
-                :name="production.title"
+                :key="production.id"
+                :slug="production.id.toString()"
+                :image-url="getImageUrl(production.cover.toString())"
+                :name="production.name"
                 :description="production.summary || ''"
               />
             </div>
@@ -45,29 +45,47 @@
 </template>
 
 <script setup lang="ts">
-  const { find } = useStrapi();
+  import { readItems } from '@directus/sdk';
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
+  const { $directus } = useNuxtApp();
+  const { getImageUrl } = useDirectusImage();
+
   const { data, pending, error } = useAsyncData(
-    'productions',
+    'products',
     () =>
-      find<Production>('productions', {
-        populate: {
-          cover: {
-            populate: '*',
+      $directus.request(
+        readItems('products', {
+          fields: [
+            'id',
+            { translations: ['id', 'name', 'summary'] },
+            'cover',
+            {
+              product_type: [
+                'id',
+                {
+                  translations: ['id', 'name'],
+                },
+              ],
+            },
+          ],
+          deep: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: strapiLocale },
+              },
+            },
+            product_type: {
+              translations: {
+                _filter: {
+                  languages_code: { _eq: strapiLocale },
+                },
+              },
+            },
           },
-          production_type: {
-            populate: '*',
-          },
-        },
-        filters: {
-          show_in_production_list: {
-            $eq: true,
-          },
-        },
-        locale: strapiLocale,
-      }),
+        })
+      ),
     {
       lazy: true,
     }
@@ -75,26 +93,31 @@
 
   const activeNames = ref<string[]>([]);
 
-  const productions = computed(() => data.value?.data ?? []);
+  // const productions = computed(() => data.value?.data ?? []);
+  const productionsRaw = computed(() => data.value ?? []);
+  const productions = computed(() =>
+    productionsRaw.value.map((item) => toProductListView(item))
+  );
 
   // 按类型分组
   // 兼容 production_type 既可能为对象也可能为字符串
   const groupedProductions = computed(() => {
-    const groups: Record<string, Production[]> = {};
+    const groups: Record<string, ProductListView[]> = {};
     for (const prod of productions.value) {
       let typeKey = '';
-      if (typeof prod.production_type === 'string') {
-        typeKey = prod.production_type;
+      if (typeof prod.product_type === 'string') {
+        typeKey = prod.product_type;
       } else if (
-        prod.production_type &&
-        typeof prod.production_type === 'object' &&
-        'type' in prod.production_type
+        prod.product_type &&
+        typeof prod.product_type === 'object' &&
+        'name' in prod.product_type
       ) {
-        typeKey = prod.production_type.type || '';
+        typeKey = prod.product_type || '';
       }
       if (!groups[typeKey]) groups[typeKey] = [];
       groups[typeKey]?.push(prod);
     }
+    console.log(groups);
     return groups;
   });
 
@@ -113,7 +136,13 @@
     }
   });
 
-  onMounted(() => {
+  watch(pending, (value) => {
+    if (!value) {
+      console.log('AsyncData: ', data.value);
+    }
+  });
+
+  onMounted(async () => {
     if (groupedProductions.value) {
       activeNames.value = [
         ...Object.keys(groupedProductions.value),