refactor(ui): redesign playlist detail header

- Move back button to cover image area with updated styling
- Remove sticky top bar for cleaner view
- Add explicit container names in docker-compose.yml

docker-compose.yml

@@ -2,12 +2,14 @@ version: '3.8'
 
 services:
   music-canvas:
+    container_name: music-canvas
     build: .
     ports:
       - "7481:3000"
     restart: unless-stopped
 
   sync-service:
+    container_name: music-sync-server
     build: ./sync-server
     ports:
       - "7482:3001"

index.html

@@ -776,16 +776,17 @@
             if (selectedList) {
                 return (
                     <div className="flex flex-col h-full bg-darker animate-[slideUp_0.2s_ease-out]">
-                        <div className="p-4 flex items-center gap-4 sticky top-0 bg-darker/80 backdrop-blur-md z-20 border-b border-white/5">
-                            <Icon name="arrow-left" onClick={() => setSelectedList(null)} />
-                            <h2 className="font-bold text-lg truncate">{selectedList.name}</h2>
-                        </div>
                         <div className="flex-1 overflow-y-auto hide-scrollbar">
                             <div className="w-full h-64 relative mb-4 overflow-hidden">
                                 <ImageWithFallback src={selectedList.cover || selectedList.pic} className="w-full h-full object-cover opacity-60 blur-sm scale-110" />
                                 <div className="absolute inset-0 bg-gradient-to-t from-darker to-transparent"></div>
-                                <div className="absolute bottom-4 left-4 right-4">
+                                <div className="absolute bottom-4 left-4 right-4 flex flex-col gap-2">
-                                    <div className="font-bold text-3xl shadow-black drop-shadow-lg mb-2">{selectedList.name}</div>
+                                    {/* 返回按钮放置在标题上方，安全区域 */}
+                                    <div onClick={() => setSelectedList(null)} className="self-start px-4 py-2 bg-white/20 backdrop-blur-md rounded-full text-sm font-bold flex items-center gap-2 cursor-pointer hover:bg-white/30 transition-colors mb-2 shadow-lg border border-white/10 active:scale-95">
+                                        <Icon name="arrow-left" />
+                                        <span>返回列表</span>
+                                    </div>
+                                    <div className="font-bold text-3xl shadow-black drop-shadow-lg leading-tight">{selectedList.name}</div>
                                     <div className="text-sm text-gray-300">更新于 {new Date().toLocaleDateString()}</div>
                                 </div>
                             </div>