feat: 将首页由Strapi迁移至Directus

- 相关路由界面修改
- 增添响应的视图模型与转换方法

app/pages/index.vue

@@ -12,14 +12,11 @@
           <div class="carousel-item">
             <el-image
               class="carousel-image"
-              :src="useStrapiMedia(item.url || '')"
-              :alt="item.alternativeText || `Carousel Image ${index + 1}`"
+              :src="getImageUrl(item)"
+              :alt="`Carousel Image ${index + 1}`"
               fit="contain"
               lazy
             />
-            <p v-if="item.caption" class="carousel-image-caption">
-              {{ item.caption }}
-            </p>
           </div>
         </el-carousel-item>
       </el-carousel>
@@ -42,24 +39,24 @@
           :autoplay="false"
         >
           <el-carousel-item
-            v-for="n in Math.floor(recommend_productions.length / 3) + 1"
+            v-for="n in Math.floor(recommend_products.length / 3) + 1"
             :key="n"
             class="recommend-list"
           >
             <div class="recommend-card-group">
               <el-card
-                v-for="(item, index) in recommend_productions.slice(
+                v-for="(item, index) in recommend_products.slice(
                   (n - 1) * 3,
                   n * 3
                 )"
                 :key="index"
                 class="recommend-card"
-                @click="handleProductionCardClick(item.documentId || '')"
+                @click="handleProductionCardClick(item.id.toString() || '')"
               >
                 <template #header>
                   <el-image
-                    :src="useStrapiMedia(item.cover?.url || '')"
-                    :alt="item.cover?.alternativeText || item.title"
+                    :src="getImageUrl(item.cover)"
+                    :alt="item.name"
                     fit="cover"
                     lazy
                   />
@@ -67,7 +64,7 @@
                 <div class="recommend-card-body">
                   <!-- Title -->
                   <div class="text-center">
-                    <span class="recommend-card-title">{{ item.title }}</span>
+                    <span class="recommend-card-title">{{ item.name }}</span>
                   </div>
                   <!-- Description -->
                   <div class="recommend-card-description text-left opacity-25">
@@ -107,12 +104,12 @@
                 )"
                 :key="index"
                 class="recommend-card"
-                @click="handleSolutionCardClick(item.documentId || '')"
+                @click="handleSolutionCardClick(item.id.toString() || '')"
               >
                 <template #header>
                   <el-image
-                    :src="useStrapiMedia(item.cover?.url || '')"
-                    :alt="item.cover?.alternativeText || item.title"
+                    :src="getImageUrl(item.cover)"
+                    :alt="item.title"
                     fit="cover"
                     lazy
                   />
@@ -140,43 +137,27 @@
 </template>
 
 <script setup lang="ts">
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData('homepage', () =>
-    findOne<StrapiHomepage>('homepage', undefined, {
-      populate: {
-        carousel: {
-          populate: '*',
-        },
-        recommend_productions: {
-          populate: {
-            cover: {
-              populate: '*',
-            },
-          },
-        },
-        recommend_solutions: {
-          populate: {
-            cover: {
-              populate: '*',
-            },
-          },
-        },
-      },
-      locale: strapiLocale,
-    })
-  );
+  const { data, pending, error } = await useHomepage();
 
-  const carousel = computed(() => data.value?.data.carousel || []);
-  const recommend_productions = computed(
-    () => data.value?.data.recommend_productions || []
+  const homepageData = computed(() => {
+    return toHomepageView(data.value);
+  });
+
+  const carousel = computed(() => homepageData.value?.carousel);
+
+  const recommend_products = computed(
+    () => homepageData.value?.recommendProducts
   );
   const recommend_solutions = computed(
-    () => data.value?.data.recommend_solutions || []
+    () => homepageData.value?.recommendSolutions
   );
 
+  watch(pending, () => {
+    console.log(data.value);
+  });
+
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);