🐞 fix: 修复作者不显示问题

src/components/MusicList.vue

@@ -3,7 +3,10 @@
     :show="show"
     :height="isMobile ? '100vh' : '70vh'"
     placement="bottom"
+    block-scroll
+    mask-closable
     :style="{ backgroundColor: 'transparent' }"
+    @mask-click="close"
   >
     <div class="music-page">
       <div class="music-close">
@@ -93,7 +96,16 @@ const formatDetail = computed(() => (detail: any) => {
 
 const handlePlay = () => {
   const tracks = songList || [];
-  store.commit('setPlayList', tracks);
+  store.commit(
+    'setPlayList',
+    tracks.map((item) => ({
+      ...item,
+      picUrl: item.al.picUrl,
+      song: {
+        artists: item.ar,
+      },
+    })),
+  );
 };
 
 const close = () => {
@@ -111,7 +123,6 @@ const loadMoreSongs = async () => {
     const reslist = await getMusicDetail(trackIds);
     // displayedSongs.value = displayedSongs.value.concat(reslist.data.songs);
     displayedSongs.value = JSON.parse(JSON.stringify([...displayedSongs.value, ...reslist.data.songs]));
-    console.log('displayedSongs.value', displayedSongs.value);
     page.value++;
   } catch (error) {
     console.error('error', error);

src/components/common/SongItem.vue

@@ -7,8 +7,8 @@
       </div>
       <div class="song-item-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          <span v-for="(artists, artistsindex) in item.artists" :key="artistsindex"
+          <span v-for="(artists, artistsindex) in item.ar || item.song.artists" :key="artistsindex"
-            >{{ artists.name }}{{ artistsindex < item.artists.length - 1 ? ' / ' : '' }}</span
+            >{{ artists.name }}{{ artistsindex < (item.ar || item.song.artists).length - 1 ? ' / ' : '' }}</span
           >
         </n-ellipsis>
       </div>
@@ -32,12 +32,12 @@
 <script lang="ts" setup>
 import { useStore } from 'vuex';
 
-import type { Song } from '@/type/music';
+import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
 const props = withDefaults(
   defineProps<{
-    item: Song;
+    item: SongResult;
     mini?: boolean;
   }>(),
   {
@@ -61,7 +61,7 @@ const isPlaying = computed(() => {
 const emits = defineEmits(['play']);
 
 // 播放音乐 设置音乐详情 打开音乐底栏
-const playMusicEvent = async (item: Song) => {
+const playMusicEvent = async (item: SongResult) => {
   if (playMusic.value.id === item.id) {
     return;
   }

src/layout/components/MusicFull.vue

@@ -12,8 +12,8 @@
       <div class="music-content">
         <div class="music-content-name">{{ playMusic.name }}</div>
         <div class="music-content-singer">
-          <span v-for="(item, index) in playMusic.artists" :key="index">
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">
-            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
+            {{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
           </span>
         </div>
         <n-layout
@@ -57,7 +57,7 @@ import {
   reduceCorrectionTime,
   setAudioTime,
 } from '@/hooks/MusicHook';
-import type { Song } from '@/type/music';
+import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
 const store = useStore();
@@ -74,7 +74,7 @@ const props = defineProps({
 });
 
 // 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as Song);
+const playMusic = computed(() => store.state.playMusic as SongResult);
 const isPlaying = computed(() => store.state.play as boolean);
 // 获取歌词滚动dom
 const lrcSider = ref<any>(null);

src/layout/components/PlayBar.vue

@@ -21,8 +21,8 @@
       </div>
       <div class="music-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          <span v-for="(item, index) in playMusic.artists" :key="index">
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">
-            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
+            {{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
           </span>
         </n-ellipsis>
       </div>
@@ -98,7 +98,7 @@ import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, isElectron, loadLrc, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
-import type { Song } from '@/type/music';
+import type { SongResult } from '@/type/music';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
 
 import MusicFull from './MusicFull.vue';
@@ -106,11 +106,11 @@ import MusicFull from './MusicFull.vue';
 const store = useStore();
 
 // 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as Song);
+const playMusic = computed(() => store.state.playMusic as SongResult);
 // 是否播放
 const play = computed(() => store.state.play as boolean);
 
-const playList = computed(() => store.state.playList as Song[]);
+const playList = computed(() => store.state.playList as SongResult[]);
 
 const audio = {
   value: document.querySelector('#MusicAudio') as HTMLAudioElement,

src/type/music.ts

@@ -1,7 +1,7 @@
 export interface IRecommendMusic {
   code: number;
   category: number;
-  result: Song[];
+  result: SongResult[];
 }
 
 export interface SongResult {
@@ -16,6 +16,8 @@ export interface SongResult {
   alg: string;
   count?: number;
   playLoading?: boolean;
+  ar?: Artist[];
+  al?: Album;
 }
 
 export interface Song {