feat: 音乐卡片新增播放和暂停按钮

Author: xiaohong

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="暂无音乐"/>

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>