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"
>
+
+
+
+
+
+
+ {{ t('songItem.menu.playNext') }}
+
(),
{
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"
>
{{ hotKeyword }}
+
+
+
+ {{ t('search.button.playAll') }}
+
+
@@ -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)"
>
@@ -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)"
>
-
+
@@ -73,7 +79,7 @@
:key="item.id"
class="mb-3"
:class="setAnimationClass('animate__bounceInRight')"
- :style="setAnimationDelay(index, 50)"
+ :style="getSearchListAnimation(index)"
>
@@ -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]);
+ }
+};