mirror of
https://github.com/atdunbg/Nekosonic-Music.git
synced 2026-06-22 00:58:51 +08:00
Atdunbg
3b800e451f
歌曲的艺术家现可点击查看其他歌曲，专辑和介绍 - **歌曲评论功能添加**: 添加歌曲的评论查看功能 - 修复私人漫游自动播放下一首调用多次问题 - 优化播放逻辑，歌曲列表在点击时候不在单首累加, 而是直接获取当前列表所有的歌曲作为播放内容
57 lines
3.9 KiB
Vue
57 lines
3.9 KiB
Vue
<template>
|
||
<div class="p-8 text-content">
|
||
<button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
|
||
← 返回
|
||
</button>
|
||
<h1 class="text-2xl font-bold mb-6">最近播放</h1>
|
||
<div v-if="player.recentLocal.length === 0" class="text-content-3">还没有播放记录，去听首歌吧</div>
|
||
<div v-else class="space-y-2">
|
||
<div
|
||
v-for="(song, index) in player.recentLocal"
|
||
:key="song.id"
|
||
@click="player.playFromList(player.recentLocal, index)"
|
||
class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
|
||
>
|
||
<span class="text-xs text-content-3 w-6 text-right">{{ index + 1 }}</span>
|
||
<img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium truncate">{{ song.name }}</p>
|
||
<p class="text-xs text-content-2 truncate">
|
||
<template v-for="(a, i) in song.ar || []" :key="a.id || i">
|
||
<span v-if="i > 0" class="text-content-3">/</span>
|
||
<span class="hover:text-accent-text cursor-pointer transition" @click.stop="a.id && router.push({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
|
||
</template>
|
||
<template v-if="song.al?.name">
|
||
<span class="text-content-3 mx-1">·</span>
|
||
<span class="hover:text-accent-text cursor-pointer transition" @click.stop="song.al.id && router.push({ name: 'album', params: { id: song.al.id } })">{{ song.al.name }}</span>
|
||
</template>
|
||
</p>
|
||
</div>
|
||
<button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
|
||
<svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||
</button>
|
||
<button @click.stop="download.downloadSong(song)" class="text-content-3 hover:text-accent-text transition flex-shrink-0" :title="download.isDownloaded(song.id) ? '已下载' : '下载'">
|
||
<svg v-if="download.isDownloading(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 11-6.22-8.56"/></svg>
|
||
<svg v-else-if="download.isDownloaded(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
</button>
|
||
<SongItemMenu :song-id="song.id" />
|
||
<span class="text-xs text-content-3">{{ formatDuration(song.dt ?? 0) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { usePlayerStore } from '../stores/player';
|
||
import { useDownload } from '../composables/useDownload';
|
||
import { formatDuration } from '../utils/format';
|
||
import { useRouter } from 'vue-router';
|
||
import SongItemMenu from '../components/SongItemMenu.vue';
|
||
|
||
const player = usePlayerStore();
|
||
const download = useDownload();
|
||
const router = useRouter();
|
||
</script>
|