🔧 chore: 修改 MiniPlayBar 组件，调整音量滑块的样式和交互方式，优化悬停效果

algerkong · algerkong · commit 31ea3b7e0aa2 · 2025-05-10T21:25:40.000+08:00
diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue
@@ -52,13 +52,13 @@
           ></i>
         </div>
 
-        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
+        <n-popover trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
           <template #trigger>
             <div class="function-button" @click="mute">
               <i class="iconfont" :class="getVolumeIcon"></i>
             </div>
           </template>
-          <div class="volume-slider-wrapper">
+          <div class="volume-slider-wrapper transparent-popover">
             <n-slider
               v-model:value="volumeSlider"
               :step="0.01"
@@ -459,7 +459,7 @@ const setMusicFull = () => {
 }
 
 .control-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
   width: 32px;
   height: 32px;
 
@@ -484,10 +484,9 @@ const setMusicFull = () => {
 }
 
 .function-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
   width: 32px;
   height: 32px;
-  color: var(--text-color-2, #666);
 
   &:hover {
     @apply bg-gray-100 dark:bg-dark-300;
@@ -546,8 +545,7 @@ const setMusicFull = () => {
 }
 
 .volume-slider-wrapper {
-  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
-  width: 40px;
+  @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
   height: 160px;
 }
 
@@ -608,4 +606,8 @@ const setMusicFull = () => {
     }
   }
 }
+
+:deep(.n-popover){
+  background-color: transparent !important;
+}
 </style>
