From 941eb2e66e36ea7f99fd1bed8724d5149e956af0 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 13 Sep 2024 09:43:05 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BD=9C=E8=80=85=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MusicList.vue        | 15 +++++++++++++--
 src/components/common/SongItem.vue  | 10 +++++-----
 src/layout/components/MusicFull.vue |  8 ++++----
 src/layout/components/PlayBar.vue   | 10 +++++-----
 src/type/music.ts                   |  4 +++-
 5 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue
index 8a83910..7304127 100644
--- a/src/components/MusicList.vue
+++ b/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);
diff --git a/src/components/common/SongItem.vue b/src/components/common/SongItem.vue
index 3d9ca33..ae28f92 100644
--- a/src/components/common/SongItem.vue
+++ b/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"
-            >{{ artists.name }}{{ artistsindex < item.artists.length - 1 ? ' / ' : '' }}</span
+          <span v-for="(artists, artistsindex) in item.ar || item.song.artists" :key="artistsindex"
+            >{{ 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;
   }
diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue
index fb7e635..80ec846 100644
--- a/src/layout/components/MusicFull.vue
+++ b/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">
-            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">
+            {{ 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);
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 3ff6cd7..9416a9d 100644
--- a/src/layout/components/PlayBar.vue
+++ b/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">
-            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">
+            {{ 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,
diff --git a/src/type/music.ts b/src/type/music.ts
index bfa3e25..0d709d0 100644
--- a/src/type/music.ts
+++ b/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 {