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

src/renderer/views/favorite/index.vue

@@ -1,79 +1,110 @@
 <template>
-  <div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page">
-    <div class="favorite-header" :class="setAnimationClass('animate__fadeInLeft')">
-      <div class="favorite-header-left">
-        <h2>{{ t('favorite.title') }}</h2>
-        <div class="favorite-count">{{ t('favorite.count', { count: favoriteList.length }) }}</div>
-      </div>
-      <div v-if="!isComponent && isElectron" class="favorite-header-right">
-        <div class="sort-controls" v-if="!isSelecting">
-          <div class="sort-buttons">
-            <div class="sort-button" :class="{ active: isDescending }" @click="toggleSort(true)">
-              <i class="iconfont ri-sort-desc"></i>
-              {{ t('favorite.descending') }}
-            </div>
-            <div class="sort-button" :class="{ active: !isDescending }" @click="toggleSort(false)">
-              <i class="iconfont ri-sort-asc"></i>
-              {{ t('favorite.ascending') }}
-            </div>
-          </div>
+  <div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page h-full flex flex-col">
+    <!-- Header Section -->
+    <div
+      class="flex items-center justify-between px-6 py-4 flex-shrink-0"
+      :class="setAnimationClass('animate__fadeInLeft')"
+    >
+      <div class="flex items-center gap-4">
+        <div>
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+            {{ t('favorite.title') }}
+          </h2>
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+            {{ t('favorite.count', { count: favoriteList.length }) }}
+          </p>
         </div>
-        <n-button
-          v-if="!isSelecting"
-          secondary
-          type="primary"
-          size="small"
-          class="select-btn"
-          @click="startSelect"
+      </div>
+
+      <div v-if="!isComponent && isElectron" class="flex items-center gap-3">
+        <template v-if="!isSelecting">
+          <!-- Sort Controls -->
+          <div class="flex items-center bg-gray-100 dark:bg-neutral-800 rounded-full p-1 h-9">
+            <button
+              v-for="isDesc in [true, false]"
+              :key="String(isDesc)"
+              class="px-3 h-full rounded-full text-xs font-medium transition-all duration-300 flex items-center gap-1"
+              :class="
+                isDescending === isDesc
+                  ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+              "
+              @click="toggleSort(isDesc)"
+            >
+              <i class="text-sm" :class="isDesc ? 'ri-sort-desc' : 'ri-sort-asc'"></i>
+              {{ isDesc ? t('favorite.descending') : t('favorite.ascending') }}
+            </button>
+          </div>
+
+          <button
+            class="h-9 px-4 rounded-full bg-primary/10 hover:bg-primary text-primary hover:text-white text-xs font-medium transition-all duration-300 flex items-center gap-1.5"
+            @click="startSelect"
+          >
+            <i class="ri-checkbox-multiple-line text-sm"></i>
+            {{ t('favorite.batchDownload') }}
+          </button>
+        </template>
+
+        <!-- Selection Controls -->
+        <div
+          v-else
+          class="flex items-center gap-3 bg-white dark:bg-neutral-800 shadow-sm rounded-full px-4 py-1.5 border border-gray-100 dark:border-neutral-700 h-9"
         >
-          <template #icon>
-            <i class="iconfont ri-checkbox-multiple-line"></i>
-          </template>
-          {{ t('favorite.batchDownload') }}
-        </n-button>
-        <div v-else class="select-controls">
           <n-checkbox
-            class="select-all-checkbox"
             :checked="isAllSelected"
             :indeterminate="isIndeterminate"
+            size="small"
             @update:checked="handleSelectAll"
           >
-            {{ t('common.selectAll') }}
+            <span class="text-xs">{{ t('common.selectAll') }}</span>
           </n-checkbox>
-          <n-button-group class="operation-btns">
-            <n-button
-              type="primary"
-              size="small"
-              :loading="isDownloading"
+          <div class="h-3 w-px bg-gray-200 dark:bg-neutral-700 mx-1"></div>
+          <div class="flex items-center gap-2">
+            <button
+              class="h-6 px-3 rounded-full bg-primary text-white text-xs font-medium hover:bg-primary-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
               :disabled="selectedSongs.length === 0"
-              class="download-btn"
               @click="handleBatchDownload"
             >
-              <template #icon>
-                <i class="iconfont ri-download-line"></i>
-              </template>
+              <i class="ri-download-line"></i>
               {{ t('favorite.download', { count: selectedSongs.length }) }}
-            </n-button>
-            <n-button size="small" class="cancel-btn" @click="cancelSelect">
+            </button>
+            <button
+              class="h-6 px-3 rounded-full bg-gray-100 dark:bg-neutral-700 text-gray-600 dark:text-gray-300 text-xs font-medium hover:bg-gray-200 dark:hover:bg-neutral-600 transition-colors"
+              @click="cancelSelect"
+            >
               {{ t('common.cancel') }}
-            </n-button>
-          </n-button-group>
+            </button>
+          </div>
         </div>
       </div>
     </div>
-    <div class="favorite-main" :class="setAnimationClass('animate__bounceInRight')">
-      <n-scrollbar ref="scrollbarRef" class="favorite-content" @scroll="handleScroll">
-        <div v-if="favoriteList.length === 0" class="empty-tip">
-          <n-empty :description="t('favorite.emptyTip')" />
+
+    <!-- Main Content -->
+    <div class="flex-grow min-h-0 px-2" :class="setAnimationClass('animate__bounceInRight')">
+      <n-scrollbar ref="scrollbarRef" class="h-full pr-4" @scroll="handleScroll">
+        <div
+          v-if="favoriteList.length === 0"
+          class="h-full flex flex-col items-center justify-center text-gray-400"
+        >
+          <div
+            class="w-24 h-24 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center mb-4"
+          >
+            <i class="ri-heart-line text-4xl text-gray-300 dark:text-gray-600"></i>
+          </div>
+          <p>{{ t('favorite.emptyTip') }}</p>
         </div>
-        <div v-else class="favorite-list" :class="{ 'max-w-[400px]': isComponent }">
+
+        <div v-else class="space-y-1 pb-24" :class="{ 'max-w-[400px]': isComponent }">
           <song-item
             v-for="(song, index) in favoriteSongs"
             :key="song.id"
             :item="song"
             :favorite="false"
-            class="favorite-list-item"
-            :class="setAnimationClass('animate__bounceInLeft')"
+            class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+            :class="[
+              setAnimationClass('animate__bounceInLeft'),
+              { '!bg-primary/10': selectedSongs.includes(song.id as number) }
+            ]"
             :style="getItemAnimationDelay(index)"
             :selectable="isSelecting"
             :selected="selectedSongs.includes(song.id as number)"
