feat: 初始化音乐项目后台管理系统- 新增后台管理相关页面和功能组件
- 实现管理员评论管理、数据统计等功能 - 添加后台布局和路由管理 -配置数据库和Redis连接 - 实现文件上传和访问路径配置 - 添加Sa-Token安全配置
This commit is contained in:
ikmkj
226
music-qianduan/src/views/user/CollectMusic.vue
Normal file
226
music-qianduan/src/views/user/CollectMusic.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { usePlayerStore } from '../../stores/player'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getCollectedMusic, toggleCollectMusic } from '../../api/music'
|
||||
import { processImageUrl } from '../../utils/imageUtils'
|
||||
|
||||
const playerStore = usePlayerStore()
|
||||
|
||||
// 收藏的音乐列表
|
||||
const collectMusicList = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 获取收藏的音乐列表
|
||||
const fetchCollectMusic = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCollectedMusic()
|
||||
if (res.code === 200) {
|
||||
// 处理数据
|
||||
const musicList = res.data.records || res.data.list || []
|
||||
|
||||
// 处理音乐数据
|
||||
collectMusicList.value = musicList.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
singer: item.singerNames || item.singer || '未知歌手',
|
||||
album: item.album || '未知专辑',
|
||||
duration: item.duration || 0,
|
||||
cover: processImageUrl(item.cover),
|
||||
url: item.url,
|
||||
collectTime: item.collectTime ? new Date(item.collectTime).toLocaleDateString() : '未知'
|
||||
}))
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取收藏的音乐列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取收藏的音乐列表失败:', error)
|
||||
ElMessage.error('获取收藏的音乐列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 播放音乐
|
||||
const playMusic = (music) => {
|
||||
playerStore.setCurrentMusic(music)
|
||||
}
|
||||
|
||||
// 取消收藏音乐
|
||||
const cancelCollect = (id) => {
|
||||
ElMessageBox.confirm('确定要取消收藏该音乐吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await toggleCollectMusic(id)
|
||||
if (res.code === 200) {
|
||||
// 从列表中移除该音乐
|
||||
collectMusicList.value = collectMusicList.value.filter(item => item.id !== id)
|
||||
ElMessage.success('已取消收藏')
|
||||
} else {
|
||||
ElMessage.error(res.message || '取消收藏失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('取消收藏失败:', error)
|
||||
ElMessage.error('取消收藏失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 添加到播放列表
|
||||
const addToPlaylist = (music) => {
|
||||
playerStore.addToPlaylist(music)
|
||||
ElMessage.success('已添加到播放列表')
|
||||
}
|
||||
|
||||
// 播放全部
|
||||
const playAll = () => {
|
||||
if (collectMusicList.value.length === 0) {
|
||||
ElMessage.warning('没有可播放的音乐')
|
||||
return
|
||||
}
|
||||
|
||||
// 清空当前播放列表
|
||||
playerStore.clearPlaylist()
|
||||
|
||||
// 添加所有音乐到播放列表
|
||||
collectMusicList.value.forEach(music => {
|
||||
playerStore.addToPlaylist(music)
|
||||
})
|
||||
|
||||
// 播放第一首
|
||||
playerStore.setCurrentMusic(collectMusicList.value[0])
|
||||
|
||||
ElMessage.success('开始播放全部收藏音乐')
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (seconds) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCollectMusic()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="collect-music-container">
|
||||
<div class="collect-music-header">
|
||||
<h2>我收藏的音乐</h2>
|
||||
<el-button type="primary" @click="playAll" :disabled="collectMusicList.length === 0">
|
||||
<el-icon><video-play /></el-icon>
|
||||
播放全部
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 音乐列表 -->
|
||||
<div class="music-list-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="collectMusicList"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
@row-dblclick="playMusic"
|
||||
>
|
||||
<el-table-column width="80" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
circle
|
||||
:icon="'VideoPlay'"
|
||||
size="small"
|
||||
@click="playMusic(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="封面" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<img
|
||||
:src="scope.row.cover"
|
||||
:alt="scope.row.name"
|
||||
class="music-cover"
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="歌曲名" min-width="200"></el-table-column>
|
||||
|
||||
<el-table-column prop="singer" label="歌手" min-width="150"></el-table-column>
|
||||
|
||||
<el-table-column prop="album" label="专辑" min-width="150"></el-table-column>
|
||||
|
||||
<el-table-column prop="duration" label="时长" width="100" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatTime(scope.row.duration) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="collectTime" label="收藏时间" width="120" align="center"></el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="150" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
circle
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="cancelCollect(scope.row.id)"
|
||||
></el-button>
|
||||
|
||||
<el-button
|
||||
icon="Plus"
|
||||
circle
|
||||
size="small"
|
||||
@click="addToPlaylist(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="collectMusicList.length === 0 && !loading"
|
||||
description="暂无收藏的音乐"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.collect-music-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collect-music-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.collect-music-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.music-list-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.music-cover {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
271
music-qianduan/src/views/user/CollectPlaylist.vue
Normal file
271
music-qianduan/src/views/user/CollectPlaylist.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getCollectedPlaylist, toggleCollectPlaylist } from '../../api/playlist'
|
||||
import { processImageUrl } from '../../utils/imageUtils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 收藏的歌单列表
|
||||
const collectPlaylists = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 获取收藏的歌单列表
|
||||
const fetchCollectPlaylists = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCollectedPlaylist()
|
||||
if (res.code === 200) {
|
||||
// 处理数据
|
||||
const playlists = res.data.records || res.data.list || []
|
||||
|
||||
// 处理歌单数据
|
||||
collectPlaylists.value = playlists.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
description: item.description || '暂无描述',
|
||||
creator: item.creatorName || '未知用户',
|
||||
cover: processImageUrl(item.cover),
|
||||
songCount: item.songCount || 0,
|
||||
playCount: item.playCount || 0,
|
||||
collectTime: item.collectTime ? new Date(item.collectTime).toLocaleDateString() : '未知'
|
||||
}))
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取收藏的歌单列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取收藏的歌单列表失败:', error)
|
||||
ElMessage.error('获取收藏的歌单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查看歌单详情
|
||||
const viewPlaylistDetail = (id) => {
|
||||
router.push(`/playlist/${id}`)
|
||||
}
|
||||
|
||||
// 取消收藏歌单
|
||||
const cancelCollect = (id, event) => {
|
||||
event.stopPropagation()
|
||||
|
||||
ElMessageBox.confirm('确定要取消收藏该歌单吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await toggleCollectPlaylist(id)
|
||||
if (res.code === 200) {
|
||||
// 从列表中移除该歌单
|
||||
collectPlaylists.value = collectPlaylists.value.filter(item => item.id !== id)
|
||||
ElMessage.success('已取消收藏')
|
||||
} else {
|
||||
ElMessage.error(res.message || '取消收藏失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('取消收藏失败:', error)
|
||||
ElMessage.error('取消收藏失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 格式化播放次数
|
||||
const formatPlayCount = (count) => {
|
||||
if (count < 10000) {
|
||||
return count.toString()
|
||||
} else if (count < 100000000) {
|
||||
return (count / 10000).toFixed(1) + '万'
|
||||
} else {
|
||||
return (count / 100000000).toFixed(1) + '亿'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCollectPlaylists()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="collect-playlist-container">
|
||||
<div class="collect-playlist-header">
|
||||
<h2>我收藏的歌单</h2>
|
||||
</div>
|
||||
|
||||
<!-- 歌单列表 -->
|
||||
<div class="playlist-list" v-loading="loading">
|
||||
<div
|
||||
v-for="playlist in collectPlaylists"
|
||||
:key="playlist.id"
|
||||
class="playlist-item"
|
||||
@click="viewPlaylistDetail(playlist.id)"
|
||||
>
|
||||
<div class="playlist-cover">
|
||||
<img :src="playlist.cover" :alt="playlist.name">
|
||||
<div class="playlist-info-overlay">
|
||||
<div class="playlist-play-count">
|
||||
<el-icon><video-play /></el-icon>
|
||||
{{ formatPlayCount(playlist.playCount) }}
|
||||
</div>
|
||||
<div class="playlist-actions">
|
||||
<el-button
|
||||
circle
|
||||
:icon="'VideoPlay'"
|
||||
@click.stop="viewPlaylistDetail(playlist.id)"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
:icon="'Delete'"
|
||||
type="danger"
|
||||
@click.stop="cancelCollect(playlist.id, $event)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-name">{{ playlist.name }}</div>
|
||||
<div class="playlist-desc">{{ playlist.description }}</div>
|
||||
<div class="playlist-meta">
|
||||
<span>{{ playlist.songCount }}首歌曲</span>
|
||||
<span>收藏于 {{ playlist.collectTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="collectPlaylists.length === 0 && !loading"
|
||||
description="暂无收藏的歌单"
|
||||
></el-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.collect-playlist-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collect-playlist-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.collect-playlist-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.playlist-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.playlist-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playlist-cover img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.playlist-item:hover .playlist-cover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.playlist-info-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.playlist-item:hover .playlist-info-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.playlist-play-count {
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.playlist-play-count .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.playlist-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.playlist-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.playlist-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.playlist-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
243
music-qianduan/src/views/user/CollectSinger.vue
Normal file
243
music-qianduan/src/views/user/CollectSinger.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getCollectedSinger, toggleCollectSinger } from '../../api/singer'
|
||||
import { processImageUrl } from '../../utils/imageUtils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 收藏的歌手列表
|
||||
const collectSingers = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 获取收藏的歌手列表
|
||||
const fetchCollectSingers = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCollectedSinger()
|
||||
if (res.code === 200) {
|
||||
// 处理数据
|
||||
const singers = res.data.records || res.data.list || []
|
||||
|
||||
// 处理歌手数据
|
||||
collectSingers.value = singers.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
avatar: processImageUrl(item.avatar),
|
||||
type: item.type || 0,
|
||||
musicCount: item.musicCount || 0,
|
||||
|
||||
fansCount: item.fansCount || 0,
|
||||
collectTime: item.collectTime ? new Date(item.collectTime).toLocaleDateString() : '未知'
|
||||
}))
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取收藏的歌手列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取收藏的歌手列表失败:', error)
|
||||
ElMessage.error('获取收藏的歌手列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查看歌手详情
|
||||
const viewSingerDetail = (id) => {
|
||||
router.push(`/singer/${id}`)
|
||||
}
|
||||
|
||||
// 取消收藏歌手
|
||||
const cancelCollect = (id, event) => {
|
||||
event.stopPropagation()
|
||||
|
||||
ElMessageBox.confirm('确定要取消收藏该歌手吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await toggleCollectSinger(id)
|
||||
if (res.code === 200) {
|
||||
// 从列表中移除该歌手
|
||||
collectSingers.value = collectSingers.value.filter(item => item.id !== id)
|
||||
ElMessage.success('已取消收藏')
|
||||
} else {
|
||||
ElMessage.error(res.message || '取消收藏失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('取消收藏失败:', error)
|
||||
ElMessage.error('取消收藏失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 格式化粉丝数
|
||||
const formatFans = (count) => {
|
||||
if (count < 10000) {
|
||||
return count.toString()
|
||||
} else if (count < 100000000) {
|
||||
return (count / 10000).toFixed(1) + '万'
|
||||
} else {
|
||||
return (count / 100000000).toFixed(1) + '亿'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCollectSingers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="collect-singer-container">
|
||||
<div class="collect-singer-header">
|
||||
<h2>我收藏的歌手</h2>
|
||||
</div>
|
||||
|
||||
<!-- 歌手列表 -->
|
||||
<div class="singer-list" v-loading="loading">
|
||||
<div
|
||||
v-for="singer in collectSingers"
|
||||
:key="singer.id"
|
||||
class="singer-item"
|
||||
@click="viewSingerDetail(singer.id)"
|
||||
>
|
||||
<div class="singer-avatar">
|
||||
<img :src="singer.avatar" :alt="singer.name">
|
||||
<div class="singer-overlay">
|
||||
<el-button
|
||||
circle
|
||||
icon="Delete"
|
||||
type="danger"
|
||||
@click="(event) => cancelCollect(singer.id, event)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="singer-info">
|
||||
<div class="singer-name">{{ singer.name }}</div>
|
||||
<div class="singer-stats">
|
||||
<span>{{ singer.musicCount }}首歌曲</span>
|
||||
|
||||
<span>{{ formatFans(singer.fansCount) }}粉丝</span>
|
||||
</div>
|
||||
<div class="singer-collect-time">
|
||||
收藏于 {{ singer.collectTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="collectSingers.length === 0 && !loading"
|
||||
description="暂无收藏的歌手"
|
||||
></el-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.collect-singer-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collect-singer-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.collect-singer-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.singer-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.singer-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.singer-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.singer-avatar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.singer-avatar img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.singer-item:hover .singer-avatar img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.singer-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.singer-item:hover .singer-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.singer-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.singer-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.singer-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.singer-stats span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.singer-collect-time {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
199
music-qianduan/src/views/user/Password.vue
Normal file
199
music-qianduan/src/views/user/Password.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { changePassword } from '../../api/user'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
|
||||
// 修改密码表单
|
||||
const passwordForm = reactive({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
// 表单规则
|
||||
const passwordRules = {
|
||||
oldPassword: [
|
||||
{ required: true, message: '请输入原密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度应为6-20个字符', trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度应为6-20个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== passwordForm.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const passwordFormRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 提交修改密码表单
|
||||
const submitPasswordForm = () => {
|
||||
passwordFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await changePassword({
|
||||
oldPassword: passwordForm.oldPassword,
|
||||
newPassword: passwordForm.newPassword
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('密码修改成功')
|
||||
resetForm()
|
||||
} else {
|
||||
ElMessage.error(res.message || '密码修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('密码修改失败:', error)
|
||||
ElMessage.error('密码修改失败，请稍后再试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
passwordFormRef.value.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="password-container">
|
||||
<div class="password-header">
|
||||
<h2>修改密码</h2>
|
||||
</div>
|
||||
|
||||
<div class="password-form-container">
|
||||
<el-form
|
||||
ref="passwordFormRef"
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
label-width="100px"
|
||||
class="password-form"
|
||||
>
|
||||
<el-form-item label="原密码" prop="oldPassword">
|
||||
<el-input
|
||||
v-model="passwordForm.oldPassword"
|
||||
type="password"
|
||||
placeholder="请输入原密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="passwordForm.newPassword"
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="确认新密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请确认新密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="submitPasswordForm">
|
||||
修改密码
|
||||
</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="password-tips">
|
||||
<h3>密码修改提示：</h3>
|
||||
<ul>
|
||||
<li>密码长度应为6-20个字符</li>
|
||||
<li>建议使用字母、数字和特殊字符的组合</li>
|
||||
<li>不要使用与旧密码相似的新密码</li>
|
||||
<li>不要使用容易被猜到的密码，如生日、手机号等</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.password-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.password-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.password-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.password-form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.password-tips {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.password-tips h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.password-tips ul {
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.password-tips li {
|
||||
margin-bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.password-form-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
562
music-qianduan/src/views/user/Playlist.vue
Normal file
562
music-qianduan/src/views/user/Playlist.vue
Normal file
@@ -0,0 +1,562 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getUserPlaylist, addPlaylist, updatePlaylist, deletePlaylist } from '../../api/playlist'
|
||||
import { processImageUrl } from '../../utils/imageUtils'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 自建歌单列表
|
||||
const userPlaylists = ref([])
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 创建歌单对话框
|
||||
const createDialogVisible = ref(false)
|
||||
|
||||
// 编辑歌单对话框
|
||||
const editDialogVisible = ref(false)
|
||||
|
||||
// 当前编辑的歌单
|
||||
const currentPlaylist = ref(null)
|
||||
|
||||
// 创建歌单表单
|
||||
const createForm = reactive({
|
||||
name: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
// 编辑歌单表单
|
||||
const editForm = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
// 表单规则
|
||||
const formRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入歌单名称', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '长度在1到50个字符之间', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 表单引用
|
||||
const createFormRef = ref(null)
|
||||
const editFormRef = ref(null)
|
||||
|
||||
// 头像上传URL
|
||||
const coverUploadUrl = ref(`${import.meta.env.VITE_API_BASE_URL || ''}/api/file/upload/image`)
|
||||
|
||||
// 头像上传headers
|
||||
const uploadHeaders = ref({
|
||||
[userStore.tokenName]: userStore.token
|
||||
})
|
||||
|
||||
// 获取自建歌单列表
|
||||
const fetchUserPlaylists = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getUserPlaylist()
|
||||
if (res.code === 200) {
|
||||
// 处理数据
|
||||
const playlists = res.data.records || res.data.list || []
|
||||
|
||||
// 处理歌单数据
|
||||
userPlaylists.value = playlists.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
description: item.description || '暂无描述',
|
||||
cover: processImageUrl(item.cover),
|
||||
songCount: item.songCount || 0,
|
||||
createTime: item.createTime ? new Date(item.createTime).toLocaleDateString() : '未知'
|
||||
}))
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取自建歌单列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取自建歌单列表失败:', error)
|
||||
ElMessage.error('获取自建歌单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查看歌单详情
|
||||
const viewPlaylistDetail = (id) => {
|
||||
router.push(`/playlist/${id}`)
|
||||
}
|
||||
|
||||
// 打开创建歌单对话框
|
||||
const openCreateDialog = () => {
|
||||
createForm.name = ''
|
||||
createForm.description = ''
|
||||
createDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 打开编辑歌单对话框
|
||||
const openEditDialog = (playlist) => {
|
||||
currentPlaylist.value = playlist
|
||||
editForm.id = playlist.id
|
||||
editForm.name = playlist.name
|
||||
editForm.description = playlist.description
|
||||
editDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 创建歌单
|
||||
const handleCreatePlaylist = () => {
|
||||
createFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const res = await addPlaylist({
|
||||
name: createForm.name,
|
||||
description: createForm.description
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
// 创建成功，重新获取歌单列表
|
||||
await fetchUserPlaylists()
|
||||
createDialogVisible.value = false
|
||||
ElMessage.success('歌单创建成功')
|
||||
} else {
|
||||
ElMessage.error(res.message || '歌单创建失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('歌单创建失败:', error)
|
||||
ElMessage.error('歌单创建失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑歌单
|
||||
const handleUpdatePlaylist = () => {
|
||||
editFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const res = await updatePlaylist(editForm.id, {
|
||||
name: editForm.name,
|
||||
description: editForm.description
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新成功，重新获取歌单列表
|
||||
await fetchUserPlaylists()
|
||||
editDialogVisible.value = false
|
||||
ElMessage.success('歌单更新成功')
|
||||
} else {
|
||||
ElMessage.error(res.message || '歌单更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('歌单更新失败:', error)
|
||||
ElMessage.error('歌单更新失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除歌单
|
||||
const handleDeletePlaylist = (id) => {
|
||||
ElMessageBox.confirm('确定要删除该歌单吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deletePlaylist(id)
|
||||
if (res.code === 200) {
|
||||
// 删除成功，重新获取歌单列表
|
||||
await fetchUserPlaylists()
|
||||
ElMessage.success('歌单删除成功')
|
||||
} else {
|
||||
ElMessage.error(res.message || '歌单删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('歌单删除失败:', error)
|
||||
ElMessage.error('歌单删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 封面上传成功
|
||||
const handleCoverSuccess = async (response) => {
|
||||
if (response.code === 200) {
|
||||
// 上传成功，获取图片URL
|
||||
const imageUrl = response.data
|
||||
|
||||
try {
|
||||
// 更新歌单封面
|
||||
const res = await updatePlaylist(currentPlaylist.value.id, {
|
||||
...editForm,
|
||||
cover: imageUrl
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新成功，重新获取歌单列表
|
||||
await fetchUserPlaylists()
|
||||
ElMessage.success('封面上传成功')
|
||||
} else {
|
||||
ElMessage.error(res.message || '更新歌单封面失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新歌单封面失败:', error)
|
||||
ElMessage.error('更新歌单封面失败')
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message || '封面上传失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 封面上传前的处理
|
||||
const beforeCoverUpload = (file) => {
|
||||
const isJPG = file.type === 'image/jpeg'
|
||||
const isPNG = file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
if (!isJPG && !isPNG) {
|
||||
ElMessage.error('封面只能是JPG或PNG格式!')
|
||||
return false
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('封面大小不能超过2MB!')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchUserPlaylists()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-playlist-container">
|
||||
<div class="user-playlist-header">
|
||||
<h2>我的歌单</h2>
|
||||
<el-button type="primary" @click="openCreateDialog">
|
||||
<el-icon><plus /></el-icon>
|
||||
创建歌单
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 歌单列表 -->
|
||||
<div class="playlist-list" v-loading="loading">
|
||||
<div
|
||||
v-for="playlist in userPlaylists"
|
||||
:key="playlist.id"
|
||||
class="playlist-item"
|
||||
>
|
||||
<div class="playlist-cover" @click="viewPlaylistDetail(playlist.id)">
|
||||
<img :src="playlist.cover" :alt="playlist.name">
|
||||
<div class="playlist-info-overlay">
|
||||
<div class="playlist-song-count">
|
||||
<el-icon><headset /></el-icon>
|
||||
{{ playlist.songCount }}首歌曲
|
||||
</div>
|
||||
<div class="playlist-actions">
|
||||
<el-button
|
||||
circle
|
||||
:icon="'VideoPlay'"
|
||||
@click.stop="viewPlaylistDetail(playlist.id)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-name" @click="viewPlaylistDetail(playlist.id)">{{ playlist.name }}</div>
|
||||
<div class="playlist-desc">{{ playlist.description }}</div>
|
||||
<div class="playlist-meta">
|
||||
<span>创建于 {{ playlist.createTime }}</span>
|
||||
<div class="playlist-operations">
|
||||
<el-button
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openEditDialog(playlist)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
text
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDeletePlaylist(playlist.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="userPlaylists.length === 0 && !loading"
|
||||
description="暂无创建的歌单"
|
||||
>
|
||||
<el-button type="primary" @click="openCreateDialog">创建歌单</el-button>
|
||||
</el-empty>
|
||||
|
||||
<!-- 创建歌单对话框 -->
|
||||
<el-dialog
|
||||
v-model="createDialogVisible"
|
||||
title="创建歌单"
|
||||
width="500px"
|
||||
>
|
||||
<el-form
|
||||
ref="createFormRef"
|
||||
:model="createForm"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="歌单名称" prop="name">
|
||||
<el-input v-model="createForm.name" placeholder="请输入歌单名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="歌单描述" prop="description">
|
||||
<el-input
|
||||
v-model="createForm.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入歌单描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="createDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleCreatePlaylist">创建</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑歌单对话框 -->
|
||||
<el-dialog
|
||||
v-model="editDialogVisible"
|
||||
title="编辑歌单"
|
||||
width="500px"
|
||||
>
|
||||
<el-form
|
||||
ref="editFormRef"
|
||||
:model="editForm"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="封面">
|
||||
<el-upload
|
||||
class="cover-uploader"
|
||||
:action="coverUploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:on-success="handleCoverSuccess"
|
||||
:before-upload="beforeCoverUpload"
|
||||
>
|
||||
<img
|
||||
v-if="currentPlaylist"
|
||||
:src="currentPlaylist.cover"
|
||||
class="cover"
|
||||
/>
|
||||
<el-icon v-else class="cover-uploader-icon"><plus /></el-icon>
|
||||
<div class="cover-tip">点击上传</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="歌单名称" prop="name">
|
||||
<el-input v-model="editForm.name" placeholder="请输入歌单名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="歌单描述" prop="description">
|
||||
<el-input
|
||||
v-model="editForm.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入歌单描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleUpdatePlaylist">保存</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-playlist-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-playlist-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.user-playlist-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.playlist-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.playlist-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.playlist-cover img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.playlist-item:hover .playlist-cover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.playlist-info-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.playlist-item:hover .playlist-info-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.playlist-song-count {
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.playlist-song-count .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.playlist-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.playlist-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.playlist-name:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.playlist-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.playlist-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.playlist-operations {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cover-uploader {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cover-tip {
|
||||
margin-top: 5px;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user