实现音量调节功能，添加音量控制相关逻辑和UI组件，并在songPlayer中应用持久化音量设置。更新backlog.md以反映音量调节功能的添加。

Author: coderDJing

backlog.md

@@ -19,6 +19,4 @@
 
 加AI，预测分类
 
-导入曲目的路径应该记住上一次的选择
-
-需要加一个音量调节的功能
+导入曲目的路径应该记住上一次的选择

src/renderer/src/components/playerControls.vue

@@ -6,6 +6,8 @@ import pause from '@renderer/assets/pause.png?asset'
 import fastForward from '@renderer/assets/fastForward.png?asset'
 import nextSong from '@renderer/assets/nextSong.png?asset'
 import more from '@renderer/assets/more.png?asset'
+import volumePng from '@renderer/assets/volume.png?asset'
+import volumeMutePng from '@renderer/assets/volumeMute.png?asset'
 import { ref, onUnmounted, watch, useTemplateRef, onMounted, computed } from 'vue'
 import { v4 as uuidV4 } from 'uuid'
 import { useRuntimeStore } from '@renderer/stores/runtime'
@@ -33,7 +35,8 @@ const emits = defineEmits([
   'delSong',
   'moveToLikeLibrary',
   'moveToListLibrary',
-  'exportTrack'
+  'exportTrack',
+  'setVolume'
 ])
 
 const setPlayingValue = (value: boolean) => {
@@ -129,6 +132,96 @@ const showInFileExplorer = () => {
   window.electron.ipcRenderer.send('show-item-in-folder', runtime.playingData.playingSong?.filePath)
 }
 
+// ---------------- 音量控制 ----------------
+const VOLUME_KEY = 'frkb_volume'
+const volume = ref(1)
+const lastNonZeroVolume = ref(1)
+const sliderHovering = ref(false)
+const iconHovering = ref(false)
+let draggingVolume = false
+const showVolumeSlider = computed(
+  () => iconHovering.value || sliderHovering.value || draggingVolume
+)
+
+const volumeIcon = computed(() => {
+  return volume.value <= 0 ? volumeMutePng : volumePng
+})
+
+const emitSetVolume = (val: number) => {
+  const v = Math.min(1, Math.max(0, val))
+  volume.value = v
+  if (v > 0) lastNonZeroVolume.value = v
+  emits('setVolume', v)
+  try {
+    localStorage.setItem(VOLUME_KEY, String(v))
+  } catch (_) {}
+}
+
+let justDragged = false
+const toggleMute = () => {
+  // 仅在拖动中或刚拖完的极短时间内抑制，其他情况立即切换
+  if (draggingVolume || justDragged) return
+  if (volume.value > 0) {
+    lastNonZeroVolume.value = volume.value
+    emitSetVolume(0)
+  } else {
+    const prev = Number.isFinite(lastNonZeroVolume.value as number)
+      ? (lastNonZeroVolume.value as number)
+      : 0
+    // 若历史非零音量过低(<10%)，按 10% 恢复，避免“体感几乎为 0”
+    const restore = prev > 0 ? Math.max(prev, 0.1) : 0.25
+    emitSetVolume(restore)
+  }
+}
+
+const volumeBarRef = useTemplateRef<HTMLDivElement>('volumeBarRef')
+const updateVolumeFromClientY = (clientY: number) => {
+  const el = volumeBarRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  if (!rect || rect.height <= 0) return
+  const ratio = 1 - (clientY - rect.top) / rect.height
+  emitSetVolume(ratio)
+}
+
+const handleBarMousedown = (e: MouseEvent) => {
+  draggingVolume = true
+  updateVolumeFromClientY(e.clientY)
+  document.addEventListener('mousemove', handleBarMousemove)
+  document.addEventListener('mouseup', handleBarMouseup)
+}
+const handleBarMousemove = (e: MouseEvent) => {
+  if (!draggingVolume) return
+  updateVolumeFromClientY(e.clientY)
+}
+const handleBarMouseup = () => {
+  draggingVolume = false
+  justDragged = true
+  setTimeout(() => {
+    justDragged = false
+  }, 150)
+  document.removeEventListener('mousemove', handleBarMousemove)
+  document.removeEventListener('mouseup', handleBarMouseup)
+}
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleBarMousemove)
+  document.removeEventListener('mouseup', handleBarMouseup)
+})
+
+// 初始化从 localStorage 读取音量（默认 0.8）并应用
+onMounted(() => {
+  try {
+    const s = localStorage.getItem(VOLUME_KEY)
+    let v = s !== null ? parseFloat(s) : NaN
+    if (!(v >= 0 && v <= 1)) v = 0.8
+    // 设置组件内部状态并通知父组件
+    volume.value = v
+    lastNonZeroVolume.value = v > 0 ? v : 0
+    emits('setVolume', v)
+  } catch (_) {}
+})
+
 // ---------------- 系统媒体会话（Media Session API）集成 ----------------
 // 目标：启用系统的 上一首/下一首/播放/暂停 按钮，并同步元数据和播放状态
 let artworkUrl: string = ''
