fix: 调整产品列表页渲染机制

- 渲染机制：产品列表页懒加载采用el-skeleton自身模板机制
- 布局调整：调整产品页/骨架屏在竖屏下的布局

app/pages/products/index.vue

@@ -10,7 +10,26 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
+    <div>
+      <el-skeleton
+        animated
+        :loading="pending"
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div v-for="i in 3" :key="i" class="products-container">
+            <el-skeleton-item variant="h1" class="skeleton-collapse" />
+            <div class="skeleton-group-list">
+              <el-skeleton-item
+                v-for="j in 3"
+                :key="j"
+                variant="rect"
+                class="skeleton-card"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default>
           <div class="products-container">
             <el-collapse v-model="activeNames" class="product-collapse">
               <el-collapse-item
@@ -32,9 +51,8 @@
               </el-collapse-item>
             </el-collapse>
           </div>
-    </div>
-    <div v-else>
-      <el-skeleton :rows="6" animated />
+        </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/support/contact-us.vue

@@ -7,7 +7,12 @@
     </div>
 
     <div class="page-content">
-      <el-skeleton :rows="10" :loading="pending" animated>
+      <el-skeleton
+        :rows="10"
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
         <template #default>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="html-typography" v-html="contactInfo?.content || ''" />