fix: 补全骨架屏渲染机制

- 补全各个页面的骨架屏渲染机制修改

app/components/pages/search/SearchTabs.vue

@@ -47,3 +47,9 @@
     currentPage.value = 1; // 重置页码
   });
 </script>
+
+<style scoped>
+  .el-tabs {
+    width: 100%;
+  }
+</style>

app/pages/download/[id].vue

@@ -4,11 +4,17 @@
       <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="page-content">
+    <div class="page-content">
+      <el-skeleton
+        :loading="pending"
+        :rows="6"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
           <file-card :file-id="id" :file="file" />
-    </div>
+        </template>
-    <div v-else>
+      </el-skeleton>
-      <el-skeleton :rows="6" animated />
     </div>
   </div>
 </template>

app/pages/products/[slug].vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <div v-if="product">
       <!-- 面包屑导航 -->
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
@@ -19,15 +18,6 @@
       />
     </div>
   </div>
-    <div v-else class="loading">
-      <el-skeleton style="--el-skeleton-circle-size: 400px">
-        <template #template>
-          <el-skeleton-item variant="circle" />
-        </template>
-      </el-skeleton>
-      <el-skeleton :rows="5" animated />
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,7 +27,7 @@
   // 获取路由参数
   const id = route.params.slug as string;
 
-  const { data: product, pending, error } = await useProduct(id);
+  const { data: product, error } = await useProduct(id);
 
   const breadcrumbItems = computed(() => [
     { label: $t('navigation.home'), to: localePath('/') },

app/pages/search.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="search-page">
     <search-header v-model="keyword" />
-    <div v-if="loading" class="search-state">
+    <div class="search-state">
-      <el-skeleton :rows="4" animated />
+      <el-skeleton
-    </div>
+        :loading="loading"
-    <search-tabs v-else-if="hasResults" :search-items="searchItems" />
+        animated
-    <div v-else class="search-state">
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <el-skeleton-item
+            v-for="i in 10"
+            :key="i"
+            variant="rect"
+            class="skeleton-item"
+          />
+        </template>
+        <template #default>
+          <search-tabs v-if="hasResults" :search-items="searchItems" />
+          <div v-else>
             <el-empty
               :description="
                 route.query.query
@@ -14,6 +26,9 @@
               "
             />
           </div>
+        </template>
+      </el-skeleton>
+    </div>
   </div>
 </template>
 
@@ -96,7 +111,11 @@
   .search-state {
     display: flex;
     justify-content: center;
-    padding: 3rem 0;
+  }
+
+  .skeleton-item {
+    height: 80px;
+    margin-bottom: 1rem;
   }
 
   @media (max-width: 640px) {

app/pages/solutions/[slug].vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <div v-if="solution">
       <div class="page-header">
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
@@ -16,10 +15,6 @@
       />
     </div>
   </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,7 +24,7 @@
   // 获取路由参数
   const id = route.params.slug as string;
 
-  const { data: solution, pending, error } = await useSolution(id);
+  const { data: solution, error } = await useSolution(id);
 
   const breadcrumbItems = computed(() => [
     { label: $t('navigation.home'), to: localePath('/') },