feat(SSR): 将产品页改为SSR

app/pages/productions/index.vue

@@ -15,7 +15,7 @@
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="page-content">
+    <div v-if="!pending" class="page-content">
       <div class="productions-container">
         <el-collapse v-model="activeNames" class="production-collapse">
           <el-collapse-item
@@ -38,18 +38,44 @@
         </el-collapse>
       </div>
     </div>
+    <div v-else>
+      <el-skeleton :rows="6" animated />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
   const { find } = useStrapi();
   const { getStrapiLocale } = useLocalizations();
-
   const strapiLocale = getStrapiLocale();
 
+  const { data, pending, error } = useAsyncData(
+    'productions',
+    () =>
+      find<Production>('productions', {
+        populate: {
+          cover: {
+            populate: '*',
+          },
+          production_type: {
+            populate: '*',
+          },
+        },
+        filters: {
+          show_in_production_list: {
+            $eq: true,
+          },
+        },
+        locale: strapiLocale,
+      }),
+    {
+      lazy: true,
+    }
+  );
+
   const activeNames = ref<string[]>([]);
 
-  const productions = ref<Production[]>([]);
+  const productions = computed(() => data.value?.data ?? []);
 
   // 按类型分组
   // 兼容 production_type 既可能为对象也可能为字符串
@@ -72,34 +98,32 @@
     return groups;
   });
 
-  onMounted(async () => {
-    try {
-      const response = await find<Production>('productions', {
-        populate: {
-          cover: {
-            populate: '*',
-          },
-          production_type: {
-            populate: '*',
-          },
-        },
-        filters: {
-          show_in_production_list: {
-            $eq: true, // 只获取在产品列表中显示的产品
-          },
-        },
-        locale: strapiLocale,
+  watch(groupedProductions, () => {
+    if (groupedProductions.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProductions.value),
+        'no-category',
+      ];
+    }
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'CMS数据获取失败',
+        fatal: true,
       });
-      productions.value = response.data.map((item: Production) => ({
-        ...item,
-        // 保持 production_type 原始类型，兼容对象或字符串
-        production_type: item.production_type,
-      }));
-      // 默认展开所有分组
-      activeNames.value = Object.keys(groupedProductions.value);
-      activeNames.value.push('no-category'); // 展开未分类
-    } catch (error) {
-      console.error('Failed to fetch productions:', error);
+    }
+  });
+
+  onMounted(() => {
+    if (groupedProductions.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProductions.value),
+        'no-category',
+      ];
     }
   });
 </script>