feat(page): Add mylist page.

public/img/icon/play-ellipse.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="26" viewBox="0 0 36 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="26" rx="13" fill="#C43737"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3401 11.8461C24.2272 12.3596 24.2272 13.6403 23.3401 14.1539L14.668 19.1746C13.7791 19.6892 12.6666 19.0478 12.6666 18.0207L12.6666 7.97922C12.6666 6.95211 13.7791 6.3107 14.668 6.82532L23.3401 11.8461Z" fill="white"/>
+</svg>

src/app/mylist/index.module.css

@@ -0,0 +1,14 @@
+.tab-active {
+  transition-property: color;
+  transition-duration: 300;
+  color: rgba(0, 0, 0, 0.95);
+}
+
+.tab-active::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 3px;
+  margin: 12px auto 0;
+  background-color: rgba(0, 0, 0, 0.95);
+}

src/app/mylist/page.tsx

@@ -0,0 +1,81 @@
+/** 期刊列表 */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+
+import styles from './index.module.css';
+
+import { SongCardList } from '@/components';
+import { apiGetSongCollect } from '@/services';
+import useUserStore from '@/store/user';
+
+export default function Journal({ params }: { params: { category?: string; page?: number } }) {
+  const { userInfo, userLogout } = useUserStore(
+    useShallow((state) => ({
+      userInfo: state.userInfo,
+      userLogout: state.userLogout,
+    })),
+  );
+
+  const [type, setType] = useState<'single' | 'journal'>('single'); // 收藏类型
+  const [pageNum, setPageNum] = useState<number>(1);
+  const [pageSize] = useState<number>(6);
+  const [list, setList] = useState<SongInfo[]>([]); // 列表
+
+  const handleChangeType = (type: 'single' | 'journal') => {
+    setList([]);
+    setType(type);
+    setPageNum(1);
+  };
+
+  const getList = async () => {
+    // const fn = {
+    //   single: apiGetSongCollect,
+    //   journal: apiGetSongCollect,
+    // };
+    const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum, pageSize });
+    if (result.code === 200) setList(result.data.rows);
+  };
+
+  const nav: Array<{ label: string; value: 'single' | 'journal' }> = [
+    {
+      label: '收藏的单曲',
+      value: 'single',
+    },
+    {
+      label: '收藏的期刊',
+      value: 'journal',
+    },
+  ];
+
+  useEffect(() => {
+    getList();
+  }, [type, pageNum]);
+
+  return (
+    <main className="w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
+      <div className="w-[712px]">
+        {/* Nav */}
+        <ul className="mt-[22px] h-[24px]">
+          {nav.map((item) => (
+            <li
+              key={item.value}
+              className={`relative float-left w-[85px] mr-[37px] text-[rgba(0,0,0,0.4)] text-[17px] leading-[24px] hover:text-base cursor-pointer ${type === item.value ? styles['tab-active'] : ''} `}
+              onClick={() => handleChangeType(item.value)}
+            >
+              {item.label}
+            </li>
+          ))}
+        </ul>
+        <div className="w-[105px] h-[36px] mt-[50px] pl-[45px] text-base text-[15px] leading-[36px] bg-[url(/img/icon/play-ellipse.svg)] bg-no-repeat bg-left hover:text-theme cursor-pointer">
+          播放全部
+        </div>
+        {/* List */}
+        <SongCardList className="w-full mt-11px mb-[56px] " songList={list} />
+      </div>
+    </main>
+  );
+}

src/components/Song/SongCard.tsx

@@ -5,7 +5,7 @@ export default function JournalItem({ id, title, pic, artist, haveCollect }: Son
   return (
     <Link
       href={`/single/${id}`}
-      className="flex flex-row items-center justify-between w-full h-[72px] py-[12px] px-[18px] rounded-[3px] hover:bg-[#f2f3f7] group"
+      className="flex flex-row items-center justify-between w-full h-[72px] my-[3px] py-[12px] px-[18px] rounded-[3px] hover:bg-[#f2f3f7] group"
     >
       {/* left */}
       <div className="flex flex-row items-center">

src/services/client/audio.ts

@@ -9,7 +9,17 @@ export const apiGetSongInfo = async (id: string) => {
  *  @pageNum 页码，不传或者小于1，则返回所有收藏歌曲
  *  @pageSize 每页条数，不传或者小于1，则返回所有收藏歌曲
  */
-export const apiGetSongCollect = async () => {
-  const result: FetchResponse<Paging<SongInfo>> = await clientHttp.get(`/luoo-music/song/collect`);
+export const apiGetSongCollect = async ({
+  pageNum,
+  pageSize,
+  userId,
+}: {
+  pageNum: number;
+  pageSize: number;
+  userId: string;
+}) => {
+  const result: FetchResponse<Paging<SongInfo>> = await clientHttp.get(
+    `queyueapi/luoo-music/song/collect?userId=${userId}&pageNum=${pageNum}&pageSize=${pageSize}`,
+  );
   return result;
 };