From 1bc511044044f998f0cb41654442323588f0fd49 Mon Sep 17 00:00:00 2001
From: lzw-723 <lzw-723@qq.com>
Date: Tue, 7 Apr 2026 13:37:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=98=BE=E7=A4=BA=E6=AD=8C?=
 =?UTF-8?q?=E6=9B=B2=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AudioPlayer.vue | 8 ++++++++
 web/src/stores/player.js           | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/web/src/components/AudioPlayer.vue b/web/src/components/AudioPlayer.vue
index 175eb7c..34af1ab 100644
--- a/web/src/components/AudioPlayer.vue
+++ b/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;
 }
diff --git a/web/src/stores/player.js b/web/src/stores/player.js
index 90ba2b4..58b5470 100644
--- a/web/src/stores/player.js
+++ b/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,