fix(player): 静音保留原音量,解除后可恢复

- playerCore 新增持久化 isMuted 状态及 setMuted/toggleMute,静音时音频输出置 0 但 volume 保持不变
- 音量 > 0 时自动解除静音
- useVolumeControl 移除原 0↔30 切换;滑块/百分比展示真实音量,图标反映静音态
- 三个播放栏的音量滑块在静音时 disabled;PlayBar 百分比文字同步置灰(仅文字颜色)
This commit is contained in:
chengww
2026-04-26 21:47:11 +08:00
parent 97220761cf
commit 2b1024ca24
6 changed files with 84 additions and 16 deletions
@@ -69,6 +69,7 @@
v-model:value="volumeSlider"
:step="0.01"
:tooltip="false"
:disabled="isMuted"
vertical
@wheel.prevent="handleVolumeWheel"
></n-slider>
@@ -145,7 +146,13 @@ const { navigateToArtist } = useArtist();
const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();
// 音量控制(统一通过 playerStore 管理)
const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();
const {
isMuted,
volumeSlider,
volumeIcon: getVolumeIcon,
mute,
handleVolumeWheel
} = useVolumeControl();
// 收藏
const { isFavorite, toggleFavorite } = useFavorite();
+21 -3
View File
@@ -99,8 +99,16 @@
<i class="iconfont" :class="getVolumeIcon"></i>
</div>
<div class="volume-slider">
<div class="volume-percentage">{{ Math.round(volumeSlider) }}%</div>
<n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false" vertical></n-slider>
<div class="volume-percentage" :class="{ 'volume-percentage-disabled': isMuted }">
{{ Math.round(volumeSlider) }}%
</div>
<n-slider
v-model:value="volumeSlider"
:step="0.01"
:tooltip="false"
:disabled="isMuted"
vertical
></n-slider>
</div>
</div>
<n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
@@ -198,7 +206,13 @@ const { t } = useI18n();
const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();
// 音量控制
const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();
const {
isMuted,
volumeSlider,
volumeIcon: getVolumeIcon,
mute,
handleVolumeWheel
} = useVolumeControl();
// 收藏
const { isFavorite, toggleFavorite } = useFavorite();
@@ -382,6 +396,10 @@ const openPlayListDrawer = () => {
@apply border border-gray-200 dark:border-gray-700;
@apply text-gray-800 dark:text-white;
white-space: nowrap;
&.volume-percentage-disabled {
@apply text-gray-400 dark:text-gray-500;
}
}
}
}
@@ -68,6 +68,7 @@
v-model:value="volumeSlider"
:step="1"
:tooltip="false"
:disabled="isMuted"
@wheel.prevent="handleVolumeWheel"
></n-slider>
</div>
@@ -107,7 +108,13 @@ const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackC
const { playMode, playModeIcon, togglePlayMode } = usePlayMode();
// 音量控制(统一通过 playerStore 管理)
const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();
const {
isMuted,
volumeSlider,
volumeIcon: getVolumeIcon,
mute,
handleVolumeWheel
} = useVolumeControl();
// 进度条控制
const isDragging = ref(false);