ikmkj/graduation-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化音乐项目后台管理系统- 新增后台管理相关页面和功能组件

Browse Source 
- 实现管理员评论管理、数据统计等功能
- 添加后台布局和路由管理
-配置数据库和Redis连接
- 实现文件上传和访问路径配置
- 添加Sa-Token安全配置
This commit is contained in:
ikmkj
2025-04-26 19:32:45 +08:00
commit b275ffab5a
185 changed files with 32763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

448
music-qianduan/src/views/MusicDetail.vue Normal file
View File

@@ -0,0 +1,448 @@
<template>
<div class="music-detail-page">
<el-skeleton :loading="loading" animated>
<template #template>
<div class="skeleton-container">
<el-skeleton-item variant="image" style="width: 240px; height: 240px; border-radius: 8px;" />
<div class="skeleton-content">
<el-skeleton-item variant="h1" style="width: 50%;" />
<el-skeleton-item variant="text" style="width: 30%; margin-top: 16px;" />
<el-skeleton-item variant="text" style="width: 40%; margin-top: 16px;" />
<el-skeleton-item variant="text" style="width: 60%; margin-top: 16px;" />
</div>
</div>
</template>
<template #default>
<div v-if="music" class="music-info">
<div class="music-cover">
<img :src="music.cover || '/default-cover.jpg'" alt="封面">
</div>
<div class="music-content">
<h1 class="music-name">{{ music.name }}</h1>
<div class="music-meta">
<div class="meta-item">
<span class="label">歌手：</span>
<span class="value">
<template v-if="music.singerNames && music.singerNames.length">
<span v-for="(singer, idx) in music.singerNames" :key="idx">
{{ singer }}{{ idx < music.singerNames.length - 1 ? '、' : '' }}
</span>
</template>
<span v-else>{{ music.singer || '未知歌手' }}</span>
</span>
</div>
<div class="meta-item">
<span class="label">专辑：</span>
<span class="value">{{ music.album || '-' }}</span>
</div>
<div class="meta-item">
<span class="label">类型：</span>
<span class="value">{{ music.typeName || '-' }}</span>
</div>
<div class="meta-item">
<span class="label">时长：</span>
<span class="value">{{ formatDuration(music.duration) }}</span>
</div>
<div class="meta-item">
<span class="label">发行日期：</span>
<span class="value">{{ music.releaseDate || '-' }}</span>
</div>
</div>
<div class="music-actions">
<el-button
type="primary"
@click="playMusic"
:icon="isPlaying ? 'VideoPause' : 'VideoPlay'"
>
{{ isPlaying ? '暂停' : '播放' }}
</el-button>
<el-button
:type="music.collected ? 'danger' : 'default'"
@click="toggleCollect"
:icon="music.collected ? 'Star' : 'StarFilled'"
>
{{ music.collected ? '已收藏' : '收藏' }}
</el-button>
<el-button
@click="addToPlaylist"
icon="Plus"
>
添加到播放列表
</el-button>
</div>
</div>
</div>
<div v-if="music && music.description" class="music-description">
<h2>歌曲简介</h2>
<p>{{ music.description }}</p>
</div>
<div v-if="music && music.lyric" class="music-lyric">
<h2>歌词</h2>
<pre>{{ music.lyric }}</pre>
</div>
<div v-if="relatedMusic.length > 0" class="related-music">
<h2>相关推荐</h2>
<el-row :gutter="20">
<el-col
v-for="item in relatedMusic"
:key="item.id"
:xs="12"
:sm="8"
:md="6"
:lg="4"
>
<div class="music-card" @click="goToMusic(item.id)">
<div class="card-cover">
<img :src="item.cover || '/default-cover.jpg'" alt="封面">
<div class="play-icon" @click.stop="playRelatedMusic(item)">
<el-icon><VideoPlay /></el-icon>
</div>
</div>
<div class="card-info">
<div class="card-name">{{ item.name }}</div>
<div class="card-singer">{{ getSingerNames(item) }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
</el-skeleton>
</div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePlayerStore } from '../stores/player'
import { getMusicById, toggleCollectMusic, getHotMusic } from '../api/music'
import { ElMessage } from 'element-plus'
import { VideoPlay, VideoPause, Star, StarFilled, Plus } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const playerStore = usePlayerStore()
const music = ref(null)
const loading = ref(true)
const relatedMusic = ref([])
// 计算属性
const isPlaying = computed(() => {
return playerStore.getCurrentMusic?.id === music.value?.id && playerStore.getIsPlaying
})
// 获取音乐详情
const fetchMusicDetail = async () => {
loading.value = true
try {
const id = route.params.id
if (!id) {
ElMessage.error('无效的音乐ID')
router.push('/music')
return
}
const res = await getMusicById(id)
if (res.code === 200) {
if (res.data) {
music.value = res.data
} else {
// 如果音乐不存在，显示提示并返回音乐列表页
ElMessage.warning('音乐不存在或已被删除')
router.push('/music')
}
} else {
ElMessage.error(res.message || '获取音乐详情失败')
router.push('/music')
}
} catch (error) {
console.error('获取音乐详情失败:', error)
ElMessage.error('获取音乐详情失败，请稍后重试')
router.push('/music')
} finally {
loading.value = false
}
}
// 获取相关音乐
const fetchRelatedMusic = async () => {
try {
const res = await getHotMusic(6)
if (res.code === 200) {
// 过滤掉当前音乐
relatedMusic.value = (res.data || []).filter(item => item.id !== music.value?.id)
}
} catch (error) {
console.error('获取相关音乐失败:', error)
}
}
// 播放音乐
const playMusic = () => {
if (isPlaying.value) {
playerStore.togglePlay()
} else {
playerStore.setCurrentMusic(music.value)
}
}
// 播放相关音乐
const playRelatedMusic = (item) => {
playerStore.setCurrentMusic(item)
}
// 切换收藏状态
const toggleCollect = async () => {
try {
const res = await toggleCollectMusic(music.value.id)
if (res.code === 200) {
music.value.collected = !music.value.collected
ElMessage.success(music.value.collected ? '收藏成功' : '已取消收藏')
} else {
ElMessage.error(res.message || '操作失败')
}
} catch (error) {
console.error('收藏操作失败:', error)
ElMessage.error('操作失败，请稍后重试')
}
}
// 添加到播放列表
const addToPlaylist = () => {
playerStore.addToPlaylist(music.value)
ElMessage.success('已添加到播放列表')
}
// 跳转到音乐详情
const goToMusic = (id) => {
router.push(`/music/${id}`)
}
// 获取歌手名称
const getSingerNames = (item) => {
if (!item) return ''
if (item.singerNames && item.singerNames.length > 0) {
return item.singerNames.join('、')
}
return item.singer || '未知歌手'
}
// 格式化时长
const formatDuration = (seconds) => {
if (!seconds) return '00:00'
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
// 监听路由变化，重新获取音乐详情
watch(() => route.params.id, (newId, oldId) => {
if (newId !== oldId) {
fetchMusicDetail()
fetchRelatedMusic()
}
})
onMounted(() => {
fetchMusicDetail()
fetchRelatedMusic()
})
</script>
<style scoped>
.music-detail-page {
padding: 20px;
}
.skeleton-container {
display: flex;
gap: 30px;
}
.skeleton-content {
flex: 1;
}
.music-info {
display: flex;
gap: 30px;
margin-bottom: 30px;
}
.music-cover {
width: 240px;
height: 240px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.music-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-content {
flex: 1;
}
.music-name {
font-size: 28px;
margin: 0 0 20px 0;
color: #303133;
}
.music-meta {
margin-bottom: 30px;
}
.meta-item {
margin-bottom: 10px;
font-size: 16px;
color: #606266;
}
.label {
font-weight: bold;
margin-right: 5px;
}
.music-actions {
display: flex;
gap: 15px;
}
.music-description, .music-lyric {
margin-bottom: 30px;
}
.music-description h2, .music-lyric h2, .related-music h2 {
font-size: 20px;
margin-bottom: 15px;
color: #303133;
}
.music-description p {
line-height: 1.6;
color: #606266;
}
.music-lyric pre {
white-space: pre-wrap;
line-height: 1.8;
color: #606266;
font-family: inherit;
}
.related-music {
margin-top: 30px;
}
.music-card {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.3s;
margin-bottom: 20px;
}
.music-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
}
.card-cover {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.card-cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.play-icon .el-icon {
font-size: 24px;
color: #fff;
}
.card-cover:hover .play-icon {
opacity: 1;
}
.card-info {
padding: 10px;
}
.card-name {
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-singer {
font-size: 12px;
color: #909399;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.music-info {
flex-direction: column;
}
.music-cover {
width: 100%;
height: auto;
aspect-ratio: 1;
max-width: 240px;
margin: 0 auto 20px;
}
}
</style>