fix: 调整关于我们页面渲染机制

- 骨架屏：骨架屏由el-skeleton模板控制

app/pages/about/index.vue

@@ -1,36 +1,37 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
+    <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
-      <div class="content">
+    <div class="content">
-        <!-- eslint-disable-next-line vue/no-v-html -->
+      <el-skeleton :loading="pending" :rows="10" animated>
-        <div class="html-typography" v-html="companyProfile.content || ''" />
+        <template #default>
-        <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
+          <!-- eslint-disable-next-line vue/no-v-html -->
-        <!-- <div v-else> -->
+          <div class="html-typography" v-html="companyProfile?.content || ''" />
-        <!--   <html-renderer -->
+          <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
-        <!--     class="html-typography" -->
+          <!-- <div v-else> -->
-        <!--     :html="companyProfile.content || ''" -->
+          <!--   <html-renderer -->
-        <!--   /> -->
+          <!--     class="html-typography" -->
-        <!-- </div> -->
+          <!--     :html="companyProfile.content || ''" -->
-      </div>
+          <!--   /> -->
+          <!-- </div> -->
 
-      <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
+          <el-divider content-position="left">{{
-      <div class="button-group">
+            $t('learn-more')
-        <learn-more-card
+          }}</el-divider>
-          :title="$t('navigation.contact-info')"
+          <div class="button-group">
-          :icon="ElIconService"
+            <learn-more-card
-          :to="$localePath('/support/contact-us')"
+              :title="$t('navigation.contact-info')"
-        />
+              :icon="ElIconService"
-        <learn-more-card
+              :to="$localePath('/support/contact-us')"
-          :title="$t('navigation.address')"
+            />
-          :icon="ElIconMapLocation"
+            <learn-more-card
-          @click="openMap"
+              :title="$t('navigation.address')"
-        />
+              :icon="ElIconMapLocation"
-      </div>
+              @click="openMap"
-    </div>
+            />
-    <div v-else class="loading">
+          </div>
-      <el-skeleton :rows="5" animated />
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -42,7 +43,9 @@
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.about-us') },
   ];
-  const { data: companyProfile, pending, error } = await useCompanyProfile();
+  const { data, pending, error } = useCompanyProfile();
+
+  const companyProfile = computed(() => data.value ?? null);
 
   const openMap = () => {
     window.open(localePath('/locate'));

app/pages/products/index.vue

@@ -10,31 +10,49 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
+    <div>
-      <div class="products-container">
+      <el-skeleton
-        <el-collapse v-model="activeNames" class="product-collapse">
+        animated
-          <el-collapse-item
+        :loading="pending"
-            v-for="[key, value] in Object.entries(groupedProducts)"
+        :throttle="{ leading: 500, trailing: 500 }"
-            :key="key"
+      >
-            :title="key || '未分类'"
+        <template #template>
-            :name="key || 'no-category'"
+          <div v-for="i in 3" :key="i" class="products-container">
-          >
+            <el-skeleton-item variant="h1" class="skeleton-collapse" />
-            <div class="group-list">
+            <div class="skeleton-group-list">
-              <product-card
+              <el-skeleton-item
-                v-for="product in value.data"
+                v-for="j in 3"
-                :key="product.id"
+                :key="j"
-                :slug="product.id.toString()"
+                variant="rect"
-                :image-url="getImageUrl(product.cover.toString())"
+                class="skeleton-card"
-                :name="product.name"
-                :description="product.summary || ''"
               />
             </div>
-          </el-collapse-item>
+          </div>
-        </el-collapse>
+        </template>
-      </div>
+        <template #default>
-    </div>
+          <div class="products-container">
-    <div v-else>
+            <el-collapse v-model="activeNames" class="product-collapse">
-      <el-skeleton :rows="6" animated />
+              <el-collapse-item
+                v-for="[key, value] in Object.entries(groupedProducts)"
+                :key="key"
+                :title="key || '未分类'"
+                :name="key || 'no-category'"
+              >
+                <div class="group-list">
+                  <product-card
+                    v-for="product in value.data"
+                    :key="product.id"
+                    :slug="product.id.toString()"
+                    :image-url="getImageUrl(product.cover.toString())"
+                    :name="product.name"
+                    :description="product.summary || ''"
+                  />
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -151,6 +169,46 @@
     justify-content: flex-start;
   }
 
