refactor: fix media server libraries

src/views/dashboard/MediaServerLibrary.vue

@@ -1,27 +1,46 @@
 <script setup lang="ts">
 import api from '@/api'
-import type { MediaServerPlayItem } from '@/api/types'
+import type { MediaServerConf, MediaServerLibrary } from '@/api/types'
 import LibraryCard from '@/components/cards/LibraryCard.vue'
 
 // 媒体库列表
-const libraryList = ref<MediaServerPlayItem[]>([])
+const libraryList = ref<MediaServerLibrary[]>([])
+
+// 所有媒体服务器设置
+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 loadLibrary() {
+async function loadLibrary(server: string) {
   try {
-    libraryList.value = await api.get('mediaserver/library')
+    const result: MediaServerLibrary[] = await api.get('mediaserver/library', { params: { server } })
+    if (result && result.length > 0) {
+      libraryList.value = libraryList.value.concat(result)
+    }
   } catch (e) {
     console.log(e)
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
-  loadLibrary()
+  await loadMediaServerSetting()
+  for (const server of mediaServers.value) {
+    loadLibrary(server.name)
+  }
 })
 </script>
 
 <template>
-  <VHover>
+  <VHover v-if="libraryList.length > 0">
     <template #default="hover">
       <VCard v-bind="hover.props">
         <VCardItem>
@@ -30,9 +49,8 @@ onMounted(() => {
           </template>
           <VCardTitle>我的媒体库</VCardTitle>
         </VCardItem>
-
+        <div class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
-        <div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
+          <LibraryCard v-for="item in libraryList" :key="item.id" :media="item" height="10rem" />
-          <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
         </div>
       </VCard>
     </template>