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] =?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": "我们的产品",