449 lines
16 KiB
Vue
449 lines
16 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition duration-300 ease-out"
|
|
enter-from-class="opacity-0 scale-95"
|
|
enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="transition duration-200 ease-in"
|
|
leave-from-class="opacity-100 scale-100"
|
|
leave-to-class="opacity-0 scale-95"
|
|
>
|
|
<div
|
|
v-if="show"
|
|
class="fixed inset-0 z-[2000] flex items-center justify-center p-4 bg-bg-primary-80 backdrop-blur-sm"
|
|
@click.self="close"
|
|
>
|
|
<div
|
|
class="bg-bg-secondary border border-border-secondary w-full max-w-2xl rounded-3xl overflow-hidden shadow-2xl flex flex-col max-h-[85vh]"
|
|
>
|
|
<!-- 头部 -->
|
|
<div class="p-8 pb-4 flex items-center justify-between border-b border-border-secondary-50">
|
|
<div>
|
|
<h3 class="text-xl font-black text-text-primary tracking-tight flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 rounded-2xl bg-primary-hover-10 flex items-center justify-center text-primary"
|
|
>
|
|
<Icon name="history" :size="20" />
|
|
</div>
|
|
{{ locale.recentTitle }}
|
|
</h3>
|
|
<p class="text-xs text-text-tertiary mt-1 ml-13">{{ locale.recentDesc }}</p>
|
|
</div>
|
|
<button
|
|
class="p-3 bg-bg-tertiary-50 hover:bg-bg-tertiary text-text-tertiary hover:text-text-primary rounded-2xl transition-all"
|
|
@click="close"
|
|
>
|
|
<Icon name="x" :size="20" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 主体 -->
|
|
<div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
|
<div
|
|
v-if="loading"
|
|
class="flex flex-col items-center justify-center py-20 text-text-tertiary"
|
|
>
|
|
<Icon name="refresh" :size="32" class="animate-spin mb-4 text-primary" />
|
|
<div class="text-[10px] font-black uppercase tracking-widest">
|
|
{{ locale.loadingRecent }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="error"
|
|
class="flex flex-col items-center justify-center py-20 text-center px-8"
|
|
>
|
|
<div
|
|
class="w-16 h-16 rounded-2xl bg-error-10 flex items-center justify-center text-error mb-4"
|
|
>
|
|
<Icon name="alert-triangle" :size="32" />
|
|
</div>
|
|
<p class="text-sm text-text-tertiary mb-6">{{ error }}</p>
|
|
<button
|
|
class="px-6 py-3 bg-bg-tertiary hover:bg-bg-quaternary text-text-primary text-xs font-black rounded-xl transition-all uppercase tracking-widest"
|
|
@click="fetchRecentSongs"
|
|
>
|
|
{{ locale.retryLoad }}
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="songs.length === 0"
|
|
class="flex flex-col items-center justify-center py-20 text-text-disabled"
|
|
>
|
|
<Icon name="music" :size="48" class="mb-4 opacity-20" />
|
|
<p class="text-sm font-bold uppercase tracking-widest">{{ locale.noRecent }}</p>
|
|
</div>
|
|
|
|
<div v-else class="recent-song-list space-y-2">
|
|
<div
|
|
v-for="item in songs"
|
|
:key="item.resourceId"
|
|
class="group flex items-center gap-4 p-3 rounded-2xl hover:bg-bg-tertiary-50 transition-all border border-transparent hover:border-border-secondary"
|
|
>
|
|
<div
|
|
class="relative w-14 h-14 rounded-xl overflow-hidden bg-bg-tertiary flex-shrink-0 shadow-lg group-hover:scale-105 transition-transform duration-300"
|
|
>
|
|
<img
|
|
:src="convertToHttps(item.data?.al?.picUrl)"
|
|
alt="cover"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-bg-primary-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
|
|
@click.stop="playSong(item.data)"
|
|
>
|
|
<div
|
|
class="w-8 h-8 rounded-full bg-bg-secondary-20 backdrop-blur-md flex items-center justify-center text-text-primary border border-primary-30"
|
|
>
|
|
<Icon name="play" :size="14" class="fill-current" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<h4
|
|
:title="item.data?.name"
|
|
class="text-sm font-black text-text-primary truncate mb-1"
|
|
>
|
|
{{ item.data?.name }}
|
|
</h4>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[10px] text-text-tertiary font-medium whitespace-nowrap">{{
|
|
formatTime(item.playTime)
|
|
}}</span>
|
|
<span
|
|
class="text-[10px] text-text-disabled truncate font-bold uppercase tracking-tighter"
|
|
>{{ item.data?.ar?.map((a) => a.name).join('/') }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end gap-2">
|
|
<div
|
|
v-if="songsLoadingForSimilar"
|
|
class="flex items-center gap-2 px-3 py-1 bg-bg-tertiary-50 rounded-lg"
|
|
>
|
|
<Icon name="refresh" :size="10" class="animate-spin text-text-tertiary" />
|
|
<span class="text-[10px] text-text-tertiary font-black uppercase">{{ locale.checking }}</span>
|
|
</div>
|
|
<template v-else-if="getSimilarSong(item.data)">
|
|
<div
|
|
:class="[
|
|
'px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-tighter border',
|
|
getSimilarSong(item.data)?.played
|
|
? 'bg-success-10 text-success border-success-20'
|
|
: getSimilarSong(item.data)?.scheduled
|
|
? 'bg-warning-10 text-warning border-warning-20'
|
|
: 'bg-bg-tertiary text-text-tertiary border-border-tertiary'
|
|
]"
|
|
>
|
|
{{
|
|
getSimilarSong(item.data)?.played
|
|
? locale.played
|
|
: getSimilarSong(item.data)?.scheduled
|
|
? locale.scheduled
|
|
: locale.inList
|
|
}}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
v-if="getSimilarSong(item.data)?.played && isSuperAdmin"
|
|
:disabled="submitting"
|
|
class="px-3 py-1.5 bg-primary-hover hover:bg-primary text-text-primary text-[10px] font-black rounded-lg transition-all uppercase tracking-widest disabled:opacity-50"
|
|
@click="selectSong(item.data)"
|
|
>
|
|
{{
|
|
submitting && selectedSongId === item.data?.id ? locale.processing : locale.continueSubmit
|
|
}}
|
|
</button>
|
|
<button
|
|
v-else
|
|
:disabled="
|
|
getSimilarSong(item.data)?.played ||
|
|
getSimilarSong(item.data)?.scheduled ||
|
|
getSimilarSong(item.data)?.voted ||
|
|
submitting
|
|
"
|
|
class="px-3 py-1.5 bg-bg-tertiary hover:bg-bg-quaternary disabled:bg-bg-secondary-50 text-text-tertiary disabled:text-text-secondary text-[10px] font-black rounded-lg transition-all uppercase tracking-widest flex items-center gap-1.5"
|
|
@click="
|
|
getSimilarSong(item.data)?.played || getSimilarSong(item.data)?.scheduled
|
|
? null
|
|
: handleLike(getSimilarSong(item.data))
|
|
"
|
|
>
|
|
<Icon
|
|
name="heart"
|
|
:size="10"
|
|
:class="[
|
|
getSimilarSong(item.data)?.voted ? 'text-error fill-current' : ''
|
|
]"
|
|
/>
|
|
{{ getSimilarSong(item.data)?.voted ? locale.liked : locale.like }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<button
|
|
v-else
|
|
:disabled="submitting || songsLoadingForSimilar"
|
|
class="px-4 py-2 bg-primary-hover hover:bg-primary text-text-primary text-[10px] font-black rounded-xl transition-all uppercase tracking-widest active:scale-95 disabled:opacity-50 shadow-lg shadow-[var(--primary-glow)]"
|
|
@click="selectSong(item.data)"
|
|
>
|
|
{{
|
|
submitting && selectedSongId === item.data?.id ? locale.submitting : locale.selectSubmit
|
|
}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部栏 -->
|
|
<div
|
|
class="p-6 border-t border-border-secondary-50 bg-bg-secondary-50 flex items-center justify-end"
|
|
>
|
|
<button
|
|
class="px-6 py-3 bg-bg-tertiary hover:bg-bg-quaternary text-text-secondary text-xs font-black rounded-xl transition-all uppercase tracking-widest"
|
|
@click="close"
|
|
>
|
|
{{ locale.close }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import { getRecentSongs } from '~/utils/neteaseApi'
|
|
import { convertToHttps } from '~/utils/url'
|
|
import Icon from '~/components/UI/Icon.vue'
|
|
import { useLocale } from '~/utils/locale'
|
|
import { normalizeForMatch as normalizeString } from '~/utils/song-name-normalize'
|
|
import { useSongs } from '~/composables/useSongs'
|
|
import { useAuth } from '~/composables/useAuth'
|
|
import { useSemesters } from '~/composables/useSemesters'
|
|
|
|
const { songs: songsLocale } = useLocale()
|
|
const locale = computed(() => {
|
|
const base = songsLocale.value?.mediaModals || {}
|
|
const emptyText = () => ''
|
|
return useSafeLocale({
|
|
...base,
|
|
minutesAgo: base.minutesAgo || emptyText,
|
|
hoursAgo: base.hoursAgo || emptyText,
|
|
monthDay: base.monthDay || emptyText
|
|
})
|
|
})
|
|
|
|
const props = defineProps({
|
|
show: Boolean,
|
|
cookie: String
|
|
})
|
|
|
|
const emit = defineEmits(['close', 'submit', 'play'])
|
|
|
|
const songs = ref([])
|
|
const loading = ref(false)
|
|
const songsLoadingForSimilar = ref(false)
|
|
const error = ref('')
|
|
const submitting = ref(false)
|
|
const selectedSongId = ref(null)
|
|
|
|
const songService = useSongs()
|
|
const auth = useAuth()
|
|
const { currentSemester, fetchCurrentSemester } = useSemesters()
|
|
const isSuperAdmin = computed(() => auth.user.value?.role === 'SUPER_ADMIN')
|
|
|
|
// 检查是否已存在相似歌曲
|
|
const getSimilarSong = (songData) => {
|
|
if (!songData) return null
|
|
|
|
const title = songData.name
|
|
const artist = songData.ar?.map((a) => a.name).join('/')
|
|
|
|
if (!title || !artist) return null
|
|
|
|
const normalizedTitle = normalizeString(title)
|
|
const normalizedArtist = normalizeString(artist)
|
|
const currentSemesterName = currentSemester.value?.name
|
|
|
|
// 如果没有获取到当前学期信息，暂时不进行检查，避免误报
|
|
if (!currentSemesterName) return null
|
|
|
|
return songService.songs.value.find((song) => {
|
|
const songTitle = normalizeString(song.title)
|
|
const songArtist = normalizeString(song.artist)
|
|
const titleMatch = songTitle === normalizedTitle && songArtist === normalizedArtist
|
|
|
|
// 必须匹配当前学期
|
|
return titleMatch && song.semester === currentSemesterName
|
|
})
|
|
}
|
|
|
|
const formatTime = (timestamp) => {
|
|
if (!timestamp) return ''
|
|
const date = new Date(timestamp)
|
|
const now = getSyncedDate()
|
|
const diff = now - date
|
|
|
|
if (diff < 60000) return locale.value.justNow
|
|
if (diff < 3600000) return formatLocaleValue(locale.value.minutesAgo, Math.floor(diff / 60000))
|
|
if (diff < 86400000) return formatLocaleValue(locale.value.hoursAgo, Math.floor(diff / 3600000))
|
|
|
|
return formatLocaleValue(locale.value.monthDay, date.getMonth() + 1, date.getDate())
|
|
}
|
|
|
|
const fetchRecentSongs = async () => {
|
|
if (!props.cookie) return
|
|
|
|
loading.value = true
|
|
error.value = ''
|
|
|
|
try {
|
|
const { code, body, message } = await getRecentSongs(100, props.cookie)
|
|
if (code === 200 && body && body.list) {
|
|
songs.value = body.list.filter((item) => item.resourceType === 'SONG' && item.data)
|
|
} else {
|
|
error.value = message || locale.value.fetchRecentFailed
|
|
}
|
|
} catch (err) {
|
|
error.value = locale.value.networkFailed
|
|
console.error(err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.show,
|
|
async (newVal) => {
|
|
if (newVal) {
|
|
// 确保当前学期已加载，用于正确检查歌曲状态
|
|
if (!currentSemester.value) {
|
|
await fetchCurrentSemester()
|
|
}
|
|
|
|
fetchRecentSongs()
|
|
// 加载歌曲列表以便检查相似歌曲
|
|
if (
|
|
auth.isAuthenticated.value &&
|
|
(!songService.songs.value || songService.songs.value.length === 0)
|
|
) {
|
|
songsLoadingForSimilar.value = true
|
|
const currentSemesterName = currentSemester.value?.name
|
|
songService
|
|
.fetchSongs(true, currentSemesterName)
|
|
.catch((err) => {
|
|
console.error('加载歌曲列表失败:', err)
|
|
})
|
|
.finally(() => {
|
|
songsLoadingForSimilar.value = false
|
|
})
|
|
}
|
|
} else {
|
|
songs.value = []
|
|
submitting.value = false
|
|
selectedSongId.value = null
|
|
}
|
|
}
|
|
)
|
|
|
|
const handleLike = async (song) => {
|
|
if (!song || song.voted) {
|
|
return
|
|
}
|
|
|
|
if (song.played || song.scheduled) {
|
|
if (window.$showNotification) {
|
|
const message = song.played
|
|
? (locale.value.playedCannotLike || '已播放的歌曲不能点赞')
|
|
: (locale.value.scheduledCannotLike || '已排期的歌曲不能点赞')
|
|
window.$showNotification(message, 'warning')
|
|
}
|
|
return
|
|
}
|
|
|
|
try {
|
|
await songService.voteSong(song.id)
|
|
} catch (error) {
|
|
console.error('点赞失败:', error)
|
|
}
|
|
}
|
|
|
|
const playSong = (songData) => {
|
|
emit('play', {
|
|
id: songData.id,
|
|
title: songData.name,
|
|
artist: songData.ar?.map((a) => a.name).join('/'),
|
|
cover: songData.al?.picUrl,
|
|
albumId: songData.al?.id,
|
|
musicPlatform: 'netease',
|
|
musicId: songData.id.toString(),
|
|
sourceInfo: {
|
|
source: 'netease-backup',
|
|
type: 'song'
|
|
}
|
|
})
|
|
}
|
|
|
|
const selectSong = (songData) => {
|
|
selectedSongId.value = songData.id
|
|
submitting.value = true
|
|
|
|
const song = {
|
|
id: songData.id,
|
|
title: songData.name,
|
|
artist: songData.ar?.map((a) => a.name).join('/'),
|
|
cover: songData.al?.picUrl,
|
|
album: songData.al?.name,
|
|
albumId: songData.al?.id,
|
|
duration: songData.dt,
|
|
musicPlatform: 'netease',
|
|
musicId: songData.id.toString(),
|
|
sourceInfo: {
|
|
source: 'netease-backup',
|
|
type: 'song'
|
|
}
|
|
}
|
|
|
|
emit('submit', song)
|
|
// 不立即关闭，由父组件控制
|
|
}
|
|
|
|
const close = () => {
|
|
emit('close')
|
|
}
|
|
|
|
defineExpose({
|
|
resetSubmissionState: () => {
|
|
submitting.value = false
|
|
selectedSongId.value = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 自定义滚动条样式 */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: var(--text-muted);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
</style>
|