style(ui): refine header and encyclopedia interactions

src/views/encyclopedia/EncyclopediaView.vue

@@ -76,7 +76,6 @@ onMounted(async () => {
           <EncyclopediaProgressCard
             :unlocked-count="authStore.isLoggedIn ? encyclopediaStore.unlockedCount : 0"
             :total-count="encyclopediaStore.cloudTypes.length || 10"
-            :percent="encyclopediaStore.unlockPercent"
             :is-logged-in="authStore.isLoggedIn"
           />
         </div>
@@ -95,7 +94,7 @@ onMounted(async () => {
         图鉴收藏数据暂时不可用：{{ encyclopediaStore.collectionError }}
       </NAlert>
 
-      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
         <NCard v-for="n in 6" :key="n" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
           <NSkeleton class="h-44 w-full" />
           <NSkeleton class="mt-5 h-5 w-2/5" />
@@ -104,7 +103,7 @@ onMounted(async () => {
         </NCard>
       </div>
 
-      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
         <button
           v-for="cloudType in encyclopediaStore.cloudTypes"
           :key="cloudType.id"