From 509a6fae36bb2bd79a2f539891dfe31bbc3cd514 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 14:18:27 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(SSR):=20=E5=B0=86=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BASSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将CMS数据的获取方式改为Nuxt的useAsyncData
- 将加载模式改为渐进式
---
 app/pages/index.vue | 121 +++++++++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 53 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index b11e9dd..03b3947 100644
--- a/app/pages/index.vue
+++ b/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;

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 2/8] =?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>

From dbd934636215b43467046ccfc76e00c102f38b2e Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 15:57:40 +0800
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移出抛出错误的方法
---
 app/pages/index.vue                 | 5 -----
 app/pages/productions/[...slug].vue | 5 -----
 app/pages/productions/index.vue     | 5 -----
 3 files changed, 15 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index b4ca42c..bb355b7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -180,11 +180,6 @@
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);
-      throw createError({
-        statusCode: 500,
-        statusMessage: 'CMS数据获取失败',
-        fatal: true,
-      });
     }
   });
 
diff --git a/app/pages/productions/[...slug].vue b/app/pages/productions/[...slug].vue
index 2be1dc4..21e95fc 100644
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@@ -154,11 +154,6 @@
   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 06bec9c..ad105ed 100644
--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@@ -110,11 +110,6 @@
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);
-      throw createError({
-        statusCode: 500,
-        statusMessage: 'CMS数据获取失败',
-        fatal: true,
-      });
     }
   });
 

From a7a4551528af2ff0d9248491fe7c976c530c6d48 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 16:11:35 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat(SSR):=20=E5=B0=86=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88=E9=A1=B5=E6=94=B9=E4=B8=BASSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用Nuxt的useAsyncData
- 添加i18n信息
---
 app/pages/solutions/[...slug].vue | 109 ++++++++++++++++++------------
 app/pages/solutions/index.vue     |  46 ++++++-------
 i18n/locales/en.json              |   3 +
 i18n/locales/zh.json              |   3 +
 4 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/app/pages/solutions/[...slug].vue b/app/pages/solutions/[...slug].vue
index 6803705..79ac81a 100644
--- a/app/pages/solutions/[...slug].vue
+++ b/app/pages/solutions/[...slug].vue
@@ -1,36 +1,52 @@
 <template>
   <div class="page-container">
