Skip to content

fix(PlayerBar): PlayerBar乱码导致播放器显示乱码 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
narutozxp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(PlayerBar): PlayerBar乱码导致播放器显示乱码 #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions src/components/layout/PlayerBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@

:class="isQueueOpen ? 'text-primary bg-primary/10' : 'text-white/50 hover:text-white hover:bg-white/5'"

title="鎾斁闃熷垪"
title="播放队列"

@click="toggleQueue"

Expand Down Expand Up @@ -152,7 +152,7 @@

:class="playMode === 'shuffle' ? 'text-primary bg-primary/10' : 'text-white/50 hover:text-white hover:bg-white/5'"

title="闅忔満鎾斁"
title="随机播放"

@click="toggleShuffleMode"

Expand Down Expand Up @@ -184,7 +184,7 @@

class="btn-play w-12 h-12 sm:w-14 sm:h-14 group"

title="鎾斁/鏆傚仠"
title="播放/暂停"

@click="handleTogglePlay"

Expand Down Expand Up @@ -232,7 +232,7 @@

:class="playMode === 'loop' || playMode === 'single' ? 'text-primary bg-primary/10' : 'text-white/50 hover:text-white hover:bg-white/5'"

title="寰幆鎾斁"
title="循环播放"

@click="toggleRepeatMode"

Expand Down Expand Up @@ -314,7 +314,7 @@

:class="isQueueOpen ? 'text-primary bg-primary/10' : 'text-white/50 hover:text-white hover:bg-white/5'"

title="鎾斁闃熷垪"
title="播放队列"

@click="toggleQueue"

Expand Down Expand Up @@ -454,25 +454,25 @@ const {



// 鏄惁宸插枩娆?
// 是否已喜欢

const isLiked = ref(false)



// 涔嬪墠鐨勯煶閲忥紙鐢ㄤ簬闈欓煶鍒囨崲锛?
// 之前的音量（用于静音切换）

const previousVolume = ref(0.7)



// 鎾斁闃熷垪鏄惁鎵撳紑
// 播放队列是否打开

const isQueueOpen = ref(false)



// 鎷栧姩鐘舵�?
// 拖动状态

const isDraggingProgress = ref(false)

Expand All @@ -486,7 +486,7 @@ const volumeBarRef = ref<HTMLElement | null>(null)



// 鏄剧ず鐨勮繘搴︼紙鎷栧姩鏃舵樉绀烘嫋鍔ㄨ繘搴︼紝鍚﹀垯鏄剧ず瀹為檯杩涘害锛?
// 显示的进度（拖动时显示拖动进度，否则显示实际进度）

const displayProgress = computed(() => {

Expand All @@ -496,7 +496,7 @@ const displayProgress = computed(() => {



// 闊抽噺鍥炬爣
// 音量图标

const volumeIcon = computed(() => {

Expand All @@ -512,7 +512,7 @@ const volumeIcon = computed(() => {



// 妫�鏌ュ綋鍓嶆瓕鏇叉槸鍚﹀凡鍠滄
// 检查当前歌曲是否已喜欢

const checkCurrentSongLiked = async () => {

Expand Down Expand Up @@ -542,7 +542,7 @@ const checkCurrentSongLiked = async () => {



// 鐩戝惉褰撳墠姝屾洸鍙樺寲
// 监听当前歌曲变化

watch(currentSong, () => {

Expand All @@ -552,7 +552,7 @@ watch(currentSong, () => {



// 鍒囨崲鍠滄鐘舵�?
// 切换喜欢状态

const toggleLike = async () => {

Expand All @@ -578,7 +578,7 @@ const toggleLike = async () => {



// 鎾斁/鏆傚仠
// 播放/暂停

const handleTogglePlay = () => {

Expand All @@ -588,7 +588,7 @@ const handleTogglePlay = () => {



// 涓婁竴棣?
// 上一首

const handlePrev = () => {

Expand All @@ -598,7 +598,7 @@ const handlePrev = () => {



// 涓嬩竴棣?
// 下一首

const handleNext = () => {

Expand All @@ -608,7 +608,7 @@ const handleNext = () => {



// 鍒囨崲寰幆妯″紡
// 切换循环模式

const toggleRepeatMode = () => {

Expand All @@ -624,7 +624,7 @@ const toggleRepeatMode = () => {



// 鍒囨崲闅忔満妯″紡
// 切换随机模式

const toggleShuffleMode = () => {

Expand All @@ -642,7 +642,7 @@ const toggleShuffleMode = () => {



// 鍒囨崲闈欓煶
// 切换静音

const toggleMute = () => {

Expand All @@ -662,7 +662,7 @@ const toggleMute = () => {



// 杩涘害鏉℃嫋鍔?
// 进度条拖动

const getClientX = (event: MouseEvent | TouchEvent) => {

Expand All @@ -680,7 +680,7 @@ const getClientX = (event: MouseEvent | TouchEvent) => {



// è???o|?????–???
// 进度条拖动开始

const startProgressDrag = (e: MouseEvent | TouchEvent) => {

Expand Down Expand Up @@ -712,7 +712,7 @@ const updateProgressFromEvent = (e: MouseEvent | TouchEvent) => {



// é?3é???????–???
// 音量条拖动开始

const startVolumeDrag = (e: MouseEvent | TouchEvent) => {

Expand Down Expand Up @@ -744,7 +744,7 @@ const updateVolumeFromEvent = (e: MouseEvent | TouchEvent) => {



// é?????/è§|??§?§???¨?’?é???”??¤????
// 拖动时处理指针移动（同时支持鼠标与触摸）

const handlePointerMove = (e: MouseEvent | TouchEvent) => {
const isDragging = isDraggingProgress.value || isDraggingVolume.value
Expand Down Expand Up @@ -788,7 +788,7 @@ const goToLyrics = () => {



// 鍒囨崲鎾斁闃熷垪
// 切换播放队列

const toggleQueue = () => {

Expand Down