From 754e17b864da5a5b8f3753d74aa6f866e5e4fb98 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:16:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BD/=E6=AD=8C=E8=AF=8D/MV/=E6=AD=8C=E5=8D=95/=E6=A6=9C?=
 =?UTF-8?q?=E5=8D=95=E7=AD=89=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/views/artist/detail.vue          |  890 ++++++----
 .../views/bilibili/BilibiliPlayer.vue         |  577 -------
 src/renderer/views/download/DownloadPage.vue  | 1241 +++++--------
 src/renderer/views/lyric/index.vue            |    2 +
 src/renderer/views/music/MusicListPage.vue    | 1532 ++++++-----------
 src/renderer/views/mv/index.vue               |  286 ++-
 .../views/playlist/ImportPlaylist.vue         |  884 +++++-----
 src/renderer/views/toplist/index.vue          |  223 +--
 8 files changed, 2172 insertions(+), 3463 deletions(-)
 delete mode 100644 src/renderer/views/bilibili/BilibiliPlayer.vue

diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
index 08cebe0..7eecd66 100644
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -1,188 +1,418 @@
 <template>
-  <n-scrollbar v-loading="loading" class="artist-page">
-    <!-- 歌手信息头部 -->
-    <div class="artist-header">
-      <div class="artist-cover">
-        <n-image
-          :src="getImgUrl(artistInfo?.avatar, '300y300')"
-          class="artist-avatar"
-          preview-disabled
-        />
-      </div>
-      <div class="artist-info">
-        <h1 class="artist-name">{{ artistInfo?.name }}</h1>
-        <div v-if="artistInfo?.alias?.length" class="artist-alias">
-          {{ artistInfo.alias.join(' / ') }}
-        </div>
-        <div v-if="artistInfo?.briefDesc" class="artist-desc">
-          {{ artistInfo.briefDesc }}
-        </div>
-      </div>
-    </div>
-
-    <!-- 标签页切换 -->
-    <n-tabs v-model:value="activeTab" class="content-tabs" type="line" animated>
-      <n-tab-pane name="songs" :tab="t('artist.hotSongs')">
-        <!-- 添加歌曲操作工具栏 -->
-        <div class="songs-toolbar">
-          <div class="toolbar-left">
-            <n-tooltip placement="bottom" trigger="hover">
-              <template #trigger>
-                <div class="action-button hover-green" @click="handlePlayAll">
-                  <i class="icon iconfont ri-play-fill"></i>
-                </div>
-              </template>
-              {{ t('comp.musicList.playAll') }}
-            </n-tooltip>
-
-            <n-tooltip placement="bottom" trigger="hover">
-              <template #trigger>
-                <div class="action-button hover-green" @click="addToPlaylist">
-                  <i class="icon iconfont ri-add-line"></i>
-                </div>
-              </template>
-              {{ t('comp.musicList.addToPlaylist') }}
-            </n-tooltip>
-          </div>
-
-          <div class="toolbar-right">
-            <!-- 布局切换按钮 -->
-            <div class="layout-toggle" v-if="!isMobile">
-              <n-tooltip placement="bottom" trigger="hover">
-                <template #trigger>
-                  <div class="toggle-button hover-green" @click="toggleLayout">
-                    <i
-                      class="icon iconfont"
-                      :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
-                    ></i>
+  <div
+    class="artist-detail-page h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500"
+  >
+    <n-scrollbar ref="scrollbarRef" class="h-full">
+      <div class="artist-detail-content w-full pb-32">
+        <!-- Loading State -->
+        <div v-if="loading" class="artist-content">
+          <!-- Hero Skeleton -->
+          <div class="hero-section relative h-[400px] overflow-hidden rounded-tl-2xl">
+            <div class="hero-bg absolute inset-0 -top-20">
+              <div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
+            </div>
+            <div class="hero-content relative z-10 px-4 pb-6 pt-4 md:px-8 md:pt-8">
+              <div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
+                <n-skeleton class="h-36 w-36 rounded-full md:h-48 md:w-48" />
+                <div class="flex-1 space-y-4 text-center md:text-left">
+                  <n-skeleton class="h-6 w-20 rounded-full" />
+                  <n-skeleton class="h-10 w-1/2 md:h-12" />
+                  <div class="flex justify-center gap-4 md:justify-start">
+                    <n-skeleton class="h-6 w-24" />
+                    <n-skeleton class="h-6 w-24" />
                   </div>
-                </template>
-                {{
-                  isCompactLayout
-                    ? t('comp.musicList.switchToNormal')
-                    : t('comp.musicList.switchToCompact')
-                }}
-              </n-tooltip>
+                </div>
+              </div>
             </div>
-
-            <!-- 搜索框 -->
-            <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
-              <template v-if="isSearchVisible">
-                <n-input
-                  v-model:value="searchKeyword"
-                  :placeholder="t('comp.musicList.searchSongs')"
-                  clearable
-                  round
-                  size="small"
-                  @blur="handleSearchBlur"
-                >
-                  <template #prefix>
-                    <i class="icon iconfont ri-search-line text-sm"></i>
-                  </template>
-                  <template #suffix>
-                    <i
-                      class="icon iconfont ri-close-line text-sm cursor-pointer"
-                      @click="closeSearch"
-                    ></i>
-                  </template>
-                </n-input>
-              </template>
-              <template v-else>
-                <n-tooltip placement="bottom" trigger="hover">
-                  <template #trigger>
-                    <div class="search-button" @click="showSearch">
-                      <i class="icon iconfont ri-search-line"></i>
-                    </div>
-                  </template>
-                  {{ t('comp.musicList.searchSongs') }}
-                </n-tooltip>
-              </template>
+          </div>
+          <!-- Content Skeleton -->
+          <div class="mt-8 px-4 md:px-8">
+            <div class="space-y-4">
+              <div v-for="i in 8" :key="i" class="flex items-center gap-4">
+                <n-skeleton class="h-12 w-12 rounded-xl" />
+                <div class="flex-1 space-y-2">
+                  <n-skeleton text class="w-1/3" />
+                  <n-skeleton text class="w-1/4" />
+                </div>
+                <n-skeleton class="h-8 w-8 rounded-full" />
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="songs-list">
-          <div class="song-list-content">
-            <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
-              {{ t('comp.musicList.noSearchResults') }}
+        <!-- Main Content -->
+        <div v-else-if="artistInfo" class="artist-content">
+          <!-- Hero Section -->
+          <section class="hero-section relative overflow-hidden overflow-hidden rounded-tl-2xl">
+            <!-- Background Image with Blur -->
+            <div class="hero-bg absolute inset-0 -top-20">
+              <div
+                class="absolute inset-0 bg-cover bg-center scale-110 blur-2xl opacity-40 dark:opacity-30"
+                :style="{
+                  backgroundImage: `url(${getImgUrl(artistInfo.cover || artistInfo.picUrl, '800y800')})`
+                }"
+              />
+              <div
+                class="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white dark:via-neutral-900/80 dark:to-neutral-900"
+              />
             </div>
 
-            <!-- 替换原来的 v-for 循环为虚拟列表 -->
-            <n-virtual-list
-              ref="songListRef"
-              class="song-virtual-list"
-              style="height: calc(80vh - 60px)"
-              :items="filteredSongs"
-              :item-size="isCompactLayout ? 50 : 70"
-              item-resizable
-              key-field="id"
-              @scroll="handleVirtualScroll"
-            >
-              <template #default="{ item, index }">
-                <div>
-                  <div class="double-item">
-                    <song-item
-                      :index="index"
-                      :compact="isCompactLayout"
-                      :item="formatSong(item)"
-                      @play="handlePlay"
+            <!-- Hero Content -->
+            <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
+              <div class="flex flex-col md:flex-row gap-6 md:gap-10 items-center md:items-end">
+                <!-- Artist Avatar -->
+                <div class="artist-avatar-wrapper relative group">
+                  <div
+                    class="avatar-glow absolute -inset-2 rounded-full bg-gradient-to-br from-primary/30 via-primary/10 to-transparent blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                  />
+                  <div
+                    class="avatar-container relative w-36 h-36 md:w-48 md:h-48 rounded-full overflow-hidden shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
+                  >
+                    <img
+                      :src="getImgUrl(artistInfo.cover || artistInfo.picUrl, '500y500')"
+                      :alt="artistInfo.name"
+                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                     />
+                    <!-- Play overlay on avatar -->
+                    <div
+                      class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-all duration-300"
+                    >
+                      <div
+                        class="play-icon w-14 h-14 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 cursor-pointer hover:scale-110 active:scale-95"
+                        @click="handlePlayAll"
+                      >
+                        <i class="iconfont icon-playfill text-2xl text-neutral-900 ml-1" />
+                      </div>
+                    </div>
                   </div>
-                  <div v-if="index === filteredSongs.length - 1" class="h-36"></div>
                 </div>
-              </template>
-            </n-virtual-list>
 
-            <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
+                <!-- Artist Info -->
+                <div class="artist-info flex-1 text-center md:text-left">
+                  <div class="artist-badge mb-2 md:mb-3">
+                    <span
+                      class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 dark:bg-primary/20 text-primary text-xs font-semibold uppercase tracking-wider"
+                    >
+                      <i class="iconfont icon-verified text-sm" />
+                      Artist
+                    </span>
+                  </div>
+                  <h1
+                    class="artist-name text-3xl md:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white tracking-tight"
+                  >
+                    {{ artistInfo.name }}
+                  </h1>
+
+                  <!-- Stats -->
+                  <div
+                    class="artist-stats flex flex-wrap items-center justify-center md:justify-start gap-4 md:gap-6 mt-4 md:mt-5"
+                  >
+                    <div v-if="artistInfo.musicSize" class="stat-item flex items-center gap-2">
+                      <i class="iconfont icon-music text-primary text-lg" />
+                      <span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                        <span class="font-bold text-neutral-900 dark:text-white">{{
+                          artistInfo.musicSize
+                        }}</span>
+                        {{ t('artist.hotSongs') }}
+                      </span>
+                    </div>
+                    <div v-if="artistInfo.albumSize" class="stat-item flex items-center gap-2">
+                      <i class="iconfont icon-album text-primary text-lg" />
+                      <span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                        <span class="font-bold text-neutral-900 dark:text-white">{{
+                          artistInfo.albumSize
+                        }}</span>
+                        {{ t('artist.albums') }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Action Bar -->
+          <section
+            class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <!-- Left Actions -->
+              <div class="flex items-center gap-2 md:gap-3">
+                <!-- Play All Button -->
+                <button
+                  class="play-all-btn flex items-center gap-2 px-4 md:px-5 py-2 md:py-2.5 rounded-full bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-primary/25"
+                  @click="handlePlayAll"
+                >
+                  <i class="iconfont icon-playfill text-lg" />
+                  <span class="hidden sm:inline">{{ t('comp.musicList.playAll') }}</span>
+                </button>
+
+                <!-- Add to Playlist Button -->
+                <button
+                  class="add-btn flex items-center justify-center w-10 h-10 md:w-auto md:h-auto md:px-4 md:py-2.5 rounded-full md:rounded-full bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-700 dark:text-neutral-200 font-medium text-sm transition-all duration-200 hover:scale-105 active:scale-95"
+                  @click="addToPlaylist"
+                >
+                  <i class="iconfont icon-add text-lg" />
+                  <span class="hidden md:inline ml-2">{{ t('comp.musicList.addToPlaylist') }}</span>
+                </button>
+              </div>
+
+              <!-- Right Actions -->
+              <div class="flex items-center gap-2">
+                <!-- Search Toggle -->
+                <button
+                  v-if="activeTab === 'songs'"
+                  class="action-btn w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95"
+                  :class="
+                    isSearchVisible
+                      ? 'bg-primary/10 dark:bg-primary/20 text-primary'
+                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                  "
+                  @click="isSearchVisible ? closeSearch() : showSearch()"
+                >
+                  <i class="iconfont" :class="isSearchVisible ? 'icon-close' : 'icon-search'" />
+                </button>
+
+                <!-- Layout Toggle (Desktop only) -->
+                <button
+                  v-if="activeTab === 'songs' && !isMobile"
+                  class="action-btn w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-all duration-200 hover:scale-105 active:scale-95"
+                  :title="
+                    isCompactLayout
+                      ? t('comp.musicList.switchToNormal')
+                      : t('comp.musicList.switchToCompact')
+                  "
+                  @click="toggleLayout"
+                >
+                  <i class="iconfont" :class="isCompactLayout ? 'icon-list' : 'icon-menu'" />
+                </button>
+              </div>
+            </div>
+
+            <!-- Search Input (Expandable) -->
+            <Transition name="search-slide">
+              <div v-if="isSearchVisible && activeTab === 'songs'" class="search-container mt-3">
+                <div
+                  class="relative flex items-center bg-neutral-100 dark:bg-neutral-800 rounded-xl overflow-hidden"
+                >
+                  <i class="iconfont icon-search text-neutral-400 dark:text-neutral-500 ml-4" />
+                  <input
+                    v-model="searchKeyword"
+                    type="text"
+                    :placeholder="t('comp.musicList.searchSongs')"
+                    class="flex-1 px-3 py-2.5 bg-transparent text-sm text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 outline-none"
+                    @blur="handleSearchBlur"
+                  />
+                  <button
+                    v-if="searchKeyword"
+                    class="px-3 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
+                    @click="searchKeyword = ''"
+                  >
+                    <i class="iconfont icon-close text-sm" />
+                  </button>
+                </div>
+              </div>
+            </Transition>
+          </section>
+
+          <!-- Tab Navigation -->
+          <section class="tab-nav px-4 md:px-8 pt-4 md:pt-6">
             <div
-              v-else-if="songPage.hasMore"
-              ref="songsLoadMoreRef"
-              class="load-more-trigger"
-            ></div>
-          </div>
-        </div>
-      </n-tab-pane>
+              class="tab-list relative flex gap-1 p-1 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl w-fit"
+            >
+              <button
+                v-for="tab in tabs"
+                :key="tab.value"
+                class="tab-item relative px-4 md:px-6 py-2 md:py-2.5 rounded-lg text-sm font-medium transition-all duration-200"
+                :class="
+                  activeTab === tab.value
+                    ? 'text-neutral-900 dark:text-white'
+                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+                "
+                @click="activeTab = tab.value"
+              >
+                <span class="relative z-10">{{ tab.label }}</span>
+                <!-- Active indicator -->
+                <Transition name="tab-indicator">
+                  <div
+                    v-if="activeTab === tab.value"
+                    class="absolute inset-0 bg-white dark:bg-neutral-700 rounded-lg shadow-sm"
+                  />
+                </Transition>
+              </button>
+            </div>
+          </section>
 
-      <n-tab-pane name="albums" :tab="t('artist.albums')">
-        <div class="albums-list">
-          <div class="albums-grid">
-            <search-item
-              v-for="album in albums"
-              :key="album.id"
-              shape="square"
-              :item="{
-                id: album.id,
-                picUrl: album.picUrl,
-                name: album.name,
-                desc: formatPublishTime(album.publishTime),
-                size: album.size,
-                type: '专辑'
-              }"
-            />
-            <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
-            <div
-              v-else-if="albumPage.hasMore"
-              ref="albumsLoadMoreRef"
-              class="load-more-trigger"
-            ></div>
-          </div>
-        </div>
-      </n-tab-pane>
+          <!-- Tab Content -->
+          <section class="tab-content px-4 md:px-8 py-6 md:py-8">
+            <!-- Songs Tab -->
+            <div v-show="activeTab === 'songs'" class="songs-tab">
+              <!-- No Results -->
+              <div
+                v-if="filteredSongs.length === 0 && searchKeyword"
+                class="empty-state flex flex-col items-center justify-center py-16"
+              >
+                <i
+                  class="iconfont icon-search text-5xl text-neutral-300 dark:text-neutral-600 mb-4"
+                />
+                <p class="text-neutral-500 dark:text-neutral-400">
+                  {{ t('comp.musicList.noSearchResults') }}
+                </p>
+              </div>
 
-      <n-tab-pane name="about" :tab="t('artist.description')">
-        <div class="artist-description">
-          <div class="description-content" v-html="artistInfo?.briefDesc"></div>
-        </div>
-      </n-tab-pane>
-    </n-tabs>
+              <!-- Song List with CSS optimization -->
+              <div v-else class="song-list" :class="{ 'compact-mode': isCompactLayout }">
+                <div
+                  v-for="(song, index) in filteredSongs"
+                  :key="song.id"
+                  class="song-item-container"
+                >
+                  <song-item
+                    :item="formatSong(song)"
+                    :compact="isCompactLayout"
+                    :index="index"
+                    @play="handlePlay(song)"
+                  />
+                </div>
+              </div>
 
+              <!-- Load More Trigger -->
+              <div ref="songsLoadMoreRef" class="load-more-trigger py-8">
+                <div v-if="songLoading" class="flex items-center justify-center gap-2">
+                  <div
+                    class="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin"
+                  />
+                  <span class="text-sm text-neutral-400 dark:text-neutral-500">{{
+                    t('common.loading') || 'Loading...'
+                  }}</span>
+                </div>
+                <div
+                  v-else-if="!songPage.hasMore && songs.length > 0"
+                  class="text-center text-sm text-neutral-400 dark:text-neutral-500"
+                >
+                  — {{ t('common.noMore') || 'No more' }} —
+                </div>
+              </div>
+            </div>
+
+            <!-- Albums Tab -->
+            <div v-show="activeTab === 'albums'" class="albums-tab">
+              <!-- Album Grid -->
+              <div
+                v-if="albums.length > 0"
+                class="album-grid grid grid-cols-2 gap-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+              >
+                <div
+                  v-for="(album, index) in albums"
+                  :key="album.id"
+                  class="album-card group cursor-pointer"
+                  :style="{ animationDelay: calculateAnimationDelay(index, 0.03) }"
+                  @click="handleAlbumClick(album)"
+                >
+                  <!-- Cover -->
+                  <div
+                    class="album-cover relative aspect-square overflow-hidden rounded-2xl shadow-lg"
+                  >
+                    <img
+                      :src="getImgUrl(album.picUrl, '500y500')"
+                      :alt="album.name"
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      loading="lazy"
+                    />
+                    <!-- Play Overlay -->
+                    <div
+                      class="play-overlay absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 group-hover:bg-black/20 group-hover:opacity-100 transition-all duration-300"
+                    >
+                      <div
+                        class="play-icon w-12 h-12 rounded-full bg-white/90 flex items-center justify-center scale-75 group-hover:scale-100 transition-transform duration-300 shadow-xl"
+                      >
+                        <i class="iconfont icon-playfill text-xl text-neutral-900 ml-0.5" />
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Info -->
+                  <div class="album-info mt-3">
+                    <h3
+                      class="album-name line-clamp-2 text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary dark:group-hover:text-primary transition-colors"
+                    >
+                      {{ album.name }}
+                    </h3>
+                    <p class="album-date mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                      {{ formatPublishTime(album.publishTime) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Load More Trigger -->
+              <div ref="albumsLoadMoreRef" class="load-more-trigger py-8">
+                <div v-if="albumLoading" class="flex items-center justify-center gap-2">
+                  <div
+                    class="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin"
+                  />
+                  <span class="text-sm text-neutral-400 dark:text-neutral-500">{{
+                    t('common.loading') || 'Loading...'
+                  }}</span>
+                </div>
+                <div
+                  v-else-if="!albumPage.hasMore && albums.length > 0"
+                  class="text-center text-sm text-neutral-400 dark:text-neutral-500"
+                >
+                  — {{ t('common.noMore') || 'No more' }} —
+                </div>
+              </div>
+            </div>
+
+            <!-- About Tab -->
+            <div v-show="activeTab === 'about'" class="about-tab">
+              <div class="about-content">
+                <h2
+                  class="text-xl md:text-2xl font-bold text-neutral-900 dark:text-white mb-4 md:mb-6"
+                >
+                  {{ t('artist.description') }}
+                </h2>
+                <div
+                  v-if="artistInfo.briefDesc"
+                  class="prose prose-neutral dark:prose-invert max-w-none"
+                >
+                  <p
+                    class="text-sm md:text-base leading-relaxed text-neutral-600 dark:text-neutral-300 whitespace-pre-line"
+                  >
+                    {{ artistInfo.briefDesc }}
+                  </p>
+                </div>
+                <div
+                  v-else
+                  class="empty-state flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
+                >
+                  <i class="iconfont icon-info text-5xl mb-4 opacity-50" />
+                  <p>{{ t('common.noData') || 'No description available' }}</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- Empty State (No Artist) -->
+        <div
+          v-else
+          class="empty-state flex flex-col items-center justify-center min-h-[60vh] text-neutral-400 dark:text-neutral-500"
+        >
+          <i class="iconfont icon-user text-6xl mb-4 opacity-30" />
+          <p>{{ t('common.noData') || 'Artist not found' }}</p>
+        </div>
+      </div>
+    </n-scrollbar>
+
+    <!-- Bottom Player Spacer -->
     <play-bottom />
