update: Add audio store.

src/app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
         <Header />
         <div>{children}</div>
         <Footer />
-        {/* <PlayerBar /> */}
+        <PlayerBar />
       </body>
     </html>
   );

src/components/AudioPlayer/Player.tsx

@@ -2,10 +2,19 @@
 import { useState } from 'react';
 
 import Image from 'next/image';
+import { useShallow } from 'zustand/react/shallow';
 
 import { AutoScrollContainer } from '@/components';
+import useAudioStore from '@/store/audio';
 
 export default function AudioPlayer({ className }: { className?: string }) {
+  const { audioInfo, playList } = useAudioStore(
+    useShallow((state) => ({
+      audioInfo: state.audioInfo,
+      playList: state.playList,
+    })),
+  );
+
   const [curTime, setCurTime] = useState('00:00');
   const [totalTime, setTotalTime] = useState('00:00');
 

src/components/AudioPlayer/PlayerBar.tsx

@@ -21,19 +21,20 @@ export default function PlayerBar({ className }: { className?: string }) {
   }
 
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    // window.addEventListener('scroll', handleScroll);
-    return () => {
+    // return () => {
-      window.removeEventListener('scroll', handleScroll);
+    //   window.removeEventListener('scroll', handleScroll);
-    };
+    // };
   });
 
   const [positionBottom, setPositionBottom] = useState<number>(0);
 
   return (
-    <div
+    // <div
-      className={`fixed w-[100vw] h-[130px] bg-[#fff] ${className} transition-bottom duration-700 shadow-top z-10`}
+    //   className={`fixed w-[100vw] h-[130px] bg-[#fff] ${className} transition-bottom duration-700 shadow-lg shadow-black-[0_0_10px] z-10`}
-      style={{ bottom: positionBottom }}
+    //   style={{ bottom: positionBottom }}
-    >
+    // >
+    <div className={`fixed w-[100vw] h-[130px] bg-[#fff] shadow-lg shadow-black-[0_0_10px] z-10`} style={{ bottom: 0 }}>
       <div className="w-[1200px] h-full m-auto">
         <Player className="m-auto" />
       </div>

src/services/client/audio.ts

@@ -0,0 +1,15 @@
+import clientHttp from '@/utils/request/client';
+
+export const apiGetSongInfo = async (id: string) => {
+  const result: FetchResponse<SongInfo> = await clientHttp.get(`/luoo-music/song/${id}`);
+  return result;
+};
+
+/** 收藏歌曲
+ *  @pageNum 页码，不传或者小于1，则返回所有收藏歌曲
+ *  @pageSize 每页条数，不传或者小于1，则返回所有收藏歌曲
+ */
+export const apiGetSongCollect = async () => {
+  const result: FetchResponse<Paging<SongInfo>> = await clientHttp.get(`/luoo-music/song/collect`);
+  return result;
+};

src/services/index.ts

@@ -11,3 +11,4 @@ export * from './server/journal';
 export * from './client/user';
 export * from './client/operate';
 export * from './client/comment';
+export * from './client/audio';

src/store/audio.ts

@@ -0,0 +1,56 @@
+import { produce } from 'immer';
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+import { apiGetSongInfo } from '@/services';
+
+interface AuioState {
+  /** 播放状态 */
+  play: boolean;
+  /** 播放器显示状态 */
+  show: boolean;
+  /** 当前音频信息 */
+  audioInfo: SongInfo | null;
+  /** 播放列表 */
+  playList: Array<SongInfo | null>;
+  /** 显示/隐藏播放器 */
+  setShow: (value: boolean) => void;
+  /** 获取歌曲信息 */
+  getSongInfo: (id: string) => Promise<boolean>;
+  /** 切换歌曲 */
+  switchSong: (id: string) => Promise<boolean>;
+}
+
+const useAuioState = create<AuioState>()(
+  devtools(
+    persist(
+      (set) => {
+        const audioInfo = null;
+        const getSongInfo = async (id: string) => {
+          const res = await apiGetSongInfo(id);
+          if (res.code === 200) set(produce((state) => void (state.audioInfo = res.data)));
+          return res.code === 200;
+        };
+
+        return {
+          play: false,
+          show: false,
+          audioInfo,
+          playList: [],
+          switchSong: async (id: string) => {
+            const res = await getSongInfo(id);
+            return res;
+          },
+          setShow: (value) => set({ show: value }),
+          getSongInfo,
+        };
+      },
+      {
+        name: 'audio',
+        getStorage: () => localStorage,
+      },
+    ),
+  ),
+);
+
+export default useAuioState;