✨ feat: 重构首页Hero、导航菜单与页面布局统一

HomeHero: - 重建每日推荐(左)+私人FM(右)双栏布局 - FM播放/暂停切换、不喜欢/下一首、背景流动动画、均衡器特效 - 修复FM数据获取(res.data.data双层结构) - 歌单预加载改为hover懒加载避免502 导航优化: - SearchBar顶部菜单: 首页/歌单/专辑/排行榜/MV/本地音乐 - 侧边栏隐藏MV和本地音乐(hideInSidebar) - 修复搜索类型切换时失焦收起(@mousedown.prevent) 页面统一: - 新建StickyTabPage通用布局组件(标题+吸顶tabs+内容slot) - 歌单/专辑/MV/播客页面统一使用StickyTabPage重构 - CategorySelector第一项添加ml-0.5防scale裁切播客优化: - RadioCard简化去除订阅按钮、容忍radio为undefined - 去除最近播放section、loadDashboard包含loadSubscribedRadios i18n: 新碟上架→专辑(5语言)、新增fmTrash/fmNext(5语言)
2026-05-17 18:47:29 +08:00 · 2026-03-16 23:22:35 +08:00
parent 68b3700f3f
commit a3f91c45f0
17 changed files with 1184 additions and 1130 deletions
@@ -1,109 +1,91 @@
 <template>
-  <div class="list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
-    <!-- 歌单分类 - 保持固定在顶部 -->
-    <category-selector
-      :model-value="currentType"
-      :categories="playlistCategory?.sub || []"
-      label-key="name"
-      value-key="name"
-      @change="handleTypeChange"
-    />
-
-    <!-- 歌单列表 -->
-    <n-scrollbar
-      ref="contentScrollbarRef"
-      class="h-full"
-      style="height: calc(100% - 73px)"
-      :size="100"
-      @scroll="handleScroll"
-    >
-      <div class="list-content w-full pb-32 pt-6 page-padding">
-        <!-- 列表标题 -->
-        <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">{{ t('comp.pages.list.desc') }}</p>
+  <sticky-tab-page
+    ref="pageRef"
+    :title="listTitle"
+    :description="t('comp.pages.list.desc')"
+    :model-value="currentType"
+    :categories="playlistCategory?.sub || []"
+    label-key="name"
+    value-key="name"
+    @change="handleTypeChange"
+    @scroll="handleScroll"
+  >
+    <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 skeleton-shimmer rounded-2xl" />
+          <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
        </div>
+      </template>

-        <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 skeleton-shimmer rounded-2xl" />
-              <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
-            </div>
-          </template>
+      <!-- Content State -->
+      <template v-else>
+        <div
+          v-for="(item, index) in recommendList"
+          :key="item.id"
+          class="list-card group cursor-pointer"
+          :class="{ 'animate-item': !animatedIds.has(item.id) }"
+          :style="{
+            animationDelay: !animatedIds.has(item.id)
+              ? calculateAnimationDelay(index % TOTAL_ITEMS, 0.05)
+              : '0s'
+          }"
+          @click.stop="openPlaylist(item)"
+          @animationend="animatedIds.add(item.id)"
+        >
+          <!-- 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"
+            />

-          <!-- Content State -->
-          <template v-else>
+            <!-- Play Overlay -->
            <div
-              v-for="(item, index) in recommendList"
-              :key="item.id"
-              class="list-card group cursor-pointer"
-              :class="{ 'animate-item': !animatedIds.has(item.id) }"
-              :style="{
-                animationDelay: !animatedIds.has(item.id)
-                  ? calculateAnimationDelay(index % TOTAL_ITEMS, 0.05)
-                  : '0s'
-              }"
-              @click.stop="openPlaylist(item)"
-              @animationend="animatedIds.add(item.id)"
+              class="absolute inset-0 bg-transparent group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center"
            >
-              <!-- Cover Image -->
              <div
-                class="relative aspect-square overflow-hidden rounded-2xl shadow-md group-hover:shadow-xl transition-all duration-500"
+                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"
              >
-                <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>
+                <i class="ri-play-fill text-2xl text-neutral-900 ml-1"></i>
              </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">{{ t('common.loading') }}</span>
+            <!-- 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>
-        <div v-if="!hasMore && recommendList.length > 0" class="text-center py-8 text-neutral-500">
-          {{ t('common.noMore') }}
-        </div>
-      </div>
-    </n-scrollbar>
-  </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">{{ t('common.loading') }}</span>
+    </div>
+    <div v-if="!hasMore && recommendList.length > 0" class="text-center py-8 text-neutral-500">
+      {{ t('common.noMore') }}
+    </div>
+  </sticky-tab-page>
 </template>

 <script lang="ts" setup>
@@ -113,7 +95,7 @@ import { useRoute, useRouter } from 'vue-router';

 import { getPlaylistCategory } from '@/api/home';
 import { getListByCat } from '@/api/list';
-import CategorySelector from '@/components/common/CategorySelector.vue';
+import StickyTabPage from '@/components/common/StickyTabPage.vue';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import type { IPlayListSort } from '@/types/playlist';
 import { calculateAnimationDelay, formatNumber, getImgUrl } from '@/utils';
@@ -123,13 +105,14 @@ defineOptions({
 });

 const { t } = useI18n();
-const TOTAL_ITEMS = 42; // 每页数量
+const TOTAL_ITEMS = 42;

 const recommendList = ref<any[]>([]);
 const page = ref(0);
 const hasMore = ref(true);
 const isLoadingMore = ref(false);
 const animatedIds = reactive(new Set<number>());
+const pageRef = ref();

 const router = useRouter();

@@ -157,7 +140,7 @@ const loadList = async (type: string, isLoadMore = false) => {
    page.value = 0;
    recommendList.value = [];
    await nextTick();
-    contentScrollbarRef.value?.scrollTo({ top: 0 });
+    pageRef.value?.scrollTo({ top: 0 });
  }

  try {
@@ -182,22 +165,16 @@ const loadList = async (type: string, isLoadMore = false) => {
  }
 };

-// 监听滚动事件
 const handleScroll = (e: any) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  // 距离底部100px时加载更多
  if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoadingMore.value && hasMore.value) {
    loadList(currentType.value, true);
  }
 };

-// 添加歌单分类相关的代码
 const playlistCategory = ref<IPlayListSort>();
 const currentType = ref((route.query.type as string) || DEFAULT_CAT);

-const contentScrollbarRef = ref();
-
-// 加载歌单分类
 const loadPlaylistCategory = async () => {
  const { data } = await getPlaylistCategory();
  playlistCategory.value = {
@@ -231,7 +208,6 @@ watch(
  async (newParams) => {
    if (route.path !== '/list') return;
    const newType = (newParams.type as string) || DEFAULT_CAT;
-    // 如果路由参数变化，且与当前类型不同，则重新加载
    if (newType !== currentType.value) {
      listTitle.value = newType === DEFAULT_CAT ? t('comp.pages.list.dailyRecommend') : newType;
      currentType.value = newType;
@@ -257,12 +233,4 @@ watch(
    transform: translateY(0);
  }
 }
-
-.list-card {
-  &:hover {
-    .play-icon {
-      @apply opacity-100 scale-100;
-    }
-  }
-}
 </style>