-  </n-scrollbar>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { useMessage } from 'naive-ui';
+import { NScrollbar, useMessage } from 'naive-ui';
 import PinyinMatch from 'pinyin-match';
 import {
   computed,
@@ -199,12 +429,13 @@ import { useRoute } from 'vue-router';
 
 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import PlayBottom from '@/components/common/PlayBottom.vue';
-import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import router from '@/router';
 import { usePlayerStore } from '@/store';
 import { IArtist } from '@/types/artist';
-import { getImgUrl, isMobile } from '@/utils';
+import { calculateAnimationDelay, getImgUrl, isMobile } from '@/utils';
 
 defineOptions({
   name: 'ArtistDetail'
@@ -218,6 +449,15 @@ const message = useMessage();
 const artistId = computed(() => Number(route.params.id));
 const activeTab = ref('songs');
 
+const scrollbarRef = ref<any>(null);
+
+// Tab configuration
+const tabs = computed(() => [
+  { value: 'songs', label: t('artist.hotSongs') },
+  { value: 'albums', label: t('artist.albums') },
+  { value: 'about', label: t('artist.description') }
+]);
+
 // 歌手信息
 const artistInfo = ref<IArtist>();
 const songs = ref<any[]>([]);
@@ -263,10 +503,34 @@ const isCompactLayout = ref(
   isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
 );
 
+// 导航到专辑详情
+const handleAlbumClick = async (album: any) => {
+  try {
+    navigateToMusicList(router, {
+      id: album.id,
+      type: 'album',
+      name: album.name,
+      listInfo: {
+        ...album,
+        coverImgUrl: album.picUrl
+      },
+      canRemove: false
+    });
+  } catch (error) {
+    console.error('Failed to navigate to album:', error);
+    message.error(t('common.loadFailed'));
+  }
+};
+
 // 加载歌手信息
 const loadArtistInfo = async () => {
   if (!artistId.value) return;
 
+  // 滚动到顶部
+  nextTick(() => {
+    scrollbarRef.value?.scrollTo(0, 0);
+  });
+
   // 简化缓存检查
   const cacheKey = getCacheKey(artistId.value);
   if (artistDataCache.has(cacheKey)) {
@@ -606,6 +870,11 @@ onActivated(() => {
   if (route.name === 'artistDetail') {
     const currentId = route.params.id as string;
 
+    // 滚动到顶部
+    nextTick(() => {
+      scrollbarRef.value?.scrollTo(0, 0);
+    });
+
     // 首次加载或ID变化时加载数据
     if (!previousId.value || previousId.value !== currentId) {
       console.log('ID已变化，加载新数据');
@@ -646,10 +915,7 @@ onUnmounted(() => {
   }
 });
 
-// 定义在script setup部分
-const songListRef = ref(null);
-
-// 格式化歌曲（使用在虚拟列表中）
+// 格式化歌曲（使用在列表中）
 const formatSong = (item: any) => {
   if (!item) {
     return null;
@@ -659,168 +925,150 @@ const formatSong = (item: any) => {
     picUrl: item.al?.picUrl || item.picUrl
   };
 };
-
-// 处理虚拟列表滚动
-const handleVirtualScroll = (e: any) => {
-  if (!e || !e.target) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  const threshold = 200;
-
-  if (
-    scrollHeight - scrollTop - clientHeight < threshold &&
-    !songLoading.value &&
-    songPage.value.hasMore &&
-    !searchKeyword.value // 搜索状态下不触发加载更多
-  ) {
-    loadSongs();
-  }
-};
 </script>
 
 <style lang="scss" scoped>
-.artist-page {
-  @apply min-h-screen w-full bg-light dark:bg-dark pb-24;
+/* Artist Detail Page Styles */
+.artist-detail-page {
+  position: relative;
+}
 
-  .nav-header {
-    @apply flex items-center px-4 py-3 sticky top-0 bg-light dark:bg-dark z-10;
+/* Hero Section */
+.hero-section {
+  min-height: 200px;
+}
 
-    i {
-      @apply text-xl mr-4 cursor-pointer;
-    }
+/* Action Bar Sticky Behavior */
+.action-bar {
+  transition:
+    background-color 0.3s,
+    box-shadow 0.3s;
+}
 
-    .page-title {
-      @apply text-base font-medium truncate;
-    }
+/* Tab Indicator Animation */
+.tab-item {
+  z-index: 1;
+}
+
+.tab-item > div {
+  z-index: -1;
+}
+
+.tab-indicator-enter-active,
+.tab-indicator-leave-active {
+  transition: all 0.2s ease;
+}
+
+.tab-indicator-enter-from,
+.tab-indicator-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* Search Slide Animation */
+.search-slide-enter-active,
+.search-slide-leave-active {
+  transition: all 0.25s ease;
+}
+
+.search-slide-enter-from,
+.search-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+  max-height: 0;
+  margin-top: 0;
+}
+
+.search-slide-enter-to,
+.search-slide-leave-from {
+  max-height: 60px;
+}
+
+/* Virtual Song List */
+.virtual-song-list {
+  @apply w-full;
+}
+
+.song-list {
+  @apply w-full;
+}
+
+/* CSS-based virtualization for performance */
+.song-item-container {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 72px; /* 预估高度，防止布局抖动 */
+}
+
+/* Compact layout - smaller item height */
+.song-list.compact-mode .song-item-container {
+  contain-intrinsic-size: 0 52px;
+}
+
+/* Album Card Animation */
+.album-card {
+  animation: fadeInUp 0.4s ease backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  .artist-header {
-    @apply flex flex-col md:flex-row gap-4 md:gap-6 px-4 pb-4;
-
-    .artist-cover {
-      @apply flex justify-center md:justify-start;
-
-      .artist-avatar {
-        @apply w-40 h-40 md:w-48 md:h-48 rounded-2xl object-cover;
-      }
-    }
-
-    .artist-info {
-      @apply flex-1;
-
-      .artist-name {
-        @apply text-2xl md:text-4xl font-bold mb-2 text-center md:text-left;
-      }
-
-      .artist-alias {
-        @apply text-gray-500 dark:text-gray-400 mb-2 text-center md:text-left;
-      }
-
-      .artist-desc {
-        @apply text-sm text-gray-600 dark:text-gray-300 line-clamp-3 text-center md:text-left;
-      }
-    }
-  }
-
-  .content-tabs {
-    @apply px-4;
-
-    :deep(.n-tabs-nav) {
-      @apply sticky top-0 bg-light dark:bg-dark z-10;
-    }
-  }
-
-  .albums-grid {
-    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 pb-40;
-  }
-
-  .loading-more {
-    @apply text-center py-4 text-gray-500 dark:text-gray-400;
-  }
-
-  .load-more-trigger {
-    @apply h-4 w-full;
-  }
-
-  .artist-description {
-    .description-content {
-      @apply text-sm leading-relaxed whitespace-pre-wrap;
-    }
-  }
-
-  // 添加歌曲工具栏样式
-  .songs-toolbar {
-    @apply flex items-center justify-between mb-4;
-
-    .toolbar-left,
-    .toolbar-right {
-      @apply flex items-center gap-2;
-    }
-  }
-
-  // 搜索框样式
-  .search-container {
-    @apply max-w-md transition-all duration-300 ease-in-out;
-
-    &.search-expanded {
-      @apply w-52;
-    }
-
-    .search-button {
-      @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
-
-      .icon {
-        @apply text-lg;
-      }
-    }
-
-    :deep(.n-input) {
-      @apply bg-light-200 dark:bg-dark-200;
-    }
-  }
-
-  // 操作按钮样式
-  .layout-toggle .toggle-button,
-  .action-button {
-    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
-
-    .icon {
-      @apply text-lg;
-    }
-
-    &.hover-green:hover {
-      .icon {
-        @apply text-green-500;
-      }
-    }
-  }
-
-  // 搜索无结果样式
-  .no-result {
-    @apply text-center py-8 text-gray-500 dark:text-gray-400;
-  }
-
-  // 虚拟列表样式
-  .song-virtual-list {
-    :deep(.n-virtual-list__scroll) {
-      scrollbar-width: thin;
-      &::-webkit-scrollbar {
-        width: 4px;
-      }
-      &::-webkit-scrollbar-thumb {
-        @apply bg-gray-400 dark:bg-gray-600 rounded;
-      }
-    }
-  }
-
-  .double-item {
-    @apply mb-2 bg-light-100 bg-opacity-30 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.mobile {
-  .songs-toolbar {
-    @apply mb-0;
+/* Loading Spinner */
+.loading-spinner {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
   }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Hover Effects */
+.album-cover {
+  transition: box-shadow 0.3s ease;
+}
+
+.album-card:hover .album-cover {
+  @apply shadow-2xl shadow-primary/10;
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+  .hero-section {
+    min-height: auto;
+  }
+
+  .action-bar {
+    @apply py-2;
+  }
+
+  .tab-list {
+    @apply w-full;
+  }
+
+  .tab-item {
+    @apply flex-1 text-center;
+  }
+}
+
+/* Focus states for accessibility */
+button:focus-visible {
+  @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-white dark:ring-offset-neutral-900;
+}
+
+input:focus-visible {
+  @apply outline-none ring-2 ring-primary/50;
 }
 </style>
diff --git a/src/renderer/views/bilibili/BilibiliPlayer.vue b/src/renderer/views/bilibili/BilibiliPlayer.vue
deleted file mode 100644
index 89ef11d..0000000
--- a/src/renderer/views/bilibili/BilibiliPlayer.vue
+++ /dev/null
@@ -1,577 +0,0 @@
-<template>
-  <div class="bilibili-player-page">
-    <n-scrollbar class="content-scrollbar">
-      <div class="content-wrapper">
-        <div v-if="isLoading" class="loading-wrapper">
-          <n-spin size="large" />
-          <p>{{ t('bilibili.player.loading') }}</p>
-        </div>
-
-        <div v-else-if="errorMessage" class="error-wrapper">
-          <i class="ri-error-warning-line text-4xl text-red-500"></i>
-          <p>{{ errorMessage }}</p>
-          <n-button type="primary" @click="loadVideoSource">{{
-            t('bilibili.player.retry')
-          }}</n-button>
-        </div>
-
-        <div v-else-if="videoDetail" class="bilibili-info-wrapper" :class="mainContentAnimation">
-          <div class="bilibili-cover">
-            <n-image
-              :src="getBilibiliProxyUrl(videoDetail.pic)"
-              class="cover-image"
-              preview-disabled
-            />
-            <!-- 悬浮的播放按钮 -->
-            <div class="play-overlay">
-              <div class="play-icon-bg" @click="playCurrentAudio">
-                <i class="ri-play-fill"></i>
-              </div>
-              <!-- 固定在右下角的大型播放按钮 -->
-              <n-button
-                type="primary"
-                size="large"
-                class="corner-play-button"
-                :loading="partLoading"
-                @click="playCurrentAudio"
-              >
-                <template #icon>
-                  <i class="ri-play-fill"></i>
-                </template>
-                {{ t('bilibili.player.playNow') }}
-              </n-button>
-            </div>
-          </div>
-
-          <div class="video-info">
-            <div
-              class="title"
-              v-html="videoDetail?.title || t('bilibili.player.loadingTitle')"
-            ></div>
-            <div class="author">
-              <i class="ri-user-line mr-1"></i>
-              <span>{{ videoDetail.owner?.name }}</span>
-            </div>
-            <div class="stats">
-              <span
-                ><i class="ri-play-line mr-1"></i>{{ formatNumber(videoDetail.stat?.view) }}</span
-              >
-              <span
-                ><i class="ri-chat-1-line mr-1"></i
-                >{{ formatNumber(videoDetail.stat?.danmaku) }}</span
-              >
-              <span
-                ><i class="ri-thumb-up-line mr-1"></i
-                >{{ formatNumber(videoDetail.stat?.like) }}</span
-              >
-            </div>
-            <div class="description">
-              <p>{{ videoDetail.desc }}</p>
-            </div>
-            <div class="duration">
-              <p>
-                {{
-                  t('bilibili.player.totalDuration', {
-                    duration: formatTotalDuration(videoDetail.duration)
-                  })
-                }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-if="videoDetail?.pages && videoDetail.pages.length > 1"
-          class="video-parts"
-          :class="partsListAnimation"
-        >
-          <div class="parts-title">
-            {{ t('bilibili.player.partsList', { count: videoDetail.pages.length }) }}
-            <n-spin v-if="partLoading" size="small" class="ml-2" />
-          </div>
-          <div class="parts-list">
-            <n-button
-              v-for="page in videoDetail.pages"
-              :key="page.cid"
-              :type="isCurrentPlayingPage(page) ? 'primary' : 'default'"
-              :disabled="partLoading"
-              size="small"
-              class="part-item"
-              @click="switchPage(page)"
-            >
-              {{ page.part }}
-            </n-button>
-          </div>
-        </div>
-
-        <!-- 底部留白 -->
-        <div class="pb-20"></div>
-      </div>
-    </n-scrollbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMessage } from 'naive-ui';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import {
-  createSongFromBilibiliVideo as createBilibiliSong,
-  getBilibiliPlayUrl,
-  getBilibiliProxyUrl,
-  getBilibiliVideoDetail
-} from '@/api/bilibili';
-import { usePlayerStore } from '@/store/modules/player';
-import type { IBilibiliPage, IBilibiliVideoDetail } from '@/types/bilibili';
-import type { SongResult } from '@/types/music';
-import { setAnimationClass } from '@/utils';
-
-defineOptions({
-  name: 'BilibiliPlayer'
-});
-
-// 使用路由获取参数
-const route = useRoute();
-const router = useRouter();
-const message = useMessage();
-const playerStore = usePlayerStore();
-const { t } = useI18n();
-
-// 从路由参数获取bvid
-const bvid = computed(() => route.params.bvid as string);
-
-const isLoading = ref(true); // 初始加载状态
-const partLoading = ref(false); // 分P加载状态，仅影响分P选择
-const errorMessage = ref('');
-const videoDetail = ref<IBilibiliVideoDetail | null>(null);
-const currentPage = ref<IBilibiliPage | null>(null);
-const audioList = ref<SongResult[]>([]);
-
-// 只在初始加载时应用动画
-const initialLoadDone = ref(false);
-const mainContentAnimation = computed(() => {
-  if (!initialLoadDone.value) {
-    return setAnimationClass('animate__fadeInDown');
-  }
-  return '';
-});
-
-const partsListAnimation = computed(() => {
-  if (!initialLoadDone.value) {
-    return setAnimationClass('animate__fadeInUp');
-  }
-  return '';
-});
-
-// 监听bvid变化
-watch(
-  () => bvid.value,
-  async (newBvid) => {
-    if (newBvid) {
-      // 新的视频ID，重置初始加载状态
-      initialLoadDone.value = false;
-      await loadVideoDetail(newBvid);
-    }
-  }
-);
-
-// 组件挂载时加载数据
-onMounted(async () => {
-  if (bvid.value) {
-    await loadVideoDetail(bvid.value);
-  } else {
-    message.error(t('bilibili.player.errors.invalidVideoId'));
-    router.back();
-  }
-});
-
-const loadVideoDetail = async (bvid: string) => {
-  if (!bvid) return;
-
-  isLoading.value = true;
-  errorMessage.value = '';
-  audioList.value = [];
-
-  try {
-    console.log('加载B站视频详情:', bvid);
-    const res = await getBilibiliVideoDetail(bvid);
-    console.log('B站视频详情数据:', res.data);
-
-    // 确保响应式数据更新
-    videoDetail.value = JSON.parse(JSON.stringify(res.data));
-
-    // 默认加载第一个分P
-    if (videoDetail.value?.pages && videoDetail.value.pages.length > 0) {
-      console.log('视频有多个分P，共', videoDetail.value.pages.length, '个');
-      const [firstPage] = videoDetail.value.pages;
-      currentPage.value = firstPage;
-      await loadVideoSource();
-    } else {
-      console.log('视频无分P或分P数据为空');
-      errorMessage.value = t('bilibili.player.errors.loadPartInfoFailed');
-    }
-  } catch (error) {
-    console.error('获取视频详情失败', error);
-    errorMessage.value = t('bilibili.player.errors.loadVideoDetailFailed');
-  } finally {
-    isLoading.value = false;
-    // 标记初始加载完成
-    initialLoadDone.value = true;
-  }
-};
-
-const loadVideoSource = async () => {
-  if (!bvid.value || !currentPage.value?.cid) {
-    console.error('缺少必要参数:', { bvid: bvid.value, cid: currentPage.value?.cid });
-    return;
-  }
-
-  isLoading.value = true;
-  errorMessage.value = '';
-
-  try {
-    console.log('加载音频源:', bvid.value, currentPage.value.cid);
-
-    // 将当前视频转换为音频格式加入播放列表
-    const tempAudio = createSongFromBilibiliVideo(); // 创建一个临时对象，还没有URL
-
-    // 加载当前分P的音频URL
-    const currentAudio = await loadSongUrl(currentPage.value, tempAudio);
-
-    // 将所有分P添加到播放列表
-    if (videoDetail.value?.pages) {
-      audioList.value = videoDetail.value.pages.map((page, index) => {
-        // 第一个分P直接使用已获取的音频URL
-        if (index === 0 && currentPage.value?.cid === page.cid) {
-          return currentAudio;
-        }
-
-        // 其他分P创建占位对象，稍后按需加载 - 使用公用方法
-        return createBilibiliSong(videoDetail.value!, page, bvid.value);
-      });
-      console.log('已生成音频列表，共', audioList.value.length, '首');
-
-      // 预加载下一集
-      if (audioList.value.length > 1) {
-        const nextIndex = 1; // 默认加载第二个分P
-        const nextPage = videoDetail.value.pages[nextIndex];
-        const nextAudio = audioList.value[nextIndex];
-        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
-      }
-    }
-  } catch (error) {
-    console.error('获取音频播放地址失败', error);
-    errorMessage.value = t('bilibili.player.errors.loadAudioUrlFailed');
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const createSongFromBilibiliVideo = (): SongResult => {
-  if (!videoDetail.value || !currentPage.value) {
-    throw new Error('视频详情未加载');
-  }
-
-  // 使用公用方法创建SongResult
-  return createBilibiliSong(videoDetail.value, currentPage.value, bvid.value);
-};
-
-const loadSongUrl = async (
-  page: IBilibiliPage,
-  songItem: SongResult,
-  forceRefresh: boolean = false
-) => {
-  if (songItem.playMusicUrl && !forceRefresh) return songItem; // 如果已有URL且不强制刷新则直接返回
-
-  try {
-    console.log(`加载分P音频URL: ${page.part}, cid: ${page.cid}`);
-    const res = await getBilibiliPlayUrl(bvid.value, page.cid);
-    const playUrlData = res.data;
-    let url = '';
-
-    // 尝试获取音频URL
-    if (playUrlData.dash && playUrlData.dash.audio && playUrlData.dash.audio.length > 0) {
-      url = playUrlData.dash.audio[0].baseUrl;
-      console.log('获取到dash音频URL:', url);
-    } else if (playUrlData.durl && playUrlData.durl.length > 0) {
-      url = playUrlData.durl[0].url;
-      console.log('获取到durl音频URL:', url);
-    } else {
-      throw new Error('未找到可用的音频地址');
-    }
-
-    // 设置代理URL
-    songItem.playMusicUrl = getBilibiliProxyUrl(url);
-    return songItem;
-  } catch (error) {
-    console.error(`加载分P音频URL失败: ${page.part}`, error);
-    return songItem;
-  }
-};
-
-const switchPage = async (page: IBilibiliPage) => {
-  if (partLoading.value || currentPage.value?.cid === page.cid) return;
-
-  console.log('切换到分P:', page.part);
-  // 立即更新UI选中状态
-  currentPage.value = page;
-
-  // 查找对应的音频项
-  const audioItem = audioList.value.find((item) => item.bilibiliData?.cid === page.cid);
-
-  if (audioItem) {
-    // 设置局部加载状态
-    try {
-      partLoading.value = true;
-      // 每次切换分P都强制重新加载音频URL，以解决之前的URL可能失效的问题
-      await loadSongUrl(page, audioItem, true);
-      // 切换后自动播放
-      playCurrentAudio();
-    } catch (error) {
-      console.error('切换分P时加载音频URL失败:', error);
-      message.error(t('bilibili.player.errors.switchPartFailed'));
-    } finally {
-      partLoading.value = false;
-    }
-  } else {
-    console.error('未找到对应的音频项');
-    message.error(t('bilibili.player.errors.switchPartFailed'));
-  }
-};
-
-const playCurrentAudio = async () => {
-  if (audioList.value.length === 0) {
-    console.error('音频列表为空');
-    errorMessage.value = t('bilibili.player.errors.audioListEmpty');
-    return;
-  }
-
-  // 获取当前分P的音频
-  const currentIndex = audioList.value.findIndex(
-    (item) => item.bilibiliData?.cid === currentPage.value?.cid
-  );
-
-  if (currentIndex === -1) {
-    console.error('未找到当前分P的音频');
-    errorMessage.value = t('bilibili.player.errors.currentPartNotFound');
-    return;
-  }
-
-  const currentAudio = audioList.value[currentIndex];
-  console.log('准备播放当前选中的分P:', currentAudio.name);
-
-  try {
-    // 每次播放前都强制重新加载当前分P的音频URL（解决可能的URL失效问题）
-    partLoading.value = true;
-    await loadSongUrl(currentPage.value!, currentAudio, true);
-
-    if (!currentAudio.playMusicUrl) {
-      throw new Error('获取音频URL失败');
-    }
-
-    // 预加载下一个分P的音频URL（如果有）
-    const nextIndex = (currentIndex + 1) % audioList.value.length;
-    if (nextIndex !== currentIndex) {
-      const nextAudio = audioList.value[nextIndex];
-      const nextPage = videoDetail.value!.pages.find((p) => p.cid === nextAudio.bilibiliData?.cid);
-
-      if (nextPage) {
-        console.log('预加载下一个分P:', nextPage.part);
-        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
-      }
-    }
-
-    // 将B站音频列表设置为播放列表
-    playerStore.setPlayList(audioList.value);
-
-    // 播放当前选中的分P
-    console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
-    playerStore.setPlay(currentAudio);
-
-    // 播放后通知用户已开始播放
-    message.success(t('bilibili.player.playStarted'));
-  } catch (error) {
-    console.error('播放音频失败:', error);
-    errorMessage.value = error instanceof Error ? error.message : '播放失败，请重试';
-  } finally {
-    partLoading.value = false;
-  }
-};
-
-/**
- * 格式化总时长
- */
-const formatTotalDuration = (seconds?: number) => {
-  if (!seconds) return '00:00:00';
-
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-  const remainingSeconds = seconds % 60;
-
-  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
-};
-
-/**
- * 格式化数字显示
- */
-const formatNumber = (num?: number) => {
-  if (!num) return '0';
-  if (num >= 10000) {
-    return `${(num / 10000).toFixed(1)}万`;
-  }
-  return num.toString();
-};
-
-// 判断是否是当前正在播放的分P
-const isCurrentPlayingPage = (page: IBilibiliPage) => {
-  // 只根据播放器状态判断，不再使用UI选中状态
-  const currentPlayingMusic = playerStore.playMusic as any;
-  if (
-    currentPlayingMusic &&
-    typeof currentPlayingMusic === 'object' &&
-    currentPlayingMusic.bilibiliData
-  ) {
-    // 比较当前播放的音频的cid与此分P的cid
-    return (
-      currentPlayingMusic.bilibiliData.cid === page.cid &&
-      currentPlayingMusic.bilibiliData.bvid === bvid.value
-    );
-  }
-
-  // 如果没有正在播放的音乐，则使用UI选择状态
-  return currentPage.value?.cid === page.cid;
-};
-
-// 监听播放器状态变化，保持分P列表选中状态同步
-watch(
-  () => playerStore.playMusic,
-  (newMusic: any) => {
-    if (
-      newMusic &&
-      typeof newMusic === 'object' &&
-      newMusic.bilibiliData &&
-      newMusic.bilibiliData.bvid === bvid.value
-    ) {
-      // 查找对应的分P
-      const playingPage = videoDetail.value?.pages?.find(
-        (p) => p.cid === newMusic.bilibiliData.cid
-      );
-
-      // 无条件更新UI状态以确保UI状态与播放状态一致
-      if (playingPage) {
-        currentPage.value = playingPage;
-      }
-    }
-  }
-);
-</script>
-
-<style scoped lang="scss">
-.bilibili-player-page {
-  @apply h-full flex flex-col;
-
-  .content-scrollbar {
-    @apply flex-1 overflow-hidden;
-  }
-
-  .content-wrapper {
-    @apply flex flex-col p-4;
-  }
-}
-
-.bilibili-info-wrapper {
-  @apply flex flex-col md:flex-row gap-4 w-full;
-
-  .bilibili-cover {
-    @apply relative w-full md:w-1/3 aspect-video rounded-lg overflow-hidden;
-
-    .cover-image {
-      @apply w-full h-full object-cover;
-    }
-
-    .play-overlay {
-      @apply absolute inset-0;
-
-      .play-icon-bg {
-        @apply absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 hover:opacity-100 transition-opacity cursor-pointer;
-
-        i {
-          @apply text-4xl;
-        }
-      }
-
-      .corner-play-button {
-        @apply absolute right-3 bottom-3 shadow-lg flex items-center gap-1 px-4 py-1 text-sm transition-all duration-200;
-
-        &:hover {
-          @apply transform scale-110;
-        }
-
-        i {
-          @apply text-xl;
-        }
-      }
-    }
-  }
-}
-
-.loading-wrapper,
-.error-wrapper {
-  @apply w-full flex flex-col items-center justify-center py-16 rounded-lg bg-gray-100 dark:bg-gray-800;
-  aspect-ratio: 16/9;
-
-  p {
-    @apply mt-4 text-gray-600 dark:text-gray-400;
-  }
-}
-
-.error-wrapper {
-  button {
-    @apply mt-4;
-  }
-}
-
-.video-info {
-  @apply flex-1 p-4 rounded-lg bg-gray-100 dark:bg-gray-800;
-
-  .title {
-    @apply text-lg font-medium mb-4 text-gray-900 dark:text-white;
-  }
-
-  .author {
-    @apply flex items-center text-sm mb-2;
-  }
-
-  .stats {
-    @apply flex gap-4 text-xs text-gray-500 dark:text-gray-400 mb-3;
-  }
-
-  .description {
-    @apply text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap mb-3;
-    max-height: 100px;
-    overflow-y: auto;
-  }
-
-  .duration {
-    @apply text-sm text-gray-600 dark:text-gray-400;
-  }
-}
-
-.video-parts {
-  @apply mt-4;
-
-  .parts-title {
-    @apply text-sm font-medium mb-2 flex items-center;
-  }
-
-  .parts-list {
-    @apply flex flex-wrap gap-2 pb-4;
-
-    .part-item {
-      @apply text-xs mb-2;
-    }
-  }
-}
-</style>
diff --git a/src/renderer/views/download/DownloadPage.vue b/src/renderer/views/download/DownloadPage.vue
index 2bae030..3b9f1b3 100644
--- a/src/renderer/views/download/DownloadPage.vue
+++ b/src/renderer/views/download/DownloadPage.vue
@@ -1,425 +1,439 @@
 <template>
-  <div class="download-page">
-    <div class="page-header">
-      <h1 class="page-title">{{ t('download.title') }}</h1>
-      <div class="flex items-center gap-3">
-        <n-button size="small" @click="showSettingsDrawer = true">
-          <template #icon><i class="iconfont ri-settings-3-line"></i></template>
-          {{ t('download.settings') }}
-        </n-button>
-        <div class="segment-control">
-          <div
-            class="segment-item"
-            :class="{ active: tabName === 'downloading' }"
-            @click="tabName = 'downloading'"
-          >
-            {{ t('download.tabs.downloading') }}
+  <div class="download-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <n-scrollbar class="h-full">
+      <div class="download-content pb-32">
+        <!-- Hero Section -->
+        <section class="hero-section relative overflow-hidden rounded-tl-2xl">
+          <!-- Background with Blur -->
+          <div class="hero-bg absolute inset-0 -top-20">
+            <div
+              class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-primary/10 blur-3xl opacity-50 dark:opacity-30"
+            ></div>
+            <div
+              class="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white dark:via-black/80 dark:to-black"
+            ></div>
           </div>
-          <div
-            class="segment-item"
-            :class="{ active: tabName === 'downloaded' }"
-            @click="tabName = 'downloaded'"
-          >
-            {{ t('download.tabs.downloaded') }}
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <div class="page-content">
-      <!-- 下载列表 -->
-      <div v-show="tabName === 'downloading'" class="tab-content">
-        <div class="download-list">
-          <div v-if="downloadList.length === 0" class="empty-state">
-            <div class="empty-icon">
-              <i class="iconfont ri-download-cloud-2-line"></i>
-            </div>
-            <h3 class="empty-title">{{ t('download.empty.noTasks') }}</h3>
-          </div>
-          <template v-else>
-            <div class="total-progress">
-              <div class="progress-header">
-                <div class="progress-title">
-                  {{ t('download.progress.total', { progress: totalProgress.toFixed(1) }) }}
-                </div>
-                <div class="progress-info">{{ downloadList.length }} {{ t('download.items') }}</div>
-              </div>
-              <div class="progress-bar-wrapper">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: `${totalProgress}%` }"></div>
+          <!-- Hero Content -->
+          <div class="hero-content relative z-10 px-4 md:px-8 pt-10 pb-8">
+            <div class="flex flex-col md:flex-row gap-8 items-center md:items-end">
+              <div class="cover-wrapper relative group">
+                <div
+                  class="cover-container relative w-32 h-32 md:w-40 md:h-40 rounded-2xl bg-primary/10 flex items-center justify-center shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
+                >
+                  <i class="ri-download-cloud-2-line text-6xl text-primary opacity-80" />
                 </div>
               </div>
-            </div>
 
-            <div class="download-items">
-              <div v-for="item in downloadList" :key="item.path" class="download-item">
-                <div class="item-left flex items-center gap-3">
-                  <div class="item-cover">
-                    <img :src="getImgUrl(item.songInfo?.picUrl, '200y200')" alt="Cover" />
-                  </div>
-                  <div class="item-info flex items-center gap-4 w-full">
-                    <div
-                      class="item-name min-w-[160px] max-w-[160px] truncate"
-                      :title="item.filename"
-                    >
-                      {{ item.filename }}
-                    </div>
-                    <div class="item-artist min-w-[120px] max-w-[120px] truncate">
-                      {{
-                        item.songInfo?.ar?.map((a) => a.name).join(', ') ||
-                        t('download.artist.unknown')
-                      }}
-                    </div>
-                    <div class="item-progress flex-1 min-w-0">
-                      <div class="progress-bar">
-                        <div
-                          class="progress-fill"
-                          :class="[`status-${item.status}`]"
-                          :style="{ width: `${item.progress}%` }"
-                        ></div>
-                      </div>
-                    </div>
-                    <div class="item-details min-w-[120px] max-w-[120px] flex flex-col items-end">
-                      <span class="item-size">
-                        {{ formatSize(item.loaded) }} / {{ formatSize(item.total) }}
-                      </span>
-                      <span class="item-status-badge" :class="[`status-${item.status}`]">
-                        {{ getStatusText(item) }}
-                      </span>
-                    </div>
-                  </div>
+              <div class="info-content text-center md:text-left">
+                <div class="badge mb-3">
+                  <span
+                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 dark:bg-primary/20 text-primary text-xs font-semibold uppercase tracking-wider"
+                  >
+                    {{ t('download.title') }}
+                  </span>
                 </div>
+                <h1
+                  class="text-3xl md:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white tracking-tight"
+                >
+                  {{
+                    tabName === 'downloading'
+                      ? t('download.tabs.downloading')
+                      : t('download.tabs.downloaded')
+                  }}
+                </h1>
+                <p class="mt-4 text-sm md:text-base text-neutral-500 dark:text-neutral-400">
+                  {{
+                    tabName === 'downloading'
+                      ? t('download.progress.total', { progress: totalProgress.toFixed(1) })
+                      : t('download.count', { count: downloadedList.length })
+                  }}
+                </p>
               </div>
             </div>
-          </template>
-        </div>
-      </div>
+          </div>
+        </section>
 
-      <!-- 已下载列表 -->
-      <div v-show="tabName === 'downloaded'" class="tab-content">
-        <div class="downloaded-list">
-          <div v-if="isLoadingDownloaded" class="loading-state">
-            <div class="spinner"></div>
-            <span class="loading-text">{{ t('download.loading') }}</span>
-          </div>
-          <div v-else-if="downloadedList.length === 0" class="empty-state">
-            <div class="empty-icon">
-              <i class="iconfont ri-inbox-archive-line"></i>
-            </div>
-            <h3 class="empty-title">{{ t('download.empty.noDownloaded') }}</h3>
-            <p class="empty-text">{{ t('download.empty.noDownloadedHint') }}</p>
-          </div>
-          <template v-else>
-            <div class="downloaded-header">
-              <div class="header-info">
-                <i class="iconfont ri-archive-line"></i>
-                <span>{{ t('download.count', { count: downloadedList.length }) }}</span>
-              </div>
-              <button class="clear-button" @click="showClearConfirm = true">
-                <i class="iconfont ri-delete-bin-line"></i>
-                <span>{{ t('download.clearAll') }}</span>
+        <!-- Action Bar (Sticky) -->
+        <section
+          class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+        >
+          <div class="flex items-center justify-between gap-4">
+            <!-- Tabs (Segment Control) -->
+            <div class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-900 p-1 rounded-xl">
+              <button
+                v-for="tab in ['downloading', 'downloaded']"
+                :key="tab"
+                class="px-6 py-1.5 rounded-lg text-sm font-medium transition-all"
+                :class="
+                  tabName === tab
+                    ? 'bg-white dark:bg-neutral-800 text-primary shadow-sm'
+                    : 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                "
+                @click="tabName = tab"
+              >
+                {{ t(`download.tabs.${tab}`) }}
               </button>
             </div>
 
-            <div class="downloaded-items">
-              <div v-for="item in downList" :key="item.path" class="downloaded-item">
-                <div class="item-cover">
-                  <img :src="getImgUrl(item.picUrl, '200y200')" alt="Cover" />
-                </div>
-                <div class="item-info flex items-center gap-4 w-full">
-                  <div
-                    class="item-name min-w-[160px] max-w-[160px] truncate"
-                    :title="item.displayName || item.filename"
-                  >
-                    {{ item.displayName || item.filename }}
-                  </div>
-                  <div
-                    class="item-artist min-w-[120px] max-w-[120px] flex items-center gap-1 truncate"
-                  >
-                    <i class="iconfont ri-user-line"></i>
-                    <span>{{ item.ar?.map((a) => a.name).join(', ') }}</span>
-                  </div>
-                  <div class="item-size min-w-[80px] max-w-[80px] flex items-center gap-1">
-                    <i class="iconfont ri-file-line"></i>
-                    <span>{{ formatSize(item.size) }}</span>
-                  </div>
-                  <div
-                    class="item-path min-w-[220px] max-w-[220px] flex items-center gap-1"
-                    :title="item.path"
-                  >
-                    <i class="iconfont ri-folder-path-line"></i>
-                    <span>{{ shortenPath(item.path) }}</span>
-                    <button class="copy-button" @click="copyPath(item.path)">
-                      <i class="iconfont ri-file-copy-line"></i>
-                    </button>
-                  </div>
-                  <div class="item-actions flex gap-1 ml-2">
-                    <button class="action-btn play" @click="handlePlayMusic(item)">
-                      <i class="iconfont ri-play-circle-line"></i>
-                    </button>
-                    <button class="action-btn open" @click="openDirectory(item.path)">
-                      <i class="iconfont ri-folder-open-line"></i>
-                    </button>
-                    <button class="action-btn delete" @click="handleDelete(item)">
-                      <i class="iconfont ri-delete-bin-line"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
+            <!-- Right Actions -->
+            <div class="flex items-center gap-3">
+              <button
+                v-if="tabName === 'downloaded' && downloadedList.length > 0"
+                class="action-btn-pill flex items-center gap-2 px-4 py-2 rounded-full font-semibold text-sm transition-all hover:bg-red-50 dark:hover:bg-red-900/10 text-red-500 border border-neutral-200 dark:border-neutral-800"
+                @click="showClearConfirm = true"
+              >
+                <i class="ri-delete-bin-line text-lg" />
+                <span class="hidden md:inline">{{ t('download.clearAll') }}</span>
+              </button>
 
-  <!-- 删除确认对话框 -->
-  <div class="modal-overlay" v-if="showDeleteConfirm" @click="showDeleteConfirm = false">
-    <div class="modal-content" @click.stop>
-      <div class="modal-header">
-        <i class="iconfont ri-error-warning-line"></i>
-        <span>{{ t('download.delete.title') }}</span>
-      </div>
-      <div class="modal-body">
-        {{
-          t('download.delete.message', {
-            filename: itemToDelete?.displayName || itemToDelete?.filename
-          })
-        }}
-      </div>
-      <div class="modal-footer">
-        <button class="modal-btn cancel" @click="showDeleteConfirm = false">
-          {{ t('download.delete.cancel') }}
-        </button>
-        <button class="modal-btn confirm" @click="confirmDelete">
-          {{ t('download.delete.confirm') }}
-        </button>
-      </div>
-    </div>
-  </div>
+              <button
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="openDownloadPath"
+              >
+                <i class="ri-folder-open-line text-lg" />
+              </button>
 
-  <!-- 清空确认对话框 -->
-  <div class="modal-overlay" v-if="showClearConfirm" @click="showClearConfirm = false">
-    <div class="modal-content" @click.stop>
-      <div class="modal-header">
-        <i class="iconfont ri-delete-bin-line"></i>
-        <span>{{ t('download.clear.title') }}</span>
-      </div>
-      <div class="modal-body">
-        {{ t('download.clear.message') }}
-      </div>
-      <div class="modal-footer">
-        <button class="modal-btn cancel" @click="showClearConfirm = false">
-          {{ t('download.clear.cancel') }}
-        </button>
-        <button class="modal-btn confirm" @click="clearDownloadRecords">
-          {{ t('download.clear.confirm') }}
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- 下载设置抽屉 -->
-  <n-drawer v-model:show="showSettingsDrawer" :width="380" placement="right" :z-index="999999999">
-    <n-drawer-content :native-scrollbar="false">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <div class="text-lg font-bold">{{ t('download.settingsPanel.title') }}</div>
-          <n-button type="primary" @click="saveDownloadSettings">
-            {{ t('common.save') }}
-          </n-button>
-        </div>
-      </template>
-      <div class="download-settings">
-        <!-- 下载路径设置 -->
-        <div class="setting-item">
-          <div class="setting-title">{{ t('download.settingsPanel.path') }}</div>
-          <div class="setting-desc">{{ t('download.settingsPanel.pathDesc') }}</div>
-          <div class="flex flex-col gap-2 mt-2">
-            <n-input
-              v-model:value="downloadSettings.path"
-              :placeholder="t('download.settingsPanel.pathPlaceholder')"
-              readonly
-              class="flex-1"
-            />
-            <div class="flex items-center gap-2">
-              <n-button class="flex-1" @click="selectDownloadPath">{{
-                t('download.settingsPanel.select')
-              }}</n-button>
-              <n-button class="flex-1" @click="openDownloadPath">
-                {{ t('download.settingsPanel.open') }}
-                <i class="iconfont ri-folder-open-line"></i>
-              </n-button>
+              <button
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="showSettingsDrawer = true"
+              >
+                <i class="ri-settings-3-line text-lg" />
+              </button>
             </div>
           </div>
-        </div>
+        </section>
 
-        <!-- 文件名格式设置 -->
-        <div class="setting-item">
-          <div class="setting-title">{{ t('download.settingsPanel.fileFormat') }}</div>
-          <div class="setting-desc">{{ t('download.settingsPanel.fileFormatDesc') }}</div>
-
-          <!-- 预设模板 -->
-          <div class="flex gap-2 my-2">
-            <n-button
-              size="small"
-              :type="
-                downloadSettings.nameFormat === '{songName} - {artistName}' ? 'primary' : 'default'
-              "
-              @click="downloadSettings.nameFormat = '{songName} - {artistName}'"
-            >
-              {{ t('download.settingsPanel.presets.songArtist') }}
-            </n-button>
-            <n-button
-              size="small"
-              :type="
-                downloadSettings.nameFormat === '{artistName} - {songName}' ? 'primary' : 'default'
-              "
-              @click="downloadSettings.nameFormat = '{artistName} - {songName}'"
-            >
-              {{ t('download.settingsPanel.presets.artistSong') }}
-            </n-button>
-            <n-button
-              size="small"
-              :type="downloadSettings.nameFormat === '{songName}' ? 'primary' : 'default'"
-              @click="downloadSettings.nameFormat = '{songName}'"
-            >
-              {{ t('download.settingsPanel.presets.songOnly') }}
-            </n-button>
-          </div>
-
-          <!-- 分隔符设置 -->
-          <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">
-              {{ t('download.settingsPanel.separator') || '分隔符' }}
-            </div>
-            <div class="flex items-center gap-2">
-              <n-button
-                size="small"
-                :type="downloadSettings.separator === ' - ' ? 'primary' : 'default'"
-                @click="downloadSettings.separator = ' - '"
-              >
-                {{ t('download.settingsPanel.separators.dash') || '空格-空格' }}
-              </n-button>
-              <n-button
-                size="small"
-                :type="downloadSettings.separator === '_' ? 'primary' : 'default'"
-                @click="downloadSettings.separator = '_'"
-              >
-                {{ t('download.settingsPanel.separators.underscore') || '下划线' }}
-              </n-button>
-              <n-button
-                size="small"
-                :type="downloadSettings.separator === ' ' ? 'primary' : 'default'"
-                @click="downloadSettings.separator = ' '"
-              >
-                {{ t('download.settingsPanel.separators.space') || '空格' }}
-              </n-button>
-              <n-input
-                v-model:value="downloadSettings.separator"
-                size="small"
-                style="width: 100px"
-                placeholder="自定义"
+        <!-- List Section -->
+        <section class="list-section px-4 md:px-8 mt-6">
+          <!-- Downloading List -->
+          <div v-if="tabName === 'downloading'" class="downloading-container">
+            <div v-if="downloadList.length === 0" class="empty-state py-20 text-center">
+              <i
+                class="ri-download-cloud-2-line text-5xl mb-4 text-neutral-200 dark:text-neutral-800"
               />
+              <p class="text-neutral-400">{{ t('download.empty.noTasks') }}</p>
+            </div>
+            <div v-else class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+              <div
+                v-for="item in downloadList"
+                :key="item.path"
+                class="downloading-item group p-4 rounded-2xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-100 dark:border-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all"
+              >
+                <div class="flex items-center gap-4">
+                  <n-image
+                    :src="getImgUrl(item.songInfo?.picUrl, '100y100')"
+                    class="w-12 h-12 rounded-xl flex-shrink-0"
+                    preview-disabled
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center justify-between mb-2">
+                      <div class="truncate pr-4">
+                        <span class="text-sm font-bold text-neutral-900 dark:text-white">{{
+                          item.filename
+                        }}</span>
+                        <span class="ml-2 text-xs text-neutral-400">{{
+                          item.songInfo?.ar?.map((a) => a.name).join(', ')
+                        }}</span>
+                      </div>
+                      <span
+                        class="text-xs font-medium"
+                        :class="item.status === 'error' ? 'text-red-500' : 'text-primary'"
+                      >
+                        {{ getStatusText(item) }}
+                      </span>
+                    </div>
+                    <div
+                      class="relative h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-full overflow-hidden"
+                    >
+                      <div
+                        class="absolute inset-y-0 left-0 bg-primary transition-all duration-300"
+                        :class="{ 'bg-red-500': item.status === 'error' }"
+                        :style="{ width: `${item.progress}%` }"
+                      ></div>
+                    </div>
+                    <div class="flex items-center justify-between mt-2">
+                      <span class="text-[10px] text-neutral-400"
+                        >{{ formatSize(item.loaded) }} / {{ formatSize(item.total) }}</span
+                      >
+                      <span class="text-[10px] text-neutral-400"
+                        >{{ item.progress.toFixed(1) }}%</span
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
-          <!-- 组件排序 -->
-          <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">
-              {{ t('download.settingsPanel.dragToArrange') }}
+          <!-- Downloaded List -->
+          <div v-else class="downloaded-container">
+            <n-spin :show="isLoadingDownloaded">
+              <div v-if="downloadedList.length === 0" class="empty-state py-20 text-center">
+                <i
+                  class="ri-inbox-archive-line text-5xl mb-4 text-neutral-200 dark:text-neutral-800"
+                />
+                <p class="text-neutral-400">{{ t('download.empty.noDownloaded') }}</p>
+                <p class="text-xs text-neutral-500 mt-2">
+                  {{ t('download.empty.noDownloadedHint') }}
+                </p>
+              </div>
+              <div v-else class="space-y-2">
+                <div
+                  v-for="(item, index) in downList"
+                  :key="item.path"
+                  class="downloaded-item group animate-item p-3 rounded-2xl flex items-center gap-4 hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-all"
+                  :style="{ animationDelay: `${index * 0.03}s` }"
+                >
+                  <div
+                    class="relative w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0"
+                  >
+                    <img
+                      :src="getImgUrl(item.picUrl, '100y100')"
+                      class="w-full h-full object-cover"
+                    />
+                    <div
+                      class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+                      @click="handlePlayMusic(item)"
+                    >
+                      <i class="ri-play-fill text-white text-xl" />
+                    </div>
+                  </div>
+
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm font-bold text-neutral-900 dark:text-white truncate">{{
+                        item.displayName || item.filename
+                      }}</span>
+                      <span class="text-xs text-neutral-400 flex-shrink-0">{{
+                        formatSize(item.size)
+                      }}</span>
+                    </div>
+                    <div class="flex items-center gap-4 mt-1">
+                      <span class="text-xs text-neutral-500 truncate max-w-[150px]">{{
+                        item.ar?.map((a) => a.name).join(', ')
+                      }}</span>
+                      <div
+                        class="hidden md:flex items-center gap-1 text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full truncate"
+                      >
+                        <i class="ri-folder-line" />
+                        <span class="truncate">{{ shortenPath(item.path) }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center gap-1">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                          @click="copyPath(item.path)"
+                        >
+                          <i class="ri-file-copy-line" />
+                        </button>
+                      </template>
+                      {{ t('download.path.copy') || '复制路径' }}
+                    </n-tooltip>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                          @click="openDirectory(item.path)"
+                        >
+                          <i class="ri-folder-open-line" />
+                        </button>
+                      </template>
+                      {{ t('download.settingsPanel.open') }}
+                    </n-tooltip>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-500/10 transition-all"
+                          @click="handleDelete(item)"
+                        >
+                          <i class="ri-delete-bin-line" />
+                        </button>
+                      </template>
+                      {{ t('common.delete') }}
+                    </n-tooltip>
+                  </div>
+                </div>
+              </div>
+            </n-spin>
+          </div>
+        </section>
+      </div>
+    </n-scrollbar>
+
+    <!-- 删除确认对话框 -->
+    <n-modal
+      v-model:show="showDeleteConfirm"
+      preset="dialog"
+      type="warning"
+      :title="t('download.delete.title')"
+      :content="
+        t('download.delete.message', {
+          filename: itemToDelete?.displayName || itemToDelete?.filename
+        })
+      "
+      :positive-text="t('download.delete.confirm')"
+      :negative-text="t('download.delete.cancel')"
+      @positive-click="confirmDelete"
+    />
+
+    <!-- 清空确认对话框 -->
+    <n-modal
+      v-model:show="showClearConfirm"
+      preset="dialog"
+      type="error"
+      :title="t('download.clear.title')"
+      :content="t('download.clear.message')"
+      :positive-text="t('download.clear.confirm')"
+      :negative-text="t('download.clear.cancel')"
+      @positive-click="clearDownloadRecords"
+    />
+
+    <!-- 下载设置抽屉 -->
+    <n-drawer v-model:show="showSettingsDrawer" :width="400" placement="right">
+      <n-drawer-content :title="t('download.settingsPanel.title')" closable>
+        <div class="download-settings-content space-y-8 py-4">
+          <!-- Path Section -->
+          <div class="setting-group">
+            <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2">
+              {{ t('download.settingsPanel.path') }}
+            </h3>
+            <p class="text-xs text-neutral-500 mb-4">{{ t('download.settingsPanel.pathDesc') }}</p>
+            <div class="space-y-3">
+              <n-input :value="downloadSettings.path" readonly placeholder="Select path..." />
+              <div class="flex gap-2">
+                <n-button class="flex-1" @click="selectDownloadPath">{{
+                  t('download.settingsPanel.select')
+                }}</n-button>
+                <n-button class="flex-1" @click="openDownloadPath">{{
+                  t('download.settingsPanel.open')
+                }}</n-button>
+              </div>
             </div>
-            <div class="format-components">
-              <div
-                v-for="(component, index) in formatComponents"
-                :key="component.id"
-                class="format-item"
-              >
-                <div class="flex items-center justify-between w-full">
-                  <span>{{ t(`download.settingsPanel.components.${component.type}`) }}</span>
-                  <div class="flex items-center">
+          </div>
+
+          <!-- Format Section -->
+          <div class="setting-group">
+            <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2">
+              {{ t('download.settingsPanel.fileFormat') }}
+            </h3>
+            <p class="text-xs text-neutral-500 mb-4">
+              {{ t('download.settingsPanel.fileFormatDesc') }}
+            </p>
+
+            <div class="space-y-4">
+              <div class="flex flex-wrap gap-2">
+                <n-button
+                  v-for="preset in [
+                    { label: 'songArtist', value: '{songName} - {artistName}' },
+                    { label: 'artistSong', value: '{artistName} - {songName}' },
+                    { label: 'songOnly', value: '{songName}' }
+                  ]"
+                  :key="preset.label"
+                  size="small"
+                  :type="downloadSettings.nameFormat === preset.value ? 'primary' : 'default'"
+                  @click="downloadSettings.nameFormat = preset.value"
+                >
+                  {{ t(`download.settingsPanel.presets.${preset.label}`) }}
+                </n-button>
+              </div>
+
+              <div>
+                <p class="text-[10px] text-neutral-400 mb-2 uppercase font-bold">
+                  {{ t('download.settingsPanel.separator') }}
+                </p>
+                <div class="flex items-center gap-2">
+                  <n-button
+                    v-for="sep in [' - ', '_', ' ']"
+                    :key="sep"
+                    size="small"
+                    :type="downloadSettings.separator === sep ? 'primary' : 'default'"
+                    @click="downloadSettings.separator = sep"
+                  >
+                    {{ sep === ' ' ? 'Space' : sep }}
+                  </n-button>
+                  <n-input v-model:value="downloadSettings.separator" size="small" class="w-20" />
+                </div>
+              </div>
+
+              <div>
+                <p class="text-[10px] text-neutral-400 mb-2 uppercase font-bold">
+                  {{ t('download.settingsPanel.dragToArrange') }}
+                </p>
+                <div class="space-y-2">
+                  <div
+                    v-for="(comp, idx) in formatComponents"
+                    :key="comp.id"
+                    class="flex items-center justify-between p-2 bg-neutral-50 dark:bg-neutral-900 rounded-lg"
+                  >
+                    <span class="text-xs">{{
+                      t(`download.settingsPanel.components.${comp.type}`)
+                    }}</span>
+                    <div class="flex items-center gap-1">
+                      <n-button
+                        quaternary
+                        circle
+                        size="tiny"
+                        :disabled="idx === 0"
+                        @click="handleMoveUp(idx)"
+                        ><i class="ri-arrow-up-s-line"
+                      /></n-button>
+                      <n-button
+                        quaternary
+                        circle
+                        size="tiny"
+                        :disabled="idx === formatComponents.length - 1"
+                        @click="handleMoveDown(idx)"
+                        ><i class="ri-arrow-down-s-line"
+                      /></n-button>
+                      <n-button
+                        quaternary
+                        circle
+                        size="tiny"
+                        :disabled="formatComponents.length <= 1"
+                        @click="removeFormatComponent(idx)"
+                        ><i class="ri-close-line"
+                      /></n-button>
+                    </div>
+                  </div>
+                  <div class="flex flex-wrap gap-2 mt-2">
                     <n-button
-                      quaternary
-                      circle
-                      size="small"
-                      @click="handleMoveUp(index)"
-                      :disabled="index === 0"
+                      v-for="type in ['songName', 'artistName', 'albumName']"
+                      :key="type"
+                      size="tiny"
+                      :disabled="formatComponents.some((c) => c.type === type)"
+                      @click="addFormatComponent(type)"
                     >
-                      <template #icon><i class="iconfont ri-arrow-up-s-line"></i></template>
-                    </n-button>
-                    <n-button
-                      quaternary
-                      circle
-                      size="small"
-                      @click="handleMoveDown(index)"
-                      :disabled="index === formatComponents.length - 1"
-                    >
-                      <template #icon><i class="iconfont ri-arrow-down-s-line"></i></template>
-                    </n-button>
-                    <n-button
-                      quaternary
-                      circle
-                      size="small"
-                      @click="removeFormatComponent(index)"
-                      :disabled="formatComponents.length <= 1"
-                    >
-                      <template #icon><i class="iconfont ri-close-line"></i></template>
+                      + {{ t(`download.settingsPanel.components.${type}`) }}
                     </n-button>
                   </div>
                 </div>
               </div>
-              <div class="mt-2 flex gap-2">
-                <n-button
-                  size="small"
-                  @click="addFormatComponent('songName')"
-                  :disabled="formatComponents.some((c) => c.type === 'songName')"
-                >
-                  +{{ t('download.settingsPanel.components.songName') }}
-                </n-button>
-                <n-button
-                  size="small"
-                  @click="addFormatComponent('artistName')"
-                  :disabled="formatComponents.some((c) => c.type === 'artistName')"
-                >
-                  +{{ t('download.settingsPanel.components.artistName') }}
-                </n-button>
-                <n-button
-                  size="small"
-                  @click="addFormatComponent('albumName')"
-                  :disabled="formatComponents.some((c) => c.type === 'albumName')"
-                >
-                  +{{ t('download.settingsPanel.components.albumName') }}
-                </n-button>
+
+              <div
+                class="p-3 bg-neutral-50 dark:bg-neutral-900 rounded-xl border border-dashed border-neutral-200 dark:border-neutral-800"
+              >
+                <p class="text-[10px] text-neutral-400 mb-1 uppercase font-bold">
+                  {{ t('download.settingsPanel.preview') }}
+                </p>
+                <p class="text-sm font-medium text-primary truncate">{{ formatNamePreview }}</p>
               </div>
             </div>
           </div>
-
-          <!-- 自定义格式 -->
-          <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">
-              {{ t('download.settingsPanel.customFormat') }}
-            </div>
-            <n-input
-              v-model:value="downloadSettings.nameFormat"
-              placeholder="{artistName} - {songName} - {albumName}"
-            />
-          </div>
-
-          <div class="mt-2 text-xs text-amber-500">
-            <i class="iconfont ri-information-line"></i>
-            {{ t('download.settingsPanel.formatVariables') }}:<br />
-            {songName}, {artistName}, {albumName}
-          </div>
-
-          <!-- 预览 -->
-          <div class="format-preview mt-3 bg-gray-100 dark:bg-dark-300 p-2 rounded">
-            <div class="text-xs text-gray-500 mb-1">{{ t('download.settingsPanel.preview') }}</div>
-            <div class="preview-content">{{ formatNamePreview }}</div>
-          </div>
         </div>
-      </div>
-    </n-drawer-content>
-  </n-drawer>
+
+        <template #footer>
+          <n-button type="primary" block @click="saveDownloadSettings">{{
+            t('common.save')
+          }}</n-button>
+        </template>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -1058,404 +1072,22 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-/* macOS style with Neumorphism */
 .download-page {
-  @apply h-full w-full flex flex-col overflow-hidden;
-  @apply bg-gray-50 dark:bg-dark-200;
-  @apply text-gray-900 dark:text-gray-100;
+  position: relative;
 }
 
-.page-header {
-  @apply px-4 py-3;
-  @apply bg-white/90 dark:bg-dark-100/90;
-  @apply border-b border-gray-200/50 dark:border-gray-700/50;
-  @apply backdrop-blur-xl backdrop-saturate-150;
-  @apply sticky top-0 z-10;
-  @apply flex items-center justify-between;
+.hero-section {
+  min-height: 240px;
 }
 
-.page-title {
-  @apply text-lg font-medium;
-  @apply text-gray-800 dark:text-gray-200;
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
 }
 
-.segment-control {
-  @apply flex rounded-lg overflow-hidden;
-  @apply bg-gray-100 dark:bg-dark-300;
-  @apply w-max;
-  @apply border border-gray-200/60 dark:border-gray-700/60;
-}
-
-.segment-item {
-  @apply px-3 py-1 cursor-pointer text-sm font-medium;
-  @apply text-gray-500 dark:text-gray-400;
-  @apply transition-all duration-200;
-  @apply hover:bg-light-300 dark:hover:bg-dark-300;
-
-  &.active {
-    @apply bg-white dark:bg-dark-200;
-    @apply text-gray-900 dark:text-gray-100;
-    @apply shadow-sm;
-  }
-}
-
-.page-content {
-  @apply flex-1 overflow-hidden;
-}
-
-.tab-content {
-  @apply h-full overflow-auto pb-16;
-}
-
-/* Empty & Loading States */
-.empty-state,
-.loading-state {
-  @apply flex flex-col items-center justify-center h-full;
-  @apply py-16;
-}
-
-.empty-icon {
-  @apply text-4xl mb-3 text-gray-300 dark:text-gray-600;
-}
-
-.empty-title {
-  @apply text-base font-medium mb-1;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.empty-text {
-  @apply text-xs text-gray-400 dark:text-gray-500;
-}
-
-.spinner {
-  @apply w-8 h-8 rounded-full border border-t-primary;
-  @apply animate-spin mb-3;
-}
-
-.loading-text {
-  @apply text-sm text-gray-500 dark:text-gray-400;
-}
-
-/* Progress Bar */
-.total-progress {
-  @apply px-4 py-3;
-  @apply bg-white/90 dark:bg-dark-100/90;
-  @apply backdrop-blur-lg backdrop-saturate-150;
-  @apply border-b border-gray-200/50 dark:border-gray-700/50;
-  @apply sticky top-0 z-10;
-}
-
-.progress-header {
-  @apply flex justify-between items-center mb-2;
-}
-
-.progress-title {
-  @apply text-xs font-medium;
-  @apply text-gray-700 dark:text-gray-300;
-}
-
-.progress-info {
-  @apply text-xs;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.progress-bar-wrapper {
-  @apply w-full;
-}
-
-.progress-bar {
-  @apply h-1.5 rounded-full w-full;
-  @apply bg-gray-200 dark:bg-dark-300;
-  @apply overflow-hidden;
-}
-
-.progress-fill {
-  @apply h-full rounded-full;
-  @apply bg-primary;
-  @apply transition-all duration-300;
-
-  &.status-downloading {
-    @apply bg-primary;
-  }
-
-  &.status-completed {
-    @apply bg-green-500;
-  }
-
-  &.status-error {
-    @apply bg-red-500;
-  }
-}
-
-/* Download Items */
-.download-items {
-  @apply p-4 space-y-3;
-}
-
-.download-item {
-  @apply rounded-lg p-3;
-  @apply bg-white dark:bg-dark-100;
-  @apply border border-gray-200/60 dark:border-gray-700/50;
-  @apply shadow-sm;
-  @apply transition-all duration-300;
-
-  &:hover {
-    @apply shadow-md;
-    @apply transform -translate-y-0.5;
-  }
-
-  .item-left {
-    @apply flex gap-3;
-  }
-
-  .item-cover {
-    @apply w-12 h-12 rounded-md overflow-hidden;
-    @apply flex-shrink-0;
-    @apply bg-gray-100 dark:bg-dark-300;
-    @apply shadow-sm;
-
-    img {
-      @apply w-full h-full object-cover;
-    }
-  }
-
-  .item-info {
-    @apply flex-1 min-w-0 flex items-center justify-between;
-  }
-
-  .item-name {
-    @apply text-sm font-medium truncate;
-  }
-
-  .item-artist {
-    @apply text-xs text-gray-500 dark:text-gray-400;
-  }
-
-  .item-progress {
-    @apply mb-2;
-  }
-
-  .item-details {
-    @apply flex justify-between items-center;
-  }
-
-  .item-size {
-    @apply text-xs text-gray-500 dark:text-gray-400;
-  }
-
-  .item-status-badge {
-    @apply text-xs px-2 py-0.5 rounded-full;
-    @apply bg-gray-100 dark:bg-dark-300;
-
-    &.status-downloading {
-      @apply bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400;
-    }
-
-    &.status-completed {
-      @apply bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400;
-    }
-
-    &.status-error {
-      @apply bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400;
-    }
-  }
-}
-
-/* Downloaded List */
-.downloaded-header {
-  @apply px-4 py-3;
-  @apply bg-white/90 dark:bg-dark-100/90;
-  @apply backdrop-blur-lg backdrop-saturate-150;
-  @apply border-b border-gray-200/50 dark:border-gray-700/50;
-  @apply sticky top-0 z-10;
-  @apply flex items-center justify-between;
-}
-
-.header-info {
-  @apply flex items-center gap-2;
-  @apply text-xs font-medium;
-  @apply text-gray-700 dark:text-gray-300;
-
-  i {
-    @apply text-gray-400 dark:text-gray-500;
-  }
-}
-
-.clear-button {
-  @apply flex items-center gap-1;
-  @apply px-2 py-1 rounded-md;
-  @apply text-xs font-medium;
-  @apply bg-gray-100 dark:bg-dark-300;
-  @apply text-gray-700 dark:text-gray-300;
-  @apply hover:bg-gray-200 dark:hover:bg-dark-300;
-  @apply transition-colors duration-200;
-}
-
-.downloaded-items {
-  @apply p-4 space-y-3;
-}
-
-.downloaded-item {
-  @apply p-3 rounded-lg;
-  @apply bg-white dark:bg-dark-100;
-  @apply border border-gray-200/60 dark:border-gray-700/50;
-  @apply shadow-sm;
-  @apply flex gap-3;
-  @apply transition-all duration-300;
-
-  &:hover {
-    @apply shadow-md;
-    @apply transform -translate-y-0.5;
-  }
-
-  .item-cover {
-    @apply w-14 h-14 rounded-md overflow-hidden;
-    @apply flex-shrink-0;
-    @apply bg-gray-100 dark:bg-dark-300;
-    @apply shadow-sm;
-
-    img {
-      @apply w-full h-full object-cover;
-    }
-  }
-
-  .item-info {
-    @apply flex-1 flex justify-between items-center;
-    @apply min-w-0;
-  }
-
-  .item-primary {
-    @apply flex-1 min-w-0 flex items-center justify-between;
-  }
-
-  .item-name {
-    @apply text-sm font-medium truncate;
-  }
-
-  .item-artist,
-  .item-size {
-    @apply flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400;
-
-    i {
-      @apply text-gray-400 dark:text-gray-500;
-    }
-  }
-
-  .item-path {
-    @apply flex items-center gap-1 text-xs;
-    @apply text-gray-500 dark:text-gray-400;
-    @apply bg-gray-50 dark:bg-dark-300;
-    @apply rounded-md py-1 px-2;
-    @apply truncate;
-
-    i {
-      @apply text-gray-400 dark:text-gray-500 flex-shrink-0;
-    }
-
-    span {
-      @apply truncate flex-1;
-    }
-
-    .copy-button {
-      @apply ml-1 opacity-0;
-      @apply text-gray-400 hover:text-primary;
-      @apply transition-all duration-200;
-    }
-
-    &:hover .copy-button {
-      @apply opacity-100;
-    }
-  }
-
-  .item-actions {
-    @apply flex gap-1;
-    @apply ml-2;
-  }
-
-  .action-btn {
-    @apply flex items-center gap-1;
-    @apply px-2 py-1 rounded-md;
-    @apply text-xs;
-    @apply transition-colors duration-200;
-
-    &.play {
-      @apply text-primary dark:text-white;
-      @apply hover:bg-gray-100 dark:hover:bg-dark-300 hover:text-green-500;
-    }
-
-    &.open {
-      @apply text-gray-600 dark:text-gray-300;
-      @apply hover:bg-gray-100 dark:hover:bg-dark-300;
-    }
-
-    &.delete {
-      @apply text-red-500;
-      @apply hover:bg-red-500/10;
-    }
-  }
-}
-
-/* Modal */
-.modal-overlay {
-  @apply fixed inset-0 z-50;
-  @apply bg-black/40 backdrop-blur-sm;
-  @apply flex items-center justify-center;
-}
-
-.modal-content {
-  @apply bg-white dark:bg-dark-100;
-  @apply rounded-lg overflow-hidden;
-  @apply shadow-xl;
-  @apply w-full max-w-sm;
-  @apply border border-gray-200/60 dark:border-gray-700/50;
-  @apply animate-fade-in;
-}
-
-.modal-header {
-  @apply flex items-center gap-2;
-  @apply px-4 py-3;
-  @apply border-b border-gray-100 dark:border-gray-800;
-  @apply text-gray-900 dark:text-gray-100;
-  @apply font-medium;
-
-  i {
-    @apply text-amber-500 dark:text-amber-400;
-  }
-}
-
-.modal-body {
-  @apply px-4 py-4;
-  @apply text-sm text-gray-700 dark:text-gray-300;
-}
-
-.modal-footer {
-  @apply px-4 py-3;
-  @apply flex justify-end gap-2;
-  @apply border-t border-gray-100 dark:border-gray-800;
-}
-
-.modal-btn {
-  @apply px-3 py-1.5 rounded-md;
-  @apply text-sm font-medium;
-  @apply transition-colors duration-200;
-
-  &.cancel {
-    @apply bg-gray-100 dark:bg-dark-300;
-    @apply text-gray-700 dark:text-gray-300;
-    @apply hover:bg-gray-200 dark:hover:bg-dark-300;
-  }
-
-  &.confirm {
-    @apply bg-amber-500 dark:bg-amber-600;
-    @apply text-white;
-    @apply hover:bg-amber-600 dark:hover:bg-amber-700;
-  }
-}
-
-@keyframes fade-in {
+@keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
@@ -1463,51 +1095,22 @@ onMounted(() => {
   }
 }
 
-.animate-fade-in {
-  animation: fade-in 0.2s ease-out;
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+.action-btn-pill {
+  @apply transition-all border-neutral-200 dark:border-neutral-800;
+  &:hover:not(:disabled) {
+    @apply border-primary/30 bg-primary/5;
   }
 }
 
-.download-settings {
-  @apply flex flex-col gap-6;
+.action-btn-icon {
+  @apply transition-all;
+  &:hover {
+    @apply scale-110 text-primary bg-primary/10;
+  }
 }
 
-.setting-item {
-  @apply bg-white dark:bg-dark-200 p-3 rounded-lg shadow-sm;
-  @apply border border-gray-200/60 dark:border-gray-700/50;
-}
-
-.setting-title {
-  @apply text-base font-medium;
-  @apply text-gray-800 dark:text-gray-200;
-}
-
-.setting-desc {
-  @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
-}
-
-.format-components {
-  @apply flex flex-col gap-2;
-}
-
-.format-item {
-  @apply flex items-center px-3 py-2 bg-gray-100 dark:bg-dark-300 rounded;
-  @apply border border-gray-200 dark:border-gray-700;
-}
-
-.format-preview {
-  @apply text-sm;
+.downloading-item,
+.downloaded-item {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 </style>
diff --git a/src/renderer/views/lyric/index.vue b/src/renderer/views/lyric/index.vue
index 458b832..2ef8127 100644
--- a/src/renderer/views/lyric/index.vue
+++ b/src/renderer/views/lyric/index.vue
@@ -263,6 +263,8 @@ watch(
   (newLock: boolean) => {
     if (newLock) {
       isHovering.value = false;
+      // 锁定时自动关闭主题色面板
+      showThemeColorPanel.value = false;
     }
   }
 );
diff --git a/src/renderer/views/music/MusicListPage.vue b/src/renderer/views/music/MusicListPage.vue
index 20c4156..76de87d 100644
--- a/src/renderer/views/music/MusicListPage.vue
+++ b/src/renderer/views/music/MusicListPage.vue
@@ -1,245 +1,264 @@
 <template>
-  <div class="music-page">
-    <div class="music-header h-12 flex items-center justify-between">
-      <n-ellipsis :line-clamp="1" class="flex-shrink-0 mr-3">
-        <div class="music-title">
-          {{ name }}
-        </div>
-      </n-ellipsis>
-
-      <!-- 搜索框和布局切换 -->
-      <div class="flex-grow flex-1 flex items-center justify-end gap-2">
-        <!-- 操作按钮组 -->
-        <n-tooltip placement="bottom" trigger="hover">
-          <template #trigger>
-            <div class="action-button hover-green" @click="handlePlayAll">
-              <i class="icon iconfont ri-play-fill"></i>
+  <div class="music-list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <n-scrollbar class="h-full" @scroll="handleScroll">
+      <div class="music-list-content pb-32">
+        <!-- Hero Section 和 Action Bar -->
+        <n-spin :show="loading">
+          <!-- Hero Section -->
+          <section class="hero-section relative overflow-hidden rounded-tl-2xl">
+            <!-- Background Image with Blur -->
+            <div class="hero-bg absolute inset-0 -top-20">
+              <div
+                class="absolute inset-0 bg-cover bg-center scale-110 blur-3xl opacity-40 dark:opacity-30"
+                :style="{
+                  backgroundImage: `url(${getImgUrl(getCoverImgUrl, '800y800')})`
+                }"
+              ></div>
+              <div
+                class="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white dark:via-black/80 dark:to-black"
+              ></div>
             </div>
-          </template>
-          {{ t('comp.musicList.playAll') }}
-        </n-tooltip>
 
-        <n-tooltip v-if="canCollect" placement="bottom" trigger="hover">
-          <template #trigger>
-            <div
-              class="action-button"
-              :class="isCollected ? 'collected' : 'hover-green'"
-              @click="toggleCollect"
-            >
-              <i class="icon iconfont" :class="isCollected ? 'ri-heart-fill' : 'ri-heart-line'"></i>
-            </div>
-          </template>
-          {{ isCollected ? t('comp.musicList.cancelCollect') : t('comp.musicList.collect') }}
-        </n-tooltip>
-
-        <n-tooltip placement="bottom" trigger="hover">
-          <template #trigger>
-            <div class="action-button hover-green" @click="addToPlaylist">
-              <i class="icon iconfont ri-add-line"></i>
-            </div>
-          </template>
-          {{ t('comp.musicList.addToPlaylist') }}
-        </n-tooltip>
-
-        <!-- 多选/下载操作 -->
-        <div v-if="filteredSongs.length > 0 && isElectron" class="flex items-center gap-2">
-          <n-tooltip v-if="!isSelecting" placement="bottom" trigger="hover">
-            <template #trigger>
-              <div class="action-button hover-green" @click="startSelect">
-                <i class="icon iconfont ri-checkbox-multiple-line"></i>
-              </div>
-            </template>
-            {{ t('favorite.batchDownload') }}
-          </n-tooltip>
-          <div v-else class="flex items-center gap-2">
-            <n-checkbox
-              :checked="isAllSelected"
-              :indeterminate="isIndeterminate"
-              @update:checked="handleSelectAll"
-            >
-              {{ t('common.selectAll') }}
-            </n-checkbox>
-            <n-tooltip placement="bottom" trigger="hover">
-              <template #trigger>
-                <div
-                  class="action-button hover-green"
-                  :class="{
-                    'opacity-50 pointer-events-none': selectedSongs.length === 0 || isDownloading
-                  }"
-                  @click="selectedSongs.length && !isDownloading && handleBatchDownload()"
-                >
-                  <i
-                    class="icon iconfont ri-download-line"
-                    :class="{ 'animate-spin': isDownloading }"
-                  ></i>
-                </div>
-              </template>
-              {{ t('favorite.download', { count: selectedSongs.length }) }}
-            </n-tooltip>
-            <n-tooltip placement="bottom" trigger="hover">
-              <template #trigger>
-                <div class="action-button" @click="cancelSelect">
-                  <i class="icon iconfont ri-close-line"></i>
-                </div>
-              </template>
-              {{ t('common.cancel') }}
-            </n-tooltip>
-          </div>
-        </div>
-
-        <!-- 布局切换按钮 -->
-        <div class="layout-toggle" v-if="!isMobile">
-          <n-tooltip placement="bottom" trigger="hover">
-            <template #trigger>
-              <div class="toggle-button hover-green" @click="toggleLayout">
-                <i
-                  class="icon iconfont"
-                  :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
-                ></i>
-              </div>
-            </template>
-            {{
-              isCompactLayout
-                ? t('comp.musicList.switchToNormal')
-                : t('comp.musicList.switchToCompact')
-            }}
-          </n-tooltip>
-        </div>
-
-        <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
-          <template v-if="isSearchVisible">
-            <n-input
-              v-model:value="searchKeyword"
-              :placeholder="t('comp.musicList.searchSongs')"
-              clearable
-              round
-              size="small"
-              @blur="handleSearchBlur"
-            >
-              <template #prefix>
-                <i class="icon iconfont ri-search-line text-sm"></i>
-              </template>
-              <template #suffix>
-                <i
-                  class="icon iconfont ri-close-line text-sm cursor-pointer"
-                  @click="closeSearch"
-                ></i>
-              </template>
-            </n-input>
-          </template>
-          <template v-else>
-            <n-tooltip placement="bottom" trigger="hover">
-              <template #trigger>
-                <div class="search-button" @click="showSearch">
-                  <i class="icon iconfont ri-search-line"></i>
-                </div>
-              </template>
-              {{ t('comp.musicList.searchSongs') }}
-            </n-tooltip>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div class="music-content">
-      <!-- 左侧歌单信息 -->
-      <div class="music-info">
-        <div class="music-cover">
-          <n-image
-            :src="getImgUrl(getCoverImgUrl, '500y500')"
-            class="cover-img"
-            preview-disabled
-            :class="setAnimationClass('animate__fadeIn')"
-            object-fit="cover"
-          />
-
-          <div v-if="isDailyRecommend && userStore.isVip" class="history-recommend-btn">
-            <n-button tertiary round type="primary" size="small" @click="goToHistoryRecommend">
-              <template #icon>
-                <i class="icon iconfont ri-history-line"></i>
-              </template>
-              {{ t('comp.musicList.historyRecommend') }}
-            </n-button>
-          </div>
-        </div>
-        <!-- 歌单显示创建者，专辑显示艺术家 -->
-        <div v-if="isAlbum && listInfo?.artist" class="creator-info">
-          <n-avatar round :size="24" :src="getImgUrl(listInfo.artist.picUrl, '50y50')" />
-          <span class="creator-name">{{ listInfo.artist.name }}</span>
-        </div>
-        <div v-else-if="!isAlbum && listInfo?.creator" class="creator-info">
-          <n-avatar round :size="24" :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')" />
-          <span class="creator-name">{{ listInfo.creator.nickname }}</span>
-        </div>
-        <div v-if="total" class="music-total">{{ t('player.songNum', { num: total }) }}</div>
-
-        <n-scrollbar style="max-height: 200px">
-          <div v-if="listInfo?.description" class="music-desc">
-            {{ listInfo.description }}
-          </div>
-        </n-scrollbar>
-      </div>
-
-      <!-- 右侧歌曲列表 -->
-      <div class="music-list-container">
-        <div class="music-list">
-          <n-spin :show="loadingList || loading">
-            <div class="music-list-content">
-              <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
-                {{ t('comp.musicList.noSearchResults') }}
-              </div>
-
-              <!-- 虚拟列表，设置正确的固定高度 -->
-              <n-virtual-list
-                ref="songListRef"
-                class="song-virtual-list"
-                style="max-height: calc(100vh - 130px)"
-                :items="filteredSongs"
-                :item-size="isCompactLayout ? 50 : 70"
-                item-resizable
-                key-field="id"
-                @scroll="handleVirtualScroll"
-              >
-                <template #default="{ item, index }">
-                  <div>
-                    <div class="double-item">
-                      <song-item
-                        :index="index"
-                        :compact="isCompactLayout"
-                        :item="formatSong(item)"
-                        :can-remove="canRemove"
-                        :selectable="isSelecting"
-                        :selected="selectedSongs.includes(item.id as number)"
-                        @play="handlePlay"
-                        @remove-song="handleRemoveSong"
-                        @select="(id, selected) => handleSelect(id, selected)"
-                      />
+            <!-- Hero Content -->
+            <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-10 pb-8">
+              <div class="flex flex-col md:flex-row gap-8 md:gap-12 items-center md:items-end">
+                <!-- Playlist Cover -->
+                <div class="cover-wrapper relative group">
+                  <div
+                    class="cover-glow absolute -inset-2 rounded-2xl bg-gradient-to-br from-primary/30 via-primary/10 to-transparent blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                  ></div>
+                  <div
+                    class="cover-container relative w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
+                  >
+                    <n-image
+                      :src="getImgUrl(getCoverImgUrl, '500y500')"
+                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      preview-disabled
+                    />
+                    <!-- Play overlay on cover -->
+                    <div
+                      class="absolute inset-0 flex items-center justify-center bg-transparent group-hover:bg-black/30 transition-all duration-300 cursor-pointer"
+                      @click="handlePlayAll"
+                    >
+                      <div
+                        class="play-icon w-16 h-16 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 hover:scale-110 active:scale-95"
+                      >
+                        <i class="ri-play-fill text-3xl text-neutral-900 ml-1" />
+                      </div>
                     </div>
-                    <div v-if="index === filteredSongs.length - 1" class="h-36"></div>
                   </div>
-                </template>
-              </n-virtual-list>
+                </div>
+
+                <!-- Playlist Info -->
+                <div class="playlist-info flex-1 text-center md:text-left">
+                  <div class="playlist-badge mb-3">
+                    <span
+                      class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 dark:bg-primary/20 text-primary text-xs font-semibold uppercase tracking-wider"
+                    >
+                      {{ isAlbum ? 'Album' : 'Playlist' }}
+                    </span>
+                  </div>
+                  <h1
+                    class="playlist-name text-3xl md:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white tracking-tight mb-4"
+                  >
+                    {{ name }}
+                  </h1>
+
+                  <!-- Meta Info -->
+                  <div
+                    class="flex flex-wrap items-center justify-center md:justify-start gap-4 mb-6"
+                  >
+                    <div v-if="isAlbum && listInfo?.artist" class="flex items-center gap-2">
+                      <n-avatar
+                        round
+                        :size="28"
+                        :src="getImgUrl(listInfo.artist.picUrl, '50y50')"
+                      />
+                      <span
+                        class="text-sm font-semibold text-neutral-700 dark:text-neutral-200 hover:text-primary cursor-pointer transition-colors"
+                        >{{ listInfo.artist.name }}</span
+                      >
+                    </div>
+                    <div v-else-if="!isAlbum && listInfo?.creator" class="flex items-center gap-2">
+                      <n-avatar
+                        round
+                        :size="28"
+                        :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')"
+                      />
+                      <span class="text-sm font-semibold text-neutral-700 dark:text-neutral-200">{{
+                        listInfo.creator.nickname
+                      }}</span>
+                    </div>
+                    <div class="h-1 w-1 rounded-full bg-neutral-300 dark:bg-neutral-700"></div>
+                    <span class="text-sm text-neutral-500 dark:text-neutral-400">
+                      {{ t('player.songNum', { num: total }) }}
+                    </span>
+                  </div>
+
+                  <p
+                    v-if="listInfo?.description"
+                    class="text-sm md:text-base text-neutral-500 dark:text-neutral-400 line-clamp-2 leading-relaxed max-w-3xl"
+                  >
+                    {{ listInfo.description }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </n-spin>
+
+        <!-- Action Bar (Sticky) -->
+        <section
+          v-if="songList.length > 0"
+          class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+        >
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center gap-3">
+              <!-- Play All Button -->
+              <button
+                class="play-all-btn flex items-center gap-2 px-6 py-2.5 rounded-full bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-primary/25"
+                @click="handlePlayAll"
+              >
+                <i class="ri-play-circle-line text-lg" />
+                <span>{{ t('comp.musicList.playAll') }}</span>
+              </button>
+
+              <!-- Collect Button -->
+              <button
+                v-if="canCollect"
+                class="action-btn-pill flex items-center gap-2 px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-sm border"
+                :class="
+                  isCollected
+                    ? 'bg-neutral-100 dark:bg-neutral-800 text-red-500 border-neutral-200 dark:border-neutral-700'
+                    : 'bg-neutral-50 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 border-neutral-200 dark:border-neutral-800'
+                "
+                @click="toggleCollect"
+              >
+                <i :class="isCollected ? 'ri-heart-fill' : 'ri-heart-line'" class="text-lg" />
+                <span>{{
+                  isCollected ? t('comp.musicList.cancelCollect') : t('comp.musicList.collect')
+                }}</span>
+              </button>
+
+              <!-- Batch Actions -->
+              <div
+                v-if="filteredSongs.length > 0 && isElectron"
+                class="h-8 w-[1px] bg-neutral-200 dark:bg-neutral-800 mx-1 hidden md:block"
+              ></div>
+
+              <button
+                v-if="!isSelecting && isElectron"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="startSelect"
+              >
+                <i class="ri-checkbox-multiple-line text-lg" />
+              </button>
+
+              <div
+                v-if="isSelecting"
+                class="flex items-center gap-2 animate-in fade-in slide-in-from-left-2"
+              >
+                <n-checkbox
+                  :checked="isAllSelected"
+                  :indeterminate="isIndeterminate"
+                  @update:checked="handleSelectAll"
+                >
+                  {{ t('common.selectAll') }}
+                </n-checkbox>
+                <button
+                  class="px-4 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-bold hover:bg-primary/20 transition-all"
+                  :disabled="selectedSongs.length === 0 || isDownloading"
+                  @click="handleBatchDownload"
+                >
+                  <i class="ri-download-line mr-1" />
+                  {{ t('favorite.download', { count: selectedSongs.length }) }}
+                </button>
+                <button
+                  class="text-xs text-neutral-400 hover:text-neutral-600"
+                  @click="cancelSelect"
+                >
+                  {{ t('common.cancel') }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Right Tools -->
+            <div class="flex items-center gap-3">
+              <!-- Search within list -->
+              <div class="relative group hidden sm:block">
+                <n-input
+                  v-model:value="searchKeyword"
+                  :placeholder="t('comp.musicList.searchSongs')"
+                  round
+                  clearable
+                  size="small"
+                  class="w-48 focus:w-64 transition-all duration-300 !bg-neutral-100 dark:!bg-neutral-900 border-none"
+                >
+                  <template #prefix>
+                    <i class="ri-search-line text-neutral-400"></i>
+                  </template>
+                </n-input>
+              </div>
+
+              <!-- Layout Toggle -->
+              <button
+                v-if="!isMobile"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="toggleLayout"
+              >
+                <i :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'" class="text-lg" />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- List Content -->
+        <section class="song-list-section px-4 md:px-8 mt-6">
+          <n-spin :show="loadingList">
+            <div
+              v-if="filteredSongs.length === 0 && searchKeyword"
+              class="empty-state py-20 text-center text-neutral-400"
+            >
+              <i class="ri-search-line text-4xl mb-4 opacity-20" />
+              <p>{{ t('comp.musicList.noSearchResults') }}</p>
+            </div>
+
+            <div v-else class="song-list-container">
+              <div
+                v-for="(item, index) in filteredSongs"
+                :key="item.id"
+                class="mb-2 animate-item"
+                :style="{ animationDelay: calculateAnimationDelay(index % 20, 0.03) }"
+              >
+                <song-item
+                  :index="index"
+                  :compact="isCompactLayout"
+                  :item="formatSong(item)"
+                  :can-remove="canRemove"
+                  :selectable="isSelecting"
+                  :selected="selectedSongs.includes(item.id as number)"
+                  @play="handlePlayItem(item)"
+                  @remove-song="handleRemoveSong"
+                  @select="(id, selected) => handleSelect(id, selected)"
+                />
+              </div>
             </div>
           </n-spin>
-        </div>
+        </section>
       </div>
-    </div>
+    </n-scrollbar>
     <play-bottom />
   </div>
 </template>
 
 <script setup lang="ts">
-// 添加组件名称定义
-defineOptions({
-  name: 'MusicList'
-});
-
 import { useMessage } from 'naive-ui';
 import PinyinMatch from 'pinyin-match';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
+import { getAlbum, getListDetail } from '@/api/list';
 import {
   getMusicDetail,
   subscribeAlbum,
@@ -253,12 +272,15 @@ import { usePlaylistHistory } from '@/hooks/PlaylistHistoryHook';
 import { useDownload } from '@/hooks/useDownload';
 import { useMusicStore, usePlayerStore, useRecommendStore, useUserStore } from '@/store';
 import { SongResult } from '@/types/music';
-import { getImgUrl, isElectron, isMobile, setAnimationClass } from '@/utils';
+import { calculateAnimationDelay, getImgUrl, isElectron, isMobile } from '@/utils';
 import { getLoginErrorMessage, hasPermission } from '@/utils/auth';
 
+defineOptions({
+  name: 'MusicList'
+});
+
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 const playerStore = usePlayerStore();
 const musicStore = useMusicStore();
 const recommendStore = useRecommendStore();
@@ -267,370 +289,211 @@ const message = useMessage();
 const { addPlaylist } = usePlaylistHistory();
 const { addAlbum } = useAlbumHistory();
 
-// 从路由参数或状态管理获取数据
 const loading = ref(false);
+
+const fetchData = async () => {
+  const id = route.params.id;
+  const type = route.query.type;
+
+  if (!id || type === 'dailyRecommend') return;
+
+  // 检查是否需要加载数据
+  if (
+    musicStore.currentListInfo?.id?.toString() === id.toString() &&
+    musicStore.currentMusicList &&
+    musicStore.currentMusicList.length > 0
+  ) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    let data: any;
+    if (type === 'album') {
+      const res = await getAlbum(Number(id));
+      data = res.data;
+      if (data.code === 200) {
+        musicStore.setCurrentMusicList(
+          data.songs,
+          data.album.name,
+          { ...data.album, picUrl: data.album.picUrl },
+          false
+        );
+      } else {
+        message.error(t('common.loadFailed'));
+      }
+    } else if (type === 'playlist') {
+      const res = await getListDetail(id.toString());
+      data = res.data;
+      if (data.code === 200) {
+        const playlist = data.playlist;
+        musicStore.setCurrentMusicList(
+          playlist.tracks || [],
+          playlist.name,
+          playlist,
+          playlist.creator?.userId === userStore.user?.userId
+        );
+      } else {
+        message.error(t('common.loadFailed'));
+      }
+    }
+  } catch (error) {
+    console.error('加载列表数据失败:', error);
+    message.error(t('common.loadFailed'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(
+  () => route.fullPath,
+  () => {
+    fetchData();
+  },
+  { immediate: true }
+);
 const isDailyRecommend = computed(() => route.query.type === 'dailyRecommend');
 const isAlbum = computed(() => route.query.type === 'album');
+
 const name = computed(() => {
-  if (isDailyRecommend.value) {
-    return t('comp.recommendSinger.songlist'); // 日推的标题
-  }
-  return musicStore.currentMusicListName || ''; // 其他列表的标题
+  if (isDailyRecommend.value) return t('comp.recommendSinger.songlist');
+  return musicStore.currentMusicListName || '';
 });
+
 const songList = computed(() => {
-  if (isDailyRecommend.value) {
-    // 如果是日推页面，直接使用 recommendStore 中响应式的数据
-    return recommendStore.dailyRecommendSongs;
-  }
-  // 否则，使用 musicStore 中的静态数据
+  if (isDailyRecommend.value) return recommendStore.dailyRecommendSongs;
   return musicStore.currentMusicList || [];
 });
+
 const listInfo = computed(() => {
-  if (isDailyRecommend.value) {
-    return null;
-  }
+  if (isDailyRecommend.value) return null;
   return musicStore.currentListInfo || null;
 });
+
 const canRemove = computed(() => {
-  if (isDailyRecommend.value) {
-    return false;
-  }
+  if (isDailyRecommend.value) return false;
   return musicStore.canRemoveSong || false;
 });
 
 const canCollect = ref(false);
 const isCollected = ref(false);
-
-const page = ref(0);
 const pageSize = 40;
-const isLoadingMore = ref(false);
 const displayedSongs = ref<SongResult[]>([]);
 const loadingList = ref(false);
-const loadedIds = ref(new Set<number>()); // 用于追踪已加载的歌曲ID
-const isPlaylistLoading = ref(false); // 标记是否正在加载播放列表
-const completePlaylist = ref<SongResult[]>([]); // 存储完整的播放列表
-const hasMore = ref(true); // 标记是否还有更多数据可加载
-const searchKeyword = ref(''); // 搜索关键词
-const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加载完成
+const loadedIds = ref(new Set<number>());
+const isPlaylistLoading = ref(false);
+const completePlaylist = ref<SongResult[]>([]);
+const hasMore = ref(true);
+const searchKeyword = ref('');
+const isFullPlaylistLoaded = ref(false);
+
+const isSelecting = ref(false);
+const selectedSongs = ref<number[]>([]);
+const { isDownloading, batchDownloadMusic } = useDownload();
 
-// 添加搜索相关的状态和方法
-const isSearchVisible = ref(false);
 const isCompactLayout = ref(
   isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
-); // 默认使用紧凑布局
+);
 
-const showSearch = () => {
-  isSearchVisible.value = true;
-  // 添加一个小延迟后聚焦搜索框
-  nextTick(() => {
-    const inputEl = document.querySelector('.search-container input');
-    if (inputEl) {
-      (inputEl as HTMLInputElement).focus();
-    }
-  });
-};
-
-const closeSearch = () => {
-  isSearchVisible.value = false;
-  searchKeyword.value = '';
-};
-
-const handleSearchBlur = () => {
-  // 如果搜索框为空，则在失焦时关闭搜索框
-  if (!searchKeyword.value) {
-    setTimeout(() => {
-      isSearchVisible.value = false;
-    }, 200);
-  }
-};
-
-// 计算总数
 const total = computed(() => {
-  if (listInfo.value?.trackIds) {
-    return listInfo.value.trackIds.length;
-  }
+  if (listInfo.value?.trackIds) return listInfo.value.trackIds.length;
   return songList.value.length;
 });
 
-// 初始化数据
-onMounted(() => {
-  checkCollectionStatus();
-});
-
 const getCoverImgUrl = computed(() => {
   const coverImgUrl = listInfo.value?.coverImgUrl || listInfo.value?.picUrl;
-  if (coverImgUrl) {
-    return coverImgUrl;
-  }
-
+  if (coverImgUrl) return coverImgUrl;
   const song = songList.value[0];
-  if (song?.picUrl) {
-    return song.picUrl;
-  }
-  if (song?.al?.picUrl) {
-    return song.al.picUrl;
-  }
-  if (song?.album?.picUrl) {
-    return song.album.picUrl;
-  }
-  return '';
+  return song?.picUrl || song?.al?.picUrl || song?.album?.picUrl || '';
 });
 
-// 过滤歌曲列表
 const filteredSongs = computed(() => {
-  // 1. 确定数据源是来自store的完整列表(日推)还是来自本地分页的列表(其他)
-  const sourceList = isDailyRecommend.value
-    ? songList.value // 如果是日推，直接使用来自 recommendStore 的完整、响应式列表
-    : displayedSongs.value; // 否则，使用用于分页加载的 displayedSongs
+  const sourceList = isDailyRecommend.value ? songList.value : displayedSongs.value;
+  const dislikeFilteredList = sourceList.filter((s) => !playerStore.dislikeList.includes(s.id));
 
-  // 2. 过滤不喜欢的歌曲
-  const dislikeFilteredList = sourceList.filter(
-    (song) => !playerStore.dislikeList.includes(song.id)
-  );
-  // =================================================================
+  if (!searchKeyword.value) return dislikeFilteredList;
 
-  // 3. 如果没有搜索词，直接返回处理后的列表
-  if (!searchKeyword.value) {
-    return dislikeFilteredList;
-  }
-
-  // 4. 如果有搜索词，在处理后的列表上进行搜索
   const keyword = searchKeyword.value.toLowerCase().trim();
   return dislikeFilteredList.filter((song) => {
     const songName = song.name?.toLowerCase() || '';
     const albumName = song.al?.name?.toLowerCase() || '';
     const artists = song.ar || song.artists || [];
-
-    // 原始文本匹配
-    const nameMatch = songName.includes(keyword);
-    const albumMatch = albumName.includes(keyword);
-    const artistsMatch = artists.some((artist: any) => {
-      return artist.name?.toLowerCase().includes(keyword);
-    });
-
-    // 拼音匹配
-    const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
-    const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
-    const artistsPinyinMatch = artists.some((artist: any) => {
-      return artist.name && PinyinMatch.match(artist.name, keyword);
-    });
-
     return (
-      nameMatch ||
-      albumMatch ||
-      artistsMatch ||
-      namePinyinMatch ||
-      albumPinyinMatch ||
-      artistsPinyinMatch
+      songName.includes(keyword) ||
+      albumName.includes(keyword) ||
+      artists.some((a: any) => a.name?.toLowerCase().includes(keyword)) ||
+      PinyinMatch.match(songName, keyword)
     );
   });
 });
 
 const resetListState = () => {
-  page.value = 0;
   loadedIds.value.clear();
   displayedSongs.value = [];
   completePlaylist.value = [];
   hasMore.value = true;
-  loadingList.value = false;
-  searchKeyword.value = '';
   isFullPlaylistLoaded.value = false;
 };
 
-// 格式化歌曲数据
 const formatSong = (item: any) => {
-  if (!item) {
-    return null;
-  }
+  if (!item) return null;
   return {
     ...item,
     picUrl: item.al?.picUrl || item.picUrl,
     song: {
       artists: item.ar || item.artists,
-      name: item.al?.name || item.name,
-      id: item.al?.id || item.id
+      name: item.name,
+      id: item.id
     }
   };
 };
 
-/**
- * 加载歌曲数据的核心函数
- * @param ids 要加载的歌曲ID数组
- * @param appendToList 是否将加载的歌曲追加到现有列表
- * @param updateComplete 是否更新完整播放列表
- */
 const loadSongs = async (ids: number[], appendToList = true, updateComplete = false) => {
   if (ids.length === 0) return [];
-
   try {
-    console.log(`请求歌曲详情，ID数量: ${ids.length}`);
     const { data } = await getMusicDetail(ids);
-
     if (data?.songs) {
-      console.log(`API返回歌曲数量: ${data.songs.length}`);
-
-      // 直接使用API返回的所有歌曲，不再过滤已加载的歌曲
-      // 因为当需要完整加载列表时，我们希望获取所有歌曲，即使ID可能重复
       const { songs } = data;
-
-      // 只在非更新完整列表时执行过滤
-      let newSongs = songs;
-      if (!updateComplete) {
-        // 在普通加载模式下继续过滤已加载的歌曲，避免重复
-        newSongs = songs.filter((song: any) => !loadedIds.value.has(song.id));
-        console.log(`过滤已加载ID后剩余歌曲数量: ${newSongs.length}`);
-      }
-
-      // 更新已加载ID集合
-      songs.forEach((song: any) => {
-        loadedIds.value.add(song.id);
-      });
-
-      // 追加到显示列表 - 仅当appendToList=true时添加到displayedSongs
-      if (appendToList) {
-        displayedSongs.value.push(...newSongs);
-      }
-
-      // 更新完整播放列表 - 仅当updateComplete=true时添加到completePlaylist
-      if (updateComplete) {
-        completePlaylist.value.push(...songs);
-        console.log(`已添加到完整播放列表，当前完整列表长度: ${completePlaylist.value.length}`);
-      }
-
-      return updateComplete ? songs : newSongs;
+      songs.forEach((song: any) => loadedIds.value.add(song.id));
+      if (appendToList) displayedSongs.value.push(...songs);
+      if (updateComplete) completePlaylist.value.push(...songs);
+      return songs;
     }
-    console.log('API返回无歌曲数据');
-    return [];
   } catch (error) {
     console.error('加载歌曲失败:', error);
   }
-
   return [];
 };
 
-// 加载完整播放列表
 const loadFullPlaylist = async () => {
   if (isPlaylistLoading.value || isFullPlaylistLoaded.value) return;
-
   isPlaylistLoading.value = true;
-  // 记录开始时间
-  const startTime = Date.now();
-  console.log(`开始加载完整播放列表，当前显示列表长度: ${displayedSongs.value.length}`);
-
   try {
-    // 如果没有trackIds，直接使用当前歌曲列表并标记为已完成
     if (!listInfo.value?.trackIds) {
       isFullPlaylistLoaded.value = true;
-      console.log('无trackIds信息，使用当前列表作为完整列表');
       return;
     }
-
-    // 获取所有trackIds
     const allIds = listInfo.value.trackIds.map((item) => item.id);
-    console.log(`歌单共有歌曲ID: ${allIds.length}首`);
-
-    // 重置completePlaylist和当前显示歌曲ID集合，保证不会重复添加歌曲
-    completePlaylist.value = [];
-
-    // 使用Set记录所有已加载的歌曲ID
-    const loadedSongIds = new Set<number>();
-
-    // 将当前显示列表中的歌曲和ID添加到集合中
-    displayedSongs.value.forEach((song) => {
-      loadedSongIds.add(song.id as number);
-      // 将已有歌曲添加到completePlaylist
-      completePlaylist.value.push(song);
-    });
-
-    console.log(
-      `已有显示歌曲: ${displayedSongs.value.length}首，已有ID数量: ${loadedSongIds.size}`
-    );
-
-    // 过滤出尚未加载的歌曲ID
+    const loadedSongIds = new Set(displayedSongs.value.map((s) => s.id as number));
+    completePlaylist.value = [...displayedSongs.value];
     const unloadedIds = allIds.filter((id) => !loadedSongIds.has(id));
-    console.log(`还需要加载的歌曲ID数量: ${unloadedIds.length}`);
 
     if (unloadedIds.length === 0) {
-      console.log('所有歌曲已加载，无需再次加载');
       isFullPlaylistLoaded.value = true;
-      hasMore.value = false;
       return;
     }
 
-    // 分批加载所有未加载的歌曲
-    const batchSize = 500; // 每批加载的歌曲数量
-
+    const batchSize = 500;
     for (let i = 0; i < unloadedIds.length; i += batchSize) {
       const batchIds = unloadedIds.slice(i, i + batchSize);
-      if (batchIds.length === 0) continue;
-
-      console.log(`请求第${Math.floor(i / batchSize) + 1}批歌曲，数量: ${batchIds.length}`);
-      // 关键修改: 设置appendToList为false，避免loadSongs直接添加到displayedSongs
       const loadedBatch = await loadSongs(batchIds, false, false);
-
-      // 添加新加载的歌曲到displayedSongs
       if (loadedBatch.length > 0) {
-        // 过滤掉已有的歌曲，确保不会重复添加
-        const newSongs = loadedBatch.filter((song) => !loadedSongIds.has(song.id as number));
-
-        // 更新已加载ID集合
-        newSongs.forEach((song) => {
-          loadedSongIds.add(song.id as number);
-        });
-
-        console.log(`新增${newSongs.length}首歌曲到显示列表`);
-
-        // 更新显示列表和完整播放列表
-        if (newSongs.length > 0) {
-          // 添加到显示列表
-          displayedSongs.value = [...displayedSongs.value, ...newSongs];
-
-          // 添加到完整播放列表
-          completePlaylist.value.push(...newSongs);
-
-          // 如果当前正在播放的列表与这个列表匹配，实时更新播放列表
-          const currentPlaylist = playerStore.playList;
-          if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
-            console.log('实时更新当前播放列表');
-            playerStore.setPlayList(displayedSongs.value.map(formatSong));
-          }
-        }
-      }
-
-      // 添加小延迟避免请求过于密集
-      if (i + batchSize < unloadedIds.length) {
-        await new Promise<void>((resolve) => {
-          setTimeout(() => resolve(), 100);
-        });
+        displayedSongs.value = [...displayedSongs.value, ...loadedBatch];
+        completePlaylist.value = [...completePlaylist.value, ...loadedBatch];
       }
     }
-
-    // 加载完成，更新状态
     isFullPlaylistLoaded.value = true;
     hasMore.value = false;
-
-    // 计算加载耗时
-    const endTime = Date.now();
-    const timeUsed = Math.round(((endTime - startTime) / 1000) * 100) / 100;
-
-    console.log(
-      `完整播放列表加载完成，共加载${displayedSongs.value.length}首歌曲，耗时${timeUsed}秒`
-    );
-    console.log(`歌单应有${allIds.length}首歌，实际加载${displayedSongs.value.length}首`);
-
-    // 检查加载的歌曲数量是否与预期相符
-    if (displayedSongs.value.length !== allIds.length) {
-      console.warn(
-        `警告: 加载的歌曲数量(${displayedSongs.value.length})与歌单应有数量(${allIds.length})不符`
-      );
-
-      // 如果数量不符，可能是API未返回所有歌曲，打印缺失的歌曲ID
-      if (displayedSongs.value.length < allIds.length) {
-        const loadedIds = new Set(displayedSongs.value.map((song) => song.id));
-        const missingIds = allIds.filter((id) => !loadedIds.has(id));
-        console.warn(`缺失的歌曲ID: ${missingIds.join(', ')}`);
-      }
-    }
   } catch (error) {
     console.error('加载完整播放列表失败:', error);
   } finally {
@@ -638,367 +501,151 @@ const loadFullPlaylist = async () => {
   }
 };
 
-// 处理播放
-const handlePlay = async () => {
-  // 当搜索状态下播放时，只播放过滤后的歌曲
-  if (searchKeyword.value) {
-    playerStore.setPlayList(filteredSongs.value.map(formatSong));
-    return;
-  }
+const handlePlayAll = () => {
+  if (displayedSongs.value.length === 0) return;
   saveHistory();
-  // 如果完整播放列表已加载完成
-  if (isFullPlaylistLoaded.value && completePlaylist.value.length > 0) {
-    playerStore.setPlayList(completePlaylist.value.map(formatSong));
-    return;
-  }
+  const list = searchKeyword.value
+    ? filteredSongs.value
+    : isFullPlaylistLoaded.value
+      ? completePlaylist.value
+      : displayedSongs.value;
+  playerStore.setPlayList(list.map(formatSong));
+  playerStore.setPlay(formatSong(list[0]));
+  if (!isFullPlaylistLoaded.value) loadFullPlaylist();
+};
 
-  // 如果完整播放列表未加载完成，先使用当前已加载的歌曲开始播放
-  playerStore.setPlayList(displayedSongs.value.map(formatSong));
-
-  // 如果完整播放列表正在加载中，不需要重新触发加载
-  if (isPlaylistLoading.value) {
-    return;
-  }
-
-  // 在后台继续加载完整播放列表（如果未加载完成）
-  if (!isFullPlaylistLoaded.value) {
-    console.log('播放时继续在后台加载完整列表');
-    loadFullPlaylist();
+const handlePlayItem = (item: any) => {
+  playerStore.setPlay(formatSong(item));
+  if (!playerStore.playList.some((s) => s.id === item.id)) {
+    playerStore.addToNextPlay(formatSong(item));
   }
 };
 
-// 添加从歌单移除歌曲的方法
 const handleRemoveSong = async (songId: number) => {
   if (!listInfo.value?.id || !canRemove.value) return;
-
   try {
     const res = await updatePlaylistTracks({
       op: 'del',
       pid: listInfo.value.id,
       tracks: songId.toString()
     });
-
     if (res.status === 200) {
       message.success(t('user.message.deleteSuccess'));
-
-      // 从显示列表和完整播放列表中移除歌曲
-      displayedSongs.value = displayedSongs.value.filter((song) => song.id !== songId);
-      completePlaylist.value = completePlaylist.value.filter((song) => song.id !== songId);
-
-      // 如果正在播放该列表，也需要更新播放列表
-      const currentPlaylist = playerStore.playList;
-      if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
-        playerStore.setPlayList(displayedSongs.value.map(formatSong));
-      }
-
-      // 从Pinia状态中也移除
-      if (musicStore.currentMusicList) {
-        musicStore.removeSongFromList(songId);
-      }
-    } else {
-      throw new Error(res.data?.msg || t('user.message.deleteFailed'));
+      displayedSongs.value = displayedSongs.value.filter((s) => s.id !== songId);
+      completePlaylist.value = completePlaylist.value.filter((s) => s.id !== songId);
+      musicStore.removeSongFromList(songId);
     }
-  } catch (error: any) {
-    console.error('删除歌曲失败:', error);
-    message.error(error.message || t('user.message.deleteFailed'));
-  }
-};
-
-// 加载更多歌曲
-const loadMoreSongs = async () => {
-  if (isFullPlaylistLoaded.value) {
-    hasMore.value = false;
-    return;
-  }
-
-  if (searchKeyword.value) {
-    return;
-  }
-
-  if (isLoadingMore.value || displayedSongs.value.length >= total.value) {
-    hasMore.value = false;
-    return;
-  }
-
-  isLoadingMore.value = true;
-
-  try {
-    const start = displayedSongs.value.length;
-    const end = Math.min(start + pageSize, total.value);
-
-    if (listInfo.value?.trackIds) {
-      const trackIdsToLoad = listInfo.value.trackIds
-        .slice(start, end)
-        .map((item) => item.id)
-        .filter((id) => !loadedIds.value.has(id));
-
-      if (trackIdsToLoad.length > 0) {
-        await loadSongs(trackIdsToLoad, true, false);
-      }
-    } else if (start < songList.value.length) {
-      const newSongs = songList.value.slice(start, end);
-      newSongs.forEach((song) => {
-        if (!loadedIds.value.has(song.id)) {
-          loadedIds.value.add(song.id);
-          displayedSongs.value.push(song);
-        }
-      });
-    }
-
-    hasMore.value = displayedSongs.value.length < total.value;
   } catch (error) {
-    console.error('加载更多歌曲失败:', error);
-  } finally {
-    isLoadingMore.value = false;
-    loadingList.value = false;
+    console.error('删除歌曲失败:', error);
+    message.error(t('user.message.deleteFailed'));
   }
 };
 
-// 处理虚拟列表滚动事件
-const handleVirtualScroll = (e: any) => {
-  if (!e || !e.target) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  const threshold = 200;
+const handleScroll = (e: Event) => {
+  const target = e.target as HTMLElement;
+  const { scrollTop, scrollHeight, clientHeight } = target;
 
+  // 懒加载：滚动到底部时加载更多
   if (
-    scrollHeight - scrollTop - clientHeight < threshold &&
-    !isLoadingMore.value &&
+    scrollHeight - scrollTop - clientHeight < 200 &&
+    !loadingList.value &&
     hasMore.value &&
-    !searchKeyword.value // 搜索状态下不触发加载更多
+    !searchKeyword.value
   ) {
     loadMoreSongs();
   }
 };
 
-// 初始化歌曲列表
-const initSongList = (songs: any[]) => {
-  if (songs.length > 0) {
-    displayedSongs.value = [...songs];
-    songs.forEach((song) => loadedIds.value.add(song.id));
-    page.value = Math.ceil(songs.length / pageSize);
-  }
-
-  // 检查是否还有更多数据可加载
-  hasMore.value = displayedSongs.value.length < total.value;
-};
-
-watch(
-  () => listInfo.value,
-  (newListInfo) => {
-    if (newListInfo?.trackIds) {
-      loadFullPlaylist();
-    }
-  },
-  { deep: true }
-);
-
-// 监听搜索关键词变化
-watch(searchKeyword, () => {
-  // 当搜索关键词为空时，考虑加载更多歌曲
-  if (!searchKeyword.value && hasMore.value && displayedSongs.value.length < total.value) {
-    loadMoreSongs();
-  }
-});
-
-watch(
-  songList,
-  (newSongs) => {
-    resetListState();
-    initSongList(newSongs);
-    if (hasMore.value && listInfo.value?.trackIds) {
-      setTimeout(() => {
-        loadMoreSongs();
-      }, 300);
-    }
-  },
-  { immediate: true }
-);
-
-// 组件卸载时清理状态
-onUnmounted(() => {
-  isPlaylistLoading.value = false;
-});
-
-// 切换布局
-const toggleLayout = () => {
-  isCompactLayout.value = !isCompactLayout.value;
-  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
-};
-
-// 初始化收藏状态（支持歌单和专辑）
-const checkCollectionStatus = () => {
-  const type = route.query.type as string;
-
-  // 歌单类型的收藏检查
-  if (type === 'playlist' && listInfo.value?.id) {
-    canCollect.value = true;
-    isCollected.value = listInfo.value.subscribed || false;
-  }
-  // 专辑类型的收藏检查 - 使用 store 判断
-  else if (type === 'album' && listInfo.value?.id) {
-    canCollect.value = true;
-    // 从 userStore 中判断是否已收藏
-    isCollected.value = userStore.isAlbumCollected(listInfo.value.id);
-  }
-  // 其他类型不支持收藏
-  else {
-    canCollect.value = false;
-    isCollected.value = false;
-  }
-};
-
-// 切换收藏状态（支持歌单和专辑）
-const toggleCollect = async () => {
-  if (!listInfo.value?.id) return;
-
-  // 检查是否有真实登录权限
-  if (!hasPermission(true)) {
-    message.error(getLoginErrorMessage(true));
+const loadMoreSongs = async () => {
+  if (
+    isFullPlaylistLoaded.value ||
+    searchKeyword.value ||
+    displayedSongs.value.length >= total.value
+  )
     return;
-  }
-
-  const type = route.query.type as string;
-
+  loadingList.value = true;
   try {
-    loadingList.value = true;
-    const tVal = isCollected.value ? 2 : 1; // 1:收藏, 2:取消收藏
-
-    // 根据类型调用不同的API
-    const response =
-      type === 'album'
-        ? await subscribeAlbum({
-            t: tVal,
-            id: listInfo.value.id
-          })
-        : await subscribePlaylist({
-            t: tVal,
-            id: listInfo.value.id
-          });
-
-    // 假设API返回格式是 { data: { code: number, msg?: string } }
-    const res = response.data;
-
-    if (res.code === 200) {
-      isCollected.value = !isCollected.value;
-      const msgKey = isCollected.value
-        ? 'comp.musicList.collectSuccess'
-        : 'comp.musicList.cancelCollectSuccess';
-      message.success(t(msgKey));
-
-      // 更新收藏状态
-      if (type === 'album') {
-        // 专辑：更新 store 中的收藏状态和专辑列表
-        if (isCollected.value) {
-          // 添加到收藏ID集合
-          userStore.addCollectedAlbum(listInfo.value.id);
-          // 添加到专辑列表
-          const albumData = {
-            id: listInfo.value.id,
-            name: listInfo.value.name,
-            picUrl: listInfo.value.picUrl || listInfo.value.coverImgUrl,
-            size: listInfo.value.size,
-            artist: listInfo.value.artist || listInfo.value.artists?.[0]
-          };
-          userStore.albumList.unshift(albumData);
-        } else {
-          // 从收藏ID集合中移除
-          userStore.removeCollectedAlbum(listInfo.value.id);
-          // 从专辑列表中移除
-          const index = userStore.albumList.findIndex((album) => album.id === listInfo.value.id);
-          if (index !== -1) {
-            userStore.albumList.splice(index, 1);
-          }
-        }
-        (listInfo.value as any).isSub = isCollected.value;
-      } else {
-        // 歌单：更新 listInfo 的状态
-        listInfo.value.subscribed = isCollected.value;
-      }
+    const start = displayedSongs.value.length;
+    const end = Math.min(start + pageSize, total.value);
+    if (listInfo.value?.trackIds) {
+      const ids = listInfo.value.trackIds
+        .slice(start, end)
+        .map((i) => i.id)
+        .filter((id) => !loadedIds.value.has(id));
+      if (ids.length > 0) await loadSongs(ids);
     } else {
-      throw new Error(res.msg || t('comp.musicList.operationFailed'));
+      const newSongs = songList.value.slice(start, end);
+      newSongs.forEach((s) => {
+        if (!loadedIds.value.has(s.id)) {
+          loadedIds.value.add(s.id);
+          displayedSongs.value.push(s);
+        }
+      });
     }
-  } catch (error) {
-    console.error(`收藏${type === 'album' ? '专辑' : '歌单'}失败:`, error);
-    message.error(t('comp.musicList.operationFailed'));
+    hasMore.value = displayedSongs.value.length < total.value;
   } finally {
     loadingList.value = false;
   }
 };
 
-// 播放全部
-const handlePlayAll = () => {
-  if (displayedSongs.value.length === 0) return;
-  saveHistory();
-  // 如果有搜索关键词，只播放过滤后的歌曲
-  if (searchKeyword.value) {
-    playerStore.setPlayList(filteredSongs.value.map(formatSong));
-    playerStore.setPlay(formatSong(filteredSongs.value[0]));
-    return;
-  }
-
-  // 否则播放全部歌曲
-  // 使用setPlayList设置播放列表
-  playerStore.setPlayList(displayedSongs.value.map(formatSong));
-  // 使用setPlay开始播放第一首
-  playerStore.setPlay(formatSong(displayedSongs.value[0]));
-};
-
 const saveHistory = () => {
-  if (listInfo.value?.id) {
-    if (isAlbum.value) {
-      // 保存专辑播放记录
-      addAlbum({
-        id: listInfo.value.id,
-        name: listInfo.value.name || '',
-        picUrl: listInfo.value.picUrl || listInfo.value.coverImgUrl || '',
-        size: listInfo.value.size || displayedSongs.value.length,
-        artist: listInfo.value.artist || listInfo.value.artists?.[0]
-      });
-    } else if (route.query.type === 'playlist') {
-      // 保存歌单播放记录
-      addPlaylist({
-        id: listInfo.value.id,
-        name: listInfo.value.name || '',
-        coverImgUrl: listInfo.value.coverImgUrl || listInfo.value.picUrl || '',
-        trackCount: listInfo.value.trackCount || displayedSongs.value.length,
-        playCount: listInfo.value.playCount,
-        creator: listInfo.value.creator
-      });
-    }
+  if (!listInfo.value?.id) return;
+  if (isAlbum.value) {
+    addAlbum({
+      id: listInfo.value.id,
+      name: listInfo.value.name || '',
+      picUrl: getCoverImgUrl.value,
+      size: total.value,
+      artist: listInfo.value.artist
+    });
+  } else if (route.query.type === 'playlist') {
+    addPlaylist({
+      id: listInfo.value.id,
+      name: listInfo.value.name || '',
+      coverImgUrl: getCoverImgUrl.value,
+      trackCount: total.value,
+      playCount: listInfo.value.playCount,
+      creator: listInfo.value.creator
+    });
   }
 };
 
-// 添加到播放列表末尾
-const addToPlaylist = () => {
-  if (displayedSongs.value.length === 0) return;
-
-  // 获取当前播放列表
-  const currentList = playerStore.playList;
-
-  // 如果有搜索关键词，只添加过滤后的歌曲
-  const songsToAdd = searchKeyword.value ? filteredSongs.value : displayedSongs.value;
-
-  // 添加歌曲到播放列表(避免重复添加)
-  const newSongs = songsToAdd.filter((song) => !currentList.some((item) => item.id === song.id));
-
-  if (newSongs.length === 0) {
-    message.info(t('comp.musicList.songsAlreadyInPlaylist'));
+const toggleCollect = async () => {
+  if (!listInfo.value?.id || !hasPermission(true)) {
+    if (!listInfo.value?.id) return;
+    message.error(getLoginErrorMessage(true));
     return;
   }
-
-  // 合并到当前播放列表末尾
-  const newList = [...currentList, ...newSongs.map(formatSong)];
-  playerStore.setPlayList(newList);
-
-  message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
+  const type = route.query.type as string;
+  try {
+    const tVal = isCollected.value ? 2 : 1;
+    const response =
+      type === 'album'
+        ? await subscribeAlbum({ t: tVal, id: listInfo.value.id })
+        : await subscribePlaylist({ t: tVal, id: listInfo.value.id });
+    if (response.data.code === 200) {
+      isCollected.value = !isCollected.value;
+      message.success(
+        t(
+          isCollected.value
+            ? 'comp.musicList.collectSuccess'
+            : 'comp.musicList.cancelCollectSuccess'
+        )
+      );
+      if (type === 'album') {
+        isCollected.value
+          ? userStore.addCollectedAlbum(listInfo.value.id)
+          : userStore.removeCollectedAlbum(listInfo.value.id);
+      } else {
+        listInfo.value.subscribed = isCollected.value;
+      }
+    }
+  } catch (error) {
+    console.error('操作收藏失败:', error);
+    message.error(t('comp.musicList.operationFailed'));
+  }
 };
 
-// 多选下载相关状态和方法
-const isSelecting = ref(false);
-const selectedSongs = ref<number[]>([]);
-const { isDownloading, batchDownloadMusic } = useDownload();
-
 const startSelect = () => {
   isSelecting.value = true;
   selectedSongs.value = [];
@@ -1007,216 +654,117 @@ const cancelSelect = () => {
   isSelecting.value = false;
   selectedSongs.value = [];
 };
-const handleSelect = (songId: number, selected: boolean) => {
-  if (selected) {
-    selectedSongs.value.push(songId);
-  } else {
-    selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
-  }
+const handleSelect = (id: number, selected: boolean) => {
+  selected
+    ? selectedSongs.value.push(id)
+    : (selectedSongs.value = selectedSongs.value.filter((i) => i !== id));
 };
-const isAllSelected = computed(() => {
-  return (
-    filteredSongs.value.length > 0 && selectedSongs.value.length === filteredSongs.value.length
-  );
-});
-const isIndeterminate = computed(() => {
-  return selectedSongs.value.length > 0 && selectedSongs.value.length < filteredSongs.value.length;
-});
+const isAllSelected = computed(
+  () => filteredSongs.value.length > 0 && selectedSongs.value.length === filteredSongs.value.length
+);
+const isIndeterminate = computed(
+  () => selectedSongs.value.length > 0 && selectedSongs.value.length < filteredSongs.value.length
+);
 const handleSelectAll = (checked: boolean) => {
-  if (checked) {
-    selectedSongs.value = filteredSongs.value.map((song) => song.id as number);
-  } else {
-    selectedSongs.value = [];
-  }
+  selectedSongs.value = checked ? filteredSongs.value.map((s) => s.id as number) : [];
 };
 const handleBatchDownload = async () => {
-  const selectedSongsList = selectedSongs.value
-    .map((songId) => filteredSongs.value.find((s) => s.id === songId))
-    .filter((song) => song) as SongResult[];
-  await batchDownloadMusic(selectedSongsList);
+  const list = selectedSongs.value
+    .map((id) => filteredSongs.value.find((s) => s.id === id))
+    .filter((s) => s) as SongResult[];
+  await batchDownloadMusic(list);
   cancelSelect();
 };
 
-// 跳转到历史日推页面
-const goToHistoryRecommend = () => {
-  router.push({ name: 'historyRecommend' });
+const toggleLayout = () => {
+  isCompactLayout.value = !isCompactLayout.value;
+  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
 };
+
+const checkCollectionStatus = () => {
+  const type = route.query.type as string;
+  if (type === 'playlist' && listInfo.value?.id) {
+    canCollect.value = true;
+    isCollected.value = listInfo.value.subscribed || false;
+  } else if (type === 'album' && listInfo.value?.id) {
+    canCollect.value = true;
+    isCollected.value = userStore.isAlbumCollected(listInfo.value.id);
+  } else {
+    canCollect.value = false;
+  }
+};
+
+watch(
+  songList,
+  (newSongs) => {
+    resetListState();
+    if (newSongs.length > 0) {
+      displayedSongs.value = [...newSongs];
+      newSongs.forEach((s) => loadedIds.value.add(s.id));
+    }
+    hasMore.value = displayedSongs.value.length < total.value;
+    checkCollectionStatus();
+  },
+  { immediate: true }
+);
+
+onMounted(checkCollectionStatus);
 </script>
 
 <style scoped lang="scss">
-.music {
-  &-title {
-    @apply text-xl font-bold text-gray-900 dark:text-white;
+.music-list-page {
+  position: relative;
+}
+
+.hero-section {
+  min-height: 300px;
+}
+
+.action-bar {
+  transition:
+    background-color 0.3s,
+    box-shadow 0.3s;
+}
+
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  &-total {
-    @apply text-sm font-normal text-gray-500 dark:text-gray-400;
-  }
-
-  &-page {
-    @apply h-full bg-light-100 dark:bg-dark-100 px-4 mr-2 rounded-2xl;
-  }
-
-  &-close {
-    @apply cursor-pointer text-gray-500 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 flex gap-2 items-center transition;
-    .icon {
-      @apply text-3xl;
-    }
-  }
-
-  &-content {
-    @apply flex h-[calc(100%-60px)];
-  }
-
-  &-info {
-    @apply w-[25%] flex-shrink-0 pr-8 flex flex-col;
-
-    .music-cover {
-      @apply w-full aspect-square rounded-2xl overflow-hidden mb-4 min-h-[250px] relative;
-      .cover-img {
-        @apply w-full h-full object-cover;
-      }
-    }
-
-    .history-recommend-btn {
-      @apply mb-4 absolute bottom-1 right-4 z-10;
-      :deep(.n-button) {
-        @apply w-full bg-black bg-opacity-30 text-green-400 hover:bg-opacity-50 hover:text-green-500 transition-colors;
-      }
-    }
-
-    .creator-info {
-      @apply flex items-center mb-4;
-      .creator-name {
-        @apply ml-2 text-gray-700 dark:text-gray-300;
-      }
-    }
-
-    .music-desc {
-      @apply text-sm text-gray-600 dark:text-gray-400 leading-relaxed pr-4;
-    }
-  }
-
-  &-list {
-    @apply flex-grow min-h-0;
-    &-container {
-      @apply flex-grow min-h-0 flex flex-col relative;
-    }
-
-    &-content {
-      @apply min-h-[calc(80vh-60px)];
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.search-container {
-  @apply max-w-md transition-all duration-300 ease-in-out;
-
-  &.search-expanded {
-    @apply w-52;
-  }
-
-  .search-button {
-    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
-
-    .icon {
-      @apply text-lg;
-    }
-  }
-
-  :deep(.n-input) {
-    @apply bg-light-200 dark:bg-dark-200;
+.action-btn-pill {
+  @apply transition-all border-neutral-200 dark:border-neutral-800;
+  &:hover:not(:disabled) {
+    @apply border-primary/30 bg-primary/5;
   }
 }
 
-.no-result {
-  @apply text-center py-8 text-gray-500 dark:text-gray-400;
+.action-btn-icon {
+  @apply transition-all;
+  &:hover {
+    @apply scale-110 text-primary bg-primary/10;
+  }
 }
 
-/* 虚拟列表样式 */
-.song-virtual-list {
-  :deep(.n-virtual-list__scroll) {
-    scrollbar-width: thin;
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-      @apply bg-gray-400 dark:bg-gray-600 rounded;
-    }
-  }
+.song-list-container {
+  padding-bottom: 100px;
 }
 
 .mobile {
-  .music-page {
-    @apply px-4 overflow-hidden mr-0;
+  .hero-section {
+    min-height: auto;
   }
-
-  .music-content {
-    @apply flex-col;
-  }
-
-  .music-info {
-    @apply w-full pr-0 mb-2 flex flex-row;
-
-    .music-cover {
-      @apply w-[100px] h-[100px] rounded-lg overflow-hidden mb-4;
-    }
-    .music-detail {
-      @apply flex-1 ml-4;
-    }
-  }
-
-  .music-title {
-    @apply text-base;
-  }
-
-  .search-container {
-    @apply max-w-[50%];
-  }
-}
-
-.loading-more {
-  @apply text-center py-4 text-gray-500 dark:text-gray-400;
-}
-
-.double-item {
-  @apply mb-2 bg-light-200 bg-opacity-30 dark:bg-dark-200 dark:bg-opacity-20 rounded-3xl;
-}
-
-.mobile {
-  .music-info {
-    @apply hidden;
-  }
-}
-
-.layout-toggle {
-  .toggle-button {
-    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors;
-
-    .icon {
-      @apply text-lg text-gray-500 dark:text-gray-400 transition-colors;
-    }
-  }
-}
-
-.layout-toggle .toggle-button,
-.action-button {
-  @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
-
-  .icon {
-    @apply text-lg;
-  }
-
-  &.collected {
-    .icon {
-      @apply text-red-500;
-    }
-  }
-
-  &.hover-green:hover {
-    .icon {
-      @apply text-green-500;
-    }
+  .action-bar {
+    @apply py-2;
   }
 }
 </style>
diff --git a/src/renderer/views/mv/index.vue b/src/renderer/views/mv/index.vue
index 6b51279..ec44599 100644
--- a/src/renderer/views/mv/index.vue
+++ b/src/renderer/views/mv/index.vue
@@ -1,54 +1,120 @@
 <template>
-  <div class="mv-list">
-    <div class="play-list-type">
-      <n-scrollbar x-scrollable>
-        <div class="categories-wrapper">
-          <span
-            v-for="(category, index) in categories"
-            :key="category.value"
-            class="play-list-type-item"
-            :class="[
-              setAnimationClass('animate__bounceIn'),
-              { active: selectedCategory === category.value }
-            ]"
-            :style="getAnimationDelay(index)"
-            @click="selectedCategory = category.value"
-          >
-            {{ category.label }}
-          </span>
-        </div>
-      </n-scrollbar>
-    </div>
-    <n-scrollbar :size="100" @scroll="handleScroll">
-      <div
-        v-loading="initLoading"
-        class="mv-list-content"
-        :class="setAnimationClass('animate__bounceInLeft')"
-      >
-        <div
-          v-for="(item, index) in mvList"
-          :key="item.id"
-          class="mv-item"
-          :class="setAnimationClass('animate__bounceIn')"
-          :style="getAnimationDelay(index)"
-        >
-          <div class="mv-item-img" @click="handleShowMv(item, index)">
-            <n-image
-              class="mv-item-img-img"
-              :src="getImgUrl(item.cover, '320y180')"
-              lazy
-              preview-disabled
-            />
-            <div class="top">
-              <div class="play-count">{{ formatNumber(item.playCount) }}</div>
-              <i class="iconfont icon-videofill"></i>
-            </div>
+  <div class="mv-list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <n-scrollbar class="h-full" @scroll="handleScroll">
+      <div class="mv-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+        <!-- Hero Section -->
+        <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
+          <div>
+            <h1
+              class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2"
+            >
+              MV
+            </h1>
+            <p class="text-neutral-500 dark:text-neutral-400">探索精彩视频内容</p>
+          </div>
+
+          <!-- Category Selector (Pills) -->
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="category in categories"
+              :key="category.value"
+              class="px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-300"
+              :class="[
+                selectedCategory === category.value
+                  ? 'bg-primary text-white shadow-lg shadow-primary/25 scale-105'
+                  : 'bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800'
+              ]"
+              @click="selectedCategory = category.value"
+            >
+              {{ category.label }}
+            </button>
           </div>
-          <div class="mv-item-title">{{ item.name }}</div>
         </div>
 
-        <div v-if="loadingMore" class="loading-more">加载中...</div>
-        <div v-if="!hasMore && !initLoading" class="no-more">没有更多了</div>
+        <!-- MV Grid Container -->
+        <div class="mv-grid-container">
+          <!-- Loading State -->
+          <div v-if="initLoading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <div v-for="i in 12" :key="i" class="space-y-3">
+              <div
+                class="aspect-video 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-4 gap-6">
+            <div
+              v-for="(item, index) in mvList"
+              :key="item.id"
+              class="mv-card group cursor-pointer animate-item"
+              :style="{ animationDelay: calculateAnimationDelay(index, 0.05) }"
+              @click="handleShowMv(item, index)"
+            >
+              <!-- Cover Image -->
+              <div
+                class="relative aspect-video overflow-hidden rounded-2xl shadow-md group-hover:shadow-xl transition-all duration-500"
+              >
+                <img
+                  :src="getImgUrl(item.cover, '400y225')"
+                  :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/40 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>
+                <p class="text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1">
+                  {{ item.artistName }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Loading More / No More -->
+          <div class="mt-12 py-8 border-t border-neutral-100 dark:border-neutral-800">
+            <div v-if="loadingMore" class="flex flex-col items-center gap-4">
+              <n-spin size="small" />
+              <span class="text-xs text-neutral-400 font-medium tracking-widest uppercase">
+                加载更多中...
+              </span>
+            </div>
+            <div v-if="!hasMore && !initLoading" class="text-center">
+              <span
+                class="text-xs text-neutral-400 font-medium tracking-widest uppercase opacity-50"
+              >
+                — 已加载全部内容 —
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </n-scrollbar>
 
@@ -70,7 +136,7 @@ import MvPlayer from '@/components/MvPlayer.vue';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/types/mv';
-import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { calculateAnimationDelay, formatNumber, getImgUrl } from '@/utils';
 
 defineOptions({
   name: 'Mv'
@@ -83,7 +149,7 @@ const initLoading = ref(false);
 const loadingMore = ref(false);
 const currentIndex = ref(0);
 const offset = ref(0);
-const limit = ref(42);
+const limit = ref(40); // 调整为40，方便4列布局 (10行)
 const hasMore = ref(true);
 
 const categories = [
@@ -105,11 +171,6 @@ watch(selectedCategory, async () => {
   await loadMvList();
 });
 
-const getAnimationDelay = (index: number) => {
-  const currentPageIndex = index % limit.value;
-  return setAnimationDelay(currentPageIndex, 30);
-};
-
 onMounted(async () => {
   await loadMvList();
 });
@@ -187,7 +248,7 @@ const loadMvList = async () => {
 const handleScroll = (e: Event) => {
   const target = e.target as Element;
   const { scrollTop, clientHeight, scrollHeight } = target;
-  const threshold = 100;
+  const threshold = 150;
 
   if (scrollHeight - (scrollTop + clientHeight) < threshold) {
     loadMvList();
@@ -198,107 +259,30 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
 </script>
 
 <style scoped lang="scss">
-.mv-list {
-  @apply h-full flex-1 flex flex-col overflow-hidden;
+.mv-list-page {
+  position: relative;
+}
 
-  &-title {
-    @apply text-xl font-bold pb-2;
-    @apply text-gray-900 dark:text-white;
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
   }
-
-  // 添加歌单分类样式
-  .play-list-type {
-    .title {
-      @apply text-lg font-bold mb-2;
-      @apply text-gray-900 dark:text-white;
-    }
-
-    .categories-wrapper {
-      @apply flex items-center py-2;
-      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;
-      }
-
-      &.active {
-        @apply bg-green-500 border-green-500 text-white;
-      }
-    }
-  }
-
-  &-content {
-    @apply grid gap-4 pb-28 mt-2 pr-4;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  }
-
-  .mv-item {
-    @apply p-2 rounded-lg;
-    @apply bg-light dark:bg-black;
-    @apply border border-gray-200 dark:border-gray-700;
-
-    &-img {
-      @apply rounded-lg overflow-hidden relative;
-      aspect-ratio: 16/9;
-      line-height: 0;
-
-      &:hover img {
-        @apply hover:scale-110 transition-all duration-300 ease-in-out object-top;
-      }
-
-      &-img {
-        @apply w-full h-full object-cover rounded-lg overflow-hidden;
-      }
-
-      .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-60;
-        opacity: 0;
-
-        i {
-          @apply text-4xl text-white;
-        }
-
-        .play-count {
-          @apply absolute top-2 right-2 text-sm;
-          @apply text-white text-opacity-90;
-        }
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-
-    &-title {
-      @apply mt-2 text-sm line-clamp-1;
-      @apply text-gray-900 dark:text-white;
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.loading-more {
-  @apply text-center py-4 col-span-full;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.no-more {
-  @apply text-center py-4 col-span-full;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.mobile {
-  .mv-list-content {
-    @apply pl-4 pr-4;
-  }
-  .categories-wrapper {
-    @apply pl-4;
+.mv-card {
+  &:hover {
+    .play-icon {
+      @apply opacity-100 scale-100;
+    }
   }
 }
 </style>
diff --git a/src/renderer/views/playlist/ImportPlaylist.vue b/src/renderer/views/playlist/ImportPlaylist.vue
index 252d5f1..89477be 100644
--- a/src/renderer/views/playlist/ImportPlaylist.vue
+++ b/src/renderer/views/playlist/ImportPlaylist.vue
@@ -1,214 +1,319 @@
 <template>
-  <div class="import-playlist-page">
-    <div class="import-header" :class="setAnimationClass('animate__fadeInLeft')">
-      <div class="import-header-left">
-        <h2>{{ t('comp.playlist.import.title') }}</h2>
-        <div class="import-desc">{{ t('comp.playlist.import.description') }}</div>
+  <div
+    class="h-full w-full bg-gray-50 dark:bg-black transition-colors duration-500 overflow-hidden flex flex-col relative"
+  >
+    <!-- 背景装饰 -->
+    <div
+      class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-primary/5 to-transparent pointer-events-none"
+    ></div>
+
+    <!-- 头部区域 -->
+    <div class="flex-shrink-0 z-10 px-6 pt-8 pb-4 relative">
+      <div class="max-w-5xl mx-auto w-full flex items-end justify-between">
+        <div>
+          <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-3">
+            <div
+              class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary"
+            >
+              <i class="ri-import-fill text-xl"></i>
+            </div>
+            {{ t('comp.playlist.import.title') }}
+          </h2>
+          <p class="text-base text-gray-500 dark:text-gray-400 ml-13">
+            {{ t('comp.playlist.import.description') }}
+          </p>
+        </div>
       </div>
     </div>
 
-    <div class="import-content" :class="setAnimationClass('animate__fadeInUp')">
-      <n-card class="import-card">
-        <n-tabs type="line" animated>
-          <!-- 链接导入 -->
-          <n-tab-pane name="link" :tab="t('comp.playlist.import.linkTab')">
-            <div class="tab-content">
-              <div class="link-inputs">
-                <div v-for="(link, index) in linkInputs" :key="index" class="link-row">
-                  <n-input
-                    v-model:value="link.value"
-                    :placeholder="t('comp.playlist.import.linkPlaceholder')"
-                    class="link-input"
-                  />
-                  <n-button
-                    quaternary
-                    circle
-                    type="error"
-                    @click="removeLinkRow(index)"
-                    v-if="linkInputs.length > 1"
-                  >
-                    <template #icon>
-                      <i class="iconfont ri-delete-bin-line"></i>
-                    </template>
-                  </n-button>
-                </div>
-                <div class="link-actions">
-                  <n-button @click="addLinkRow" secondary size="small">
-                    <template #icon>
-                      <i class="iconfont ri-add-line"></i>
-                    </template>
-                    {{ t('comp.playlist.import.addLinkButton') }}
-                  </n-button>
-                </div>
-              </div>
-              <div class="link-tips">
-                <p>{{ t('comp.playlist.import.linkTips') }}</p>
-                <ul>
-                  <li>{{ t('comp.playlist.import.linkTip1') }}</li>
-                  <li>{{ t('comp.playlist.import.linkTip2') }}</li>
-                  <li>{{ t('comp.playlist.import.linkTip3') }}</li>
-                </ul>
-              </div>
-              <div class="action-buttons">
-                <n-checkbox v-model:checked="importToStarPlaylist">
-                  {{ t('comp.playlist.import.importToStarPlaylist') }}
-                </n-checkbox>
-                <n-input
-                  v-if="!importToStarPlaylist"
-                  v-model:value="playlistName"
-                  :placeholder="t('comp.playlist.import.playlistNamePlaceholder')"
-                  class="playlist-name-input"
-                />
-                <n-button
-                  type="primary"
-                  :loading="importing"
-                  :disabled="!isLinkInputValid"
-                  @click="handleImportByLink"
-                >
-                  {{ t('comp.playlist.import.importButton') }}
-                </n-button>
-              </div>
+    <!-- 内容区域 -->
+    <n-scrollbar class="flex-1">
+      <div class="w-full max-w-5xl mx-auto p-6 pb-24">
+        <!-- 自定义 Tab 切换 -->
+        <div class="flex justify-center mb-8">
+          <div
+            class="bg-white dark:bg-white/5 p-1.5 rounded-2xl shadow-sm border border-gray-100 dark:border-white/10 flex gap-1 relative"
+          >
+            <div
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="relative z-10 px-6 py-2.5 rounded-xl text-sm font-medium cursor-pointer transition-all duration-300 flex items-center gap-2"
+              :class="
+                currentTab === tab.id
+                  ? 'text-white'
+                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+              "
+              @click="currentTab = tab.id"
+            >
+              <i :class="tab.icon"></i>
+              {{ tab.label }}
             </div>
-          </n-tab-pane>
 
-          <!-- 文字导入 -->
-          <n-tab-pane name="text" :tab="t('comp.playlist.import.textTab')">
-            <div class="tab-content">
-              <n-input
-                v-model:value="textInput"
-                type="textarea"
-                :placeholder="t('comp.playlist.import.textPlaceholder')"
-                :rows="6"
-              />
-              <div class="text-tips">
-                <p>{{ t('comp.playlist.import.textTips') }}</p>
-                <p class="text-format">{{ t('comp.playlist.import.textFormat') }}</p>
-              </div>
-              <div class="action-buttons">
-                <n-checkbox v-model:checked="importToStarPlaylist">
-                  {{ t('comp.playlist.import.importToStarPlaylist') }}
-                </n-checkbox>
-                <n-input
-                  v-if="!importToStarPlaylist"
-                  v-model:value="playlistName"
-                  :placeholder="t('comp.playlist.import.playlistNamePlaceholder')"
-                  class="playlist-name-input"
-                />
-                <n-button
-                  type="primary"
-                  :loading="importing"
-                  :disabled="!textInput.trim()"
-                  @click="handleImportByText"
-                >
-                  {{ t('comp.playlist.import.importButton') }}
-                </n-button>
-              </div>
-            </div>
-          </n-tab-pane>
-
-          <!-- 元数据导入 -->
-          <n-tab-pane name="local" :tab="t('comp.playlist.import.localTab')">
-            <div class="tab-content">
-              <div class="metadata-inputs">
-                <div v-for="(item, index) in localMetadata" :key="index" class="metadata-row">
-                  <n-input
-                    v-model:value="item.name"
-                    :placeholder="t('comp.playlist.import.songNamePlaceholder')"
-                    class="metadata-input"
-                  />
-                  <n-input
-                    v-model:value="item.artist"
-                    :placeholder="t('comp.playlist.import.artistNamePlaceholder')"
-                    class="metadata-input"
-                  />
-                  <n-input
-                    v-model:value="item.album"
-                    :placeholder="t('comp.playlist.import.albumNamePlaceholder')"
-                    class="metadata-input"
-                  />
-                  <n-button
-                    quaternary
-                    circle
-                    type="error"
-                    @click="removeMetadataRow(index)"
-                    v-if="localMetadata.length > 1"
-                  >
-                    <template #icon>
-                      <i class="iconfont ri-delete-bin-line"></i>
-                    </template>
-                  </n-button>
-                </div>
-                <div class="metadata-actions">
-                  <n-button @click="addMetadataRow" secondary size="small">
-                    <template #icon>
-                      <i class="iconfont ri-add-line"></i>
-                    </template>
-                    {{ t('comp.playlist.import.addSongButton') }}
-                  </n-button>
-                </div>
-              </div>
-              <div class="local-tips">
-                <p>{{ t('comp.playlist.import.localTips') }}</p>
-              </div>
-              <div class="action-buttons">
-                <n-checkbox v-model:checked="importToStarPlaylist">
-                  {{ t('comp.playlist.import.importToStarPlaylist') }}
-                </n-checkbox>
-                <n-input
-                  v-if="!importToStarPlaylist"
-                  v-model:value="playlistName"
-                  :placeholder="t('comp.playlist.import.playlistNamePlaceholder')"
-                  class="playlist-name-input"
-                />
-                <n-button
-                  type="primary"
-                  :loading="importing"
-                  :disabled="!isLocalMetadataValid"
-                  @click="handleImportByLocal"
-                >
-                  {{ t('comp.playlist.import.importButton') }}
-                </n-button>
-              </div>
-            </div>
-          </n-tab-pane>
-        </n-tabs>
-      </n-card>
-
-      <!-- 导入状态 -->
-      <n-card v-if="taskId" class="import-status-card">
-        <div class="status-header">
-          <h3>{{ t('comp.playlist.import.importStatus') }}</h3>
-          <n-button text @click="refreshStatus">
-            <template #icon>
-              <i class="iconfont ri-refresh-line"></i>
-            </template>
-            {{ t('comp.playlist.import.refresh') }}
-          </n-button>
+            <!-- 滑动背景 -->
+            <div
+              class="absolute top-1.5 bottom-1.5 bg-primary rounded-xl shadow-md transition-all duration-300 ease-out"
+              :style="tabIndicatorStyle"
+            ></div>
+          </div>
         </div>
-        <n-spin :show="checkingStatus">
-          <div class="status-content">
-            <div class="status-item">
-              <span class="status-label">{{ t('comp.playlist.import.taskId') }}:</span>
-              <span class="status-value">{{ taskId }}</span>
+
+        <!-- 主内容卡片 -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+          <!-- 左侧：输入区域 -->
+          <div class="lg:col-span-2 space-y-6">
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-3xl border border-gray-100 dark:border-gray-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-none overflow-hidden p-1 transition-all duration-300"
+            >
+              <!-- 链接导入内容 -->
+              <div v-if="currentTab === 'link'" class="p-6 space-y-6 animate-fade-in">
+                <div class="space-y-4">
+                  <div v-for="(link, index) in linkInputs" :key="index" class="group relative">
+                    <input
+                      v-model="link.value"
+                      :placeholder="t('comp.playlist.import.linkPlaceholder')"
+                      class="w-full bg-gray-50 dark:bg-white/5 border-2 border-transparent focus:border-primary/50 focus:bg-white dark:focus:bg-black rounded-2xl px-5 py-4 outline-none transition-all duration-300 text-gray-900 dark:text-white placeholder-gray-400"
+                    />
+                    <button
+                      v-if="linkInputs.length > 1"
+                      class="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all opacity-0 group-hover:opacity-100"
+                      @click="removeLinkRow(index)"
+                    >
+                      <i class="ri-delete-bin-line"></i>
+                    </button>
+                  </div>
+
+                  <button
+                    class="w-full py-3 rounded-2xl border-2 border-dashed border-gray-200 dark:border-gray-700 text-gray-500 hover:text-primary hover:border-primary/50 hover:bg-primary/5 transition-all duration-300 flex items-center justify-center gap-2 font-medium"
+                    @click="addLinkRow"
+                  >
+                    <i class="ri-add-line text-lg"></i>
+                    {{ t('comp.playlist.import.addLinkButton') }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- 文字导入内容 -->
+              <div v-if="currentTab === 'text'" class="p-6 space-y-6 animate-fade-in">
+                <textarea
+                  v-model="textInput"
+                  :placeholder="t('comp.playlist.import.textPlaceholder')"
+                  rows="12"
+                  class="w-full bg-gray-50 dark:bg-white/5 border-2 border-transparent focus:border-primary/50 focus:bg-white dark:focus:bg-black rounded-2xl px-5 py-4 outline-none transition-all duration-300 text-gray-900 dark:text-white placeholder-gray-400 font-mono text-sm resize-none"
+                ></textarea>
+                <div class="flex items-center gap-2 text-xs text-gray-400 px-2">
+                  <i class="ri-information-line"></i>
+                  {{ t('comp.playlist.import.textFormat') }}
+                </div>
+              </div>
+
+              <!-- 元数据导入内容 -->
+              <div v-if="currentTab === 'local'" class="p-6 space-y-6 animate-fade-in">
+                <div class="space-y-3">
+                  <div
+                    v-for="(item, index) in localMetadata"
+                    :key="index"
+                    class="flex gap-3 items-center group"
+                  >
+                    <div class="w-6 text-center text-xs text-gray-300 font-mono">
+                      {{ index + 1 }}
+                    </div>
+                    <input
+                      v-model="item.name"
+                      :placeholder="t('comp.playlist.import.songNamePlaceholder')"
+                      class="flex-1 bg-gray-50 dark:bg-white/5 border-transparent focus:border-primary/50 rounded-xl px-4 py-2.5 outline-none text-sm transition-all border-2"
+                    />
+                    <input
+                      v-model="item.artist"
+                      :placeholder="t('comp.playlist.import.artistNamePlaceholder')"
+                      class="flex-1 bg-gray-50 dark:bg-white/5 border-transparent focus:border-primary/50 rounded-xl px-4 py-2.5 outline-none text-sm transition-all border-2"
+                    />
+                    <input
+                      v-model="item.album"
+                      :placeholder="t('comp.playlist.import.albumNamePlaceholder')"
+                      class="flex-1 bg-gray-50 dark:bg-white/5 border-transparent focus:border-primary/50 rounded-xl px-4 py-2.5 outline-none text-sm transition-all border-2"
+                    />
+                    <button
+                      v-if="localMetadata.length > 1"
+                      class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all opacity-0 group-hover:opacity-100"
+                      @click="removeMetadataRow(index)"
+                    >
+                      <i class="ri-delete-bin-line"></i>
+                    </button>
+                  </div>
+                  <button
+                    class="ml-9 px-4 py-2 rounded-xl text-sm font-medium text-primary hover:bg-primary/10 transition-colors flex items-center gap-1"
+                    @click="addMetadataRow"
+                  >
+                    <i class="ri-add-line"></i>
+                    {{ t('comp.playlist.import.addSongButton') }}
+                  </button>
+                </div>
+              </div>
             </div>
-            <div class="status-item">
-              <span class="status-label">{{ t('comp.playlist.import.status') }}:</span>
-              <span class="status-value" :class="`status-${taskStatus}`">
-                {{ getStatusText(taskStatus) }}
-              </span>
-            </div>
-            <div v-if="taskStatus === 'success'" class="status-item">
-              <span class="status-label">{{ t('comp.playlist.import.successCount') }}:</span>
-              <span class="status-value success-count">{{ successCount }}</span>
-            </div>
-            <div v-if="taskStatus === 'failed'" class="status-item">
-              <span class="status-label">{{ t('comp.playlist.import.failReason') }}:</span>
-              <span class="status-value fail-reason">{{ failReason }}</span>
+
+            <!-- 帮助提示 (根据 Tab 变化) -->
+            <div
+              class="bg-blue-50/50 dark:bg-blue-900/10 rounded-2xl p-5 border border-blue-100 dark:border-blue-900/20"
+            >
+              <div class="flex gap-3">
+                <div class="mt-0.5 text-blue-500">
+                  <i class="ri-lightbulb-flash-line text-lg"></i>
+                </div>
+                <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <div class="font-medium text-gray-900 dark:text-gray-200 mb-1">
+                    {{ t('comp.playlist.import.linkTips') }}
+                  </div>
+                  <ul class="list-disc list-inside opacity-80 space-y-1">
+                    <li v-if="currentTab === 'link'">{{ t('comp.playlist.import.linkTip1') }}</li>
+                    <li v-if="currentTab === 'link'">{{ t('comp.playlist.import.linkTip2') }}</li>
+                    <li v-if="currentTab === 'link'">{{ t('comp.playlist.import.linkTip3') }}</li>
+                    <li v-if="currentTab === 'text'">{{ t('comp.playlist.import.textTips') }}</li>
+                    <li v-if="currentTab === 'local'">{{ t('comp.playlist.import.localTips') }}</li>
+                  </ul>
+                </div>
+              </div>
             </div>
           </div>
-        </n-spin>
-      </n-card>
-    </div>
+
+          <!-- 右侧：选项与操作 -->
+          <div class="space-y-6">
+            <!-- 选项卡片 -->
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-3xl border border-gray-100 dark:border-gray-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-none p-6"
+            >
+              <h3 class="font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                <i class="ri-settings-4-line text-primary"></i>
+                {{ t('comp.playlist.import.options') }}
+              </h3>
+
+              <div class="space-y-4">
+                <!-- 导入到星标歌单开关 -->
+                <div
+                  class="flex items-center justify-between p-4 rounded-2xl cursor-pointer transition-all border-2"
+                  :class="
+                    importToStarPlaylist
+                      ? 'bg-primary/5 border-primary/50'
+                      : 'bg-gray-50 dark:bg-white/5 border-transparent hover:bg-gray-100 dark:hover:bg-white/10'
+                  "
+                  @click="importToStarPlaylist = !importToStarPlaylist"
+                >
+                  <div class="flex items-center gap-3">
+                    <div
+                      class="w-10 h-10 rounded-full bg-white dark:bg-white/10 flex items-center justify-center text-lg"
+                      :class="importToStarPlaylist ? 'text-primary' : 'text-gray-400'"
+                    >
+                      <i class="ri-heart-3-fill" v-if="importToStarPlaylist"></i>
+                      <i class="ri-heart-3-line" v-else></i>
+                    </div>
+                    <span class="font-medium text-sm">{{
+                      t('comp.playlist.import.importToStarPlaylist')
+                    }}</span>
+                  </div>
+                  <div
+                    class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors"
+                    :class="
+                      importToStarPlaylist
+                        ? 'border-primary bg-primary'
+                        : 'border-gray-300 dark:border-gray-600'
+                    "
+                  >
+                    <i class="ri-check-line text-white text-xs" v-show="importToStarPlaylist"></i>
+                  </div>
+                </div>
+
+                <!-- 自定义歌单名 -->
+                <div
+                  class="relative group"
+                  :class="{ 'opacity-50 pointer-events-none': importToStarPlaylist }"
+                >
+                  <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                    <i class="ri-play-list-line text-gray-400"></i>
+                  </div>
+                  <input
+                    v-model="playlistName"
+                    :placeholder="t('comp.playlist.import.playlistNamePlaceholder')"
+                    class="w-full bg-gray-50 dark:bg-white/5 border-2 border-transparent focus:border-primary/50 rounded-2xl pl-11 pr-4 py-3.5 outline-none transition-all text-sm text-gray-900 dark:text-white"
+                  />
+                </div>
+              </div>
+
+              <!-- 主操作按钮 -->
+              <button
+                class="w-full mt-6 py-4 rounded-2xl bg-primary text-white font-bold text-lg shadow-lg shadow-primary/30 hover:shadow-primary/40 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none transition-all duration-300 flex items-center justify-center gap-2"
+                :disabled="isImportDisabled"
+                @click="handleImport"
+              >
+                <i class="ri-loader-4-line animate-spin text-xl" v-if="importing"></i>
+                <i class="ri-download-cloud-2-line text-xl" v-else></i>
+                {{
+                  importing
+                    ? t('comp.playlist.import.statusProcessing')
+                    : t('comp.playlist.import.importButton')
+                }}
+              </button>
+            </div>
+
+            <!-- 状态反馈 -->
+            <div v-if="taskId" class="animate-fade-in-up">
+              <div
+                class="bg-white dark:bg-neutral-900 rounded-3xl border border-gray-100 dark:border-gray-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-none p-6"
+              >
+                <div class="flex items-center justify-between mb-4">
+                  <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                    {{ t('comp.playlist.import.importStatus') }}
+                  </h3>
+                  <button class="text-xs text-primary hover:underline" @click="refreshStatus">
+                    {{ t('comp.playlist.import.refresh') }}
+                  </button>
+                </div>
+
+                <div class="relative pt-2">
+                  <div class="flex items-center gap-4 mb-4">
+                    <div
+                      class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-colors"
+                      :class="{
+                        'bg-blue-50 text-blue-500':
+                          taskStatus === 'processing' || taskStatus === 'pending',
+                        'bg-green-50 text-green-500': taskStatus === 'success',
+                        'bg-red-50 text-red-500': taskStatus === 'failed'
+                      }"
+                    >
+                      <i
+                        class="ri-loader-4-line animate-spin"
+                        v-if="taskStatus === 'processing' || taskStatus === 'pending'"
+                      ></i>
+                      <i class="ri-check-line" v-else-if="taskStatus === 'success'"></i>
+                      <i class="ri-close-line" v-else-if="taskStatus === 'failed'"></i>
+                    </div>
+                    <div>
+                      <div class="font-bold text-lg text-gray-900 dark:text-white">
+                        {{ getStatusText(taskStatus) }}
+                      </div>
+                      <div class="text-xs text-gray-400 font-mono">{{ taskId }}</div>
+                    </div>
+                  </div>
+
+                  <div
+                    v-if="taskStatus === 'success'"
+                    class="bg-green-50 dark:bg-green-900/10 rounded-xl p-3 text-green-700 dark:text-green-400 text-sm flex justify-between"
+                  >
+                    <span>{{ t('comp.playlist.import.successCount') }}</span>
+                    <span class="font-bold">{{ successCount }}</span>
+                  </div>
+
+                  <div
+                    v-if="taskStatus === 'failed'"
+                    class="bg-red-50 dark:bg-red-900/10 rounded-xl p-3 text-red-700 dark:text-red-400 text-sm"
+                  >
+                    {{ failReason }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-scrollbar>
   </div>
 </template>
 
@@ -218,11 +323,29 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getImportTaskStatus, importPlaylist } from '@/api/playlist';
-import { setAnimationClass } from '@/utils';
 
 const { t } = useI18n();
 const message = useMessage();
 
+// Tab 配置
+const currentTab = ref('link');
+const tabs = computed(() => [
+  { id: 'link', label: t('comp.playlist.import.linkTab'), icon: 'ri-link' },
+  { id: 'text', label: t('comp.playlist.import.textTab'), icon: 'ri-text' },
+  { id: 'local', label: t('comp.playlist.import.localTab'), icon: 'ri-file-list-3-line' }
+]);
+
+// 计算 Tab 指示器位置
+const tabIndicatorStyle = computed(() => {
+  const index = tabs.value.findIndex((tab) => tab.id === currentTab.value);
+  // 假设每个 tab 宽度大概一致，这里简单计算百分比
+  // 在真实项目中可能需要获取 DOM 元素宽度
+  return {
+    left: `calc(${(100 / 3) * index}% + 6px)`,
+    width: `calc(${100 / 3}% - 12px)`
+  };
+});
+
 // 表单数据
 const linkInputs = ref([{ value: '' }]);
 const textInput = ref('');
@@ -239,11 +362,6 @@ const removeLinkRow = (index: number) => {
   linkInputs.value.splice(index, 1);
 };
 
-// 验证链接是否有效
-const isLinkInputValid = computed(() => {
-  return linkInputs.value.some((item) => item.value.trim() !== '');
-});
-
 // 元数据相关函数
 const addMetadataRow = () => {
   localMetadata.value.push({ name: '', artist: '', album: '' });
@@ -253,12 +371,21 @@ const removeMetadataRow = (index: number) => {
   localMetadata.value.splice(index, 1);
 };
 
-// 验证元数据是否有效
-const isLocalMetadataValid = computed(() => {
-  return localMetadata.value.some((item) => item.name.trim() !== '');
+// 验证逻辑
+const isLinkInputValid = computed(() => linkInputs.value.some((item) => item.value.trim() !== ''));
+const isLocalMetadataValid = computed(() =>
+  localMetadata.value.some((item) => item.name.trim() !== '')
+);
+
+const isImportDisabled = computed(() => {
+  if (importing.value) return true;
+  if (currentTab.value === 'link') return !isLinkInputValid.value;
+  if (currentTab.value === 'text') return !textInput.value.trim();
+  if (currentTab.value === 'local') return !isLocalMetadataValid.value;
+  return true;
 });
 
-// 导入状态
+// 统一导入处理
 const importing = ref(false);
 const taskId = ref('');
 const taskStatus = ref('');
@@ -267,26 +394,24 @@ const failReason = ref('');
 const checkingStatus = ref(false);
 const statusCheckInterval = ref<number | null>(null);
 
-// 处理链接导入
-const handleImportByLink = async () => {
-  if (!isLinkInputValid.value) {
-    message.warning(t('comp.playlist.import.emptyLinkWarning'));
-    return;
-  }
+const handleImport = async () => {
+  if (isImportDisabled.value) return;
 
   try {
     importing.value = true;
+    let params: any = {};
 
-    // 处理链接格式
-    const links = linkInputs.value
-      .filter((link) => link.value.trim())
-      .map((link) => link.value.trim());
-
-    const encodedLinks = JSON.stringify(links);
-
-    const params: any = {
-      link: encodedLinks
-    };
+    if (currentTab.value === 'link') {
+      const links = linkInputs.value
+        .filter((link) => link.value.trim())
+        .map((link) => link.value.trim());
+      params.link = JSON.stringify(links);
+    } else if (currentTab.value === 'text') {
+      params.text = encodeURIComponent(textInput.value);
+    } else if (currentTab.value === 'local') {
+      const filteredData = localMetadata.value.filter((item) => item.name.trim() !== '');
+      params.local = JSON.stringify(filteredData);
+    }
 
     if (importToStarPlaylist.value) {
       params.importStarPlaylist = true;
@@ -311,140 +436,34 @@ const handleImportByLink = async () => {
   }
 };
 
-// 处理文字导入
-const handleImportByText = async () => {
-  if (!textInput.value.trim()) {
-    message.warning(t('comp.playlist.import.emptyTextWarning'));
-    return;
-  }
-
-  try {
-    importing.value = true;
-
-    const encodedText = encodeURIComponent(textInput.value);
-
-    const params: any = {
-      text: encodedText
-    };
-
-    if (importToStarPlaylist.value) {
-      params.importStarPlaylist = true;
-    } else if (playlistName.value) {
-      params.playlistName = playlistName.value;
-    }
-
-    const res = await importPlaylist(params);
-
-    if (res.data.code === 200) {
-      message.success(t('comp.playlist.import.importSuccess'));
-      taskId.value = res.data.data.taskId;
-      startStatusCheck();
-    } else {
-      message.error(res.data.message || t('comp.playlist.import.importFailed'));
-    }
-  } catch (error) {
-    console.error('导入歌单失败:', error);
-    message.error(t('comp.playlist.import.importFailed'));
-  } finally {
-    importing.value = false;
-  }
-};
-
-// 处理元数据导入
-const handleImportByLocal = async () => {
-  if (!isLocalMetadataValid.value) {
-    message.warning(t('comp.playlist.import.emptyLocalWarning'));
-    return;
-  }
-
-  try {
-    importing.value = true;
-
-    // 过滤掉空的行
-    const filteredData = localMetadata.value.filter((item) => item.name.trim() !== '');
-
-    const encodedLocal = JSON.stringify(filteredData);
-
-    const params: any = {
-      local: encodedLocal
-    };
-
-    if (importToStarPlaylist.value) {
-      params.importStarPlaylist = true;
-    } else if (playlistName.value) {
-      params.playlistName = playlistName.value;
-    }
-
-    const res = await importPlaylist(params);
-
-    if (res.data.code === 200) {
-      message.success(t('comp.playlist.import.importSuccess'));
-      taskId.value = res.data.data.taskId;
-      startStatusCheck();
-    } else {
-      message.error(res.data.message || t('comp.playlist.import.importFailed'));
-    }
-  } catch (error) {
-    console.error('导入歌单失败:', error);
-    message.error(t('comp.playlist.import.importFailed'));
-  } finally {
-    importing.value = false;
-  }
-};
-
-// 开始检查任务状态
+// 任务状态检查逻辑 (复用之前的逻辑)
 const startStatusCheck = () => {
-  // 清除之前的定时器
-  if (statusCheckInterval.value) {
-    clearInterval(statusCheckInterval.value);
-  }
-
-  // 立即检查一次
+  if (statusCheckInterval.value) clearInterval(statusCheckInterval.value);
   checkTaskStatus();
-
-  // 设置定时检查
-  statusCheckInterval.value = window.setInterval(() => {
-    checkTaskStatus();
-  }, 3000); // 每3秒检查一次
+  statusCheckInterval.value = window.setInterval(checkTaskStatus, 3000);
 };
 
-// 检查任务状态
 const checkTaskStatus = async () => {
   if (!taskId.value) return;
-
   try {
     checkingStatus.value = true;
     const res = await getImportTaskStatus(taskId.value);
+    if (res.data.code === 200 && res.data.data.tasks?.length > 0) {
+      const taskData = res.data.data.tasks[0];
+      const statusMap: Record<string, string> = {
+        PENDING: 'pending',
+        PROCESSING: 'processing',
+        COMPLETE: 'success',
+        FAILED: 'failed'
+      };
+      taskStatus.value = statusMap[taskData.status] || 'pending';
 
-    if (res.data.code === 200) {
-      // 新的API返回格式处理
-      if (res.data.data.tasks && res.data.data.tasks.length > 0) {
-        const taskData = res.data.data.tasks[0];
-        // 将API返回的status映射到组件内部使用的taskStatus
-        const statusMap: Record<string, string> = {
-          PENDING: 'pending',
-          PROCESSING: 'processing',
-          COMPLETE: 'success',
-          FAILED: 'failed'
-        };
-
-        taskStatus.value = statusMap[taskData.status] || 'pending';
-
-        if (taskStatus.value === 'success') {
-          successCount.value = taskData.succCount || 0;
-          // 成功后停止检查
-          if (statusCheckInterval.value) {
-            clearInterval(statusCheckInterval.value);
-            statusCheckInterval.value = null;
-          }
-        } else if (taskStatus.value === 'failed') {
-          failReason.value = taskData.msg || t('comp.playlist.import.unknownError');
-          // 失败后停止检查
-          if (statusCheckInterval.value) {
-            clearInterval(statusCheckInterval.value);
-            statusCheckInterval.value = null;
-          }
-        }
+      if (taskStatus.value === 'success') {
+        successCount.value = taskData.succCount || 0;
+        if (statusCheckInterval.value) clearInterval(statusCheckInterval.value);
+      } else if (taskStatus.value === 'failed') {
+        failReason.value = taskData.msg || t('comp.playlist.import.unknownError');
+        if (statusCheckInterval.value) clearInterval(statusCheckInterval.value);
       }
     }
   } catch (error) {
@@ -454,12 +473,8 @@ const checkTaskStatus = async () => {
   }
 };
 
-// 手动刷新状态
-const refreshStatus = () => {
-  checkTaskStatus();
-};
+const refreshStatus = () => checkTaskStatus();
 
-// 获取状态文本
 const getStatusText = (status: string) => {
   switch (status) {
     case 'pending':
@@ -476,157 +491,40 @@ const getStatusText = (status: string) => {
 };
 
 onMounted(() => {
-  // 如果有任务ID，开始检查状态
-  if (taskId.value) {
-    startStatusCheck();
-  }
+  if (taskId.value) startStatusCheck();
 });
 
 onUnmounted(() => {
-  // 清除定时器
-  if (statusCheckInterval.value) {
-    clearInterval(statusCheckInterval.value);
-    statusCheckInterval.value = null;
-  }
+  if (statusCheckInterval.value) clearInterval(statusCheckInterval.value);
 });
 </script>
 
 <style lang="scss" scoped>
-.import-playlist-page {
-  @apply h-full overflow-auto pr-4;
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out;
 }
 
-.import-header {
-  @apply flex justify-between items-center mb-6;
+.animate-fade-in-up {
+  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
 
-  .import-header-left {
-    h2 {
-      @apply text-2xl font-bold text-gray-900 dark:text-white mb-2;
-    }
-
-    .import-desc {
-      @apply text-sm text-gray-500 dark:text-gray-400;
-    }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }
 
-.import-content {
-  @apply space-y-6;
-}
-
-.import-card {
-  @apply rounded-lg;
-
-  .tab-content {
-    @apply mt-4 space-y-4;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  .link-tips,
-  .text-tips,
-  .local-tips {
-    @apply text-sm text-gray-500 dark:text-gray-400;
-
-    ul {
-      @apply list-disc pl-5 mt-2;
-    }
-  }
-
-  .text-format,
-  .local-format {
-    @apply mt-2 font-medium;
-  }
-
-  .code-example {
-    @apply mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm overflow-auto;
-  }
-
-  .link-inputs {
-    @apply space-y-3;
-
-    .link-row {
-      @apply flex items-center space-x-2;
-
-      .link-input {
-        @apply flex-1;
-      }
-    }
-
-    .link-actions {
-      @apply mt-3 flex justify-end;
-    }
-  }
-
-  .metadata-inputs {
-    @apply space-y-3;
-
-    .metadata-row {
-      @apply flex items-center space-x-2;
-
-      .metadata-input {
-        @apply flex-1;
-      }
-    }
-
-    .metadata-actions {
-      @apply mt-3 flex justify-end;
-    }
-  }
-
-  .action-buttons {
-    @apply flex items-center space-x-4 mt-6;
-
-    .playlist-name-input {
-      @apply max-w-xs;
-    }
-  }
-}
-
-.import-status-card {
-  @apply rounded-lg;
-
-  .status-header {
-    @apply flex justify-between items-center mb-4;
-
-    h3 {
-      @apply text-lg font-medium text-gray-900 dark:text-white;
-    }
-  }
-
-  .status-content {
-    @apply space-y-3;
-  }
-
-  .status-item {
-    @apply flex items-center;
-
-    .status-label {
-      @apply text-gray-500 dark:text-gray-400 w-24;
-    }
-
-    .status-value {
-      @apply font-medium;
-    }
-
-    .status-pending,
-    .status-processing {
-      @apply text-blue-500;
-    }
-
-    .status-success {
-      @apply text-green-500;
-    }
-
-    .status-failed {
-      @apply text-red-500;
-    }
-
-    .success-count {
-      @apply text-green-500;
-    }
-
-    .fail-reason {
-      @apply text-red-500;
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 </style>
diff --git a/src/renderer/views/toplist/index.vue b/src/renderer/views/toplist/index.vue
index d738249..5e10dfe 100644
--- a/src/renderer/views/toplist/index.vue
+++ b/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>