fix: 修复音量调整不同步的问题

fixed(#331):  软件存在两套音量调整逻辑,快捷键调整和音量条调整音量不一致
This commit is contained in:
alger
2025-07-29 22:19:34 +08:00
parent f2eba9a6d0
commit 679089eda9
3 changed files with 50 additions and 22 deletions

View File

@@ -123,7 +123,7 @@
<template #trigger> <template #trigger>
<i <i
class="iconfont ri-netease-cloud-music-line" class="iconfont ri-netease-cloud-music-line"
:class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !(playMusic?.id) }" :class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !playMusic?.id }"
@click="playMusic?.id && openLyricWindow()" @click="playMusic?.id && openLyricWindow()"
></i> ></i>
</template> </template>
@@ -245,27 +245,22 @@ const formatTooltip = (value: number) => {
return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`; return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
}; };
// 音量条 // 音量条 - 使用 playerStore 的统一音量管理
const audioVolume = ref(
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
);
const getVolumeIcon = computed(() => { const getVolumeIcon = computed(() => {
// 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line // 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
if (audioVolume.value === 0) { if (playerStore.volume === 0) {
return 'ri-volume-mute-line'; return 'ri-volume-mute-line';
} }
if (audioVolume.value <= 0.5) { if (playerStore.volume <= 0.5) {
return 'ri-volume-down-line'; return 'ri-volume-down-line';
} }
return 'ri-volume-up-line'; return 'ri-volume-up-line';
}); });
const volumeSlider = computed({ const volumeSlider = computed({
get: () => audioVolume.value * 100, get: () => playerStore.volume * 100,
set: (value) => { set: (value) => {
localStorage.setItem('volume', (value / 100).toString()); playerStore.setVolume(value / 100);
audioService.setVolume(value / 100);
audioVolume.value = value / 100;
} }
}); });

View File

@@ -411,6 +411,9 @@ export const usePlayerStore = defineStore('player', () => {
// 播放速度状态 // 播放速度状态
const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0'))); const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
// 音量状态管理
const volume = ref(parseFloat(getLocalStorageItem('volume', '1')));
// 清空播放列表 // 清空播放列表
const clearPlayAll = async () => { const clearPlayAll = async () => {
audioService.pause(); audioService.pause();
@@ -1439,6 +1442,35 @@ export const usePlayerStore = defineStore('player', () => {
} }
}; };
// 音量管理方法
const setVolume = (newVolume: number) => {
// 确保音量值在0-1范围内
const normalizedVolume = Math.max(0, Math.min(1, newVolume));
volume.value = normalizedVolume;
// 保存到localStorage
localStorage.setItem('volume', normalizedVolume.toString());
// 应用到音频服务
audioService.setVolume(normalizedVolume);
};
const getVolume = () => {
return volume.value;
};
const increaseVolume = (step: number = 0.1) => {
const newVolume = Math.min(1, volume.value + step);
setVolume(newVolume);
return newVolume;
};
const decreaseVolume = (step: number = 0.1) => {
const newVolume = Math.max(0, volume.value - step);
setVolume(newVolume);
return newVolume;
};
return { return {
play, play,
isPlay, isPlay,
@@ -1491,6 +1523,13 @@ export const usePlayerStore = defineStore('player', () => {
setPlayListDrawerVisible, setPlayListDrawerVisible,
handlePause, handlePause,
playbackRate, playbackRate,
setPlaybackRate setPlaybackRate,
// 音量管理
volume,
setVolume,
getVolume,
increaseVolume,
decreaseVolume
}; };
}); });

View File

@@ -96,11 +96,8 @@ export async function handleShortcutAction(action: string) {
showToast(t('player.playBar.next'), 'ri-skip-forward-line'); showToast(t('player.playBar.next'), 'ri-skip-forward-line');
break; break;
case 'volumeUp': case 'volumeUp':
// 从localStorage获取当前音量 if (playerStore.getVolume() < 1) {
const currentVolumeUp = parseFloat(localStorage.getItem('volume') || '1'); const newVolume = playerStore.increaseVolume(0.1);
if (currentVolumeUp < 1) {
const newVolume = Math.min(1, currentVolumeUp + 0.1);
await audioService.setVolume(newVolume);
showToast( showToast(
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`, `${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-up-line' 'ri-volume-up-line'
@@ -108,11 +105,8 @@ export async function handleShortcutAction(action: string) {
} }
break; break;
case 'volumeDown': case 'volumeDown':
// 从localStorage获取当前音量 if (playerStore.getVolume() > 0) {
const currentVolumeDown = parseFloat(localStorage.getItem('volume') || '1'); const newVolume = playerStore.decreaseVolume(0.1);
if (currentVolumeDown > 0) {
const newVolume = Math.max(0, currentVolumeDown - 0.1);
await audioService.setVolume(newVolume);
showToast( showToast(
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`, `${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-down-line' 'ri-volume-down-line'