+  .skeleton-collapse {
+    height: 50px;
+    width: 100%;
+  }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 250px;
+    margin-right: 1rem;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .group-list {
+      justify-content: center;
+      align-items: center;
+    }
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+  }
+
   :deep(.el-collapse-item__header) {
     padding: 30px auto;
     font-size: 1.5rem;

app/pages/solutions/index.vue

@@ -8,41 +8,59 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="solutions-container">
+    <div class="solutions-container">
-      <el-tabs v-model="activeName" class="solutions-tabs">
+      <el-skeleton
-        <el-tab-pane :label="$t('all')" name="all">
+        :loading="pending"
-          <div class="solution-list">
+        animated
-            <solution-card
+        :throttle="{
-              v-for="solution in solutions"
+          leading: 500,
-              :key="solution.id"
+          trailing: 500,
-              :title="solution.title"
+        }"
-              :summary="solution.summary || ''"
+      >
-              :cover-url="getImageUrl(solution.cover || '')"
+        <template #template>
-              :document-id="solution.id.toString()"
+          <div class="skeleton-group-list">
+            <el-skeleton-item
+              v-for="i in 12"
+              :key="i"
+              variant="rect"
+              class="skeleton-card"
             />
           </div>
-        </el-tab-pane>
+        </template>
-        <el-tab-pane
+        <template #default>
-          v-for="[key, value] in Object.entries(groupedSolutions)"
+          <el-tabs v-model="activeName" class="solutions-tabs">
-          :key="key"
+            <el-tab-pane :label="$t('all')" name="all">
-          :label="key || '未分类'"
+              <div class="solution-list">
-          :name="key || 'no-category'"
+                <solution-card
-        >
+                  v-for="solution in solutions"
-          <div class="solution-list">
+                  :key="solution.id"
-            <solution-card
+                  :title="solution.title"
-              v-for="solution in value.data"
+                  :summary="solution.summary || ''"
-              :key="solution.id"
+                  :cover-url="getImageUrl(solution.cover || '')"
-              :document-id="solution.id.toString()"
+                  :document-id="solution.id.toString()"
-              :cover-url="getImageUrl(solution.cover || '')"
+                />
-              :title="solution.title"
+              </div>
-              :summary="solution.summary || ''"
+            </el-tab-pane>
-            />
+            <el-tab-pane
-          </div>
+              v-for="[key, value] in Object.entries(groupedSolutions)"
-        </el-tab-pane>
+              :key="key"
-      </el-tabs>
+              :label="key || '未分类'"
-    </div>
+              :name="key || 'no-category'"
-    <div v-else>
+            >
-      <el-skeleton :rows="6" animated />
+              <div class="solution-list">
+                <solution-card
+                  v-for="solution in value.data"
+                  :key="solution.id"
+                  :document-id="solution.id.toString()"
+                  :cover-url="getImageUrl(solution.cover || '')"
+                  :title="solution.title"
+                  :summary="solution.summary || ''"
+                />
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -56,7 +74,9 @@
     { label: $t('navigation.solutions') },
   ];
 
-  const { data: solutions, pending, error } = await useSolutionList();
+  const { data, pending, error } = useSolutionList();
+
+  const solutions = computed(() => data.value ?? []);
 
   const activeName = ref<string>('all');
 
@@ -123,4 +143,34 @@
     margin-bottom: 2rem;
     gap: 40px;
   }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 200px;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+  }
 </style>

app/pages/support/contact-us.vue

@@ -6,19 +6,25 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
-    <div v-if="!pending" class="page-content">
+    <div class="page-content">
-      <!-- eslint-disable-next-line vue/no-v-html -->
+      <el-skeleton
-      <div class="html-typography" v-html="contactInfo?.content || ''" />
+        :rows="10"
-      <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
+        :loading="pending"
-      <!-- <div v-else> -->
+        animated
-      <!--   <html-renderer -->
+        :throttle="{ leading: 500, trailing: 500 }"
-      <!--     class="html-typography" -->
+      >
-      <!--     :html="contactInfo?.content || ''" -->
+        <template #default>
-      <!--   /> -->
+          <!-- eslint-disable-next-line vue/no-v-html -->
-      <!-- </div> -->
+          <div class="html-typography" v-html="contactInfo?.content || ''" />
-    </div>
+          <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
-    <div v-else class="loading">
+          <!-- <div v-else> -->
-      <el-skeleton :rows="5" animated />
+          <!--   <html-renderer -->
+          <!--     class="html-typography" -->
+          <!--     :html="contactInfo?.content || ''" -->
+          <!--   /> -->
+          <!-- </div> -->
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -31,7 +37,9 @@
     { label: $t('navigation.support'), to: localePath('/support') },
     { label: $t('navigation.contact-info') },
   ];
