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

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

music-qianduan/src/views/Home.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 import { usePlayerStore } from '../stores/player'
 import { ElMessage } from 'element-plus'
 import HomeBanner from '../components/HomeBanner.vue'
-import { getLatestMusic } from '../api/music'
+import { getLatestMusic, getHotMusic } from '../api/music'
 import { getLatestPlaylist } from '../api/playlist'
 import { getLatestSinger } from '../api/singer'
 import { processMusicUrl } from '../api/music'
@@ -17,6 +17,10 @@ const playerStore = usePlayerStore()
 const newSongs = ref([])
 const loadingNewSongs = ref(false)
 
+// 热门音乐
+const hotSongs = ref([])
+const loadingHotSongs = ref(false)
+
 // 新歌单推荐
 const newPlaylists = ref([])
 const loadingNewPlaylists = ref(false)
@@ -48,6 +52,29 @@ const fetchLatestMusic = async () => {
   }
 }
 
+// 获取热门音乐
+const fetchHotMusic = async () => {
+  loadingHotSongs.value = true
+  try {
+    // 注意：这里调用的是新的 hot-music API
+    const res = await getHotMusic(8) // 获取8首热门音乐
+    if (res.code === 200) {
+      hotSongs.value = res.data.map(item => ({
+        ...item,
+        cover: processMusicUrl(item.cover),
+        url: processMusicUrl(item.url)
+      }))
+    } else {
+      ElMessage.error(res.message || '获取热门音乐失败')
+    }
+  } catch (error) {
+    console.error('获取热门音乐失败:', error)
+    ElMessage.error('获取热门音乐失败')
+  } finally {
+    loadingHotSongs.value = false
+  }
+}
+
 // 获取最新歌单
 const fetchLatestPlaylist = async () => {
   loadingNewPlaylists.value = true
@@ -121,6 +148,7 @@ const formatPlayCount = (count) => {
 onMounted(() => {
   // 获取数据
   fetchLatestMusic()
+  fetchHotMusic() // 获取热门音乐
   fetchLatestPlaylist()
   fetchLatestSinger()
 })
@@ -155,6 +183,28 @@ onMounted(() => {
       </div>
     </div>
 
+    <!-- 热门音乐推荐 -->
+    <div class="section hot-songs-section" v-loading="loadingHotSongs">
+      <div class="section-header">
+        <h2>热门音乐</h2>
+        <el-button text @click="router.push('/music')">查看更多</el-button>
+      </div>
+      <div class="song-list">
+        <div v-for="song in hotSongs" :key="song.id" class="song-item" @dblclick="playSong(song)">
+          <div class="song-cover">
+            <img :src="song.cover" :alt="song.name">
+            <div class="play-icon" @click="playSong(song)">
+              <el-icon><video-play /></el-icon>
+            </div>
+          </div>
+          <div class="song-info">
+            <div class="song-name">{{ song.name }}</div>
+            <div class="song-singer">{{ song.singer || (song.singers && song.singers.map(s => s.name).join(', ')) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 新歌单推荐 -->
     <div class="section new-playlists-section" v-loading="loadingNewPlaylists">
       <div class="section-header">