From 94196ffdfe6b803ba4863cf759e0868e409638b0 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 15:50:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(SSR):=20=E5=B0=86=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E9=A1=B5=E6=94=B9=E4=B8=BASSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/productions/[...slug].vue | 266 ++++++++++++++--------------
 app/pages/productions/index.vue     |  84 +++++----
 2 files changed, 186 insertions(+), 164 deletions(-)

diff --git a/app/pages/productions/[...slug].vue b/app/pages/productions/[...slug].vue
index e5be376..2be1dc4 100644
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@@ -1,90 +1,108 @@
 <template>
   <div class="page-container">
-    <div v-if="production">
-      <!-- 面包屑导航 -->
-      <el-breadcrumb class="breadcrumb" separator="/">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">{{
-            $t('navigation.home')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/productions')">{{
-            $t('navigation.productions')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opactiy-50">{{
-          production.title
-        }}</el-breadcrumb-item>
-      </el-breadcrumb>
+    <div v-if="!pending">
+      <div v-if="production">
+        <!-- 面包屑导航 -->
+        <el-breadcrumb class="breadcrumb" separator="/">
+          <el-breadcrumb-item class="text-md opacity-50">
+            <NuxtLink :to="$localePath('/')">{{
+              $t('navigation.home')
+            }}</NuxtLink>
+          </el-breadcrumb-item>
+          <el-breadcrumb-item class="text-md opacity-50">
+            <NuxtLink :to="$localePath('/productions')">{{
+              $t('navigation.productions')
+            }}</NuxtLink>
+          </el-breadcrumb-item>
+          <el-breadcrumb-item class="text-md opactiy-50">{{
+            production.title
+          }}</el-breadcrumb-item>
+        </el-breadcrumb>
 
-      <!-- 产品详情内容 -->
-      <div class="production-header">
-        <div class="production-image">
-          <el-image
-            v-if="production.production_images.length <= 1"
-            :src="useStrapiMedia(production?.cover?.url || '')"
-            :alt="production.title"
-            fit="contain"
-          />
-          <el-carousel
-            v-else
-            class="production-carousel"
-            height="500px"
-            :autoplay="false"
-            :loop="false"
-            arrow="always"
-          >
-            <el-carousel-item
-              v-for="(item, index) in production.production_images || []"
-              :key="index"
+        <!-- 产品详情内容 -->
+        <div class="production-header">
+          <div class="production-image">
+            <el-image
+              v-if="production.production_images.length <= 1"
+              :src="useStrapiMedia(production?.cover?.url || '')"
+              :alt="production.title"
+              fit="contain"
+            />
+            <el-carousel
+              v-else
+              class="production-carousel"
+              height="500px"
+              :autoplay="false"
+              :loop="false"
+              arrow="always"
             >
-              <div class="production-carousel-item">
-                <el-image
-                  :src="useStrapiMedia(item.url || '')"
-                  :alt="item.alternativeText || production.title"
-                  fit="contain"
-                  lazy
-                />
-                <p v-if="item.caption" class="production-image-caption">
-                  {{ item.caption }}
-                </p>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
+              <el-carousel-item
+                v-for="(item, index) in production.production_images || []"
+                :key="index"
+              >
+                <div class="production-carousel-item">
+                  <el-image
+                    :src="useStrapiMedia(item.url || '')"
+                    :alt="item.alternativeText || production.title"
+                    fit="contain"
+                    lazy
+                  />
+                  <p v-if="item.caption" class="production-image-caption">
+                    {{ item.caption }}
+                  </p>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+
+          <div class="production-info">
+            <h1>{{ production.title }}</h1>
+            <p class="summary">{{ production.summary }}</p>
+          </div>
         </div>
-        <div class="production-info">
-          <h1>{{ production.title }}</h1>
-          <p class="summary">{{ production.summary }}</p>
+
+        <!-- 产品详细描述 -->
+        <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 || ''"
+              />
+            </el-tab-pane>
+            <el-tab-pane label="技术规格" name="specs">
+              <spec-table :data="production.production_specs" />
+            </el-tab-pane>
+            <el-tab-pane label="常见问题" name="faq">
+              <question-list :questions="production.questions" />
+            </el-tab-pane>
+            <el-tab-pane label="相关文档" name="documents">
+              <document-list
+                :documents="
+                  production.production_documents.map(
+                    (item) => item.document
+                  ) || []
+                "
+              />
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </div>
-
-      <!-- 产品详细描述 -->
-      <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 || ''" />
-          </el-tab-pane>
-          <el-tab-pane label="技术规格" name="specs">
-            <spec-table :data="production.production_specs" />
-          </el-tab-pane>
-          <el-tab-pane label="常见问题" name="faq">
-            <question-list :questions="production.questions" />
-          </el-tab-pane>
-          <el-tab-pane label="相关文档" name="documents">
-            <document-list
-              :documents="
-                production.production_documents.map((item) => item.document) ||
-                []
-              "
-            />
-          </el-tab-pane>
-        </el-tabs>
+      <!-- 未找到产品 -->
+      <div v-else class="not-found">
+        <el-result
+          icon="warning"
+          :title="$t('product-not-found')"
+          :sub-title="$t('product-not-found-desc')"
+        >
+          <template #extra>
+            <el-button type="primary" @click="$router.push('/productions')">
+              {{ $t('back-to-productions') }}
+            </el-button>
+          </template>
+        </el-result>
       </div>
     </div>
-
-    <!-- 加载状态 -->
-    <div v-else-if="pending" class="loading">
+    <div v-else class="loading">
       <el-skeleton style="--el-skeleton-circle-size: 400px">
         <template #template>
           <el-skeleton-item variant="circle" />
@@ -92,21 +110,6 @@
       </el-skeleton>
       <el-skeleton :rows="5" animated />
     </div>
-
-    <!-- 未找到产品 -->
-    <div v-else class="not-found">
-      <el-result
-        icon="warning"
-        :title="$t('product-not-found')"
-        :sub-title="$t('product-not-found-desc')"
-      >
-        <template #extra>
-          <el-button type="primary" @click="$router.push('/productions')">
-            {{ $t('back-to-productions') }}
-          </el-button>
-        </template>
-      </el-result>
-    </div>
   </div>
 </template>
 
@@ -116,51 +119,46 @@
   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,
-        {
-          populate: {
-            production_specs: {
-              populate: '*',
-            },
-            production_images: {
-              populate: '*',
-            },
-            cover: {
-              populate: '*',
-            },
-            questions: {
-              populate: '*',
-            },
-            production_documents: {
-              populate: 'document',
-            },
+  const { data, pending, error } = useAsyncData(
+    () => `production-${documentId.value}`,
+    () =>
+      findOne<Production>('productions', documentId.value, {
+        populate: {
+          production_specs: {
+            populate: '*',
           },
-          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;
+          production_images: {
+            populate: '*',
+          },
+          cover: {
+            populate: '*',
+          },
+          questions: {
+            populate: '*',
+          },
+          production_documents: {
+            populate: 'document',
+          },
+        },
+        locale: strapiLocale,
+      })
+  );
+
+  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,
+      });
     }
   });
 
diff --git a/app/pages/productions/index.vue b/app/pages/productions/index.vue
index 976b7d3..06bec9c 100644
--- a/app/pages/productions/index.vue
+++ b/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>