app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="homepage">
-    <div v-if="!pending" class="carousel">
+    <section v-if="!pending" class="carousel-section">
       <el-carousel
         class="homepage-carousel"
         height="auto"
@@ -8,7 +8,7 @@
         arrow="never"
         autoplay
       >
-        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
+        <el-carousel-item v-for="(item, index) in carousel" :key="index">
           <div class="carousel-item">
             <el-image
               class="carousel-image"
@@ -23,11 +23,17 @@
           </div>
         </el-carousel-item>
       </el-carousel>
-      <section class="homepage-section">
-        <h2>推荐产品</h2>
-        <p>
-          探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
-        </p>
+    </section>
+    <section v-else>
+      <el-skeleton :rows="5" animated />
+    </section>
+
+    <section class="homepage-section">
+      <h2>推荐产品</h2>
+      <p>
+        探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
+      </p>
+      <div v-if="!pending">
         <el-carousel
           class="recommend-carousel"
           height="auto"
@@ -72,10 +78,15 @@
             </div>
           </el-carousel-item>
         </el-carousel>
-      </section>
-      <section class="homepage-section">
-        <h2>推荐解决方案</h2>
-        <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
+      </div>
+      <div v-else>
+        <el-skeleton :rows="4" animated />
+      </div>
+    </section>
+    <section class="homepage-section">
+      <h2>推荐解决方案</h2>
+      <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
+      <div v-if="!pending">
         <el-carousel
           class="recommend-carousel"
           height="auto"
@@ -120,11 +131,11 @@
             </div>
           </el-carousel-item>
         </el-carousel>
-      </section>
-    </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="3" animated />
-    </div>
+      </div>
+      <div v-else>
+        <el-skeleton :rows="4" animated />
+      </div>
+    </section>
   </div>
 </template>
 
@@ -133,47 +144,47 @@
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const carouselImages = ref<StrapiImage[]>([]);
-  const recommend_productions = ref<Production[]>([]);
-  const recommend_solutions = ref<Solution[]>([]);
-
-  const pending = ref(true);
-
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiHomepage>('homepage', undefined, {
-        populate: {
-          carousel: {
-            populate: '*',
-          },
-          recommend_productions: {
-            populate: {
-              cover: {
-                populate: '*',
-              },
-            },
-          },
-          recommend_solutions: {
-            populate: {
-              cover: {
-                populate: '*',
-              },
+  const { data, pending, error } = useAsyncData('homepage', () =>
+    findOne<StrapiHomepage>('homepage', undefined, {
+      populate: {
+        carousel: {
+          populate: '*',
+        },
+        recommend_productions: {
+          populate: {
+            cover: {
+              populate: '*',
             },
           },
         },
-        locale: strapiLocale,
+        recommend_solutions: {
+          populate: {
+            cover: {
+              populate: '*',
+            },
+          },
+        },
+      },
+      locale: strapiLocale,
+    })
+  );
+
+  const carousel = computed(() => data.value?.data.carousel || []);
+  const recommend_productions = computed(
+    () => data.value?.data.recommend_productions || []
+  );
+  const recommend_solutions = computed(
+    () => data.value?.data.recommend_solutions || []
+  );
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'CMS数据获取失败',
+        fatal: true,
       });
-      if (response.data) {
-        carouselImages.value = response.data.carousel || [];
-        recommend_productions.value = response.data.recommend_productions || [];
-        recommend_solutions.value = response.data.recommend_solutions || [];
-        console.log('推荐产品:', recommend_productions.value);
-        console.log('推荐解决方案:', recommend_solutions.value);
-      }
-    } catch (error) {
-      console.error('Error fetching homepage data:', error);
-    } finally {
-      pending.value = false;
     }
   });
 
@@ -213,6 +224,10 @@
     line-height: 1.6;
   }
 
+  .carousel-section {
+    padding: 0;
+  }
+
   .homepage-carousel .el-carousel__item {
     width: 100%;
     height: 33vw;