From 3fad3f277d65c3471f9e4af85297cac0157d33a2 Mon Sep 17 00:00:00 2001 From: Megghy Date: Thu, 26 Jun 2025 00:23:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=9F=B3=E4=B9=90?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E5=92=8C=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在ManageLayout.vue中新增音乐播放器控制功能，包括播放、暂停、上一首、下一首等按钮 - 改进音乐播放器高度计算逻辑，确保播放器在可见时正确显示 - 添加音量控制滑块，允许用户调整音量 - 增强队列管理功能，支持清空等待队列 - 更新样式以提升播放器的视觉效果和响应式设计 --- src/views/ManageLayout.vue | 535 ++++++++++++++++++++++++++++++++++--- 1 file changed, 500 insertions(+), 35 deletions(-) diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue index 4154d53..19a20a9 100644 --- a/src/views/ManageLayout.vue +++ b/src/views/ManageLayout.vue @@ -23,7 +23,7 @@ import { VideoAdd20Filled, Mail24Filled, } from '@vicons/fluent' -import { AnalyticsSharp, BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, Eye } from '@vicons/ionicons5' +import { AnalyticsSharp, BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, Eye, PlayForward, PlayBack, Play, Pause, VolumeHigh, ChevronUp, ChevronDown, TrashBin } from '@vicons/ionicons5' import { useElementSize, useStorage } from '@vueuse/core' import { NAlert, @@ -52,6 +52,7 @@ import { NTooltip, useMessage, NCard, + NSlider, } from 'naive-ui' import { computed, h, onMounted, ref, watch } from 'vue' import { RouterLink, useRoute } from 'vue-router' @@ -68,20 +69,57 @@ const themeType = useStorage('Settings.Theme', ThemeType.Auto) // 侧边栏和布局相关 const sider = ref() const { width } = useElementSize(sider) +const musicPlayerCardRef = ref(null) +const { height: musicPlayerCardHeight } = useElementSize(musicPlayerCardRef) // 页面类型计算 const type = computed(() => route.meta.danmaku ? 'danmaku' : '') // 音乐请求服务相关 const musicRquestStore = useMusicRequestProvider() -const aplayerHeight = computed(() => - musicRquestStore.originMusics.length === 0 ? '0' : '80' + +// 优化音乐播放器高度计算逻辑 +const aplayerHeight = computed(() => { + if (!isPlayerVisible.value) { + return '0' + } + // Add 16px for NCard's top/bottom margin. + return `${musicPlayerCardHeight.value + 16}` +}) + +// 播放器是否可见 +const isPlayerVisible = computed( + () => musicRquestStore.originMusics.length > 0 || musicRquestStore.waitingMusics.length > 0 ) + +// 音乐播放器相关状态 +const isPlayerMinimized = useStorage('Settings.MusicPlayer.Minimized', false) +const playerVolume = computed({ + get: () => musicRquestStore.settings.volume, + set: (value) => musicRquestStore.settings.volume = value +}) + const aplayer = ref() watch(aplayer, () => { musicRquestStore.aplayerRef = aplayer.value }) +// 当前播放信息 +const currentPlayingInfo = computed(() => { + if (musicRquestStore.currentOriginMusic && musicRquestStore.isPlayingOrderMusic) { + return { + type: 'request', + info: `正在播放 ${musicRquestStore.currentOriginMusic.from.name} 点的歌` + } + } else if (musicRquestStore.currentMusic && musicRquestStore.currentMusic.title) { + return { + type: 'normal', + info: '正在播放背景音乐' + } + } + return null +}) + // 邮箱验证相关 const canResendEmail = ref(false) const isBiliVerified = computed(() => accountInfo.value?.isBiliVerified) @@ -373,6 +411,45 @@ function onNextMusic() { musicRquestStore.nextMusic() } +// 音乐播放器控制功能 +function togglePlay() { + if (aplayer.value) { + const audio = aplayer.value.audio + if (audio.paused) { + aplayer.value.play() + } else { + aplayer.value.pause() + } + } +} + +function onPreviousMusic() { + if (aplayer.value) { + // 如果当前播放时间大于3秒，则重新开始播放当前歌曲 + if (aplayer.value.audio.currentTime > 3) { + aplayer.value.audio.currentTime = 0 + } else { + // 否则播放上一首 + const currentIndex = musicRquestStore.aplayerMusics.findIndex( + music => music.id === musicRquestStore.currentMusic.id + ) + if (currentIndex > 0) { + musicRquestStore.currentMusic = musicRquestStore.aplayerMusics[currentIndex - 1] + aplayer.value.thenPlay() + } + } + } +} + +function clearWaitingQueue() { + musicRquestStore.waitingMusics.splice(0) + message.success('已清空等待队列') +} + +function togglePlayerMinimize() { + isPlayerMinimized.value = !isPlayerMinimized.value +} + // 跳转到认证页面 function gotoAuthPage() { if (!accountInfo.value?.biliUserAuthInfo) { @@ -676,40 +753,346 @@ onMounted(() => { - -
- - - + + + + + +
+ - 下一首 - - -
+ +
+ +
+ + +
+ + + + 播放控制 + + + + + 上一首 / 重播 + + + + + {{ aplayer?.audio?.paused !== false ? '播放' : '暂停' }} + + + + + 下一首 + + + + + + + + 队列管理 + + + + 等待: {{ musicRquestStore.waitingMusics.length }} + + + + 歌单: {{ musicRquestStore.originMusics.length }} + + + + + 清空所有等待中的点歌 + + + + + + + + + + 音量 + + + + + {{ Math.round(playerVolume * 100) }}% + + +
+ +
+ + + + @@ -863,10 +1246,92 @@ onMounted(() => { margin: 16px; } +/* 音乐播放器样式 */ +.music-player-footer { + background: var(--body-color); +} + +.music-player-card { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.music-player-card:hover { + transform: translateY(-1px); + box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important; +} + +.music-control-panel { + display: flex; + gap: 12px; + align-items: flex-start; + flex-wrap: wrap; + min-width: 300px; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .music-control-panel { + min-width: auto; + flex-direction: row; + justify-content: space-around; + align-items: center; + gap: 8px; + width: 100%; + } + + .music-control-panel > div { + min-width: auto !important; + flex: 1; + } +} + @media (max-width: 480px) { .login-card, .loading-card { width: 95%; margin: 8px; } + + .music-player-card { + margin: 4px !important; + } + + .music-control-panel { + flex-direction: column; + align-items: center; + gap: 6px; + width: 100%; + } + + .music-control-panel > div { + width: 100% !important; + min-width: auto !important; + } +} + +/* 播放器按钮悬停效果 */ +.music-player-card .n-button { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.music-player-card .n-button:hover { + transform: translateY(-1px); +} + +/* 音量滑块样式 */ +.music-player-card .n-slider { + transition: all 0.2s ease; +} + +.music-player-card .n-slider:hover { + transform: scale(1.02); +} + +/* 标签动画 */ +.music-player-card .n-tag { + transition: all 0.2s ease; +} + +.music-player-card .n-tag:hover { + transform: scale(1.05); }