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

app/pages/productions/[...slug].vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page-container">
+    <div v-if="!pending">
       <div v-if="production">
         <!-- 面包屑导航 -->
         <el-breadcrumb class="breadcrumb" separator="/">
@@ -53,6 +54,7 @@
               </el-carousel-item>
             </el-carousel>
           </div>
+
           <div class="production-info">
             <h1>{{ production.title }}</h1>
             <p class="summary">{{ production.summary }}</p>
@@ -63,7 +65,9 @@
         <div class="production-content">
           <el-tabs v-model="activeName" class="production-tabs" stretch>
             <el-tab-pane label="产品详情" name="details">
-            <markdown-renderer :content="production.production_details || ''" />
+              <markdown-renderer
+                :content="production.production_details || ''"
+              />
             </el-tab-pane>
             <el-tab-pane label="技术规格" name="specs">
               <spec-table :data="production.production_specs" />
@@ -74,25 +78,15 @@
             <el-tab-pane label="相关文档" name="documents">
               <document-list
                 :documents="
-                production.production_documents.map((item) => item.document) ||
-                []
+                  production.production_documents.map(
+                    (item) => item.document
+                  ) || []
                 "
               />
             </el-tab-pane>
           </el-tabs>
         </div>
       </div>
-
-    <!-- 加载状态 -->
-    <div v-else-if="pending" class="loading">
-      <el-skeleton style="--el-skeleton-circle-size: 400px">
-        <template #template>
-          <el-skeleton-item variant="circle" />
-        </template>
-      </el-skeleton>
-      <el-skeleton :rows="5" animated />
-    </div>
-
       <!-- 未找到产品 -->
       <div v-else class="not-found">
         <el-result
@@ -108,6 +102,15 @@
         </el-result>
       </div>
     </div>
+    <div v-else class="loading">
+      <el-skeleton style="--el-skeleton-circle-size: 400px">
+        <template #template>
+          <el-skeleton-item variant="circle" />
+        </template>
+      </el-skeleton>
+      <el-skeleton :rows="5" animated />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -116,20 +119,13 @@
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const production = ref<Production | null>(null);
-  const pending = ref(true);
-
-  const activeName = ref('details'); // 默认选中概览标签
-
   // 获取路由参数（slug 或 id）
   const documentId = computed(() => route.params.slug as string);
 
-  onMounted(async () => {
-    try {
-      const response = await findOne<Production>(
-        'productions',
-        documentId.value,
-        {
+  const { data, pending, error } = useAsyncData(
+    () => `production-${documentId.value}`,
+    () =>
+      findOne<Production>('productions', documentId.value, {
         populate: {
           production_specs: {
             populate: '*',
@@ -148,19 +144,21 @@
           },
         },
         locale: strapiLocale,
-        }
+      })
   );
-      if (response.data) {
-        const item = response.data;
-        production.value = {
-          ...item,
-        };
-        console.log('Fetched production:', production.value);
-      }
-    } catch (error) {
-      console.error('Failed to fetch production:', error);
-    } finally {
-      pending.value = false;
+
+  const production = computed(() => data.value?.data ?? null);
+
+  const activeName = ref('details'); // 默认选中概览标签
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'CMS数据获取失败',
+        fatal: true,
+      });
     }
   });
 

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',
+      ];
+    }
   });
-      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);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'CMS数据获取失败',
+        fatal: true,
+      });
+    }
+  });
+
+  onMounted(() => {
+    if (groupedProductions.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProductions.value),
+        'no-category',
+      ];
     }
   });
 </script>