queyue-frontend
/
queyue-website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update(AudioCard): 1.添加歌词功能; 2.修复了一些bug

Browse Source
mack-mac
mackt 7 months ago
parent b71f20ccab
commit 4789ddf364
12 changed files with 125 additions and 33 deletions
Show Stats Download Patch File Download Diff File

2
src/app/layout.tsx
Unescape View File

@ -28,7 +28,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
return ( return (
<html lang="zn-ch" className="relative"> <html lang="zn-ch" className="relative">
<body> <body>
<Header /> <Header className="absolute top-0" />
<div>{children}</div> <div>{children}</div>
<Footer /> <Footer />
<PlayerBar /> <PlayerBar />

2
src/app/loading.tsx
Unescape View File

@ -1,7 +1,7 @@
export default function Loading() { export default function Loading() {
return ( return (
<div className="w-[100vw] h-[100vh] flex justify-center items-center"> <div className="w-[100vw] h-[100vh] flex justify-center items-center">
<div>loading...</div> <div>正在加载……</div>
</div> </div>
); );
} }

17
src/app/my/collect/page.tsx
Unescape View File

@ -2,7 +2,7 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState, useMemo } from 'react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
@ -23,9 +23,13 @@ export default function Journal() {
const [total, setTotal] = useState<number>(0); const [total, setTotal] = useState<number>(0);
const [pageNum, setPageNum] = useState<number>(1); const [pageNum, setPageNum] = useState<number>(1);
const [pageSize] = useState<number>(6); const [pageSize] = useState<number>(6);
const [list, setList] = useState<SongInfo[]>([]); // 列表 const [list, setList] = useState<SongInfo[]>([]); // 全部收藏列表
const [loading, setLoading] = useState<boolean>(false); 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') => { const handleChangeType = (type: 'single' | 'journal') => {
setList([]); setList([]);
setPageNum(1); setPageNum(1);
@ -34,7 +38,7 @@ export default function Journal() {
const getList = async () => { const getList = async () => {
setLoading(true); 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) { if (result.code === 200) {
setList(result.data?.rows); setList(result.data?.rows);
setTotal(result.data?.total); setTotal(result.data?.total);
@ -53,12 +57,9 @@ export default function Journal() {
}, },
]; ];
useEffect(() => {
getList();
}, [type, pageNum]);
useEffect(() => { useEffect(() => {
document.title = '我的收藏 - 雀乐'; document.title = '我的收藏 - 雀乐';
getList();
}, []); }, []);
return ( return (
@ -80,7 +81,7 @@ export default function Journal() {
播放全部 播放全部
</div> </div>
{/* List */} {/* 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 && ( {!!total && (
<Pagination <Pagination

25
src/components/AudioPlayer/Lrc.tsx
Unescape View File

@ -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>
);
}

8
src/components/AudioPlayer/PlayerBar.tsx
Unescape View File

@ -49,16 +49,16 @@ const PlayerBar = ({ className }: { className?: string }) => {
}, []); }, []);
return ( return (
// 注释为高斯模糊效果 // 高斯模糊效果
// <div // <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]`} // 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 }} // 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 <div
className="fixed bottom-0 w-[100vw] h-[130px] m-auto bg-[#fff] shadow-lg z-10 transition-bottom duration-600" 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 ? 0 : -130 }} style={{ bottom: (show && audioId) || showCard ? 0 : -130 }}
> >
<Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} /> <Player className="m-auto" onSwitchShowCard={handleSwitchShowCard} />
</div> </div>

49
src/components/AudioPlayer/PlayerCard.tsx
Unescape View File

@ -1,9 +1,14 @@
import { useState, useEffect } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import clientHttp from '@/utils/request/client';
import styles from './index.module.css'; import styles from './index.module.css';
import Lrc from './Lrc';
import { SongCardList } from '@/components'; import { Header, SongCardList } from '@/components';
import useAudioStore from '@/store/audio'; import useAudioStore from '@/store/audio';
interface Prop { interface Prop {
@ -22,18 +27,36 @@ export default function PlayerCard({ show, className }: Prop) {
}), }),
); );
const miniClass = 'w-100vw translate-y-100vh'; // 缩小时的样式 const [lrc, setLrc] = useState<string>('');
const largeClass = 'w-[100vw] translate-y-[-130px]'; // 放大后的样式
const miniClass = 'translate-y-100vh'; // 缩小时的样式
const largeClass = 'translate-y-[-130px]'; // 放大后的样式
const audioInfo = playQueue.find((item) => item.id === audioId); 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 ( return (
<div <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> <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 className="absolute right-0 top-[13px] w-[220px] h-[220px] bg-[url(/img/audio-player/CD.png)] z-2" />
</div> </div>
{/* 歌曲名 */} {/* 歌曲名 */}
<p className="mt-[44px] text-[20px] leading-[28px] text-base">{audioInfo?.title ?? ''}</p> <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> <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>
{/* 播放列表 */} {/* 播放列表 */}
<div className="w-[712px]"> <div className="w-[712px]">
<button>清空列表</button> <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> </div>
</div> </div>

36
src/components/AudioPlayer/index.module.css
Unescape View File

@ -64,3 +64,39 @@
background: #181818; background: #181818;
cursor: pointer; 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; /* 滚动条滑块悬停时颜色 */
}

4
src/components/ButtonCollect.tsx
Unescape View File

@ -39,7 +39,9 @@ export default function ButtonCollect({
const [currentCount, setCurrentCount] = useState<number>(0); const [currentCount, setCurrentCount] = useState<number>(0);
// 收藏/取消收藏 // 收藏/取消收藏
const handleCollect = async () => { const handleCollect = async (event: React.MouseEvent) => {
event.stopPropagation();
setState(!state); // 更新收藏状态 setState(!state); // 更新收藏状态
setCurrentCount((currentCount) => currentCount + (state ? -1 : 1)); // 如果当前为收藏状态，-1，否则+1 setCurrentCount((currentCount) => currentCount + (state ? -1 : 1)); // 如果当前为收藏状态，-1，否则+1

5
src/components/Comment/Comment.tsx
Unescape View File

@ -40,7 +40,6 @@ export default function Comment({ journalId, className, totalCommentReply, total
// 加载评论 // 加载评论
const handleLoadMore = useCallback(async () => { const handleLoadMore = useCallback(async () => {
console.log('handleLoadMore');
if (loading || commentList.length >= totalCommentReplyInt) return; if (loading || commentList.length >= totalCommentReplyInt) return;
setLoading(true); setLoading(true);
@ -86,8 +85,8 @@ export default function Comment({ journalId, className, totalCommentReply, total
clssName="mt-[25px]" clssName="mt-[25px]"
/> />
<CommentList commentList={commentList} /> <CommentList commentList={commentList} />
<div ref={loaderRef} className="h-[200px]"> <div ref={loaderRef} className="h-[200px] leading-[200px]">
{loading && 'loading...'} {loading && '正在加载……'}
</div> </div>
</> </>
)} )}

2
src/components/Header/HeaderAvatar.tsx
Unescape View File

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

4
src/components/Header/index.tsx
Unescape View File

@ -9,7 +9,7 @@ import HeaderAvatar from './HeaderAvatar';
import { Logo, LoginModal } from '@/components'; import { Logo, LoginModal } from '@/components';
import useUserStore from '@/store/user'; import useUserStore from '@/store/user';
export default function Header() { export default function Header({ className }: { className?: string }) {
const { userInfo, showLogin, setShowLogin } = useUserStore( const { userInfo, showLogin, setShowLogin } = useUserStore(
useShallow((state) => ({ useShallow((state) => ({
userInfo: state.userInfo, userInfo: state.userInfo,
@ -34,7 +34,7 @@ export default function Header() {
]; ];
return ( 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"> <div className="relative w-[1200px] h-full mx-auto flex items-center justify-between">
<Logo /> <Logo />
<div className="h-full flex flex-row items-center"> <div className="h-full flex flex-row items-center">

4
src/components/Song/SongCardList.tsx
Unescape View File

@ -26,12 +26,12 @@ export default function JournalItem({ listId, songList, className }: Props) {
); );
const handlePlayList = (id: string) => { const handlePlayList = (id: string) => {
// 正在播放当前歌单 // 正在播放其他歌单
if (playListId !== listId) { if (playListId !== listId) {
setPlayList({ id: listId, list: songList }); setPlayList({ id: listId, list: songList });
} }
// 正在播放其他歌单 // 正在播放当前歌单
setAudioId(id); setAudioId(id);
}; };

Write Preview
Loading…
Cancel
Save