From bd643f937698034df64f1c410828a27fea7f0699 Mon Sep 17 00:00:00 2001
From: xiaohong <1315228474@qq.com>
Date: Fri, 19 Jul 2024 13:57:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9F=B3=E4=B9=90=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=92=AD=E6=94=BE=E5=92=8C=E6=9A=82=E5=81=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/music/components/list/index.vue      |  4 ++--
 .../ai/music/components/list/songCard/index.vue   | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/views/ai/music/components/list/index.vue b/src/views/ai/music/components/list/index.vue
index 8d569237..6c33f565 100644
--- a/src/views/ai/music/components/list/index.vue
+++ b/src/views/ai/music/components/list/index.vue
@@ -6,7 +6,7 @@
         <el-tab-pane v-loading="loading" label="我的创作" name="mine">
           <el-row v-if="mySongList.length" :gutter="12">
             <el-col v-for="song in mySongList" :key="song.id" :span="24">
-              <songCard :songInfo="song" @click="setCurrentSong(song)"/>
+              <songCard :songInfo="song" @play="setCurrentSong(song)"/>
             </el-col>
           </el-row>
           <el-empty v-else description="暂无音乐"/>
@@ -16,7 +16,7 @@
         <el-tab-pane v-loading="loading" label="试听广场" name="square">
           <el-row v-if="squareSongList.length" v-loading="loading" :gutter="12">
             <el-col v-for="song in squareSongList" :key="song.id" :span="24">
-              <songCard :songInfo="song" @click="setCurrentSong(song)"/>
+              <songCard :songInfo="song" @play="setCurrentSong(song)"/>
             </el-col>
           </el-row>
           <el-empty v-else description="暂无音乐"/>
diff --git a/src/views/ai/music/components/list/songCard/index.vue b/src/views/ai/music/components/list/songCard/index.vue
index 994a7c43..05342512 100644
--- a/src/views/ai/music/components/list/songCard/index.vue
+++ b/src/views/ai/music/components/list/songCard/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="flex bg-[var(--el-bg-color-overlay)] p-12px mb-12px rounded-1">
-    <el-image :src="songInfo.imageUrl" class="flex-none w-80px"/>
+    <div class="relative" @click="playSong">
+      <el-image :src="songInfo.imageUrl" class="flex-none w-80px"/>
+      <div class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer">
+        <Icon :icon="currentSong.id === songInfo.id ?  'solar:pause-circle-bold':'mdi:arrow-right-drop-circle'" :size="30" />
+      </div>
+    </div>
     <div class="ml-8px">
       <div>{{ songInfo.title }}</div>
       <div class="mt-8px text-12px text-[var(--el-text-color-secondary)] line-clamp-2">
@@ -20,4 +25,12 @@ defineProps({
     default: () => ({})
   }
 })
+
+const emits = defineEmits(['play'])
+
+const currentSong = inject('currentSong', {})
+
+function playSong () {
+  emits('play')
+}
 </script>