refactor(components): 重构 MusicList 组件以支持更多操作
- 在 MusicList 组件中添加 detailInMore 属性，用于控制是否显示更多操作 - 在 PlaylistDetail 和 SingerDetail 页面中使用 MusicList 组件替换原有的表格展示 - 优化了歌曲列表的展示和操作逻辑，提高了代码复用性和可维护性
This commit is contained in:
ikmkj
@@ -83,6 +83,7 @@
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="!detailInMore"
|
||||
circle
|
||||
size="small"
|
||||
@click="goToMusicDetail(item.id)"
|
||||
@@ -101,6 +102,7 @@
|
||||
<el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
|
||||
<el-dropdown-item v-if="detailInMore" command="goToMusicDetail">音乐详情</el-dropdown-item>
|
||||
<el-dropdown-item command="share" v-if="false">分享</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@@ -155,6 +157,10 @@ const props = defineProps({
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
detailInMore: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -265,6 +271,9 @@ const handleCommand = (command, music) => {
|
||||
case 'downloadLyric':
|
||||
downloadFile('lyric', music)
|
||||
break
|
||||
case 'goToMusicDetail':
|
||||
goToMusicDetail(music.id)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import { getMusicStatus } from '../api/music'
|
||||
import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
|
||||
import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
|
||||
import { processImageUrl } from '../utils/imageUtils'
|
||||
import MusicList from '../components/MusicList.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -485,77 +486,12 @@ onUnmounted(() => {
|
||||
<!-- 歌曲列表和评论 -->
|
||||
<el-tabs class="playlist-tabs">
|
||||
<el-tab-pane label="歌曲列表">
|
||||
<el-table
|
||||
:data="playlist.songs"
|
||||
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="song-cover"
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="歌曲名" min-width="200"></el-table-column>
|
||||
|
||||
<el-table-column label="歌手" min-width="150">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.singer">{{ scope.row.singer }}</span>
|
||||
<span v-else-if="scope.row.singers && scope.row.singers.length">
|
||||
{{ scope.row.singers.map(s => s.name).join(', ') }}
|
||||
</span>
|
||||
<span v-else>未知歌手</span>
|
||||
</template>
|
||||
</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 label="操作" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
|
||||
<el-button circle size="small">
|
||||
<el-icon><More /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="addToPlaylist">添加到播放列表</el-dropdown-item>
|
||||
<el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="!playlist.songs.length"
|
||||
description="歌单中暂无歌曲"
|
||||
></el-empty>
|
||||
<MusicList
|
||||
:list="playlist.songs"
|
||||
:loading="loading"
|
||||
:show-pagination="false"
|
||||
:detail-in-more="true"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane :label="`评论(${playlist.commentCount || 0})`">
|
||||
|
||||
@@ -9,6 +9,7 @@ import { getCommentList, addComment, deleteComment as apiDeleteComment } from '.
|
||||
import { processImageUrl } from '../utils/imageUtils'
|
||||
import { processMusicUrl, getMusicBySinger, getMusicStatus } from '../api/music'
|
||||
import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
|
||||
import MusicList from '../components/MusicList.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -501,72 +502,12 @@ onUnmounted(() => {
|
||||
<!-- 歌曲列表、专辑和评论 -->
|
||||
<el-tabs class="singer-tabs">
|
||||
<el-tab-pane label="热门歌曲">
|
||||
<el-table
|
||||
:data="songs"
|
||||
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="song-cover"
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="歌曲名" min-width="200"></el-table-column>
|
||||
|
||||
<el-table-column label="专辑" min-width="150">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.album">{{ scope.row.album }}</span>
|
||||
<span v-else>无专辑信息</span>
|
||||
</template>
|
||||
</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 label="操作" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
|
||||
<el-button circle size="small">
|
||||
<el-icon><More /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="addToPlaylist">添加到播放列表</el-dropdown-item>
|
||||
<el-dropdown-item command="playNext">下一首播放</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadMusic">下载音乐</el-dropdown-item>
|
||||
<el-dropdown-item command="downloadLyric">下载歌词</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty
|
||||
v-if="!songs.length"
|
||||
description="暂无歌曲"
|
||||
></el-empty>
|
||||
<MusicList
|
||||
:list="songs"
|
||||
:loading="loading"
|
||||
:show-pagination="false"
|
||||
:detail-in-more="true"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user