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

src/components/MusicPanel/index.tsx

@@ -29,9 +29,8 @@ 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]"
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${!playing && 'hidden'}`}
           width={60}
           height={60}
           unoptimized
@@ -39,9 +38,8 @@ export default function MusicPanel(props: { musicInfo: ISong }) {
           alt="pause"
           onClick={togglePlay}
         />
-        ) : (
         <Image
-            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px]"
+          className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${playing && 'hidden'}`}
           width={60}
           height={60}
           unoptimized
@@ -49,7 +47,6 @@ export default function MusicPanel(props: { musicInfo: ISong }) {
           alt="play"
           onClick={togglePlay}
         />
-        )}
       </div>
 
       <div className="w-full mt-[20px]">