From d11b16d791962afb6f343cb7234af4274b57fef9 Mon Sep 17 00:00:00 2001
From: zhangda <221830074@smail.nju.edu.cn>
Date: Sun, 22 Dec 2024 18:42:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E4=B8=8A?=
=?UTF-8?q?=E4=B8=80=E9=A6=96=E6=88=96=E4=B8=8B=E4=B8=80=E9=A6=96=E6=AD=8C?=
=?UTF-8?q?=E6=9B=B2=E6=97=B6=EF=BC=8C=E4=B8=AD=E9=97=B4=E6=AD=A3=E5=9C=A8?=
=?UTF-8?q?=E6=92=AD=E6=94=BE=E7=9A=84=E6=AD=8C=E6=9B=B2=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E4=B8=8D=E6=94=B9=E5=8F=98=E7=9A=84bug=EF=BC=8C=E4=BB=A5?=
=?UTF-8?q?=E5=8F=8A=E6=92=AD=E6=94=BE=E6=8C=89=E9=92=AE=E7=8A=B6=E6=80=81?=
=?UTF-8?q?=E4=B8=8D=E6=94=B9=E5=8F=98=E7=9A=84bug=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E5=88=87=E6=8D=A2=E8=89=BA=E4=BA=BA=E9=A1=B5=E9=9D=A2=E6=97=B6?=
=?UTF-8?q?=EF=BC=8C=E6=92=AD=E6=94=BE=E9=98=9F=E5=88=97=E6=AD=8C=E6=9B=B2?=
=?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84bug=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E8=89=BA=E4=BA=BA=E9=A1=B5=E9=9D=A2=E6=97=A0=E8=BF=94=E5=9B=9E?=
=?UTF-8?q?=E6=8C=89=E9=92=AE=E7=9A=84bug=20=E4=BF=AE=E5=A4=8D=E8=8E=B7?=
=?UTF-8?q?=E5=8F=96=E6=97=B6=E9=97=B4=E6=97=B6=E4=B8=80=E9=97=AA=E8=80=8C?=
=?UTF-8?q?=E8=BF=87=E7=9A=84NaN:NaN=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ArtistView.vue | 81 ++++++++++++++++++++++++++++---
src/components/MusicAlbumView.vue | 22 +++++++--
src/views/HomePage.vue | 12 ++++-
3 files changed, 102 insertions(+), 13 deletions(-)
diff --git a/src/components/ArtistView.vue b/src/components/ArtistView.vue
index ffe8200..2d1c5c6 100644
--- a/src/components/ArtistView.vue
+++ b/src/components/ArtistView.vue
@@ -11,7 +11,7 @@ import {getSongsByPlaylist} from "../api/song";
import { formatTime } from '../utils/formatTime';
import { loadSongDurations } from '../utils/loadSongDurations';
-const emit = defineEmits(['playSong', 'pauseSong']);
+const emit = defineEmits(['playSong', 'pauseSong', 'back', 'updateSongs']);
const props = defineProps({
artistName: {
type: String,
@@ -19,6 +19,10 @@ const props = defineProps({
},
isPaused: {
type: Boolean,
+ },
+ currentSongId: {
+ type: Number,
+ required: true
}
});
@@ -38,6 +42,9 @@ let musicPauseIndex = ref(null);
// 娣诲姞鍏虫敞鐘舵€�
const isFollowing = ref(false);
+// 鐢ㄦ埛绗竴娆℃挱鏀捐鑹轰汉姝屾洸鐨勬爣蹇�
+const isFirstPlay = ref(true);
+
// 鍏虫敞/鍙栨秷鍏虫敞閫昏緫
const toggleFollow = () => {
isFollowing.value = !isFollowing.value;
@@ -242,21 +249,29 @@ window.onscroll = () => {
const playFromId = (musicId) => {
if (musicId === null || musicId === undefined) {
if (hotSongs.value && hotSongs.value.length > 0) {
- musicPlayIndex.value = hotSongs.value[0].id;
+ musicPlayIndex = hotSongs.value[0].id;
+ if(isFirstPlay){
+ isFirstPlay.value = false;
+ emit('updateSongs', hotSongs.value);
+ }
emit('playSong', hotSongs.value[0]);
}
} else {
- musicPlayIndex.value = musicId;
+ musicPlayIndex = musicId;
const songToPlay = hotSongs.value.find(song => song.id === musicId);
if (songToPlay) {
+ if(isFirstPlay){
+ isFirstPlay.value = false;
+ emit('updateSongs', hotSongs.value);
+ }
emit('playSong', songToPlay);
}
}
- musicPauseIndex.value = null;
+ musicPauseIndex = null;
};
const pauseMusic = (musicId) => {
- musicPauseIndex.value = musicId;
+ musicPauseIndex = musicId;
// 鍙戦€佹殏鍋滀簨浠剁粰鐖剁粍浠�
emit('pauseSong');
};
@@ -282,9 +297,9 @@ const addToFavorite = (musicId) => {
watch(() => props.isPaused, (newValue) => {
if (newValue) {
- musicPauseIndex.value = musicPlayIndex.value;
+ musicPauseIndex = musicPlayIndex;
} else {
- musicPauseIndex.value = null;
+ musicPauseIndex = null;
}
});
@@ -294,10 +309,25 @@ watch(() => hotSongs.value, (newSongs) => {
loadSongDurations(newSongs, songDurations);
}, { immediate: true });
+// 鐩戝惉currentSongId鐨勫彉鍖�
+watch(() => props.currentSongId, (newId) => {
+ if (newId) {
+ musicPlayIndex = newId;
+ musicClickedIndex = newId;
+ musicPauseIndex = props.isPaused ? newId : null;
+ }
+});
+
</script>
<template>
<div class="album-content" :style="{backgroundImage: gradientColor}" @mousewheel="handelScroll">
+ <div class="back-button" data-tooltip="杩斿洖" @click="$emit('back')">
+ <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
+ <path d="M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z"></path>
+ </svg>
+ </div>
+
<div class="header">
<img :src="artist?.avatarUrl" alt="" class="artist-image" @load="updateBackground"/>
<div class="header-content">
@@ -1175,4 +1205,41 @@ li:hover {
white-space: nowrap;
z-index: 1000;
}
+
+/* 淇敼杩斿洖鎸夐挳鏍峰紡 */
+.back-button {
+ position: relative;
+ margin: 24px 0 0 24px;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ border-radius: 50%;
+ color: #fff;
+ transition: all 0.2s ease;
+}
+
+.back-button:hover {
+ transform: scale(1.1);
+ background-color: rgba(0, 0, 0, .8);
+}
+
+/* 鎻愮ず鏂囧瓧鏍峰紡 */
+.back-button[data-tooltip]:hover::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ top: 38px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #282828;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ z-index: 1000;
+ pointer-events: none;
+}
</style>
\ No newline at end of file
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index 29d14cf..35c8fc0 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -32,8 +32,13 @@ const props = defineProps({
required: true,
},
playFromLeftBar: null,
- currentSongId: Number,
- isPaused: Boolean,
+ currentSongId: {
+ type: Number,
+ required: true
+ },
+ isPaused: {
+ type: Boolean,
+ }
});
const edit_title = ref("");
@@ -209,11 +214,11 @@ const removeAlbum = (albumId) => {
const playFromId = (musicId) => {
if (musicId === null) {
// 浠庡ご寮€濮嬫挱鏀�
- musicPlayIndex.value = props.musicList[0].id;
+ musicPlayIndex = props.musicList[0].id;
} else {
- musicPlayIndex.value = musicId;
+ musicPlayIndex = musicId;
}
- emit('switchSongs', props.albumInfo, musicPlayIndex.value);
+ emit('switchSongs', props.albumInfo, musicPlayIndex);
musicPauseIndex = null;
}
@@ -291,6 +296,13 @@ const addRecommendMusic = (musicId) => {
})
}
+watch(() => props.currentSongId, (newId) => {
+ if (newId) {
+ musicPlayIndex = newId;
+ musicClickedIndex = newId;
+ musicPauseIndex = props.isPaused ? newId : null;
+ }
+});
</script>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index d833108..4cb5742 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -190,6 +190,7 @@ const registerDOMs = () => {
});
song.load();
song.play();
+ isPaused.value = false;
theme.change(songs.value[currentSongIndex.value].picPath);
}
} catch (e) {
@@ -639,6 +640,11 @@ const pauseCurrentSong = () => {
}
};
+const updateSongs = (newSongs) => {
+ songs.value = newSongs;
+ displayingSongs.value = newSongs;
+};
+
</script>
<template>
@@ -659,6 +665,7 @@ const pauseCurrentSong = () => {
<div v-if="midComponents == 1" class="playlist-container"
style="overflow: scroll; border-radius: 12px">
<MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs" :play-list="playlists"
+ :current-song-id="currentSongId"
@switchSongs="switchToPlaylist" @switchToArtist="(name) => setMidComponents(5, name)"
@pauseSong="pauseCurrentSong"
:playFromLeftBar="playFromLeftBarAlbum"
@@ -691,8 +698,11 @@ const pauseCurrentSong = () => {
style="overflow: scroll; border-radius: 12px">
<ArtistView :artist-name="currentArtist"
:is-paused="isPaused"
+ :current-song-id="currentSongId"
@playSong="playArtistSong"
- @pauseSong="pauseCurrentSong"/>
+ @pauseSong="pauseCurrentSong"
+ @back="setMidComponents(1)"
+ @updateSongs="updateSongs"/>
</div>
</div>
<div v-if="showRightContent" class="right-content">
--
GitLab