feat(SSR): 将服务支持页面改为SSR

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>

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>

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>