mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-15 07:20:49 +08:00
feat: 优化播放栏，整合高级控制菜单，将定时、均衡器、速度控制改为更多设置按钮显示, 添加定时关闭顶部显示功能
This commit is contained in:
alger
@@ -264,7 +264,6 @@ const formatFreq = (freq: number) => {
|
||||
.eq-control {
|
||||
@apply p-6 rounded-lg;
|
||||
@apply bg-light dark:bg-dark;
|
||||
@apply shadow-lg dark:shadow-none;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
|
||||
|
||||
251
src/renderer/components/player/AdvancedControlsPopover.vue
Normal file
251
src/renderer/components/player/AdvancedControlsPopover.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<n-dropdown
|
||||
:show="showDropdown"
|
||||
:options="dropdownOptions"
|
||||
trigger="hover"
|
||||
:z-index="9999999"
|
||||
@select="handleSelect"
|
||||
placement="top"
|
||||
@update:show="(show) => showDropdown = show"
|
||||
>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<div class="advanced-controls-btn">
|
||||
<i class="iconfont ri-settings-3-line"></i>
|
||||
|
||||
<!-- 激活状态的小标记 -->
|
||||
<div v-if="hasActiveSettings" class="active-indicator">
|
||||
<span v-if="hasActiveSleepTimer" class="timer-badge">
|
||||
<i class="ri-time-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{ t('player.playBar.advancedControls') }}
|
||||
</n-tooltip>
|
||||
</n-dropdown>
|
||||
|
||||
<!-- EQ 均衡器弹窗 -->
|
||||
<n-modal v-model:show="showEQModal" :mask-closable="true" :unstable-show-mask="false">
|
||||
<div class="eq-modal-content">
|
||||
<div class="modal-close" @click="showEQModal = false">
|
||||
<i class="ri-close-line"></i>
|
||||
</div>
|
||||
<eq-control />
|
||||
</div>
|
||||
</n-modal>
|
||||
|
||||
<!-- 定时关闭弹窗 -->
|
||||
<n-modal v-model:show="playerStore.showSleepTimer" :mask-closable="true" :unstable-show-mask="false">
|
||||
<div class="timer-modal-content">
|
||||
<div class="modal-close" @click="playerStore.showSleepTimer = false">
|
||||
<i class="ri-close-line"></i>
|
||||
</div>
|
||||
<sleep-timer />
|
||||
</div>
|
||||
</n-modal>
|
||||
|
||||
<!-- 播放速度设置弹窗 -->
|
||||
<n-modal v-model:show="showSpeedModal" :mask-closable="true" :unstable-show-mask="false">
|
||||
<div class="speed-modal-content">
|
||||
<div class="modal-close" @click="showSpeedModal = false">
|
||||
<i class="ri-close-line"></i>
|
||||
</div>
|
||||
<h3>{{ t('player.playBar.playbackSpeed') }}</h3>
|
||||
<div class="speed-options">
|
||||
<div
|
||||
v-for="option in playbackRateOptions"
|
||||
:key="option.key"
|
||||
class="speed-option"
|
||||
:class="{ 'active': playbackRate === option.key }"
|
||||
@click="selectSpeed(option.key)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, h } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { DropdownOption } from 'naive-ui';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import EqControl from '@/components/EQControl.vue';
|
||||
import SleepTimer from '@/components/player/SleepTimer.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
// 下拉菜单状态
|
||||
const showDropdown = ref(false);
|
||||
const showEQModal = ref(false);
|
||||
const showSpeedModal = ref(false);
|
||||
const isEQVisible = ref(false);
|
||||
|
||||
// 播放速度状态
|
||||
const playbackRate = computed(() => playerStore.playbackRate);
|
||||
|
||||
|
||||
// 播放速度选项
|
||||
const playbackRateOptions = [
|
||||
{ label: '0.5x', key: 0.5 },
|
||||
{ label: '0.75x', key: 0.75 },
|
||||
{ label: '1.0x', key: 1.0 },
|
||||
{ label: '1.25x', key: 1.25 },
|
||||
{ label: '1.5x', key: 1.5 },
|
||||
{ label: '2.0x', key: 2.0 }
|
||||
];
|
||||
|
||||
// 是否有激活的睡眠定时器
|
||||
const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
|
||||
|
||||
// 检查是否有任何高级设置是激活状态
|
||||
const hasActiveSettings = computed(() => {
|
||||
return playbackRate.value !== 1.0 || hasActiveSleepTimer.value || isEQVisible.value;
|
||||
});
|
||||
|
||||
// 下拉菜单选项
|
||||
const dropdownOptions = computed<DropdownOption[]>(() => [
|
||||
{
|
||||
label: t('player.playBar.eq'),
|
||||
key: 'eq',
|
||||
icon: () => h('i', { class: 'ri-equalizer-line' })
|
||||
},
|
||||
{
|
||||
label: t('player.sleepTimer.title'),
|
||||
key: 'timer',
|
||||
icon: () => h('i', { class: 'ri-timer-line' }),
|
||||
// 如果有激活的定时器，添加标记
|
||||
suffix: () => hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null
|
||||
},
|
||||
{
|
||||
label: t('player.playBar.playbackSpeed') + `(${playbackRate.value}x)`,
|
||||
key: 'speed',
|
||||
icon: () => h('i', { class: 'ri-speed-line' }),
|
||||
// 如果播放速度不是1.0，添加标记
|
||||
suffix: () => playbackRate.value !== 1.0 ? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`) : null
|
||||
}
|
||||
]);
|
||||
|
||||
// 处理菜单选择
|
||||
const handleSelect = (key: string) => {
|
||||
switch (key) {
|
||||
case 'eq':
|
||||
showEQModal.value = true;
|
||||
break;
|
||||
case 'timer':
|
||||
playerStore.showSleepTimer = true;
|
||||
break;
|
||||
case 'speed':
|
||||
showSpeedModal.value = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 选择播放速度
|
||||
const selectSpeed = (speed: number) => {
|
||||
playerStore.setPlaybackRate(speed);
|
||||
showSpeedModal.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sleep-timer-countdown {
|
||||
@apply fixed top-0 left-1/2 transform -translate-x-1/2 py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
z-index: 9998;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
animation: fadeInDown 0.3s ease-out;
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate(-50%, -100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-controls-btn {
|
||||
@apply cursor-pointer mx-3 relative;
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl transition;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
|
||||
.active-indicator {
|
||||
@apply absolute -top-1 -right-1 flex;
|
||||
|
||||
.timer-badge, .speed-badge {
|
||||
@apply flex items-center justify-center text-xs bg-green-500 text-white rounded-full;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 0 3px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.timer-badge + .speed-badge {
|
||||
@apply -ml-2 z-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eq-modal-content,
|
||||
.timer-modal-content,
|
||||
.speed-modal-content {
|
||||
@apply p-6 rounded-3xl bg-white dark:bg-dark;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.speed-modal-content {
|
||||
h3 {
|
||||
@apply text-lg font-medium mb-4 text-center;
|
||||
}
|
||||
|
||||
.speed-options {
|
||||
@apply flex flex-wrap justify-center gap-4 my-8 mx-4;
|
||||
|
||||
.speed-option {
|
||||
@apply py-2 px-4 rounded-full cursor-pointer transition-all;
|
||||
@apply bg-gray-100 dark:bg-gray-800;
|
||||
@apply hover:bg-green-100 dark:hover:bg-green-900;
|
||||
|
||||
&.active {
|
||||
@apply bg-green-500 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-option-mark {
|
||||
@apply ml-2 text-xs bg-green-500 text-white py-0.5 px-1.5 rounded-full;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@apply absolute top-4 right-4 cursor-pointer hover:text-green-500;
|
||||
i {
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -56,10 +56,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-content">
|
||||
<div class="music-content-title">
|
||||
<div class="music-content-title flex items-center">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
{{ playMusic.name }}
|
||||
</n-ellipsis>
|
||||
<span v-if="playbackRate !== 1.0" class="playback-rate-badge">
|
||||
{{ playbackRate }}x
|
||||
</span>
|
||||
</div>
|
||||
<div class="music-content-name">
|
||||
<n-ellipsis
|
||||
@@ -133,51 +136,16 @@
|
||||
</template>
|
||||
{{ t('player.playBar.reparse') }}
|
||||
</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>
|
||||
<!-- 定时关闭功能 -->
|
||||
<sleep-timer-popover mode="desktop" />
|
||||
|
||||
<!-- 高级控制菜单按钮（整合了 EQ、定时关闭、播放速度） -->
|
||||
<advanced-controls-popover />
|
||||
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
|
||||
</template>
|
||||
{{ t('player.playBar.playList') }}
|
||||
</n-tooltip>
|
||||
<!-- 添加播放速度控制按钮 -->
|
||||
<n-dropdown
|
||||
v-if="!isMobile"
|
||||
:options="playbackRateOptions"
|
||||
@select="handlePlaybackRateChange"
|
||||
trigger="click"
|
||||
:z-index="9999999"
|
||||
>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<div class="play-speed">
|
||||
<span class="speed-button">{{ playbackRate }}x</span>
|
||||
</div>
|
||||
</template>
|
||||
{{ t('player.playBar.playbackSpeed') }}
|
||||
</n-tooltip>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
<!-- 播放音乐 -->
|
||||
<music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
|
||||
@@ -189,9 +157,6 @@ import { useThrottleFn } from '@vueuse/core';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import EqControl from '@/components/EQControl.vue';
|
||||
import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
|
||||
import ReparsePopover from '@/components/player/ReparsePopover.vue';
|
||||
import {
|
||||
allTime,
|
||||
@@ -207,10 +172,12 @@ import MusicFull from '@/layout/components/MusicFull.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import {
|
||||
isBilibiliIdMatch,
|
||||
usePlayerStore
|
||||
usePlayerStore
|
||||
} from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
|
||||
import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -337,22 +304,7 @@ const playModeText = computed(() => {
|
||||
});
|
||||
|
||||
// 播放速度控制
|
||||
const playbackRate = ref(1.0);
|
||||
const playbackRateOptions = [
|
||||
{ label: '0.5x', key: 0.5 },
|
||||
{ label: '0.75x', key: 0.75 },
|
||||
{ label: '1.0x', key: 1.0 },
|
||||
{ label: '1.25x', key: 1.25 },
|
||||
{ label: '1.5x', key: 1.5 },
|
||||
{ label: '2.0x', key: 2.0 }
|
||||
];
|
||||
|
||||
|
||||
const handlePlaybackRateChange = (rate: number) => {
|
||||
playbackRate.value = rate;
|
||||
audioService.setPlaybackRate(rate);
|
||||
};
|
||||
|
||||
const {playbackRate} = storeToRefs(playerStore);
|
||||
// 切换播放模式
|
||||
const togglePlayMode = () => {
|
||||
playerStore.togglePlayMode();
|
||||
@@ -434,8 +386,6 @@ const handleArtistClick = (id: number) => {
|
||||
navigateToArtist(id);
|
||||
};
|
||||
|
||||
const isEQVisible = ref(false);
|
||||
|
||||
// 打开播放列表抽屉
|
||||
const openPlayListDrawer = () => {
|
||||
playerStore.setPlayListDrawerVisible(true);
|
||||
@@ -464,7 +414,7 @@ const openPlayListDrawer = () => {
|
||||
}
|
||||
|
||||
.music-content {
|
||||
width: 160px;
|
||||
width: 200px;
|
||||
@apply ml-4;
|
||||
|
||||
&-title {
|
||||
@@ -756,4 +706,11 @@ const openPlayListDrawer = () => {
|
||||
.speed-button:hover {
|
||||
background: var(--hover-color-dark);
|
||||
}
|
||||
|
||||
|
||||
.playback-rate-badge {
|
||||
@apply ml-2 px-1.5 h-4 flex items-center text-xs rounded bg-green-500 bg-opacity-15 text-green-600 dark:text-green-400;
|
||||
font-weight: 500;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
342
src/renderer/components/player/SleepTimer.vue
Normal file
342
src/renderer/components/player/SleepTimer.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="sleep-timer-content">
|
||||
<h3 class="timer-title">{{ t('player.sleepTimer.title') }}</h3>
|
||||
|
||||
<div v-if="hasTimerActive" class="sleep-timer-active">
|
||||
<div class="timer-status">
|
||||
<template v-if="timerType === 'time'">
|
||||
<div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'songs'">
|
||||
<div class="timer-value">{{ remainingSongs }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'end'">
|
||||
<div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
|
||||
{{ t('player.sleepTimer.cancel') }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="sleep-timer-options">
|
||||
<!-- 按时间定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
|
||||
<div class="time-options">
|
||||
<n-button
|
||||
v-for="minutes in [15, 30, 60, 90]"
|
||||
:key="minutes"
|
||||
size="small"
|
||||
class="time-option-btn"
|
||||
@click="handleSetTimeTimer(minutes)"
|
||||
round
|
||||
>
|
||||
{{ minutes }}{{ t('player.sleepTimer.minutes') }}
|
||||
</n-button>
|
||||
<div class="custom-time">
|
||||
<n-input-number
|
||||
v-model:value="customMinutes"
|
||||
:min="1"
|
||||
:max="300"
|
||||
size="small"
|
||||
class="custom-time-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-time-btn"
|
||||
:disabled="!customMinutes"
|
||||
@click="handleSetTimeTimer(customMinutes)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按歌曲数定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
|
||||
<div class="songs-options">
|
||||
<n-button
|
||||
v-for="songs in [1, 3, 5, 10]"
|
||||
:key="songs"
|
||||
size="small"
|
||||
class="songs-option-btn"
|
||||
@click="handleSetSongsTimer(songs)"
|
||||
round
|
||||
>
|
||||
{{ songs }}{{ t('player.sleepTimer.songs') }}
|
||||
</n-button>
|
||||
<div class="custom-songs">
|
||||
<n-input-number
|
||||
v-model:value="customSongs"
|
||||
:min="1"
|
||||
:max="50"
|
||||
size="small"
|
||||
class="custom-songs-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-songs-btn"
|
||||
:disabled="!customSongs"
|
||||
@click="handleSetSongsTimer(customSongs)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放完列表后关闭 -->
|
||||
<div class="option-section playlist-end-section">
|
||||
<n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
|
||||
{{ t('player.sleepTimer.playlistEnd') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
// 从store获取所有相关状态
|
||||
const { sleepTimer } = storeToRefs(playerStore);
|
||||
|
||||
// 本地状态，用于UI展示
|
||||
const customMinutes = ref(30);
|
||||
const customSongs = ref(5);
|
||||
// 添加一个刷新触发变量，用于强制更新倒计时
|
||||
const refreshTrigger = ref(0);
|
||||
|
||||
// 计算属性，判断定时器状态
|
||||
const hasTimerActive = computed(() => {
|
||||
return playerStore.hasSleepTimerActive;
|
||||
});
|
||||
|
||||
const timerType = computed(() => {
|
||||
return sleepTimer.value.type;
|
||||
});
|
||||
|
||||
// 剩余歌曲数
|
||||
const remainingSongs = computed(() => {
|
||||
return playerStore.sleepTimerRemainingSongs;
|
||||
});
|
||||
|
||||
// 处理设置时间定时器
|
||||
function handleSetTimeTimer(minutes: number) {
|
||||
playerStore.setSleepTimerByTime(minutes);
|
||||
}
|
||||
|
||||
// 处理设置歌曲数定时器
|
||||
function handleSetSongsTimer(songs: number) {
|
||||
playerStore.setSleepTimerBySongs(songs);
|
||||
}
|
||||
|
||||
// 处理设置播放列表结束定时器
|
||||
function handleSetPlaylistEndTimer() {
|
||||
playerStore.setSleepTimerAtPlaylistEnd();
|
||||
}
|
||||
|
||||
// 处理取消定时器
|
||||
function handleCancelTimer() {
|
||||
playerStore.clearSleepTimer();
|
||||
}
|
||||
|
||||
// 格式化剩余时间为 HH:MM:SS
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = minutes.toString().padStart(2, '0');
|
||||
const formattedSeconds = seconds.toString().padStart(2, '0');
|
||||
|
||||
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
||||
});
|
||||
|
||||
// 监听剩余时间变化
|
||||
let timerInterval: number | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 如果当前有定时器，开始更新UI
|
||||
if (hasTimerActive.value && timerType.value === 'time') {
|
||||
startTimerUpdate();
|
||||
}
|
||||
|
||||
// 监听定时器状态变化
|
||||
watch(
|
||||
() => [hasTimerActive.value, timerType.value],
|
||||
([newHasTimer, newType]) => {
|
||||
if (newHasTimer && newType === 'time') {
|
||||
startTimerUpdate();
|
||||
} else {
|
||||
stopTimerUpdate();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
// 每秒更新UI
|
||||
timerInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
refreshTrigger.value = Date.now();
|
||||
}, 500) as unknown as number;
|
||||
}
|
||||
|
||||
// 停止定时器更新UI
|
||||
function stopTimerUpdate() {
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimerUpdate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sleep-timer-content {
|
||||
@apply w-full p-4;
|
||||
|
||||
.timer-title {
|
||||
@apply text-lg font-medium mb-4 text-center;
|
||||
}
|
||||
|
||||
// 激活状态显示
|
||||
.sleep-timer-active {
|
||||
@apply flex flex-col items-center;
|
||||
|
||||
// 定时状态卡片
|
||||
.timer-status {
|
||||
@apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定时值显示
|
||||
.timer-value {
|
||||
@apply text-4xl font-semibold mb-2 text-green-500;
|
||||
|
||||
&.countdown-timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签文本
|
||||
.timer-label {
|
||||
@apply text-base text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
.cancel-timer-btn {
|
||||
@apply w-full py-3 text-base rounded-full transition-all duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定时器选项区域
|
||||
.sleep-timer-options {
|
||||
@apply flex flex-col;
|
||||
|
||||
// 选项部分
|
||||
.option-section {
|
||||
@apply mb-7;
|
||||
|
||||
// 选项标题
|
||||
.option-title {
|
||||
@apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
// 时间/歌曲选项容器
|
||||
.time-options, .songs-options {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
// 选项按钮共享样式
|
||||
.time-option-btn, .songs-option-btn {
|
||||
@apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义输入区域
|
||||
.custom-time, .custom-songs {
|
||||
@apply flex items-center space-x-2 mt-4 w-full;
|
||||
|
||||
// 输入框
|
||||
.custom-time-input, .custom-songs-input {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
// 设置按钮
|
||||
.custom-time-btn, .custom-songs-btn {
|
||||
@apply py-2 px-4 rounded-full transition-all duration-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 播放列表结束选项
|
||||
.playlist-end-section {
|
||||
@apply mt-2;
|
||||
|
||||
.playlist-end-btn {
|
||||
@apply py-3 text-base rounded-full transition-all duration-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,478 +0,0 @@
|
||||
<template>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="sleep-timer"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
placement="top"
|
||||
display-directive="show"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<div class="control-btn timer" :class="{ 'mobile-timer': mode === 'mobile' }">
|
||||
<i
|
||||
class="iconfont ri-time-line"
|
||||
:class="{ 'text-green-500': hasTimerActive }"
|
||||
></i>
|
||||
</div>
|
||||
</template>
|
||||
{{ t('player.sleepTimer.title') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<div class="sleep-timer-container" :class="{ 'mobile-sleep-timer-container': mode === 'mobile' }">
|
||||
<div class="sleep-timer-back"></div>
|
||||
|
||||
<div class="sleep-timer-content">
|
||||
<div class="sleep-timer-title">{{ t('player.sleepTimer.title') }}</div>
|
||||
|
||||
<div v-if="hasTimerActive" class="sleep-timer-active">
|
||||
<div class="timer-status">
|
||||
<template v-if="timerType === 'time'">
|
||||
<div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.minutesRemaining', { minutes: Math.ceil(remainingMinutes/60) }) }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'songs'">
|
||||
<div class="timer-value">{{ remainingSongs }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'end'">
|
||||
<div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
|
||||
{{ t('player.sleepTimer.cancel') }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="sleep-timer-options">
|
||||
<!-- 按时间定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
|
||||
<div class="time-options">
|
||||
<n-button
|
||||
v-for="minutes in [15, 30, 60, 90]"
|
||||
:key="minutes"
|
||||
size="small"
|
||||
class="time-option-btn"
|
||||
@click="handleSetTimeTimer(minutes)"
|
||||
round
|
||||
>
|
||||
{{ minutes }}{{ t('player.sleepTimer.minutes') }}
|
||||
</n-button>
|
||||
<div class="custom-time">
|
||||
<n-input-number
|
||||
v-model:value="customMinutes"
|
||||
:min="1"
|
||||
:max="300"
|
||||
size="small"
|
||||
class="custom-time-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-time-btn"
|
||||
:disabled="!customMinutes"
|
||||
@click="handleSetTimeTimer(customMinutes)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按歌曲数定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
|
||||
<div class="songs-options">
|
||||
<n-button
|
||||
v-for="songs in [1, 3, 5, 10]"
|
||||
:key="songs"
|
||||
size="small"
|
||||
class="songs-option-btn"
|
||||
@click="handleSetSongsTimer(songs)"
|
||||
round
|
||||
>
|
||||
{{ songs }}{{ t('player.sleepTimer.songs') }}
|
||||
</n-button>
|
||||
<div class="custom-songs">
|
||||
<n-input-number
|
||||
v-model:value="customSongs"
|
||||
:min="1"
|
||||
:max="50"
|
||||
size="small"
|
||||
class="custom-songs-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-songs-btn"
|
||||
:disabled="!customSongs"
|
||||
@click="handleSetSongsTimer(customSongs)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放完列表后关闭 -->
|
||||
<div class="option-section playlist-end-section">
|
||||
<n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
|
||||
{{ t('player.sleepTimer.playlistEnd') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-popover>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
// 组件接收一个mode参数，用于标识是移动端还是桌面端
|
||||
defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'desktop' // 'desktop' 或 'mobile'
|
||||
}
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
// 从store获取所有相关状态
|
||||
const { sleepTimer} = storeToRefs(playerStore);
|
||||
|
||||
// 本地状态，用于UI展示
|
||||
const customMinutes = ref(30);
|
||||
const customSongs = ref(5);
|
||||
// 添加一个刷新触发变量，用于强制更新倒计时
|
||||
const refreshTrigger = ref(0);
|
||||
|
||||
// 计算属性，判断定时器状态
|
||||
const hasTimerActive = computed(() => {
|
||||
return playerStore.hasSleepTimerActive;
|
||||
});
|
||||
|
||||
const timerType = computed(() => {
|
||||
return sleepTimer.value.type;
|
||||
});
|
||||
|
||||
// 剩余时间（分钟）
|
||||
const remainingMinutes = computed(() => {
|
||||
return playerStore.sleepTimerRemainingTime;
|
||||
});
|
||||
|
||||
// 剩余歌曲数
|
||||
const remainingSongs = computed(() => {
|
||||
return playerStore.sleepTimerRemainingSongs;
|
||||
});
|
||||
|
||||
// 处理设置时间定时器
|
||||
function handleSetTimeTimer(minutes: number) {
|
||||
playerStore.setSleepTimerByTime(minutes);
|
||||
}
|
||||
|
||||
// 处理设置歌曲数定时器
|
||||
function handleSetSongsTimer(songs: number) {
|
||||
playerStore.setSleepTimerBySongs(songs);
|
||||
}
|
||||
|
||||
// 处理设置播放列表结束定时器
|
||||
function handleSetPlaylistEndTimer() {
|
||||
playerStore.setSleepTimerAtPlaylistEnd();
|
||||
}
|
||||
|
||||
// 处理取消定时器
|
||||
function handleCancelTimer() {
|
||||
playerStore.clearSleepTimer();
|
||||
}
|
||||
|
||||
// 格式化剩余时间为 HH:MM:SS
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = minutes.toString().padStart(2, '0');
|
||||
const formattedSeconds = seconds.toString().padStart(2, '0');
|
||||
|
||||
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
||||
});
|
||||
|
||||
// 监听剩余时间变化
|
||||
let timerInterval: number | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 如果当前有定时器，开始更新UI
|
||||
if (hasTimerActive.value && timerType.value === 'time') {
|
||||
startTimerUpdate();
|
||||
}
|
||||
|
||||
// 监听定时器状态变化
|
||||
watch(
|
||||
() => [hasTimerActive.value, timerType.value],
|
||||
([newHasTimer, newType]) => {
|
||||
if (newHasTimer && newType === 'time') {
|
||||
startTimerUpdate();
|
||||
} else {
|
||||
stopTimerUpdate();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
// 每秒更新UI
|
||||
timerInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
refreshTrigger.value = Date.now();
|
||||
}, 500) as unknown as number;
|
||||
}
|
||||
|
||||
// 停止定时器更新UI
|
||||
function stopTimerUpdate() {
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimerUpdate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.control-btn.timer {
|
||||
@apply cursor-pointer;
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl m-4 transition-all duration-300 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-green-500 transform scale-110;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-timer {
|
||||
@apply flex items-center justify-center;
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主容器样式
|
||||
.sleep-timer-container {
|
||||
width: 380px;
|
||||
height: auto;
|
||||
@apply relative overflow-hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
transform-origin: top center;
|
||||
animation: popoverEnter 0.2s cubic-bezier(0.3, 0, 0.2, 1);
|
||||
|
||||
// 入场动画
|
||||
@keyframes popoverEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端样式
|
||||
&.mobile-sleep-timer-container {
|
||||
width: 92vw;
|
||||
max-width: 400px;
|
||||
@apply rounded-t-2xl;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
// 背景毛玻璃效果
|
||||
.sleep-timer-back {
|
||||
@apply absolute top-0 left-0 w-full h-full dark:bg-gray-900 dark:bg-opacity-75 dark:border-gray-700;
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.sleep-timer-content {
|
||||
@apply p-6 relative z-10;
|
||||
|
||||
// 标题
|
||||
.sleep-timer-title {
|
||||
@apply text-xl font-bold text-center mb-6 text-gray-800 dark:text-gray-100;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
// 激活状态显示
|
||||
.sleep-timer-active {
|
||||
@apply flex flex-col items-center;
|
||||
|
||||
// 定时状态卡片
|
||||
.timer-status {
|
||||
@apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定时值显示
|
||||
.timer-value {
|
||||
@apply text-4xl font-semibold mb-2 text-green-500;
|
||||
|
||||
&.countdown-timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签文本
|
||||
.timer-label {
|
||||
@apply text-base text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
.cancel-timer-btn {
|
||||
@apply w-full py-3 text-base rounded-full transition-all duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定时器选项区域
|
||||
.sleep-timer-options {
|
||||
@apply flex flex-col;
|
||||
|
||||
// 选项部分
|
||||
.option-section {
|
||||
@apply mb-7;
|
||||
|
||||
// 选项标题
|
||||
.option-title {
|
||||
@apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
// 时间/歌曲选项容器
|
||||
.time-options, .songs-options {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
// 选项按钮共享样式
|
||||
.time-option-btn, .songs-option-btn {
|
||||
@apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义输入区域
|
||||
.custom-time, .custom-songs {
|
||||
@apply flex items-center space-x-2 mt-4 w-full;
|
||||
|
||||
// 输入框
|
||||
.custom-time-input, .custom-songs-input {
|
||||
@apply flex-1;
|
||||
|
||||
:deep(.n-input) {
|
||||
@apply rounded-full dark:bg-gray-800 dark:bg-opacity-40 dark:border-gray-700;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设置按钮
|
||||
.custom-time-btn, .custom-songs-btn {
|
||||
@apply py-2 px-4 rounded-full transition-all duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 播放列表结束选项
|
||||
.playlist-end-section {
|
||||
@apply mt-2;
|
||||
|
||||
.playlist-end-btn {
|
||||
@apply py-3 text-base rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/renderer/components/player/SleepTimerTop.vue
Normal file
124
src/renderer/components/player/SleepTimerTop.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 定时关闭倒计时显示区域 -->
|
||||
<div v-if="hasActiveSleepTimer" class="sleep-timer-countdown" @click="handleShowTimer">
|
||||
<i class="iconfont ri-time-line mr-1"></i>
|
||||
<span>{{ formattedRemainingTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
// 定时器状态
|
||||
const playerStore = usePlayerStore();
|
||||
const { sleepTimer } = storeToRefs(playerStore);
|
||||
const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
|
||||
const refreshTrigger = ref(0);
|
||||
|
||||
// 倒计时显示
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
if (sleepTimer.value.type !== 'time' || !sleepTimer.value.endTime) {
|
||||
if (sleepTimer.value.type === 'songs' && sleepTimer.value.remainingSongs) {
|
||||
return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs });
|
||||
}
|
||||
if (sleepTimer.value.type === 'end') {
|
||||
return t('player.sleepTimer.activeUntilEnd');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
});
|
||||
|
||||
// 监听剩余时间变化
|
||||
let timerUpdateInterval: number | null = null;
|
||||
|
||||
watch(
|
||||
() => hasActiveSleepTimer.value,
|
||||
(newHasTimer) => {
|
||||
if (newHasTimer && sleepTimer.value.type === 'time') {
|
||||
startTimerUpdate();
|
||||
} else if (!newHasTimer) {
|
||||
stopTimerUpdate();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
// 每秒更新UI
|
||||
timerUpdateInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
refreshTrigger.value = Date.now();
|
||||
}, 1000) as unknown as number;
|
||||
}
|
||||
|
||||
// 停止定时器更新UI
|
||||
function stopTimerUpdate() {
|
||||
if (timerUpdateInterval) {
|
||||
clearInterval(timerUpdateInterval);
|
||||
timerUpdateInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowTimer = () => {
|
||||
playerStore.showSleepTimer = true;
|
||||
};
|
||||
|
||||
// 播放器卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
stopTimerUpdate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.sleep-timer-countdown {
|
||||
@apply fixed top-[28px] left-1/2 transform -translate-x-1/2 -translate-y-full py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
z-index: 9998;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
animation: fadeInDown 0.3s ease-out;
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate(-50%, -150%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -100%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -52,6 +52,7 @@
|
||||
<install-app-modal v-if="!isElectron"></install-app-modal>
|
||||
<update-modal v-if="isElectron" />
|
||||
<playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
|
||||
<SleepTimerTop v-if="!isMobile"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -69,6 +70,7 @@ import { useMenuStore } from '@/store/modules/menu';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { isElectron, isMobile } from '@/utils';
|
||||
import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
|
||||
|
||||
const keepAliveInclude = computed(() => {
|
||||
const allRoutes = [...homeRouter, ...otherRouter];
|
||||
|
||||
@@ -389,7 +389,7 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
const musicFull = ref(false);
|
||||
const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
|
||||
const savedPlayProgress = ref<number | undefined>();
|
||||
|
||||
const showSleepTimer = ref(false); // 定时弹窗
|
||||
// 添加播放列表抽屉状态
|
||||
const playListDrawerVisible = ref(false);
|
||||
|
||||
@@ -399,8 +399,8 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
value: 0
|
||||
}));
|
||||
|
||||
// 添加播放速度状态
|
||||
const playbackRate = ref(1.0);
|
||||
// 播放速度状态
|
||||
const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
|
||||
|
||||
// 清空播放列表
|
||||
const clearPlayAll = async () => {
|
||||
@@ -1053,15 +1053,6 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
localStorage.setItem('playbackRate', rate.toString());
|
||||
};
|
||||
|
||||
// 初始化播放速度
|
||||
const initializePlaybackRate = () => {
|
||||
const savedRate = localStorage.getItem('playbackRate');
|
||||
if (savedRate) {
|
||||
playbackRate.value = parseFloat(savedRate);
|
||||
audioService.setPlaybackRate(playbackRate.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化播放状态
|
||||
const initializePlayState = async () => {
|
||||
const settingStore = useSettingsStore();
|
||||
@@ -1113,7 +1104,11 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
localStorage.removeItem('playProgress');
|
||||
}
|
||||
}
|
||||
initializePlaybackRate();
|
||||
|
||||
setTimeout(() => {
|
||||
audioService.setPlaybackRate(playbackRate.value);
|
||||
}, 2000);
|
||||
|
||||
};
|
||||
|
||||
const initializeFavoriteList = async () => {
|
||||
@@ -1332,6 +1327,7 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
|
||||
// 定时关闭相关
|
||||
sleepTimer,
|
||||
showSleepTimer,
|
||||
currentSleepTimer,
|
||||
hasSleepTimerActive,
|
||||
sleepTimerRemainingTime,
|
||||
|
||||
Reference in New Issue
Block a user