From 4789ddf364ac8fb950ea606cf816866846f065be Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Mon, 15 Apr 2024 23:10:50 +0800
Subject: [PATCH] =?UTF-8?q?update(AudioCard):=201.=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E5=8A=9F=E8=83=BD;=202.=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BA=86=E4=B8=80=E4=BA=9Bbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                          |  2 +-
 src/app/loading.tsx                         |  2 +-
 src/app/my/collect/page.tsx                 | 17 +++----
 src/components/AudioPlayer/Lrc.tsx          | 25 +++++++++++
 src/components/AudioPlayer/PlayerBar.tsx    |  8 ++--
 src/components/AudioPlayer/PlayerCard.tsx   | 49 ++++++++++++++++-----
 src/components/AudioPlayer/index.module.css | 36 +++++++++++++++
 src/components/ButtonCollect.tsx            |  4 +-
 src/components/Comment/Comment.tsx          |  5 +--
 src/components/Header/HeaderAvatar.tsx      |  2 +-
 src/components/Header/index.tsx             |  4 +-
 src/components/Song/SongCardList.tsx        |  4 +-
 12 files changed, 125 insertions(+), 33 deletions(-)
 create mode 100644 src/components/AudioPlayer/Lrc.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ed647b5..c7c12a5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
   return (
     <html lang="zn-ch" className="relative">
       <body>
-        <Header />
+        <Header className="absolute top-0" />
         <div>{children}</div>
         <Footer />
         <PlayerBar />
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index e4725b2..d6f5fa9 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,7 +1,7 @@
 export default function Loading() {
   return (
     <div className="w-[100vw] h-[100vh] flex justify-center items-center">
-      <div>loading...</div>
+      <div>正在加载……</div>
     </div>
   );
 }
diff --git a/src/app/my/collect/page.tsx b/src/app/my/collect/page.tsx
index ddc52b7..c201d4d 100644
--- a/src/app/my/collect/page.tsx
+++ b/src/app/my/collect/page.tsx
@@ -2,7 +2,7 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 
@@ -23,9 +23,13 @@ export default function Journal() {
   const [total, setTotal] = useState<number>(0);
   const [pageNum, setPageNum] = useState<number>(1);
   const [pageSize] = useState<number>(6);
-  const [list, setList] = useState<SongInfo[]>([]); // 列表
+  const [list, setList] = useState<SongInfo[]>([]); // 全部收藏列表
   const [loading, setLoading] = useState<boolean>(false);
 
+  const displayList = useMemo(() => {
+    return list.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+  }, [pageNum, list, type]);
+
   const handleChangeType = (type: 'single' | 'journal') => {
     setList([]);
     setPageNum(1);
@@ -34,7 +38,7 @@ export default function Journal() {
 
   const getList = async () => {
     setLoading(true);
-    const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum, pageSize });
+    const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum: -1, pageSize: -1 });
     if (result.code === 200) {
       setList(result.data?.rows);
       setTotal(result.data?.total);
@@ -53,12 +57,9 @@ export default function Journal() {
     },
   ];
 
-  useEffect(() => {
-    getList();
-  }, [type, pageNum]);
-
   useEffect(() => {
     document.title = '我的收藏 - 雀乐';
+    getList();
   }, []);
 
   return (
@@ -80,7 +81,7 @@ export default function Journal() {
           播放全部
         </div>
         {/* List */}
-        <SongCardList className="w-full mt-11px mb-[56px] " songList={list} listId="mylist" />
+        <SongCardList className="w-full mt-11px mb-[56px]" songList={displayList} listId="mylist" />
 
         {!!total && (
           <Pagination
diff --git a/src/components/AudioPlayer/Lrc.tsx b/src/components/AudioPlayer/Lrc.tsx
new file mode 100644
index 0000000..a98c610
--- /dev/null
+++ b/src/components/AudioPlayer/Lrc.tsx
@@ -0,0 +1,25 @@
+/** 歌词 */
+interface Props {
+  lrc: string;
+  className?: string;
+}
+
+import styles from './index.module.css';
+
+export default function Lrc({ lrc, className }: Props) {
+  const lrcList = lrc.split('\n');
+  const normalClassName = 'text-[14px] leading-[36.4px] text-[rgba(0,0,0,0.7)]';
+  const currentClassName = 'text-[17px] leading-[44.2px] text-[rgba(0,0,0,0.95)]';
+
+  return (
+    <div className={`overflow-y-auto ${styles.lrc} ${className}`}>
+      <div className="h-auto">
+        {lrcList.map((item, index) => (
+          <p key={index} className={true ? normalClassName : currentClassName}>
+            {item}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AudioPlayer/PlayerBar.tsx b/src/components/AudioPlayer/PlayerBar.tsx
index d04a2f2..3e010b6 100644
--- a/src/components/AudioPlayer/PlayerBar.tsx
+++ b/src/components/AudioPlayer/PlayerBar.tsx
@@ -49,16 +49,16 @@ const PlayerBar = ({ className }: { className?: string }) => {
   }, []);
 
   return (
-    // 注释为高斯模糊效果
+    // 高斯模糊效果
     // <div
     //   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 bottom-0 w-[100vw] h-auto z-10 ${className}`}>
       {/* 播放器 */}
       <div
-        className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg z-10 transition-bottom duration-600"
-        style={{ bottom: show && audioId ? 0 : -130 }}
+        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} />
       </div>
diff --git a/src/components/AudioPlayer/PlayerCard.tsx b/src/components/AudioPlayer/PlayerCard.tsx
index cecfcb8..2798020 100644
--- a/src/components/AudioPlayer/PlayerCard.tsx
+++ b/src/components/AudioPlayer/PlayerCard.tsx
@@ -1,9 +1,14 @@
+import { useState, useEffect } from 'react';
+
 import Image from 'next/image';
 import { useShallow } from 'zustand/react/shallow';
 
+import clientHttp from '@/utils/request/client';
+
 import styles from './index.module.css';
+import Lrc from './Lrc';
 
-import { SongCardList } from '@/components';
+import { Header, SongCardList } from '@/components';
 import useAudioStore from '@/store/audio';
 
 interface Prop {
@@ -22,18 +27,36 @@ export default function PlayerCard({ show, className }: Prop) {
     }),
   );
 
-  const miniClass = 'w-100vw translate-y-100vh'; // 缩小时的样式
-  const largeClass = 'w-[100vw] translate-y-[-130px]'; // 放大后的样式
+  const [lrc, setLrc] = useState<string>('');
+
+  const miniClass = 'translate-y-100vh'; // 缩小时的样式
+  const largeClass = 'translate-y-[-130px]'; // 放大后的样式
 
   const audioInfo = playQueue.find((item) => item.id === audioId);
 
-  console.log(audioInfo);
+  const getLrc = async (lrcUrl: string) => {
+    if (!lrcUrl) {
+      setLrc('');
+      return;
+    }
+    const res: FetchResponse<Promise<string>> = await clientHttp.get(lrcUrl);
+    if (res.code === 200) {
+      const lrc = (await res.data) || '';
+      setLrc(lrc);
+    }
+  };
+
+  useEffect(() => {
+    getLrc(audioInfo?.lrc ?? '');
+  }, [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}`}
+      className={`fixed left-0 bottom-0 w-[100vw] h-[calc(100vh_-_130px)] bg-[#fff] transition-all duration-300 ${show ? largeClass : miniClass} ${className}`}
     >
-      <div className="flex justify-between w-[1200px] mx-auto">
+      <Header />
+
+      <div className="flex justify-between w-[1200px] mx-auto mt-[68px]">
         {/* 单曲信息 */}
         <div>
           {/* 专辑封面 */}
@@ -60,7 +83,6 @@ export default function PlayerCard({ show, className }: Prop) {
             )}
             <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>
           {/* 歌手/专辑 */}
@@ -68,13 +90,20 @@ export default function PlayerCard({ show, className }: Prop) {
             <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>
+          {lrc ? (
+            <Lrc lrc={lrc} className="mt-[30px] w-[340px] h-[267px]" />
+          ) : (
+            <div className="mt-[30px] w-[340px] h-[267px] text-[14px] text-[rgba(0,0,0,0.7)] text-center leading-[267px]">
+              暂无歌词
+            </div>
+          )}
         </div>
-
         {/* 播放列表 */}
         <div className="w-[712px]">
           <button>清空列表</button>
-          <SongCardList className="w-full mt-11px mb-[56px] " songList={playQueue} listId="single" />
+          <div className={`h-[620px] mt-[15px] overflow-y-auto ${styles.playQueue}`}>
+            <SongCardList className="w-full mt-11px" songList={playQueue} listId="single" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/AudioPlayer/index.module.css b/src/components/AudioPlayer/index.module.css
index 20cbc9e..c22eedf 100644
--- a/src/components/AudioPlayer/index.module.css
+++ b/src/components/AudioPlayer/index.module.css
@@ -64,3 +64,39 @@
   background: #181818;
   cursor: pointer;
 }
+
+/* 歌词滚动样式 */
+.lrc::-webkit-scrollbar {
+  width: 3px; /* 滚动条宽度 */
+}
+
+.lrc::-webkit-scrollbar-track {
+  opacity: 0; /* 滚动条轨道透明度 */
+}
+
+.lrc::-webkit-scrollbar-thumb {
+  border-radius: 3px; /* 滚动条圆角 */
+  background: #d9d9d9; /* 滚动条滑块颜色 */
+}
+
+.lrc::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条滑块悬停时颜色 */
+}
+
+/* 播放列表滚动样式 */
+.playQueue::-webkit-scrollbar {
+  width: 3px; /* 滚动条宽度 */
+}
+
+.playQueue::-webkit-scrollbar-track {
+  opacity: 0; /* 滚动条轨道透明度 */
+}
+
+.playQueue::-webkit-scrollbar-thumb {
+  border-radius: 3px; /* 滚动条圆角 */
+  background: #d9d9d9; /* 滚动条滑块颜色 */
+}
+
+.playQueue::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条滑块悬停时颜色 */
+}
diff --git a/src/components/ButtonCollect.tsx b/src/components/ButtonCollect.tsx
index 5af039b..d6fbab8 100644
--- a/src/components/ButtonCollect.tsx
+++ b/src/components/ButtonCollect.tsx
@@ -39,7 +39,9 @@ export default function ButtonCollect({
   const [currentCount, setCurrentCount] = useState<number>(0);
 
   // 收藏/取消收藏
-  const handleCollect = async () => {
+  const handleCollect = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+
     setState(!state); // 更新收藏状态
     setCurrentCount((currentCount) => currentCount + (state ? -1 : 1)); // 如果当前为收藏状态，-1，否则+1
 
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 7bd905d..1d6878a 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -40,7 +40,6 @@ export default function Comment({ journalId, className, totalCommentReply, total
 
   // 加载评论
   const handleLoadMore = useCallback(async () => {
-    console.log('handleLoadMore');
     if (loading || commentList.length >= totalCommentReplyInt) return;
 
     setLoading(true);
@@ -86,8 +85,8 @@ export default function Comment({ journalId, className, totalCommentReply, total
             clssName="mt-[25px]"
           />
           <CommentList commentList={commentList} />
-          <div ref={loaderRef} className="h-[200px]">
-            {loading && 'loading...'}
+          <div ref={loaderRef} className="h-[200px] leading-[200px]">
+            {loading && '正在加载……'}
           </div>
         </>
       )}
diff --git a/src/components/Header/HeaderAvatar.tsx b/src/components/Header/HeaderAvatar.tsx
index ba16c8b..9a91c15 100644
--- a/src/components/Header/HeaderAvatar.tsx
+++ b/src/components/Header/HeaderAvatar.tsx
@@ -18,7 +18,7 @@ export default function HeaderAvatar({ className }: { className?: string }) {
 
   return (
     <div className={`${className}`}>
-      <HoverCard>
+      <HoverCard openDelay={300}>
         <HoverCardTrigger>
           <Avatar className="h-[36px] w-[36px] cursor-pointer">
             <AvatarImage src={userInfo.avatar} alt="avatar" />
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 638f66b..276c2d3 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -9,7 +9,7 @@ import HeaderAvatar from './HeaderAvatar';
 import { Logo, LoginModal } from '@/components';
 import useUserStore from '@/store/user';
 
-export default function Header() {
+export default function Header({ className }: { className?: string }) {
   const { userInfo, showLogin, setShowLogin } = useUserStore(
     useShallow((state) => ({
       userInfo: state.userInfo,
@@ -34,7 +34,7 @@ export default function Header() {
   ];
 
   return (
-    <header className="absolute top-0 w-full h-[80px] z-2">
+    <header className={`w-full h-[80px] z-2 ${className}`}>
       <div className="relative w-[1200px] h-full mx-auto flex items-center justify-between">
         <Logo />
         <div className="h-full flex flex-row items-center">
diff --git a/src/components/Song/SongCardList.tsx b/src/components/Song/SongCardList.tsx
index 998c427..ca3516d 100644
--- a/src/components/Song/SongCardList.tsx
+++ b/src/components/Song/SongCardList.tsx
@@ -26,12 +26,12 @@ export default function JournalItem({ listId, songList, className }: Props) {
   );
 
   const handlePlayList = (id: string) => {
-    // 正在播放当前歌单
+    // 正在播放其他歌单
     if (playListId !== listId) {
       setPlayList({ id: listId, list: songList });
     }
 
-    // 正在播放其他歌单
+    // 正在播放当前歌单
     setAudioId(id);
   };
 
