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

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

music-qianduan/src/components/MusicList.vue

@@ -72,6 +72,15 @@
             <el-icon><Star /></el-icon>
           </el-button>
 
+          <el-button
+            circle
+            size="small"
+            @click="goToMusicDetail(item.id)"
+            title="查看详情"
+          >
+            <el-icon><InfoFilled /></el-icon>
+          </el-button>
+
           <el-dropdown trigger="click" @command="handleCommand($event, item)">
             <el-button circle size="small">
               <el-icon><More /></el-icon>
@@ -105,7 +114,8 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { VideoPlay, VideoPause, Star, More } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { VideoPlay, VideoPause, Star, More, InfoFilled } from '@element-plus/icons-vue'
 import { usePlayerStore } from '../stores/player'
 import { toggleCollectMusic } from '../api/music'
 import { ElMessage } from 'element-plus'
@@ -139,6 +149,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'collect-change'])
 
+const router = useRouter()
+
 // 使用本地状态来代替直接绑定到props
 const localCurrentPage = ref(props.currentPage)
 const localPageSize = ref(props.pageSize)
@@ -154,6 +166,11 @@ watch(() => props.pageSize, (newVal) => {
 
 const playerStore = usePlayerStore()
 
+// 跳转到音乐详情页
+const goToMusicDetail = (id) => {
+  router.push({ name: 'music-detail', params: { id } })
+}
+
 // 检查音乐是否正在播放
 const isPlaying = (id) => {
   return playerStore.getCurrentMusic?.id === id && playerStore.getIsPlaying