From 415cf3b3c9fe41cbb765c943628c682fa3ce5ad0 Mon Sep 17 00:00:00 2001 From: imsyy Date: Thu, 20 Apr 2023 16:48:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=92=AD=E6=94=BE=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E9=87=8D=E6=9E=84=20&=20fix:=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/App.vue | 15 +- src/components/Comment/index.vue | 14 +- src/components/DataList/PlayList.vue | 178 ---------------- src/components/DataModel/PlayListDrawer.vue | 223 ++++++++++++++++++++ src/components/Nav/index.vue | 12 +- src/components/Player/BigPlayer.vue | 8 +- src/components/Player/CountDown.vue | 24 ++- src/components/Player/index.vue | 56 +++-- src/components/SearchInp/index.vue | 40 +++- src/style/global.scss | 37 ++-- src/views/Setting/index.vue | 1 + src/views/User/index.vue | 2 +- 13 files changed, 372 insertions(+), 240 deletions(-) delete mode 100644 src/components/DataList/PlayList.vue create mode 100644 src/components/DataModel/PlayListDrawer.vue diff --git a/package.json b/package.json index e2f02566f..a6248e010 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "splayer", - "version": "1.1.2", + "version": "1.1.3", "author": "imsyy", "home": "https://imsyy.top", "github": "https://github.com/imsyy/SPlayer", diff --git a/src/App.vue b/src/App.vue index 6b8e369b2..4fecc802a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,12 @@ :native-scrollbar="false" embedded > -
+
{ .main { max-width: 1400px; margin: 0 auto; + div:nth-of-type(2) { + transition: all 0.3s; + } + &.playlist { + div:nth-of-type(2) { + transform: scale(0.98); + } + } } } diff --git a/src/components/Comment/index.vue b/src/components/Comment/index.vue index f83741975..e54fb7339 100644 --- a/src/components/Comment/index.vue +++ b/src/components/Comment/index.vue @@ -14,7 +14,12 @@ redVipAnnualCount @@ -25,7 +30,12 @@ > associator diff --git a/src/components/DataList/PlayList.vue b/src/components/DataList/PlayList.vue deleted file mode 100644 index 8db399f08..000000000 --- a/src/components/DataList/PlayList.vue +++ /dev/null @@ -1,178 +0,0 @@ - - - - - diff --git a/src/components/DataModel/PlayListDrawer.vue b/src/components/DataModel/PlayListDrawer.vue new file mode 100644 index 000000000..23f30f739 --- /dev/null +++ b/src/components/DataModel/PlayListDrawer.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/src/components/Nav/index.vue b/src/components/Nav/index.vue index 5377f442b..183c1a6c2 100644 --- a/src/components/Nav/index.vue +++ b/src/components/Nav/index.vue @@ -18,11 +18,7 @@ > 发现 - + 我的 @@ -44,7 +40,8 @@ size="small" :src=" user.getUserData.avatarUrl - ? user.getUserData.avatarUrl + ? user.getUserData.avatarUrl.replace(/^http:/, 'https:') + + '?param=60y60' : '/images/ico/user-filling.svg' " :img-props="{ class: 'avatarImg' }" @@ -109,7 +106,8 @@ const userDataRender = () => { round: true, style: "margin-right: 12px", src: user.userLogin - ? user.getUserData.avatarUrl + ? user.getUserData.avatarUrl.replace(/^http:/, "https:") + + "?param=60y60" : "/images/ico/user-filling.svg", fallbackSrc: "/images/ico/user-filling.svg", }), diff --git a/src/components/Player/BigPlayer.vue b/src/components/Player/BigPlayer.vue index 6ae4a24d1..e3eeb081b 100644 --- a/src/components/Player/BigPlayer.vue +++ b/src/components/Player/BigPlayer.vue @@ -181,6 +181,7 @@ const lrcAllLeave = () => { }; // 全屏切换 +const timeOut = ref(null); const screenfullIcon = shallowRef(FullscreenRound); const screenfullChange = () => { if (screenfull.isEnabled) { @@ -189,7 +190,7 @@ const screenfullChange = () => { ? FullscreenRound : FullscreenExitRound; // 延迟一段时间执行列表滚动 - setTimeout(() => { + timeOut.value = setTimeout(() => { lrcMouseStatus.value = false; lyricsScroll(music.getPlaySongLyricIndex); }, 500); @@ -248,6 +249,10 @@ onMounted(() => { }); }); +onBeforeUnmount(() => { + clearTimeout(timeOut.value); +}); + // 监听页面是否打开 watch( () => music.showBigPlayer, @@ -256,6 +261,7 @@ watch( console.log("开启播放器", music.getPlaySongLyricIndex); nextTick(() => { lyricsScroll(music.getPlaySongLyricIndex); + music.showPlayList = false; }); } } diff --git a/src/components/Player/CountDown.vue b/src/components/Player/CountDown.vue index 5a421738e..21812627d 100644 --- a/src/components/Player/CountDown.vue +++ b/src/components/Player/CountDown.vue @@ -3,7 +3,11 @@
● ● @@ -30,9 +34,11 @@ const totalDuration = ref( watch( () => music.getPlaySongTime.currentTime, (val) => { - const remainingTime = totalDuration.value - val - 0.5; - const progress = 1 - remainingTime / totalDuration.value; - remainingPoint.value = Number(Math.floor(3 * progress)); + if (music.getPlaySongLyric.lrc[0]) { + const remainingTime = totalDuration.value - val - 0.5; + const progress = 1 - remainingTime / totalDuration.value; + remainingPoint.value = Number(Math.floor(3 * progress)); + } } ); @@ -40,10 +46,12 @@ watch( watch( () => music.getPlaySongLyric?.lrc, (val) => { - totalDuration.value = music.getPlaySongLyric.hasYrc - ? music.getPlaySongLyric?.yrc[0].time - : val[0].time; - remainingPoint.value = 0; + if (music.getPlaySongLyric.lrc[0]) { + totalDuration.value = music.getPlaySongLyric.hasYrc + ? music.getPlaySongLyric?.yrc[0].time + : val[0].time; + remainingPoint.value = 0; + } } ); diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue index b7f7c5b31..fb0f23d18 100644 --- a/src/components/Player/index.vue +++ b/src/components/Player/index.vue @@ -168,10 +168,8 @@ @click="music.setPlaySongMode()" />
-
- +
+ + + + @@ -249,8 +251,8 @@ import { storeToRefs } from "pinia"; import { musicStore, settingStore } from "@/store"; import { useRouter } from "vue-router"; import AddPlaylist from "@/components/DataModel/AddPlaylist.vue"; +import PlayListDrawer from "@/components/DataModel/PlayListDrawer.vue"; import AllArtists from "@/components/DataList/AllArtists.vue"; -import PlayList from "@/components/DataList/PlayList.vue"; import BigPlayer from "./BigPlayer.vue"; import debounce from "@/utils/debounce"; @@ -259,6 +261,7 @@ const setting = settingStore(); const music = musicStore(); const { persistData } = storeToRefs(music); const addPlayListRef = ref(null); +const PlayListDrawerRef = ref(null); // 重试次数 const testNumber = ref(0); @@ -562,7 +565,7 @@ watch( bottom: -90px; left: 0; transition: all 0.3s; - z-index: 2; + z-index: 2004; &.show { bottom: 0; } @@ -606,23 +609,6 @@ watch( align-items: center; max-width: 1400px; margin: 0 auto; - @media (max-width: 620px) { - display: flex; - flex-direction: row; - justify-content: space-between; - .data { - .time { - display: none; - } - } - .control { - margin-left: auto; - .prev, - .next { - display: none; - } - } - } .data { display: flex; flex-direction: row; @@ -794,6 +780,12 @@ watch( display: flex; align-items: center; justify-content: center; + &.open { + .n-icon { + background-color: $mainColor; + color: var(--n-color-embedded); + } + } } .volume { display: flex; @@ -810,6 +802,26 @@ watch( } } } + @media (max-width: 620px) { + display: flex; + flex-direction: row; + justify-content: space-between; + .data { + .time { + display: none; + } + } + .control { + margin-left: auto; + .prev, + .next { + display: none; + } + .play-state { + margin: 0; + } + } + } } } diff --git a/src/components/SearchInp/index.vue b/src/components/SearchInp/index.vue index e012dcb65..8d212ea44 100644 --- a/src/components/SearchInp/index.vue +++ b/src/components/SearchInp/index.vue @@ -328,6 +328,14 @@ watch( } } ); + +// 监听播放列表显隐 +watch( + () => music.showPlayList, + (val) => { + if (val) inputActive.value = false; + } +);