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>
<i
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()"
></i>
</template>
@@ -245,27 +245,22 @@ const formatTooltip = (value: number) => {
return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
};
// 音量条
const audioVolume = ref(
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
);
// 音量条 - 使用 playerStore 的统一音量管理
const getVolumeIcon = computed(() => {
// 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';
}
if (audioVolume.value <= 0.5) {
if (playerStore.volume <= 0.5) {
return 'ri-volume-down-line';
}
return 'ri-volume-up-line';
});
const volumeSlider = computed({
get: () => audioVolume.value * 100,
get: () => playerStore.volume * 100,
set: (value) => {
localStorage.setItem('volume', (value / 100).toString());
audioService.setVolume(value / 100);
audioVolume.value = value / 100;
playerStore.setVolume(value / 100);
}
});

View File

@@ -411,6 +411,9 @@ export const usePlayerStore = defineStore('player', () => {
// 播放速度状态
const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
// 音量状态管理
const volume = ref(parseFloat(getLocalStorageItem('volume', '1')));
// 清空播放列表
const clearPlayAll = async () => {
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 {
play,
isPlay,
@@ -1491,6 +1523,13 @@ export const usePlayerStore = defineStore('player', () => {
setPlayListDrawerVisible,
handlePause,
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');
break;
case 'volumeUp':
// 从localStorage获取当前音量
const currentVolumeUp = parseFloat(localStorage.getItem('volume') || '1');
if (currentVolumeUp < 1) {
const newVolume = Math.min(1, currentVolumeUp + 0.1);
await audioService.setVolume(newVolume);
if (playerStore.getVolume() < 1) {
const newVolume = playerStore.increaseVolume(0.1);
showToast(
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-up-line'
@@ -108,11 +105,8 @@ export async function handleShortcutAction(action: string) {
}
break;
case 'volumeDown':
// 从localStorage获取当前音量
const currentVolumeDown = parseFloat(localStorage.getItem('volume') || '1');
if (currentVolumeDown > 0) {
const newVolume = Math.max(0, currentVolumeDown - 0.1);
await audioService.setVolume(newVolume);
if (playerStore.getVolume() > 0) {
const newVolume = playerStore.decreaseVolume(0.1);
showToast(
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-down-line'