feat: 歌曲右键 添加不喜欢功能以过滤每日推荐歌曲

src/renderer/components/common/SongItem.vue

@@ -134,7 +134,7 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
 import type { MenuOption } from 'naive-ui';
-import { NEllipsis, NImage, useMessage } from 'naive-ui';
+import { NEllipsis, NImage, useMessage, useDialog } from 'naive-ui';
 import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -307,7 +307,13 @@ const dropdownOptions = computed<MenuOption[]>(() => {
         h('i', {
           class: `iconfont ${isFavorite.value ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
         })
-    }
+    },
+    // 不喜欢
+    {
+      label: isDislike.value ? t('songItem.menu.undislike') : t('songItem.menu.dislike'),
+      key: 'dislike',
+      icon: () => h('i', { class: `iconfont  ${isDislike.value ? 'ri-dislike-fill text-green-500': 'ri-dislike-line'}` })
+    },
   ];
 
   if (props.canRemove) {
@@ -343,18 +349,30 @@ const handleMenuClick = (e: MouseEvent) => {
 
 const handleSelect = (key: string | number) => {
   showDropdown.value = false;
-  if (key === 'download') {
-    downloadMusic();
-  } else if (key === 'playNext') {
-    handlePlayNext();
-  } else if (key === 'addToPlaylist') {
-    openPlaylistDrawer?.(props.item.id);
-  } else if (key === 'favorite') {
-    toggleFavorite(new Event('click'));
-  } else if (key === 'play') {
-    playMusicEvent(props.item);
-  } else if (key === 'remove') {
-    emits('remove-song', props.item.id);
+  switch (key) {
+    case 'download':
+      downloadMusic();
+      break;
+    case 'playNext':
+      handlePlayNext();
+      break;
+    case 'addToPlaylist':
+      openPlaylistDrawer?.(props.item.id);
+      break;
+    case 'favorite':
+      toggleFavorite(new Event('click'));
+      break;
+    case 'play':
+      playMusicEvent(props.item);
+      break;
+    case 'remove':
+      emits('remove-song', props.item.id);
+      break;
+    case 'dislike':
+      toggleDislike(new Event('click'));
+      break;
+    default:
+      break;
   }
 };
 
@@ -463,6 +481,12 @@ const isFavorite = computed(() => {
   return playerStore.favoriteList.includes(numericId);
 });
 
+const isDislike = computed(() => {
+  // 将id转换为number，兼容B站视频ID
+  const numericId = typeof props.item.id ==='string'? parseInt(props.item.id, 10) : props.item.id;
+  return playerStore.dislikeList.includes(numericId);
+})
+
 // 切换收藏状态
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
@@ -475,6 +499,24 @@ const toggleFavorite = async (e: Event) => {
     playerStore.addToFavorite(numericId);
   }
 };
+const dialog = useDialog();
+const toggleDislike = async (e: Event) => {
+  e.stopPropagation();
+  if (isDislike.value) {
+    playerStore.removeFromDislikeList(props.item.id);
+    return;
+  }
+  dialog.warning({
+    title: t('songItem.dialog.dislike.title'),
+    content: t('songItem.dialog.dislike.content'),
+    positiveText: t('songItem.dialog.dislike.positiveText'),
+    negativeText: t('songItem.dialog.dislike.negativeText'),
+    onPositiveClick: () => {
+      playerStore.addToDislikeList(props.item.id);
+    }
+  });
+ 
+}
 
 // 切换选择状态
 const toggleSelect = () => {

src/renderer/components/home/TopBanner.vue

@@ -31,7 +31,7 @@
 
               <div class="mt-2">
                 <p
-                  v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
+                  v-for="item in getDisplayDaySongs.slice(0, 5)"
                   :key="item.id"
                   class="text-el"
                 >
@@ -250,13 +250,16 @@ const loadArtistData = async () => {
 // 加载不需要登录的数据
 const loadNonUserData = async () => {
   try {
-
-        // 获取每日推荐
-        try {
+    // 获取每日推荐
+    try {
       const {
         data: { data: dayRecommend }
       } = await getDayRecommend();
-      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+      const dayRecommendSource = dayRecommend as unknown as IDayRecommend;
+      dayRecommendData.value = {
+        ...dayRecommendSource,
+        dailySongs: dayRecommendSource.dailySongs.filter((song: any) =>!playerStore.dislikeList.includes(song.id))
+      };
     } catch (error) {
       console.error('获取每日推荐失败:', error);
     }
@@ -288,6 +291,12 @@ const loadUserData = async () => {
 const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
+const getDisplayDaySongs = computed(() => {
+  if(!dayRecommendData.value){
+    return [];
+  }
+  return dayRecommendData.value.dailySongs.filter((song) => !playerStore.dislikeList.includes(song.id));
+})
 
 const showDayRecommend = () => {
   if (!dayRecommendData.value?.dailySongs) return;
@@ -295,7 +304,7 @@ const showDayRecommend = () => {
   navigateToMusicList(router, {
     type: 'dailyRecommend',
     name: t('comp.recommendSinger.songlist'),
-    songList: dayRecommendData.value.dailySongs,
+    songList: getDisplayDaySongs.value,
     canRemove: false
   });
 };