✨ feat: 搜索列表添加下一首播放功能，修改播放逻辑搜索的歌曲点击播放不重新覆盖播放列表, 添加全部播放功能

algerkong · algerkong · commit 31640bb66379 · 2025-05-11T15:37:37.000+08:00
diff --git a/src/i18n/lang/en-US/search.ts b/src/i18n/lang/en-US/search.ts
@@ -6,7 +6,8 @@ export default {
   },
   button: {
     clear: 'Clear',
-    back: 'Back'
+    back: 'Back',
+    playAll: 'Play All'
   },
   loading: {
     more: 'Loading...',
diff --git a/src/i18n/lang/zh-CN/search.ts b/src/i18n/lang/zh-CN/search.ts
@@ -6,7 +6,8 @@ export default {
   },
   button: {
     clear: '清空',
-    back: '返回'
+    back: '返回',
+    playAll: '播放列表'
   },
   loading: {
     more: '加载中...',
diff --git a/src/renderer/components/common/SongItem.vue b/src/renderer/components/common/SongItem.vue
@@ -61,6 +61,14 @@
           @click.stop="toggleFavorite"
         ></i>
       </div>
+      <n-tooltip  v-if="isNext" trigger="hover" :z-index="9999999" :delay="400">
+        <template #trigger>
+          <div class="song-item-operating-next" @click.stop="handlePlayNext">
+            <i class="iconfont ri-skip-forward-fill"></i>
+          </div>
+        </template>
+        {{ t('songItem.menu.playNext') }}
+      </n-tooltip>
       <div
         class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
         :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
@@ -110,14 +118,16 @@ const props = withDefaults(
     selectable?: boolean;
     selected?: boolean;
     canRemove?: boolean;
+    isNext?: boolean;
   }>(),
   {
     mini: false,
     list: false,
     favorite: true,
     selectable: false,
     selected: false,
-    canRemove: false
+    canRemove: false,
+    isNext: false
   }
 );
 
@@ -475,6 +485,14 @@ const handlePlayNext = () => {
       @apply mr-2 cursor-pointer ml-4 transition-all;
     }
 
+    &-next {
+      @apply mr-2 cursor-pointer transition-all;
+      
+      .iconfont {
+        @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
+      }
+    }
+
     .like-active {
       @apply text-red-500 dark:text-red-500;
     }
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
@@ -37,6 +37,12 @@
           @click="searchDetail = null"
         ></i>
         {{ hotKeyword }}
+        <div v-if="searchDetail?.songs?.length" class="title-play-all">
+          <div class="play-all-btn" @click="handlePlayAll">
+            <i class="ri-play-circle-fill"></i>
+            <span>{{ t('search.button.playAll') }}</span>
+          </div>
+        </div>
       </div>
       <div v-loading="searchDetailLoading" class="search-list-box">
         <template v-if="searchDetail">
@@ -46,7 +52,7 @@
               v-for="(item, index) in searchDetail?.bilibili"
               :key="item.bvid"
               :class="setAnimationClass('animate__bounceInRight')"
-              :style="setAnimationDelay(index, 50)"
+              :style="getSearchListAnimation(index)"
             >
               <bilibili-item :item="item" @play="handlePlayBilibili" />
             </div>
@@ -62,9 +68,9 @@
               v-for="(item, index) in searchDetail?.songs"
               :key="item.id"
               :class="setAnimationClass('animate__bounceInRight')"
-              :style="setAnimationDelay(index, 50)"
+              :style="getSearchListAnimation(index)"
             >
-              <song-item :item="item" @play="handlePlay" />
+              <song-item :item="item" @play="handlePlay" :is-next="true" />
             </div>
             <template v-for="(list, key) in searchDetail">
               <template v-if="key.toString() !== 'songs'">
@@ -73,7 +79,7 @@
                   :key="item.id"
                   class="mb-3"
                   :class="setAnimationClass('animate__bounceInRight')"
-                  :style="setAnimationDelay(index, 50)"
+                  :style="getSearchListAnimation(index)"
                 >
                   <search-item :item="item" />
                 </div>
@@ -104,7 +110,7 @@
                 v-for="(item, index) in searchHistory"
                 :key="index"
                 :class="setAnimationClass('animate__bounceIn')"
-                :style="setAnimationDelay(index, 50)"
+                :style="getSearchListAnimation(index)"
                 class="search-history-item"
                 round
                 closable
@@ -162,6 +168,10 @@ const hasMore = ref(true);
 const isLoadingMore = ref(false);
 const currentKeyword = ref('');
 
+const getSearchListAnimation = (index: number) => {
+  return setAnimationDelay(index % ITEMS_PER_PAGE, 50);
+};
+
 // 从 localStorage 加载搜索历史
 const loadSearchHistory = () => {
   const history = localStorage.getItem('searchHistory');
@@ -398,9 +408,9 @@ watch(
   { immediate: true }
 );
 
-const handlePlay = () => {
-  const tracks = searchDetail.value?.songs || [];
-  playerStore.setPlayList(tracks);
+const handlePlay = (item: any) => {
+  // 添加到下一首
+  playerStore.addToNextPlay(item);
 };
 
 // 点击搜索历史
@@ -418,6 +428,18 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
   // 使用路由导航到B站播放页面
   router.push(`/bilibili/${item.bvid}`);
 };
+
+const handlePlayAll = () => {
+  if (!searchDetail.value?.songs?.length) return;
+  
+  // 设置播放列表为搜索结果中的所有歌曲
+  playerStore.setPlayList(searchDetail.value.songs);
+  
+  // 开始播放第一首歌
+  if (searchDetail.value.songs[0]) {
+    playerStore.setPlay(searchDetail.value.songs[0]);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -469,8 +491,21 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
 }
 
 .title {
-  @apply text-xl font-bold my-2 mx-4;
+  @apply text-xl font-bold my-2 mx-4 flex items-center;
   @apply text-gray-900 dark:text-white;
+  
+  &-play-all {
+    @apply ml-auto;
+  }
+}
+
+.play-all-btn {
+  @apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
+  @apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
+  
+  i {
+    @apply text-xl;
+  }
 }
 
 .search-history {
