From b4dc67fda148d0e027187c9d1baae427c6875f4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= Date: Sat, 1 Aug 2026 18:13:02 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E6=92=AD=E6=94=BE=E5=99=A8=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-tailwindcss/src/composables/useAudio.js | 25 +++ vite-tailwindcss/src/views/index/index.vue | 186 ++++++++++++++----- 2 files changed, 169 insertions(+), 42 deletions(-) diff --git a/vite-tailwindcss/src/composables/useAudio.js b/vite-tailwindcss/src/composables/useAudio.js index d0b95a2..a957a87 100644 --- a/vite-tailwindcss/src/composables/useAudio.js +++ b/vite-tailwindcss/src/composables/useAudio.js @@ -84,6 +84,28 @@ export function useAudio() { } } + const currentIndex = computed(() => tracks.value.findIndex((t) => t.url === activeUrl.value)) + + const playAt = (index) => { + const list = tracks.value + if (!list.length) return + const i = ((index % list.length) + list.length) % list.length + const url = list[i]?.url + if (!url) return + if (isPlaying.value) playUrl(url) + else setActive(url) + } + + const prev = () => { + const idx = currentIndex.value + playAt(idx < 0 ? 0 : idx - 1) + } + + const next = () => { + const idx = currentIndex.value + playAt(idx < 0 ? 0 : idx + 1) + } + const play = () => playUrl(activeUrl.value) const attemptAutoplay = async () => { @@ -154,8 +176,11 @@ export function useAudio() { currentTime, duration, volume, + currentIndex, setTracks, setActive, + prev, + next, play, pause, toggle, diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue index a93cbea..630b5ac 100644 --- a/vite-tailwindcss/src/views/index/index.vue +++ b/vite-tailwindcss/src/views/index/index.vue @@ -46,25 +46,8 @@
- +
-
-
- -
-
-
选择曲目
-
-
- - {{ t.name }} - ✓ -
-
-
-
@@ -166,17 +149,52 @@

暂无歌词

- +
- +
+ + + +
- +
+
选择曲目
+
+ +
+
+
+ -
+
{ if (v < 0.45) return 'fa-solid fa-volume-low' return 'fa-solid fa-volume-high' }) -let lastVolumeBeforeMute = 0.5 -const toggleMute = () => { - if ((audio.volume.value || 0) > 0.001) { - lastVolumeBeforeMute = audio.volume.value - audio.setVolume(0) - } else { - audio.setVolume(lastVolumeBeforeMute || 0.5) - } +const toggleVolumeSlider = () => { + showVolumeSlider.value = !showVolumeSlider.value + if (showVolumeSlider.value) showPanelTrackList.value = false +} +const playPrevTrack = () => { + audio.prev() + if (data.value.musicRandomEnabled && audio.activeUrl.value) rememberMusicPick(audio.activeUrl.value) +} +const playNextTrack = () => { + audio.next() + if (data.value.musicRandomEnabled && audio.activeUrl.value) rememberMusicPick(audio.activeUrl.value) } const activeLrcIndex = computed(() => findLrcIndex(lrcLines.value, audio.currentTime.value)) @@ -650,6 +673,8 @@ const loadLrcForActive = async () => { const openPlayerPanel = async () => { showPlayerPanel.value = true + showVolumeSlider.value = false + showPanelTrackList.value = false await loadLrcForActive() } @@ -1024,6 +1049,7 @@ const openInvitation = () => { } const selectTrack = (url) => { audio.setActive(url) + showPanelTrackList.value = false showTrackList.value = false if (data.value.musicRandomEnabled) rememberMusicPick(url) } @@ -1445,7 +1471,7 @@ watch( width: min(82vw, 308px); padding: 14px 14px 12px; border-radius: 26px; - background: rgba(255, 252, 247, 0.82); + background: rgba(255, 252, 247, 0.39); border: none; box-shadow: 0 16px 40px rgba(92, 74, 53, 0.16), @@ -1510,7 +1536,7 @@ watch( flex: 0 0 auto; } .player-lrc-list { - max-height: 132px; + max-height: 250px; overflow-y: auto; padding: 10px 8px; border-radius: 18px; @@ -1520,9 +1546,10 @@ watch( .player-lrc-line { margin: 0; padding: 7px 8px; + font-family: var(--font-calligraphy); font-size: 12px; line-height: 1.55; - color: #9a9084; + color: rgb(154, 144, 132); text-align: center; transition: color 0.2s, transform 0.2s, background 0.2s; border-radius: 999px; @@ -1530,7 +1557,7 @@ watch( .player-lrc-line.active { color: #5c4a35; font-weight: 600; - background: rgba(255, 255, 255, 0.55); + background: rgba(255, 255, 255, 0.36); transform: scale(1.02); } .player-lrc-empty { @@ -1543,12 +1570,33 @@ watch( .player-panel-footer { display: flex; align-items: center; - gap: 12px; + gap: 10px; margin-top: 12px; } +.player-transport { + display: flex; + align-items: center; + gap: 4px; + flex: 0 0 auto; +} +.player-skip-btn { + width: 30px; + height: 30px; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + color: #a88c6b; + font-size: 12px; + background: rgba(168, 140, 107, 0.1); +} +.player-skip-btn:disabled { + opacity: 0.35; + pointer-events: none; +} .player-play-btn { - width: 46px; - height: 46px; + width: 42px; + height: 42px; border-radius: 999px; background: linear-gradient(145deg, #c4a484, #a88c6b); color: #fff; @@ -1557,7 +1605,7 @@ watch( justify-content: center; flex: 0 0 auto; box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35); - font-size: 15px; + font-size: 14px; } .player-play-btn .fa-play { margin-left: 2px; } .player-panel-sliders { @@ -1570,8 +1618,13 @@ watch( .player-vol-row { display: flex; align-items: center; - gap: 6px; + gap: 4px; color: #a88c6b; + min-height: 28px; +} +.player-list-wrap { + position: relative; + flex: 0 0 auto; } .player-vol-icon { width: 28px; @@ -1583,8 +1636,57 @@ watch( color: #a88c6b; font-size: 12px; flex: 0 0 auto; - background: transparent; + background: rgba(168, 140, 107, 0.1); } +.player-track-pop { + position: absolute; + left: 0; + bottom: calc(100% + 8px); + width: min(70vw, 220px); + max-height: 180px; + padding: 10px 8px; + border-radius: 16px; + background: rgba(255, 252, 247, 0.96); + box-shadow: 0 12px 28px rgba(92, 74, 53, 0.16); + z-index: 30; + display: flex; + flex-direction: column; +} +.player-track-pop-title { + font-size: 11px; + color: #9a9084; + letter-spacing: 0.12em; + padding: 0 6px 6px; +} +.player-track-pop-list { + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 2px; +} +.player-track-item { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + text-align: left; + padding: 8px 10px; + border-radius: 12px; + font-size: 12px; + color: #5c4a35; +} +.player-track-item.active { + background: rgba(168, 140, 107, 0.14); + color: #a88c6b; + font-weight: 600; +} +.player-track-item .tname { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.player-track-item .tcheck { font-size: 11px; } .player-vol-track { flex: 1; min-width: 0;