@@ -296,6 +389,27 @@ onUnmounted(() => {
       <img :src="nextSong" draggable="false" />
     </div>
     <bubbleBox :dom="nextSongRef || undefined" :title="t('player.next')" shortcut="S" />
+    <!-- 音量按钮，与“下一首”同风格 -->
+    <div
+      class="buttonIcon volumeIcon"
+      @mouseenter="iconHovering = true"
+      @mouseleave="iconHovering = false"
+      style="position: relative"
+    >
+      <img :src="volumeIcon" draggable="false" @click.stop="toggleMute" />
+      <transition name="fade">
+        <div
+          v-if="showVolumeSlider"
+          class="volumePopover unselectable"
+          @mouseenter="sliderHovering = true"
+          @mouseleave="sliderHovering = false"
+        >
+          <div class="volumeBar" ref="volumeBarRef" @mousedown="handleBarMousedown">
+            <div class="volumeFill" :style="{ height: Math.round(volume * 100) + '%' }"></div>
+          </div>
+        </div>
+      </transition>
+    </div>
     <div class="buttonIcon" @click.stop="handelMoreClick()">
       <img :src="more" draggable="false" />
     </div>
@@ -393,10 +507,53 @@ onUnmounted(() => {
       filter: contrast(200%) drop-shadow(0px 0px 10px #fff);
     }
   }
+
+  // 仅移除音量图标的发光
+  .volumeIcon:hover {
+    filter: none;
+  }
 }
 
 img {
   width: 20px;
   height: 20px;
 }
+
+.volumePopover {
+  position: absolute;
+  bottom: 38px; // 更贴近图标，轻微重叠，避免鼠标经过间隙
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 120px;
+  background-color: #202020;
+  border: 1px solid #424242;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  z-index: 100;
+  // 确保浮层不受任何父级滤镜影响
+  filter: none;
+}
+
+.volumeBar {
+  position: relative;
+  width: 6px;
+  height: 100%;
+  background: #2e2e2e;
+  border-radius: 4px;
+  cursor: pointer;
+  filter: none;
+}
+
+.volumeFill {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #0078d4;
+  border-radius: 4px;
+}
 </style>

src/renderer/src/pages/modules/songPlayer/songPlayer.vue

@@ -331,6 +331,14 @@ onMounted(() => {
   }
   wavesurferInstance.value = createWaveSurferInstance(waveform.value)
 
+  // 应用持久化音量（默认 0.8）
+  try {
+    const s = localStorage.getItem('frkb_volume')
+    let v = s !== null ? parseFloat(s) : NaN
+    if (!(v >= 0 && v <= 1)) v = 0.8
+    wavesurferInstance.value.setVolume?.(v)
+  } catch (_) {}
+
   attachEventListeners(wavesurferInstance.value)
 
   window.electron.ipcRenderer.on(
@@ -344,7 +352,11 @@ onMounted(() => {
       // 验证此时UI显示的歌曲与返回的文件路径是否匹配
       if (filePath === runtime.playingData.playingSong?.filePath) {
         const name = (filePath?.match(/[^\\/]+$/) || [])[0] || 'unknown'
-        handleLoadBlob(new Blob([audioData]), filePath, requestId || currentLoadRequestId.value)
+        const ab = audioData.buffer.slice(
+          audioData.byteOffset,
+          audioData.byteOffset + audioData.byteLength
+        ) as ArrayBuffer
+        handleLoadBlob(new Blob([ab]), filePath, requestId || currentLoadRequestId.value)
       } else {
         const name = (filePath?.match(/[^\\/]+$/) || [])[0] || 'unknown'
         const cur = runtime.playingData.playingSong?.filePath || 'N/A'
@@ -363,7 +375,11 @@ onMounted(() => {
         return
       }
 
-      const blob = new Blob([audioData])
+      const ab = audioData.buffer.slice(
+        audioData.byteOffset,
+        audioData.byteOffset + audioData.byteLength
+      ) as ArrayBuffer
+      const blob = new Blob([ab])
       preloadedBlob.value = blob
 
       try {
@@ -979,6 +995,13 @@ watch(
         @moveToListLibrary="(song) => playerActions.moveToListLibrary(song)"
         @moveToLikeLibrary="(song) => playerActions.moveToLikeLibrary(song)"
         @exportTrack="playerActions.exportTrack"
+        @setVolume="
+          (v) => {
+            try {
+              wavesurferInstance?.setVolume?.(v)
+            } catch (_) {}
+          }
+        "
       />
     </div>