fix: scroll 监听中调用 store，导致 Header 更新

src/components/AudioPlayer/PlayerBar.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
@@ -12,14 +12,14 @@ import useAudioStore from '@/store/audio';
 
 const PlayerBar = ({ className }: { className?: string }) => {
   const pathname = usePathname();
+  const [showBar, setShowbar] = useState<boolean>(false);
 
-  const { show, audioId, showCard, setShow, setShowCard } = useAudioStore(
+  const { audioId, showCard, setShowCard } = useAudioStore(
     useShallow((state) => {
       return {
-        show: state.show,
+        // show: state.show,
         audioId: state.audioId,
         showCard: state.showCard,
-        setShow: state.setShow,
         setShowCard: state.setShowCard,
       };
     }),
@@ -29,9 +29,9 @@ const PlayerBar = ({ className }: { className?: string }) => {
 
   function handleScroll() {
     clearInterval(timer);
-    setShow(false);
+    setShowbar(false);
     timer = setTimeout(() => {
-      setShow(true);
+      setShowbar(true);
     }, 800);
   }
 
@@ -58,7 +58,7 @@ const PlayerBar = ({ className }: { className?: string }) => {
       {/* 播放器 */}
       <div
         className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600"
-        style={{ bottom: (show && audioId) || showCard ? 0 : -130 }}
+        style={{ bottom: (showBar && audioId) || showCard ? 0 : -130 }}
       >
         <Player className="m-auto" onSwitchShowCard={() => setShowCard(!showCard)} />
       </div>