refactor: 调整历史/收藏/列表/用户页面

src/renderer/views/list/index.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="list-page">
-    <!-- 修改歌单分类部分 -->
-    <div class="play-list-type">
+  <div class="list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <!-- 歌单分类 - 保持固定在顶部 -->
+    <div
+      class="play-list-type border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10"
+    >
       <n-scrollbar ref="scrollbarRef" x-scrollable>
-        <div class="categories-wrapper" @wheel.prevent="handleWheel">
+        <div class="categories-wrapper py-4 pr-4 sm:pr-6 lg:pr-8" @wheel.prevent="handleWheel">
           <span
             v-for="(item, index) in playlistCategory?.sub"
             :key="item.name"
@@ -17,59 +19,115 @@
         </div>
       </n-scrollbar>
     </div>
+
     <!-- 歌单列表 -->
     <n-scrollbar
-      class="recommend"
-      style="height: calc(100% - 55px)"
+      ref="contentScrollbarRef"
+      class="h-full"
+      style="height: calc(100% - 73px)"
       :size="100"
       @scroll="handleScroll"
     >
-      <div v-loading="loading" class="recommend-list">
-        <div
-          v-for="(item, index) in recommendList"
-          :key="item.id"
-          class="recommend-item"
-          :class="setAnimationClass('animate__bounceIn')"
-          :style="getItemAnimationDelay(index)"
-          @click.stop="openPlaylist(item)"
-        >
-          <div class="recommend-item-img">
-            <n-image
-              class="recommend-item-img-img"
-              :src="getImgUrl(item.picUrl || item.coverImgUrl, '300y300')"
-              width="200"
-              height="200"
-              lazy
-              preview-disabled
-            />
-            <div class="top">
-              <div class="play-count">{{ formatNumber(item.playCount) }}</div>
-              <i class="iconfont icon-videofill"></i>
+      <div class="list-content w-full pb-32 pt-6 pr-4 sm:pr-6 lg:pr-8">
+        <!-- 列表标题 -->
+        <div class="mb-8">
+          <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+            {{ listTitle }}
+          </h1>
+          <p class="text-neutral-500 dark:text-neutral-400">发现更多好听的歌单</p>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+          <!-- Loading State -->
+          <template v-if="loading && page === 0">
+            <div v-for="i in 15" :key="`loading-${i}`" class="space-y-3">
+              <div
+                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+              />
+              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
             </div>
-          </div>
-          <div class="recommend-item-title">{{ item.name }}</div>
+          </template>
+
+          <!-- Content State -->
+          <template v-else>
+            <div
+              v-for="(item, index) in recommendList"
+              :key="item.id"
+              class="list-card group cursor-pointer animate-item"
+              :style="{ animationDelay: calculateAnimationDelay(index % TOTAL_ITEMS, 0.05) }"
+              @click.stop="openPlaylist(item)"
+            >
+              <!-- Cover Image -->
+              <div
+                class="relative aspect-square overflow-hidden rounded-2xl shadow-md group-hover:shadow-xl transition-all duration-500"
+              >
+                <img
+                  :src="getImgUrl(item.picUrl || item.coverImgUrl, '400y400')"
+                  :alt="item.name"
+                  class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                  loading="lazy"
+                />
+
+                <!-- Play Overlay -->
+                <div
+                  class="absolute inset-0 bg-transparent group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center"
+                >
+                  <div
+                    class="play-icon w-12 h-12 rounded-full bg-white/90 flex items-center justify-center opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 shadow-xl"
+                  >
+                    <i class="ri-play-fill text-2xl text-neutral-900 ml-1"></i>
+                  </div>
+                </div>
+
+                <!-- Play Count Badge -->
+                <div
+                  class="absolute top-3 right-3 px-2 py-1 rounded-lg bg-black/40 backdrop-blur-md text-white text-[10px] font-bold flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                  <i class="ri-play-fill"></i>
+                  {{ formatNumber(item.playCount) }}
+                </div>
+              </div>
+
+              <!-- Info -->
+              <div class="mt-3 space-y-1">
+                <h3
+                  class="text-sm md:text-base font-bold text-neutral-900 dark:text-white line-clamp-1 group-hover:text-primary transition-colors"
+                >
+                  {{ item.name }}
+                </h3>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- 加载更多 -->
+        <div v-if="isLoadingMore" class="flex justify-center items-center py-8">
+          <n-spin size="small" />
+          <span class="ml-2 text-neutral-500">加载中...</span>
+        </div>
+        <div v-if="!hasMore && recommendList.length > 0" class="text-center py-8 text-neutral-500">
+          没有更多了
         </div>
       </div>
-      <!-- 加载状态 -->
-      <div v-if="isLoadingMore" class="loading-more">
-        <n-spin size="small" />
-        <span class="ml-2">加载中...</span>
-      </div>
-      <div v-if="!hasMore && recommendList.length > 0" class="no-more">没有更多了</div>
     </n-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { getPlaylistCategory } from '@/api/home';
-import { getListByCat, getListDetail } from '@/api/list';
+import { getListByCat } from '@/api/list';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
-import type { IRecommendItem } from '@/types/list';
-import type { IListDetail } from '@/types/listDetail';
 import type { IPlayListSort } from '@/types/playlist';
