From ae20f78ec0331257e6e8be73dd1509709d04184a Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 8 Feb 2026 01:39:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 src/renderer/App.vue                          |   3 +-
 src/renderer/components/EQControl.vue         | 127 +--
 src/renderer/components/MusicList.vue         | 729 ----------------
 .../components/common/CategorySelector.vue    |   5 +-
 .../components/common/PlaylistDrawer.vue      | 309 +++----
 .../components/common/UpdateModal.vue         | 797 ++++++++----------
 src/renderer/index.css                        |  67 +-
 src/renderer/views/album/index.vue            |   2 +-
 src/renderer/views/artist/detail.vue          |  10 +-
 src/renderer/views/download/DownloadPage.vue  |   6 +-
 .../views/historyAndFavorite/index.vue        |   2 +-
 .../views/home/components/HomeArtists.vue     |  15 +-
 .../views/home/components/HomeCard.vue        |   4 -
 .../home/components/HomeDailyRecommend.vue    |   7 +-
 .../views/home/components/HomeHero.vue        |   6 +-
 .../views/home/components/HomeNewSongs.vue    |   7 +-
 .../home/components/HomePrivateContent.vue    |   7 +-
 src/renderer/views/home/index.vue             |   2 +-
 src/renderer/views/list/index.vue             |   2 +-
 src/renderer/views/local-music/index.vue      |   8 +-
 src/renderer/views/music/MusicListPage.vue    |   6 +-
 src/renderer/views/mv/index.vue               |   2 +-
 .../views/playlist/ImportPlaylist.vue         |   2 +-
 src/renderer/views/podcast/index.vue          |   2 +-
 src/renderer/views/podcast/radio.vue          |   6 +-
 src/renderer/views/search/SearchResult.vue    |   6 +-
 src/renderer/views/search/index.vue           |   2 +-
 src/renderer/views/set/index.vue              |   4 +-
 src/renderer/views/toplist/index.vue          |   2 +-
 src/renderer/views/user/detail.vue            | 585 ++++++-------
 src/renderer/views/user/followers.vue         | 287 +++----
 src/renderer/views/user/follows.vue           | 285 +++----
 src/renderer/views/user/index.vue             |   3 +-
 34 files changed, 1201 insertions(+), 2107 deletions(-)
 delete mode 100644 src/renderer/components/MusicList.vue

diff --git a/.gitignore b/.gitignore
index 5f37f2c..2bc1e26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,6 +33,7 @@ android/app/release
 .windsurf
 .agent
 .claude
+.kiro
 CLAUDE.md
 AGENTS.md
 .sisyphus
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index f0438b2..58889fc 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" :class="{ mobile: isMobile, noElectron: !isElectron }">
+  <div class="app-container h-full w-full" :class="{ mobile: isMobile, noElectron: !isElectron }">
     <n-config-provider :theme="theme === 'dark' ? darkTheme : lightTheme">
       <n-dialog-provider>
         <n-message-provider>
@@ -177,7 +177,6 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .app-container {
-  @apply h-full w-full;
   user-select: none;
 }
 
diff --git a/src/renderer/components/EQControl.vue b/src/renderer/components/EQControl.vue
index 3874332..a2921e2 100644
--- a/src/renderer/components/EQControl.vue
+++ b/src/renderer/components/EQControl.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="eq-control">
-    <div class="eq-header">
-      <h3>
+  <div class="eq-control p-6 rounded-lg bg-gray-100 dark:bg-gray-900 w-full max-w-[700px]">
+    <div class="eq-header flex justify-between items-center mb-4">
+      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
         {{ t('player.eq.title') }}
         <n-tag type="warning" size="small" round v-if="!isElectron">
           桌面版可用，网页端不支持
@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div class="eq-presets">
+    <div class="eq-presets mb-2 relative h-10">
       <n-scrollbar x-scrollable>
         <n-space :size="6" :wrap="false">
           <n-tag
@@ -34,9 +34,19 @@
       </n-scrollbar>
     </div>
 
-    <div class="eq-sliders">
-      <div v-for="freq in frequencies" :key="freq" class="eq-slider">
-        <div class="freq-label">{{ formatFreq(freq) }}</div>
+    <div
+      class="eq-sliders flex justify-between items-end bg-gray-50 dark:bg-gray-800 gap-1 rounded-lg p-2 h-[300px]"
+    >
+      <div
+        v-for="freq in frequencies"
+        :key="freq"
+        class="eq-slider flex flex-col items-center w-[45px] h-full"
+      >
+        <div
+          class="freq-label text-xs font-medium text-center text-gray-600 dark:text-gray-400 whitespace-nowrap m-2 h-5"
+        >
+          {{ formatFreq(freq) }}
+        </div>
         <n-slider
           v-model:value="eqValues[freq.toString()]"
           :min="-12"
@@ -45,8 +55,13 @@
           vertical
           :disabled="!isEnabled"
           @update:value="updateEQ(freq.toString(), $event)"
+          class="flex-1 my-3 min-h-[180px]"
         />
-        <div class="gain-value">{{ eqValues[freq.toString()] }}dB</div>
+        <div
+          class="gain-value text-xs font-medium text-center text-gray-600 dark:text-gray-400 whitespace-nowrap my-1 h-4"
+        >
+          {{ eqValues[freq.toString()] }}dB
+        </div>
       </div>
     </div>
   </div>
