mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 23:57:22 +08:00
alger
@@ -439,6 +439,7 @@ onUnmounted(() => {
|
||||
|
||||
.music-content {
|
||||
@apply flex-col;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
>
|
||||
<n-carousel-item
|
||||
:class="setAnimationClass('animate__backInRight')"
|
||||
:style="getCarouselItemStyle(0, 100, 6 )"
|
||||
:style="getCarouselItemStyle(0, 100, 6)"
|
||||
>
|
||||
<div v-if="dayRecommendData" class="recommend-singer-item relative">
|
||||
<div
|
||||
@@ -49,7 +49,7 @@
|
||||
>
|
||||
<div class="user-play">
|
||||
<div class="user-play-title mb-3">
|
||||
{{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
|
||||
{{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
|
||||
</div>
|
||||
<div class="user-play-list" :class="getPlaylistGridClass(userPlaylist.length)">
|
||||
<div
|
||||
@@ -69,7 +69,9 @@
|
||||
<div class="user-play-item-title-name">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="user-play-item-count">
|
||||
<div class="user-play-item-count-tag">{{ t('common.songCount', { count: item.trackCount }) }}</div>
|
||||
<div class="user-play-item-count-tag">
|
||||
{{ t('common.songCount', { count: item.trackCount }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,7 +98,9 @@
|
||||
{{ t('common.songCount', { count: item.musicSize }) }}
|
||||
</div>
|
||||
<div class="recommend-singer-item-info z-10">
|
||||
<div class="recommend-singer-item-info-name text-el text-right line-clamp-1">{{ item.name }}</div>
|
||||
<div class="recommend-singer-item-info-name text-el text-right line-clamp-1">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 播放按钮(hover时显示) -->
|
||||
<div class="recommend-singer-item-play-overlay" @click.stop="handleOpenSinger(item.id)">
|
||||
@@ -141,7 +145,13 @@ import { IDayRecommend } from '@/type/day_recommend';
|
||||
import { Playlist } from '@/type/list';
|
||||
import type { IListDetail } from '@/type/listDetail';
|
||||
import type { IHotSinger } from '@/type/singer';
|
||||
import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
|
||||
import {
|
||||
getImgUrl,
|
||||
isMobile,
|
||||
setAnimationClass,
|
||||
setAnimationDelay,
|
||||
setBackgroundImg
|
||||
} from '@/utils';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -168,15 +178,18 @@ const playlistDetail = ref<IListDetail | null>(null);
|
||||
* @returns 样式字符串
|
||||
*/
|
||||
const getCarouselItemStyle = (
|
||||
index: number,
|
||||
delayStep: number,
|
||||
totalItems: number = 5,
|
||||
index: number,
|
||||
delayStep: number,
|
||||
totalItems: number = 5,
|
||||
maxWidth?: number
|
||||
) => {
|
||||
if (isMobile.value) {
|
||||
return 'width: 30%;';
|
||||
}
|
||||
const animationDelay = setAnimationDelay(index, delayStep);
|
||||
const width = `calc((100% / ${totalItems}) - 16px)`;
|
||||
const maxWidthStyle = maxWidth ? `max-width: ${maxWidth}px;` : '';
|
||||
|
||||
|
||||
return `${animationDelay}; width: ${width}; ${maxWidthStyle}`;
|
||||
};
|
||||
|
||||
@@ -186,11 +199,14 @@ const getCarouselItemStyle = (
|
||||
* @returns 样式字符串
|
||||
*/
|
||||
const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
|
||||
if (isMobile.value) {
|
||||
return 'width: 100%;';
|
||||
}
|
||||
const animationDelay = setAnimationDelay(1, 100);
|
||||
let width = '';
|
||||
let maxWidth = '';
|
||||
|
||||
switch(playlistCount) {
|
||||
|
||||
switch (playlistCount) {
|
||||
case 1:
|
||||
width = 'calc(100% / 4 - 16px)';
|
||||
maxWidth = 'max-width: 180px;';
|
||||
@@ -207,7 +223,7 @@ const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
|
||||
width = 'calc(100% / 1 - 16px)';
|
||||
maxWidth = 'max-width: 656px;';
|
||||
}
|
||||
|
||||
|
||||
return `${animationDelay}; width: ${width}; ${maxWidth}`;
|
||||
};
|
||||
|
||||
@@ -281,7 +297,7 @@ watchEffect(() => {
|
||||
});
|
||||
|
||||
const getPlaylistGridClass = (length: number) => {
|
||||
switch(length) {
|
||||
switch (length) {
|
||||
case 1:
|
||||
return 'one-column';
|
||||
case 2:
|
||||
@@ -305,42 +321,42 @@ const getPlaylistGridClass = (length: number) => {
|
||||
@apply flex-1 h-full rounded-3xl p-5 flex flex-col justify-between overflow-hidden relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
|
||||
&-bg {
|
||||
@apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
|
||||
filter: brightness(60%);
|
||||
}
|
||||
|
||||
|
||||
&-info {
|
||||
@apply flex flex-col p-2;
|
||||
&-name {
|
||||
@apply text-gray-100 dark:text-gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-count {
|
||||
@apply text-gray-100 dark:text-gray-100;
|
||||
}
|
||||
|
||||
|
||||
&-play {
|
||||
&-overlay {
|
||||
@apply absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/20 z-20 opacity-0 transition-all duration-300 flex items-center justify-center;
|
||||
backdrop-filter: blur(1px);
|
||||
|
||||
|
||||
.recommend-singer-item:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-btn {
|
||||
@apply w-20 h-20 bg-transparent flex justify-center items-center text-white;
|
||||
transform: translateY(50px) scale(0.8);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
|
||||
.recommend-singer-item:hover & {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
@@ -385,7 +401,7 @@ const getPlaylistGridClass = (length: number) => {
|
||||
&-item {
|
||||
@apply rounded-2xl overflow-hidden flex flex-col;
|
||||
height: 176px;
|
||||
|
||||
|
||||
&-img {
|
||||
@apply relative cursor-pointer transition-all duration-300;
|
||||
height: 0;
|
||||
@@ -394,12 +410,12 @@ const getPlaylistGridClass = (length: number) => {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
.user-play-item-overlay {
|
||||
opacity: 1;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
.user-play-item-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@apply absolute inset-0 w-full h-full object-cover;
|
||||
@@ -424,22 +440,24 @@ const getPlaylistGridClass = (length: number) => {
|
||||
@apply flex items-center justify-center;
|
||||
transform: scale(0.8);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
|
||||
.user-play-item:hover & {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile .recommend-singer {
|
||||
&-list {
|
||||
height: 180px;
|
||||
@apply ml-4;
|
||||
}
|
||||
&-item {
|
||||
@apply p-4 rounded-xl;
|
||||
&-bg {
|
||||
@apply rounded-xl;
|
||||
.mobile {
|
||||
.recommend-singer {
|
||||
&-list {
|
||||
height: 180px;
|
||||
@apply ml-4;
|
||||
}
|
||||
&-item {
|
||||
@apply p-2 rounded-xl;
|
||||
&-bg {
|
||||
@apply rounded-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部音乐播放 -->
|
||||
<play-bar v-show="isPlay" :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''" />
|
||||
<play-bar
|
||||
v-if="!isMobile"
|
||||
v-show="isPlay"
|
||||
:style="playerStore.musicFull ? 'bottom: 0;' : ''"
|
||||
/>
|
||||
<mobile-play-bar
|
||||
v-else
|
||||
v-show="isPlay"
|
||||
:style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
|
||||
/>
|
||||
<!-- 下载管理抽屉 -->
|
||||
<download-drawer
|
||||
v-if="
|
||||
@@ -69,6 +78,7 @@ const keepAliveInclude = computed(() =>
|
||||
|
||||
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
|
||||
const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
|
||||
const MobilePlayBar = defineAsyncComponent(() => import('./components/MobilePlayBar.vue'));
|
||||
const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
|
||||
const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
|
||||
|
||||
@@ -99,7 +109,7 @@ watch(
|
||||
() => settingsStore.currentArtistId,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
console.log('newId',newId)
|
||||
console.log('newId', newId);
|
||||
artistDrawerShow.value = true;
|
||||
nextTick(() => {
|
||||
artistDrawerRef.value?.loadArtistInfo(newId);
|
||||
@@ -152,7 +162,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
|
||||
|
||||
.mobile {
|
||||
.main-content {
|
||||
height: calc(100vh - 146px);
|
||||
height: calc(100vh - 154px);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
flex: none;
|
||||
|
||||
@@ -127,7 +127,7 @@ const isText = ref(false);
|
||||
|
||||
&-item {
|
||||
&-link {
|
||||
@apply my-4 w-auto;
|
||||
@apply my-2 w-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
const toggleFavorite = () => {
|
||||
console.log('isFavorite.value', isFavorite.value);
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(playMusic.value.id);
|
||||
} else {
|
||||
playerStore.addToFavorite(playMusic.value.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放暂停按钮事件
|
||||
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>
|
||||
@@ -11,7 +11,7 @@
|
||||
<div
|
||||
class="control-btn absolute top-8 left-8"
|
||||
:class="{ 'pure-mode': config.pureModeEnabled }"
|
||||
@click="isVisible = false"
|
||||
@click="closeMusicFull"
|
||||
>
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
@@ -70,7 +70,7 @@
|
||||
class="music-lrc"
|
||||
:style="{
|
||||
height: config.hidePlayBar ? '85vh' : '65vh',
|
||||
width: config.hideCover ? '50vw' : '500px'
|
||||
width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
|
||||
}"
|
||||
:native-scrollbar="false"
|
||||
@mouseover="mouseOverLayout"
|
||||
@@ -142,6 +142,7 @@ import {
|
||||
textColors,
|
||||
useLyricProgress
|
||||
} from '@/hooks/MusicHook';
|
||||
import { usePlayerStore } from '@/store';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, isMobile } from '@/utils';
|
||||
import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
|
||||
@@ -432,6 +433,13 @@ const handleScroll = () => {
|
||||
showStickyHeader.value = scrollTop > 100;
|
||||
};
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
const closeMusicFull = () => {
|
||||
isVisible.value = false;
|
||||
playerStore.setMusicFull(false);
|
||||
};
|
||||
|
||||
// 添加滚动监听
|
||||
onMounted(() => {
|
||||
if (lrcSider.value?.$el) {
|
||||
@@ -648,12 +656,17 @@ defineExpose({
|
||||
span {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
}
|
||||
.hover-text {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.music-lrc-text {
|
||||
@apply text-xl text-center;
|
||||
}
|
||||
.music-content {
|
||||
@apply h-[calc(100vh-120px)];
|
||||
width: 100vw !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -664,8 +677,9 @@ defineExpose({
|
||||
|
||||
// 添加全局字体样式
|
||||
:root {
|
||||
--current-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, sans-serif;
|
||||
--current-font-family:
|
||||
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
#drawer-target {
|
||||
@@ -687,7 +701,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
|
||||
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
|
||||
background: rgba(142, 142, 142, 0.192);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
|
||||
@@ -567,7 +567,7 @@ const isEQVisible = ref(false);
|
||||
|
||||
.mobile {
|
||||
.music-play-bar {
|
||||
@apply px-4 bottom-[70px] transition-all duration-300;
|
||||
@apply px-4 bottom-[56px] transition-all duration-300;
|
||||
}
|
||||
.music-time {
|
||||
display: none;
|
||||
|
||||
@@ -37,11 +37,10 @@ export const useSettingsStore = defineStore('settings', () => {
|
||||
|
||||
if (isElectron) {
|
||||
window.electron.ipcRenderer.send('set-store-value', 'set', cloneDeep(mergedData));
|
||||
console.log('mergedData', mergedData);
|
||||
setData.value = cloneDeep(mergedData);
|
||||
} else {
|
||||
localStorage.setItem('appSettings', JSON.stringify(cloneDeep(mergedData)));
|
||||
}
|
||||
setData.value = cloneDeep(mergedData);
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
@@ -73,16 +74,26 @@ export const getImgUrl = (url: string | undefined, size: string = '') => {
|
||||
};
|
||||
|
||||
export const isMobile = computed(() => {
|
||||
const flag = navigator.userAgent.match(
|
||||
const { width } = useWindowSize();
|
||||
const userAgentFlag = navigator.userAgent.match(
|
||||
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
||||
);
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
settingsStore.isMobile = !!flag;
|
||||
const isMobileWidth = width.value < 500;
|
||||
const isMobileDevice = !!userAgentFlag || isMobileWidth;
|
||||
|
||||
// 给html标签 添加mobile
|
||||
if (flag) document.documentElement.classList.add('mobile');
|
||||
return !!flag;
|
||||
const settingsStore = useSettingsStore();
|
||||
settingsStore.isMobile = isMobileDevice;
|
||||
|
||||
// 给html标签 添加或移除mobile类
|
||||
if (isMobileDevice) {
|
||||
document.documentElement.classList.add('mobile');
|
||||
} else {
|
||||
document.documentElement.classList.add('pc');
|
||||
document.documentElement.classList.remove('mobile');
|
||||
}
|
||||
|
||||
return isMobileDevice;
|
||||
});
|
||||
|
||||
export const isElectron = (window as any).electron !== undefined;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="settings-container">
|
||||
<!-- 左侧导航栏 -->
|
||||
<div class="settings-nav">
|
||||
<div v-if="!isMobile" class="settings-nav">
|
||||
<div
|
||||
v-for="section in settingSections"
|
||||
:key="section.id"
|
||||
@@ -462,7 +462,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { debounce } from 'lodash';
|
||||
import type { FormRules } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
@@ -476,7 +475,7 @@ import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
|
||||
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { isElectron } from '@/utils';
|
||||
import { isElectron, isMobile } from '@/utils';
|
||||
import { openDirectory, selectDirectory } from '@/utils/fileOperation';
|
||||
import { checkUpdate, UpdateResult } from '@/utils/update';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user