mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 02:07:29 +08:00
refactor(player): 提取播放栏共享逻辑为 composable
- 新增 useVolumeControl:统一音量管理(volumeSlider、mute、滚轮调节) - 新增 useFavorite:收藏状态与切换 - 新增 usePlaybackControl:播放/暂停、上/下一首 - PlayBar、MiniPlayBar、SimplePlayBar、MobilePlayBar 使用新 composable - 修复音量存储不一致:MiniPlayBar/SimplePlayBar 原先绕过 playerStore 直接操作 localStorage
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
/**
|
||||
* 统一的音量控制 composable
|
||||
* 通过 playerStore 管理音量,确保所有播放栏组件的音量状态一致
|
||||
*/
|
||||
export function useVolumeControl() {
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
/** 音量滑块值 (0-100) */
|
||||
const volumeSlider = computed({
|
||||
get: () => playerStore.volume * 100,
|
||||
set: (value: number) => {
|
||||
playerStore.setVolume(value / 100);
|
||||
}
|
||||
});
|
||||
|
||||
/** 音量图标 class */
|
||||
const volumeIcon = computed(() => {
|
||||
if (playerStore.volume === 0) return 'ri-volume-mute-line';
|
||||
if (playerStore.volume <= 0.5) return 'ri-volume-down-line';
|
||||
return 'ri-volume-up-line';
|
||||
});
|
||||
|
||||
/** 静音切换 (0 ↔ 30%) */
|
||||
const mute = () => {
|
||||
if (volumeSlider.value === 0) {
|
||||
volumeSlider.value = 30;
|
||||
} else {
|
||||
volumeSlider.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
/** 鼠标滚轮调整音量 ±5% */
|
||||
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;
|
||||
};
|
||||
|
||||
return {
|
||||
volumeSlider,
|
||||
volumeIcon,
|
||||
mute,
|
||||
handleVolumeWheel
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user