为区分静音状态，静音时音量条会变淡，调整音量条时将会取消静音

publish/changeLog.md

@@ -5,4 +5,4 @@
 ### 优化
 
 - 桌面歌词当前播放行改为上下居中
-- 为区分静音状态，静音时将不再显示音量条
+- 为区分静音状态，静音时音量条会变淡，调整音量条时将会取消静音

src/renderer/components/core/Player.vue

@@ -9,8 +9,8 @@ div(:class="$style.player")
       div(:class="$style.column1")
         div(:class="$style.container")
           div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}}
-          div(:class="$style.volumeContent" v-if="!setting.player.isMute")
-            div(:class="$style.volume")
+          div(:class="$style.volumeContent")
+            div(:class="[$style.volume, setting.player.isMute ? $style.muted : null]")
               div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
             div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :title="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
 
@@ -623,8 +623,9 @@ export default {
 
       this.volume = val
       this.volumeEvent.msDownVolume = val
-      // console.log(val)
       if (audio) audio.volume = this.volume
+
+      if (this.setting.player.isMute) this.setVolume(false)
     },
     handleSetVolumeMute() {
       audio.muted = !audio.muted
@@ -882,13 +883,17 @@ export default {
   border-radius: 10px;
   // overflow: hidden;
   transition: @transition-theme;
-  transition-property: background-color;
+  transition-property: background-color, opacity;
   background-color: @color-player-progress-bar1;
   // background-color: #f5f5f5;
   position: relative;
   border-radius: @radius-progress-border;
 }
 
+.muted {
+  opacity: .5;
+}
+
 .volume-bar {
   position: absolute;
   left: 0;
@@ -905,6 +910,7 @@ export default {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
+
 .volume-mask {
   position: absolute;
   top: 0;

src/renderer/views/Setting.vue

@@ -587,6 +587,9 @@ export default {
     'setting.player.mediaDeviceId'(n) {
       this.current_setting.player.mediaDeviceId = n
     },
+    'setting.player.isMute'(n) {
+      this.current_setting.player.isMute = n
+    },
     'current_setting.player.isShowTaskProgess'(n) {
       if (n) return
       this.$nextTick(() => {