修复音量条在调整音量时实际音量与显示的数值不一致的问题（#2606）

publish/changeLog.md

@@ -1,31 +1,6 @@
 我们很高兴地宣布新项目 Any Listen 的桌面版已发布，目前已支持列表跟随本地文件自动更新、加载并播放WebDAV上的歌曲等功能，更多功能仍在积极开发中，桌面版与Web版将同步更新。
 对于有播放本地音乐或播放服务器上音乐需求的人可以试试，若遇到任何问题可以发 issue 反馈。
 
-### 新增
-
-- 新增「设置 → 其他设置 → 主窗口使用软件内置的圆角及阴影」选项 (#2360)
-  *默认启用，关闭后将使用系统原生的窗口样式，该选项重启软件后生效*
-- 开放 API 新增播放器声音大小、静音、播放进度控制、完整歌词获取，详情看接入文档 (#2386)
-- 新增「设置 → 播放设置 → 调换歌词翻译与歌词罗马音位置」选项，默认关闭 (#2451)
-- 新增启动参数 `-hidden`，在启动时将软件最小化到系统托盘 (#2459)
-- 新增 Any Listen 歌词（用于支持已下载歌曲的歌词逐字播放）标签数据读取与播放 (#2485)
-- 新增 Any Listen 歌词（包含逐字歌词、翻译、罗马音歌词，如果有）嵌入与下载，默认启用
-- 下载列表菜单新增歌曲添加弹窗，允许将所选歌曲的在线版本添加到收藏列表 (#2537)
-
 ### 修复
 
-- 尝试修复进度为0时仍然显示下载完成的问题 (#2471)
+- 修复音量条在调整音量时实际音量与显示的数值不一致的问题（#2606）
-- 修复TX源搜索失败 (#2575 @Folltoshe)
-- 修复MG源歌单加载失败
-- 修复MG源评论加载失败
-
-### 变更
-
-- 调换「歌词翻译」与「歌词罗马音」的位置，现在歌词罗马音在歌词翻译的上方展示
-  *若你想要恢复以前的行为，可以开启「调换歌词翻译与歌词罗马音位置」选项*
-- 更新代理配置规则，现在不启用代理时，图片、音频加载将不再走系统代理 (#2382 @Folltoshe)
-- 字体设置可以最多设置两种字体（[any-listen#82](https://github.com/any-listen/any-listen/issues/82)）
-
-### 其他
-
-- 更新 Electron 到 37.6.0

src/renderer/components/base/SliderBar.vue

@@ -29,6 +29,10 @@ export default {
       type: Number,
       required: true,
     },
+    step: {
+      type: Number,
+      default: 1,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -39,33 +43,51 @@ export default {
     const sliderEvent = {
       isMsDown: false,
       msDownX: 0,
-      msDownValue: 0,
+      msDownRatio: 0,
     }
     const dom_sliderBar = ref(null)
 
+    const clampValue = val => {
+      if (val < props.min) return props.min
+      if (val > props.max) return props.max
+      return val
+    }
+    const getSteppedValue = val => {
+      const step = props.step > 0 ? props.step : 1
+      const stepped = Math.round((val - props.min) / step) * step + props.min
+      return clampValue(Number(stepped.toFixed(10)))
+    }
+    const getSliderWidth = () => dom_sliderBar.value?.clientWidth || 0
+    const getRange = () => props.max - props.min
+    const emitSteppedValue = rawValue => {
+      const value = getSteppedValue(rawValue)
+      emit('change', value)
+      return value
+    }
+
     const handleSliderMsDown = event => {
       if (props.disabled) return
+      const width = getSliderWidth()
+      if (!width) return
 
       sliderEvent.isMsDown = true
       sliderEvent.msDownX = event.clientX
 
-      sliderEvent.msDownValue = event.offsetX / dom_sliderBar.value.clientWidth
+      const rawValue = (event.offsetX / width) * getRange() + props.min
-      let val = sliderEvent.msDownValue * (props.max - props.min) + props.min
+      const value = emitSteppedValue(rawValue)
-      if (val < props.min) val = props.min
+      sliderEvent.msDownRatio = getRange() === 0 ? 0 : (value - props.min) / getRange()
-      if (val > props.max) val = props.max
-      emit('change', val)
-
-      // if (isMute.value) window.app_event.setSliderIsMute(false)
     }
     const handleSliderMsUp = () => {
       sliderEvent.isMsDown = false
     }
     const handleSliderMsMove = event => {
       if (!sliderEvent.isMsDown || props.disabled) return
-      let value = (sliderEvent.msDownValue + (event.clientX - sliderEvent.msDownX) / dom_sliderBar.value.clientWidth) * (props.max - props.min) + props.min
+      const width = getSliderWidth()
-      if (value > props.max) value = props.max
+      if (!width) return
-      else if (value < props.min) value = props.min
+
-      emit('change', value)
+      const ratio = sliderEvent.msDownRatio + (event.clientX - sliderEvent.msDownX) / width
+      const rawValue = ratio * getRange() + props.min
+      emitSteppedValue(rawValue)
     }
 
     document.addEventListener('mousemove', handleSliderMsMove)

src/renderer/components/common/VolumeBtn.vue

@@ -16,7 +16,7 @@
             @update:model-value="saveVolumeIsMute($event)"
           />
         </div>
-        <base-slider-bar :class="$style.slider" :value="volume" :min="0" :max="1" @change="handleUpdateVolume" />
+        <base-slider-bar :class="$style.slider" :value="volume" :min="0" :max="1" :step="0.01" @change="handleUpdateVolume" />
       </div>
     </template>
   </material-popup-btn>