feat(comment): 添加音乐评论功能并优化热门音乐相关逻辑

- 在 CommentServiceImpl 中增加针对音乐的评论计数逻辑
- 在 Home.vue 中添加热门音乐推荐模块
- 修改 Music.vue 中的热门音乐获取逻辑，支持分页
- 在 MusicDetail.vue 中实现评论列表展示和评论提交功能
- 更新 MusicList.vue，增加音乐详情查看按钮
- 在 MusicServiceImpl 中同步更新播放次数和点赞数

music-qianduan/src/views/Music.vue

@@ -99,25 +99,29 @@ const handleCollectChange = (music) => {
 }
 
 // 获取热门音乐
-const fetchHotMusic = async () => {
+const fetchHotMusic = async (params = {}) => {
   loadingHot.value = true
   try {
-    const res = await getHotMusic(20) // 获取20首热门音乐
+    // 从缓存中获取全部50条热门音乐
+    const res = await getHotMusic(50)
     if (res.code === 200) {
-      hotMusicList.value = res.data || []
+      const allHotMusic = res.data || []
+      total.value = allHotMusic.length // 总数是50
 
-      // 处理音乐URL和封面URL
-      hotMusicList.value.forEach(music => {
-        if (music.url) {
-          music.url = processMusicUrl(music.url)
-        }
-        if (music.cover) {
-          music.cover = processMusicUrl(music.cover)
-        }
-        if (music.collected === undefined) {
-          music.collected = false
-        }
+      // 处理URL和收藏状态
+      allHotMusic.forEach(music => {
+        if (music.url) music.url = processMusicUrl(music.url)
+        if (music.cover) music.cover = processMusicUrl(music.cover)
+        if (music.collected === undefined) music.collected = false
       })
+
+      // 根据当前页码和每页数量进行前端分页
+      const page = params.page || currentPage.value
+      const size = params.size || pageSize.value
+      const startIndex = (page - 1) * size
+      const endIndex = startIndex + size
+      hotMusicList.value = allHotMusic.slice(startIndex, endIndex)
+
     } else {
       ElMessage.error(res.message || '获取热门音乐失败')
     }
@@ -223,7 +227,10 @@ onMounted(() => {
         <MusicList
           :list="hotMusicList"
           :loading="loadingHot"
-          :showPagination="false"
+          :total="total"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          @page-change="fetchHotMusic"
           @collect-change="handleCollectChange"
         />
       </el-tab-pane>