feat(music): 优化音乐数据加载和展示

- 优化音乐时长获取日志，增加文件名信息
- 添加歌手头像字段并处理相关逻辑
- 修改相关音乐推荐为热门音乐推荐- 优化相关音乐封面展示逻辑
- 使用 JOIN FETCH 优化音乐数据加载性能

music-qianduan/src/api/music.js

@@ -73,7 +73,19 @@ export function getHotMusic(limit = 10) {
   // 更新：调用新的热门音乐接口
   return api.get('/hot-music/list', {
     params: { limit }
-  })
+  }).then(res => {
+    if (res.code === 200 && res.data && Array.isArray(res.data)) {
+      res.data.forEach(item => {
+        if (item.cover) {
+          item.cover = processMusicUrl(item.cover);
+        }
+        if (item.singerAvatar) {
+          item.singerAvatar = processMusicUrl(item.singerAvatar);
+        }
+      });
+    }
+    return res;
+  });
 }
 
 /**

music-qianduan/src/views/MusicDetail.vue

@@ -170,7 +170,7 @@
         </div>
 
         <div v-if="relatedMusic.length > 0 && activeTab === 'lyric'" class="related-music">
-          <h2>相关推荐</h2>
+          <h2>热门推荐</h2>
           <el-row :gutter="20">
             <el-col
               v-for="item in relatedMusic"
@@ -182,7 +182,7 @@
             >
               <div class="music-card" @click="goToMusic(item.id)">
                 <div class="card-cover">
-                  <img :src="item.cover || '/default-cover.jpg'" alt="封面">
+                  <img :src="item.cover || item.singerAvatar || '/default-cover.jpg'" alt="封面">
                   <div class="play-icon" @click.stop="playRelatedMusic(item)">
                     <el-icon><VideoPlay /></el-icon>
                   </div>
@@ -312,6 +312,7 @@ const fetchRelatedMusic = async () => {
     if (res.code === 200) {
       // 过滤掉当前音乐
       relatedMusic.value = (res.data || []).filter(item => item.id !== music.value?.id)
+      console.log('相关音乐:', relatedMusic.value)
     }
   } catch (error) {
     console.error('获取相关音乐失败:', error)