fix(dashboard): handle MediaServerLatest.vue rendering failures

This commit is contained in:
InfinityPacer
2024-10-02 11:39:02 +08:00
parent 016c232ef2
commit 6be05819b0

View File

@@ -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>