update(Audio Player): 播放器展示/隐藏

src/components/AudioPlayer/PlayerBar.tsx

@@ -1,6 +1,5 @@
 'use client';
-// import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
-import { useEffect } from 'react';
 
 import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/react/shallow';
@@ -11,13 +10,15 @@ import PlayerCard from './PlayerCard';
 import useAudioStore from '@/store/audio';
 
 const PlayerBar = ({ className }: { className?: string }) => {
-  const { audioId, order, playQueue, showCard, switchSongByDiff, setOrder, setShowCard } = useAudioStore(
+  const { show, audioId, order, playQueue, showCard, setShow, setOrder, setShowCard } = useAudioStore(
     useShallow((state) => {
       return {
+        show: state.show,
         audioId: state.audioId,
         order: state.order,
         playQueue: state.playQueue,
         showCard: state.showCard,
+        setShow: state.setShow,
         setOrder: state.setOrder,
         switchSongByDiff: state.switchSongByDiff,
         setShowCard: state.setShowCard,
@@ -29,35 +30,23 @@ const PlayerBar = ({ className }: { className?: string }) => {
     setShowCard(!showCard);
   };
 
-  // let oldScrollY: number = 0;
+  let timer: NodeJS.Timeout;
-  // function handleScroll() {
-  //   if (window.scrollY > oldScrollY) {
-  //     // 向下滚动
-  //     // if (oldScrollY < 0) return;
-  //     setPositionBottom(-130);
-  //   } else {
-  //     // 向上滚动
-  //     // if (oldScrollY > 0) return;
-  //     setPositionBottom(0);
-  //   }
-  //   oldScrollY = window.scrollY;
-  // }
 
-  useEffect(() => {
+  function handleScroll() {
-    // window.addEventListener('scroll', handleScroll);
+    clearInterval(timer);
-    // return () => {
+    setShow(false);
-    //   window.removeEventListener('scroll', handleScroll);
+    timer = setTimeout(() => {
-    // };
+      setShow(true);
-  }, []);
+    }, 800);
+  }
 
   useEffect(() => {
-    // window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll);
-    // return () => {
+    return () => {
-    //   window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('scroll', handleScroll);
-    // };
+      clearInterval(timer);
-  });
+    };
-
+  }, []);
-  // const [positionBottom, setPositionBottom] = useState<number>(0);
 
   return (
     // 注释为高斯模糊效果
@@ -65,12 +54,12 @@ const PlayerBar = ({ className }: { className?: string }) => {
     //   className={`fixed w-[100vw] h-[130px] bg-[#000] bg-opacity-50 shadow-lg shadow-black-[0_0_10px] z-10 ${className} backdrop-blur-[4px]`}
     //   style={{ bottom: 0 }}
     // >
+    <div className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 ${className}`}>
+      {/* 播放器 */}
       <div
-      className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 ${className}`}
+        className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg z-10 transition-bottom duration-600"
-      style={{ bottom: 0 }}
+        style={{ bottom: show && audioId ? 0 : -130 }}
       >
-      {/* 播放器 */}
-      <div className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] z-10">
         <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
       </div>
       {/* 单曲卡片 */}

src/components/Header/HeaderAvatar.tsx

@@ -20,7 +20,7 @@ export default function HeaderAvatar({ className }: { className?: string }) {
     <div className={`${className}`}>
       <HoverCard>
         <HoverCardTrigger>
-          <Avatar className="h-[36px] w-[36px] ml-[40px] cursor-pointer">
+          <Avatar className="h-[36px] w-[36px] cursor-pointer">
             <AvatarImage src={userInfo.avatar} alt="avatar" />
             <AvatarFallback>我</AvatarFallback>
           </Avatar>

src/components/Header/index.tsx

@@ -51,10 +51,10 @@ export default function Header() {
 
           {/* 登录按钮/头像 */}
           {!!userInfo.id ? (
-            <HeaderAvatar />
+            <HeaderAvatar className="ml-[40px]" />
           ) : (
             <button
-              className="w-[74px] h-[36px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
+              className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
               onClick={() => setShowLogin(true)}
             >
               登录