From 95af222da7d79bafe18cc4766334dad27fbaec65 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 23 May 2025 19:39:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E6=BB=9A=E8=BD=AE=E8=B0=83=E6=95=B4=E9=9F=B3=E9=87=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E5=B9=B6=E6=98=BE=E7=A4=BA=E9=9F=B3=E9=87=8F?=
 =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/player/PlayBar.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/player/PlayBar.vue b/src/renderer/components/player/PlayBar.vue
index e05a02e..e7d9dd5 100644
--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -96,11 +96,12 @@
       </div>
     </div>
     <div class="audio-button">
-      <div class="audio-volume custom-slider">
+      <div class="audio-volume custom-slider" @wheel.prevent="handleVolumeWheel">
         <div class="volume-icon" @click="mute">
           <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>
       </div>
@@ -276,6 +277,14 @@ const mute = () => {
   }
 };
 
+// 鼠标滚轮调整音量
+const handleVolumeWheel = (e: WheelEvent) => {
+  // 向上滚动增加音量，向下滚动减少音量
+  const delta = e.deltaY < 0 ? 5 : -5;
+  const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
+  volumeSlider.value = newValue;
+};
+
 // 播放模式
 const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
@@ -476,6 +485,12 @@ const openPlayListDrawer = () => {
     @apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl;
     @apply bg-light dark:bg-gray-800;
     @apply border border-gray-200 dark:border-gray-700;
+    
+    .volume-percentage {
+      @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-gray-800 px-2 py-1 rounded-md;
+      @apply border border-gray-200 dark:border-gray-700;
+      white-space: nowrap;
+    }
   }
 }