@@ -81,18 +112,33 @@
             @select="handleSelect"
           />
 
-          <div v-if="isComponent" class="favorite-list-more text-center">
-            <n-button text type="primary" @click="handleMore">{{ t('common.viewMore') }}</n-button>
+          <div v-if="isComponent" class="pt-4 text-center">
+            <n-button text type="primary" @click="handleMore">
+              {{ t('common.viewMore') }} <i class="ri-arrow-right-s-line ml-1"></i>
+            </n-button>
           </div>
 
-          <div v-if="loading" class="loading-wrapper">
-            <n-spin size="large" />
+          <!-- Loading Skeletons -->
+          <div v-if="loading" class="space-y-2 pt-2">
+            <div
+              v-for="i in 5"
+              :key="i"
+              class="flex items-center gap-4 rounded-xl p-2 animate-pulse"
+            >
+              <div class="h-12 w-12 rounded-xl bg-gray-200 dark:bg-neutral-800"></div>
+              <div class="flex-1 space-y-2">
+                <div class="h-4 w-1/3 rounded bg-gray-200 dark:bg-neutral-800"></div>
+                <div class="h-3 w-1/4 rounded bg-gray-200 dark:bg-neutral-800"></div>
+              </div>
+            </div>
           </div>
 
-          <div v-if="noMore" class="no-more-tip">{{ t('common.noMore') }}</div>
+          <div v-if="noMore" class="text-center py-8 text-sm text-gray-400 dark:text-gray-500">
+            {{ t('common.noMore') }}
+          </div>
         </div>
-        <play-bottom />
       </n-scrollbar>
+      <play-bottom />
     </div>
   </div>
 </template>
@@ -102,7 +148,6 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { processBilibiliVideos } from '@/api/bilibili';
 import { getMusicDetail } from '@/api/music';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
@@ -117,12 +162,11 @@ const favoriteList = computed(() => playerStore.favoriteList);
 const favoriteSongs = ref<SongResult[]>([]);
 const loading = ref(false);
 const noMore = ref(false);
-const scrollbarRef = ref();
 
 // 多选相关
 const isSelecting = ref(false);
 const selectedSongs = ref<number[]>([]);
