✨ feat: 将收藏与历史合并

src/router/home.ts

@@ -44,24 +44,25 @@ const layoutRouter = [
     },
     component: () => import('@/views/mv/index.vue'),
   },
+  // {
+  //   path: '/history',
+  //   name: 'history',
+  //   meta: {
+  //     title: '历史',
+  //     icon: 'icon-a-TicketStar',
+  //     keepAlive: true,
+  //   },
+  //   component: () => import('@/views/history/index.vue'),
+  // },
   {
     path: '/history',
     name: 'history',
+    component: () => import('@/views/historyAndFavorite/index.vue'),
     meta: {
-      title: '历史',
+      title: '我的收藏和历史',
       icon: 'icon-a-TicketStar',
       keepAlive: true,
     },
-    component: () => import('@/views/history/index.vue'),
-  },
-  {
-    path: '/favorite',
-    name: 'favorite',
-    component: () => import('@/views/favorite/index.vue'),
-    meta: {
-      title: '我的收藏',
-      icon: 'icon-likefill',
-    },
   },
   {
     path: '/user',

src/views/favorite/index.vue

@@ -1,45 +1,35 @@
 <template>
   <div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page">
-    <div class="favorite-header" :class="setAnimationClass('animate__fadeInRight')">
+    <div class="favorite-header" :class="setAnimationClass('animate__fadeInLeft')">
       <h2>我的收藏</h2>
       <div class="favorite-count">共 {{ favoriteList.length }} 首</div>
     </div>
     <div class="favorite-main" :class="setAnimationClass('animate__bounceInRight')">
-      <n-scrollbar class="favorite-content">
+      <n-scrollbar ref="scrollbarRef" class="favorite-content" @scroll="handleScroll">
         <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">
+          <song-item
-            <n-spin size="large" />
+            v-for="(song, index) in favoriteSongs"
-          </div>
+            :key="song.id"
-          <template v-else>
+            :item="song"
-            <song-item
+            :favorite="!isComponent"
-              v-for="(song, index) in favoriteSongs"
+            :class="setAnimationClass('animate__bounceInLeft')"
-              :key="song.id"
+            :style="getItemAnimationDelay(index)"
-              :item="song"
+            @play="handlePlay"
-              :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 v-if="loading" class="loading-wrapper">
+            <n-spin size="large" />
+          </div>
+
+          <div v-if="noMore" class="no-more-tip">没有更多了</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>
@@ -58,12 +48,14 @@ const store = useStore();
 const favoriteList = computed(() => store.state.favoriteList);
 const favoriteSongs = ref<SongResult[]>([]);
 const loading = ref(false);
+const noMore = ref(false);
+const scrollbarRef = ref();
 
-// 分页相关
+// 无限滚动相关
 const pageSize = 16;
 const currentPage = ref(1);
 
-defineProps({
+const props = defineProps({
   isComponent: {
     type: Boolean,
     default: false,
@@ -72,7 +64,6 @@ defineProps({
 
 // 获取当前页的收藏歌曲ID
 const getCurrentPageIds = () => {
-  // 反转列表顺序，最新收藏的在前面
   const reversedList = [...favoriteList.value];
   const startIndex = (currentPage.value - 1) * pageSize;
   const endIndex = startIndex + pageSize;
@@ -86,17 +77,29 @@ const getFavoriteSongs = async () => {
     return;
   }
 
+  if (props.isComponent && favoriteSongs.value.length >= 16) {
+    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) => {
+      const newSongs = res.data.songs.map((song: SongResult) => ({
-        return {
+        ...song,
-          ...song,
+        picUrl: song.al?.picUrl || '',
-          picUrl: song.al?.picUrl || '',
+      }));
-        };
+
-      });
+      // 追加新数据而不是替换
+      if (currentPage.value === 1) {
+        favoriteSongs.value = newSongs;
+      } else {
+        favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
+      }
+
+      // 判断是否还有更多数据
+      noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
     }
   } catch (error) {
     console.error('获取收藏歌曲失败:', error);
@@ -105,9 +108,15 @@ const getFavoriteSongs = async () => {
   }
 };
 
-// 处理页码变化
+// 处理滚动事件
-const handlePageChange = () => {
+const handleScroll = (e: any) => {
-  getFavoriteSongs();
+  const { scrollTop, scrollHeight, offsetHeight } = e.target;
+  const threshold = 100; // 距离底部多少像素时加载更多
+
+  if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
+    currentPage.value++;
+    getFavoriteSongs();
+  }
 };
 
 onMounted(() => {
@@ -119,6 +128,7 @@ watch(
   favoriteList,
   () => {
     currentPage.value = 1;
+    noMore.value = false;
     getFavoriteSongs();
   },
   { deep: true, immediate: true },
@@ -129,8 +139,7 @@ const handlePlay = () => {
 };
 
 const getItemAnimationDelay = (index: number) => {
-  const currentPageIndex = index % pageSize;
+  return setAnimationDelay(index, 30);
-  return setAnimationDelay(currentPageIndex, 30);
 };
 
 const router = useRouter();
@@ -141,13 +150,13 @@ const handleMore = () => {
 
 <style lang="scss" scoped>
 .favorite-page {
-  @apply h-full flex flex-col p-6;
+  @apply h-full flex flex-col pt-2;
 
   .favorite-header {
-    @apply flex items-center justify-between mb-6 flex-shrink-0;
+    @apply flex items-center justify-between flex-shrink-0 px-4;
 
     h2 {
-      @apply text-2xl font-bold;
+      @apply text-xl font-bold pb-2;
     }
 
     .favorite-count {
@@ -166,7 +175,7 @@ const handleMore = () => {
       }
 
       .favorite-list {
-        @apply space-y-2 pb-4;
+        @apply space-y-2 pb-4 px-4;
       }
     }
   }
@@ -176,20 +185,8 @@ const handleMore = () => {
   @apply flex justify-center items-center py-20;
 }
 
-.pagination-wrapper {
+.no-more-tip {
-  @apply flex justify-center py-4 flex-shrink-0;
+  @apply text-center text-gray-400 py-4 text-sm;
-
-  :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 {

src/views/history/index.vue

@@ -1,32 +1,41 @@
 <template>
   <div class="history-page">
-    <div class="title">播放历史</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInRight')">播放历史</div>
-    <n-scrollbar :size="100">
+    <n-scrollbar ref="scrollbarRef" :size="100" @scroll="handleScroll">
       <div class="history-list-content" :class="setAnimationClass('animate__bounceInLeft')">
         <div
-          v-for="(item, index) in musicList"
+          v-for="(item, index) in displayList"
           :key="item.id"
           class="history-item"
-          :class="setAnimationClass('animate__bounceIn')"
+          :class="setAnimationClass('animate__bounceInRight')"
           :style="setAnimationDelay(index, 30)"
         >
-          <song-item class="history-item-content" :item="item" list @play="handlePlay" />
+          <song-item class="history-item-content" :item="item" @play="handlePlay" />
           <div class="history-item-count min-w-[60px]">
             {{ item.count }}
           </div>
           <div class="history-item-delete">
-            <i class="iconfont icon-close" @click="delMusic(item)"></i>
+            <i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
           </div>
         </div>
+
+        <div v-if="loading" class="loading-wrapper">
+          <n-spin size="large" />
+        </div>
+
+        <div v-if="noMore" class="no-more-tip">没有更多了</div>
       </div>
     </n-scrollbar>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 
+import { getMusicDetail } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
+import type { SongResult } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
@@ -35,9 +44,81 @@ defineOptions({
 
 const store = useStore();
 const { delMusic, musicList } = useMusicHistory();
+const scrollbarRef = ref();
+const loading = ref(false);
+const noMore = ref(false);
+const displayList = ref<SongResult[]>([]);
 
+// 无限滚动相关配置
+const pageSize = 20;
+const currentPage = ref(1);
+
+// 获取当前页的音乐详情
+const getHistorySongs = async () => {
+  if (musicList.value.length === 0) {
+    displayList.value = [];
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const startIndex = (currentPage.value - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const currentPageItems = musicList.value.slice(startIndex, endIndex);
+
+    const currentIds = currentPageItems.map((item) => item.id);
+    const res = await getMusicDetail(currentIds);
+
+    if (res.data.songs) {
+      const newSongs = res.data.songs.map((song: SongResult) => {
+        const historyItem = currentPageItems.find((item) => item.id === song.id);
+        return {
+          ...song,
+          picUrl: song.al?.picUrl || '',
+          count: historyItem?.count || 0,
+        };
+      });
+
+      if (currentPage.value === 1) {
+        displayList.value = newSongs;
+      } else {
+        displayList.value = [...displayList.value, ...newSongs];
+      }
+
+      noMore.value = displayList.value.length >= musicList.value.length;
+    }
+  } catch (error) {
+    console.error('获取历史记录失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 处理滚动事件
+const handleScroll = (e: any) => {
+  const { scrollTop, scrollHeight, offsetHeight } = e.target;
+  const threshold = 100; // 距离底部多少像素时加载更多
+
+  if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
+    currentPage.value++;
+    getHistorySongs();
+  }
+};
+
+// 播放全部
 const handlePlay = () => {
-  store.commit('setPlayList', musicList.value);
+  store.commit('setPlayList', displayList.value);
+};
+
+onMounted(() => {
+  getHistorySongs();
+});
+
+// 重写删除方法，需要同时更新 displayList
+const handleDelMusic = async (item: SongResult) => {
+  delMusic(item);
+  musicList.value = musicList.value.filter((music) => music.id !== item.id);
+  displayList.value = displayList.value.filter((music) => music.id !== item.id);
 };
 </script>
 
@@ -45,11 +126,11 @@ const handlePlay = () => {
 .history-page {
   @apply h-full w-full pt-2;
   .title {
-    @apply pl-4 text-xl font-bold;
+    @apply pl-4 text-xl font-bold pb-2 px-4;
   }
 
   .history-list-content {
-    @apply px-4 mt-2 pb-28;
+    @apply mt-2 pb-28 px-4;
     .history-item {
       @apply flex items-center justify-between;
       &-content {
@@ -64,4 +145,12 @@ const handlePlay = () => {
     }
   }
 }
+
+.loading-wrapper {
+  @apply flex justify-center items-center py-8;
+}
+
+.no-more-tip {
+  @apply text-center text-gray-400 py-4 text-sm;
+}
 </style>

src/views/historyAndFavorite/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex gap-4 h-full p-4">
+    <favorite class="flex-1 bg-[#0d0d0d] border border-[#374151] rounded-2xl overflow-hidden" />
+    <history class="flex-1 bg-[#0d0d0d] border border-[#374151] rounded-2xl overflow-hidden" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Favorite from '@/views/favorite/index.vue';
+import History from '@/views/history/index.vue';
+</script>
+
+<style scoped></style>

src/views/home/index.vue

@@ -47,10 +47,13 @@ defineOptions({
 :deep(.favorite-page) {
   @apply p-0 mx-4 h-[300px];
   .favorite-header {
-    @apply mb-0;
+    @apply mb-0 px-0 !important;
     h2 {
-      @apply text-lg font-bold mb-4;
+      @apply text-lg font-bold;
     }
   }
+  .favorite-list {
+    @apply px-0 !important;
+  }
 }
 </style>