feat(SSR): 将解决方案页改为SSR

- 使用Nuxt的useAsyncData
- 添加i18n信息

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>