From fa1a22b286e5bd6dcb167e83c5bfe7325f521d88 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 19 Dec 2025 11:17:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=8D=E5=8A=A1=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=A1=B5=E6=87=92=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 骨架屏调整：服务支持页骨架屏布局调整
- 懒加载：服务支持页添加懒加载机制
---
 app/pages/support/contact-us.vue | 10 ++---
 app/pages/support/documents.vue  | 27 ++++++++++---
 app/pages/support/faq.vue        | 65 +++++++++++++++++++-------------
 3 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index 7812c9c..442a6c3 100644
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@@ -6,7 +6,10 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
-    <div v-if="!pending" class="page-content">
+    <div v-if="pending" class="page-content">
+      <el-skeleton :rows="5" animated />
+    </div>
+    <div v-else class="page-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="html-typography" v-html="contactInfo?.content || ''" />
       <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
@@ -17,9 +20,6 @@
       <!--   /> -->
       <!-- </div> -->
     </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
-    </div>
   </div>
 </template>
 
@@ -31,7 +31,7 @@
     { label: $t('navigation.support'), to: localePath('/support') },
     { label: $t('navigation.contact-info') },
   ];
-  const { data: contactInfo, pending, error } = await useContactInfo();
+  const { data: contactInfo, pending, error } = useContactInfo();
 
   watch(error, (value) => {
     if (value) {
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 5bf8fd3..3c42a6d 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -1,15 +1,30 @@
 <template>
   <div class="page-container">
-    <div v-if="pending">
-      <el-skeleton :rows="5" animated />
-    </div>
-    <div v-else>
+    <div>
       <support-tabs model-value="documents" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
-      <div class="page-content">
+      <div v-if="pending" class="page-content">
+        <el-skeleton :rows="10" animated class="py-4" throttle="100">
+          <template #template>
+            <div class="flex flex-col gap-xl">
+              <el-skeleton-item
+                variant="rect"
+                style="width: 100%; height: 100px"
+              />
+              <el-skeleton-item
+                v-for="i in 10"
+                :key="i"
+                variant="h1"
+                style="height: 60px"
+              />
+            </div>
+          </template>
+        </el-skeleton>
+      </div>
+      <div v-else class="page-content">
         <document-filter
           v-model="filters"
           :product-type-options="productTypeOptions"
@@ -56,7 +71,7 @@
   const page = ref(1);
   const documentsPerPage = 10;
 
-  const { data: documents, pending, error } = await useDocumentList();
+  const { data: documents, pending, error } = useDocumentList();
 
   const documentTypeOptions = computed(() => {
     const types: DocumentTypeView[] = [];
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index e403f68..e1eb1f5 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -1,34 +1,47 @@
 <template>
   <div class="page-container">
-    <div v-if="pending" class="flex justify-center items-center h-64">
-      <el-skeleton :rows="6" animated />
+    <support-tabs model-value="faq" />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-else>
-      <support-tabs model-value="faq" />
-      <div class="page-header">
-        <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
-        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-      </div>
 
-      <div class="page-content">
-        <question-filter
-          v-model="filters"
-          :product-type-options="productTypeOptions"
-          :product-options="productOptions"
-          :question-type-options="questionTypeOptions"
-        />
+    <div v-if="pending" class="page-content">
+      <el-skeleton :rows="10" animated class="py-4" throttle="100">
+        <template #template>
+          <div class="flex flex-col gap-xl">
+            <el-skeleton-item
+              variant="rect"
+              style="width: 100%; height: 100px"
+            />
+            <el-skeleton-item
+              v-for="i in 10"
+              :key="i"
+              variant="h1"
+              style="height: 60px"
+            />
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
+    <div v-else class="page-content">
+      <question-filter
+        v-model="filters"
+        :product-type-options="productTypeOptions"
+        :product-options="productOptions"
+        :question-type-options="questionTypeOptions"
+      />
 
-        <question-list :questions="paginatedQuestions" />
+      <question-list :questions="paginatedQuestions" />
 
-        <el-pagination
-          v-model:current-page="page"
-          class="justify-center pagination-container"
-          layout="prev, pager, next"
-          hide-on-single-page
-          :page-size="questionsPerPage"
-          :total="filteredQuestions.length"
-        />
-      </div>
+      <el-pagination
+        v-model:current-page="page"
+        class="justify-center pagination-container"
+        layout="prev, pager, next"
+        hide-on-single-page
+        :page-size="questionsPerPage"
+        :total="filteredQuestions.length"
+      />
     </div>
   </div>
 </template>
@@ -57,7 +70,7 @@
     { label: $t('navigation.faq') },
   ];
 
-  const { data: questions, pending, error } = await useQuestionList();
+  const { data: questions, pending, error } = useQuestionList();
 
   const questionTypeOptions = computed(() => {
     const types: QuestionTypeView[] = [];