feat(AlbumDetailDialog): enhance album background styling and loading indicator

fix(TrackItem): adjust button hover effects and reposition track number display

src/components/AlbumDetailDialog.vue

@@ -10,6 +10,7 @@ import apis from '../apis'
 import { artistsOrganize } from '../utils'
 import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 import TrackItem from './TrackItem.vue'
+import LoadingIndicator from '../assets/icons/loadingindicator.vue'
 
 const props = defineProps<{
 	albumCid: string
@@ -136,11 +137,16 @@ function playTheAlbum(from: number = 0) {
 	<dialog :open="present" class="bg-transparent z-20">
 		<div ref="dialogBackdrop" class="w-screen h-screen z-20 bg-neutral-700/30 flex" @click="handleClose">
 			<div ref="dialogContent"
-				class="max-w-[60rem] w-full h-[40rem] bg-[#191919] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto"
+				class="max-w-[60rem] w-full h-[40rem] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto"
-				@click.stop>
+				:style="{
-				<div class="flex justify-end sticky top-0 z-10 mb-8">
+					background: album ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url(' + (album.coverDeUrl) + ')' : '#191919',
+					backgroundSize: 'cover',
+					backgroundPosition: 'center',
+					backgroundRepeat: 'no-repeat',
+				}" @click.stop>
+				<div class="flex justify-end sticky top-0 z-20 mb-8">
 					<button ref="closeButton"
-						class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:bg-neutral-700/80 hover:scale-110"
+						class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:bg-neutral-700/80"
 						@click="handleClose">
 						<XIcon :size="4" />
 					</button>
@@ -162,17 +168,17 @@ function playTheAlbum(from: number = 0) {
 					</div>
 
 					<div class="flex-1 flex flex-col gap-8 mb-2">
-						<div class="flex justify-between items-center">
+						<div class="flex justify-between items-center z-10">
 							<div class="flex gap-2">
 								<button
-									class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2"
+									class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner backdrop-blur-3xl border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2 transition-all"
 									@click="playTheAlbum()">
 									<PlayIcon :size="4" />
 									<div>播放专辑</div>
 								</button>
 
 								<button
-									class="text-white w-10 h-10 bg-white/5 border border-[#ffffff39] rounded-full flex justify-center items-center"
+									class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all"
 									@click="() => {
 										playTheAlbum()
 										playQueue.shuffleCurrent = true
@@ -182,24 +188,41 @@ function playTheAlbum(from: number = 0) {
 								</button>
 
 								<button
-									class="text-white w-10 h-10 bg-white/5 border border-[#ffffff39] rounded-full flex justify-center items-center">
+									class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all">
 									<StarEmptyIcon :size="4" />
 								</button>
 							</div>
 
-							<div class="text-sm text-gray-500 font-medium">
+							<div class="text-sm text-neutral-500 font-medium z-0">
 								共 {{ album?.songs?.length ?? '？' }} 首曲目
 							</div>
 						</div>
-						<div class="flex flex-col gap-2">
+						<div class="flex flex-col border border-neutral-600/30 rounded-lg backdrop-blur-lg">
 							<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track"
 								:index="index" :playfrom="playTheAlbum" />
 						</div>
 					</div>
 				</div>
 
-				<div v-else class="text-white text-center mt-8">
+				<div v-else class="flex gap-8">
-					加载中...
+					<div class="mx-auto md:mx-0 md:w-72">
+						<div class="md:sticky md:top-[4.5rem] flex flex-col gap-8 animate-pulse">
+							<div
+								class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 top-0 w-48 mx-auto md:w-72 h-72" />
+							<div class="flex flex-col gap-2 text-center md:text-left">
+								<div class="h-6 font-semibold w-2/3 bg-neutral-400/50 rounded-sm" />
+								<div class="bg-sky-200/30 text-xl h-5 w-1/3 rounded-sm" />
+								<div class="text-white/50 text-sm flex flex-col gap-1">
+									<div v-for="i in 3" :key="i" class="bg-white/10 h-[0.875rem] rounded-sm"
+										:class="i === 3 ? 'w-2/3' : 'w-full'" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex-1 flex justify-center items-center">
+						<LoadingIndicator :size="10" />
+					</div>
 				</div>
 			</div>
 		</div>

src/components/TrackItem.vue

@@ -11,12 +11,12 @@ defineProps<{
 
 <template>
 	<button
-		class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden"
+		class="flex align-center gap-4 text-left px-2 h-[2.75rem] hover:bg-neutral-600/40 odd:bg-netural-600/20 align-center relative overflow-hidden bg-neutral-800/20 odd:bg-neutral-800/40 transition-all"
 		@click="playfrom(index)">
-		
-		<span class="text-[3.7rem] text-white/20 absolute right-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
 
-		<div class="flex flex-col justify-center">
+		<span class="text-[3.7rem] text-white/10 absolute left-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
+
+		<div class="flex flex-col justify-center ml-4">
 			<div class="text-white text-base">{{ track.name }}</div>
 			<div class="text-white/50 text-sm"
 				v-if="artistsOrganize(track.artists ?? []) !== artistsOrganize(album?.artistes ?? [])">
@@ -24,6 +24,6 @@ defineProps<{
 			</div>
 		</div>
 
-		
+
 	</button>
 </template>