From 31640bb66379c0510d7c938ee770f9b01933ef5d Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 11 May 2025 15:37:37 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=90=9C=E7=B4=A2=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A0=E4=B8=8B=E4=B8=80=E9=A6=96=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E9=80=BB=E8=BE=91=E6=90=9C=E7=B4=A2=E7=9A=84=E6=AD=8C?=
 =?UTF-8?q?=E6=9B=B2=E7=82=B9=E5=87=BB=E6=92=AD=E6=94=BE=E4=B8=8D=E9=87=8D?=
 =?UTF-8?q?=E6=96=B0=E8=A6=86=E7=9B=96=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?,=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E9=83=A8=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/lang/en-US/search.ts               |  3 +-
 src/i18n/lang/zh-CN/search.ts               |  3 +-
 src/renderer/components/common/SongItem.vue | 20 +++++++-
 src/renderer/views/search/index.vue         | 53 +++++++++++++++++----
 4 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/i18n/lang/en-US/search.ts b/src/i18n/lang/en-US/search.ts
index 4f473e2..a04dcdd 100644
--- 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
index f6c5f91..06a18e1 100644
--- 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
index d943da8..a35c6a1 100644
--- 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,6 +118,7 @@ const props = withDefaults(
     selectable?: boolean;
     selected?: boolean;
     canRemove?: boolean;
+    isNext?: boolean;
   }>(),
   {
     mini: false,
@@ -117,7 +126,8 @@ const props = withDefaults(
     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
index e4929c9..a635ef5 100644
--- 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 {