feat: 添加mini播放栏鼠标滚轮调整音量 并优化音量滑块数字不展示问题

algerkong · algerkong · commit 5c7278544a32 · 2025-05-28T21:58:32.000+08:00
diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue
@@ -54,7 +54,7 @@
 
         <n-popover v-if="component" trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
           <template #trigger>
-            <div class="function-button" @click="mute">
+            <div class="function-button" @click="mute" @wheel.prevent="handleVolumeWheel">
               <i class="iconfont" :class="getVolumeIcon"></i>
             </div>
           </template>
@@ -64,6 +64,7 @@
               :step="0.01"
               :tooltip="false"
               vertical
+              @wheel.prevent="handleVolumeWheel"
             ></n-slider>
           </div>
         </n-popover>
@@ -183,6 +184,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 isFavorite = computed(() => {
   // 对于B站视频，使用ID匹配函数
@@ -529,6 +538,50 @@ const setMusicFull = () => {
 .volume-slider-wrapper {
   @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
   height: 160px;
+  
+  :deep(.n-slider) {
+    --n-rail-height: 4px;
+    --n-rail-color: theme('colors.gray.200');
+    --n-rail-color-dark: theme('colors.gray.700');
+    --n-fill-color: theme('colors.green.500');
+    --n-handle-size: 12px;
+    --n-handle-color: theme('colors.green.500');
+
+    &.n-slider--vertical {
+      height: 100%;
+
+      .n-slider-rail {
+        width: 4px;
+      }
+
+      &:hover {
+        .n-slider-rail {
+          width: 6px;
+        }
+
+        .n-slider-handle {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .n-slider-rail {
+      @apply overflow-hidden transition-all duration-200;
+      @apply bg-gray-500 dark:bg-dark-300 bg-opacity-10 !important;
+    }
+
+    .n-slider-handle {
+      @apply transition-all duration-200;
+      opacity: 0;
+    }
+
+    &:hover {
+      .n-slider-handle {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 // 播放列表样式
diff --git a/src/renderer/components/player/PlayBar.vue b/src/renderer/components/player/PlayBar.vue
@@ -483,12 +483,13 @@ const openPlayListDrawer = () => {
 
   .volume-slider {
     @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 bg-light dark:bg-dark-200;
     @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 absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-dark-200 px-2 py-1 rounded-md;
       @apply border border-gray-200 dark:border-gray-700;
+      @apply text-gray-800 dark:text-white;
       white-space: nowrap;
     }
   }
@@ -597,7 +598,7 @@ const openPlayListDrawer = () => {
 
     // 确保悬停时提示样式正确
     .n-slider-tooltip {
-      @apply bg-gray-800 text-white text-xs py-1 px-2 rounded;
+      @apply bg-dark-200 text-white text-xs py-1 px-2 rounded;
       z-index: 999999;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -483,12 +483,13 @@ const openPlayListDrawer = () => {`
`483`	`483`
`484`	`484`	`.volume-slider {`
`485`	`485`	`@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;`
`486`		`- @apply bg-light dark:bg-gray-800;`
	`486`	`+ @apply bg-light dark:bg-dark-200;`
`487`	`487`	`@apply border border-gray-200 dark:border-gray-700;`
`488`	`488`
`489`	`489`	`.volume-percentage {`
`490`		`- @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;`
	`490`	`+ @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-dark-200 px-2 py-1 rounded-md;`
`491`	`491`	`@apply border border-gray-200 dark:border-gray-700;`
	`492`	`+ @apply text-gray-800 dark:text-white;`
`492`	`493`	`white-space: nowrap;`
`493`	`494`	`}`
`494`	`495`	`}`
`@@ -597,7 +598,7 @@ const openPlayListDrawer = () => {`
`597`	`598`
`598`	`599`	`// 确保悬停时提示样式正确`
`599`	`600`	`.n-slider-tooltip {`
`600`		`- @apply bg-gray-800 text-white text-xs py-1 px-2 rounded;`
	`601`	`+ @apply bg-dark-200 text-white text-xs py-1 px-2 rounded;`
`601`	`602`	`z-index: 999999;`
`602`	`603`	`}`
`603`	`604`	`}`