Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source 
fix(TrackItem): adjust button hover effects and reposition track number display
This commit is contained in:
Astrian Zheng 2025-05-27 16:08:05 +10:00
parent 34aedfdb24
commit ca07ae3a8c
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/AlbumDetailDialog.vue
View File

@ -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"
@click.stop>
<div class="flex justify-end sticky top-0 z-10 mb-8">
class="max-w-[60rem] w-full h-[40rem] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto"
:style="{
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>

10
src/components/TrackItem.vue
View File

@ -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>