feat(component): Single Card.

src/components/AudioPlayer/Player.tsx

@@ -11,15 +11,23 @@ import PlayerControl from './PlayerControl';
 
 import useAudioStore from '@/store/audio';
 
-export default function AudioPlayer({ className }: { className?: string }) {
-  const { audioId, order, playQueue, switchSongByDiff, setOrder } = useAudioStore(
+export default function AudioPlayer({
+  className,
+  onSwitchShowCard,
+}: {
+  className?: string;
+  onSwitchShowCard: () => void;
+}) {
+  const { audioId, order, playQueue, showCard, switchSongByDiff, setOrder, setShowCard } = useAudioStore(
     useShallow((state) => {
       return {
         audioId: state.audioId,
         order: state.order,
         playQueue: state.playQueue,
+        showCard: state.showCard,
         setOrder: state.setOrder,
         switchSongByDiff: state.switchSongByDiff,
+        setShowCard: state.setShowCard,
       };
     }),
   );
@@ -127,6 +135,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
       order={order}
       audio={audio}
       duration={duration}
+      showCard={showCard}
       onPlay={handlePlay}
       onPrev={() => handleSwitchAudio(-1)}
       onNext={() => handleSwitchAudio(1)}
@@ -134,6 +143,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
       className={className}
       trackProgress={trackProgress}
       onChangeProgress={handleChangeProgress}
+      onSwitchShowCard={onSwitchShowCard}
     />
   );
 }

src/components/AudioPlayer/PlayerBar.tsx

@@ -3,12 +3,32 @@
 import { useEffect } from 'react';
 
 import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/react/shallow';
 
 import Player from './Player';
+import PlayerCard from './PlayerCard';
 
-// import { debounce } from 'lodash';
+import useAudioStore from '@/store/audio';
 
 const PlayerBar = ({ className }: { className?: string }) => {
+  const { audioId, order, playQueue, showCard, switchSongByDiff, setOrder, setShowCard } = useAudioStore(
+    useShallow((state) => {
+      return {
+        audioId: state.audioId,
+        order: state.order,
+        playQueue: state.playQueue,
+        showCard: state.showCard,
+        setOrder: state.setOrder,
+        switchSongByDiff: state.switchSongByDiff,
+        setShowCard: state.setShowCard,
+      };
+    }),
+  );
+
+  const handleSwitchShowCard = () => {
+    setShowCard(!showCard);
+  };
+
   // let oldScrollY: number = 0;
   // function handleScroll() {
   //   if (window.scrollY > oldScrollY) {
@@ -23,6 +43,13 @@ const PlayerBar = ({ className }: { className?: string }) => {
   //   oldScrollY = window.scrollY;
   // }
 
+  useEffect(() => {
+    // window.addEventListener('scroll', handleScroll);
+    // return () => {
+    //   window.removeEventListener('scroll', handleScroll);
+    // };
+  }, []);
+
   useEffect(() => {
     // window.addEventListener('scroll', handleScroll);
     // return () => {
@@ -42,9 +69,12 @@ const PlayerBar = ({ className }: { className?: string }) => {
       className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10 ${className}`}
       style={{ bottom: 0 }}
     >
-      <div className="w-[1200px] h-full m-auto">
-        <Player className="m-auto" />
+      {/* 播放器 */}
+      <div className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] z-10">
+        <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
       </div>
+      {/* 单曲卡片 */}
+      <PlayerCard show={showCard} />
     </div>
   );
 };

src/components/AudioPlayer/PlayerCard.tsx

@@ -0,0 +1,82 @@
+import Image from 'next/image';
+import { useShallow } from 'zustand/react/shallow';
+
+import styles from './index.module.css';
+
+import { SongCardList } from '@/components';
+import useAudioStore from '@/store/audio';
+
+interface Prop {
+  // onClose: () => void;
+  show: boolean;
+  className?: string;
+}
+
+export default function PlayerCard({ show, className }: Prop) {
+  const { audioId, playQueue } = useAudioStore(
+    useShallow((state) => {
+      return {
+        audioId: state.audioId,
+        playQueue: state.playQueue,
+      };
+    }),
+  );
+
+  const miniClass = 'w-100vw translate-y-100vh'; // 缩小时的样式
+  const largeClass = 'w-[100vw] translate-y-[-130px]'; // 放大后的样式
+
+  const audioInfo = playQueue.find((item) => item.id === audioId);
+
+  console.log(audioInfo);
+
+  return (
+    <div
+      className={`fixed left-0 bottom-0 w-[100vw] h-[calc(100vh_-_230px)] pt-[68px] bg-[#fff] transition-all duration-300 ${show ? largeClass : miniClass} ${className}`}
+    >
+      <div className="flex justify-between w-[1200px] mx-auto">
+        {/* 单曲信息 */}
+        <div>
+          {/* 专辑封面 */}
+          {/* 阴影 */}
+          <div className="relative w-[340px] h-[246px]">
+            <div
+              className={`absolute left-0 bottom-0 w-[230px] h-[230px] rounded-[3px] bg-[rgba(0, 0, 0, 0.08)] ${styles.album_shoadow}`}
+              style={{
+                background: 'rgba(0, 0, 0, 0.08)',
+                boxShadow: '27px 10px 30px -12px rgba(0, 0, 0, 0.25)',
+                borderRadius: '3px',
+              }}
+            />
+            {audioInfo?.pic && (
+              <Image
+                width={246}
+                height={246}
+                unoptimized
+                src={audioInfo.pic}
+                alt="pic"
+                className="absolute left-[16px] rounded-[3px] z-3"
+                style={{ boxShadow: '27px 10px 30px -12px rgba(0, 0, 0, 0.25)' }}
+              />
+            )}
+            <div className="absolute right-0 top-[13px] w-[220px] h-[220px] bg-[url(/img/audio-player/CD.png)] z-2" />
+          </div>
+
+          {/* 歌曲名 */}
+          <p className="mt-[44px] text-[20px] leading-[28px] text-base">{audioInfo?.title ?? ''}</p>
+          {/* 歌手/专辑 */}
+          {audioInfo?.artist && audioInfo?.album && (
+            <p className="text-[13px] leading-[18px] mt-[2px] text-[rgba(0,0,0,0.7)]">{`${audioInfo.artist}/${audioInfo.album}`}</p>
+          )}
+          {/* 歌词 */}
+          <div className="mt-[30px]">{audioInfo?.lrc ? <div className="mt-[30px]"></div> : <div>暂无歌词</div>}</div>
+        </div>
+
+        {/* 播放列表 */}
+        <div className="w-[712px]">
+          <button>清空列表</button>
+          <SongCardList className="w-full mt-11px mb-[56px] " songList={playQueue} listId="single" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AudioPlayer/PlayerControl.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+// 样式层
+
 import Image from 'next/image';
 
 import { secondToDate } from '@/utils/time';
@@ -12,6 +14,8 @@ interface Props {
   audio: SongInfo | null;
   order: PlayOrder;
   playStatus: boolean;
+  showCard: boolean;
+  onSwitchShowCard: () => void;
   onPlay: () => void;
   onOrder: () => void;
   onPrev: () => void;
@@ -26,11 +30,13 @@ export default function AudioPlayer({
   audio,
   order,
   playStatus,
+  showCard,
   onPlay,
   onOrder,
   onPrev,
   onNext,
   onChangeProgress,
+  onSwitchShowCard,
   trackProgress,
   duration,
   className,
@@ -51,7 +57,8 @@ export default function AudioPlayer({
     <div className={`flex w-[1200px] pt-[29px] ${className}`}>
       {/* 专辑封面 */}
       <div
-        className={`relative w-[72px] h-[72px] rounded-[3px] bg-[#000] overflow-hidden flex-shrink cursor-pointer ${styles.album_pic_overlay_expand}`}
+        className={`relative w-[72px] h-[72px] rounded-[3px] bg-[#000] overflow-hidden flex-shrink cursor-pointer ${showCard ? styles.album_pic_overlay_collapse : styles.album_pic_overlay_expand}`}
+        onClick={onSwitchShowCard}
       >
         {audio?.pic && (
           <Image src={audio?.pic} alt="music" width={72} height={72} unoptimized className="w-full h-full" />

src/components/AudioPlayer/index.module.css

@@ -24,6 +24,13 @@
   background-size: 28px;
 }
 
+/* 专辑封面 阴影 */
+.album_shoadow {
+  background: rgba(0, 0, 0, 0.08);
+  box-shadow: 27px 10px 30px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+
 .range-input {
   -webkit-appearance: none;
   width: 100%;

src/store/audio.ts

@@ -12,7 +12,11 @@ interface AuioState {
   order: PlayOrder;
   /** 播放器显示状态 */
   show: boolean;
+  /** 单曲卡牌展示 */
+  showCard: boolean;
+  /** 当前音频id */
   audioId: string;
+  audioInfo: SongInfo | null;
   /** 歌单列表 */
   playList: SongInfo[];
   /** 播放队列 */
@@ -21,6 +25,8 @@ interface AuioState {
   setAudioId: (id: string) => void;
   // 显示/隐藏播放器
   setShow: (value: boolean) => void;
+  // 显示/隐藏单曲卡片
+  setShowCard: (value: boolean) => void;
   // 设置播放列表
   setPlayList: (params: { id: string; list: SongInfo[] }) => void;
   // 切换歌曲 -1: 上一首 1: 下一首
@@ -94,9 +100,11 @@ const useAuioState = create<AuioState>()(
           order: 'list_loop',
           playStatus: false,
           show: false,
+          showCard: false,
           playListId: '',
           playList: [],
           playQueue: [],
+          audioInfo: get()?.playList.length ? get().playList.find((item) => item.id === get().audioId) : null,
           setAudioId,
           setOrder,
           setShow: (value) =>
@@ -105,6 +113,12 @@ const useAuioState = create<AuioState>()(
                 state.show = value;
               }),
             ),
+          setShowCard: (value) =>
+            set(
+              produce((state) => {
+                state.showCard = value;
+              }),
+            ),
           setPlayList: (params) => {
             set(
               produce((state) => {