refactor(admin): 重构歌单管理功能提升代码质量

- 移除未使用的 computed 导入语句
- 添加错误处理工具 showErrorOnce 的导入
- 新增 playlistMusics 响应式变量存储歌单音乐数据
- 优化歌单详情加载逻辑,完善异常情况的数据重置
- 在音乐添加和移除操作后同步更新歌单列表数据
- 添加统一的错误处理机制替代原有 console.error
- 重构歌单权限校验逻辑,提取为独立的验证方法
- 增强管理员权限支持,允许后台管理员维护用户歌单
This commit is contained in:
ikmkj
2026-03-21 22:03:11 +08:00
parent f0fa9cf67d
commit f5d262f4fc
2 changed files with 683 additions and 665 deletions

View File

@@ -1,9 +1,10 @@
<script setup>
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPlaylistList, getPlaylistById, addPlaylist as apiAddPlaylist, updatePlaylist as apiUpdatePlaylist, deletePlaylist as apiDeletePlaylist } from '../../api/playlist'
import { getPlaylistTypeList } from '../../api/playlistType'
import { processMusicUrl } from '../../api/music'
import { showErrorOnce } from '../../utils/errorHandler'
// 歌单列表
const playlistList = ref([])
@@ -251,6 +252,7 @@ const musicDialogVisible = ref(false)
const currentPlaylistId = ref(null)
const currentPlaylistName = ref('')
const musicList = ref([])
const playlistMusics = ref([])
const selectedMusicIds = ref([])
const musicSearchKeyword = ref('')
const musicLoading = ref(false)
@@ -278,10 +280,17 @@ const fetchPlaylistMusic = async (playlistId) => {
try {
const res = await getPlaylistById(playlistId)
if (res.code === 200 && res.data.musics) {
playlistMusics.value = res.data.musics
selectedMusicIds.value = res.data.musics.map(m => m.id)
} else {
playlistMusics.value = []
selectedMusicIds.value = []
}
} catch (error) {
console.error('获取歌单音乐失败:', error)
playlistMusics.value = []
selectedMusicIds.value = []
showErrorOnce(error, '获取歌单音乐失败')
}
}
@@ -290,6 +299,8 @@ const managePlaylistMusic = async (row) => {
currentPlaylistId.value = row.id
currentPlaylistName.value = row.name
musicSearchKeyword.value = ''
playlistMusics.value = []
selectedMusicIds.value = []
musicDialogVisible.value = true
// 加载音乐列表和已选音乐
@@ -305,13 +316,16 @@ const addMusicToPlaylistLocal = async (musicId) => {
const res = await addMusicToPlaylist(currentPlaylistId.value, musicId)
if (res.code === 200) {
ElMessage.success('添加成功')
await fetchPlaylistMusic(currentPlaylistId.value)
await Promise.all([
fetchPlaylistMusic(currentPlaylistId.value),
fetchPlaylistList()
])
} else {
ElMessage.error(res.message || '添加失败')
}
} catch (error) {
console.error('添加音乐失败:', error)
ElMessage.error('添加失败')
showErrorOnce(error, '添加失败')
}
}
@@ -321,13 +335,16 @@ const removeMusicFromPlaylistLocal = async (musicId) => {
const res = await removeMusicFromPlaylist(currentPlaylistId.value, musicId)
if (res.code === 200) {
ElMessage.success('移除成功')
await fetchPlaylistMusic(currentPlaylistId.value)
await Promise.all([
fetchPlaylistMusic(currentPlaylistId.value),
fetchPlaylistList()
])
} else {
ElMessage.error(res.message || '移除失败')
}
} catch (error) {
console.error('移除音乐失败:', error)
ElMessage.error('移除失败')
showErrorOnce(error, '移除失败')
}
}
@@ -737,7 +754,7 @@ import { addMusicToPlaylist, removeMusicFromPlaylist } from '../../api/playlist'
<div class="selected-music-container">
<h3>已添加的音乐</h3>
<el-table
:data="musicList.filter(m => selectedMusicIds.includes(m.id))"
:data="playlistMusics"
stripe
style="width: 100%"
empty-text="暂无音乐"