shiyue/Mymusic3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

已在播放列表（PlaylistDrawer）中添加了播放模式切换按钮

Browse Source
This commit is contained in:
史悦
2026-01-06 14:19:43 +08:00
parent cfefceaf28
commit 45dfa6ee04
1 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
index.html
View File

@@ -640,38 +640,59 @@
); );
}; };
const PlaylistDrawer = ({ playlist, currentSong, playSong, onClose, clearPlaylist, deleteSong }) => ( const PlaylistDrawer = ({ playlist, currentSong, playSong, onClose, clearPlaylist, deleteSong, mode, toggleMode }) => {
<div className="fixed inset-0 z-50 flex flex-col justify-end bg-black/60 backdrop-blur-sm animate-[fadeIn_0.2s]" onClick={onClose}> const getModeText = () => {
<div className="bg-gray-900/90 backdrop-blur-xl rounded-t-2xl max-h-[70vh] flex flex-col border-t border-white/10" onClick={e => e.stopPropagation()}> switch(mode) {
<div className="p-4 border-b border-white/10 flex justify-between items-center sticky top-0 z-10"> case 'one': return '单曲循环';
<h3 className="text-lg font-bold">当前播放 <span className="text-gray-500 text-sm font-normal">({playlist.length})</span></h3> case 'shuffle': return '随机播放';
<div className="flex gap-4"> default: return '列表循环';
<Icon name="trash-can" onClick={clearPlaylist} className="text-gray-400 hover:text-red-500" /> }
<Icon name="xmark" onClick={onClose} className="text-gray-400 hover:text-white" /> };
return (
<div className="fixed inset-0 z-50 flex flex-col justify-end bg-black/60 backdrop-blur-sm animate-[fadeIn_0.2s]" onClick={onClose}>
<div className="bg-gray-900/90 backdrop-blur-xl rounded-t-2xl max-h-[70vh] flex flex-col border-t border-white/10" onClick={e => e.stopPropagation()}>
<div className="p-4 border-b border-white/10 flex justify-between items-center sticky top-0 z-10">
<div className="flex items-center gap-3">
<h3 className="text-lg font-bold">当前播放 <span className="text-gray-500 text-sm font-normal">({playlist.length})</span></h3>
{playlist.length > 0 && (
<button
onClick={toggleMode}
className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-white/10 hover:bg-white/20 text-xs font-medium text-gray-300 hover:text-white transition-colors"
>
<Icon name={mode === 'one' ? '1' : (mode === 'shuffle' ? 'shuffle' : 'repeat')} size="text-xs" />
<span>{getModeText()}</span>
</button>
)}
</div>
<div className="flex gap-4 items-center">
<Icon name="trash-can" onClick={clearPlaylist} className="text-gray-400 hover:text-red-500 transition-colors" />
<Icon name="xmark" onClick={onClose} className="text-gray-400 hover:text-white transition-colors" />
</div>
</div>
<div className="overflow-y-auto flex-1 hide-scrollbar p-2">
{playlist.length === 0 ? (
<div className="p-12 text-center text-gray-500 flex flex-col items-center">
<Icon name="music" size="text-4xl" className="mb-4 opacity-30" />
<p>播放列表为空</p>
</div>
) : (
playlist.map((song, idx) => (
<SongItem
key={`${song.id}-${idx}`}
song={song}
isCurrent={currentSong?.id === song.id}
isPlaying={currentSong?.id === song.id}
onClick={() => playSong(song)}
onDelete={() => deleteSong(idx)}
/>
))
)}
</div> </div>
</div> </div>
<div className="overflow-y-auto flex-1 hide-scrollbar p-2">
{playlist.length === 0 ? (
<div className="p-12 text-center text-gray-500 flex flex-col items-center">
<Icon name="music" size="text-4xl" className="mb-4 opacity-30" />
<p>播放列表为空</p>
</div>
) : (
playlist.map((song, idx) => (
<SongItem
key={`${song.id}-${idx}`}
song={song}
isCurrent={currentSong?.id === song.id}
isPlaying={currentSong?.id === song.id}
onClick={() => playSong(song)}
onDelete={() => deleteSong(idx)}
/>
))
)}
</div>
</div> </div>
</div> );
); };
const TopListPage = ({ source, onBack, onPlaySong, onLike, isLiked }) => { const TopListPage = ({ source, onBack, onPlaySong, onLike, isLiked }) => {
const [lists, setLists] = useState([]); const [lists, setLists] = useState([]);
@@ -1316,13 +1337,15 @@
)} )}
{showPlaylist && ( {showPlaylist && (
<PlaylistDrawer <PlaylistDrawer
playlist={playlist} playlist={playlist}
currentSong={currentSong} currentSong={currentSong}
playSong={(song) => { setCurrentSong(song); setIsPlaying(true); }} playSong={(song) => { setCurrentSong(song); setIsPlaying(true); }}
onClose={() => setShowPlaylist(false)} onClose={() => setShowPlaylist(false)}
clearPlaylist={() => { setPlaylist([]); setCurrentSong(null); setIsPlaying(false); }} clearPlaylist={() => { setPlaylist([]); setCurrentSong(null); setIsPlaying(false); }}
deleteSong={deleteFromPlaylist} deleteSong={deleteFromPlaylist}
mode={mode}
toggleMode={toggleMode}
/> />
)} )}
</div> </div>