feat(music): 添加点赞功能- 在 MusicList 组件中添加点赞按钮，用于切换歌曲点赞状态

- 在 MusicPlayer 组件中添加点赞按钮，用于切换当前播放歌曲的点赞状态
- 实现 toggleLike 方法，用于切换歌曲点赞状态并更新 UI
- 引入 Pointer 图标用于点赞按钮- 添加点赞相关的 API 调用

music-qianduan/src/components/MusicList.vue

@@ -72,6 +72,16 @@
             <el-icon><Star /></el-icon>
           </el-button>
 
+          <el-button
+            :type="item.liked ? 'success' : 'default'"
+            circle
+            size="small"
+            @click="toggleLike(item)"
+            :title="item.liked ? '取消点赞' : '点赞'"
+          >
+            <el-icon><Pointer /></el-icon>
+          </el-button>
+
           <el-button
             circle
             size="small"
@@ -115,9 +125,9 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { VideoPlay, VideoPause, Star, More, InfoFilled } from '@element-plus/icons-vue'
+import { VideoPlay, VideoPause, Star, More, InfoFilled, Pointer } from '@element-plus/icons-vue'
 import { usePlayerStore } from '../stores/player'
-import { toggleCollectMusic } from '../api/music'
+import { toggleCollectMusic, toggleLikeMusic } from '../api/music'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps({
@@ -147,7 +157,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change'])
+const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change', 'like-change'])
 
 const router = useRouter()
 
@@ -202,6 +212,23 @@ const toggleCollect = async (music) => {
   }
 }
 
+// 切换点赞状态
+const toggleLike = async (music) => {
+  try {
+    const res = await toggleLikeMusic(music.id)
+    if (res.code === 200) {
+      music.liked = !music.liked
+      ElMessage.success(music.liked ? '点赞成功' : '已取消点赞')
+      emit('like-change', music)
+    } else {
+      ElMessage.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('点赞操作失败:', error)
+    ElMessage.error('操作失败，请稍后重试')
+  }
+}
+
 // 处理下拉菜单命令
 const handleCommand = (command, music) => {
   switch (command) {

music-qianduan/src/components/MusicPlayer.vue

@@ -101,6 +101,16 @@
           </el-tooltip>
         </div>
 
+        <div class="like-button" v-if="currentMusic" style="margin-right: 15px;">
+          <el-tooltip :content="currentMusic.liked ? '取消点赞' : '点赞'" placement="top">
+            <el-button circle @click="toggleLike">
+              <el-icon>
+                <component :is="currentMusic.liked ? 'Pointer' : 'Pointer'" />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+
         <div class="playlist-toggle">
           <el-tooltip content="播放列表" placement="top">
             <el-button circle @click="togglePlaylist">
@@ -290,7 +300,7 @@ import { processMusicUrl, toggleCollectMusic, getMusicStatus } from '../api/musi
 import { ElMessage } from 'element-plus'
 import {
   VideoPlay, VideoPause, Back, Right, List, Close, Delete,
-  Mute, VideoCamera, Microphone, Star, StarFilled, ArrowDown
+  Mute, VideoCamera, Microphone, Star, StarFilled, ArrowDown, Pointer
 } from '@element-plus/icons-vue'
 
 const router = useRouter()
@@ -462,6 +472,29 @@ const toggleCollect = async () => {
   }
 }
 
+// 点赞/取消点赞
+const toggleLike = async () => {
+  if (!userStore.isLoggedIn) {
+    ElMessage.warning('请先登录')
+    router.push('/login')
+    return
+  }
+  if (!currentMusic.value || !currentMusic.value.id) return
+
+  try {
+    const res = await toggleLikeMusic(currentMusic.value.id)
+    if (res.code === 200) {
+      playerStore.updateCurrentMusicStatus({ liked: res.data })
+      ElMessage.success(res.message || (res.data ? '点赞成功' : '已取消点赞'))
+    } else {
+      ElMessage.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('点赞操作失败:', error)
+    ElMessage.error('操作失败，请稍后重试')
+  }
+}
+
 // 播放列表相关
 const togglePlaylist = () => playerStore.setShowPlaylist(!showPlaylist.value)
 const playFromPlaylist = (index) => playerStore.playFromPlaylist(index)