Merge pull request #654 from chengww5217/fix/unmute-restore-volume

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

src/renderer/components/player/MiniPlayBar.vue

@@ -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();

src/renderer/components/player/PlayBar.vue

@@ -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;
+      }
     }
   }
 }

src/renderer/components/player/SimplePlayBar.vue

@@ -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);

src/renderer/hooks/useVolumeControl.ts

@@ -9,7 +9,10 @@ import { usePlayerStore } from '@/store/modules/player';
 export function useVolumeControl() {
   const playerStore = usePlayerStore();
 
-  /** 音量滑块值 (0-100) */
+  /** 是否静音 */
+  const isMuted = computed(() => playerStore.isMuted);
+
+  /** 音量滑块值 (0-100)，静音时仍展示原始音量 */
   const volumeSlider = computed({
     get: () => playerStore.volume * 100,
     set: (value: number) => {
@@ -19,21 +22,17 @@ export function useVolumeControl() {
 
   /** 音量图标 class */
   const volumeIcon = computed(() => {
-    if (playerStore.volume === 0) return 'ri-volume-mute-line';
+    if (playerStore.isMuted || playerStore.volume === 0) return 'ri-volume-mute-line';
     if (playerStore.volume <= 0.5) return 'ri-volume-down-line';
     return 'ri-volume-up-line';
   });
 
-  /** 静音切换 (0 ↔ 30%) */
+  /** 切换静音（保留静音前的音量） */
   const mute = () => {
-    if (volumeSlider.value === 0) {
-      volumeSlider.value = 30;
-    } else {
-      volumeSlider.value = 0;
-    }
+    playerStore.toggleMute();
   };
 
-  /** 鼠标滚轮调整音量 ±5% */
+  /** 鼠标滚轮调整音量 ±5%；静音时向上滚轮会自动解除静音 */
   const handleVolumeWheel = (e: WheelEvent) => {
     const delta = e.deltaY < 0 ? 5 : -5;
     const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
@@ -41,6 +40,7 @@ export function useVolumeControl() {
   };
 
   return {
+    isMuted,
     volumeSlider,
     volumeIcon,
     mute,

src/renderer/store/modules/player.ts

@@ -41,6 +41,7 @@ export const usePlayerStore = defineStore('player', () => {
     musicFull,
     playbackRate,
     volume,
+    isMuted,
     userPlayIntent,
     isFmPlaying
   } = storeToRefs(playerCore);
@@ -97,6 +98,7 @@ export const usePlayerStore = defineStore('player', () => {
     musicFull,
     playbackRate,
     volume,
+    isMuted,
     userPlayIntent,
     isFmPlaying,
 
@@ -113,6 +115,8 @@ export const usePlayerStore = defineStore('player', () => {
     getVolume: playerCore.getVolume,
     increaseVolume: playerCore.increaseVolume,
     decreaseVolume: playerCore.decreaseVolume,
+    setMuted: playerCore.setMuted,
+    toggleMute: playerCore.toggleMute,
     handlePause: playerCore.handlePause,
 
     // ========== 播放列表管理 (Playlist) ==========

src/renderer/store/modules/playerCore.ts

@@ -20,6 +20,7 @@ export const usePlayerCoreStore = defineStore(
     const musicFull = ref(false);
     const playbackRate = ref(1.0);
     const volume = ref(1);
+    const isMuted = ref(false);
     const userPlayIntent = ref(false); // 用户是否想要播放
     const isFmPlaying = ref(false); // 是否正在播放私人FM
 
@@ -65,7 +66,27 @@ export const usePlayerCoreStore = defineStore(
     const setVolume = (newVolume: number) => {
       const normalizedVolume = Math.max(0, Math.min(1, newVolume));
       volume.value = normalizedVolume;
-      audioService.setVolume(normalizedVolume);
+      // 用户调高音量时自动解除静音
+      if (isMuted.value && normalizedVolume > 0) {
+        isMuted.value = false;
+      }
+      audioService.setVolume(isMuted.value ? 0 : normalizedVolume);
+    };
+
+    /**
+     * 设置静音状态（不改变 volume，仅控制音频输出）
+     */
+    const setMuted = (value: boolean) => {
+      if (isMuted.value === value) return;
+      isMuted.value = value;
+      audioService.setVolume(isMuted.value ? 0 : volume.value);
+    };
+
+    /**
+     * 切换静音
+     */
+    const toggleMute = () => {
+      setMuted(!isMuted.value);
     };
 
     /**
@@ -169,6 +190,7 @@ export const usePlayerCoreStore = defineStore(
       musicFull,
       playbackRate,
       volume,
+      isMuted,
       userPlayIntent,
       isFmPlaying,
       audioOutputDeviceId,
@@ -187,6 +209,8 @@ export const usePlayerCoreStore = defineStore(
       getVolume,
       increaseVolume,
       decreaseVolume,
+      setMuted,
+      toggleMute,
       handlePause,
       refreshAudioDevices,
       setAudioOutputDevice,
@@ -197,7 +221,15 @@ export const usePlayerCoreStore = defineStore(
     persist: {
       key: 'player-core-store',
       storage: localStorage,
-      pick: ['playMusic', 'playMusicUrl', 'playbackRate', 'volume', 'isPlay', 'audioOutputDeviceId']
+      pick: [
+        'playMusic',
+        'playMusicUrl',
+        'playbackRate',
+        'volume',
+        'isMuted',
+        'isPlay',
+        'audioOutputDeviceId'
+      ]
     }
   }
 );