feat: dashboard

src/views/dashboard/MediaServerLatest.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import api from '@/api'
 import type { MediaServerPlayItem } from '@/api/types'
+import PosterCard from '@/components/cards/PosterCard.vue'
 
 // 最近入库列表
 const latestList = ref<MediaServerPlayItem[]>([])
@@ -26,12 +27,22 @@ onMounted(() => {
       <VCardTitle>最近添加</VCardTitle>
     </VCardItem>
 
-    <VCardText class="pt-4" />
+    <div
+      v-if="latestList.length > 0"
+      class="grid gap-4 grid-media-card mx-3"
+      tabindex="0"
+    >
+      <PosterCard
+        v-for="data in latestList"
+        :key="data.id"
+        :media="data"
+      />
+    </div>
   </VCard>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 1rem;
+<style lang="scss">
+.grid-media-card {
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
 }
 </style>

src/views/dashboard/MediaServerLibrary.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import api from '@/api'
 import type { MediaServerPlayItem } from '@/api/types'
+import LibraryCard from '@/components/cards/LibraryCard.vue'
 
 // 媒体库列表
 const libraryList = ref<MediaServerPlayItem[]>([])
@@ -26,12 +27,24 @@ onMounted(() => {
       <VCardTitle>我的媒体库</VCardTitle>
     </VCardItem>
 
-    <VCardText class="pt-4" />
+    <div
+      v-if="libraryList.length > 0"
+      class="grid gap-4 grid-backdrop-card mx-3"
+      tabindex="0"
+    >
+      <LibraryCard
+        v-for="data in libraryList"
+        :key="data.id"
+        :media="data"
+        height="10rem"
+      />
+    </div>
   </VCard>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 1rem;
+<style lang="scss">
+.grid-backdrop-card {
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  padding-block-end: 1rem;
 }
 </style>

src/views/dashboard/MediaServerPlaying.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import api from '@/api'
 import type { MediaServerPlayItem } from '@/api/types'
+import BackdropCard from '@/components/cards/BackdropCard.vue'
 
 // 继续播放列表
 const playingList = ref<MediaServerPlayItem[]>([])
@@ -26,12 +27,24 @@ onMounted(() => {
       <VCardTitle>继续观看</VCardTitle>
     </VCardItem>
 
-    <VCardText class="pt-4" />
+    <div
+      v-if="playingList.length > 0"
+      class="grid gap-4 grid-backdrop-card mx-3"
+      tabindex="0"
+    >
+      <BackdropCard
+        v-for="data in playingList"
+        :key="data.id"
+        :media="data"
+        height="10rem"
+      />
+    </div>
   </VCard>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 1rem;
+<style lang="scss">
+.grid-backdrop-card {
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  padding-block-end: 1rem;
 }
 </style>

src/views/discover/MediaDetailView.vue

@@ -427,7 +427,7 @@ async function handlePlay() {
       // 打开链接地址
       setTimeout(() => {
         window.open(result.data.url, '_blank')
-      }, 500)
+      }, 100)
     }
     else { $toast.error(`获取播放链接失败：${result.message}！`) }
   }