From 537a6b0bd6f4587a47ca45fdee40348a01ef0def Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 19 Dec 2025 12:00:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E6=B8=B2=E6=9F=93=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 渲染机制：产品列表页懒加载采用el-skeleton自身模板机制
- 布局调整：调整产品页/骨架屏在竖屏下的布局
---
 app/pages/products/index.vue     | 104 ++++++++++++++++++++++++-------
 app/pages/support/contact-us.vue |   7 ++-
 2 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/app/pages/products/index.vue b/app/pages/products/index.vue
index de3028f..eaa7d30 100644
--- a/app/pages/products/index.vue
+++ b/app/pages/products/index.vue
@@ -10,31 +10,49 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
-      <div class="products-container">
-        <el-collapse v-model="activeNames" class="product-collapse">
-          <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-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>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-    </div>
-    <div v-else>
-      <el-skeleton :rows="6" animated />
+          </div>
+        </template>
+        <template #default>
+          <div class="products-container">
+            <el-collapse v-model="activeNames" class="product-collapse">
+              <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;
diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index 1f6ca71..9927efe 100644
--- a/app/pages/support/contact-us.vue
+++ b/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 || ''" />