From 282af70b74c64702c0adcb6b6b27d86e4eb096a1 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 4 Jun 2025 22:29:22 +1000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=BF=E6=8D=A2=E9=9F=B3=E9=A2=91?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E6=95=88=E6=9E=9C=E4=B8=BA=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Player.vue: 播放状态显示暂停图标而非可视化效果
- PlayQueueItem.vue: 当前播放项显示音波图标并带脉冲动画
- 创建新的 soundwave.vue 图标用于播放指示
- 避免在不支持的浏览器上显示空白或错误

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/assets/icons/soundwave.vue   | 15 +++++++++++++++
 src/components/PlayQueueItem.vue |  8 ++------
 src/components/Player.vue        |  8 ++------
 3 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icons/soundwave.vue

diff --git a/src/assets/icons/soundwave.vue b/src/assets/icons/soundwave.vue
new file mode 100644
index 0000000..8f2336d
--- /dev/null
+++ b/src/assets/icons/soundwave.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<rect x="3" y="9" width="2" height="6" rx="1"></rect>
+		<rect x="7" y="5" width="2" height="14" rx="1"></rect>
+		<rect x="11" y="7" width="2" height="10" rx="1"></rect>
+		<rect x="15" y="4" width="2" height="16" rx="1"></rect>
+		<rect x="19" y="10" width="2" height="4" rx="1"></rect>
+	</svg>
+</template>
\ No newline at end of file
diff --git a/src/components/PlayQueueItem.vue b/src/components/PlayQueueItem.vue
index c15bf70..85ee912 100644
--- a/src/components/PlayQueueItem.vue
+++ b/src/components/PlayQueueItem.vue
@@ -5,6 +5,7 @@ import { artistsOrganize } from '../utils'
 import XIcon from '../assets/icons/x.vue'
 import UpHyphenIcon from '../assets/icons/uphypen.vue'
 import DownHyphenIcon from '../assets/icons/downhyphen.vue'
+import SoundwaveIcon from '../assets/icons/soundwave.vue'
 
 import { ref } from 'vue'
 
@@ -156,12 +157,7 @@ function removeItem() {
 				<img :src="queueItem.album?.coverUrl" />
 				<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/75 flex justify-center items-center"
 					v-if="isCurrent">
-					<div style="height: 1rem;" class="flex justify-center items-center gap-[.125rem]">
-						<div class="bg-white w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
-							:key="index" :style="{
-								height: `${Math.max(10, bar)}%`
-							}" />
-					</div>
+					<SoundwaveIcon :size="6" class="text-white animate-pulse" />
 				</div>
 			</div>
 			<div class="flex flex-col text-left flex-auto w-0">
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 3ecfeec..ce7c178 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -7,6 +7,7 @@ import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 
 import LoadingIndicator from '../assets/icons/loadingindicator.vue'
 import PlayIcon from '../assets/icons/play.vue'
+import PauseIcon from '../assets/icons/pause.vue'
 import { audioVisualizer, checkAndRefreshSongResource, supportsWebAudioVisualization } from '../utils'
 
 const playQueueStore = usePlayQueueStore()
@@ -518,12 +519,7 @@ setInterval(syncVolumeFromStorage, 100)
 			}">
 				<div v-if="playQueueStore.isPlaying">
 					<LoadingIndicator v-if="playQueueStore.isBuffering === true" :size="4" />
-					<div v-else class="h-4 flex justify-center items-center gap-[.125rem]">
-						<div class="bg-white/75 w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
-							:key="index" :style="{
-								height: `${Math.max(10, bar)}%`
-							}" />
-					</div>
+					<PauseIcon v-else :size="4" />
 				</div>
 				<PlayIcon v-else :size="4" />
 			</button>