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

- 骨架屏：解决方案列表页骨架屏渲染由el-skeleton模板控制
---
 app/pages/solutions/index.vue | 118 ++++++++++++++++++++++++----------
 1 file changed, 84 insertions(+), 34 deletions(-)

diff --git a/app/pages/solutions/index.vue b/app/pages/solutions/index.vue
index 3bff38e..25507e0 100644
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@@ -8,41 +8,59 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="solutions-container">
-      <el-tabs v-model="activeName" class="solutions-tabs">
-        <el-tab-pane :label="$t('all')" name="all">
-          <div class="solution-list">
-            <solution-card
-              v-for="solution in solutions"
-              :key="solution.id"
-              :title="solution.title"
-              :summary="solution.summary || ''"
-              :cover-url="getImageUrl(solution.cover || '')"
-              :document-id="solution.id.toString()"
+    <div class="solutions-container">
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{
+          leading: 500,
+          trailing: 500,
+        }"
+      >
+        <template #template>
+          <div class="skeleton-group-list">
+            <el-skeleton-item
+              v-for="i in 12"
+              :key="i"
+              variant="rect"
+              class="skeleton-card"
             />
           </div>
-        </el-tab-pane>
-        <el-tab-pane
-          v-for="[key, value] in Object.entries(groupedSolutions)"
-          :key="key"
-          :label="key || '未分类'"
-          :name="key || 'no-category'"
-        >
-          <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>
-    </div>
-    <div v-else>
-      <el-skeleton :rows="6" animated />
+        </template>
+        <template #default>
+          <el-tabs v-model="activeName" class="solutions-tabs">
+            <el-tab-pane :label="$t('all')" name="all">
+              <div class="solution-list">
+                <solution-card
+                  v-for="solution in solutions"
+                  :key="solution.id"
+                  :title="solution.title"
+                  :summary="solution.summary || ''"
+                  :cover-url="getImageUrl(solution.cover || '')"
+                  :document-id="solution.id.toString()"
+                />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              v-for="[key, value] in Object.entries(groupedSolutions)"
+              :key="key"
+              :label="key || '未分类'"
+              :name="key || 'no-category'"
+            >
+              <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>