From a5f694ea7206504506eb117011d9663da9eccd61 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 29 Mar 2025 23:26:26 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=9C=A8=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=AD=8C=E6=9B=B2?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8=E7=AE=A1=E7=90=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: #92
---
 src/renderer/layout/components/PlayBar.vue | 31 +++++++++++++++++++++-
 src/renderer/store/modules/player.ts       | 18 ++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index 35e4573..81874c7 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -162,7 +162,14 @@
           <n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
             <template #default="{ item }">
               <div class="music-play-list-content">
-                <song-item :key="item.id" :item="item" mini></song-item>
+                <div class="flex items-center justify-between">
+                  <song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
+                  <div class="delete-btn" @click.stop="handleDeleteSong(item)">
+                    <i
+                      class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
+                    ></i>
+                  </div>
+                </div>
               </div>
             </template>
           </n-virtual-list>
@@ -454,6 +461,15 @@ watch(
 );
 
 const isEQVisible = ref(false);
+
+// 在 script setup 部分添加删除歌曲的处理函数
+const handleDeleteSong = (song: SongResult) => {
+  // 如果删除的是当前播放的歌曲，先切换到下一首
+  if (song.id === playMusic.value.id) {
+    playerStore.nextPlay();
+  }
+  playerStore.removeFromPlayList(song.id);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -708,4 +724,17 @@ const isEQVisible = ref(false);
   backdrop-filter: blur(20px);
   @apply bg-light dark:bg-black bg-opacity-75;
 }
+
+.music-play-list-content {
+  @apply mx-2;
+
+  .delete-btn {
+    @apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
+    @apply hover:bg-red-50 dark:hover:bg-red-900/20;
+
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
 </style>
diff --git a/src/renderer/store/modules/player.ts b/src/renderer/store/modules/player.ts
index 7c33d80..fe8c009 100644
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -344,6 +344,21 @@ export const usePlayerStore = defineStore('player', () => {
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
   };
 
+  const removeFromPlayList = (id: number) => {
+    const index = playList.value.findIndex((item) => item.id === id);
+    if (index === -1) return;
+
+    // 如果删除的是当前播放的歌曲，先切换到下一首
+    if (id === playMusic.value.id) {
+      nextPlay();
+    }
+
+    // 从播放列表中移除，使用不可变的方式
+    const newPlayList = [...playList.value];
+    newPlayList.splice(index, 1);
+    setPlayList(newPlayList);
+  };
+
   // 初始化播放状态
   const initializePlayState = async () => {
     const settingStore = useSettingsStore();
@@ -450,6 +465,7 @@ export const usePlayerStore = defineStore('player', () => {
     initializePlayState,
     initializeFavoriteList,
     addToFavorite,
-    removeFromFavorite
+    removeFromFavorite,
+    removeFromPlayList
   };
 });