From 28d65a2dd709d20ceeb57e0fda27fcfa985c4497 Mon Sep 17 00:00:00 2001
From: fadeaway <chaofanchi@gmail.com>
Date: Mon, 25 Mar 2024 22:20:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=92=AD=E6=94=BE=E3=80=81=E6=9A=82?=
 =?UTF-8?q?=E5=81=9C=E5=9B=BE=E6=A0=87=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalAudioCtrlBtn/index.tsx | 29 ++++++++++-----
 src/components/MusicPanel/index.tsx          | 39 +++++++++-----------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/components/JournalAudioCtrlBtn/index.tsx b/src/components/JournalAudioCtrlBtn/index.tsx
index b0f6b9d..c1d3cd6 100644
--- a/src/components/JournalAudioCtrlBtn/index.tsx
+++ b/src/components/JournalAudioCtrlBtn/index.tsx
@@ -23,14 +23,25 @@ export default function JournalAudioCtrlBtn() {
   }, [curSong?.src, playing, audioPlayer?.audio]);
 
   return (
-    <Image
-      className="w-[60px] h-[60px] absolute top-[-30px] right-[16px]"
-      width={60}
-      height={60}
-      unoptimized
-      src={`/img/${playing ? 'icon_pause.png' : 'icon_play.png'}`}
-      alt="play_pause"
-      onClick={handleClick}
-    />
+    <>
+      <Image
+        className={`w-[60px] h-[60px] absolute top-[-30px] right-[16px] ${!playing && 'hidden'}`}
+        width={60}
+        height={60}
+        unoptimized
+        src="/img/icon_pause.png"
+        alt="play_pause"
+        onClick={handleClick}
+      />
+      <Image
+        className={`w-[60px] h-[60px] absolute top-[-30px] right-[16px] ${playing && 'hidden'}`}
+        width={60}
+        height={60}
+        unoptimized
+        src="/img/icon_play.png"
+        alt="play_pause"
+        onClick={handleClick}
+      />
+    </>
   );
 }
diff --git a/src/components/MusicPanel/index.tsx b/src/components/MusicPanel/index.tsx
index 5f03875..b391be5 100644
--- a/src/components/MusicPanel/index.tsx
+++ b/src/components/MusicPanel/index.tsx
@@ -29,27 +29,24 @@ export default function MusicPanel(props: { musicInfo: ISong }) {
     <>
       <div className="relative w-[100%] aspect-square mt-[12px]">
         <Image className="rounded-[6px] object-cover" unoptimized fill src={musicInfo?.pic} alt="cover" />
-        {playing ? (
-          <Image
-            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px]"
-            width={60}
-            height={60}
-            unoptimized
-            src="/img/icon_pause_w.png"
-            alt="pause"
-            onClick={togglePlay}
-          />
-        ) : (
-          <Image
-            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px]"
-            width={60}
-            height={60}
-            unoptimized
-            src="/img/icon_play_w.png"
-            alt="play"
-            onClick={togglePlay}
-          />
-        )}
+        <Image
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${!playing && 'hidden'}`}
+          width={60}
+          height={60}
+          unoptimized
+          src="/img/icon_pause_w.png"
+          alt="pause"
+          onClick={togglePlay}
+        />
+        <Image
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${playing && 'hidden'}`}
+          width={60}
+          height={60}
+          unoptimized
+          src="/img/icon_play_w.png"
+          alt="play"
+          onClick={togglePlay}
+        />
       </div>
 
       <div className="w-full mt-[20px]">