From 6be05819b081569eee06e52e8e8ad952360c565b Mon Sep 17 00:00:00 2001
From: InfinityPacer <160988576+InfinityPacer@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:39:02 +0800
Subject: [PATCH] fix(dashboard): handle MediaServerLatest.vue rendering
 failures

---
 src/views/dashboard/MediaServerLatest.vue | 49 +++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index 4a5d4b54..c0d07e29 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import api from '@/api'
 import type { MediaServerConf, MediaServerPlayItem } from '@/api/types'
 import PosterCard from '@/components/cards/PosterCard.vue'
@@ -12,19 +13,23 @@ const mediaServers = ref<MediaServerConf[]>([])
 // 调用API查询媒体服务器设置
 async function loadMediaServerSetting() {
   try {
-    const result: { [key: string]: any } = await api.get('system/setting/MediaServers')
-    mediaServers.value = result.data?.value ?? []
+    const response: { data: { value: MediaServerConf[] } } = await api.get('system/setting/MediaServers')
+    mediaServers.value = response.data?.value ?? []
   } catch (error) {
-    console.log(error)
+    console.log('加载媒体服务器设置失败:', error)
   }
 }
 
-// 调用API查询
+// 调用API查询最近入库
 async function loadLatest(server: string) {
   try {
-    latestList.value[server] = await api.get('mediaserver/latest', { params: { server } })
+    const response: MediaServerPlayItem[] = await api.get('mediaserver/latest', { params: { server } })
+    // 仅在有数据时赋值
+    if (response && response.length > 0) {
+      latestList.value[server] = response
+    }
   } catch (e) {
-    console.log(e)
+    console.log(`加载媒体服务器 "${server}" 的最近入库失败:`, e)
   }
 }
 
@@ -37,20 +42,22 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VHover v-for="(data, name) in latestList">
-    <template #default="hover">
-      <VCard v-bind="hover.props">
-        <VCardItem>
-          <template #append>
-            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
-          </template>
-          <VCardTitle>最近添加 - {{ name }}</VCardTitle>
-        </VCardItem>
+  <div>
+    <VHover v-for="(data, name) in latestList" :key="name">
+      <template #default="hover">
+        <VCard v-bind="hover.props">
+          <VCardItem>
+            <template #append>
+              <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+            </template>
+            <VCardTitle>最近添加 - {{ 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>
-      </VCard>
-    </template>
-  </VHover>
+          <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>
+        </VCard>
+      </template>
+    </VHover>
+  </div>
 </template>