@@ -267,91 +282,39 @@ const formatFreq = (freq: number) => {
 </script>
 
 <style lang="scss" scoped>
-.eq-control {
-  @apply p-6 rounded-lg;
-  @apply bg-light dark:bg-dark;
-  width: 100%;
-  max-width: 700px;
+:deep(.n-scrollbar) {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 
-  .eq-header {
-    @apply flex justify-between items-center mb-4;
+:deep(.n-tag) {
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
 
-    h3 {
-      @apply text-xl font-semibold;
-      @apply text-gray-800 dark:text-gray-200;
-    }
+  &:hover {
+    transform: translateY(-2px);
   }
+}
 
-  .eq-presets {
-    @apply mb-2 relative;
-    height: 40px;
-
-    :deep(.n-scrollbar) {
-      @apply -mx-2 px-2;
-    }
-
-    :deep(.n-tag) {
-      @apply cursor-pointer transition-all duration-200;
-      text-align: center;
-
-      &:hover {
-        transform: translateY(-2px);
-      }
-    }
-
-    :deep(.n-space) {
-      flex-wrap: nowrap;
-      padding: 4px 0;
-    }
-  }
-
-  .eq-sliders {
-    @apply flex justify-between items-end;
-    @apply bg-gray-50 dark:bg-gray-800 gap-1;
-    @apply rounded-lg p-2;
-    height: 300px;
-
-    .eq-slider {
-      @apply flex flex-col items-center;
-      width: 45px;
-      height: 100%;
-
-      .n-slider {
-        flex: 1;
-        margin: 12px 0;
-        min-height: 180px;
-      }
-
-      .freq-label {
-        @apply text-xs font-medium text-center;
-        @apply text-gray-600 dark:text-gray-400;
-        white-space: nowrap;
-        margin: 8px 0;
-        height: 20px;
-      }
-
-      .gain-value {
-        @apply text-xs font-medium text-center;
-        @apply text-gray-600 dark:text-gray-400;
-        white-space: nowrap;
-        margin: 4px 0;
-        height: 16px;
-      }
-    }
-  }
+:deep(.n-space) {
+  flex-wrap: nowrap;
+  padding: 4px 0;
 }
 
 :deep(.n-slider) {
   --n-rail-height: 4px;
-  --n-rail-color: theme('colors.gray.200');
-  --n-rail-color-hover: theme('colors.gray.300');
-  --n-fill-color: theme('colors.green.500');
-  --n-fill-color-hover: theme('colors.green.600');
-  --n-handle-color: theme('colors.green.500');
+  --n-rail-color: #e5e7eb;
+  --n-rail-color-hover: #d1d5db;
+  --n-fill-color: #22c55e;
+  --n-fill-color-hover: #16a34a;
+  --n-handle-color: #22c55e;
   --n-handle-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
   .n-slider-handle {
-    @apply transition-all duration-200;
+    transition: all 0.2s;
     &:hover {
       transform: scale(1.2);
     }
diff --git a/src/renderer/components/MusicList.vue b/src/renderer/components/MusicList.vue
deleted file mode 100644
index 2e263c9..0000000
--- a/src/renderer/components/MusicList.vue
+++ /dev/null
@@ -1,729 +0,0 @@
-<template>
-  <n-drawer
-    :show="show"
-    :height="isMobile ? '100%' : '80%'"
-    placement="bottom"
-    block-scroll
-    mask-closable
-    :style="{ backgroundColor: 'transparent' }"
-    :to="`#layout-main`"
-    :z-index="zIndex"
-    @mask-click="close"
-  >
-    <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">
-          <div class="search-container">
-            <n-input
-              v-model:value="searchKeyword"
-              :placeholder="t('comp.musicList.searchSongs')"
-              clearable
-              round
-              size="small"
-            >
-              <template #prefix>
-                <i class="icon iconfont ri-search-line text-sm"></i>
-              </template>
-            </n-input>
-          </div>
-        </div>
-        <div class="music-close flex-shrink-0 ml-3">
-          <i class="icon iconfont ri-close-line" @click="close"></i>
-        </div>
-      </div>
-
-      <div class="music-content">
-        <!-- 左侧歌单信息 -->
-        <div class="music-info">
-          <div class="music-cover">
-            <n-image
-              :src="getCoverImgUrl"
-              class="cover-img"
-              preview-disabled
-              :class="setAnimationClass('animate__fadeIn')"
-              object-fit="cover"
-            />
-          </div>
-          <div v-if="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="height: calc(70vh - 60px)"
-                  :items="filteredSongs"
-                  :item-size="70"
-                  item-resizable
-                  key-field="id"
-                  @scroll="handleVirtualScroll"
-                >
-                  <template #default="{ item }">
-                    <div class="double-item">
-                      <song-item
-                        :item="formatSong(item)"
-                        :can-remove="canRemove"
-                        @play="handlePlay"
-                        @remove-song="(id) => emit('remove-song', id)"
-                      />
-                    </div>
-                  </template>
-                </n-virtual-list>
-              </div>
-            </n-spin>
-          </div>
-          <play-bottom />
-        </div>
-      </div>
-    </div>
-  </n-drawer>
-</template>
-
-<script setup lang="ts">
-import PinyinMatch from 'pinyin-match';
-import { computed, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { getMusicDetail } from '@/api/music';
-import SongItem from '@/components/common/SongItem.vue';
-import { usePlayerStore } from '@/store/modules/player';
-import { SongResult } from '@/types/music';
-import { getImgUrl, isMobile, setAnimationClass } from '@/utils';
-
-import PlayBottom from './common/PlayBottom.vue';
-
-const { t } = useI18n();
-const playerStore = usePlayerStore();
-const props = withDefaults(
-  defineProps<{
-    show: boolean;
-    name: string;
-    zIndex?: number;
-    songList: any[];
-    loading?: boolean;
-    listInfo?: {
-      trackIds: { id: number }[];
-      [key: string]: any;
-    };
-    cover?: boolean;
-    canRemove?: boolean;
-  }>(),
-  {
-    loading: false,
-    cover: true,
-    zIndex: 9996,
-    canRemove: false
-  }
-);
-
-const emit = defineEmits(['update:show', 'update:loading', 'remove-song']);
-
-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 total = computed(() => {
-  if (props.listInfo?.trackIds) {
-    return props.listInfo.trackIds.length;
-  }
-  return props.songList.length;
-});
-
-const getCoverImgUrl = computed(() => {
-  if (props.listInfo?.coverImgUrl) {
-    return props.listInfo.coverImgUrl;
-  }
-
-  const song = props.songList[0];
-  if (song?.picUrl) {
-    return song.picUrl;
-  }
-  if (song?.al?.picUrl) {
-    return song.al.picUrl;
-  }
-  if (song?.album?.picUrl) {
-    return song.album.picUrl;
-  }
-  return '';
-});
-
-// 过滤歌曲列表
-const filteredSongs = computed(() => {
-  if (!searchKeyword.value) {
-    return displayedSongs.value;
-  }
-
-  const keyword = searchKeyword.value.toLowerCase().trim();
-  return displayedSongs.value.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
-    );
-  });
-});
-
-// 格式化歌曲数据
-const formatSong = (item: any) => {
-  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
-    }
-  };
-};
-
-/**
- * 加载歌曲数据的核心函数
- * @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;
-    }
-    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 (!props.listInfo?.trackIds) {
-      isFullPlaylistLoaded.value = true;
-      console.log('无trackIds信息，使用当前列表作为完整列表');
-      return;
-    }
-
-    // 获取所有trackIds
-    const allIds = props.listInfo.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 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; // 每批加载的歌曲数量
-
-    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);
-        });
-      }
-    }
-
-    // 加载完成，更新状态
-    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 {
-    isPlaylistLoading.value = false;
-  }
-};
-
-// 处理播放
-const handlePlay = async () => {
-  // 当搜索状态下播放时，只播放过滤后的歌曲
-  if (searchKeyword.value) {
-    playerStore.setPlayList(filteredSongs.value.map(formatSong));
-    return;
-  }
-
-  // 如果完整播放列表已加载完成
-  if (isFullPlaylistLoaded.value && completePlaylist.value.length > 0) {
-    playerStore.setPlayList(completePlaylist.value.map(formatSong));
-    return;
-  }
-
-  // 如果完整播放列表未加载完成，先使用当前已加载的歌曲开始播放
-  playerStore.setPlayList(displayedSongs.value.map(formatSong));
-
-  // 如果完整播放列表正在加载中，不需要重新触发加载
-  if (isPlaylistLoading.value) {
-    return;
-  }
-
-  // 在后台继续加载完整播放列表（如果未加载完成）
-  if (!isFullPlaylistLoaded.value) {
-    console.log('播放时继续在后台加载完整列表');
-    loadFullPlaylist();
-  }
-};
-
-const close = () => {
-  emit('update:show', false);
-};
-
-// 加载更多歌曲
-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 (props.listInfo?.trackIds) {
-      const trackIdsToLoad = props.listInfo.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 < props.songList.length) {
-      const newSongs = props.songList.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;
-  }
-};
-
-// 处理虚拟列表滚动事件
-const handleVirtualScroll = (e: any) => {
-  if (!e || !e.target) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  const threshold = 200;
-
-  if (
-    scrollHeight - scrollTop - clientHeight < threshold &&
-    !isLoadingMore.value &&
-    hasMore.value &&
-    !searchKeyword.value // 搜索状态下不触发加载更多
-  ) {
-    loadMoreSongs();
-  }
-};
-
-// 重置列表状态
-const resetListState = () => {
-  page.value = 0;
-  loadedIds.value.clear();
-  displayedSongs.value = [];
-  completePlaylist.value = [];
-  hasMore.value = true;
-  loadingList.value = false;
-  searchKeyword.value = ''; // 重置搜索关键词
-  isFullPlaylistLoaded.value = false; // 重置完整播放列表状态
-};
-
-// 初始化歌曲列表
-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(
-  () => props.listInfo,
-  (newListInfo) => {
-    if (newListInfo?.trackIds) {
-      loadFullPlaylist();
-    }
-  },
-  { deep: true }
-);
-// 修改 songList 监听器
-watch(
-  () => props.songList,
-  (newSongs) => {
-    // 重置所有状态
-    resetListState();
-
-    // 初始化歌曲列表
-    initSongList(newSongs);
-
-    // 如果还有更多歌曲需要加载，且差距较小，立即加载
-    if (hasMore.value && props.listInfo?.trackIds) {
-      setTimeout(() => {
-        loadMoreSongs();
-      }, 300);
-    }
-  },
-  { immediate: true }
-);
-
-// 监听搜索关键词变化
-watch(searchKeyword, () => {
-  // 当搜索关键词为空时，考虑加载更多歌曲
-  if (!searchKeyword.value && hasMore.value && displayedSongs.value.length < total.value) {
-    loadMoreSongs();
-  }
-});
-
-// 组件卸载时清理状态
-onUnmounted(() => {
-  isPlaylistLoading.value = false;
-});
-</script>
-
-<style scoped lang="scss">
-.music {
-  &-title {
-    @apply text-xl font-bold text-gray-900 dark:text-white;
-  }
-
-  &-total {
-    @apply text-sm font-normal text-gray-500 dark:text-gray-400;
-  }
-
-  &-page {
-    @apply px-8 w-full h-full bg-light dark:bg-black bg-opacity-75 dark:bg-opacity-75 rounded-t-2xl;
-    backdrop-filter: blur(20px);
-  }
-
-  &-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];
-      .cover-img {
-        @apply w-full h-full object-cover;
-      }
-    }
-
-    .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)];
-    }
-  }
-}
-
-.search-container {
-  @apply max-w-md;
-
-  :deep(.n-input) {
-    @apply bg-light-200 dark:bg-dark-200;
-  }
-
-  .icon {
-    @apply text-gray-500 dark:text-gray-400;
-  }
-}
-
-.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;
-    }
-  }
-}
-
-.mobile {
-  .music-page {
-    @apply px-4;
-  }
-
-  .music-content {
-    @apply flex-col;
-    width: 100vw !important;
-  }
-
-  .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%];
-  }
-
-  .song-virtual-list {
-    height: calc(80vh - 120px) !important;
-  }
-}
-
-.loading-more {
-  @apply text-center py-4 text-gray-500 dark:text-gray-400;
-}
-
-.double-item {
-  @apply mb-2 bg-light-100 bg-opacity-20 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
-}
-
-.mobile {
-  .music-info {
-    @apply hidden;
-  }
-  .music-list-content {
-    @apply pb-[100px];
-  }
-}
-</style>
diff --git a/src/renderer/components/common/CategorySelector.vue b/src/renderer/components/common/CategorySelector.vue
index 0609132..5a5fd0f 100644
--- a/src/renderer/components/common/CategorySelector.vue
+++ b/src/renderer/components/common/CategorySelector.vue
@@ -3,10 +3,7 @@
     class="category-selector border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10"
   >
     <n-scrollbar ref="scrollbarRef" x-scrollable>
-      <div
-        class="categories-wrapper py-4 px-4 sm:px-6 lg:px-8 lg:pl-0"
-        @wheel.prevent="handleWheel"
-      >
+      <div class="categories-wrapper py-4 page-padding" @wheel.prevent="handleWheel">
         <span
           v-for="(category, index) in categories"
           :key="getItemKey(category, index)"
diff --git a/src/renderer/components/common/PlaylistDrawer.vue b/src/renderer/components/common/PlaylistDrawer.vue
index f18796f..9ea4792 100644
--- a/src/renderer/components/common/PlaylistDrawer.vue
+++ b/src/renderer/components/common/PlaylistDrawer.vue
@@ -1,104 +1,140 @@
 <template>
   <n-drawer
     :show="modelValue"
-    :width="400"
+    :width="420"
     placement="right"
     @update:show="$emit('update:modelValue', $event)"
     :unstable-show-mask="false"
     :show-mask="false"
   >
-    <n-drawer-content :title="t('comp.playlistDrawer.title')" class="mac-style-drawer">
+    <n-drawer-content class="!p-0">
+      <template #header>
+        <div class="flex items-center gap-3">
+          <h2 class="text-lg font-bold tracking-tight text-neutral-900 dark:text-white">
+            {{ t('comp.playlistDrawer.title') }}
+          </h2>
+          <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+        </div>
+      </template>
+
       <n-scrollbar class="h-full">
-        <div class="playlist-drawer">
-          <!-- 创建新歌单按钮和表单 -->
-          <div class="create-playlist-section">
-            <div
-              class="create-playlist-button"
-              :class="{ 'is-expanded': isCreating }"
+        <div class="flex flex-col gap-5 px-5 py-4">
+          <!-- 创建新歌单 -->
+          <div class="flex flex-col">
+            <button
+              class="flex items-center gap-4 rounded-2xl p-3 transition-all duration-200"
+              :class="
+                isCreating
+                  ? 'bg-neutral-100 dark:bg-neutral-800'
+                  : 'bg-neutral-50 hover:bg-neutral-100 dark:bg-neutral-800/50 dark:hover:bg-neutral-800'
+              "
               @click="toggleCreateForm"
             >
-              <div class="create-playlist-icon">
-                <i class="iconfont" :class="isCreating ? 'ri-close-line' : 'ri-add-line'"></i>
+              <div
+                class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary text-white shadow-lg shadow-primary/25 transition-transform duration-300"
+                :class="{ 'rotate-45': isCreating }"
+              >
+                <i class="iconfont text-xl" :class="isCreating ? 'ri-close-line' : 'ri-add-line'" />
               </div>
-              <div class="create-playlist-text">
+              <span class="text-sm font-semibold text-neutral-700 dark:text-neutral-200">
                 {{
                   isCreating
                     ? t('comp.playlistDrawer.cancelCreate')
                     : t('comp.playlistDrawer.createPlaylist')
                 }}
-              </div>
-            </div>
+              </span>
+            </button>
 
             <!-- 创建歌单表单 -->
-            <div class="create-playlist-form" :class="{ 'is-visible': isCreating }">
-              <n-input
-                v-model:value="formValue.name"
-                :placeholder="t('comp.playlistDrawer.playlistName')"
-                maxlength="40"
-                class="mac-style-input"
-                :status="inputError ? 'error' : undefined"
-              >
-                <template #prefix>
-                  <i class="iconfont ri-music-2-line"></i>
-                </template>
-              </n-input>
-              <div class="privacy-switch">
-                <div class="privacy-label">
-                  <i
-                    class="iconfont"
-                    :class="formValue.privacy ? 'ri-lock-line' : 'ri-earth-line'"
-                  ></i>
-                  <span>{{
-                    formValue.privacy
-                      ? t('comp.playlistDrawer.privatePlaylist')
-                      : t('comp.playlistDrawer.publicPlaylist')
-                  }}</span>
+            <div
+              class="overflow-hidden transition-all duration-300 ease-in-out"
+              :class="isCreating ? 'mt-4 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'"
+            >
+              <div class="flex flex-col gap-4 px-1">
+                <n-input
+                  v-model:value="formValue.name"
+                  :placeholder="t('comp.playlistDrawer.playlistName')"
+                  maxlength="40"
+                  round
+                  :status="inputError ? 'error' : undefined"
+                >
+                  <template #prefix>
+                    <i class="iconfont ri-music-2-line text-neutral-400" />
+                  </template>
+                </n-input>
+
+                <div class="flex items-center justify-between px-1">
+                  <div class="flex items-center gap-2.5">
+                    <i
+                      class="iconfont text-base"
+                      :class="
+                        formValue.privacy
+                          ? 'ri-lock-line text-primary'
+                          : 'ri-earth-line text-neutral-400 dark:text-neutral-500'
+                      "
+                    />
+                    <span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                      {{
+                        formValue.privacy
+                          ? t('comp.playlistDrawer.privatePlaylist')
+                          : t('comp.playlistDrawer.publicPlaylist')
+                      }}
+                    </span>
+                  </div>
+                  <n-switch v-model:value="formValue.privacy">
+                    <template #checked>{{ t('comp.playlistDrawer.private') }}</template>
+                    <template #unchecked>{{ t('comp.playlistDrawer.public') }}</template>
+                  </n-switch>
                 </div>
-                <n-switch v-model:value="formValue.privacy" class="mac-style-switch">
-                  <template #checked>{{ t('comp.playlistDrawer.private') }}</template>
-                  <template #unchecked>{{ t('comp.playlistDrawer.public') }}</template>
-                </n-switch>
-              </div>
-              <div class="form-actions">
-                <n-button
-                  type="primary"
-                  quaternary
-                  class="mac-style-button"
-                  :loading="creating"
-                  :disabled="!formValue.name"
+
+                <button
+                  class="flex w-full items-center justify-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary/25 transition-all duration-200 hover:bg-primary/90 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                  :disabled="!formValue.name || creating"
                   @click="handleCreatePlaylist"
                 >
-                  {{ t('comp.playlistDrawer.create') }}
-                </n-button>
+                  <n-spin v-if="creating" :size="14" />
+                  <span>{{ t('comp.playlistDrawer.create') }}</span>
+                </button>
               </div>
             </div>
           </div>
 
           <!-- 歌单列表 -->
-          <div class="playlist-list">
+          <div class="flex flex-col gap-1.5 pb-32">
             <div
-              v-for="playlist in playlists"
+              v-for="(playlist, index) in playlists"
               :key="playlist.id"
-              class="playlist-item"
+              class="group flex cursor-pointer items-center gap-3.5 rounded-2xl p-2.5 transition-all duration-200 hover:bg-neutral-50 active:scale-[0.98] dark:hover:bg-neutral-800/60"
+              :style="{ animationDelay: `${index * 0.03}s` }"
               @click="handleAddToPlaylist(playlist)"
             >
-              <n-image
-                :src="getImgUrl(playlist.coverImgUrl || playlist.picUrl, '100y100')"
-                class="playlist-item-img"
-                preview-disabled
-                :img-props="{
-                  crossorigin: 'anonymous'
-                }"
-              />
-              <div class="playlist-item-info">
-                <div class="playlist-item-name">{{ playlist.name }}</div>
-                <div class="playlist-item-count">
-                  {{ playlist.trackCount }}
-                  {{ t('comp.playlistDrawer.count') }}
+              <!-- 封面 -->
+              <div
+                class="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800"
+              >
+                <n-image
+                  :src="getImgUrl(playlist.coverImgUrl || playlist.picUrl, '100y100')"
+                  class="h-full w-full object-cover"
+                  preview-disabled
+                  :img-props="{ crossorigin: 'anonymous' }"
+                />
+              </div>
+
+              <!-- 信息 -->
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-semibold text-neutral-800 dark:text-neutral-100">
+                  {{ playlist.name }}
+                </div>
+                <div class="mt-0.5 text-xs font-medium text-neutral-400 dark:text-neutral-500">
+                  {{ playlist.trackCount }} {{ t('comp.playlistDrawer.count') }}
                 </div>
               </div>
-              <div class="playlist-item-action">
-                <i class="iconfont ri-add-line"></i>
+
+              <!-- 添加按钮 -->
+              <div
+                class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-neutral-300 transition-all duration-200 group-hover:bg-primary/10 group-hover:text-primary dark:text-neutral-600 dark:group-hover:text-primary"
+              >
+                <i class="iconfont ri-add-line text-xl" />
               </div>
             </div>
           </div>
@@ -255,142 +291,7 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped>
-.mac-style-drawer {
-  @apply h-full;
-
-  :deep(.n-drawer-header__main) {
-    @apply text-base font-medium;
-  }
-
-  :deep(.n-drawer-content) {
-    @apply h-full;
-  }
-
-  :deep(.n-drawer-content-wrapper) {
-    @apply h-full;
-  }
-
-  :deep(.n-scrollbar-rail) {
-    @apply right-0.5;
-  }
-}
-
-.playlist-drawer {
-  @apply flex flex-col gap-6 py-6;
-}
-
-.create-playlist-section {
-  @apply flex flex-col;
-}
-
-.create-playlist-button {
-  @apply flex items-center gap-4 p-3 rounded-xl cursor-pointer transition-all duration-200
-         bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
-
-  &.is-expanded {
-    @apply bg-gray-100 dark:bg-gray-700;
-
-    .create-playlist-icon {
-      transform: rotate(45deg);
-    }
-  }
-
-  &-icon {
-    @apply w-10 h-10 rounded-xl bg-green-500 flex items-center justify-center text-white
-           transition-all duration-300;
-
-    .iconfont {
-      @apply text-xl transition-transform duration-300;
-    }
-  }
-
-  &-text {
-    @apply text-sm font-medium transition-colors duration-300;
-  }
-}
-
-.create-playlist-form {
-  @apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out opacity-0;
-
-  &.is-visible {
-    @apply max-h-[200px] mt-4 opacity-100;
-  }
-
-  .mac-style-input {
-    @apply rounded-lg;
-    :deep(.n-input-wrapper) {
-      @apply bg-gray-50 dark:bg-gray-800 border-0;
-    }
-    :deep(.n-input__input) {
-      @apply text-sm;
-    }
-    :deep(.n-input__prefix) {
-      @apply text-gray-400;
-    }
-  }
-
-  .form-actions {
-    @apply mt-4;
-    .mac-style-button {
-      @apply w-full rounded-lg text-sm py-2 bg-green-500 hover:bg-green-600 text-white;
-    }
-  }
-}
-
-.privacy-switch {
-  @apply flex items-center justify-between mt-4 px-2;
-
-  .privacy-label {
-    @apply flex items-center gap-2;
-
-    .iconfont {
-      @apply text-base text-gray-500 dark:text-gray-400;
-    }
-    span {
-      @apply text-sm;
-    }
-  }
-
-  :deep(.n-switch) {
-    @apply h-5 min-w-[40px];
-  }
-}
-
-.playlist-list {
-  @apply flex flex-col gap-2 pb-40;
-}
-
-.playlist-item {
-  @apply flex items-center gap-3 p-2 rounded-xl cursor-pointer transition-all duration-200
-         hover:bg-gray-50 dark:hover:bg-gray-800;
-
-  &-img {
-    @apply w-10 h-10 rounded-xl;
-  }
-
-  &-info {
-    @apply flex-1 min-w-0;
-  }
-
-  &-name {
-    @apply text-sm font-medium truncate;
-  }
-
-  &-count {
-    @apply text-xs text-gray-500 dark:text-gray-400;
-  }
-
-  &-action {
-    @apply w-8 h-8 rounded-lg flex items-center justify-center
-           text-gray-400 hover:text-green-500 transition-colors duration-200;
-
-    .iconfont {
-      @apply text-xl;
-    }
-  }
-}
-
+<style scoped>
 :deep(.n-drawer-body-content-wrapper) {
   padding-bottom: 0 !important;
   padding-top: 0 !important;
diff --git a/src/renderer/components/common/UpdateModal.vue b/src/renderer/components/common/UpdateModal.vue
index 8ba19ba..2a51d92 100644
--- a/src/renderer/components/common/UpdateModal.vue
+++ b/src/renderer/components/common/UpdateModal.vue
@@ -5,65 +5,102 @@
     :show-icon="false"
     :mask-closable="!downloading"
     :closable="!downloading"
-    class="update-app-modal"
+    class="update-modal"
     style="width: 800px; max-width: 90vw"
   >
-    <div class="modal-content">
-      <div class="modal-header">
-        <div class="app-icon">
-          <img src="@/assets/logo.png" alt="App Icon" />
+    <div class="p-6 pb-4">
+      <!-- 头部：图标 + 版本信息 -->
+      <div class="flex items-center mb-6">
+        <div
+          class="w-20 h-20 mr-5 flex-shrink-0 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-100 dark:ring-neutral-800"
+        >
+          <img src="@/assets/logo.png" alt="App Icon" class="w-full h-full object-cover" />
         </div>
-        <div class="app-info">
-          <h2 class="app-name">{{ t('comp.update.title') }} {{ updateInfo.latestVersion }}</h2>
-          <p class="app-desc mb-2">
-            {{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
-          </p>
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white mb-1.5">
+            {{ t('comp.update.title') }} {{ updateInfo.latestVersion }}
+          </h2>
+          <div class="flex items-center gap-2">
+            <span
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"
+            >
+              {{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
+            </span>
+            <span
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary dark:bg-primary/20"
+            >
+              NEW
+            </span>
+          </div>
         </div>
       </div>
-      <div class="update-info">
+
+      <!-- 更新日志 -->
+      <div class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 overflow-hidden">
         <n-scrollbar style="max-height: 300px">
-          <div class="update-body" v-html="parsedReleaseNotes"></div>
+          <div
+            class="update-body p-5 text-sm leading-relaxed text-neutral-600 dark:text-neutral-300"
+            v-html="parsedReleaseNotes"
+          />
         </n-scrollbar>
       </div>
-      <div v-if="downloading" class="download-status mt-6">
-        <div class="flex items-center justify-between mb-2">
-          <span class="text-sm text-gray-500">{{ downloadStatus }}</span>
-          <span class="text-sm font-medium">{{ downloadProgress }}%</span>
+
+      <!-- 下载进度 -->
+      <div v-if="downloading" class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 p-4">
+        <div class="flex items-center justify-between mb-2.5">
+          <span class="text-sm text-neutral-500 dark:text-neutral-400">{{ downloadStatus }}</span>
+          <span class="text-sm font-bold text-primary">{{ downloadProgress }}%</span>
         </div>
-        <div class="progress-bar-wrapper">
-          <div class="progress-bar" :style="{ width: `${downloadProgress}%` }"></div>
+        <div
+          class="relative h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700"
+        >
+          <div
+            class="absolute inset-y-0 left-0 rounded-full bg-primary transition-all duration-300 ease-out shadow-[0_0_10px_rgba(34,197,94,0.4)]"
+            :style="{ width: `${downloadProgress}%` }"
+          />
         </div>
       </div>
-      <div class="modal-actions" :class="{ 'mt-6': !downloading }">
-        <n-button class="cancel-btn" :disabled="downloading" @click="closeModal">
+
+      <!-- 操作按钮 -->
+      <div class="flex gap-3" :class="{ 'mt-6': !downloading }">
+        <button
+          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="downloading"
+          @click="closeModal"
+        >
           {{ t('comp.update.cancel') }}
-        </n-button>
-        <n-button
+        </button>
+        <button
           v-if="!downloading"
-          type="primary"
-          class="update-btn"
+          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
           :disabled="downloading"
           @click="handleUpdate"
         >
           {{ downloadBtnText }}
-        </n-button>
-        <!-- 后台下载 -->
-        <n-button v-else class="update-btn" type="primary" @click="closeModal">
+        </button>
+        <button
+          v-else
+          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95"
+          @click="closeModal"
+        >
           {{ t('comp.update.backgroundDownload') }}
-        </n-button>
-      </div>
-      <div v-if="!downloading" class="modal-desc mt-4 text-center">
-        <p class="text-xs text-gray-400">
-          {{ t('comp.installApp.downloadProblem') }}
-          <a
-            class="text-green-500"
-            target="_blank"
-            href="https://github.com/algerkong/AlgerMusicPlayer/releases"
-            >GitHub</a
-          >
-          {{ t('comp.installApp.downloadProblemLinkText') }}
-        </p>
+        </button>
       </div>
+
+      <!-- 底部提示 -->
+      <p
+        v-if="!downloading"
+        class="mt-4 text-center text-xs text-neutral-400 dark:text-neutral-500"
+      >
+        {{ t('comp.installApp.downloadProblem') }}
+        <a
+          class="text-primary hover:text-primary/80 transition-colors"
+          target="_blank"
+          href="https://github.com/algerkong/AlgerMusicPlayer/releases"
+          >GitHub</a
+        >
+        {{ t('comp.installApp.downloadProblemLinkText') }}
+      </p>
     </div>
   </n-modal>
 </template>
@@ -82,13 +119,14 @@ const { t } = useI18n();
 const dialog = useDialog();
 const message = useMessage();
 
-// 配置 marked
-marked.setOptions({
-  breaks: true, // 支持 GitHub 风格的换行
-  gfm: true // 启用 GitHub 风格的 Markdown
-});
+// 配置 marked（只需执行一次）
+marked.setOptions({ breaks: true, gfm: true });
+
+const GITHUB_RELEASE_BASE = 'https://github.com/algerkong/AlgerMusicPlayer/releases/download';
+const GITHUB_RELEASES_URL = 'https://github.com/algerkong/AlgerMusicPlayer/releases';
 
 const settingsStore = useSettingsStore();
+const ipc = window.electron.ipcRenderer;
 
 const showModal = computed({
   get: () => settingsStore.showUpdateModal,
@@ -102,22 +140,170 @@ const updateInfo = ref<UpdateResult>({
   releaseInfo: null
 });
 
-// 解析 Markdown
+const downloading = ref(false);
+const downloadProgress = ref(0);
+const downloadStatus = ref(t('comp.update.prepareDownload'));
+const isDialogShown = ref(false);
+
 const parsedReleaseNotes = computed(() => {
-  if (!updateInfo.value.releaseInfo?.body) return '';
+  const body = updateInfo.value.releaseInfo?.body;
+  if (!body) return '';
   try {
-    return marked.parse(updateInfo.value.releaseInfo.body);
+    return marked.parse(body);
   } catch (error) {
-    console.error('Error parsing markdown:', error);
-    return updateInfo.value.releaseInfo.body;
+    console.error('Markdown 解析失败:', error);
+    return body;
   }
 });
 
+const downloadBtnText = computed(() =>
+  downloading.value ? t('comp.update.downloading') : t('comp.update.nowUpdate')
+);
+
 const closeModal = () => {
   showModal.value = false;
 };
 
-const checkForUpdates = async () => {
+// ---- 下载 URL 解析 ----
+
+const buildReleaseUrl = (version: string, suffix: string): string =>
+  `${GITHUB_RELEASE_BASE}/v${version}/AlgerMusicPlayer-${version}${suffix}`;
+
+const resolveDownloadUrl = (
+  assets: any[],
+  platform: string,
+  arch: string,
+  version: string
+): string => {
+  // 从 release assets 中按平台/架构匹配
+  const findAsset = (keywords: string[]): string | undefined =>
+    assets.find((a) => keywords.every((k) => a.name.includes(k)))?.browser_download_url;
+
+  if (platform === 'darwin') {
+    const macArch = arch === 'arm64' ? 'arm64' : 'x64';
+    return findAsset(['mac', macArch]) || buildReleaseUrl(version, `-${macArch}.dmg`);
+  }
+
+  if (platform === 'win32') {
+    const winArch = arch === 'x64' ? 'x64' : 'ia32';
+    return (
+      findAsset(['win', winArch]) ||
+      buildReleaseUrl(version, `-win-${winArch}.exe`) ||
+      buildReleaseUrl(version, '-win.exe')
+    );
+  }
+
+  if (platform === 'linux') {
+    return (
+      findAsset(['x64', '.AppImage']) ||
+      findAsset(['x64', '.deb']) ||
+      buildReleaseUrl(version, '-linux-x64.AppImage')
+    );
+  }
+
+  return '';
+};
+
+// ---- IPC 事件处理 ----
+
+const onDownloadProgress = (_event: any, progress: number, status: string) => {
+  downloadProgress.value = progress;
+  downloadStatus.value = status;
+};
+
+const showInstallDialog = (filePath: string) => {
+  const copyFilePath = () => {
+    navigator.clipboard
+      .writeText(filePath)
+      .then(() => message.success(t('comp.update.copySuccess')))
+      .catch(() => message.error(t('comp.update.copyFailed')));
+  };
+
+  const dialogRef = dialog.create({
+    title: t('comp.update.installConfirmTitle'),
+    content: () =>
+      h('div', { class: 'flex flex-col gap-3' }, [
+        h(
+          'p',
+          { class: 'text-base font-medium text-neutral-800 dark:text-neutral-100' },
+          t('comp.update.installConfirmContent')
+        ),
+        h('div', { class: 'h-px bg-neutral-200 dark:bg-neutral-700' }),
+        h(
+          'p',
+          { class: 'text-sm text-neutral-500 dark:text-neutral-400' },
+          t('comp.update.manualInstallTip')
+        ),
+        h('div', { class: 'flex items-center gap-3 mt-1' }, [
+          h('div', { class: 'flex-1 min-w-0' }, [
+            h(
+              'p',
+              { class: 'text-xs text-neutral-400 dark:text-neutral-500 mb-1' },
+              t('comp.update.fileLocation')
+            ),
+            h(
+              'div',
+              {
+                class:
+                  'rounded-xl bg-neutral-100 dark:bg-neutral-800 px-3 py-2 text-xs font-mono text-neutral-700 dark:text-neutral-300 break-all'
+              },
+              filePath
+            )
+          ]),
+          h(
+            'button',
+            {
+              class:
+                'flex items-center gap-1.5 rounded-xl bg-neutral-200 dark:bg-neutral-700 px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300 cursor-pointer transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-600 flex-shrink-0',
+              onClick: copyFilePath
+            },
+            [h('i', { class: 'ri-file-copy-line text-sm' }), h('span', t('comp.update.copy'))]
+          )
+        ])
+      ]),
+    positiveText: t('comp.update.yesInstall'),
+    negativeText: t('comp.update.noThanks'),
+    onPositiveClick: () => {
+      ipc.send('install-update', filePath);
+    },
+    onNegativeClick: () => {
+      dialogRef.destroy();
+    },
+    onClose: () => {
+      isDialogShown.value = false;
+    }
+  });
+};
+
+const onDownloadComplete = (_event: any, success: boolean, filePath: string) => {
+  downloading.value = false;
+  closeModal();
+
+  if (success && !isDialogShown.value) {
+    isDialogShown.value = true;
+    showInstallDialog(filePath);
+  } else if (!success) {
+    message.error(t('comp.update.downloadFailed'));
+  }
+};
+
+// ---- 生命周期 ----
+
+const registerIpcListeners = () => {
+  // 先移除旧监听，防止重复注册
+  ipc.removeListener('download-progress', onDownloadProgress);
+  ipc.removeListener('download-complete', onDownloadComplete);
+  ipc.on('download-progress', onDownloadProgress);
+  ipc.on('download-complete', onDownloadComplete);
+};
+
+const removeIpcListeners = () => {
+  ipc.removeListener('download-progress', onDownloadProgress);
+  ipc.removeListener('download-complete', onDownloadComplete);
+};
+
+onMounted(async () => {
+  registerIpcListeners();
   try {
     const result = await checkUpdate(config.version);
     if (result) {
@@ -127,407 +313,148 @@ const checkForUpdates = async () => {
   } catch (error) {
     console.error('检查更新失败:', error);
   }
-};
-
-const downloading = ref(false);
-const downloadProgress = ref(0);
-const downloadStatus = ref(t('comp.update.prepareDownload'));
-const downloadBtnText = computed(() => {
-  if (downloading.value) return t('comp.update.downloading');
-  return t('comp.update.nowUpdate');
 });
 
-// 下载完成后的文件路径
-const downloadedFilePath = ref('');
-// 防止对话框重复弹出
-const isDialogShown = ref(false);
-
-// 处理下载状态更新
-const handleDownloadProgress = (_event: any, progress: number, status: string) => {
-  downloadProgress.value = progress;
-  downloadStatus.value = status;
-};
-
-// 处理下载完成
-const handleDownloadComplete = (_event: any, success: boolean, filePath: string) => {
-  downloading.value = false;
-  closeModal();
-
-  if (success && !isDialogShown.value) {
-    downloadedFilePath.value = filePath;
-    isDialogShown.value = true;
-
-    // 复制文件路径到剪贴板
-    const copyFilePath = () => {
-      navigator.clipboard
-        .writeText(filePath)
-        .then(() => {
-          message.success(t('comp.update.copySuccess'));
-        })
-        .catch(() => {
-          message.error(t('comp.update.copyFailed'));
-        });
-    };
-
-    // 使用naive-ui的对话框询问用户是否安装
-    const dialogRef = dialog.create({
-      title: t('comp.update.installConfirmTitle'),
-      content: () =>
-        h('div', { class: 'update-dialog-content' }, [
-          h('p', { class: 'content-text' }, t('comp.update.installConfirmContent')),
-          h('div', { class: 'divider' }),
-          h('p', { class: 'manual-tip' }, t('comp.update.manualInstallTip')),
-          h('div', { class: 'file-path-container' }, [
-            h('div', { class: 'file-path-box' }, [
-              h('p', { class: 'file-path-label' }, t('comp.update.fileLocation')),
-              h('div', { class: 'file-path-value' }, filePath)
-            ]),
-            h(
-              'div',
-              {
-                class: 'copy-btn',
-                onClick: copyFilePath
-              },
-              [h('i', { class: 'ri-file-copy-line' }), h('span', t('comp.update.copy'))]
-            )
-          ])
-        ]),
-      positiveText: t('comp.update.yesInstall'),
-      negativeText: t('comp.update.noThanks'),
-      onPositiveClick: () => {
-        window.electron.ipcRenderer.send('install-update', filePath);
-      },
-      onNegativeClick: () => {
-        closeModal();
-        // 关闭当前窗口
-        dialogRef.destroy();
-      },
-      onClose: () => {
-        isDialogShown.value = false;
-      }
-    });
-  } else if (!success) {
-    message.error(t('comp.update.downloadFailed'));
-  }
-};
-
-// 监听下载事件
-onMounted(() => {
-  checkForUpdates();
-  // 确保事件监听器只注册一次
-  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
-  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
-
-  window.electron.ipcRenderer.on('download-progress', handleDownloadProgress);
-  window.electron.ipcRenderer.on('download-complete', handleDownloadComplete);
-});
-
-// 清理事件监听
 onUnmounted(() => {
-  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
-  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
+  removeIpcListeners();
   isDialogShown.value = false;
 });
 
+// ---- 触发更新下载 ----
+
 const handleUpdate = async () => {
-  const assets = updateInfo.value.releaseInfo?.assets || [];
+  const { releaseInfo, latestVersion } = updateInfo.value;
+  const assets = releaseInfo?.assets ?? [];
   const { platform } = window.electron.process;
-  const arch = window.electron.ipcRenderer.sendSync('get-arch');
-  const version = updateInfo.value.latestVersion;
-  const downUrls = {
-    win32: {
-      all: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win.exe`,
-      x64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-x64.exe`,
-      ia32: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-ia32.exe`
-    },
-    darwin: {
-      x64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-x64.dmg`,
-      arm64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-arm64.dmg`
-    },
-    linux: {
-      AppImage: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.AppImage`,
-      deb: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.deb`
-    }
-  };
+  const arch = ipc.sendSync('get-arch');
 
-  let downloadUrl = '';
+  const downloadUrl = resolveDownloadUrl(assets, platform, arch, latestVersion);
 
-  // 根据平台和架构选择对应的安装包
-  if (platform === 'darwin') {
-    // macOS - 根据芯片架构选择对应的 DMG
-    const macArch = arch === 'arm64' ? 'arm64' : 'x64';
-    const macAsset = assets.find(
-      (asset) => asset.name.includes('mac') && asset.name.includes(macArch)
-    );
-    downloadUrl = macAsset?.browser_download_url || downUrls.darwin[macArch] || '';
-  } else if (platform === 'win32') {
-    // Windows
-    const winAsset = assets.find(
-      (asset) =>
-        asset.name.includes('win') &&
-        (arch === 'x64' ? asset.name.includes('x64') : asset.name.includes('ia32'))
-    );
-    downloadUrl =
-      winAsset?.browser_download_url || downUrls.win32[arch] || downUrls.win32.all || '';
-  } else if (platform === 'linux') {
-    // Linux
-    const linuxAsset = assets.find(
-      (asset) =>
-        (asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
-        asset.name.includes('x64')
-    );
-    downloadUrl = linuxAsset?.browser_download_url || downUrls.linux[arch] || '';
+  if (!downloadUrl) {
+    message.error(t('comp.update.noDownloadUrl'));
+    window.open(`${GITHUB_RELEASES_URL}/latest`, '_blank');
+    return;
   }
 
-  if (downloadUrl) {
-    try {
-      downloading.value = true;
-      downloadStatus.value = t('comp.update.prepareDownload');
-      isDialogShown.value = false;
+  try {
+    downloading.value = true;
+    downloadProgress.value = 0;
+    downloadStatus.value = t('comp.update.prepareDownload');
+    isDialogShown.value = false;
 
-      // 获取代理节点列表
-      const proxyHosts = await getProxyNodes();
-      const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
-
-      // 发送所有可能的下载地址到主进程
-      window.electron.ipcRenderer.send('start-download', proxyDownloadUrl);
-    } catch (error) {
-      downloading.value = false;
-      message.error(t('comp.update.startFailed'));
-      console.error('下载失败:', error);
-    }
-  } else {
-    message.error(t('comp.update.noDownloadUrl'));
-    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
+    const proxyHosts = await getProxyNodes();
+    ipc.send('start-download', `${proxyHosts[0]}/${downloadUrl}`);
+  } catch (error) {
+    downloading.value = false;
+    message.error(t('comp.update.startFailed'));
+    console.error('下载失败:', error);
   }
 };
 </script>
 
-<style lang="scss" scoped>
-.update-app-modal {
-  :deep(.n-modal) {
-    @apply max-w-4xl;
-  }
-  .modal-content {
-    @apply p-6 pb-4;
-    .modal-header {
-      @apply flex items-center mb-6;
-      .app-icon {
-        @apply w-24 h-24 mr-6 rounded-2xl overflow-hidden;
-        img {
-          @apply w-full h-full object-cover;
-        }
-      }
-      .app-info {
-        @apply flex-1;
-        .app-name {
-          @apply text-2xl font-bold mb-2;
-        }
-        .app-desc {
-          @apply text-base text-gray-400;
-        }
-      }
-    }
-    .update-info {
-      @apply mb-6 rounded-lg bg-gray-50 dark:bg-gray-800;
-      .update-title {
-        @apply text-base font-medium p-4 pb-2;
-      }
-      .update-body {
-        @apply p-4 pt-2 text-gray-600 dark:text-gray-300 rounded-lg overflow-hidden;
+<style scoped>
+/* 弹窗圆角 */
+.update-modal :deep(.n-dialog) {
+  border-radius: 1.25rem; /* 20px — rounded-2xl 级别 */
+  overflow: hidden;
+}
 
-        :deep(h1) {
-          @apply text-xl font-bold mb-3;
-        }
-        :deep(h2) {
-          @apply text-lg font-bold mb-3;
-        }
-        :deep(h3) {
-          @apply text-base font-bold mb-2;
-        }
-        :deep(p) {
-          @apply mb-3 leading-relaxed;
-        }
-        :deep(ul) {
-          @apply list-disc list-inside mb-3;
-        }
-        :deep(ol) {
-          @apply list-decimal list-inside mb-3;
-        }
-        :deep(li) {
-          @apply mb-2 leading-relaxed;
-        }
-        :deep(code) {
-          @apply px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
-        }
-        :deep(pre) {
-          @apply p-3 rounded bg-gray-100 dark:bg-gray-700 overflow-x-auto mb-3;
-          code {
-            @apply bg-transparent p-0;
-          }
-        }
-        :deep(blockquote) {
-          @apply pl-4 border-l-4 border-gray-200 dark:border-gray-600 mb-3;
-        }
-        :deep(a) {
-          @apply text-green-500 hover:text-green-600 dark:hover:text-green-400;
-        }
-        :deep(hr) {
-          @apply my-4 border-gray-200 dark:border-gray-600;
-        }
-        :deep(table) {
-          @apply w-full mb-3;
-          th,
-          td {
-            @apply px-3 py-2 border border-gray-200 dark:border-gray-600;
-          }
-          th {
-            @apply bg-gray-100 dark:bg-gray-700;
-          }
-        }
-      }
-    }
-    .download-status {
-      @apply p-2;
-      .progress-bar-wrapper {
-        @apply w-full h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden;
-        .progress-bar {
-          @apply h-full bg-green-500 rounded-full transition-all duration-300 ease-out;
-          box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
-        }
-      }
-    }
-    .modal-actions {
-      @apply flex gap-4;
-      .n-button {
-        @apply flex-1 text-base py-2;
-      }
-      .cancel-btn {
-        @apply bg-gray-800 text-gray-300 border-none;
-        &:hover {
-          @apply bg-gray-700;
-        }
-        &:disabled {
-          @apply opacity-50 cursor-not-allowed;
-        }
-      }
-      .update-btn {
-        @apply bg-green-600 border-none;
-        &:hover {
-          @apply bg-green-500;
-        }
-        &:disabled {
-          @apply opacity-50 cursor-not-allowed;
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-/* 对话框内容样式 */
-.update-dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .content-text {
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  .divider {
-    width: 100%;
-    height: 1px;
-    background-color: #e5e7eb;
-    margin: 4px 0;
-  }
-
-  .manual-tip {
-    font-size: 14px;
-    color: #6b7280;
-  }
-
-  .file-path-container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 8px;
-
-    .file-path-box {
-      flex: 1;
-
-      .file-path-label {
-        font-size: 12px;
-        color: #6b7280;
-        margin-bottom: 4px;
-      }
-
-      .file-path-value {
-        padding: 8px;
-        border-radius: 4px;
-        background-color: #f3f4f6;
-        font-size: 12px;
-        font-family: monospace;
-        color: #1f2937;
-        word-break: break-all;
-      }
-    }
-
-    .copy-btn {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 8px 12px;
-      border-radius: 4px;
-      background-color: #e5e7eb;
-      color: #4b5563;
-      font-size: 12px;
-      cursor: pointer;
-      transition: background-color 0.2s;
-
-      &:hover {
-        background-color: #d1d5db;
-      }
-
-      i {
-        font-size: 14px;
-      }
-    }
-  }
-}
-
-/* 深色模式样式 */
-.dark .update-dialog-content {
-  .divider {
-    background-color: #374151;
-  }
-
-  .manual-tip {
-    color: #9ca3af;
-  }
-
-  .file-path-container {
-    .file-path-box {
-      .file-path-label {
-        color: #9ca3af;
-      }
-
-      .file-path-value {
-        background-color: #1f2937;
-        color: #d1d5db;
-      }
-    }
-
-    .copy-btn {
-      background-color: #374151;
-      color: #d1d5db;
-
-      &:hover {
-        background-color: #4b5563;
-      }
-    }
-  }
+/* 更新日志 Markdown 渲染样式 */
+.update-body :deep(h1) {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+.update-body :deep(h2) {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+.update-body :deep(h3) {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+.update-body :deep(p) {
+  margin-bottom: 0.75rem;
+  line-height: 1.625;
+}
+.update-body :deep(ul) {
+  list-style-type: disc;
+  list-style-position: inside;
+  margin-bottom: 0.75rem;
+}
+.update-body :deep(ol) {
+  list-style-type: decimal;
+  list-style-position: inside;
+  margin-bottom: 0.75rem;
+}
+.update-body :deep(li) {
+  margin-bottom: 0.5rem;
+  line-height: 1.625;
+}
+.update-body :deep(code) {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  background-color: rgb(245 245 245);
+}
+.dark .update-body :deep(code) {
+  background-color: rgb(64 64 64);
+}
+.update-body :deep(pre) {
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  overflow-x: auto;
+  margin-bottom: 0.75rem;
+  background-color: rgb(245 245 245);
+}
+.dark .update-body :deep(pre) {
+  background-color: rgb(64 64 64);
+}
+.update-body :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+}
+.update-body :deep(blockquote) {
+  padding-left: 1rem;
+  border-left: 4px solid rgb(229 229 229);
+  margin-bottom: 0.75rem;
+}
+.dark .update-body :deep(blockquote) {
+  border-left-color: rgb(82 82 82);
+}
+.update-body :deep(a) {
+  color: #22c55e;
+  transition: color 0.2s;
+}
+.update-body :deep(a:hover) {
+  color: rgb(34 197 94 / 0.8);
+}
+.update-body :deep(hr) {
+  margin: 1rem 0;
+  border-color: rgb(229 229 229);
+}
+.dark .update-body :deep(hr) {
+  border-color: rgb(82 82 82);
+}
+.update-body :deep(table) {
+  width: 100%;
+  margin-bottom: 0.75rem;
+}
+.update-body :deep(th),
+.update-body :deep(td) {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgb(229 229 229);
+}
+.dark .update-body :deep(th),
+.dark .update-body :deep(td) {
+  border-color: rgb(82 82 82);
+}
+.update-body :deep(th) {
+  background-color: rgb(245 245 245);
+}
+.dark .update-body :deep(th) {
+  background-color: rgb(64 64 64);
 }
 </style>
diff --git a/src/renderer/index.css b/src/renderer/index.css
index db9cf78..1af7489 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -5,13 +5,32 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 页面内容区域统一边距工具类 */
+.page-padding {
+  padding-left: var(--page-pl);
+  padding-right: var(--page-pr);
+}
+
+/* 左右对称边距（用于 hero 区域等需要两侧都有边距的场景） */
+.page-padding-x {
+  padding-left: var(--page-pr);
+  padding-right: var(--page-pr);
+}
+
 .n-image img {
   background-color: #111111;
   width: 100%;
 }
 
 .n-slider-handle-indicator--top {
-  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 text-white bg-dark-300 dark:bg-gray-800 bg-opacity-80 rounded-lg  !important;
+  background-color: transparent;
+  font-size: 1.5rem;
+  padding: 0.25rem 0.5rem;
+  box-shadow: none;
+  margin-bottom: 0;
+  color: white;
+  background-color: rgb(31 41 55 / 0.8);
+  border-radius: 0.5rem;
   mix-blend-mode: difference !important;
 }
 
@@ -20,7 +39,9 @@
 }
 
 .text-el {
-  @apply overflow-ellipsis overflow-hidden whitespace-nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .theme-dark {
@@ -68,8 +89,50 @@
   --safe-area-inset-right: 0px;
   --safe-area-inset-bottom: 10px;
   --safe-area-inset-left: 0px;
+
+  /* 页面内容区域统一边距 */
+  --page-px: 1rem; /* 默认 16px，对应 px-4 */
+  --page-pl: 1rem; /* 左边距，PC 端有菜单时为 0 */
+  --page-pr: 1rem; /* 右边距 */
+}
+
+/* PC 端：有左侧菜单，左边距为 0 */
+.pc {
+  --page-pl: 0px;
+}
+
+/* 响应式边距 */
+@media (min-width: 640px) {
+  :root {
+    --page-px: 1.5rem; /* 24px，对应 sm:px-6 */
+    --page-pr: 1.5rem;
+  }
+  .mobile {
+    --page-pl: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --page-px: 2rem; /* 32px，对应 lg:px-8 */
+    --page-pr: 2rem;
+  }
 }
 
 :root[class='dark'] {
   --text-color: #ffffffdd;
 }
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+
+  @media (min-width: 768px) {
+    font-size: 1.875rem;
+  }
+
+  @media (min-width: 1024px) {
+    font-size: 2.25rem;
+  }
+}
diff --git a/src/renderer/views/album/index.vue b/src/renderer/views/album/index.vue
index 6f28d66..2c326b3 100644
--- a/src/renderer/views/album/index.vue
+++ b/src/renderer/views/album/index.vue
@@ -17,7 +17,7 @@
       :size="100"
       @scroll="handleScroll"
     >
-      <div class="list-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="list-content w-full pb-32 pt-6 page-padding">
         <!-- 列表标题 -->
         <div class="mb-8">
           <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
index 7eecd66..26a4477 100644
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -26,7 +26,7 @@
             </div>
           </div>
           <!-- Content Skeleton -->
-          <div class="mt-8 px-4 md:px-8">
+          <div class="mt-8 page-padding-x">
             <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" />
@@ -58,7 +58,7 @@
             </div>
 
             <!-- Hero Content -->
-            <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
+            <div class="hero-content relative z-10 page-padding-x 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">
@@ -133,7 +133,7 @@
 
           <!-- 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"
+            class="action-bar sticky top-0 z-20 page-padding-x 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 -->
@@ -216,7 +216,7 @@
           </section>
 
           <!-- Tab Navigation -->
-          <section class="tab-nav px-4 md:px-8 pt-4 md:pt-6">
+          <section class="tab-nav page-padding-x pt-4 md:pt-6">
             <div
               class="tab-list relative flex gap-1 p-1 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl w-fit"
             >
@@ -244,7 +244,7 @@
           </section>
 
           <!-- Tab Content -->
-          <section class="tab-content px-4 md:px-8 py-6 md:py-8">
+          <section class="tab-content page-padding-x py-6 md:py-8">
             <!-- Songs Tab -->
             <div v-show="activeTab === 'songs'" class="songs-tab">
               <!-- No Results -->
diff --git a/src/renderer/views/download/DownloadPage.vue b/src/renderer/views/download/DownloadPage.vue
index 3b9f1b3..51eeca9 100644
--- a/src/renderer/views/download/DownloadPage.vue
+++ b/src/renderer/views/download/DownloadPage.vue
@@ -15,7 +15,7 @@
           </div>
 
           <!-- Hero Content -->
-          <div class="hero-content relative z-10 px-4 md:px-8 pt-10 pb-8">
+          <div class="hero-content relative z-10 page-padding-x 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
@@ -56,7 +56,7 @@
 
         <!-- 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"
+          class="action-bar sticky top-0 z-20 page-padding-x 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) -->
@@ -105,7 +105,7 @@
         </section>
 
         <!-- List Section -->
-        <section class="list-section px-4 md:px-8 mt-6">
+        <section class="list-section page-padding-x 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">
diff --git a/src/renderer/views/historyAndFavorite/index.vue b/src/renderer/views/historyAndFavorite/index.vue
index 3232753..fb84403 100644
--- a/src/renderer/views/historyAndFavorite/index.vue
+++ b/src/renderer/views/historyAndFavorite/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-6 h-full pb-4 px-6 pt-6 bg-white dark:bg-black">
+  <div class="flex gap-6 h-full pb-4 page-padding pt-6 bg-white dark:bg-black">
     <favorite class="flex-item" v-if="!isMobile" />
     <history-list class="flex-item" />
   </div>
diff --git a/src/renderer/views/home/components/HomeArtists.vue b/src/renderer/views/home/components/HomeArtists.vue
index 459be93..55f4b62 100644
--- a/src/renderer/views/home/components/HomeArtists.vue
+++ b/src/renderer/views/home/components/HomeArtists.vue
@@ -14,7 +14,13 @@
     <div
       v-else
       ref="scrollContainer"
-      class="artists-scroll relative -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 overflow-x-auto overflow-y-hidden pt-2"
+      class="artists-scroll relative overflow-x-auto overflow-y-hidden pt-2"
+      style="
+        margin-left: calc(var(--page-pl) * -1);
+        margin-right: calc(var(--page-pr) * -1);
+        padding-left: var(--page-pl);
+        padding-right: var(--page-pr);
+      "
       @wheel="handleWheel"
     >
       <div class="artists-track flex gap-6 md:gap-8 lg:gap-10">
@@ -137,12 +143,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Typography System */
-.section-title {
-  @apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
-}
-
-/* Optimized horizontal scroll */
+/* 优化水平滚动 */
 .artists-scroll {
   /* Hide scrollbar while maintaining functionality */
   scrollbar-width: none;
diff --git a/src/renderer/views/home/components/HomeCard.vue b/src/renderer/views/home/components/HomeCard.vue
index a2ca433..705f54a 100644
--- a/src/renderer/views/home/components/HomeCard.vue
+++ b/src/renderer/views/home/components/HomeCard.vue
@@ -74,7 +74,3 @@ defineEmits<{
   (e: 'click'): void;
 }>();
 </script>
-
-<style scoped>
-/* 使用 Tailwind CSS，无需额外样式 */
-</style>
diff --git a/src/renderer/views/home/components/HomeDailyRecommend.vue b/src/renderer/views/home/components/HomeDailyRecommend.vue
index f1a2215..70006d6 100644
--- a/src/renderer/views/home/components/HomeDailyRecommend.vue
+++ b/src/renderer/views/home/components/HomeDailyRecommend.vue
@@ -191,12 +191,7 @@ const playAll = async () => {
 </script>
 
 <style scoped>
-/* Typography System */
-.section-title {
-  @apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
-}
-
-/* Grid */
+/* 网格 */
 .songs-grid {
   grid-auto-rows: auto;
 }
diff --git a/src/renderer/views/home/components/HomeHero.vue b/src/renderer/views/home/components/HomeHero.vue
index 341809e..6bedd59 100644
--- a/src/renderer/views/home/components/HomeHero.vue
+++ b/src/renderer/views/home/components/HomeHero.vue
@@ -487,9 +487,11 @@ onActivated(() => {
   animation: fadeInUp 0.5s ease-out backwards;
 }
 
-/* FM Wave Animation */
+/* FM 波形动画 */
 .fm-wave-bar {
-  @apply w-[3px] rounded-full bg-white/60;
+  width: 3px;
+  border-radius: 9999px;
+  background-color: rgba(255, 255, 255, 0.6);
   height: 12px;
   animation: fmWave 1s ease-in-out infinite;
 }
diff --git a/src/renderer/views/home/components/HomeNewSongs.vue b/src/renderer/views/home/components/HomeNewSongs.vue
index 8c63240..afb5e20 100644
--- a/src/renderer/views/home/components/HomeNewSongs.vue
+++ b/src/renderer/views/home/components/HomeNewSongs.vue
@@ -108,12 +108,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Typography System */
-.section-title {
-  @apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
-}
-
-/* Optimized grid */
+/* 网格 */
 .songs-grid {
   grid-auto-rows: auto;
 }
diff --git a/src/renderer/views/home/components/HomePrivateContent.vue b/src/renderer/views/home/components/HomePrivateContent.vue
index 9bc5f71..f0a3371 100644
--- a/src/renderer/views/home/components/HomePrivateContent.vue
+++ b/src/renderer/views/home/components/HomePrivateContent.vue
@@ -127,12 +127,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Typography System */
-.section-title {
-  @apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
-}
-
-/* Grid */
+/* 网格 */
 .private-content-grid {
   grid-auto-rows: auto;
 }
diff --git a/src/renderer/views/home/index.vue b/src/renderer/views/home/index.vue
index aabe462..873ba92 100644
--- a/src/renderer/views/home/index.vue
+++ b/src/renderer/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-container h-full w-full bg-white dark:bg-black transition-colors duration-500">
     <n-scrollbar class="h-full">
-      <div class="home-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="home-content w-full pb-32 pt-6 page-padding">
         <!-- Hero Section -->
         <home-hero />
 
diff --git a/src/renderer/views/list/index.vue b/src/renderer/views/list/index.vue
index cfb51ce..da1819e 100644
--- a/src/renderer/views/list/index.vue
+++ b/src/renderer/views/list/index.vue
@@ -17,7 +17,7 @@
       :size="100"
       @scroll="handleScroll"
     >
-      <div class="list-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="list-content w-full pb-32 pt-6 page-padding">
         <!-- 列表标题 -->
         <div class="mb-8">
           <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
diff --git a/src/renderer/views/local-music/index.vue b/src/renderer/views/local-music/index.vue
index 16d9394..60afc74 100644
--- a/src/renderer/views/local-music/index.vue
+++ b/src/renderer/views/local-music/index.vue
@@ -15,7 +15,7 @@
           </div>
 
           <!-- Hero 内容 -->
-          <div class="hero-content relative z-10 px-4 md:px-8 pt-10 pb-8">
+          <div class="hero-content relative z-10 page-padding-x 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
@@ -48,7 +48,7 @@
 
         <!-- 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"
+          class="action-bar sticky top-0 z-20 page-padding-x 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">
             <!-- 左侧：搜索框 -->
@@ -111,7 +111,7 @@
         </section>
 
         <!-- 扫描进度提示 -->
-        <section v-if="localMusicStore.scanning" class="px-4 md:px-8 mt-6">
+        <section v-if="localMusicStore.scanning" class="page-padding-x mt-6">
           <div
             class="flex items-center gap-4 p-4 rounded-2xl bg-primary/5 dark:bg-primary/10 border border-primary/20"
           >
@@ -128,7 +128,7 @@
         </section>
 
         <!-- 歌曲列表 -->
-        <section class="list-section px-4 md:px-8 mt-6">
+        <section class="list-section page-padding-x mt-6">
           <!-- 空状态 -->
           <div
             v-if="!localMusicStore.scanning && filteredList.length === 0"
diff --git a/src/renderer/views/music/MusicListPage.vue b/src/renderer/views/music/MusicListPage.vue
index 9b60eb5..b785fae 100644
--- a/src/renderer/views/music/MusicListPage.vue
+++ b/src/renderer/views/music/MusicListPage.vue
@@ -20,7 +20,7 @@
             </div>
 
             <!-- Hero Content -->
-            <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-10 pb-8">
+            <div class="hero-content relative z-10 page-padding-x 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">
@@ -114,7 +114,7 @@
         <!-- 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"
+          class="action-bar sticky top-0 z-20 page-padding-x 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">
@@ -225,7 +225,7 @@
         </section>
 
         <!-- List Content -->
-        <section class="song-list-section px-4 md:px-8 mt-6">
+        <section class="song-list-section page-padding-x mt-6">
           <n-spin :show="loadingList">
             <div
               v-if="filteredSongs.length === 0 && searchKeyword"
diff --git a/src/renderer/views/mv/index.vue b/src/renderer/views/mv/index.vue
index e223d07..717ec6a 100644
--- a/src/renderer/views/mv/index.vue
+++ b/src/renderer/views/mv/index.vue
@@ -15,7 +15,7 @@
       :size="100"
       @scroll="handleScroll"
     >
-      <div class="mv-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="mv-content w-full pb-32 pt-6 page-padding">
         <!-- 页面标题 -->
         <div class="mb-8">
           <h1
diff --git a/src/renderer/views/playlist/ImportPlaylist.vue b/src/renderer/views/playlist/ImportPlaylist.vue
index 89477be..a376866 100644
--- a/src/renderer/views/playlist/ImportPlaylist.vue
+++ b/src/renderer/views/playlist/ImportPlaylist.vue
@@ -8,7 +8,7 @@
     ></div>
 
     <!-- 头部区域 -->
-    <div class="flex-shrink-0 z-10 px-6 pt-8 pb-4 relative">
+    <div class="flex-shrink-0 z-10 page-padding 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">
diff --git a/src/renderer/views/podcast/index.vue b/src/renderer/views/podcast/index.vue
index 6a3fad1..d9f4721 100644
--- a/src/renderer/views/podcast/index.vue
+++ b/src/renderer/views/podcast/index.vue
@@ -13,7 +13,7 @@
 
     <!-- Main Content Scrollbar -->
     <n-scrollbar ref="contentScrollbarRef" class="flex-1" :size="100" @scroll="handleScroll">
-      <div class="podcast-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="podcast-content w-full pb-32 pt-6 page-padding">
         <!-- Dashboard View (Recommend) -->
         <div v-if="currentCategoryId === -1">
           <!-- Hero Section -->
diff --git a/src/renderer/views/podcast/radio.vue b/src/renderer/views/podcast/radio.vue
index ec65184..26eec43 100644
--- a/src/renderer/views/podcast/radio.vue
+++ b/src/renderer/views/podcast/radio.vue
@@ -22,7 +22,7 @@
               </div>
 
               <!-- Hero Content -->
-              <div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
+              <div class="hero-content relative z-10 page-padding-x 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">
                   <!-- Radio Cover -->
                   <div class="radio-cover-wrapper relative group">
@@ -103,7 +103,7 @@
 
             <!-- 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-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+              class="action-bar sticky top-0 z-20 page-padding-x 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-3">
                 <div class="flex items-center gap-3">
@@ -139,7 +139,7 @@
             </section>
 
             <!-- Program List Section -->
-            <section class="tab-content px-4 md:px-8 py-6 md:py-8">
+            <section class="tab-content page-padding-x py-6 md:py-8">
               <div class="mb-6 flex items-center gap-3">
                 <h2
                   class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
diff --git a/src/renderer/views/search/SearchResult.vue b/src/renderer/views/search/SearchResult.vue
index 72c4a3a..add8ec0 100644
--- a/src/renderer/views/search/SearchResult.vue
+++ b/src/renderer/views/search/SearchResult.vue
@@ -5,7 +5,7 @@
     <n-scrollbar class="h-full" @scroll="handleScroll">
       <div class="search-result-content pb-32">
         <!-- Header Section -->
-        <section class="header-section px-4 md:px-8 pt-8 pb-6">
+        <section class="header-section page-padding-x pt-8 pb-6">
           <div class="flex flex-col gap-6">
             <div>
               <h1
@@ -40,7 +40,7 @@
         <!-- Action Bar (Sticky) -->
         <section
           v-if="searchDetail?.songs?.length && searchType === SEARCH_TYPE.MUSIC"
-          class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+          class="action-bar sticky top-0 z-20 page-padding-x py-3 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">
@@ -110,7 +110,7 @@
         </section>
 
         <!-- Results Section -->
-        <section class="results-section px-4 md:px-8 mt-6">
+        <section class="results-section page-padding-x mt-6">
           <n-spin :show="searchDetailLoading">
             <div
               v-if="searchDetailLoading && !isLoadingMore"
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
index cb4c30e..ceb9b56 100644
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -3,7 +3,7 @@
     class="search-page-container h-full w-full bg-white dark:bg-black transition-colors duration-500"
   >
     <n-scrollbar class="h-full">
-      <div class="search-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+      <div class="search-content w-full pb-32 pt-6 page-padding">
         <!-- Search Header / Hero -->
         <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
           <div>
diff --git a/src/renderer/views/set/index.vue b/src/renderer/views/set/index.vue
index 3fda6ea..efa9ac3 100644
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -2,7 +2,7 @@
   <div class="h-full w-full bg-white dark:bg-black transition-colors duration-500 flex flex-col">
     <!-- 顶部导航区 -->
     <div
-      class="flex-shrink-0 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10 pr-4 sm:pr-6 lg:pr-8 pt-6 pb-2"
+      class="flex-shrink-0 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10 page-padding pt-6 pb-2"
     >
       <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-6">
         {{ t('common.settings') }}
@@ -25,7 +25,7 @@
 
     <!-- 内容区域 -->
     <n-scrollbar class="flex-1">
-      <div class="w-full mx-auto pb-32 pt-6 px-4 sm:px-6 lg:px-8">
+      <div class="w-full mx-auto pb-32 pt-6 page-padding">
         <!-- 基础设置 -->
         <div v-show="currentSection === 'basic'" class="animate-fade-in">
           <setting-section :title="t('settings.sections.basic')">
diff --git a/src/renderer/views/toplist/index.vue b/src/renderer/views/toplist/index.vue
index 5e10dfe..0bdd0d2 100644
--- a/src/renderer/views/toplist/index.vue
+++ b/src/renderer/views/toplist/index.vue
@@ -1,7 +1,7 @@
 <template>
   <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">
+      <div class="toplist-content w-full pb-32 pt-6 page-padding">
         <!-- Hero Section -->
         <div class="mb-10">
           <h1
diff --git a/src/renderer/views/user/detail.vue b/src/renderer/views/user/detail.vue
index 8906d40..63e057f 100644
--- a/src/renderer/views/user/detail.vue
+++ b/src/renderer/views/user/detail.vue
@@ -1,143 +1,294 @@
 <template>
-  <div class="user-detail-page">
-    <n-scrollbar class="content-scrollbar">
-      <div v-loading="loading" class="content-wrapper">
-        <template v-if="userDetail">
-          <!-- 用户信息部分 -->
-          <div class="user-info-section" :class="setAnimationClass('animate__fadeInDown')">
-            <div
-              class="user-info-bg"
-              :style="{ backgroundImage: `url(${getImgUrl(userDetail.profile.backgroundUrl)})` }"
-            >
-              <div class="user-info-content">
-                <n-avatar
-                  round
-                  :size="80"
-                  :src="getImgUrl(userDetail.profile.avatarUrl, '80y80')"
-                />
-                <div class="user-info-detail">
-                  <div class="user-info-name">
-                    {{ userDetail.profile.nickname }}
-                    <n-tooltip v-if="isArtist(userDetail.profile)" trigger="hover">
-                      <template #trigger>
-                        <i class="ri-verified-badge-fill artist-icon"></i>
-                      </template>
-                      {{ t('user.detail.artist') }}
-                    </n-tooltip>
-                  </div>
-                  <div class="user-info-stats">
-                    <div class="user-info-stat-item" @click="showFollowerList">
-                      <div class="label">{{ userDetail.profile.followeds }}</div>
-                      <div>{{ t('user.profile.followers') }}</div>
-                    </div>
-                    <div class="user-info-stat-item" @click="showFollowList">
-                      <div class="label">{{ userDetail.profile.follows }}</div>
-                      <div>{{ t('user.profile.following') }}</div>
-                    </div>
-                    <div class="user-info-stat-item">
-                      <div class="label">{{ userDetail.level }}</div>
-                      <div>{{ t('user.profile.level') }}</div>
-                    </div>
-                  </div>
-                  <div class="user-info-signature">
-                    {{ userDetail.profile.signature || t('user.detail.noSignature') }}
+  <div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
+    <n-scrollbar class="h-full">
+      <div class="w-full pb-32">
+        <!-- Loading State -->
+        <div v-if="loading">
+          <!-- Hero Skeleton -->
+          <div class="relative h-[300px] overflow-hidden rounded-tl-2xl">
+            <div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
+            <div class="relative z-10 page-padding-x pt-8 pb-6">
+              <div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
+                <n-skeleton class="h-28 w-28 rounded-full md:h-40 md:w-40" />
+                <div class="flex-1 space-y-4 text-center md:text-left">
+                  <n-skeleton class="h-8 w-40" />
+                  <div class="flex justify-center gap-6 md:justify-start">
+                    <n-skeleton class="h-12 w-16" />
+                    <n-skeleton class="h-12 w-16" />
+                    <n-skeleton class="h-12 w-16" />
                   </div>
+                  <n-skeleton class="h-4 w-2/3" />
                 </div>
               </div>
             </div>
           </div>
-
-          <n-tabs type="line" animated>
-            <!-- 歌单列表 -->
-            <n-tab-pane name="playlists" :tab="t('user.detail.playlists')">
-              <div v-if="playList.length === 0" class="empty-message">
-                {{ t('user.detail.noPlaylists') }}
+          <!-- Content Skeleton -->
+          <div class="mt-8 page-padding-x">
+            <n-skeleton class="h-10 w-48 mb-6" />
+            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+              <div v-for="i in 10" :key="i" class="space-y-2">
+                <n-skeleton class="aspect-square w-full rounded-2xl" />
+                <n-skeleton text class="w-3/4" />
+                <n-skeleton text class="w-1/2" />
               </div>
-              <div v-else class="playlist-grid" :class="setAnimationClass('animate__fadeInUp')">
-                <div
-                  v-for="(item, index) in playList"
-                  :key="index"
-                  class="playlist-item"
-                  :class="setAnimationClass('animate__fadeInUp')"
-                  :style="setAnimationDelay(index, 50)"
-                  @click="openPlaylist(item)"
-                >
-                  <div class="playlist-cover">
-                    <n-image
-                      :src="getImgUrl(item.coverImgUrl, '200y200')"
-                      lazy
-                      preview-disabled
-                      class="cover-img"
-                    />
-                    <div class="play-count">
-                      <i class="ri-play-fill"></i>
-                      {{ formatNumber(item.playCount) }}
-                    </div>
-                  </div>
-                  <div class="playlist-info">
-                    <div class="playlist-name">{{ item.name }}</div>
-                    <div class="playlist-stats">
-                      {{ t('user.playlist.trackCount', { count: item.trackCount }) }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </n-tab-pane>
-
-            <!-- 听歌排行 -->
-            <n-tab-pane name="records" :tab="t('user.detail.records')">
-              <div v-if="!hasRecordPermission" class="empty-message">
-                <div class="no-permission">
-                  <i class="ri-lock-line text-2xl mr-2"></i>
-                  {{ t('user.detail.noRecordPermission', { name: userDetail.profile.nickname }) }}
-                </div>
-              </div>
-              <div v-else-if="!recordList || recordList.length === 0" class="empty-message">
-                {{ t('user.detail.noRecords') }}
-              </div>
-              <div v-else class="record-list">
-                <div
-                  v-for="(item, index) in recordList"
-                  :key="item.id"
-                  class="record-item"
-                  :class="setAnimationClass('animate__bounceInUp')"
-                  :style="setAnimationDelay(index, 25)"
-                >
-                  <song-item
-                    class="song-item"
-                    :index="index"
-                    :item="item"
-                    compact
-                    @play="handlePlay"
-                  />
-                </div>
-              </div>
-            </n-tab-pane>
-          </n-tabs>
-        </template>
-        <div v-else-if="!loading" class="empty-message">
-          {{ t('user.message.loadFailed') }}
+            </div>
+          </div>
         </div>
 
-        <!-- 底部留白 -->
-        <div class="pb-20"></div>
+        <!-- Main Content -->
+        <div v-else-if="userDetail">
+          <!-- Hero Section -->
+          <section class="hero-section relative overflow-hidden rounded-tl-2xl">
+            <!-- Background Image with Blur -->
+            <div class="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(userDetail.profile.backgroundUrl)})`
+                }"
+              />
+              <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>
+
+            <!-- Hero Content -->
+            <div class="relative z-10 page-padding-x 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">
+                <!-- User Avatar -->
+                <div class="relative group">
+                  <div
+                    class="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="relative w-28 h-28 md:w-40 md:h-40 rounded-full overflow-hidden shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
+                  >
+                    <img
+                      :src="getImgUrl(userDetail.profile.avatarUrl, '300y300')"
+                      :alt="userDetail.profile.nickname"
+                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                    />
+                  </div>
+                </div>
+
+                <!-- User Info -->
+                <div class="flex-1 text-center md:text-left">
+                  <!-- Badge -->
+                  <div class="mb-2 md:mb-3" v-if="isArtist(userDetail.profile)">
+                    <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="ri-verified-badge-fill text-sm" />
+                      {{ t('user.detail.artist') }}
+                    </span>
+                  </div>
+
+                  <h1
+                    class="text-2xl md:text-3xl lg:text-4xl font-bold text-neutral-900 dark:text-white tracking-tight"
+                  >
+                    {{ userDetail.profile.nickname }}
+                  </h1>
+
+                  <!-- Stats -->
+                  <div
+                    class="flex flex-wrap items-center justify-center md:justify-start gap-4 md:gap-6 mt-4 md:mt-5"
+                  >
+                    <div
+                      class="flex flex-col items-center gap-0.5 cursor-pointer px-3 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200"
+                      @click="showFollowerList"
+                    >
+                      <span class="text-lg font-bold text-neutral-900 dark:text-white">
+                        {{ formatNumber(userDetail.profile.followeds) }}
+                      </span>
+                      <span class="text-xs text-neutral-500 dark:text-neutral-400">
+                        {{ t('user.profile.followers') }}
+                      </span>
+                    </div>
+                    <div
+                      class="flex flex-col items-center gap-0.5 cursor-pointer px-3 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200"
+                      @click="showFollowList"
+                    >
+                      <span class="text-lg font-bold text-neutral-900 dark:text-white">
+                        {{ formatNumber(userDetail.profile.follows) }}
+                      </span>
+                      <span class="text-xs text-neutral-500 dark:text-neutral-400">
+                        {{ t('user.profile.following') }}
+                      </span>
+                    </div>
+                    <div class="flex flex-col items-center gap-0.5 px-3 py-1.5">
+                      <span class="text-lg font-bold text-neutral-900 dark:text-white">
+                        Lv.{{ userDetail.level }}
+                      </span>
+                      <span class="text-xs text-neutral-500 dark:text-neutral-400">
+                        {{ t('user.profile.level') }}
+                      </span>
+                    </div>
+                  </div>
+
+                  <!-- Signature -->
+                  <p
+                    v-if="userDetail.profile.signature"
+                    class="mt-3 text-sm text-neutral-500 dark:text-neutral-400 line-clamp-2 max-w-lg"
+                  >
+                    {{ userDetail.profile.signature }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Tab Navigation -->
+          <section class="page-padding-x pt-4 md:pt-6">
+            <div
+              class="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="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>
+                <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>
+
+          <!-- Tab Content -->
+          <section class="page-padding-x py-6 md:py-8">
+            <!-- Playlists Tab -->
+            <div v-show="activeTab === 'playlists'">
+              <div
+                v-if="playList.length === 0"
+                class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
+              >
+                <i class="ri-play-list-line text-5xl mb-4 opacity-50" />
+                <p>{{ t('user.detail.noPlaylists') }}</p>
+              </div>
+              <div
+                v-else
+                class="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="(item, index) in playList"
+                  :key="item.id || index"
+                  class="group cursor-pointer"
+                  :style="{ animationDelay: `${index * 0.03}s` }"
+                  @click="openPlaylist(item)"
+                >
+                  <!-- Cover -->
+                  <div class="relative aspect-square overflow-hidden rounded-2xl shadow-lg">
+                    <n-image
+                      :src="getImgUrl(item.coverImgUrl, '300y300')"
+                      lazy
+                      preview-disabled
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    />
+                    <!-- Play Count Overlay -->
+                    <div
+                      class="absolute top-2 right-2 px-2 py-0.5 rounded-full text-xs bg-black/50 text-white flex items-center gap-1"
+                    >
+                      <i class="ri-play-fill" />
+                      {{ formatNumber(item.playCount) }}
+                    </div>
+                    <!-- Play Overlay -->
+                    <div
+                      class="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="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="ri-play-fill text-xl text-neutral-900 ml-0.5" />
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Info -->
+                  <div class="mt-3">
+                    <h3
+                      class="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"
+                    >
+                      {{ item.name }}
+                    </h3>
+                    <p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                      {{ t('user.playlist.trackCount', { count: item.trackCount }) }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Records Tab -->
+            <div v-show="activeTab === 'records'">
+              <!-- No Permission -->
+              <div
+                v-if="!hasRecordPermission"
+                class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
+              >
+                <i class="ri-lock-line text-5xl mb-4 opacity-50" />
+                <p>
+                  {{
+                    t('user.detail.noRecordPermission', {
+                      name: userDetail.profile.nickname
+                    })
+                  }}
+                </p>
+              </div>
+              <!-- Empty -->
+              <div
+                v-else-if="!recordList || recordList.length === 0"
+                class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
+              >
+                <i class="ri-music-2-line text-5xl mb-4 opacity-50" />
+                <p>{{ t('user.detail.noRecords') }}</p>
+              </div>
+              <!-- Record List -->
+              <div v-else class="w-full">
+                <div v-for="(item, index) in recordList" :key="item.id" class="song-item-container">
+                  <song-item :index="index" :item="item" compact @play="handlePlay" />
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- Empty State -->
+        <div
+          v-else-if="!loading"
+          class="flex flex-col items-center justify-center min-h-[60vh] text-neutral-400 dark:text-neutral-500"
+        >
+          <i class="ri-user-line text-6xl mb-4 opacity-30" />
+          <p>{{ t('user.message.loadFailed') }}</p>
+        </div>
       </div>
     </n-scrollbar>
+
+    <play-bottom />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import type { IUserDetail } from '@/types/user';
-import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { formatNumber, getImgUrl } from '@/utils';
 
 defineOptions({
   name: 'UserDetail'
@@ -149,14 +300,18 @@ const route = useRoute();
 const message = useMessage();
 const playerStore = usePlayerStore();
 
-// 获取路由参数中的用户ID
 const userId = ref<number>(Number(route.params.uid));
-// 用户数据
 const userDetail = ref<IUserDetail>();
 const playList = ref<any[]>([]);
 const recordList = ref<any[]>([]);
 const loading = ref(true);
-const hasRecordPermission = ref(true); // 是否有权限查看听歌记录
+const hasRecordPermission = ref(true);
+const activeTab = ref('playlists');
+
+const tabs = computed(() => [
+  { value: 'playlists', label: t('user.detail.playlists') },
+  { value: 'records', label: t('user.detail.records') }
+]);
 
 // 加载用户数据
 const loadUserData = async () => {
@@ -168,30 +323,27 @@ const loadUserData = async () => {
 
   try {
     loading.value = true;
-    recordList.value = []; // 清空之前的记录
-    hasRecordPermission.value = true; // 重置权限状态
+    recordList.value = [];
+    hasRecordPermission.value = true;
 
-    // 分开处理请求，处理可能的错误
-    // 1. 获取用户详情和歌单列表
+    // 获取用户详情和歌单列表
     try {
       const [userDetailRes, playlistRes] = await Promise.all([
         getUserDetail(userId.value),
         getUserPlaylist(userId.value)
       ]);
-
       userDetail.value = userDetailRes.data;
       playList.value = playlistRes.data.playlist;
     } catch (error) {
       console.error('加载用户基本信息失败:', error);
-      message.error(t('user.message.loadBasicInfoFailed'));
-      return; // 如果基本信息加载失败，直接返回
+      message.error(t('user.message.loadFailed'));
+      return;
     }
 
-    // 2. 单独处理听歌记录请求，这个请求可能会无权限
+    // 单独处理听歌记录请求
     try {
       const recordRes = await getUserRecord(userId.value);
-
-      if (recordRes.data && recordRes.data.allData) {
+      if (recordRes.data?.allData) {
         recordList.value = recordRes.data.allData.map((item: any) => ({
           ...item,
           ...item.song,
@@ -200,11 +352,9 @@ const loadUserData = async () => {
       }
     } catch (error: any) {
       console.error('加载听歌记录失败:', error);
-      // 判断是否是无权限错误
       if (error.response?.data?.code === -2 || error.data?.code === -2) {
         hasRecordPermission.value = false;
       }
-      // 不显示错误消息，因为这是预期的情况
     }
   } catch (error) {
     console.error('加载用户数据失败:', error);
@@ -214,23 +364,21 @@ const loadUserData = async () => {
   }
 };
 
-// 使用onMounted和watch结合的方式解决路由变化问题
 onMounted(() => {
   loadUserData();
 });
 
-// 监听路由参数变化
 watch(
   () => route.params.uid,
   (newUid) => {
     if (newUid && Number(newUid) !== userId.value) {
       userId.value = Number(newUid);
+      activeTab.value = 'playlists';
       loadUserData();
     }
   }
 );
 
-// 替换显示歌单的方法
 const openPlaylist = (item: any) => {
   navigateToMusicList(router, {
     id: item.id,
@@ -241,188 +389,55 @@ const openPlaylist = (item: any) => {
   });
 };
 
-// 播放歌曲
 const handlePlay = () => {
   if (!recordList.value || recordList.value.length === 0) return;
-
-  const tracks = recordList.value;
-  playerStore.setPlayList(tracks);
+  playerStore.setPlayList(recordList.value);
 };
 
-// 显示关注列表
 const showFollowList = () => {
   if (!userDetail.value) return;
-
   router.push({
     path: `/user/follows`,
-    query: {
-      uid: userId.value.toString(),
-      name: userDetail.value.profile.nickname
-    }
+    query: { uid: userId.value.toString(), name: userDetail.value.profile.nickname }
   });
 };
 
-// 显示粉丝列表
 const showFollowerList = () => {
   if (!userDetail.value) return;
-
   router.push({
     path: `/user/followers`,
-    query: {
-      uid: userId.value.toString(),
-      name: userDetail.value.profile.nickname
-    }
+    query: { uid: userId.value.toString(), name: userDetail.value.profile.nickname }
   });
 };
 
-// 判断是否为歌手
 const isArtist = (profile: any) => {
   return profile.userType === 4 || profile.userType === 2 || profile.accountType === 2;
 };
 </script>
 
 <style lang="scss" scoped>
-.user-detail-page {
-  @apply h-full flex flex-col;
-
-  .content-scrollbar {
-    @apply flex-1 overflow-hidden;
-  }
-
-  .content-wrapper {
-    @apply flex flex-col;
-    @apply pr-4 pb-4;
-  }
+.hero-section {
+  min-height: 200px;
 }
 
-.user-info-section {
-  @apply mb-4;
-
-  .user-info-bg {
-    @apply rounded-xl overflow-hidden bg-cover bg-center relative;
-    height: 200px;
-
-    &:before {
-      content: '';
-      @apply absolute inset-0 bg-black bg-opacity-40;
-    }
-  }
-
-  .user-info-content {
-    @apply absolute inset-0 flex items-center p-6;
-  }
-
-  .user-info-detail {
-    @apply ml-4 text-white;
-
-    .user-info-name {
-      @apply text-xl font-bold flex items-center;
-
-      .artist-icon {
-        @apply ml-2 text-blue-500;
-      }
-    }
-
-    .user-info-stats {
-      @apply flex mt-2;
-
-      .user-info-stat-item {
-        @apply mr-6 text-center;
-
-        .label {
-          @apply text-lg font-bold;
-        }
-
-        &:nth-child(1),
-        &:nth-child(2) {
-          @apply cursor-pointer transition-all duration-200;
-          @apply hover:bg-black hover:bg-opacity-20 rounded-lg px-2;
-        }
-      }
-    }
-
-    .user-info-signature {
-      @apply mt-2 text-sm text-gray-200;
-      @apply line-clamp-2;
-    }
-  }
+.tab-indicator-enter-active,
+.tab-indicator-leave-active {
+  transition: all 0.2s ease;
 }
 
-.playlist-grid {
-  @apply grid gap-4 w-full py-4;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+.tab-indicator-enter-from,
+.tab-indicator-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
 }
 
-.playlist-item {
-  @apply flex flex-col rounded-xl overflow-hidden cursor-pointer;
-  @apply transition-all duration-200;
-  @apply hover:scale-105;
-
-  .playlist-cover {
-    @apply relative;
-    aspect-ratio: 1;
-
-    .cover-img {
-      @apply w-full h-full object-cover rounded-xl;
-    }
-
-    .play-count {
-      @apply absolute top-2 right-2 px-2 py-1 rounded-full text-xs;
-      @apply bg-black bg-opacity-50 text-white flex items-center;
-
-      i {
-        @apply mr-1;
-      }
-    }
-  }
-
-  .playlist-info {
-    @apply mt-2 px-1;
-
-    .playlist-name {
-      @apply text-gray-900 dark:text-white font-medium;
-      @apply line-clamp-2 text-sm;
-    }
-
-    .playlist-stats {
-      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
-    }
-  }
+.song-item-container {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 52px;
 }
 
-.record-list {
-  @apply p-4;
-
-  .record-item {
-    @apply flex items-center mb-2 rounded-2xl;
-    @apply bg-light-100 dark:bg-dark-100;
-    @apply transition-all duration-200;
-    @apply hover:bg-light-200 dark:hover:bg-dark-200;
-  }
-
-  .play-score {
-    @apply text-gray-500 dark:text-gray-400 mr-2 text-lg w-10 h-10 rounded-full flex items-center justify-center;
-  }
-
-  .song-item {
-    @apply flex-1;
-  }
-}
-
-.loading-container {
-  @apply flex justify-center items-center p-8;
-}
-
-.empty-message {
-  @apply flex justify-center items-center p-8;
-
-  .no-permission {
-    @apply flex flex-col items-center justify-center text-gray-500 dark:text-gray-400;
-    @apply p-4 rounded-lg;
-
-    i {
-      @apply text-3xl mb-2;
-    }
-  }
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-color);
 }
 </style>
diff --git a/src/renderer/views/user/followers.vue b/src/renderer/views/user/followers.vue
index e9c34c8..eb759c1 100644
--- a/src/renderer/views/user/followers.vue
+++ b/src/renderer/views/user/followers.vue
@@ -1,67 +1,128 @@
 <template>
-  <div class="followers-page">
-    <div class="content-wrapper">
-      <div class="page-title" v-if="targetUserName">
-        {{ targetUserName + t('user.follower.userFollowersTitle') }}
-      </div>
-      <div class="page-title" v-else>
-        {{ t('user.follower.myFollowersTitle') }}
-      </div>
-
-      <n-spin v-if="followerListLoading && followerList.length === 0" size="large" />
-      <n-scrollbar v-else class="scrollbar-container">
-        <div v-if="followerList.length === 0" class="empty-follower">
-          {{ t('user.follower.noFollowers') }}
-        </div>
-        <div class="follower-grid" :class="setAnimationClass('animate__fadeInUp')">
-          <div
-            v-for="(item, index) in followerList"
-            :key="index"
-            class="follower-item"
-            :class="setAnimationClass('animate__fadeInUp')"
-            :style="setAnimationDelay(index, 30)"
-            @click="viewUserDetail(item.userId, item.nickname)"
-          >
-            <div class="follower-item-inner">
-              <div class="follower-avatar">
-                <n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
-                <div v-if="isArtist(item)" class="artist-badge">
-                  <i class="ri-verified-badge-fill"></i>
-                </div>
-              </div>
-              <div class="follower-info">
-                <div class="follower-name" :class="{ 'is-artist': isArtist(item) }">
-                  {{ item.nickname }}
-                  <n-tooltip v-if="isArtist(item)" trigger="hover">
-                    <template #trigger>
-                      <i class="ri-verified-badge-fill artist-icon"></i>
-                    </template>
-                    歌手
-                  </n-tooltip>
-                </div>
-                <div class="follower-signature">
-                  {{ item.signature || '这个人很懒，什么都没留下' }}
-                </div>
+  <div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
+    <n-scrollbar class="h-full">
+      <div class="w-full pb-32">
+        <!-- Loading State -->
+        <div v-if="followerListLoading && followerList.length === 0">
+          <div class="page-padding-x pt-8">
+            <n-skeleton class="h-8 w-48 mb-6" />
+            <div
+              class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+            >
+              <div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
+                <n-skeleton class="h-20 w-20 rounded-full" />
+                <n-skeleton text class="w-16" />
+                <n-skeleton text class="w-24" />
               </div>
             </div>
           </div>
         </div>
 
-        <n-space v-if="followerListLoading" justify="center" class="loading-more">
-          <n-spin size="small" />
-        </n-space>
+        <!-- Main Content -->
+        <template v-else>
+          <!-- Header Section -->
+          <section class="page-padding-x pt-6 md:pt-8 pb-4">
+            <h1
+              class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white tracking-tight"
+            >
+              <template v-if="targetUserName">
+                {{ targetUserName + t('user.follower.userFollowersTitle') }}
+              </template>
+              <template v-else>
+                {{ t('user.follower.myFollowersTitle') }}
+              </template>
+            </h1>
+          </section>
 
-        <n-button
-          v-else-if="hasMoreFollowers"
-          class="load-more-btn"
-          secondary
-          block
-          @click="loadMoreFollowers"
-        >
-          {{ t('user.follower.loadMore') }}
-        </n-button>
-      </n-scrollbar>
-    </div>
+          <!-- Empty State -->
+          <div
+            v-if="followerList.length === 0"
+            class="flex flex-col items-center justify-center py-20 text-neutral-400 dark:text-neutral-500"
+          >
+            <i class="ri-user-heart-line text-5xl mb-4 opacity-50" />
+            <p>{{ t('user.follower.noFollowers') }}</p>
+          </div>
+
+          <!-- User Grid -->
+          <section v-else class="page-padding-x">
+            <div
+              class="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="(item, index) in followerList"
+                :key="item.userId"
+                class="user-card group cursor-pointer"
+                :style="{ animationDelay: `${index * 0.03}s` }"
+                @click="viewUserDetail(item.userId, item.nickname)"
+              >
+                <!-- Avatar -->
+                <div class="relative mx-auto w-fit">
+                  <div
+                    class="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden shadow-lg ring-2 ring-transparent group-hover:ring-primary/30 transition-all duration-300"
+                  >
+                    <img
+                      :src="getImgUrl(item.avatarUrl, '100y100')"
+                      :alt="item.nickname"
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                      loading="lazy"
+                    />
+                  </div>
+                  <!-- Artist Badge -->
+                  <div
+                    v-if="isArtist(item)"
+                    class="absolute -bottom-0.5 -right-0.5 w-6 h-6 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center shadow-md"
+                  >
+                    <i class="ri-verified-badge-fill text-primary text-sm" />
+                  </div>
+                </div>
+
+                <!-- Info -->
+                <div class="mt-3 text-center">
+                  <h3
+                    class="text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary transition-colors truncate px-1"
+                  >
+                    {{ item.nickname }}
+                  </h3>
+                  <p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500 line-clamp-1 px-1">
+                    {{ item.signature || t('user.follow.noSignature') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Loading More -->
+            <div v-if="followerListLoading" class="flex items-center justify-center gap-2 py-8">
+              <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') }}
+              </span>
+            </div>
+
+            <!-- Load More Button -->
+            <div v-else-if="hasMoreFollowers" class="flex justify-center py-8">
+              <button
+                class="px-6 py-2.5 rounded-full bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-700 dark:text-neutral-200 transition-all duration-200 hover:scale-105 active:scale-95"
+                @click="loadMoreFollowers"
+              >
+                {{ t('user.follower.loadMore') }}
+              </button>
+            </div>
+
+            <!-- No More -->
+            <div
+              v-else-if="followerList.length > 0"
+              class="text-center text-sm text-neutral-400 dark:text-neutral-500 py-8"
+            >
+              — {{ t('common.noMore') || '没有更多了' }} —
+            </div>
+          </section>
+        </template>
+      </div>
+    </n-scrollbar>
+
+    <play-bottom />
   </div>
 </template>
 
@@ -72,9 +133,10 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { getUserFollowers } from '@/api/user';
+import PlayBottom from '@/components/common/PlayBottom.vue';
 import { useUserStore } from '@/store/modules/user';
 import type { IUserFollow } from '@/types/user';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { getImgUrl } from '@/utils';
 import { checkLoginStatus as checkAuthStatus } from '@/utils/auth';
 
 defineOptions({
@@ -98,7 +160,6 @@ const targetUserName = ref<string>('');
 
 const user = computed(() => userStore.user);
 
-// 检查是否有指定用户ID
 const checkTargetUser = () => {
   const uid = route.query.uid;
   const name = route.query.name;
@@ -109,47 +170,37 @@ const checkTargetUser = () => {
     return true;
   }
 
-  // 如果没有指定用户ID，则显示当前登录用户的粉丝列表
   return checkLoginStatus();
 };
 
-// 检查登录状态
 const checkLoginStatus = () => {
   const loginInfo = checkAuthStatus();
-
   if (!loginInfo.isLoggedIn) {
     router.push('/login');
     return false;
   }
-
-  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
   if (!userStore.user && loginInfo.user) {
     userStore.setUser(loginInfo.user);
   }
-
   return true;
 };
 
 // 加载粉丝列表
 const loadFollowerList = async () => {
-  // 确定要加载哪个用户的粉丝列表
   const userId = targetUserId.value || user.value?.userId;
-
   if (!userId) return;
 
   try {
     followerListLoading.value = true;
     const { data } = await getUserFollowers(userId, followerLimit.value, followerOffset.value);
 
-    if (!data || !data.followeds) {
+    if (!data?.followeds) {
       hasMoreFollowers.value = false;
       return;
     }
 
     const newFollowers = data.followeds as IUserFollow[];
     followerList.value = [...followerList.value, ...newFollowers];
-
-    // 判断是否还有更多粉丝
     hasMoreFollowers.value = newFollowers.length >= followerLimit.value;
   } catch (error) {
     console.error('加载粉丝列表失败:', error);
@@ -159,13 +210,11 @@ const loadFollowerList = async () => {
   }
 };
 
-// 加载更多粉丝
 const loadMoreFollowers = async () => {
   followerOffset.value += followerLimit.value;
   await loadFollowerList();
 };
 
-// 查看用户详情
 const viewUserDetail = (userId: number, nickname: string) => {
   router.push({
     path: `/user/detail/${userId}`,
@@ -173,26 +222,22 @@ const viewUserDetail = (userId: number, nickname: string) => {
   });
 };
 
-// 判断是否为歌手
 const isArtist = (user: IUserFollow) => {
-  // 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
   return user.userType === 4 || user.userType === 2 || user.accountType === 2;
 };
 
-// 页面挂载时加载数据
 onMounted(() => {
   if (checkTargetUser()) {
     loadFollowerList();
   }
 });
 
-// 监听路由变化重新加载数据
 watch(
   () => route.query,
   (newQuery) => {
     if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
-      followerList.value = []; // 清空列表
-      followerOffset.value = 0; // 重置偏移量
+      followerList.value = [];
+      followerOffset.value = 0;
       checkTargetUser();
       loadFollowerList();
     }
@@ -201,83 +246,23 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.followers-page {
-  @apply h-full flex flex-col;
+.user-card {
+  animation: fadeInUp 0.4s ease backwards;
+}
 
-  .content-wrapper {
-    @apply flex-1 overflow-hidden p-4;
-    @apply flex flex-col;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  .scrollbar-container {
-    @apply h-full;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.follower-grid {
-  @apply grid gap-4 w-full;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.follower-item {
-  @apply rounded-xl overflow-hidden cursor-pointer;
-  @apply transition-all duration-200;
-  @apply hover:scale-105;
-
-  &-inner {
-    @apply flex flex-col items-center p-4 h-full;
-    @apply bg-light-100 dark:bg-dark-100;
-    @apply transition-all duration-200;
-    @apply hover:bg-light-200 dark:hover:bg-dark-200;
-  }
-
-  .follower-avatar {
-    @apply relative;
-
-    .artist-badge {
-      @apply absolute bottom-0 right-0;
-      @apply text-blue-500 text-lg;
-    }
-  }
-
-  .follower-info {
-    @apply mt-3 text-center w-full;
-
-    .follower-name {
-      @apply text-gray-900 dark:text-white text-base font-medium;
-      @apply flex items-center justify-center;
-
-      &.is-artist {
-        @apply text-blue-500;
-      }
-
-      .artist-icon {
-        @apply ml-1 text-blue-500;
-      }
-    }
-
-    .follower-signature {
-      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
-      @apply line-clamp-2 text-center;
-      max-height: 2.4em;
-    }
-  }
-}
-
-.empty-follower {
-  @apply text-center py-8 text-gray-500 dark:text-gray-400;
-}
-
-.load-more-btn {
-  @apply mt-4 mb-8;
-}
-
-.loading-more {
-  @apply my-4;
-}
-
-.page-title {
-  @apply text-xl font-bold mb-4;
-  @apply text-gray-900 dark:text-white;
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-color);
 }
 </style>
diff --git a/src/renderer/views/user/follows.vue b/src/renderer/views/user/follows.vue
index 9101536..e92b5b7 100644
--- a/src/renderer/views/user/follows.vue
+++ b/src/renderer/views/user/follows.vue
@@ -1,67 +1,128 @@
 <template>
-  <div class="follows-page">
-    <div class="content-wrapper">
-      <div class="page-title" v-if="targetUserName">
-        {{ targetUserName + t('user.follow.userFollowsTitle') }}
-      </div>
-      <div class="page-title" v-else>
-        {{ t('user.follow.myFollowsTitle') }}
-      </div>
-
-      <n-spin v-if="followListLoading && followList.length === 0" size="large" />
-      <n-scrollbar v-else class="scrollbar-container">
-        <div v-if="followList.length === 0" class="empty-follow">
-          {{ t('user.follow.noFollowings') }}
-        </div>
-        <div class="follow-grid" :class="setAnimationClass('animate__fadeInUp')">
-          <div
-            v-for="(item, index) in followList"
-            :key="index"
-            class="follow-item"
-            :class="setAnimationClass('animate__fadeInUp')"
-            :style="setAnimationDelay(index, 30)"
-            @click="viewUserDetail(item.userId, item.nickname)"
-          >
-            <div class="follow-item-inner">
-              <div class="follow-avatar">
-                <n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
-                <div v-if="isArtist(item)" class="artist-badge">
-                  <i class="ri-verified-badge-fill"></i>
-                </div>
-              </div>
-              <div class="follow-info">
-                <div class="follow-name" :class="{ 'is-artist': isArtist(item) }">
-                  {{ item.nickname }}
-                  <n-tooltip v-if="isArtist(item)" trigger="hover">
-                    <template #trigger>
-                      <i class="ri-verified-badge-fill artist-icon"></i>
-                    </template>
-                    歌手
-                  </n-tooltip>
-                </div>
-                <div class="follow-signature">
-                  {{ item.signature || t('user.follow.noSignature') }}
-                </div>
+  <div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
+    <n-scrollbar class="h-full">
+      <div class="w-full pb-32">
+        <!-- Loading State -->
+        <div v-if="followListLoading && followList.length === 0">
+          <div class="page-padding-x pt-8">
+            <n-skeleton class="h-8 w-48 mb-6" />
+            <div
+              class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+            >
+              <div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
+                <n-skeleton class="h-20 w-20 rounded-full" />
+                <n-skeleton text class="w-16" />
+                <n-skeleton text class="w-24" />
               </div>
             </div>
           </div>
         </div>
 
-        <n-space v-if="followListLoading" justify="center" class="loading-more">
-          <n-spin size="small" />
-        </n-space>
+        <!-- Main Content -->
+        <template v-else>
+          <!-- Header Section -->
+          <section class="page-padding-x pt-6 md:pt-8 pb-4">
+            <h1
+              class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white tracking-tight"
+            >
+              <template v-if="targetUserName">
+                {{ targetUserName + t('user.follow.userFollowsTitle') }}
+              </template>
+              <template v-else>
+                {{ t('user.follow.myFollowsTitle') }}
+              </template>
+            </h1>
+          </section>
 
-        <n-button
-          v-else-if="hasMoreFollows"
-          class="load-more-btn"
-          secondary
-          block
-          @click="loadMoreFollows"
-        >
-          {{ t('user.follow.loadMore') }}
-        </n-button>
-      </n-scrollbar>
-    </div>
+          <!-- Empty State -->
+          <div
+            v-if="followList.length === 0"
+            class="flex flex-col items-center justify-center py-20 text-neutral-400 dark:text-neutral-500"
+          >
+            <i class="ri-user-follow-line text-5xl mb-4 opacity-50" />
+            <p>{{ t('user.follow.noFollowings') }}</p>
+          </div>
+
+          <!-- User Grid -->
+          <section v-else class="page-padding-x">
+            <div
+              class="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="(item, index) in followList"
+                :key="item.userId"
+                class="user-card group cursor-pointer"
+                :style="{ animationDelay: `${index * 0.03}s` }"
+                @click="viewUserDetail(item.userId, item.nickname)"
+              >
+                <!-- Avatar -->
+                <div class="relative mx-auto w-fit">
+                  <div
+                    class="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden shadow-lg ring-2 ring-transparent group-hover:ring-primary/30 transition-all duration-300"
+                  >
+                    <img
+                      :src="getImgUrl(item.avatarUrl, '100y100')"
+                      :alt="item.nickname"
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                      loading="lazy"
+                    />
+                  </div>
+                  <!-- Artist Badge -->
+                  <div
+                    v-if="isArtist(item)"
+                    class="absolute -bottom-0.5 -right-0.5 w-6 h-6 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center shadow-md"
+                  >
+                    <i class="ri-verified-badge-fill text-primary text-sm" />
+                  </div>
+                </div>
+
+                <!-- Info -->
+                <div class="mt-3 text-center">
+                  <h3
+                    class="text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary transition-colors truncate px-1"
+                  >
+                    {{ item.nickname }}
+                  </h3>
+                  <p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500 line-clamp-1 px-1">
+                    {{ item.signature || t('user.follow.noSignature') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Loading More -->
+            <div v-if="followListLoading" class="flex items-center justify-center gap-2 py-8">
+              <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') }}
+              </span>
+            </div>
+
+            <!-- Load More Button -->
+            <div v-else-if="hasMoreFollows" class="flex justify-center py-8">
+              <button
+                class="px-6 py-2.5 rounded-full bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-700 dark:text-neutral-200 transition-all duration-200 hover:scale-105 active:scale-95"
+                @click="loadMoreFollows"
+              >
+                {{ t('user.follow.loadMore') }}
+              </button>
+            </div>
+
+            <!-- No More -->
+            <div
+              v-else-if="followList.length > 0"
+              class="text-center text-sm text-neutral-400 dark:text-neutral-500 py-8"
+            >
+              — {{ t('common.noMore') || '没有更多了' }} —
+            </div>
+          </section>
+        </template>
+      </div>
+    </n-scrollbar>
+
+    <play-bottom />
   </div>
 </template>
 
@@ -72,9 +133,10 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { getUserFollows } from '@/api/user';
+import PlayBottom from '@/components/common/PlayBottom.vue';
 import { useUserStore } from '@/store/modules/user';
 import type { IUserFollow } from '@/types/user';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { getImgUrl } from '@/utils';
 import { checkLoginStatus as checkAuthStatus } from '@/utils/auth';
 
 defineOptions({
@@ -109,47 +171,38 @@ const checkTargetUser = () => {
     return true;
   }
 
-  // 如果没有指定用户ID，则显示当前登录用户的关注列表
   return checkLoginStatus();
 };
 
 // 检查登录状态
 const checkLoginStatus = () => {
   const loginInfo = checkAuthStatus();
-
   if (!loginInfo.isLoggedIn) {
     router.push('/login');
     return false;
   }
-
-  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
   if (!userStore.user && loginInfo.user) {
     userStore.setUser(loginInfo.user);
   }
-
   return true;
 };
 
 // 加载关注列表
 const loadFollowList = async () => {
-  // 确定要加载哪个用户的关注列表
   const userId = targetUserId.value || user.value?.userId;
-
   if (!userId) return;
 
   try {
     followListLoading.value = true;
     const { data } = await getUserFollows(userId, followLimit.value, followOffset.value);
 
-    if (!data || !data.follow) {
+    if (!data?.follow) {
       hasMoreFollows.value = false;
       return;
     }
 
     const newFollows = data.follow as IUserFollow[];
     followList.value = [...followList.value, ...newFollows];
-
-    // 判断是否还有更多关注
     hasMoreFollows.value = newFollows.length >= followLimit.value;
   } catch (error) {
     console.error('加载关注列表失败:', error);
@@ -159,13 +212,11 @@ const loadFollowList = async () => {
   }
 };
 
-// 加载更多关注
 const loadMoreFollows = async () => {
   followOffset.value += followLimit.value;
   await loadFollowList();
 };
 
-// 查看用户详情
 const viewUserDetail = (userId: number, nickname: string) => {
   router.push({
     path: `/user/detail/${userId}`,
@@ -173,26 +224,22 @@ const viewUserDetail = (userId: number, nickname: string) => {
   });
 };
 
-// 判断是否为歌手
 const isArtist = (user: IUserFollow) => {
-  // 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
   return user.userType === 4 || user.userType === 2 || user.accountType === 2;
 };
 
-// 页面挂载时加载数据
 onMounted(() => {
   if (checkTargetUser()) {
     loadFollowList();
   }
 });
 
-// 监听路由变化重新加载数据
 watch(
   () => route.query,
   (newQuery) => {
     if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
-      followList.value = []; // 清空列表
-      followOffset.value = 0; // 重置偏移量
+      followList.value = [];
+      followOffset.value = 0;
       checkTargetUser();
       loadFollowList();
     }
@@ -201,83 +248,23 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.follows-page {
-  @apply h-full flex flex-col;
+.user-card {
+  animation: fadeInUp 0.4s ease backwards;
+}
 
-  .content-wrapper {
-    @apply flex-1 overflow-hidden p-4;
-    @apply flex flex-col;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  .scrollbar-container {
-    @apply h-full;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.follow-grid {
-  @apply grid gap-4 w-full;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.follow-item {
-  @apply rounded-xl overflow-hidden cursor-pointer;
-  @apply transition-all duration-200;
-  @apply hover:scale-105;
-
-  &-inner {
-    @apply flex flex-col items-center p-4 h-full;
-    @apply bg-light-100 dark:bg-dark-100;
-    @apply transition-all duration-200;
-    @apply hover:bg-light-200 dark:hover:bg-dark-200;
-  }
-
-  .follow-avatar {
-    @apply relative;
-
-    .artist-badge {
-      @apply absolute bottom-0 right-0;
-      @apply text-blue-500 text-lg;
-    }
-  }
-
-  .follow-info {
-    @apply mt-3 text-center w-full;
-
-    .follow-name {
-      @apply text-gray-900 dark:text-white text-base font-medium;
-      @apply flex items-center justify-center;
-
-      &.is-artist {
-        @apply text-blue-500;
-      }
-
-      .artist-icon {
-        @apply ml-1 text-blue-500;
-      }
-    }
-
-    .follow-signature {
-      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
-      @apply line-clamp-2 text-center;
-      max-height: 2.4em;
-    }
-  }
-}
-
-.empty-follow {
-  @apply text-center py-8 text-gray-500 dark:text-gray-400;
-}
-
-.load-more-btn {
-  @apply mt-4 mb-8;
-}
-
-.loading-more {
-  @apply my-4;
-}
-
-.page-title {
-  @apply text-xl font-bold mb-4;
-  @apply text-gray-900 dark:text-white;
+button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-color);
 }
 </style>
diff --git a/src/renderer/views/user/index.vue b/src/renderer/views/user/index.vue
index 3ee391a..32a5e7b 100644
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -585,7 +585,8 @@ const currentLoginType = computed(() => userStore.loginType);
 
 .mobile {
   .user-page {
-    @apply px-4;
+    padding-left: var(--page-pl);
+    padding-right: var(--page-pr);
   }
 
   .login-container {