-const { isDownloading, batchDownloadMusic } = useDownload();
+const { batchDownloadMusic } = useDownload();
 
 // 开始多选
 const startSelect = () => {
@@ -215,8 +259,6 @@ const getFavoriteSongs = async () => {
 
     // 分离网易云音乐ID和B站视频ID
     const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
-    // B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
-    const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
 
     // 处理网易云音乐数据
     let neteaseSongs: SongResult[] = [];
@@ -231,12 +273,8 @@ const getFavoriteSongs = async () => {
       }
     }
 
-    // 处理B站视频数据 - 使用公用方法
-    const bilibiliSongs = await processBilibiliVideos(bilibiliIds);
-
     console.log('获取数据统计:', {
-      neteaseSongs: neteaseSongs.length,
-      bilibiliSongs: bilibiliSongs.length
+      neteaseSongs: neteaseSongs.length
     });
 
     // 合并数据，保持原有顺序
@@ -244,12 +282,6 @@ const getFavoriteSongs = async () => {
       .map((id) => {
         const strId = String(id);
 
-        // 查找B站视频
-        if (typeof id === 'string') {
-          const found = bilibiliSongs.find((song) => String(song.id) === strId);
-          if (found) return found;
-        }
-
         // 查找网易云音乐
         const found = neteaseSongs.find((song) => String(song.id) === strId);
         return found;
@@ -343,156 +375,5 @@ const handleSelectAll = (checked: boolean) => {
 </script>
 
 <style lang="scss" scoped>
-.favorite-page {
-  @apply h-full flex flex-col pt-2;
-  @apply bg-light dark:bg-black;
-
-  .favorite-header {
-    @apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
-
-    &-left {
-      @apply flex items-center gap-4;
-
-      h2 {
-        @apply text-xl font-bold;
-        @apply text-gray-900 dark:text-white;
-      }
-
-      .favorite-count {
-        @apply text-gray-500 dark:text-gray-400 text-sm;
-      }
-    }
-
-    &-right {
-      @apply flex items-center gap-3;
-
-      .sort-controls {
-        @apply flex items-center;
-
-        .sort-buttons {
-          @apply flex items-center bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden;
-          @apply border border-gray-200 dark:border-gray-700;
-
-          .sort-button {
-            @apply flex items-center py-1 px-3 text-sm cursor-pointer;
-            @apply text-gray-600 dark:text-gray-400;
-            @apply transition-all duration-300;
-
-            &:first-child {
-              @apply border-r border-gray-200 dark:border-gray-700;
-            }
-
-            .iconfont {
-              @apply mr-1 text-base;
-            }
-
-            &.active {
-              @apply bg-green-500 text-white dark:text-gray-100;
-              @apply font-medium;
-            }
-
-            &:hover:not(.active) {
-              @apply bg-gray-200 dark:bg-gray-700;
-            }
-          }
-        }
-      }
-
-      .select-btn {
-        @apply rounded-full px-4 h-8;
-        @apply transition-all duration-300 ease-in-out;
-        @apply hover:bg-primary hover:text-white;
-        @apply dark:border-gray-600;
-
-        .iconfont {
-          @apply mr-1 text-lg;
-        }
-      }
-
-      .select-controls {
-        @apply flex items-center gap-3;
-        @apply bg-gray-50 dark:bg-gray-800;
-        @apply rounded-full px-3 py-1;
-        @apply border border-gray-200 dark:border-gray-700;
-        @apply transition-all duration-300;
-
-        .select-all-checkbox {
-          @apply text-sm text-gray-900 dark:text-gray-200;
-        }
-
-        .operation-btns {
-          @apply flex items-center gap-2 ml-2;
-
-          .download-btn {
-            @apply rounded-full px-4 h-7;
-            @apply bg-primary text-white;
-            @apply hover:bg-primary-dark;
-            @apply disabled:opacity-50 disabled:cursor-not-allowed;
-
-            .iconfont {
-              @apply mr-1 text-lg;
-            }
-          }
-
-          .cancel-btn {
-            @apply rounded-full px-4 h-7;
-            @apply text-gray-600 dark:text-gray-300;
-            @apply hover:bg-gray-100 dark:hover:bg-gray-700;
-            @apply border-gray-300 dark:border-gray-600;
-          }
-        }
-      }
-    }
-  }
-
-  .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;
-        @apply text-gray-500 dark:text-gray-400;
-      }
-
-      .favorite-list {
-        @apply space-y-2 pb-4 px-4;
-        &-item {
-          @apply bg-light-100 dark:bg-dark-100 hover:bg-light-200 dark:hover:bg-dark-200 transition-all;
-        }
-        &-more {
-          @apply mt-4;
-
-          .n-button {
-            @apply text-green-500 hover:text-green-600;
-          }
-        }
-      }
-    }
-  }
-}
-
-.loading-wrapper {
-  @apply flex justify-center items-center py-20;
-}
-
-.no-more-tip {
-  @apply text-center py-4 text-sm;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.mobile {
-  .favorite-page {
-    @apply p-4 m-0;
-
-    .favorite-header {
-      @apply mb-4;
-
-      h2 {
-        @apply text-xl;
-      }
-    }
-  }
-}
+/* Scoped styles kept minimal as we use Tailwind classes */
 </style>

src/renderer/views/history/index.vue

@@ -1,113 +1,256 @@
 <template>
-  <div class="history-page">
-    <div class="title-wrapper" :class="setAnimationClass('animate__fadeInRight')" v-if="!isMobile">
-      <div class="title">{{ t('history.title') }}</div>
-      <n-button
-        secondary
-        type="primary"
-        size="small"
-        class="heatmap-btn"
-        @click="handleNavigateToHeatmap"
-      >
-        <template #icon>
-          <i class="iconfont ri-calendar-2-line"></i>
-        </template>
-        {{ t('history.heatmapTitle') }}
-      </n-button>
-    </div>
-    <!-- 第一级Tab: 歌曲/歌单/专辑 -->
-    <div class="category-tabs-wrapper" :class="setAnimationClass('animate__fadeInRight')">
-      <n-tabs
-        v-model:value="currentCategory"
-        type="segment"
-        animated
-        size="large"
-        @update:value="handleCategoryChange"
-      >
-        <n-tab name="songs" :tab="t('history.categoryTabs.songs')"></n-tab>
-        <n-tab name="playlists" :tab="t('history.categoryTabs.playlists')"></n-tab>
-        <n-tab name="albums" :tab="t('history.categoryTabs.albums')"></n-tab>
-      </n-tabs>
-    </div>
-    <!-- 第二级Tab: 本地/云端 -->
-    <div class="tabs-wrapper" :class="setAnimationClass('animate__fadeInRight')">
-      <n-tabs
-        v-model:value="currentTab"
-        type="segment"
-        animated
-        @update:value="handleTabChange"
-        size="small"
-      >
-        <n-tab name="local" :tab="t('history.tabs.local')"></n-tab>
-        <n-tab name="cloud" :tab="t('history.tabs.cloud')"></n-tab>
-      </n-tabs>
-    </div>
-    <n-scrollbar ref="scrollbarRef" :size="100" @scroll="handleScroll">
-      <div class="history-list-content" :class="setAnimationClass('animate__bounceInLeft')">
-        <!-- 歌曲列表 -->
-        <template v-if="currentCategory === 'songs'">
+  <div class="history-page h-full flex flex-col">
+    <!-- Header Section -->
+    <div
+      class="flex flex-col gap-4 px-6 pt-4 pb-2 flex-shrink-0"
+      :class="setAnimationClass('animate__fadeInRight')"
+      v-if="!isMobile"
+    >
+      <div class="flex items-center justify-between">
+        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('history.title') }}</h2>
+
+        <button
+          class="h-8 px-3 rounded-full bg-gray-100 dark:bg-neutral-800 hover:bg-gray-200 dark:hover:bg-neutral-700 text-gray-600 dark:text-gray-300 text-xs font-medium transition-colors flex items-center gap-1.5"
+          @click="handleNavigateToHeatmap"
+        >
+          <i class="ri-calendar-2-line"></i>
+          {{ t('history.heatmapTitle') }}
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between gap-4">
+        <!-- Category Tabs -->
+        <div
+          class="bg-gray-100 dark:bg-neutral-800 p-1 rounded-full inline-flex h-9 items-center overflow-x-auto no-scrollbar max-w-full"
+        >
           <div
-            v-for="(item, index) in displayList"
-            :key="item.id"
-            class="history-item"
-            :class="setAnimationClass('animate__bounceInRight')"
-            :style="setAnimationDelay(index, 30)"
+            v-for="tab in ['songs', 'playlists', 'albums', 'podcasts']"
+            :key="tab"
+            class="px-4 h-7 rounded-full text-xs font-medium cursor-pointer transition-all duration-300 flex items-center justify-center whitespace-nowrap"
+            :class="
+              currentCategory === tab
+                ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+            "
+            @click="handleCategoryChange(tab as any)"
           >
-            <song-item class="history-item-content" :item="item" @play="handlePlay" />
-            <template v-if="!isMobile">
-              <div class="history-item-count min-w-[60px]" v-show="currentTab === 'local'">
-                {{ t('history.playCount', { count: item.count }) }}
-              </div>
-              <div class="history-item-delete" v-show="currentTab === 'local'">
-                <i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
-              </div>
-            </template>
+            {{ t(`history.categoryTabs.${tab}`) }}
           </div>
-        </template>
-
-        <!-- 歌单列表 -->
-        <template v-if="currentCategory === 'playlists'">
-          <playlist-item
-            v-for="(item, index) in displayList"
-            :key="item.id"
-            :item="item"
-            :show-count="currentTab === 'local'"
-            :show-delete="currentTab === 'local'"
-            :class="setAnimationClass('animate__bounceInRight')"
-            :style="setAnimationDelay(index, 30)"
-            @click="handlePlaylistClick(item)"
-            @delete="handleDelPlaylist(item)"
-          />
-        </template>
-
-        <!-- 专辑列表 -->
-        <template v-if="currentCategory === 'albums'">
-          <album-item
-            v-for="(item, index) in displayList"
-            :key="item.id"
-            :item="item"
-            :show-count="currentTab === 'local'"
-            :show-delete="currentTab === 'local'"
-            :class="setAnimationClass('animate__bounceInRight')"
-            :style="setAnimationDelay(index, 30)"
-            @click="handleAlbumClick(item)"
-            @delete="handleDelAlbum(item)"
-          />
-        </template>
-
-        <div v-if="displayList.length === 0 && !loading" class="no-data">
-          {{ t('history.noData') }}
         </div>
 
-        <div v-if="loading" class="loading-wrapper">
-          <n-spin size="large" />
-        </div>
-
-        <div v-if="noMore && displayList.length > 0" class="no-more-tip">
-          {{ t('common.noMore') }}
+        <!-- Source Tabs (Local/Cloud) -->
+        <div
+          v-if="currentCategory !== 'podcasts'"
+          class="flex items-center bg-gray-100 dark:bg-neutral-800 rounded-full p-1 h-9 flex-shrink-0"
+        >
+          <button
+            class="px-3 h-7 rounded-full text-xs font-medium transition-all duration-300"
+            :class="
+              currentTab === 'local'
+                ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700'
+            "
+            @click="handleTabChange('local')"
+          >
+            {{ t('history.tabs.local') }}
+          </button>
+          <button
+            class="px-3 h-7 rounded-full text-xs font-medium transition-all duration-300"
+            :class="
+              currentTab === 'cloud'
+                ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700'
+            "
+            @click="handleTabChange('cloud')"
+          >
+            {{ t('history.tabs.cloud') }}
+          </button>
         </div>
       </div>
-    </n-scrollbar>
+    </div>
+
+    <!-- List Content -->
+    <div class="flex-grow min-h-0 px-2 mt-2" :class="setAnimationClass('animate__bounceInLeft')">
+      <n-scrollbar ref="scrollbarRef" class="h-full pr-4" :size="100" @scroll="handleScroll">
+        <div class="pb-24 space-y-1">
+          <!-- 歌曲列表 -->
+          <template v-if="currentCategory === 'songs'">
+            <div
+              v-for="(item, index) in displayList"
+              :key="item.id"
+              class="group flex items-center justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors p-1"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 30)"
+            >
+              <song-item
+                class="flex-1 !bg-transparent hover:!bg-transparent"
+                :item="item"
+                @play="handlePlay"
+              />
+              <template v-if="!isMobile">
+                <div
+                  class="px-4 text-xs text-gray-400 dark:text-gray-600 font-medium min-w-[60px] text-right"
+                  v-show="currentTab === 'local'"
+                >
+                  {{ t('history.playCount', { count: item.count }) }}
+                </div>
+                <div
+                  class="w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer transition-all opacity-0 group-hover:opacity-100"
+                  v-show="currentTab === 'local'"
+                  @click="handleDelMusic(item)"
+                >
+                  <i class="ri-close-line text-lg"></i>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <!-- 歌单列表 -->
+          <template v-if="currentCategory === 'playlists'">
+            <playlist-item
+              v-for="(item, index) in displayList"
+              :key="item.id"
+              :item="item"
+              :show-count="currentTab === 'local'"
+              :show-delete="currentTab === 'local'"
+              class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 30)"
+              @click="handlePlaylistClick(item)"
+              @delete="handleDelPlaylist(item)"
+            />
+          </template>
+
+          <!-- 专辑列表 -->
+          <template v-if="currentCategory === 'albums'">
+            <album-item
+              v-for="(item, index) in displayList"
+              :key="item.id"
+              :item="item"
+              :show-count="currentTab === 'local'"
+              :show-delete="currentTab === 'local'"
+              class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 30)"
+              @click="handleAlbumClick(item)"
+              @delete="handleDelAlbum(item)"
+            />
+          </template>
+
+          <!-- 播客列表 -->
+          <template v-if="currentCategory === 'podcasts'">
+            <div class="mb-4 px-2">
+              <div
+                class="flex items-center bg-gray-100 dark:bg-neutral-800 rounded-full p-1 w-fit h-8"
+              >
+                <button
+                  class="px-3 h-6 rounded-full text-xs font-medium transition-all duration-300"
+                  :class="
+                    currentPodcastSubTab === 'episodes'
+                      ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                      : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                  "
+                  @click="
+                    currentPodcastSubTab = 'episodes';
+                    loadHistoryData();
+                  "
+                >
+                  {{ t('history.podcastTabs.episodes') }}
+                </button>
+                <button
+                  class="px-3 h-6 rounded-full text-xs font-medium transition-all duration-300"
+                  :class="
+                    currentPodcastSubTab === 'radios'
+                      ? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
+                      : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                  "
+                  @click="
+                    currentPodcastSubTab = 'radios';
+                    loadHistoryData();
+                  "
+                >
+                  {{ t('history.podcastTabs.radios') }}
+                </button>
+              </div>
+            </div>
+
+            <div v-if="currentPodcastSubTab === 'episodes'">
+              <div
+                v-for="(item, index) in displayList"
+                :key="item.id"
+                class="group flex items-center justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors p-1"
+                :class="setAnimationClass('animate__bounceInRight')"
+                :style="setAnimationDelay(index, 30)"
+              >
+                <song-item
+                  class="flex-1 !bg-transparent hover:!bg-transparent"
+                  :item="mapDjProgramToSong(item)"
+                  @play="handlePlayPodcast(item)"
+                />
+                <div
+                  class="w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer transition-all opacity-0 group-hover:opacity-100"
+                  @click="handleDelPodcast(item)"
+                >
+                  <i class="ri-close-line text-lg"></i>
+                </div>
+              </div>
+            </div>
+
+            <div v-else>
+              <div
+                v-for="(item, index) in displayList"
+                :key="item.id"
+                class="group flex items-center justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+                :class="setAnimationClass('animate__bounceInRight')"
+                :style="setAnimationDelay(index, 30)"
+              >
+                <playlist-item
+                  class="flex-1 !bg-transparent hover:!bg-transparent"
+                  :item="mapPodcastRadioToPlaylistItem(item)"
+                  @click="handlePodcastRadioClick(item)"
+                />
+                <div
+                  class="w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer transition-all opacity-0 group-hover:opacity-100 mr-2"
+                  @click="handleDelPodcastRadio(item)"
+                >
+                  <i class="ri-close-line text-lg"></i>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <div v-if="displayList.length === 0 && !loading" class="text-center py-12 text-gray-400">
+            <div
+              class="w-20 h-20 mx-auto rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center mb-4"
+            >
+              <i class="ri-history-line text-3xl text-gray-300 dark:text-gray-600"></i>
+            </div>
+            <p>{{ t('history.noData') }}</p>
+          </div>
+
+          <div v-if="loading" class="space-y-2 pt-2">
+            <div
+              v-for="i in 8"
+              :key="i"
+              class="flex items-center gap-4 rounded-xl p-2 animate-pulse"
+            >
+              <div class="h-12 w-12 rounded-xl bg-gray-200 dark:bg-neutral-800"></div>
+              <div class="flex-1 space-y-2">
+                <div class="h-4 w-1/3 rounded bg-gray-200 dark:bg-neutral-800"></div>
+                <div class="h-3 w-1/4 rounded bg-gray-200 dark:bg-neutral-800"></div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="noMore && displayList.length > 0"
+            class="text-center py-8 text-sm text-gray-400 dark:text-gray-500"
+          >
+            {{ t('common.noMore') }}
+          </div>
+        </div>
+      </n-scrollbar>
+    </div>
   </div>
 </template>
 
