🔧 chore:改进播放器组件的加载状态显示, 优化 GD音乐解析逻辑,增加超时处理,调整音源列表

This commit is contained in:
alger
2025-05-10 20:12:10 +08:00
parent 80450349c0
commit 9cc064c01b
5 changed files with 271 additions and 210 deletions
+42 -8
View File
@@ -34,13 +34,18 @@
:class="{ 'only-cover': config.hideLyrics }"
:style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
>
<n-image
ref="PicImgRef"
:src="getImgUrl(playMusic?.picUrl, '500y500')"
class="img"
lazy
preview-disabled
/>
<div class="img-container relative">
<n-image
ref="PicImgRef"
:src="getImgUrl(playMusic?.picUrl, '500y500')"
class="img"
lazy
preview-disabled
/>
<div v-if="playMusic?.playLoading" class="loading-overlay">
<i class="ri-loader-4-line loading-icon"></i>
</div>
</div>
<div class="music-info">
<div class="music-content-name">{{ playMusic.name }}</div>
<div class="music-content-singer">
@@ -549,10 +554,14 @@ defineExpose({
max-width: none;
max-height: none;
.img {
.img-container {
@apply w-[50vh] h-[50vh] mb-8;
}
.img {
@apply w-full h-full;
}
.music-info {
@apply text-center w-[600px];
@@ -568,6 +577,10 @@ defineExpose({
}
}
.img-container {
@apply relative w-full h-full;
}
.img {
@apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
}
@@ -763,4 +776,25 @@ defineExpose({
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-overlay {
@apply absolute inset-0 flex items-center justify-center rounded-xl;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.loading-icon {
font-size: 48px;
color: white;
animation: spin 1s linear infinite;
}
</style>