前端显示歌曲封面

web/src/components/AudioPlayer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="player">
     <div class="player-left">
+      <img class="track-cover" :src="cover"/>
       <div class="player-info">
         <div class="track-info">
           <span class="track-title">{{ currentTrack.title }}</span>
@@ -64,6 +65,8 @@ const currentTime = computed(() => player.currentTime)
 const duration = computed(() => player.duration)
 const progress = computed(() => player.progress)
 
+const cover = computed(()=> player.cover)
+
 function onSeek(e) {
   player.seekTo(parseFloat(e.target.value))
 }
@@ -99,6 +102,11 @@ function onVolumeChange(e) {
   min-width: 150px;
 }
 
+.track-cover {
+  aspect-ratio: 1;
+  height: 3rem;
+}
+
 .track-info {
   text-align: center;
 }

web/src/stores/player.js

@@ -33,6 +33,7 @@ export const usePlayerStore = defineStore('player', () => {
   const song = ref(null)
   const playlist = ref([])
 
+  const cover = computed(() => `/api/songs/${song.value.id}/cover`)
   const progress = computed(() => {
     if (duration.value === 0) return 0
     return (currentTime.value / duration.value) * 100
@@ -229,6 +230,7 @@ export const usePlayerStore = defineStore('player', () => {
     playlist,
     progress,
     currentTrack,
+    cover,
     playSong,
     togglePlay,
     seekTo,