mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat: 添加迷你模式功能，支持迷你窗口的显示与隐藏，更新设置项以控制迷你播放栏和歌词显示，优化路由管理以适应迷你模式
This commit is contained in:
alger
@@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<div
|
||||
class="mini-play-bar"
|
||||
:class="{ 'pure-mode': pureModeEnabled, 'mini-mode': settingsStore.isMiniMode }"
|
||||
>
|
||||
<div class="mini-bar-container">
|
||||
<!-- 专辑封面 -->
|
||||
<div class="album-cover" @click="setMusicFull">
|
||||
<n-image
|
||||
:src="getImgUrl(playMusic?.picUrl, '100y100')"
|
||||
fallback-src="/placeholder.png"
|
||||
class="cover-img"
|
||||
preview-disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 歌曲信息 -->
|
||||
<div class="song-info" @click="setMusicFull">
|
||||
<div class="song-title">{{ playMusic?.name || '未播放' }}</div>
|
||||
<div class="song-artist">
|
||||
<span
|
||||
v-for="(artists, artistsindex) in artistList"
|
||||
:key="artistsindex"
|
||||
class="cursor-pointer hover:text-green-500"
|
||||
@click.stop="handleArtistClick(artists.id)"
|
||||
>
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮区域 -->
|
||||
<div class="control-buttons">
|
||||
<button class="control-button previous" @click="handlePrev">
|
||||
<i class="iconfont icon-prev"></i>
|
||||
</button>
|
||||
<button class="control-button play" @click="playMusicEvent">
|
||||
<i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
|
||||
</button>
|
||||
<button class="control-button next" @click="handleNext">
|
||||
<i class="iconfont icon-next"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="function-buttons">
|
||||
<button class="function-button">
|
||||
<i
|
||||
class="iconfont icon-likefill"
|
||||
:class="{ 'like-active': isFavorite }"
|
||||
@click="toggleFavorite"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
|
||||
<template #trigger>
|
||||
<button class="function-button" @click="mute">
|
||||
<i class="iconfont" :class="getVolumeIcon"></i>
|
||||
</button>
|
||||
</template>
|
||||
<div class="volume-slider-wrapper">
|
||||
<n-slider
|
||||
v-model:value="volumeSlider"
|
||||
:step="0.01"
|
||||
:tooltip="false"
|
||||
vertical
|
||||
></n-slider>
|
||||
</div>
|
||||
</n-popover>
|
||||
|
||||
<!-- 播放列表按钮 -->
|
||||
<button class="function-button" @click="togglePlaylist">
|
||||
<i class="iconfont icon-list"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<button class="close-button" @click="handleClose">
|
||||
<i class="iconfont ri-close-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div
|
||||
class="progress-bar"
|
||||
@click="handleProgressClick"
|
||||
@mousemove="handleProgressHover"
|
||||
@mouseleave="handleProgressLeave"
|
||||
>
|
||||
<div class="progress-track"></div>
|
||||
<div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
|
||||
</div>
|
||||
|
||||
<!-- 播放列表 - 单独放在外层，不再使用 popover -->
|
||||
<div
|
||||
v-show="isPlaylistOpen"
|
||||
class="playlist-container"
|
||||
:class="{ 'mini-mode-list': settingsStore.isMiniMode }"
|
||||
>
|
||||
<n-scrollbar ref="palyListRef" class="playlist-scrollbar">
|
||||
<div class="playlist-items">
|
||||
<div v-for="item in playList" :key="item.id" class="music-play-list-content">
|
||||
<div class="flex items-center justify-between">
|
||||
<song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
|
||||
<div class="delete-btn" @click.stop="handleDeleteSong(item)">
|
||||
<i
|
||||
class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, provide, ref, useTemplateRef } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore, useSettingsStore } from '@/store';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const { t } = useI18n();
|
||||
const { navigateToArtist } = useArtist();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
pureModeEnabled?: boolean;
|
||||
showInfo?: boolean;
|
||||
}>(),
|
||||
{
|
||||
showInfo: false
|
||||
}
|
||||
);
|
||||
|
||||
// 处理关闭按钮点击
|
||||
const handleClose = () => {
|
||||
if (settingsStore.isMiniMode) {
|
||||
window.api.restore();
|
||||
} else {
|
||||
window.api.close();
|
||||
}
|
||||
};
|
||||
|
||||
// 是否播放
|
||||
const play = computed(() => playerStore.play as boolean);
|
||||
// 播放列表
|
||||
const playList = computed(() => playerStore.playList as SongResult[]);
|
||||
|
||||
// 音量控制
|
||||
const audioVolume = ref(
|
||||
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
|
||||
);
|
||||
|
||||
const volumeSlider = computed({
|
||||
get: () => audioVolume.value * 100,
|
||||
set: (value) => {
|
||||
localStorage.setItem('volume', (value / 100).toString());
|
||||
audioService.setVolume(value / 100);
|
||||
audioVolume.value = value / 100;
|
||||
}
|
||||
});
|
||||
|
||||
// 音量图标
|
||||
const getVolumeIcon = computed(() => {
|
||||
if (audioVolume.value === 0) return 'ri-volume-mute-line';
|
||||
if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
|
||||
return 'ri-volume-up-line';
|
||||
});
|
||||
|
||||
// 静音
|
||||
const mute = () => {
|
||||
if (volumeSlider.value === 0) {
|
||||
volumeSlider.value = 30;
|
||||
} else {
|
||||
volumeSlider.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 收藏相关
|
||||
const isFavorite = computed(() => {
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
return playerStore.favoriteList.includes(numericId);
|
||||
});
|
||||
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
e.stopPropagation();
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放列表相关
|
||||
const palyListRef = useTemplateRef('palyListRef') as any;
|
||||
const isPlaylistOpen = ref(false);
|
||||
|
||||
// 提供 openPlaylistDrawer 给子组件
|
||||
provide('openPlaylistDrawer', (songId: number) => {
|
||||
console.log('打开歌单抽屉', songId);
|
||||
// 由于在迷你模式不处理这个功能，所以只记录日志
|
||||
});
|
||||
|
||||
// 切换播放列表显示/隐藏
|
||||
const togglePlaylist = () => {
|
||||
isPlaylistOpen.value = !isPlaylistOpen.value;
|
||||
console.log('切换播放列表状态', isPlaylistOpen.value);
|
||||
|
||||
// 调整窗口大小
|
||||
if (settingsStore.isMiniMode) {
|
||||
try {
|
||||
if (isPlaylistOpen.value) {
|
||||
// 打开播放列表时调整DOM
|
||||
document.body.style.height = 'auto';
|
||||
document.body.style.overflow = 'visible';
|
||||
|
||||
// 使用新的专用 API 调整窗口大小
|
||||
if (window.api && typeof window.api.resizeMiniWindow === 'function') {
|
||||
window.api.resizeMiniWindow(true);
|
||||
}
|
||||
} else {
|
||||
// 关闭播放列表时强制调整DOM
|
||||
document.body.style.height = '64px';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// 使用新的专用 API 调整窗口大小
|
||||
if (window.api && typeof window.api.resizeMiniWindow === 'function') {
|
||||
window.api.resizeMiniWindow(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('调整窗口大小失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果打开列表，滚动到当前播放歌曲
|
||||
if (isPlaylistOpen.value) {
|
||||
scrollToPlayList();
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToPlayList = () => {
|
||||
setTimeout(() => {
|
||||
const currentIndex = playerStore.playListIndex;
|
||||
const itemHeight = 52; // 每个列表项的高度
|
||||
palyListRef.value?.scrollTo({
|
||||
top: currentIndex * itemHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
|
||||
const handleDeleteSong = (song: SongResult) => {
|
||||
if (song.id === playMusic.value.id) {
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
playerStore.removeFromPlayList(song.id as number);
|
||||
};
|
||||
|
||||
// 艺术家点击
|
||||
const handleArtistClick = (id: number) => {
|
||||
navigateToArtist(id);
|
||||
};
|
||||
|
||||
// 进度条相关
|
||||
const handleProgressClick = (e: MouseEvent) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width;
|
||||
audioService.seek(allTime.value * percent);
|
||||
nowTime.value = allTime.value * percent;
|
||||
};
|
||||
|
||||
const hoverTime = ref(0);
|
||||
const isHovering = ref(false);
|
||||
|
||||
const handleProgressHover = (e: MouseEvent) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width;
|
||||
hoverTime.value = allTime.value * percent;
|
||||
isHovering.value = true;
|
||||
};
|
||||
|
||||
const handleProgressLeave = () => {
|
||||
isHovering.value = false;
|
||||
};
|
||||
|
||||
// 播放控制
|
||||
const handlePrev = () => playerStore.prevPlay();
|
||||
const handleNext = () => playerStore.nextPlay();
|
||||
|
||||
const playMusicEvent = async () => {
|
||||
try {
|
||||
if (!playerStore.playMusic?.id || !playerStore.playMusicUrl) {
|
||||
console.warn('No valid music or URL available');
|
||||
playerStore.setPlay(playerStore.playMusic);
|
||||
return;
|
||||
}
|
||||
|
||||
if (play.value) {
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.pause();
|
||||
playerStore.setPlayMusic(false);
|
||||
}
|
||||
} else {
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.play();
|
||||
} else {
|
||||
await audioService.play(playerStore.playMusicUrl, playerStore.playMusic);
|
||||
}
|
||||
playerStore.setPlayMusic(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('播放出错:', error);
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
};
|
||||
|
||||
// 切换到完整播放器
|
||||
const setMusicFull = () => {
|
||||
playerStore.setMusicFull(true);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mini-play-bar {
|
||||
@apply w-full flex flex-col bg-white dark:bg-dark-200 shadow-md bg-opacity-50 backdrop-blur dark:bg-opacity-50;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
&.mini-mode {
|
||||
@apply shadow-lg;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
.mini-bar-container {
|
||||
@apply px-2;
|
||||
}
|
||||
|
||||
.song-info {
|
||||
width: 120px;
|
||||
|
||||
.song-title {
|
||||
@apply text-xs font-medium;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
@apply text-xs opacity-50;
|
||||
}
|
||||
}
|
||||
|
||||
.function-buttons {
|
||||
-webkit-app-region: no-drag;
|
||||
@apply space-x-1 ml-1;
|
||||
|
||||
.function-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.iconfont {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
@apply mx-1 space-x-0.5;
|
||||
-webkit-app-region: no-drag;
|
||||
.control-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.iconfont {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
-webkit-app-region: no-drag;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
@apply flex-shrink-0 mr-2;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 2px !important;
|
||||
|
||||
&:hover {
|
||||
height: 3px !important;
|
||||
|
||||
.progress-track,
|
||||
.progress-fill {
|
||||
height: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-bar-container {
|
||||
@apply flex items-center px-3 h-full relative;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
@apply flex-shrink-0 mr-3 cursor-pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.cover-img {
|
||||
@apply w-full h-full rounded-md object-cover;
|
||||
}
|
||||
}
|
||||
|
||||
.song-info {
|
||||
@apply flex flex-col justify-center min-w-0 flex-shrink mr-4 cursor-pointer;
|
||||
width: 200px;
|
||||
|
||||
.song-title {
|
||||
@apply text-sm font-medium truncate;
|
||||
color: var(--text-color-1, #000);
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
@apply text-xs truncate mt-0.5 opacity-60;
|
||||
color: var(--text-color-2, #666);
|
||||
}
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
@apply flex items-center space-x-1 mx-4;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-400;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
@apply bg-gray-100 dark:bg-dark-300;
|
||||
}
|
||||
|
||||
&.play {
|
||||
@apply bg-primary text-white;
|
||||
&:hover {
|
||||
@apply bg-green-800;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.function-buttons {
|
||||
@apply flex items-center ml-auto space-x-2;
|
||||
}
|
||||
|
||||
.function-button {
|
||||
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--text-color-2, #666);
|
||||
|
||||
&:hover {
|
||||
@apply bg-gray-100 dark:bg-dark-300;
|
||||
color: var(--text-color-1, #000);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer ml-2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--text-color-2, #666);
|
||||
|
||||
&:hover {
|
||||
@apply bg-gray-100 dark:bg-dark-300;
|
||||
color: var(--text-color-1, #000);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply relative w-full cursor-pointer;
|
||||
height: 2px;
|
||||
|
||||
&:hover {
|
||||
height: 4px;
|
||||
|
||||
.progress-track,
|
||||
.progress-fill {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
@apply absolute inset-x-0 bottom-0 transition-all duration-200;
|
||||
height: 2px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
|
||||
.dark & {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
@apply absolute bottom-0 left-0 transition-all duration-200;
|
||||
height: 2px;
|
||||
background: var(--primary-color, #18a058);
|
||||
}
|
||||
|
||||
.like-active {
|
||||
@apply text-red-500 hover:text-red-600 !important;
|
||||
}
|
||||
|
||||
.volume-slider-wrapper {
|
||||
@apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
|
||||
width: 40px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
// 播放列表样式
|
||||
.playlist-container {
|
||||
@apply fixed left-0 right-0 bg-white dark:bg-dark-100 overflow-hidden;
|
||||
top: 64px;
|
||||
height: 330px;
|
||||
max-height: 330px;
|
||||
|
||||
&.mini-mode-list {
|
||||
width: 340px;
|
||||
@apply bg-opacity-90 dark:bg-opacity-90;
|
||||
}
|
||||
}
|
||||
|
||||
// 播放列表内容样式
|
||||
.music-play-list-content {
|
||||
@apply px-2 py-1;
|
||||
|
||||
.delete-btn {
|
||||
@apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
|
||||
@apply hover:bg-red-50 dark:hover:bg-red-900/20;
|
||||
|
||||
.iconfont {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 过渡动画
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.playlist-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.playlist-items {
|
||||
padding: 4px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<div
|
||||
class="mobile-play-bar"
|
||||
:class="[
|
||||
setAnimationClass('animate__fadeInUp'),
|
||||
musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini'
|
||||
]"
|
||||
:style="{
|
||||
color: musicFullVisible
|
||||
? textColors.theme === 'dark'
|
||||
? '#ffffff'
|
||||
: '#ffffff'
|
||||
: settingsStore.theme === 'dark'
|
||||
? '#ffffff'
|
||||
: '#000000'
|
||||
}"
|
||||
>
|
||||
<!-- 完整模式 - 在musicFullVisible为true时显示 -->
|
||||
<template v-if="musicFullVisible">
|
||||
<!-- 顶部信息区域 -->
|
||||
<div class="music-info-header">
|
||||
<div class="music-info-main">
|
||||
<h1 class="music-title">{{ playMusic.name }}</h1>
|
||||
<div class="artist-info">
|
||||
<span class="artist-name">
|
||||
<span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="music-progress-bar">
|
||||
<span class="current-time">{{ secondToMinute(nowTime) }}</span>
|
||||
<div class="progress-wrapper">
|
||||
<n-slider
|
||||
v-model:value="timeSlider"
|
||||
:step="1"
|
||||
:max="allTime"
|
||||
:min="0"
|
||||
:tooltip="false"
|
||||
class="progress-slider"
|
||||
></n-slider>
|
||||
</div>
|
||||
<span class="total-time">{{ secondToMinute(allTime) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 主控制区 -->
|
||||
<div class="player-controls">
|
||||
<div class="control-btn like" @click="toggleFavorite">
|
||||
<i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
|
||||
</div>
|
||||
<div class="control-btn prev" @click="handlePrev">
|
||||
<i class="iconfont ri-skip-back-fill"></i>
|
||||
</div>
|
||||
<div class="control-btn play-pause" @click="playMusicEvent">
|
||||
<i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
|
||||
</div>
|
||||
<div class="control-btn next" @click="handleNext">
|
||||
<i class="iconfont ri-skip-forward-fill"></i>
|
||||
</div>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="mobile-play-list"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
placement="top"
|
||||
@update-show="scrollToPlayList"
|
||||
>
|
||||
<template #trigger>
|
||||
<div class="control-btn list">
|
||||
<i class="iconfont ri-menu-line"></i>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mobile-play-list-container">
|
||||
<div class="mobile-play-list-back"></div>
|
||||
<n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
|
||||
<template #default="{ item }">
|
||||
<div class="mobile-play-list-item">
|
||||
<song-item :key="item.id" :item="item" mini></song-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Mini模式 - 在musicFullVisible为false时显示 -->
|
||||
<div v-else class="mobile-mini-controls">
|
||||
<!-- 歌曲信息 -->
|
||||
<div class="mini-song-info" @click="setMusicFull">
|
||||
<n-image
|
||||
:src="getImgUrl(playMusic?.picUrl, '100y100')"
|
||||
class="mini-song-cover"
|
||||
lazy
|
||||
preview-disabled
|
||||
/>
|
||||
<div class="mini-song-text">
|
||||
<n-ellipsis class="mini-song-title" line-clamp="1">
|
||||
{{ playMusic.name }}
|
||||
</n-ellipsis>
|
||||
<n-ellipsis class="mini-song-artist" line-clamp="1">
|
||||
<span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放按钮 -->
|
||||
<div class="mini-playback-controls">
|
||||
<div class="mini-control-btn play" @click="playMusicEvent">
|
||||
<i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
|
||||
</div>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="mobile-play-list"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
placement="top"
|
||||
@update-show="scrollToPlayList"
|
||||
>
|
||||
<template #trigger>
|
||||
<i class="iconfont icon-list mini-list-icon"></i>
|
||||
</template>
|
||||
<div class="mobile-play-list-container">
|
||||
<div class="mobile-play-list-back"></div>
|
||||
<n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
|
||||
<template #default="{ item }">
|
||||
<div class="mobile-play-list-item">
|
||||
<song-item :key="item.id" :item="item" mini></song-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全屏播放器 -->
|
||||
<music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
|
||||
|
||||
import MusicFull from './MusicFull.vue';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
// 是否播放
|
||||
const play = computed(() => playerStore.isPlay);
|
||||
// 播放列表
|
||||
const playList = computed(() => playerStore.playList as SongResult[]);
|
||||
// 背景颜色
|
||||
const background = ref('#000');
|
||||
|
||||
// 播放进度条
|
||||
const throttledSeek = useThrottleFn((value: number) => {
|
||||
if (!sound.value) return;
|
||||
sound.value.seek(value);
|
||||
nowTime.value = value;
|
||||
}, 50);
|
||||
|
||||
const timeSlider = computed({
|
||||
get: () => nowTime.value,
|
||||
set: throttledSeek
|
||||
});
|
||||
|
||||
// 播放控制
|
||||
function handleNext() {
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
playerStore.prevPlay();
|
||||
}
|
||||
|
||||
// 全屏播放器
|
||||
const MusicFullRef = ref<any>(null);
|
||||
const musicFullVisible = ref(false);
|
||||
|
||||
// 设置musicFull
|
||||
const setMusicFull = () => {
|
||||
musicFullVisible.value = !musicFullVisible.value;
|
||||
playerStore.setMusicFull(musicFullVisible.value);
|
||||
if (musicFullVisible.value) {
|
||||
settingsStore.showArtistDrawer = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 播放列表引用
|
||||
const playListRef = ref<any>(null);
|
||||
|
||||
const scrollToPlayList = (val: boolean) => {
|
||||
if (!val) return;
|
||||
setTimeout(() => {
|
||||
playListRef.value?.scrollTo({ top: playerStore.playListIndex * 56 });
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// 收藏功能
|
||||
const isFavorite = computed(() => {
|
||||
return playerStore.favoriteList.includes(playMusic.value.id as number);
|
||||
});
|
||||
|
||||
const toggleFavorite = () => {
|
||||
console.log('isFavorite.value', isFavorite.value);
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(playMusic.value.id as number);
|
||||
} else {
|
||||
playerStore.addToFavorite(playMusic.value.id as number);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放暂停按钮事件
|
||||
const playMusicEvent = async () => {
|
||||
try {
|
||||
if (!playMusic.value?.id || !playerStore.playMusicUrl) {
|
||||
console.warn('No valid music or URL available');
|
||||
playerStore.setPlay(playMusic.value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (play.value) {
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.pause();
|
||||
playerStore.setPlayMusic(false);
|
||||
}
|
||||
} else {
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.play();
|
||||
} else {
|
||||
await audioService.play(playerStore.playMusicUrl, playMusic.value);
|
||||
}
|
||||
playerStore.setPlayMusic(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('播放出错:', error);
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => playerStore.playMusic,
|
||||
async () => {
|
||||
background.value = playMusic.value.backgroundColor as string;
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-play-bar {
|
||||
@apply fixed bottom-[56px] left-0 w-full flex flex-col shadow-lg;
|
||||
z-index: 10000;
|
||||
animation-duration: 0.3s !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.play-bar-expanded {
|
||||
@apply bg-transparent;
|
||||
height: auto; /* 自动适应内容高度 */
|
||||
max-height: 230px; /* 限制最大高度 */
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.5) 20%,
|
||||
rgba(0, 0, 0, 0.8) 80%,
|
||||
rgba(0, 0, 0, 0.9) 100%
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; /* 延伸到上方 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(20px);
|
||||
opacity: 0.2;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&.play-bar-mini {
|
||||
@apply h-14 py-0 bg-light dark:bg-dark;
|
||||
}
|
||||
|
||||
// 顶部信息区域
|
||||
.music-info-header {
|
||||
@apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;
|
||||
|
||||
.music-info-main {
|
||||
@apply flex flex-col;
|
||||
|
||||
.music-title {
|
||||
@apply text-xl font-bold text-white mb-1;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
@apply flex items-center;
|
||||
|
||||
.artist-name {
|
||||
@apply text-sm text-white opacity-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-stats {
|
||||
@apply flex items-center gap-4;
|
||||
|
||||
.like-count,
|
||||
.comment-count {
|
||||
@apply flex items-center text-white;
|
||||
|
||||
i {
|
||||
@apply text-base mr-1;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply text-xs font-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条
|
||||
.music-progress-bar {
|
||||
@apply flex items-center justify-between px-4 py-2 relative z-10;
|
||||
|
||||
.current-time,
|
||||
.total-time {
|
||||
@apply text-xs text-white opacity-80;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
@apply flex-1 mx-3 flex flex-col items-center;
|
||||
|
||||
.progress-slider {
|
||||
@apply w-full;
|
||||
|
||||
:deep(.n-slider) {
|
||||
--n-rail-height: 3px;
|
||||
--n-rail-color: rgba(255, 255, 255, 0.15);
|
||||
--n-rail-color-dark: rgba(255, 255, 255, 0.15);
|
||||
--n-fill-color: #1ed760; /* Spotify绿色，可调整为其他绿色 */
|
||||
--n-handle-size: 0px; /* 隐藏滑块 */
|
||||
--n-handle-color: #1ed760;
|
||||
|
||||
&:hover {
|
||||
--n-handle-size: 10px; /* 鼠标悬停时显示滑块 */
|
||||
}
|
||||
|
||||
.n-slider-rail {
|
||||
@apply rounded-full !important; /* 圆角进度条 */
|
||||
}
|
||||
|
||||
.n-slider-fill {
|
||||
@apply rounded-full !important;
|
||||
box-shadow: 0 0 4px rgba(30, 215, 96, 0.5); /* 发光效果 */
|
||||
}
|
||||
|
||||
.n-slider-handle {
|
||||
@apply transition-all duration-200;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
&:hover .n-slider-handle,
|
||||
&:active .n-slider-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quality-label {
|
||||
@apply text-xs text-white opacity-70 mt-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主控制区
|
||||
.player-controls {
|
||||
@apply flex items-center justify-between px-8 py-3 relative z-10 pb-8;
|
||||
|
||||
.control-btn {
|
||||
@apply flex items-center justify-center cursor-pointer transition;
|
||||
|
||||
i {
|
||||
@apply text-white transition-all;
|
||||
}
|
||||
|
||||
&.like i {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
&.prev i,
|
||||
&.next i {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
&.play-pause {
|
||||
@apply w-12 h-12 rounded-full flex items-center justify-center;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
i {
|
||||
@apply text-4xl;
|
||||
}
|
||||
}
|
||||
|
||||
&.list i {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
.like-active {
|
||||
@apply text-red-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini模式样式
|
||||
.mobile-mini-controls {
|
||||
@apply flex items-center justify-between px-4 h-14;
|
||||
|
||||
.mini-song-info {
|
||||
@apply flex items-center flex-1 min-w-0 cursor-pointer;
|
||||
|
||||
.mini-song-cover {
|
||||
@apply w-8 h-8 rounded-md;
|
||||
}
|
||||
|
||||
.mini-song-text {
|
||||
@apply ml-3 min-w-0 flex-1;
|
||||
|
||||
.mini-song-title {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.mini-song-artist {
|
||||
@apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-playback-controls {
|
||||
@apply flex items-center;
|
||||
|
||||
.mini-control-btn {
|
||||
@apply flex items-center justify-center cursor-pointer transition;
|
||||
|
||||
&.play {
|
||||
@apply w-9 h-9 rounded-full flex items-center justify-center mr-2;
|
||||
@apply bg-gray-100 dark:bg-gray-800;
|
||||
|
||||
.iconfont {
|
||||
@apply text-xl text-green-500 transition hover:text-green-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-list-icon {
|
||||
@apply text-xl p-1 transition cursor-pointer;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-play-list-container {
|
||||
height: 60vh;
|
||||
width: 90vw;
|
||||
max-width: 400px;
|
||||
@apply relative rounded-t-2xl overflow-hidden;
|
||||
|
||||
.mobile-play-list-back {
|
||||
backdrop-filter: blur(20px);
|
||||
@apply absolute top-0 left-0 w-full h-full;
|
||||
@apply bg-light dark:bg-black bg-opacity-90;
|
||||
}
|
||||
|
||||
.mobile-play-list-item {
|
||||
@apply px-3 py-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,745 @@
|
||||
<template>
|
||||
<div
|
||||
class="music-play-bar"
|
||||
:class="[
|
||||
setAnimationClass('animate__bounceInUp'),
|
||||
musicFullVisible ? 'play-bar-opcity' : '',
|
||||
musicFullVisible && MusicFullRef?.config?.hidePlayBar
|
||||
? 'animate__animated animate__slideOutDown'
|
||||
: ''
|
||||
]"
|
||||
:style="{
|
||||
color: musicFullVisible
|
||||
? textColors.theme === 'dark'
|
||||
? '#000000'
|
||||
: '#ffffff'
|
||||
: settingsStore.theme === 'dark'
|
||||
? '#ffffff'
|
||||
: '#000000'
|
||||
}"
|
||||
>
|
||||
<div class="music-time custom-slider">
|
||||
<n-slider
|
||||
v-model:value="timeSlider"
|
||||
:step="1"
|
||||
:max="allTime"
|
||||
:min="0"
|
||||
:format-tooltip="formatTooltip"
|
||||
:show-tooltip="showSliderTooltip"
|
||||
@mouseenter="showSliderTooltip = true"
|
||||
@mouseleave="showSliderTooltip = false"
|
||||
@dragstart="handleSliderDragStart"
|
||||
@dragend="handleSliderDragEnd"
|
||||
></n-slider>
|
||||
</div>
|
||||
<div class="play-bar-img-wrapper" @click="setMusicFull">
|
||||
<n-image
|
||||
:src="getImgUrl(playMusic?.picUrl, '100y100')"
|
||||
class="play-bar-img"
|
||||
lazy
|
||||
preview-disabled
|
||||
/>
|
||||
<div class="hover-arrow">
|
||||
<div class="hover-content">
|
||||
<!-- <i class="ri-arrow-up-s-line text-3xl" :class="{ 'ri-arrow-down-s-line': musicFullVisible }"></i> -->
|
||||
<i
|
||||
class="text-3xl"
|
||||
:class="musicFullVisible ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'"
|
||||
></i>
|
||||
<span class="hover-text">{{
|
||||
musicFullVisible ? t('player.playBar.collapse') : t('player.playBar.expand')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-content">
|
||||
<div class="music-content-title">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
{{ playMusic.name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div class="music-content-name">
|
||||
<n-ellipsis
|
||||
class="text-ellipsis"
|
||||
line-clamp="1"
|
||||
:tooltip="{
|
||||
contentStyle: { maxWidth: '600px' },
|
||||
zIndex: 99999
|
||||
}"
|
||||
>
|
||||
<span
|
||||
v-for="(artists, artistsindex) in artistList"
|
||||
:key="artistsindex"
|
||||
class="cursor-pointer hover:text-green-500"
|
||||
@click="handleArtistClick(artists.id)"
|
||||
>
|
||||
{{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-buttons">
|
||||
<div class="music-buttons-prev" @click="handlePrev">
|
||||
<i class="iconfont icon-prev"></i>
|
||||
</div>
|
||||
<div class="music-buttons-play" @click="playMusicEvent">
|
||||
<i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
|
||||
</div>
|
||||
<div class="music-buttons-next" @click="handleNext">
|
||||
<i class="iconfont icon-next"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-button">
|
||||
<div class="audio-volume custom-slider">
|
||||
<div class="volume-icon" @click="mute">
|
||||
<i class="iconfont" :class="getVolumeIcon"></i>
|
||||
</div>
|
||||
<div class="volume-slider">
|
||||
<n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false" vertical></n-slider>
|
||||
</div>
|
||||
</div>
|
||||
<n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i class="iconfont" :class="playModeIcon" @click="togglePlayMode"></i>
|
||||
</template>
|
||||
{{ playModeText }}
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i
|
||||
class="iconfont icon-likefill"
|
||||
:class="{ 'like-active': isFavorite }"
|
||||
@click="toggleFavorite"
|
||||
></i>
|
||||
</template>
|
||||
{{ t('player.playBar.like') }}
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="isElectron" class="music-lyric" trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i
|
||||
class="iconfont ri-netease-cloud-music-line"
|
||||
:class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !playMusic.id }"
|
||||
@click="playMusic.id && openLyricWindow()"
|
||||
></i>
|
||||
</template>
|
||||
{{ playMusic.id ? t('player.playBar.lyric') : t('player.playBar.noSongPlaying') }}
|
||||
</n-tooltip>
|
||||
<n-popover
|
||||
v-if="isElectron"
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="music-eq"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
:delay="200"
|
||||
placement="top"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i class="iconfont ri-equalizer-line" :class="{ 'text-green-500': isEQVisible }"></i>
|
||||
</template>
|
||||
{{ t('player.playBar.eq') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<eq-control />
|
||||
</n-popover>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="music-play"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
:delay="200"
|
||||
arrow-wrapper-style=" border-radius:1.5rem"
|
||||
@update-show="scrollToPlayList"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-tooltip trigger="manual" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i class="iconfont icon-list"></i>
|
||||
</template>
|
||||
{{ t('player.playBar.playList') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<div class="music-play-list">
|
||||
<div class="music-play-list-back"></div>
|
||||
<n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
|
||||
<template #default="{ item }">
|
||||
<div class="music-play-list-content">
|
||||
<div class="flex items-center justify-between">
|
||||
<song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
|
||||
<div class="delete-btn" @click.stop="handleDeleteSong(item)">
|
||||
<i
|
||||
class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
<!-- 播放音乐 -->
|
||||
<music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { computed, ref, useTemplateRef, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import EqControl from '@/components/EQControl.vue';
|
||||
import {
|
||||
allTime,
|
||||
artistList,
|
||||
isLyricWindowOpen,
|
||||
nowTime,
|
||||
openLyric,
|
||||
playMusic,
|
||||
textColors
|
||||
} from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import MusicFull from '@/layout/components/MusicFull.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
// 是否播放
|
||||
const play = computed(() => playerStore.isPlay);
|
||||
// 播放列表
|
||||
const playList = computed(() => playerStore.playList as SongResult[]);
|
||||
// 背景颜色
|
||||
const background = ref('#000');
|
||||
|
||||
watch(
|
||||
() => playerStore.playMusic,
|
||||
async () => {
|
||||
background.value = playMusic.value.backgroundColor as string;
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
// 节流版本的 seek 函数
|
||||
const throttledSeek = useThrottleFn((value: number) => {
|
||||
audioService.seek(value);
|
||||
nowTime.value = value;
|
||||
}, 50); // 50ms 的节流延迟
|
||||
|
||||
// 拖动时的临时值，避免频繁更新 nowTime 触发重渲染
|
||||
const dragValue = ref(0);
|
||||
|
||||
// 为滑块拖动添加状态跟踪
|
||||
const isDragging = ref(false);
|
||||
|
||||
// 修改 timeSlider 计算属性
|
||||
const timeSlider = computed({
|
||||
get: () => (isDragging.value ? dragValue.value : nowTime.value),
|
||||
set: (value) => {
|
||||
if (isDragging.value) {
|
||||
// 拖动中只更新临时值，不触发 nowTime 更新和 seek 操作
|
||||
dragValue.value = value;
|
||||
return;
|
||||
}
|
||||
|
||||
// 点击操作 (非拖动)，可以直接 seek
|
||||
throttledSeek(value);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加滑块拖动开始和结束事件处理
|
||||
const handleSliderDragStart = () => {
|
||||
isDragging.value = true;
|
||||
// 初始化拖动值为当前时间
|
||||
dragValue.value = nowTime.value;
|
||||
};
|
||||
|
||||
const handleSliderDragEnd = () => {
|
||||
isDragging.value = false;
|
||||
|
||||
// 直接应用最终的拖动值
|
||||
audioService.seek(dragValue.value);
|
||||
nowTime.value = dragValue.value;
|
||||
};
|
||||
|
||||
// 格式化提示文本，根据拖动状态显示不同的时间
|
||||
const formatTooltip = (value: number) => {
|
||||
return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
|
||||
};
|
||||
|
||||
// 音量条
|
||||
const audioVolume = ref(
|
||||
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
|
||||
);
|
||||
const getVolumeIcon = computed(() => {
|
||||
// 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
|
||||
if (audioVolume.value === 0) {
|
||||
return 'ri-volume-mute-line';
|
||||
}
|
||||
if (audioVolume.value <= 0.5) {
|
||||
return 'ri-volume-down-line';
|
||||
}
|
||||
return 'ri-volume-up-line';
|
||||
});
|
||||
|
||||
const volumeSlider = computed({
|
||||
get: () => audioVolume.value * 100,
|
||||
set: (value) => {
|
||||
localStorage.setItem('volume', (value / 100).toString());
|
||||
audioService.setVolume(value / 100);
|
||||
audioVolume.value = value / 100;
|
||||
}
|
||||
});
|
||||
|
||||
// 静音
|
||||
const mute = () => {
|
||||
if (volumeSlider.value === 0) {
|
||||
volumeSlider.value = 30;
|
||||
} else {
|
||||
volumeSlider.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 播放模式
|
||||
const playMode = computed(() => playerStore.playMode);
|
||||
const playModeIcon = computed(() => {
|
||||
switch (playMode.value) {
|
||||
case 0:
|
||||
return 'ri-repeat-2-line';
|
||||
case 1:
|
||||
return 'ri-repeat-one-line';
|
||||
case 2:
|
||||
return 'ri-shuffle-line';
|
||||
default:
|
||||
return 'ri-repeat-2-line';
|
||||
}
|
||||
});
|
||||
const playModeText = computed(() => {
|
||||
switch (playMode.value) {
|
||||
case 0:
|
||||
return t('player.playBar.playMode.sequence');
|
||||
case 1:
|
||||
return t('player.playBar.playMode.loop');
|
||||
case 2:
|
||||
return t('player.playBar.playMode.random');
|
||||
default:
|
||||
return t('player.playBar.playMode.sequence');
|
||||
}
|
||||
});
|
||||
|
||||
// 切换播放模式
|
||||
const togglePlayMode = () => {
|
||||
playerStore.togglePlayMode();
|
||||
};
|
||||
|
||||
function handleNext() {
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
playerStore.prevPlay();
|
||||
}
|
||||
|
||||
const MusicFullRef = ref<any>(null);
|
||||
const showSliderTooltip = ref(false);
|
||||
|
||||
// 播放暂停按钮事件
|
||||
const playMusicEvent = async () => {
|
||||
try {
|
||||
// 检查是否有有效的音乐对象
|
||||
if (!playMusic.value?.id) {
|
||||
console.warn('没有有效的播放对象');
|
||||
return;
|
||||
}
|
||||
|
||||
// 当前处于播放状态 -> 暂停
|
||||
if (play.value) {
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.pause();
|
||||
playerStore.setPlayMusic(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 当前处于暂停状态 -> 播放
|
||||
// 有音频实例，直接播放
|
||||
if (audioService.getCurrentSound()) {
|
||||
audioService.play();
|
||||
playerStore.setPlayMusic(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 没有音频实例，重新获取并播放（包括重新获取B站视频URL）
|
||||
try {
|
||||
// 复用当前播放对象，但强制重新获取URL
|
||||
const result = await playerStore.setPlay({ ...playMusic.value, playMusicUrl: undefined });
|
||||
if (result) {
|
||||
playerStore.setPlayMusic(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('重新获取播放链接失败:', error);
|
||||
message.error(t('player.playFailed'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('播放出错:', error);
|
||||
message.error(t('player.playFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const musicFullVisible = ref(false);
|
||||
|
||||
// 设置musicFull
|
||||
const setMusicFull = () => {
|
||||
musicFullVisible.value = !musicFullVisible.value;
|
||||
playerStore.setMusicFull(musicFullVisible.value);
|
||||
if (musicFullVisible.value) {
|
||||
settingsStore.showArtistDrawer = false;
|
||||
}
|
||||
};
|
||||
|
||||
const palyListRef = useTemplateRef('palyListRef') as any;
|
||||
|
||||
const scrollToPlayList = (val: boolean) => {
|
||||
if (!val) return;
|
||||
setTimeout(() => {
|
||||
palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
|
||||
}, 50);
|
||||
};
|
||||
|
||||
const isFavorite = computed(() => {
|
||||
// 将id转换为number，兼容B站视频ID
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
return playerStore.favoriteList.includes(numericId);
|
||||
});
|
||||
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
e.stopPropagation();
|
||||
// 将id转换为number，兼容B站视频ID
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
}
|
||||
};
|
||||
|
||||
const openLyricWindow = () => {
|
||||
openLyric();
|
||||
};
|
||||
|
||||
const { navigateToArtist } = useArtist();
|
||||
|
||||
const handleArtistClick = (id: number) => {
|
||||
musicFullVisible.value = false;
|
||||
navigateToArtist(id);
|
||||
};
|
||||
|
||||
// 监听播放栏显示状态
|
||||
watch(
|
||||
() => MusicFullRef.value?.config?.hidePlayBar,
|
||||
(newVal) => {
|
||||
if (newVal && musicFullVisible.value) {
|
||||
// 使用 animate.css 动画，不需要手动设置样式
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isEQVisible = ref(false);
|
||||
|
||||
// 在 script setup 部分添加删除歌曲的处理函数
|
||||
const handleDeleteSong = (song: SongResult) => {
|
||||
// 如果删除的是当前播放的歌曲，先切换到下一首
|
||||
if (song.id === playMusic.value.id) {
|
||||
playerStore.nextPlay();
|
||||
}
|
||||
playerStore.removeFromPlayList(song.id as number);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.music-play-bar {
|
||||
@apply h-20 w-full absolute bottom-0 left-0 flex items-center box-border px-6 py-2 pt-3;
|
||||
@apply bg-light dark:bg-dark shadow-2xl shadow-gray-300;
|
||||
z-index: 9999;
|
||||
animation-duration: 0.5s !important;
|
||||
|
||||
&.play-bar-opcity {
|
||||
@apply bg-transparent !important;
|
||||
box-shadow: 0 0 20px 5px #0000001d;
|
||||
}
|
||||
|
||||
&.animate__slideOutDown {
|
||||
animation-duration: 0.3s !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.music-content {
|
||||
width: 160px;
|
||||
@apply ml-4;
|
||||
|
||||
&-title {
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
&-name {
|
||||
@apply text-xs mt-1 opacity-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.play-bar-img {
|
||||
@apply w-14 h-14 rounded-2xl;
|
||||
}
|
||||
|
||||
.music-buttons {
|
||||
@apply mx-6 flex-1 flex justify-center;
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl transition;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply text-3xl;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
|
||||
@apply flex items-center;
|
||||
|
||||
> div {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
&-play {
|
||||
@apply flex justify-center items-center w-20 h-12 rounded-full mx-4 transition text-gray-500;
|
||||
@apply bg-gray-100 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 hover:bg-gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-volume {
|
||||
@apply flex items-center relative;
|
||||
&:hover {
|
||||
.volume-slider {
|
||||
@apply opacity-100 visible;
|
||||
}
|
||||
}
|
||||
.volume-icon {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl transition;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
@apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl;
|
||||
@apply bg-light dark:bg-gray-800;
|
||||
@apply border border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-button {
|
||||
@apply flex items-center mx-4;
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl transition cursor-pointer m-4;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
}
|
||||
|
||||
.music-play {
|
||||
&-list {
|
||||
height: 50vh;
|
||||
width: 300px;
|
||||
@apply relative rounded-3xl overflow-hidden py-2;
|
||||
&-back {
|
||||
backdrop-filter: blur(20px);
|
||||
@apply absolute top-0 left-0 w-full h-full;
|
||||
@apply bg-light dark:bg-black bg-opacity-75;
|
||||
}
|
||||
&-content {
|
||||
@apply mx-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.music-play-bar {
|
||||
@apply px-4 bottom-[56px] transition-all duration-300;
|
||||
}
|
||||
.music-time {
|
||||
display: none;
|
||||
}
|
||||
.ri-netease-cloud-music-line {
|
||||
display: none;
|
||||
}
|
||||
.audio-volume {
|
||||
display: none;
|
||||
}
|
||||
.audio-button {
|
||||
@apply mx-0;
|
||||
}
|
||||
.music-buttons {
|
||||
@apply m-0;
|
||||
&-prev,
|
||||
&-next {
|
||||
display: none;
|
||||
}
|
||||
&-play {
|
||||
@apply m-0;
|
||||
}
|
||||
}
|
||||
.music-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义滑块样式
|
||||
.custom-slider {
|
||||
:deep(.n-slider) {
|
||||
--n-rail-height: 4px;
|
||||
--n-rail-color: theme('colors.gray.200');
|
||||
--n-rail-color-dark: theme('colors.gray.700');
|
||||
--n-fill-color: theme('colors.green.500');
|
||||
--n-handle-size: 12px;
|
||||
--n-handle-color: theme('colors.green.500');
|
||||
|
||||
&.n-slider--vertical {
|
||||
height: 100%;
|
||||
|
||||
.n-slider-rail {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.n-slider-rail {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.n-slider-handle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.n-slider-rail {
|
||||
@apply overflow-hidden transition-all duration-200;
|
||||
@apply bg-gray-500 dark:bg-dark-300 bg-opacity-10 !important;
|
||||
}
|
||||
|
||||
.n-slider-handle {
|
||||
@apply transition-all duration-200;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.n-slider-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 确保悬停时提示样式正确
|
||||
.n-slider-tooltip {
|
||||
@apply bg-gray-800 text-white text-xs py-1 px-2 rounded;
|
||||
z-index: 999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.play-bar-img-wrapper {
|
||||
@apply relative cursor-pointer w-14 h-14;
|
||||
|
||||
.hover-arrow {
|
||||
@apply absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 rounded-2xl;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.hover-content {
|
||||
@apply flex flex-col items-center justify-center;
|
||||
|
||||
i {
|
||||
@apply text-white mb-0.5;
|
||||
}
|
||||
|
||||
.hover-text {
|
||||
@apply text-white text-xs scale-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover-arrow {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
@apply text-sm py-1 px-2;
|
||||
}
|
||||
|
||||
.play-bar-img {
|
||||
@apply w-14 h-14 rounded-2xl;
|
||||
}
|
||||
|
||||
.like-active {
|
||||
@apply text-red-500 hover:text-red-600 !important;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
@apply opacity-50 cursor-not-allowed !important;
|
||||
&:hover {
|
||||
@apply text-inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-loop,
|
||||
.icon-single-loop {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.music-time .n-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.music-eq {
|
||||
@apply p-4 rounded-3xl;
|
||||
backdrop-filter: blur(20px);
|
||||
@apply bg-light dark:bg-black bg-opacity-75;
|
||||
}
|
||||
|
||||
.music-play-list-content {
|
||||
@apply mx-2;
|
||||
|
||||
.delete-btn {
|
||||
@apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
|
||||
@apply hover:bg-red-50 dark:hover:bg-red-900/20;
|
||||
|
||||
.iconfont {
|
||||
@apply text-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user