@@ -117,9 +260,6 @@ import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { processBilibiliVideos } from '@/api/bilibili';
-import { getListDetail } from '@/api/list';
-import { getAlbumDetail } from '@/api/music';
 import { getMusicDetail } from '@/api/music';
 import { getRecentAlbums, getRecentPlaylists, getRecentSongs } from '@/api/user';
 import AlbumItem from '@/components/common/AlbumItem.vue';
@@ -129,24 +269,23 @@ import SongItem from '@/components/common/SongItem.vue';
 import { useAlbumHistory } from '@/hooks/AlbumHistoryHook';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { usePlaylistHistory } from '@/hooks/PlaylistHistoryHook';
+import { usePodcastHistory } from '@/hooks/PodcastHistoryHook';
+import { usePodcastRadioHistory } from '@/hooks/PodcastRadioHistoryHook';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { SongResult } from '@/types/music';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import { mapDjProgramToSongResult } from '@/utils/podcastUtils';
 
 // 扩展历史记录类型以包含 playTime
 interface HistoryRecord extends Partial<SongResult> {
   id: string | number;
   playTime?: number;
   score?: number;
-  source?: 'netease' | 'bilibili';
+  source?: 'netease';
   count?: number;
   recordSource?: 'local' | 'cloud';
   sources?: ('local' | 'cloud')[];
-  bilibiliData?: {
-    bvid: string;
-    cid: number;
-  };
 }
 
 const { t } = useI18n();
