From 2e22f6ae8663b09358ff9bf9e6f14f0ae650d3b0 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 13 May 2026 21:08:59 +0800
Subject: [PATCH] feat: virtualize media server dashboard grids

---
 src/views/dashboard/MediaServerLatest.vue  | 16 +++++++++++++---
 src/views/dashboard/MediaServerLibrary.vue | 16 +++++++++++++---
 src/views/dashboard/MediaServerPlaying.vue | 16 +++++++++++++---
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index d3e2c86b..355db462 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
 import api from '@/api'
 import type { MediaServerConf, MediaServerPlayItem } from '@/api/types'
 import PosterCard from '@/components/cards/PosterCard.vue'
+import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -67,9 +68,18 @@ onActivated(() => {
             <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
           </VCardItem>
 
-          <div class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
-            <PosterCard v-for="item in data" :key="item.id" :media="item" />
-          </div>
+          <ProgressiveCardGrid
+            :items="data"
+            :get-item-key="item => item.id || item.link || item.title"
+            :min-item-width="144"
+            :item-aspect-ratio="1.5"
+            class="mx-3 mb-3"
+            tabindex="0"
+          >
+            <template #default="{ item }">
+              <PosterCard :media="item" />
+            </template>
+          </ProgressiveCardGrid>
         </VCard>
       </template>
     </VHover>
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
index 8aae8456..cb5091c5 100644
--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -2,6 +2,7 @@
 import api from '@/api'
 import type { MediaServerConf, MediaServerLibrary } from '@/api/types'
 import LibraryCard from '@/components/cards/LibraryCard.vue'
+import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -69,9 +70,18 @@ onActivated(() => {
           </template>
           <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
         </VCardItem>
-        <div class="grid gap-4 grid-backdrop-card mx-3 mb-3" tabindex="0">
-          <LibraryCard v-for="item in libraryList" :key="item.id" :media="item" height="10rem" />
-        </div>
+        <ProgressiveCardGrid
+          :items="libraryList"
+          :get-item-key="item => item.id || item.name"
+          :min-item-width="240"
+          :estimated-item-height="160"
+          class="mx-3 mb-3"
+          tabindex="0"
+        >
+          <template #default="{ item }">
+            <LibraryCard :media="item" height="10rem" />
+          </template>
+        </ProgressiveCardGrid>
       </VCard>
     </template>
   </VHover>
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
index 5c9d8644..db1967e0 100644
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -2,6 +2,7 @@
 import api from '@/api'
 import type { MediaServerConf, MediaServerPlayItem } from '@/api/types'
 import BackdropCard from '@/components/cards/BackdropCard.vue'
+import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -70,9 +71,18 @@ onActivated(() => {
           <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
         </VCardItem>
 
-        <div class="grid gap-4 grid-backdrop-card mx-3 mb-3" tabindex="0">
-          <BackdropCard v-for="item in playingList" :key="item.id" :media="item" height="10rem" />
-        </div>
+        <ProgressiveCardGrid
+          :items="playingList"
+          :get-item-key="item => item.id || item.link || item.title"
+          :min-item-width="240"
+          :estimated-item-height="160"
+          class="mx-3 mb-3"
+          tabindex="0"
+        >
+          <template #default="{ item }">
+            <BackdropCard :media="item" height="10rem" />
+          </template>
+        </ProgressiveCardGrid>
       </VCard>
     </template>
   </VHover>