feat: Add "Volume Control" to Lyrics Page (#1672)

* feat: Add "Volume Control" to Lyrics Page

* fix: fix mute button

src/views/lyrics.vue

@@ -76,6 +76,29 @@
                   </span>
                 </div>
               </div>
+              <div class="top-right">
+                <div class="volume-control">
+                  <button-icon :title="$t('player.mute')" @click.native="mute">
+                    <svg-icon v-show="volume > 0.5" icon-class="volume" />
+                    <svg-icon v-show="volume === 0" icon-class="volume-mute" />
+                    <svg-icon
+                      v-show="volume <= 0.5 && volume !== 0"
+                      icon-class="volume-half"
+                    />
+                  </button-icon>
+                  <div class="volume-bar">
+                    <vue-slider
+                      v-model="volume"
+                      :min="0"
+                      :max="1"
+                      :interval="0.01"
+                      :drag-on-click="true"
+                      :duration="0"
+                      tooltip="none"
+                      :dot-size="12"
+                    ></vue-slider>
+                  </div>
+                </div>
                 <div class="buttons">
                   <button-icon
                     :title="$t('player.like')"
@@ -98,6 +121,7 @@
                   /></button-icon> -->
                 </div>
               </div>
+            </div>
             <div class="progress-bar">
               <span>{{ formatTrackTime(player.progress) || '0:00' }}</span>
               <div class="slider">
@@ -260,6 +284,14 @@ export default {
     currentTrack() {
       return this.player.currentTrack;
     },
+    volume: {
+      get() {
+        return this.player.volume;
+      },
+      set(value) {
+        this.player.volume = value;
+      },
+    },
     imageUrl() {
       return this.player.currentTrack?.al?.picUrl + '?param=1024y1024';
     },
@@ -474,6 +506,9 @@ export default {
     getListPath() {
       return getListSourcePath();
     },
+    mute() {
+      this.player.mute();
+    },
   },
 };
 </script>
@@ -591,6 +626,19 @@ export default {
       display: flex;
       justify-content: space-between;
 
+      .top-right {
+        display: flex;
+        justify-content: space-between;
+
+        .volume-control {
+          margin: 0 10px;
+          display: flex;
+          align-items: center;
+          .volume-bar {
+            width: 84px;
+          }
+        }
+
         .buttons {
           display: flex;
           align-items: center;
@@ -605,6 +653,7 @@ export default {
           }
         }
       }
+    }
 
     .progress-bar {
       margin-top: 22px;