refactor: 调整下载/歌词/MV/歌单/榜单等页面

src/renderer/views/toplist/index.vue

@@ -1,31 +1,93 @@
 <template>
-  <div class="toplist-page">
-    <n-scrollbar class="toplist-container" style="height: 100%" :size="100">
-      <div v-loading="loading" class="toplist-list">
-        <div
-          v-for="(item, index) in topList"
-          :key="item.id"
-          class="toplist-item"
-          :class="setAnimationClass('animate__bounceIn')"
-          :style="getItemAnimationDelay(index)"
-          @click.stop="openToplist(item)"
-        >
-          <div class="toplist-item-img">
-            <n-image
-              class="toplist-item-img-img"
-              :src="getImgUrl(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="toplist-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <n-scrollbar class="h-full">
+      <div class="toplist-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+        <!-- Hero Section -->
+        <div class="mb-10">
+          <h1
+            class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2"
+          >
+            排行榜
+          </h1>
+          <p class="text-neutral-500 dark:text-neutral-400">
+            最具权威的音乐榜单，发现当下最热门的音乐
+          </p>
+        </div>
+
+        <!-- Toplist Grid -->
+        <div class="toplist-grid-container">
+          <!-- Loading State -->
+          <div v-if="loading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+            <div v-for="i in 15" :key="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 class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+            </div>
+          </div>
+
+          <!-- Content State -->
+          <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+            <div
+              v-for="(item, index) in topList"
+              :key="item.id"
+              class="toplist-card group cursor-pointer animate-item"
+              :style="{ animationDelay: calculateAnimationDelay(index, 0.05) }"
+              @click.stop="openToplist(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.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>
+
+                <!-- Update Frequency Badge -->
+                <div
+                  class="absolute bottom-3 left-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"
+                  v-if="item.updateFrequency"
+                >
+                  {{ item.updateFrequency }}
+                </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>
+                <p class="text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1">
+                  {{ item.updateFrequency || '网易云音乐榜单' }}
+                </p>
+              </div>
             </div>
           </div>
-          <div class="toplist-item-title">{{ item.name }}</div>
-          <div class="toplist-item-desc">{{ item.updateFrequency || '' }}</div>
         </div>
       </div>
     </n-scrollbar>
@@ -33,48 +95,35 @@
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { getListDetail, getToplist } from '@/api/list';
+import { getToplist } from '@/api/list';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
-import type { IListDetail } from '@/types/listDetail';
-import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { calculateAnimationDelay, formatNumber, getImgUrl } from '@/utils';
 
 defineOptions({
   name: 'Toplist'
 });
 
-const topList = ref<any[]>([]);
-
-// 计算每个项目的动画延迟
-const getItemAnimationDelay = (index: number) => {
-  return setAnimationDelay(index, 30);
-};
-
-const listDetail = ref<IListDetail | null>();
-const listLoading = ref(true);
-
 const router = useRouter();
+const topList = ref<any[]>([]);
+const loading = ref(false);
 
-const openToplist = (item: any) => {
-  listLoading.value = true;
-
-  getListDetail(item.id).then((res) => {
-    listDetail.value = res.data;
-    listLoading.value = false;
-
+const openToplist = async (item: any) => {
+  try {
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',
       name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
+      listInfo: item,
       canRemove: false
     });
-  });
+  } catch (error) {
+    console.error('获取榜单详情失败:', error);
+  }
 };
 
-const loading = ref(false);
 const loadToplist = async () => {
   loading.value = true;
   try {
@@ -94,75 +143,29 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .toplist-page {
-  @apply relative h-full w-full;
-  @apply bg-light dark:bg-black;
+  position: relative;
 }
 
-.toplist-container {
-  @apply p-4;
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
 }
 
-.toplist-list {
-  @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-}
-
-.toplist-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;
-      }
-    }
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
   }
-
-  &-title {
-    @apply mt-2 text-sm line-clamp-1 font-bold;
-    @apply text-gray-900 dark:text-white;
-  }
-
-  &-desc {
-    @apply mt-1 text-xs line-clamp-1;
-    @apply text-gray-500 dark:text-gray-400;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.mobile {
-  .toplist-list {
-    @apply px-4 gap-4;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+.toplist-card {
+  &:hover {
+    .play-icon {
+      @apply opacity-100 scale-100;
+    }
   }
 }
 </style>