✨ feat: 在播放列表中添加歌曲删除功能，优化播放列表管理逻辑

feat: #92

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>

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
   };
 });