✨ feat: 添加搜藏功能 与页面

components.d.ts

@@ -21,11 +21,13 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
+    NPagination: typeof import('naive-ui')['NPagination']
     NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']

src/components/RecommendAlbum.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="recommend-album">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">最新专辑</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInRight')">最新专辑</div>
     <div class="recommend-album-list">
       <template v-for="(item, index) in albumData?.albums" :key="item.id">
         <div

src/components/common/SongItem.vue

@@ -35,8 +35,8 @@
       </template>
     </div>
     <div class="song-item-operating" :class="{ 'song-item-operating-list': list }">
-      <div class="song-item-operating-like">
-        <i class="iconfont icon-likefill"></i>
+      <div v-if="favorite" class="song-item-operating-like">
+        <i class="iconfont icon-likefill" :class="{ 'like-active': isFavorite }" @click.stop="toggleFavorite"></i>
       </div>
       <div
         class="song-item-operating-play bg-black animate__animated"
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useTemplateRef } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { useStore } from 'vuex';
 
 import type { SongResult } from '@/type/music';
@@ -63,10 +63,12 @@ const props = withDefaults(
     item: SongResult;
     mini?: boolean;
     list?: boolean;
+    favorite?: boolean;
   }>(),
   {
     mini: false,
     list: false,
+    favorite: true,
   },
 );
 
@@ -112,6 +114,21 @@ const playMusicEvent = async (item: SongResult) => {
   store.commit('setIsPlay', true);
   emits('play', item);
 };
