perf: 播放、暂停图标切换

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]"
+      <Image
-      width={60}
+        className={`w-[60px] h-[60px] absolute top-[-30px] right-[16px] ${!playing && 'hidden'}`}
-      height={60}
+        width={60}
-      unoptimized
+        height={60}
-      src={`/img/${playing ? 'icon_pause.png' : 'icon_play.png'}`}
+        unoptimized
-      alt="play_pause"
+        src="/img/icon_pause.png"
-      onClick={handleClick}
+        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}
+      />
+    </>
   );
 }

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
-          <Image
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${!playing && 'hidden'}`}
-            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px]"
+          width={60}
-            width={60}
+          height={60}
-            height={60}
+          unoptimized
-            unoptimized
+          src="/img/icon_pause_w.png"
-            src="/img/icon_pause_w.png"
+          alt="pause"
-            alt="pause"
+          onClick={togglePlay}
-            onClick={togglePlay}
+        />
-          />
+        <Image
-        ) : (
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${playing && 'hidden'}`}
-          <Image
+          width={60}
-            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px]"
+          height={60}
-            width={60}
+          unoptimized
-            height={60}
+          src="/img/icon_play_w.png"
-            unoptimized
+          alt="play"
-            src="/img/icon_play_w.png"
+          onClick={togglePlay}
-            alt="play"
+        />
-            onClick={togglePlay}
-          />
-        )}
       </div>
 
       <div className="w-full mt-[20px]">