@@ -155,6 +294,8 @@ const router = useRouter();
 const { delMusic, musicList } = useMusicHistory();
 const { delPlaylist, playlistList } = usePlaylistHistory();
 const { delAlbum, albumList } = useAlbumHistory();
+const { delPodcast, podcastList } = usePodcastHistory();
+const { delPodcastRadio, podcastRadioList } = usePodcastRadioHistory();
 const userStore = useUserStore();
 const scrollbarRef = ref();
 const loading = ref(false);
@@ -162,11 +303,12 @@ const noMore = ref(false);
 const displayList = ref<any[]>([]);
 const playerStore = usePlayerStore();
 const hasLoaded = ref(false);
-const currentCategory = ref<'songs' | 'playlists' | 'albums'>('songs');
+const currentCategory = ref<'songs' | 'playlists' | 'albums' | 'podcasts'>('songs');
 const currentTab = ref<'local' | 'cloud'>('local');
 const cloudRecords = ref<HistoryRecord[]>([]);
 const cloudPlaylists = ref<any[]>([]);
 const cloudAlbums = ref<any[]>([]);
+const currentPodcastSubTab = ref<'episodes' | 'radios'>('episodes');
 
 // 无限滚动相关配置
 const pageSize = 100;
@@ -283,17 +425,27 @@ const getCurrentList = (): any[] => {
       case 'cloud':
         return cloudAlbums.value;
     }
+  } else if (currentCategory.value === 'podcasts') {
+    if (currentPodcastSubTab.value === 'episodes') {
+      return podcastList.value;
+    } else {
+      return podcastRadioList.value;
+    }
   }
   return [];
 };
 
 // 处理分类切换