-import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import {
+  calculateAnimationDelay,
+  formatNumber,
+  getImgUrl,
+  setAnimationClass,
+  setAnimationDelay
+} from '@/utils';
 
 defineOptions({
   name: 'List'
@@ -82,39 +140,20 @@ const page = ref(0);
 const hasMore = ref(true);
 const isLoadingMore = ref(false);
 
-// 计算每个项目的动画延迟
-const getItemAnimationDelay = (index: number) => {
-  const currentPageIndex = index % TOTAL_ITEMS;
-  return setAnimationDelay(currentPageIndex, 30);
-};
-
-const recommendItem = ref<IRecommendItem | null>();
-const listDetail = ref<IListDetail | null>();
-const listLoading = ref(true);
-
 const router = useRouter();
 
 const openPlaylist = (item: any) => {
-  recommendItem.value = item;
-  listLoading.value = true;
-
-  getListDetail(item.id).then((res) => {
-    listDetail.value = res.data;
-    listLoading.value = false;
-
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: false
-    });
+  navigateToMusicList(router, {
+    id: item.id,
+    type: 'playlist',
+    name: item.name,
+    listInfo: item,
+    canRemove: false
   });
 };
 
 const route = useRoute();
-const listTitle = ref(route.query.type || '歌单列表');
+const listTitle = ref((route.query.type as string) || '每日推荐');
 
 const loading = ref(false);
 const loadList = async (type: string, isLoadMore = false) => {
@@ -125,6 +164,7 @@ const loadList = async (type: string, isLoadMore = false) => {
     loading.value = true;
     page.value = 0;
     recommendList.value = [];
+    contentScrollbarRef.value?.scrollTo({ top: 0 });
   }
 
   try {
@@ -182,6 +222,7 @@ const loadPlaylistCategory = async () => {
 };
 
 const handleClickPlaylistType = (type: string) => {
+  if (currentType.value === type) return;
   currentType.value = type;
   listTitle.value = type;
   loading.value = true;
@@ -189,6 +230,7 @@ const handleClickPlaylistType = (type: string) => {
 };
 
 const scrollbarRef = ref();
+const contentScrollbarRef = ref();
 
 const handleWheel = (e: WheelEvent) => {
   const scrollbar = scrollbarRef.value;
@@ -199,7 +241,7 @@ const handleWheel = (e: WheelEvent) => {
 };
 
 onMounted(() => {
-  loadPlaylistCategory(); // 添加加载歌单分类
+  loadPlaylistCategory();
   currentType.value = (route.query.type as string) || currentType.value;
   loadList(currentType.value);
 });
@@ -208,130 +250,57 @@ watch(
   () => route.query,
   async (newParams) => {
     if (newParams.type) {
-      recommendList.value = [];
-      listTitle.value = newParams.type || '歌单列表';
-      currentType.value = newParams.type as string;
-      loading.value = true;
-      loadList(newParams.type as string);
+      // 如果路由参数变化，且与当前类型不同，则重新加载
+      if (newParams.type !== currentType.value) {
+        listTitle.value = (newParams.type as string) || '歌单列表';
+        currentType.value = newParams.type as string;
+        loading.value = true;
+        loadList(newParams.type as string);
+      }
     }
   }
 );
 </script>
 
 <style lang="scss" scoped>
-.list-page {
-  @apply relative h-full w-full;
-  @apply bg-light dark:bg-black;
-}
-
-.recommend {
-  &-title {
-    @apply text-lg font-bold pb-2;
-    @apply text-gray-900 dark:text-white;
-  }
-
-  &-list {
-    @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-
-  &-item {
-    @apply flex flex-col;
-
-    &-img {
-      @apply rounded-xl overflow-hidden relative w-full aspect-square;
-
-      &-img {
-        @apply block w-full h-full;
-      }
-
-      img {
-        @apply absolute top-0 left-0 w-full h-full object-cover rounded-xl;
-      }
-
-      &:hover img {
-        @apply hover:scale-110 transition-all duration-300 ease-in-out;
-      }
-
-      .top {
-        @apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
-        @apply bg-black bg-opacity-50;
-        opacity: 0;
-
-        i {
-          @apply text-5xl text-white transition-all duration-500 ease-in-out opacity-0;
-        }
-
-        &:hover {
-          @apply opacity-100;
-        }
-
-        &:hover i {
-          @apply transform scale-150 opacity-100;
-        }
-
-        .play-count {
-          @apply absolute top-2 left-2 text-sm text-white;
-        }
-      }
-    }
-
-    &-title {
-      @apply mt-2 text-sm line-clamp-1;
-      @apply text-gray-900 dark:text-white;
-    }
-  }
-}
-
-.loading-more {
-  @apply flex justify-center items-center py-4;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.no-more {
-  @apply text-center py-4;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.mobile {
-  .recommend-title {
-    @apply text-xl font-bold px-4;
-  }
-
-  .recommend-list {
-    @apply px-4 gap-4;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-}
-
-// 添加歌单分类样式
 .play-list-type {
   .categories-wrapper {
-    @apply flex items-center py-2;
+    @apply flex items-center;
     white-space: nowrap;
   }
 
   &-item {
-    @apply py-2 px-3 mr-3 inline-block rounded-xl cursor-pointer transition-all duration-300;
-    @apply bg-light dark:bg-black text-gray-900 dark:text-white;
-    @apply border border-gray-200 dark:border-gray-700;
-
-    &:hover {
-      @apply bg-green-50 dark:bg-green-900;
-    }
+    @apply py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300;
+    @apply text-sm font-medium;
+    @apply bg-gray-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400;
+    @apply hover:bg-gray-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white;
 
     &.active {
-      @apply bg-green-500 border-green-500 text-white;
+      @apply bg-primary text-white shadow-lg shadow-primary/25 scale-105;
     }
   }
 }
 
-.mobile {
-  .play-list-type {
-    @apply mx-0 w-full;
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
   }
-  .categories-wrapper {
-    @apply pl-4;
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.list-card {
+  &:hover {
+    .play-icon {
+      @apply opacity-100 scale-100;
+    }
   }
 }
 </style>