feat: virtualize media server dashboard grids

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>

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>

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>