fix dashboard cards

src/views/dashboard/MediaServerLatest.vue

@@ -1,38 +1,54 @@
 <script setup lang="ts">
 import api from '@/api'
-import type { MediaServerPlayItem } from '@/api/types'
+import type { MediaServerConf, MediaServerPlayItem } from '@/api/types'
 import PosterCard from '@/components/cards/PosterCard.vue'
 
 // 最近入库列表
-const latestList = ref<MediaServerPlayItem[]>([])
+const latestList = ref<{ [key: string]: MediaServerPlayItem[] }>({})
+
+// 所有媒体服务器设置
+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 ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 调用API查询
-async function loadLatest() {
+async function loadLatest(server: string) {
   try {
-    latestList.value = await api.get('mediaserver/latest')
+    latestList.value[server] = await api.get('mediaserver/latest', { params: { server } })
   } catch (e) {
     console.log(e)
   }
 }
 
-onMounted(() => {
-  loadLatest()
+onMounted(async () => {
+  await loadMediaServerSetting()
+  for (const server of mediaServers.value) {
+    loadLatest(server.name)
+  }
 })
 </script>
 
 <template>
-  <VHover>
+  <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 >最近添加</VCardTitle>
+          <VCardTitle>最近添加 - {{ name }}</VCardTitle>
         </VCardItem>
 
-        <div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
-          <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
+        <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>

src/views/dashboard/MediaServerPlaying.vue

@@ -1,27 +1,46 @@
 <script setup lang="ts">
 import api from '@/api'
-import type { MediaServerPlayItem } from '@/api/types'
+import type { MediaServerConf, MediaServerPlayItem } from '@/api/types'
 import BackdropCard from '@/components/cards/BackdropCard.vue'
 
 // 继续播放列表
 const playingList = ref<MediaServerPlayItem[]>([])
 
-// 调用API查询
-async function loadPlayingList() {
+// 所有媒体服务器设置
+const mediaServers = ref<MediaServerConf[]>([])
+
+// 调用API查询媒体服务器设置
+async function loadMediaServerSetting() {
   try {
-    playingList.value = await api.get('mediaserver/playing')
+    const result: { [key: string]: any } = await api.get('system/setting/MediaServers')
+    mediaServers.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 调用API查询
+async function loadPlayingList(server: string) {
+  try {
+    const result: MediaServerPlayItem[] = await api.get('mediaserver/playing', { params: { server } })
+    if (result && result.length > 0) {
+      playingList.value = playingList.value.concat(result)
+    }
   } catch (e) {
     console.log(e)
   }
 }
 
-onMounted(() => {
-  loadPlayingList()
+onMounted(async () => {
+  await loadMediaServerSetting()
+  for (const server of mediaServers.value) {
+    loadPlayingList(server.name)
+  }
 })
 </script>
 
 <template>
-  <VHover>
+  <VHover v-if="playingList.length > 0">
     <template #default="hover">
       <VCard v-bind="hover.props">
         <VCardItem>
@@ -31,8 +50,8 @@ onMounted(() => {
           <VCardTitle>继续观看</VCardTitle>
         </VCardItem>
 
-        <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 class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
+          <BackdropCard v-for="item in playingList" :key="item.id" :media="item" height="10rem" />
         </div>
       </VCard>
     </template>