-  const { data: contactInfo, pending, error } = await useContactInfo();
+  const { data, pending, error } = useContactInfo();
+
+  const contactInfo = computed(() => data.value ?? null);
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="page-container">
-    <div v-if="pending">
+    <div>
-      <el-skeleton :rows="5" animated />
-    </div>
-    <div v-else>
       <support-tabs model-value="documents" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
@@ -17,22 +14,47 @@
           :document-type-options="documentTypeOptions"
         />
 
-        <document-list
+        <el-skeleton
-          :documents="paginatedDocuments"
+          :loading="pending"
-          :show-category="
+          animated
-            filters.selectedDocumentType === null ||
+          :throttle="{
-            filters.selectedDocumentType === undefined
+            leading: 500,
-          "
+            trailing: 500,
-        />
+          }"
+        >
+          <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>
+          <template #default>
+            <document-list
+              :documents="paginatedDocuments"
+              :show-category="
+                filters.selectedDocumentType === null ||
+                filters.selectedDocumentType === undefined
+              "
+            />
 
-        <el-pagination
+            <el-pagination
-          v-model:current-page="page"
+              v-model:current-page="page"
-          class="justify-center pagination-container"
+              class="justify-center pagination-container"
-          layout="prev, pager, next"
+              layout="prev, pager, next"
-          hide-on-single-page
+              hide-on-single-page
-          :page-size="documentsPerPage"
+              :page-size="documentsPerPage"
-          :total="filteredDocuments.length"
+              :total="filteredDocuments.length"
-        />
+            />
+          </template>
+        </el-skeleton>
       </div>
     </div>
   </div>
@@ -56,7 +78,9 @@
   const page = ref(1);
   const documentsPerPage = 10;
 
-  const { data: documents, pending, error } = await useDocumentList();
+  const { data, pending, error } = useDocumentList();
+
+  const documents = computed(() => data.value ?? []);
 
   const documentTypeOptions = computed(() => {
     const types: DocumentTypeView[] = [];

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">
+    <support-tabs model-value="faq" />
-      <el-skeleton :rows="6" animated />
+    <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">
+    <div class="page-content">
-        <question-filter
+      <question-filter
-          v-model="filters"
+        v-model="filters"
-          :product-type-options="productTypeOptions"
+        :product-type-options="productTypeOptions"
-          :product-options="productOptions"
+        :product-options="productOptions"
-          :question-type-options="questionTypeOptions"
+        :question-type-options="questionTypeOptions"
-        />
+      />
 
-        <question-list :questions="paginatedQuestions" />
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div class="flex flex-col gap-xl">
+            <el-skeleton-item
+              v-for="i in 10"
+              :key="i"
+              variant="h1"
+              style="height: 80px"
+            />
+          </div>
+        </template>
+        <template #default>
+          <question-list :questions="paginatedQuestions" />
 
-        <el-pagination
+          <el-pagination
-          v-model:current-page="page"
+            v-model:current-page="page"
-          class="justify-center pagination-container"
+            class="justify-center pagination-container"
-          layout="prev, pager, next"
+            layout="prev, pager, next"
-          hide-on-single-page
+            hide-on-single-page
-          :page-size="questionsPerPage"
+            :page-size="questionsPerPage"
-          :total="filteredQuestions.length"
+            :total="filteredQuestions.length"
-        />
+          />
-      </div>
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -57,7 +70,9 @@
     { label: $t('navigation.faq') },
   ];
 
-  const { data: questions, pending, error } = await useQuestionList();
+  const { data, pending, error } = useQuestionList();
+
+  const questions = computed(() => data.value ?? []);
 
   const questionTypeOptions = computed(() => {
     const types: QuestionTypeView[] = [];