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
This commit is contained in:
史悦
2026-01-07 10:22:05 +08:00
parent c3877be35d
commit cbc3acb213
2 changed files with 9 additions and 6 deletions

View File

@@ -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="font-bold text-3xl shadow-black drop-shadow-lg mb-2">{selectedList.name}</div>
<div className="absolute bottom-4 left-4 right-4 flex flex-col gap-2">
{/* 返回按钮放置在标题上方,安全区域 */}
<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>