-const handleCategoryChange = async (value: 'songs' | 'playlists' | 'albums') => {
+const handleCategoryChange = async (value: 'songs' | 'playlists' | 'albums' | 'podcasts') => {
   currentCategory.value = value;
   currentPage.value = 1;
   noMore.value = false;
   displayList.value = [];
 
+  if (value === 'podcasts') {
+    currentTab.value = 'local';
+  }
+
   // 如果切换到云端，且还没有加载对应的云端数据，则加载
   if (currentTab.value === 'cloud') {
     loading.value = true;
@@ -313,17 +465,13 @@ const handleCategoryChange = async (value: 'songs' | 'playlists' | 'albums') =>
 // 处理歌单点击
 const handlePlaylistClick = async (item: any) => {
   try {
-    const res = await getListDetail(item.id);
-    if (res.data?.playlist) {
-      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
+    });
   } catch (error) {
     console.error('打开歌单失败:', error);
     message.error('打开歌单失败');
@@ -333,23 +481,16 @@ const handlePlaylistClick = async (item: any) => {
 // 处理专辑点击
 const handleAlbumClick = async (item: any) => {
   try {
-    const res = await getAlbumDetail(item.id.toString());
-    if (res.data?.album && res.data?.songs) {
-      const albumData = res.data.album;
-      const songs = res.data.songs.map((song: any) => ({
-        ...song,
-        picUrl: albumData.picUrl
-      }));
-
-      navigateToMusicList(router, {
-        id: item.id,
-        type: 'album',
-        name: albumData.name,
-        songList: songs,
-        listInfo: albumData,
-        canRemove: false
-      });
-    }
+    navigateToMusicList(router, {
+      id: item.id,
+      type: 'album',
+      name: item.name,
+      listInfo: {
+        ...item,
+        coverImgUrl: item.picUrl || item.coverImgUrl
+      },
+      canRemove: false
+    });
   } catch (error) {
     console.error('打开专辑失败:', error);
     message.error('打开专辑失败');
@@ -368,6 +509,44 @@ const handleDelAlbum = (item: any) => {
   displayList.value = displayList.value.filter((album) => album.id !== item.id);
 };
 
+// 播客相关处理
+const mapDjProgramToSong = (program: any): SongResult => {
+  return mapDjProgramToSongResult(program);
+};
+
+const mapPodcastRadioToPlaylistItem = (radio: any) => {
+  return {
+    id: radio.id,
+    name: radio.name,
+    picUrl: radio.picUrl,
+    coverImgUrl: radio.picUrl,
+    desc: radio.dj?.nickname || radio.desc,
+    type: 'podcast'
+  };
+};
+
+const handlePlayPodcast = (item: any) => {
+  const song = mapDjProgramToSong(item);
+  playerStore.setPlay(song);
+};
+
+const handlePodcastRadioClick = (item: any) => {
+  router.push({
+    name: 'podcastRadio',
+    params: { id: item.id }
+  });
+};
+
+const handleDelPodcast = (item: any) => {
+  delPodcast(item);
+  displayList.value = displayList.value.filter((p) => p.id !== item.id);
+};
+
+const handleDelPodcastRadio = (item: any) => {
+  delPodcastRadio(item);
+  displayList.value = displayList.value.filter((r) => r.id !== item.id);
+};
+
 // 加载历史数据（根据当前分类）
 const loadHistoryData = async () => {
   const currentList = getCurrentList();
@@ -386,7 +565,6 @@ const loadHistoryData = async () => {
     if (currentCategory.value === 'songs') {
       // 处理歌曲数据
       const neteaseItems = currentPageItems.filter((item) => item.source !== 'bilibili');
-      const bilibiliItems = currentPageItems.filter((item) => item.source === 'bilibili');
 
       let neteaseSongs: SongResult[] = [];
       if (neteaseItems.length > 0) {
@@ -405,32 +583,8 @@ const loadHistoryData = async () => {
         }
       }
 
-      const bilibiliIds = bilibiliItems
-        .map((item) => `${item.bilibiliData?.bvid}--1--${item.bilibiliData?.cid}`)
-        .filter((id) => id && !id.includes('undefined'));
-
-      const bilibiliSongs = await processBilibiliVideos(bilibiliIds);
-
-      bilibiliSongs.forEach((song) => {
-        const historyItem = bilibiliItems.find(
-          (item) =>
-            item.bilibiliData?.bvid === song.bilibiliData?.bvid &&
-            item.bilibiliData?.cid === song.bilibiliData?.cid
-        );
-        if (historyItem) {
-          song.count = historyItem.count || 0;
-        }
-      });
-
       const newSongs = currentPageItems
         .map((item) => {
-          if (item.source === 'bilibili') {
-            return bilibiliSongs.find(
-              (song) =>
-                song.bilibiliData?.bvid === item.bilibiliData?.bvid &&
-                song.bilibiliData?.cid === item.bilibiliData?.cid
-            );
-          }
           return neteaseSongs.find((song) => song.id === item.id);
         })
         .filter((song): song is SongResult => !!song);
@@ -441,7 +595,7 @@ const loadHistoryData = async () => {
         displayList.value = [...displayList.value, ...newSongs];
       }
     } else {
-      // 处理歌单和专辑数据（直接显示，不需要额外请求）
+      // 处理歌单、专辑、播客数据（直接显示，不需要额外请求）
       if (currentPage.value === 1) {
         displayList.value = currentPageItems;
       } else {
@@ -506,7 +660,7 @@ onMounted(async () => {
 
 // 监听历史列表变化，变化时重置并重新加载
 watch(
-  [musicList, playlistList, albumList],
+  [musicList, playlistList, albumList, podcastList, podcastRadioList],
   async () => {
     if (hasLoaded.value) {
       currentPage.value = 1;
@@ -531,87 +685,5 @@ const handleNavigateToHeatmap = () => {
 </script>
 
 <style scoped lang="scss">
-.history-page {
-  @apply h-full w-full pt-2;
-  @apply bg-light dark:bg-black;
-
-  .title-wrapper {
-    @apply flex items-center justify-between pb-2 px-4;
-
-    .title {
-      @apply text-xl font-bold;
-      @apply text-gray-900 dark:text-white;
-    }
-
-    .heatmap-btn {
-      @apply rounded-full px-4 h-8;
-      @apply transition-all duration-300;
-      @apply hover:scale-105;
-
-      .iconfont {
-        @apply text-base;
-      }
-    }
-  }
-
-  .category-tabs-wrapper {
-    @apply px-4 mb-2;
-  }
-
-  .tabs-wrapper {
-    @apply px-4;
-  }
-
-  .history-list-content {
-    @apply mt-2 pb-28 px-4;
-    .history-item {
-      @apply flex items-center justify-between;
-      &-content {
-        @apply flex-1 bg-light-100 dark:bg-dark-100 hover:bg-light-200 dark:hover:bg-dark-200 transition-all;
-      }
-      &-count {
-        @apply px-4 text-lg text-center;
-        @apply text-gray-600 dark:text-gray-400;
-      }
-      &-delete {
-        @apply cursor-pointer rounded-full border-2 w-8 h-8 flex justify-center items-center;
-        @apply border-gray-400 dark:border-gray-600;
-        @apply text-gray-600 dark:text-gray-400;
-        @apply hover:border-red-500 hover:text-red-500;
-      }
-    }
-  }
-}
-
-.loading-wrapper {
-  @apply flex justify-center items-center py-8;
-}
-
-.no-more-tip {
-  @apply text-center py-4 text-sm;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.no-data {
-  @apply text-center py-8 text-gray-500 dark:text-gray-400;
-}
-
-:deep(.n-tabs-rail) {
-  @apply rounded-xl overflow-hidden !important;
-  .n-tabs-capsule {
-    @apply rounded-xl !important;
-  }
-}
-
-.category-tabs-wrapper {
-  :deep(.n-tabs-rail) {
-    @apply rounded-xl overflow-hidden bg-white dark:bg-dark-300 !important;
-    .n-tabs-capsule {
-      @apply rounded-xl bg-green-500 dark:bg-green-600 !important;
-    }
-    .n-tabs-tab--active {
-      @apply text-white !important;
-    }
-  }
-}
+/* Minimal scoped styles */
 </style>

src/renderer/views/historyAndFavorite/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-4 h-full pb-4">
+  <div class="flex gap-6 h-full pb-4 px-6 pt-6 bg-white dark:bg-black">
     <favorite class="flex-item" v-if="!isMobile" />
     <history-list class="flex-item" />
   </div>
@@ -17,6 +17,6 @@ import HistoryList from '@/views/history/index.vue';
 
 <style scoped>
 .flex-item {
-  @apply flex-1 bg-light-100 dark:bg-dark-100 rounded-2xl overflow-hidden;
+  @apply flex-1 bg-gray-50 dark:bg-neutral-900/50 rounded-3xl overflow-hidden border border-gray-100 dark:border-neutral-800 transition-all duration-300;
 }
 </style>

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>

src/renderer/views/user/detail.vue

@@ -132,12 +132,10 @@ import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { getListDetail } from '@/api/list';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
-import type { Playlist } from '@/types/listDetail';
 import type { IUserDetail } from '@/types/user';
 import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 
@@ -160,10 +158,6 @@ const recordList = ref<any[]>([]);
 const loading = ref(true);
 const hasRecordPermission = ref(true); // 是否有权限查看听歌记录
 
-// 歌单详情相关
-const currentList = ref<Playlist>();
-const listLoading = ref(false);
-
 // 加载用户数据
 const loadUserData = async () => {
   if (!userId.value) {
@@ -238,20 +232,12 @@ watch(
 
 // 替换显示歌单的方法
 const openPlaylist = (item: any) => {
-  listLoading.value = true;
-
-  getListDetail(item.id).then((res) => {
-    currentList.value = res.data.playlist;
-    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
   });
 };
 

src/renderer/views/user/index.vue

@@ -1,110 +1,166 @@
 <template>
   <div class="user-page">
-    <div
-      v-if="userDetail && user"
-      class="left"
-      :class="setAnimationClass('animate__fadeInLeft')"
-      :style="{ backgroundImage: `url(${getImgUrl(user.backgroundUrl)})` }"
-    >
-      <div class="page">
-        <div class="user-name">
-          <span>{{ user.nickname }}</span>
-          <span v-if="currentLoginType" class="login-type">{{
-            t('login.title.' + currentLoginType)
-          }}</span>
-        </div>
-        <div class="user-info">
-          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl, '50y50')" />
-          <div class="user-info-list">
-            <div class="user-info-item">
-              <div class="label">{{ userDetail.profile.followeds }}</div>
-              <div>{{ t('user.profile.followers') }}</div>
-            </div>
-            <div class="user-info-item" @click="showFollowList">
-              <div class="label">{{ userDetail.profile.follows }}</div>
-              <div>{{ t('user.profile.following') }}</div>
-            </div>
-            <div class="user-info-item">
-              <div class="label">{{ userDetail.level }}</div>
-              <div>{{ t('user.profile.level') }}</div>
+    <template v-if="infoLoading">
+      <div class="left bg-gray-200 p-4 dark:bg-gray-800">
+        <div class="flex flex-col gap-6">
+          <div class="flex justify-between">
+            <n-skeleton text class="h-8 w-32" />
+            <n-skeleton text class="h-6 w-20" />
+          </div>
+          <div class="flex items-center gap-4">
+            <n-skeleton class="h-[50px] w-[50px] rounded-full" />
+            <div class="flex w-2/5 justify-around">
+              <div v-for="i in 3" :key="i" class="flex flex-col items-center gap-1">
+                <n-skeleton text class="h-5 w-8" />
+                <n-skeleton text class="h-4 w-12" />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="uesr-signature">{{ userDetail.profile.signature }}</div>
-        <div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
-          <div class="tab-container">
-            <n-tabs v-model:value="currentTab" type="segment" animated>
-              <n-tab v-for="tab in tabs" :key="tab.key" :name="tab.key" :tab="t(tab.label)">
-              </n-tab>
-            </n-tabs>
-          </div>
-          <n-scrollbar>
-            <div class="mt-4">
-              <button
-                class="play-list-item"
-                @click="goToImportPlaylist"
-                v-if="isElectron && currentTab === 'created'"
-              >
-                <div class="play-list-item-img"><i class="icon iconfont ri-add-line"></i></div>
-                <div class="play-list-item-info">
-                  <div class="play-list-item-name">
-                    {{ t('comp.playlist.import.button') }}
-                  </div>
-                </div>
-              </button>
-              <div
-                v-for="(item, index) in currentList"
-                :key="index"
-                class="play-list-item"
-                @click="handleItemClick(item)"
-              >
-                <n-image
-                  :src="getImgUrl(getCoverUrl(item), '50y50')"
-                  class="play-list-item-img"
-                  lazy
-                  preview-disabled
-                />
-                <div class="play-list-item-info">
-                  <div class="play-list-item-name">
-                    <n-ellipsis :line-clamp="1">{{ item.name }}</n-ellipsis>
-                  </div>
-                  <div class="play-list-item-count">
-                    {{ getItemDescription(item) }}
-                  </div>
+          <n-skeleton text class="h-4 w-3/4" />
+          <div class="mt-4 rounded-xl bg-light p-4 dark:bg-black">
+            <n-skeleton class="mb-4 h-8 w-full rounded-xl" />
+            <div class="space-y-4">
+              <div v-for="i in 5" :key="i" class="flex gap-3">
+                <n-skeleton class="h-[50px] w-[50px] rounded-xl" />
+                <div class="flex flex-1 flex-col justify-center gap-2">
+                  <n-skeleton text class="h-4 w-1/2" />
+                  <n-skeleton text class="h-3 w-1/3" />
                 </div>
               </div>
-              <div class="pb-20"></div>
-              <play-bottom />
             </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="!isMobile" class="right">
+        <div class="title"><n-skeleton text class="h-8 w-32" /></div>
+        <div class="rounded-2xl bg-light p-4 dark:bg-black">
+          <div class="space-y-2">
+            <div
+              v-for="i in 10"
+              :key="i"
+              class="flex items-center gap-4 rounded-2xl bg-light-100 p-2 dark:bg-dark-100"
+            >
+              <n-skeleton class="h-10 w-10 rounded-full" />
+              <n-skeleton class="h-10 w-10 rounded-xl" />
+              <div class="flex flex-1 flex-col gap-2">
+                <n-skeleton text class="h-4 w-1/3" />
+                <n-skeleton text class="h-3 w-1/4" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-if="userDetail && user"
+        class="left"
+        :class="setAnimationClass('animate__fadeIn')"
+        :style="{ backgroundImage: `url(${getImgUrl(user.backgroundUrl)})` }"
+      >
+        <div class="page">
+          <div class="user-name">
+            <span>{{ user.nickname }}</span>
+            <span v-if="currentLoginType" class="login-type">{{
+              t('login.title.' + currentLoginType)
+            }}</span>
+          </div>
+          <div class="user-info">
+            <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl, '50y50')" />
+            <div class="user-info-list">
+              <div class="user-info-item">
+                <div class="label">{{ userDetail.profile.followeds }}</div>
+                <div>{{ t('user.profile.followers') }}</div>
+              </div>
+              <div class="user-info-item" @click="showFollowList">
+                <div class="label">{{ userDetail.profile.follows }}</div>
+                <div>{{ t('user.profile.following') }}</div>
+              </div>
+              <div class="user-info-item">
+                <div class="label">{{ userDetail.level }}</div>
+                <div>{{ t('user.profile.level') }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="uesr-signature">{{ userDetail.profile.signature }}</div>
+          <div class="play-list" :class="setAnimationClass('animate__fadeIn')">
+            <div class="tab-container">
+              <n-tabs v-model:value="currentTab" type="segment" animated>
+                <n-tab v-for="tab in tabs" :key="tab.key" :name="tab.key" :tab="t(tab.label)">
+                </n-tab>
+              </n-tabs>
+            </div>
+            <n-scrollbar>
+              <div class="mt-4">
+                <div
+                  v-if="albumLoading && currentTab === 'album'"
+                  class="flex h-32 items-center justify-center"
+                >
+                  <n-spin size="medium" />
+                </div>
+                <template v-else>
+                  <button
+                    class="play-list-item"
+                    @click="goToImportPlaylist"
+                    v-if="isElectron && currentTab === 'created'"
+                  >
+                    <div class="play-list-item-img"><i class="icon iconfont ri-add-line"></i></div>
+                    <div class="play-list-item-info">
+                      <div class="play-list-item-name">
+                        {{ t('comp.playlist.import.button') }}
+                      </div>
+                    </div>
+                  </button>
+                  <div
+                    v-for="(item, index) in currentList"
+                    :key="index"
+                    class="play-list-item"
+                    @click="handleItemClick(item)"
+                  >
+                    <n-image
+                      :src="getImgUrl(getCoverUrl(item), '50y50')"
+                      class="play-list-item-img"
+                      lazy
+                      preview-disabled
+                    />
+                    <div class="play-list-item-info">
+                      <div class="play-list-item-name">
+                        <n-ellipsis :line-clamp="1">{{ item.name }}</n-ellipsis>
+                      </div>
+                      <div class="play-list-item-count">
+                        {{ getItemDescription(item) }}
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pb-20"></div>
+                  <play-bottom />
+                </template>
+              </div>
+            </n-scrollbar>
+          </div>
+        </div>
+      </div>
+      <div v-if="!isMobile" class="right" :class="setAnimationClass('animate__fadeIn')">
+        <div class="title">{{ t('user.ranking.title') }}</div>
+        <div class="record-list">
+          <n-scrollbar>
+            <div
+              v-for="(item, index) in recordList"
+              :key="item.id"
+              class="record-item"
+              :class="setAnimationClass('animate__bounceInUp')"
+              :style="setAnimationDelay(index, 25)"
+            >
+              <div class="play-score">
+                {{ index + 1 }}
+              </div>
+              <song-item class="song-item" :item="item" mini @play="handlePlay" />
+            </div>
+            <play-bottom />
           </n-scrollbar>
         </div>
       </div>
-    </div>
-    <div
-      v-if="!isMobile"
-      v-loading="infoLoading"
-      class="right"
-      :class="setAnimationClass('animate__fadeInRight')"
-    >
-      <div class="title">{{ t('user.ranking.title') }}</div>
-      <div class="record-list">
-        <n-scrollbar>
-          <div
-            v-for="(item, index) in recordList"
-            :key="item.id"
-            class="record-item"
-            :class="setAnimationClass('animate__bounceInUp')"
-            :style="setAnimationDelay(index, 25)"
-          >
-            <div class="play-score">
-              {{ index + 1 }}
-            </div>
-            <song-item class="song-item" :item="item" mini @play="handlePlay" />
-          </div>
-          <play-bottom />
-        </n-scrollbar>
-      </div>
-    </div>
+    </template>
     <!-- 未登录时显示登录组件 -->
     <div
       v-if="!isLoggedIn && isMobile"
@@ -118,19 +174,17 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { getListDetail } from '@/api/list';
 import { getUserAlbumSublist, getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
-import type { Playlist } from '@/types/listDetail';
-import type { IUserDetail } from '@/types/user';
 import { getImgUrl, isElectron, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 import { checkLoginStatus as checkAuthStatus } from '@/utils/auth';
 import LoginComponent from '@/views/login/index.vue';
@@ -143,12 +197,10 @@ const { t } = useI18n();
 const userStore = useUserStore();
 const playerStore = usePlayerStore();
 const router = useRouter();
-const userDetail = ref<IUserDetail>();
-const recordList = ref();
+const { userDetail, recordList } = storeToRefs(userStore);
 const infoLoading = ref(false);
+const albumLoading = ref(false);
 const mounted = ref(true);
-const list = ref<Playlist>();
-const listLoading = ref(false);
 const message = useMessage();
 
 // Tab 相关
@@ -244,7 +296,10 @@ const loadPage = async () => {
 
 const loadData = async () => {
   try {
-    infoLoading.value = true;
+    // 只有在没有数据时才显示加载状态
+    if (!userDetail.value || !recordList.value?.length) {
+      infoLoading.value = true;
+    }
 
     if (!user.value) {
       console.warn('用户数据不存在，尝试重新获取');
@@ -298,7 +353,7 @@ const loadAlbumList = async () => {
   }
 
   try {
-    infoLoading.value = true;
+    albumLoading.value = true;
     const res = await getUserAlbumSublist({ limit: 100, offset: 0 });
     if (!mounted.value) return;
     // 更新 store 中的专辑列表
@@ -308,7 +363,7 @@ const loadAlbumList = async () => {
     message.error('加载专辑列表失败');
   } finally {
     if (mounted.value) {
-      infoLoading.value = false;
+      albumLoading.value = false;
     }
   }
 };
@@ -356,53 +411,27 @@ onMounted(() => {
 
 // 替换显示歌单的方法
 const openPlaylist = (item: any) => {
-  listLoading.value = true;
-
-  getListDetail(item.id).then((res) => {
-    list.value = res.data.playlist;
-    listLoading.value = false;
-
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: true // 保留可移除功能
-    });
+  navigateToMusicList(router, {
+    id: item.id,
+    type: 'playlist',
+    name: item.name,
+    listInfo: item,
+    canRemove: true // 保留可移除功能
   });
 };
 
 // 打开专辑
 const openAlbum = async (item: any) => {
-  // 使用专辑 API 获取专辑详情
-  try {
-    listLoading.value = true;
-    const { getAlbumDetail } = await import('@/api/music');
-    const res = await getAlbumDetail(item.id.toString());
-
-    if (res.data?.album && res.data?.songs) {
-      const albumData = res.data.album;
-      const songs = res.data.songs.map((item) => ({
-        ...item,
-        picUrl: albumData.picUrl
-      }));
-
-      navigateToMusicList(router, {
-        id: item.id,
-        type: 'album',
-        name: albumData.name,
-        songList: songs,
-        listInfo: albumData,
-        canRemove: false // 专辑不支持移除歌曲
-      });
-    }
-  } catch (error) {
-    console.error('加载专辑失败:', error);
-    message.error('加载专辑失败');
-  } finally {
-    listLoading.value = false;
-  }
+  navigateToMusicList(router, {
+    id: item.id,
+    type: 'album',
+    name: item.name,
+    listInfo: {
+      ...item,
+      coverImgUrl: item.picUrl || item.coverImgUrl
+    },
+    canRemove: false // 专辑不支持移除歌曲
+  });
 };
 
 const handlePlay = () => {