-    <div v-if="solution">
-      <div class="page-header">
-        <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('/solutions')">{{
-              $t('navigation.solutions')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">{{
-            solution.title
-          }}</el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
-      <div class="page-content">
-        <div class="solution-info">
-          <h1>{{ solution.title }}</h1>
-          <div class="solution-meta">
-            <span class="solution-date">
-              CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
-            </span>
+    <div v-if="!pending">
+      <div v-if="solution">
+        <div class="page-header">
+          <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('/solutions')">{{
+                $t('navigation.solutions')
+              }}</NuxtLink>
+            </el-breadcrumb-item>
+            <el-breadcrumb-item class="text-md opacity-50">{{
+              solution.title
+            }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div class="page-content">
+          <div class="solution-info">
+            <h1>{{ solution.title }}</h1>
+            <div class="solution-meta">
+              <span class="solution-date">
+                CreatedAt:
+                {{ new Date(solution.createdAt).toLocaleDateString() }}
+              </span>
+            </div>
+          </div>
+          <p class="summary">{{ solution.summary }}</p>
+          <div class="solution-content">
+            <markdown-renderer :content="solution.content || ''" />
           </div>
         </div>
-        <p class="summary">{{ solution.summary }}</p>
-        <div class="solution-content">
-          <markdown-renderer :content="solution.content || ''" />
-        </div>
+      </div>
+      <div v-else class="not-found">
+        <el-result
+          icon="warning"
+          :title="$t('solution-not-found')"
+          :sub-title="$t('solution-not-found-desc')"
+        >
+          <template #extra>
+            <el-button type="primary" @click="$router.push('/productions')">
+              {{ $t('back-to-solutions') }}
+            </el-button>
+          </template>
+        </el-result>
       </div>
     </div>
     <div v-else class="loading">
@@ -45,27 +61,23 @@
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const solution = ref<Solution | null>(null);
-
   // 获取路由参数(documentId)
   const documentId = computed(() => route.params.slug as string);
 
-  onMounted(async () => {
-    try {
-      const response = await findOne<Solution>('solutions', documentId.value, {
+  const { data, pending, error } = useAsyncData(
+    () => `solution-${documentId.value}`,
+    () =>
+      findOne<Solution>('solutions', documentId.value, {
         populate: '*',
         locale: strapiLocale,
-      });
-      if (response.data) {
-        solution.value = {
-          ...response.data,
-          // 确保 solution_type 保持原始类型
-          solution_type: response.data.solution_type,
-        };
-      }
-      console.log('Fetched Solution:', solution.value);
-    } catch (error) {
-      console.error('Failed to fetch solution:', error);
+      })
+  );
+
+  const solution = computed(() => data.value?.data ?? null);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
@@ -127,4 +139,11 @@
     align-items: center;
     margin-top: 1rem;
   }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
 </style>
diff --git a/app/pages/solutions/index.vue b/app/pages/solutions/index.vue
index 79ec909..328fe25 100644
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@@ -15,7 +15,7 @@
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="solutions-container">
+    <div v-if="!pending" class="solutions-container">
       <el-tabs v-model="activeName" class="solutions-tabs">
         <el-tab-pane :label="$t('all')" name="all">
           <div class="solution-list">
@@ -48,18 +48,34 @@
         </el-tab-pane>
       </el-tabs>
     </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('solutions', () =>
+    find<Solution>('solutions', {
+      populate: {
+        cover: {
+          populate: '*',
+        },
+        solution_type: {
+          populate: '*',
+        },
+      },
+      locale: strapiLocale,
+    })
+  );
+
   const activeName = ref<string>('all');
 
-  const solutions = ref<Solution[]>([]);
+  const solutions = computed(() => data.value?.data ?? []);
 
   // 按类型分组
   const groupedSolutions = computed(() => {
@@ -81,27 +97,9 @@
     return gourps;
   });
 
-  onMounted(async () => {
-    try {
-      const response = await find<Solution>('solutions', {
-        populate: {
-          cover: {
-            populate: '*',
-          },
-          solution_type: {
-            populate: '*',
-          },
-        },
-        locale: strapiLocale,
-      });
-      solutions.value = response.data.map((item: Solution) => ({
-        ...item,
-        solution_type: item.solution_type,
-      }));
-      console.log('Fetched Solutions:', solutions.value);
-      console.log('Grouped Solutions:', groupedSolutions.value);
-    } catch (error) {
-      console.error('Failed to fetch solutions:', error);
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3922894..cfd549c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -51,6 +51,9 @@
   "product-not-found": "Product Not Found",
   "product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
   "back-to-productions": "Back to Products",
+  "solution-not-found": "Solution Not Found",
+  "solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
+  "back-to-solutions": "Back to Solutions",
   "no-content-available": "No detailed information available",
   "loading": "Loading...",
   "our-productions": "Our Productions",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index 9a94dde..cd59a96 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -51,6 +51,9 @@
   "product-not-found": "产品未找到",
   "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
   "back-to-productions": "返回产品列表",
+  "solution-not-found": "解决方案未找到",
+  "solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
+  "back-to-solutions": "返回解决方案列表",
   "no-content-available": "暂无详细信息",
   "loading": "加载中...",
   "our-productions": "我们的产品",

From d4c079286eb3343a3bc8fafadee8459705ecb95b Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 16:27:01 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat(SSR):=20=E5=B0=86=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=A1=B5=E9=9D=A2=E6=94=B9=E4=B8=BASSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/support/contact-us.vue | 78 ++++++++++++++------------------
 app/pages/support/documents.vue  | 33 ++++++--------
 app/pages/support/faq.vue        | 25 ++++------
 3 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index e804639..44ad63d 100644
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@@ -1,31 +1,29 @@
 <template>
   <div class="page-container">
-    <div v-if="content">
-      <support-tabs model-value="contact-us" />
-      <div class="page-header">
-        <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
-        <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('/support')">
-              {{ $t('navigation.support') }}
-            </NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/support/contact-us')">
-              {{ $t('navigation.contact-info') }}
-            </NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
+    <support-tabs model-value="contact-us" />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
+      <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('/support')">
+            {{ $t('navigation.support') }}
+          </NuxtLink>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/support/contact-us')">
+            {{ $t('navigation.contact-info') }}
+          </NuxtLink>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
 
-      <div class="page-content">
-        <markdown-renderer :content="content || ''" />
-      </div>
+    <div v-if="!pending" class="page-content">
+      <markdown-renderer :content="content || ''" />
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="5" animated />
@@ -36,28 +34,20 @@
 <script setup lang="ts">
   const { findOne } = useStrapi();
   const { getStrapiLocale } = useLocalizations();
-
   const strapiLocale = getStrapiLocale();
 
-  const content = ref<string>('');
+  const { data, pending, error } = useAsyncData('contact-info', () =>
+    findOne<StrapiContactInfo>('contact-info', undefined, {
+      populate: '*',
+      locale: strapiLocale,
+    })
+  );
 
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiContactInfo>(
-        'contact-info',
-        undefined,
-        {
-          populate: '*',
-          locale: strapiLocale,
-        }
-      );
-      if (response.data) {
-        content.value = response.data.content || '';
-      } else {
-        console.warn('No contact info data found');
-      }
-    } catch (error) {
-      console.error('Failed to fetch contact info:', error);
+  const content = computed(() => data.value?.data.content ?? '');
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index ad3c11f..3ab5322 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -37,26 +37,23 @@
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const pending = ref(true);
+  const { data, pending, error } = useAsyncData('documents', () =>
+    find<ProductionDocument>('production-documents', {
+      populate: 'document',
+      locale: strapiLocale,
+    })
+  );
 
-  const documents = ref<StrapiMedia[]>([]);
+  const documents = computed(
+    () =>
+      data.value?.data.map((item) => ({
+        ...item.document,
+      })) || []
+  );
 
-  onMounted(async () => {
-    try {
-      const response = await find<ProductionDocument>('production-documents', {
-        locale: strapiLocale,
-        populate: 'document',
-      });
-      if (response.data) {
-        documents.value =
-          response.data.map((item) => ({
-            ...item.document,
-          })) || [];
-      }
-    } catch (error) {
-      console.error('Error fetching documents:', error);
-    } finally {
-      pending.value = false;
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index bde1d29..054ecde 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
     <div v-if="pending" class="flex justify-center items-center h-64">
-      <el-spinner />
+      <el-skeleton :rows="6" animated />
     </div>
     <div v-else>
       <support-tabs model-value="faq" />
@@ -37,22 +37,17 @@
   const { getStrapiLocale } = useLocalizations();
   const strapiLocale = getStrapiLocale();
 
-  const questions = ref<Question[]>([]);
+  const { data, pending, error } = useAsyncData('questions', () =>
+    find<Question>('questions', {
+      locale: strapiLocale,
+    })
+  );
 
-  const pending = ref(true);
+  const questions = computed(() => data.value?.data ?? null);
 
-  onMounted(async () => {
-    try {
-      const faqData = await find<Question>('questions', {
-        locale: strapiLocale,
-      });
-      if (faqData) {
-        questions.value = faqData.data || [];
-      }
-    } catch (error) {
-      console.error('Failed to fetch FAQ data:', error);
-    } finally {
-      pending.value = false;
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>

From 9f2f7f6984d1fa23300a30a416b201723575aeee Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 16:30:23 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat(SSR):=20=E5=B0=86=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E6=88=91=E4=BB=AC=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/about/index.vue | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 4b6b0d0..7545652 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-container">
-    <div v-if="content">
+    <div v-if="!pending">
       <el-breadcrumb class="breadcrumb" separator="/">
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">
@@ -40,27 +40,19 @@
 <script setup lang="ts">
   const { findOne } = useStrapi();
   const { getStrapiLocale } = useLocalizations();
-
   const strapiLocale = getStrapiLocale();
 
-  const content = ref<string | null>(null);
+  const { data, pending, error } = useAsyncData('company-profile', () =>
+    findOne<StrapiCompanyProfile>('company-profile', undefined, {
+      locale: strapiLocale,
+    })
+  );
 
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiCompanyProfile>(
-        'company-profile',
-        undefined,
-        {
-          locale: strapiLocale,
-        }
-      );
-      if (response.data) {
-        content.value = response.data.content || '';
-      } else {
-        console.warn('No company profile data found');
-      }
-    } catch (error) {
-      console.error('Failed to fetch company profile:', error);
+  const content = computed(() => data.value?.data.content);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>

From 1ac9c76c3e9c14361170cb16ff19cb04ac48636f Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 16:40:46 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat(SSR):=20=E4=B8=BA=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E9=A1=B5=E5=90=AF=E7=94=A8SSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/search.vue | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 895d644..9f5f16f 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -101,12 +101,24 @@
   const localePath = useLocalePath();
 
   // 搜索相关
-  const loading = ref(true);
   const { search } = useMeilisearch();
   const keyword = ref('');
   const activeRequestId = ref(0);
 
-  const sections = ref<SearchSection[]>([]);
+  const {
+    data: sections,
+    pending: loading,
+    error,
+    refresh,
+  } = await useAsyncData(
+    () => `search-${route.query.query ?? ''}`,
+    async () => {
+      const q = String(route.query.query ?? '').trim();
+      if (!q) return [];
+      return await search(q, { limit: 12 });
+    }
+  );
+
   // 本地化+空Section过滤
   const filteredSections = computed(() =>
     sections.value
@@ -137,7 +149,7 @@
     return map;
   });
 
-  // 分类控制
+  // 分页控制
   const currentPage = ref(1);
 
   const hasResults = computed(() =>
@@ -165,7 +177,6 @@
       return;
     }
 
-    loading.value = true;
     try {
       const results = await search(trimmed, { limit: 12 });
       if (requestId === activeRequestId.value) {
@@ -178,10 +189,6 @@
       if (requestId === activeRequestId.value) {
         sections.value = [];
       }
-    } finally {
-      if (requestId === activeRequestId.value) {
-        loading.value = false;
-      }
     }
   };
 
@@ -204,12 +211,8 @@
   );
 
   onMounted(() => {
-    if (typeof route.query.query === 'string' && route.query.query.trim()) {
+    if (typeof route.query.query === 'string' && route.query.query.trim())
       keyword.value = route.query.query;
-      performSearch(route.query.query);
-    } else {
-      loading.value = false;
-    }
   });
 
   useHead(() => ({

From 1c98921e0187a1283f80315f97cae0547e0f423d Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sun, 28 Sep 2025 16:41:36 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=E4=B8=BA=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E9=A1=B5=E6=B7=BB=E5=8A=A0error=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/search.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 9f5f16f..959394e 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -109,7 +109,6 @@
     data: sections,
     pending: loading,
     error,
-    refresh,
   } = await useAsyncData(
     () => `search-${route.query.query ?? ''}`,
     async () => {
@@ -210,6 +209,12 @@
     }
   );
 
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+    }
+  });
+
   onMounted(() => {
     if (typeof route.query.query === 'string' && route.query.query.trim())
       keyword.value = route.query.query;