+
+// 判断是否已收藏
+const isFavorite = computed(() => {
+  return store.state.favoriteList.includes(props.item.id);
+});
+
+// 切换收藏状态
+const toggleFavorite = async (e: Event) => {
+  e.stopPropagation();
+  if (isFavorite.value) {
+    store.commit('removeFromFavorite', props.item.id);
+  } else {
+    store.commit('addToFavorite', props.item.id);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -139,7 +156,7 @@ const playMusicEvent = async (item: SongResult) => {
     }
   }
   &-operating {
-    @apply flex items-center pl-4 rounded-full border border-gray-700 ml-4;
+    @apply flex items-center rounded-full border border-gray-700 ml-4;
     background-color: #0d0d0d;
     .iconfont {
       @apply text-xl;
@@ -149,7 +166,10 @@ const playMusicEvent = async (item: SongResult) => {
       @apply text-xl hover:text-red-600 transition;
     }
     &-like {
-      @apply mr-2 cursor-pointer;
+      @apply mr-2 cursor-pointer ml-4;
+    }
+    .like-active {
+      @apply text-red-600;
     }
     &-play {
       @apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
@@ -180,7 +200,7 @@ const playMusicEvent = async (item: SongResult) => {
         @apply text-base;
       }
       &-like {
-        @apply mr-1;
+        @apply mr-1 ml-1;
       }
       &-play {
         @apply w-8 h-8;

src/router/home.ts

@@ -50,6 +50,15 @@ const layoutRouter = [
     },
     component: () => import('@/views/history/index.vue'),
   },
+  {
+    path: '/favorite',
+    name: 'favorite',
+    component: () => import('@/views/favorite/index.vue'),
+    meta: {
+      title: '我的收藏',
+      icon: 'icon-likefill',
+    },
+  },
   {
     path: '/user',
     name: 'user',

src/store/index.ts

@@ -27,6 +27,7 @@ interface State {
   isMobile: boolean;
   searchValue: string;
   searchType: number;
+  favoriteList: number[];
 }
 
 const state: State = {
@@ -43,6 +44,7 @@ const state: State = {
   isMobile: false,
   searchValue: '',
   searchType: 1,
+  favoriteList: localStorage.getItem('favoriteList') ? JSON.parse(localStorage.getItem('favoriteList') || '[]') : [],
 };
 
 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -79,6 +81,16 @@ const mutations = {
       localStorage.setItem('appSettings', JSON.stringify(setData));
     }
   },
+  addToFavorite(state: State, songId: number) {
+    if (!state.favoriteList.includes(songId)) {
+      state.favoriteList = [songId, ...state.favoriteList];
+      localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
+    }
+  },
+  removeFromFavorite(state: State, songId: number) {
+    state.favoriteList = state.favoriteList.filter((id) => id !== songId);
+    localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
+  },
 };
 
 const actions = {

src/views/favorite/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page">
+    <div class="favorite-header" :class="setAnimationClass('animate__fadeInRight')">
+      <h2>我的收藏</h2>
+      <div class="favorite-count">共 {{ favoriteList.length }} 首</div>
+    </div>
+    <div class="favorite-main" :class="setAnimationClass('animate__bounceInRight')">
+      <n-scrollbar class="favorite-content">
+        <div v-if="favoriteList.length === 0" class="empty-tip">
+          <n-empty description="还没有收藏歌曲" />
+        </div>
+        <div v-else class="favorite-list">
+          <div v-if="loading" class="loading-wrapper">
+            <n-spin size="large" />
+          </div>
+          <template v-else>
+            <song-item
+              v-for="(song, index) in favoriteSongs"
+              :key="song.id"
+              :item="song"
+              :favorite="!isComponent"
+              :class="setAnimationClass('animate__bounceInUp')"
+              :style="getItemAnimationDelay(index)"
+              @play="handlePlay"
+            />
+          </template>
+
+          <div v-if="isComponent" class="favorite-list-more text-center">
+            <n-button text type="primary" @click="handleMore">查看更多</n-button>
+          </div>
+        </div>
+      </n-scrollbar>
+      <div v-if="favoriteList.length > 0 && !loading && !isComponent" class="pagination-wrapper">
+        <n-pagination
+          v-model:page="currentPage"
+          :page-size="pageSize"
+          :item-count="favoriteList.length"
+          :page-slot="5"
+          size="small"
+          @update:page="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+import { getMusicDetail } from '@/api/music';
+import SongItem from '@/components/common/SongItem.vue';
+import type { SongResult } from '@/type/music';
+import { setAnimationClass, setAnimationDelay } from '@/utils';
+
+const store = useStore();
+const favoriteList = computed(() => store.state.favoriteList);
+const favoriteSongs = ref<SongResult[]>([]);
+const loading = ref(false);
+
+// 分页相关
+const pageSize = 16;
+const currentPage = ref(1);
+
+defineProps({
+  isComponent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 获取当前页的收藏歌曲ID
+const getCurrentPageIds = () => {
+  // 反转列表顺序，最新收藏的在前面
+  const reversedList = [...favoriteList.value];
+  const startIndex = (currentPage.value - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  return reversedList.slice(startIndex, endIndex);
+};
+
+// 获取收藏歌曲详情
+const getFavoriteSongs = async () => {
+  if (favoriteList.value.length === 0) {
+    favoriteSongs.value = [];
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const currentIds = getCurrentPageIds();
+    const res = await getMusicDetail(currentIds);
+    if (res.data.songs) {
+      favoriteSongs.value = res.data.songs.map((song: SongResult) => {
+        return {
+          ...song,
+          picUrl: song.al?.picUrl || '',
+        };
+      });
+    }
+  } catch (error) {
+    console.error('获取收藏歌曲失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 处理页码变化
+const handlePageChange = () => {
+  getFavoriteSongs();
+};
+
+onMounted(() => {
+  getFavoriteSongs();
+});
+
+// 监听收藏列表变化
+watch(
+  favoriteList,
+  () => {
+    currentPage.value = 1;
+    getFavoriteSongs();
+  },
+  { deep: true, immediate: true },
+);
+
+const handlePlay = () => {
+  store.commit('setPlayList', favoriteSongs.value);
+};
+
+const getItemAnimationDelay = (index: number) => {
+  const currentPageIndex = index % pageSize;
+  return setAnimationDelay(currentPageIndex, 30);
+};
+
+const router = useRouter();
+const handleMore = () => {
+  router.push('/favorite');
+};
+</script>
+
+<style lang="scss" scoped>
+.favorite-page {
+  @apply h-full flex flex-col p-6;
+
+  .favorite-header {
+    @apply flex items-center justify-between mb-6 flex-shrink-0;
+
+    h2 {
+      @apply text-2xl font-bold;
+    }
+
+    .favorite-count {
+      @apply text-gray-400 text-sm;
+    }
+  }
+
+  .favorite-main {
+    @apply flex flex-col flex-grow min-h-0;
+
+    .favorite-content {
+      @apply flex-grow min-h-0;
+
+      .empty-tip {
+        @apply h-full flex items-center justify-center;
+      }
+
+      .favorite-list {
+        @apply space-y-2 pb-4;
+      }
+    }
+  }
+}
+
+.loading-wrapper {
+  @apply flex justify-center items-center py-20;
+}
+
+.pagination-wrapper {
+  @apply flex justify-center py-4 flex-shrink-0;
+
+  :deep(.n-pagination) {
+    @apply bg-gray-800 rounded-full px-4 py-1;
+
+    .n-pagination-item {
+      @apply text-gray-300 hover:text-white;
+
+      &--active {
+        @apply text-green-500;
+      }
+    }
+  }
+}
+
+.mobile {
+  .favorite-page {
+    @apply p-4;
+
+    .favorite-header {
+      @apply mb-4;
+
+      h2 {
+        @apply text-xl;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -9,7 +9,10 @@
         <!-- 本周最热音乐 -->
         <recommend-songlist />
         <!-- 推荐最新专辑 -->
-        <recommend-album />
+        <div>
+          <favorite-list is-component />
+          <recommend-album />
+        </div>
       </div>
     </div>
   </n-scrollbar>
@@ -17,11 +20,8 @@
 
 <script lang="ts" setup>
 import { isMobile } from '@/utils';
+import FavoriteList from '@/views/favorite/index.vue';
 
-const RecommendSinger = defineAsyncComponent(() => import('@/components/RecommendSinger.vue'));
-const PlaylistType = defineAsyncComponent(() => import('@/components/PlaylistType.vue'));
-const RecommendSonglist = defineAsyncComponent(() => import('@/components/RecommendSonglist.vue'));
-const RecommendAlbum = defineAsyncComponent(() => import('@/components/RecommendAlbum.vue'));
 defineOptions({
   name: 'Home',
 });
@@ -35,7 +35,22 @@ defineOptions({
   @apply mt-6 flex mb-28;
 }
 
-.mobile .main-content {
-  @apply flex-col mx-4;
+.mobile {
+  .main-content {
+    @apply flex-col mx-4;
+  }
+  :deep(.favorite-page) {
+    @apply p-0 mx-4 h-full;
+  }
+}
+
+:deep(.favorite-page) {
+  @apply p-0 mx-4 h-[300px];
+  .favorite-header {
+    @apply mb-0;
+    h2 {
+      @apply text-lg font-bold mb-4;
+    }
+  }
 }
 </style>