From 45dfa6ee044678299454e31ed339c6304b08530f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Tue, 6 Jan 2026 14:19:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E5=9C=A8=E6=92=AD=E6=94=BE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=88PlaylistDrawer=EF=BC=89=E4=B8=AD=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E6=92=AD=E6=94=BE=E6=A8=A1=E5=BC=8F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 83 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 53 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index 1c4e866..83952e1 100644
--- a/index.html
+++ b/index.html
@@ -640,38 +640,59 @@
             );
         };
 
-        const PlaylistDrawer = ({ playlist, currentSong, playSong, onClose, clearPlaylist, deleteSong }) => (
-            <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">
-                        <h3 className="text-lg font-bold">当前播放 <span className="text-gray-500 text-sm font-normal">({playlist.length})</span></h3>
-                        <div className="flex gap-4">
-                            <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" />
+        const PlaylistDrawer = ({ playlist, currentSong, playSong, onClose, clearPlaylist, deleteSong, mode, toggleMode }) => {
+            const getModeText = () => {
+                switch(mode) {
+                    case 'one': return '单曲循环';
+                    case 'shuffle': return '随机播放';
+                    default: return '列表循环';
+                }
+            };
+
+            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 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>
-        );
+            );
+        };
 
         const TopListPage = ({ source, onBack, onPlaySong, onLike, isLiked }) => {
             const [lists, setLists] = useState([]);
@@ -1316,13 +1337,15 @@
                     )}
 
                     {showPlaylist && (
-                        <PlaylistDrawer 
+                        <PlaylistDrawer
                             playlist={playlist}
                             currentSong={currentSong}
                             playSong={(song) => { setCurrentSong(song); setIsPlaying(true); }}
                             onClose={() => setShowPlaylist(false)}
                             clearPlaylist={() => { setPlaylist([]); setCurrentSong(null); setIsPlaying(false); }}
                             deleteSong={deleteFromPlaylist}
+                            mode={mode}
+                            toggleMode={toggleMode}
                         />
                     )}
                 </div>