update(PlayerCard): 更改路由时隐藏 PlayerCard

src/components/AudioPlayer/PlayerBar.tsx

@@ -2,6 +2,7 @@
 import { useEffect } from 'react';
 
 import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import Player from './Player';
@@ -10,6 +11,8 @@ import PlayerCard from './PlayerCard';
 import useAudioStore from '@/store/audio';
 
 const PlayerBar = ({ className }: { className?: string }) => {
+  const pathname = usePathname();
+
   const { show, audioId, showCard, setShow, setShowCard } = useAudioStore(
     useShallow((state) => {
       return {
@@ -22,10 +25,6 @@ const PlayerBar = ({ className }: { className?: string }) => {
     }),
   );
 
-  const handleSwitchShowCard = () => {
-    setShowCard(!showCard);
-  };
-
   let timer: NodeJS.Timeout;
 
   function handleScroll() {
@@ -36,8 +35,13 @@ const PlayerBar = ({ className }: { className?: string }) => {
     }, 800);
   }
 
+  useEffect(() => {
+    if (showCard) setShowCard(false);
+  }, [pathname]);
+
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
+
     return () => {
       window.removeEventListener('scroll', handleScroll);
       clearInterval(timer);
@@ -56,7 +60,7 @@ const PlayerBar = ({ className }: { className?: string }) => {
         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 }}
       >
-        <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
+        <Player className="m-auto" onSwitchShowCard={() => setShowCard(!showCard)} />
       </div>
       {/* 单曲卡片 */}
       <PlayerCard show={showCard} />