88 lines
3.4 KiB
Svelte
88 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import formatDuration from '$lib/formatDuration';
|
|
import { formatViews } from '$lib/formatViews';
|
|
import { onMount } from 'svelte';
|
|
let songList: MusicMetadata[] = [];
|
|
|
|
onMount(async () => {
|
|
fetch('/api/database/songs')
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
songList = data;
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
return [];
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>AquaVox 音乐数据库</title>
|
|
</svelte:head>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center h-20 mb-8">
|
|
<h1>AquaVox 音乐数据库</h1>
|
|
<a
|
|
href="/database/submit"
|
|
class="h-12 w-24 border-black dark:border-white border-2 flex items-center justify-center rounded-lg"
|
|
>提交新曲</a
|
|
>
|
|
</div>
|
|
|
|
<div class="grid mb-32" style="grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
|
justify-content: space-between;
|
|
gap: 2rem 1rem;">
|
|
{#each songList as song}
|
|
<a
|
|
class="relative w-56 h-56 bg-zinc-300 dark:bg-zinc-600 rounded-lg overflow-hidden
|
|
shadow-lg cursor-pointer justify-self-center"
|
|
href={song.url}
|
|
>
|
|
<div
|
|
class="absolute top-0 left-0 w-full h-full duration-100
|
|
z-10 opacity-0 hover:opacity-100 bg-[rgba(0,0,0,0.15)]"
|
|
>
|
|
<a
|
|
class="brightness-125 absolute top-2 right-2 w-8 h-8 rounded-full
|
|
bg-[rgba(49,49,49,0.7)] backdrop-blur-lg z-10 hover:bg-red-500"
|
|
href={`/database/edit/${song.id}`}
|
|
>
|
|
<img class="relative w-4 h-4 top-2 left-2 scale-90" src="/edit.svg" alt="编辑" />
|
|
</a>
|
|
</div>
|
|
<img src={song.coverURL[0]} class="w-56 h-56" alt="" />
|
|
<div
|
|
class="absolute bottom-0 w-full h-28 backdrop-blur-xl"
|
|
style="mask-image: linear-gradient(to top, black 50%, transparent);"
|
|
>
|
|
<div class="absolute bottom-0 w-full h-16 pl-2">
|
|
<span
|
|
class="font-semibold text-2xl text-white"
|
|
style="text-shadow: 0px 0px 4px rgba(65, 65, 65, .6);">{song.name}</span
|
|
>
|
|
<br />
|
|
<span
|
|
class="relative inline-block whitespace-nowrap text-white w-40
|
|
overflow-hidden text-ellipsis"
|
|
style="text-shadow: 0px 0px 4px rgba(65, 65, 65, .6);"
|
|
>
|
|
{song.singer.join(', ')}
|
|
</span>
|
|
<div class="absolute right-2 bottom-2 text-right">
|
|
{#if song.duration}
|
|
<span>{formatDuration(song.duration)}</span>
|
|
{/if}
|
|
<br />
|
|
{#if song.views}
|
|
<span>{formatViews(song.views)}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|