From 44929dbfe4aa62739fc6416cde03e735792647cd Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:14:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/home/PlaylistType.vue | 166 -----
 .../components/home/RecommendAlbum.vue        | 115 ----
 .../components/home/RecommendSonglist.vue     |  73 ---
 src/renderer/components/home/TopBanner.vue    | 577 ------------------
 .../home/components/HomeAlbumSection.vue      | 199 ++++++
 .../views/home/components/HomeArtists.vue     | 183 ++++++
 .../views/home/components/HomeCard.vue        |  80 +++
 .../home/components/HomeDailyRecommend.vue    | 217 +++++++
 .../views/home/components/HomeHero.vue        | 535 ++++++++++++++++
 .../views/home/components/HomeListItem.vue    | 205 +++++++
 .../views/home/components/HomeNewSongs.vue    | 121 ++++
 .../home/components/HomePlaylistSection.vue   | 188 ++++++
 .../home/components/HomePrivateContent.vue    | 144 +++++
 .../views/home/components/NavCard.vue         | 262 ++++++++
 src/renderer/views/home/index.vue             |  98 +--
 15 files changed, 2192 insertions(+), 971 deletions(-)
 delete mode 100644 src/renderer/components/home/PlaylistType.vue
 delete mode 100644 src/renderer/components/home/RecommendAlbum.vue
 delete mode 100644 src/renderer/components/home/RecommendSonglist.vue
 delete mode 100644 src/renderer/components/home/TopBanner.vue
 create mode 100644 src/renderer/views/home/components/HomeAlbumSection.vue
 create mode 100644 src/renderer/views/home/components/HomeArtists.vue
 create mode 100644 src/renderer/views/home/components/HomeCard.vue
 create mode 100644 src/renderer/views/home/components/HomeDailyRecommend.vue
 create mode 100644 src/renderer/views/home/components/HomeHero.vue
 create mode 100644 src/renderer/views/home/components/HomeListItem.vue
 create mode 100644 src/renderer/views/home/components/HomeNewSongs.vue
 create mode 100644 src/renderer/views/home/components/HomePlaylistSection.vue
 create mode 100644 src/renderer/views/home/components/HomePrivateContent.vue
 create mode 100644 src/renderer/views/home/components/NavCard.vue

diff --git a/src/renderer/components/home/PlaylistType.vue b/src/renderer/components/home/PlaylistType.vue
deleted file mode 100644
index a8528fa..0000000
--- a/src/renderer/components/home/PlaylistType.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <!-- 歌单分类列表 -->
-  <div class="play-list-type">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
-      {{ t('comp.playlistType.title') }}
-    </div>
-    <div>
-      <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
-        <span
-          v-show="isShowAllPlaylistCategory || index <= 19 || isHiding"
-          class="play-list-type-item"
-          :class="
-            setAnimationClass(
-              index <= 19
-                ? 'animate__bounceIn'
-                : !isShowAllPlaylistCategory
-                  ? 'animate__backOutLeft'
-                  : 'animate__bounceIn'
-            ) +
-            ' ' +
-            'type-item-' +
-            index
-          "
-          :style="getAnimationDelay(index)"
-          @click="handleClickPlaylistType(item.name)"
-          >{{ item.name }}</span
-        >
-      </template>
-      <div
-        class="play-list-type-showall"
-        :class="setAnimationClass('animate__bounceIn')"
-        :style="
-          setAnimationDelay(
-            !isShowAllPlaylistCategory ? 25 : playlistCategory?.sub.length || 100 + 30
-          )
-        "
-        @click="handleToggleShowAllPlaylistCategory"
-      >
-        {{
-          !isShowAllPlaylistCategory ? t('comp.playlistType.showAll') : t('comp.playlistType.hide')
-        }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import { getPlaylistCategory } from '@/api/home';
-import type { IPlayListSort } from '@/types/playlist';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
-
-const { t } = useI18n();
-// 歌单分类
-const playlistCategory = ref<IPlayListSort>();
-// 是否显示全部歌单分类
-const isShowAllPlaylistCategory = ref<boolean>(false);
-const DELAY_TIME = 40;
-const getAnimationDelay = computed(() => {
-  return (index: number) => {
-    if (index <= 19) {
-      return setAnimationDelay(index, DELAY_TIME);
-    }
-    if (!isShowAllPlaylistCategory.value) {
-      const nowIndex = (playlistCategory.value?.sub.length || 0) - index;
-      return setAnimationDelay(nowIndex, DELAY_TIME);
-    }
-    return setAnimationDelay(index - 19, DELAY_TIME);
-  };
-});
-
-watch(isShowAllPlaylistCategory, (newVal) => {
-  if (!newVal) {
-    const elements = playlistCategory.value?.sub.map((_, index) =>
-      document.querySelector(`.type-item-${index}`)
-    ) as HTMLElement[];
-    elements
-      .slice(20)
-      .reverse()
-      .forEach((element, index) => {
-        if (element) {
-          setTimeout(
-            () => {
-              (element as HTMLElement).style.position = 'absolute';
-            },
-            index * DELAY_TIME + 400
-          );
-        }
-      });
-
-    setTimeout(
-      () => {
-        isHiding.value = false;
-        document.querySelectorAll('.play-list-type-item').forEach((element) => {
-          if (element) {
-            console.log('element', element);
-            (element as HTMLElement).style.position = 'none';
-          }
-        });
-      },
-      (playlistCategory.value?.sub.length || 0 - 19) * DELAY_TIME
-    );
-  } else {
-    document.querySelectorAll('.play-list-type-item').forEach((element) => {
-      if (element) {
-        (element as HTMLElement).style.position = 'none';
-      }
-    });
-  }
-});
-
-// 加载歌单分类
-const loadPlaylistCategory = async () => {
-  const { data } = await getPlaylistCategory();
-  playlistCategory.value = data;
-};
-
-const router = useRouter();
-const handleClickPlaylistType = (type: string) => {
-  router.push({
-    path: '/list',
-    query: {
-      type
-    }
-  });
-};
-
-const isHiding = ref<boolean>(false);
-const handleToggleShowAllPlaylistCategory = () => {
-  isShowAllPlaylistCategory.value = !isShowAllPlaylistCategory.value;
-  if (!isShowAllPlaylistCategory.value) {
-    isHiding.value = true;
-  }
-};
-// 页面初始化
-onMounted(() => {
-  loadPlaylistCategory();
-});
-</script>
-
-<style lang="scss" scoped>
-.title {
-  @apply text-lg font-bold mb-4 text-gray-900 dark:text-white;
-}
-.play-list-type {
-  width: 250px;
-  @apply mr-4;
-  &-item,
-  &-showall {
-    @apply bg-light dark:bg-black text-gray-900 dark:text-white;
-    @apply py-2 px-3 mr-3 mb-3 inline-block border border-gray-200 dark:border-gray-700 rounded-xl cursor-pointer hover:bg-green-600 hover:text-white transition;
-  }
-  &-showall {
-    @apply block text-center;
-  }
-}
-
-.mobile {
-  .play-list-type {
-    @apply mx-0 w-full;
-  }
-}
-</style>
diff --git a/src/renderer/components/home/RecommendAlbum.vue b/src/renderer/components/home/RecommendAlbum.vue
deleted file mode 100644
index dcd23ae..0000000
--- a/src/renderer/components/home/RecommendAlbum.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div class="recommend-album">
-    <div class="title" :class="setAnimationClass('animate__fadeInRight')">
-      {{ t('comp.recommendAlbum.title') }}
-    </div>
-    <div class="recommend-album-list">
-      <template v-for="(item, index) in albumData?.albums" :key="item.id">
-        <div
-          v-if="index < 6"
-          class="recommend-album-list-item"
-          :class="setAnimationClass('animate__backInUp')"
-          :style="setAnimationDelay(index, 100)"
-          @click="handleClick(item)"
-        >
-          <n-image
-            class="recommend-album-list-item-img"
-            :src="getImgUrl(item.blurPicUrl, '200y200')"
-            lazy
-            preview-disabled
-          />
-          <div class="recommend-album-list-item-content">{{ item.name }}</div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import { getNewAlbum } from '@/api/home';
-import { getAlbum } from '@/api/list';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
-import type { IAlbumNew } from '@/types/album';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
-
-const { t } = useI18n();
-const albumData = ref<IAlbumNew>();
-const loadAlbumList = async () => {
-  const { data } = await getNewAlbum();
-  albumData.value = data;
-};
-
-const router = useRouter();
-
-const handleClick = async (item: any) => {
-  openAlbum(item);
-};
-
-const openAlbum = async (album: any) => {
-  if (!album) return;
-
-  try {
-    const res = await getAlbum(album.id);
-    const { songs, album: albumInfo } = res.data;
-
-    const formattedSongs = songs.map((song: any) => {
-      song.al.picUrl = song.al.picUrl || albumInfo.picUrl;
-      song.picUrl = song.al.picUrl || albumInfo.picUrl || song.picUrl;
-      return song;
-    });
-
-    navigateToMusicList(router, {
-      id: album.id,
-      type: 'album',
-      name: album.name,
-      songList: formattedSongs,
-      listInfo: {
-        ...albumInfo,
-        creator: {
-          avatarUrl: albumInfo.artist.img1v1Url,
-          nickname: `${albumInfo.artist.name} - ${albumInfo.company}`
-        },
-        description: albumInfo.description
-      }
-    });
-  } catch (error) {
-    console.error('获取专辑详情失败:', error);
-  }
-};
-
-onMounted(() => {
-  loadAlbumList();
-});
-</script>
-
-<style lang="scss" scoped>
-.recommend-album {
-  @apply flex-1 mx-5;
-  .title {
-    @apply text-lg font-bold mb-4 text-gray-900 dark:text-white;
-  }
-
-  .recommend-album-list {
-    @apply grid grid-cols-2 grid-rows-3 gap-2;
-    &-item {
-      @apply rounded-xl overflow-hidden relative;
-      &-img {
-        @apply rounded-xl transition w-full h-full;
-      }
-      &:hover img {
-        filter: brightness(50%);
-      }
-      &-content {
-        @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl text-white bg-opacity-60 bg-black dark:bg-opacity-60 dark:bg-black;
-      }
-      &-content:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/renderer/components/home/RecommendSonglist.vue b/src/renderer/components/home/RecommendSonglist.vue
deleted file mode 100644
index 2c2b439..0000000
--- a/src/renderer/components/home/RecommendSonglist.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="recommend-music">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
-      {{ t('comp.recommendSonglist.title') }}
-    </div>
-    <div
-      v-show="recommendMusic?.result"
-      v-loading="loading"
-      class="recommend-music-list"
-      :class="setAnimationClass('animate__bounceInUp')"
-    >
-      <!-- 推荐音乐列表 -->
-      <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
-        <div
-          :class="setAnimationClass('animate__bounceInUp')"
-          :style="setAnimationDelay(index, 100)"
-        >
-          <song-item :item="item" @play="handlePlay" />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-
-import { getRecommendMusic } from '@/api/home';
-import SongItem from '@/components/common/SongItem.vue';
-import { usePlayerStore } from '@/store/modules/player';
-import type { IRecommendMusic } from '@/types/music';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
-
-const { t } = useI18n();
-const playerStore = usePlayerStore();
-// 推荐歌曲
-const recommendMusic = ref<IRecommendMusic>();
-const loading = ref(false);
-
-// 加载推荐歌曲
-const loadRecommendMusic = async () => {
-  loading.value = true;
-  const { data } = await getRecommendMusic({ limit: 10 });
-  recommendMusic.value = data;
-  loading.value = false;
-};
-
-// 页面初始化
-onMounted(() => {
-  loadRecommendMusic();
-});
-
-const handlePlay = () => {
-  if (recommendMusic.value?.result) {
-    playerStore.setPlayList(recommendMusic.value.result);
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.title {
-  @apply text-lg font-bold mb-4 text-gray-900 dark:text-white;
-}
-.recommend-music {
-  @apply flex-auto;
-  .text-ellipsis {
-    width: 100%;
-  }
-  &-list {
-    @apply rounded-3xl p-2 w-full border border-gray-200 dark:border-gray-700 bg-light dark:bg-black;
-  }
-}
-</style>
diff --git a/src/renderer/components/home/TopBanner.vue b/src/renderer/components/home/TopBanner.vue
deleted file mode 100644
index 89dce4e..0000000
--- a/src/renderer/components/home/TopBanner.vue
+++ /dev/null
@@ -1,577 +0,0 @@
-<template>
-  <div class="recommend-singer">
-    <div class="recommend-singer-list">
-      <n-carousel
-        v-if="hotSingerData?.artists.length"
-        slides-per-view="auto"
-        :show-dots="false"
-        :space-between="20"
-        draggable
-        show-arrow
-        :autoplay="false"
-      >
-        <n-carousel-item
-          :class="setAnimationClass('animate__backInRight')"
-          :style="getCarouselItemStyle(0, 100, 6)"
-        >
-          <div v-if="dayRecommendData" class="recommend-singer-item relative">
-            <div
-              :style="
-                setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '500y500'))
-              "
-              class="recommend-singer-item-bg"
-            ></div>
-            <div
-              class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-              @click="showDayRecommend"
-            >
-              <div class="font-bold text-lg">
-                {{ t('comp.recommendSinger.title') }}
-              </div>
-
-              <div class="mt-2">
-                <p v-for="item in getDisplayDaySongs.slice(0, 5)" :key="item.id" class="text-el">
-                  {{ item.name }}
-                  <br />
-                </p>
-              </div>
-            </div>
-          </div>
-        </n-carousel-item>
-
-        <n-carousel-item
-          v-if="userStore.user && userPlaylist.length"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="getCarouselItemStyleForPlaylist(userPlaylist.length)"
-        >
-          <div class="user-play">
-            <div class="user-play-title mb-3">
-              {{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
-            </div>
-            <div class="user-play-list" :class="getPlaylistGridClass(userPlaylist.length)">
-              <div
-                v-for="item in userPlaylist"
-                :key="item.id"
-                class="user-play-item"
-                @click="openPlaylist(item)"
-              >
-                <div class="user-play-item-img">
-                  <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
-                  <div class="user-play-item-title">
-                    <div class="user-play-item-title-name">{{ item.name }}</div>
-
-                    <div class="user-play-item-list">
-                      <div
-                        v-for="song in item.tracks"
-                        :key="song.id"
-                        class="user-play-item-list-name"
-                      >
-                        {{ song.name }}
-                      </div>
-                    </div>
-                  </div>
-                  <div class="user-play-item-count">
-                    <div class="user-play-item-count-tag">
-                      {{ t('common.songCount', { count: item.trackCount }) }}
-                    </div>
-                  </div>
-                  <div class="user-play-item-direct-play" @click.stop="handlePlayPlaylist(item.id)">
-                    <i class="iconfont icon-playfill text-xl text-white"></i>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </n-carousel-item>
-        <n-carousel-item
-          v-for="(item, index) in hotSingerData?.artists"
-          :key="item.id"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="getCarouselItemStyle(index + 1, 100, 6)"
-        >
-          <div
-            class="recommend-singer-item relative"
-            :class="setAnimationClass('animate__backInRight')"
-            :style="setAnimationDelay(index + 2, 100)"
-            @click="handleArtistClick(item.id)"
-          >
-            <div
-              :style="
-                setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))
-              "
-              class="recommend-singer-item-bg"
-            ></div>
-            <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
-              {{ t('common.songCount', { count: item.musicSize }) }}
-            </div>
-            <div class="recommend-singer-item-info z-10">
-              <div class="recommend-singer-item-info-name text-el text-right line-clamp-1">
-                {{ item.name }}
-              </div>
-            </div>
-            <!-- 播放按钮(hover时显示) -->
-            <div
-              class="recommend-singer-item-play-overlay"
-              @click.stop="handleArtistClick(item.id)"
-            >
-              <div class="recommend-singer-item-play-btn">
-                <i class="iconfont icon-playfill text-4xl"></i>
-              </div>
-            </div>
-          </div>
-        </n-carousel-item>
-      </n-carousel>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, watchEffect } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import { getHotSinger } from '@/api/home';
-import { getListDetail } from '@/api/list';
-import { getMusicDetail } from '@/api/music';
-import { getUserPlaylist } from '@/api/user';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
-import { useArtist } from '@/hooks/useArtist';
-import { usePlayerStore, useRecommendStore, useUserStore } from '@/store';
-import { Playlist } from '@/types/list';
-import type { IListDetail } from '@/types/listDetail';
-import { SongResult } from '@/types/music';
-import type { IHotSinger } from '@/types/singer';
-import {
-  getImgUrl,
-  isMobile,
-  setAnimationClass,
-  setAnimationDelay,
-  setBackgroundImg
-} from '@/utils';
-
-const userStore = useUserStore();
-const playerStore = usePlayerStore();
-const recommendStore = useRecommendStore();
-const router = useRouter();
-
-const { t } = useI18n();
-
-// 歌手信息
-const hotSingerData = ref<IHotSinger>();
-const dayRecommendData = computed(() => {
-  if (recommendStore.dailyRecommendSongs.length > 0) {
-    return {
-      dailySongs: recommendStore.dailyRecommendSongs
-    };
-  }
-  return null;
-});
-const userPlaylist = ref<Playlist[]>([]);
-
-// 为歌单弹窗添加的状态
-const playlistLoading = ref(false);
-const playlistItem = ref<Playlist | null>(null);
-const playlistDetail = ref<IListDetail | null>(null);
-
-const { navigateToArtist } = useArtist();
-
-/**
- * 获取轮播项的样式
- * @param index 项目索引（用于动画延迟）
- * @param delayStep 动画延迟的步长（毫秒）
- * @param totalItems 总共分成几等分（默认为5）
- * @param maxWidth 最大宽度（可选，单位为px）
- * @returns 样式字符串
- */
-const getCarouselItemStyle = (
-  index: number,
-  delayStep: number,
-  totalItems: number,
-  maxWidth?: number
-) => {
-  if (isMobile.value) {
-    return 'width: 30%;';
-  }
-  const animationDelay = setAnimationDelay(index, delayStep);
-  const width = `calc((100% / ${totalItems}) - 16px)`;
-  const maxWidthStyle = maxWidth ? `max-width: ${maxWidth}px;` : '';
-
-  return `${animationDelay}; width: ${width}; ${maxWidthStyle}`;
-};
-
-/**
- * 根据歌单数量获取轮播项的样式
- * @param playlistCount 歌单数量
- * @returns 样式字符串
- */
-const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
-  if (isMobile.value) {
-    return 'width: 100%;';
-  }
-  const animationDelay = setAnimationDelay(1, 100);
-  let width = '';
-  let maxWidth = '';
-
-  switch (playlistCount) {
-    case 1:
-      width = 'calc(100% / 4 - 16px)';
-      maxWidth = 'max-width: 180px;';
-      break;
-    case 2:
-      width = 'calc(100% / 3 - 16px)';
-      maxWidth = 'max-width: 380px;';
-      break;
-    case 3:
-      width = 'calc(100% / 2 - 16px)';
-      maxWidth = 'max-width: 520px;';
-      break;
-    default:
-      width = 'calc(100% / 1 - 16px)';
-      maxWidth = 'max-width: 656px;';
-  }
-
-  return `${animationDelay}; width: ${width}; ${maxWidth}`;
-};
-
-onMounted(async () => {
-  loadNonUserData();
-});
-
-const loadDayRecommendData = async () => {
-  await recommendStore.fetchDailyRecommendSongs();
-};
-
-// 加载不需要登录的数据
-const loadNonUserData = async () => {
-  try {
-    // 获取每日推荐（仅在用户未登录时加载，已登录用户会通过watchEffect触发loadDayRecommendData）
-    if (!userStore.user) {
-      await loadDayRecommendData();
-    }
-
-    // 获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-    hotSingerData.value = singerData;
-  } catch (error) {
-    console.error('加载热门歌手数据失败:', error);
-  }
-};
-
-// 加载需要登录的数据
-const loadUserData = async () => {
-  try {
-    if (userStore.user) {
-      const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
-      // 确保最多只显示4个歌单，并按播放次数排序
-      userPlaylist.value = (playlistData.playlist as Playlist[])
-        .sort((a, b) => b.playCount - a.playCount)
-        .slice(0, 4);
-    }
-  } catch (error) {
-    console.error('加载用户数据失败:', error);
-  }
-};
-
-const handleArtistClick = (id: number) => {
-  navigateToArtist(id);
-};
-const getDisplayDaySongs = computed(() => {
-  if (!dayRecommendData.value) {
-    return [];
-  }
-  return dayRecommendData.value.dailySongs.filter(
-    (song) => !playerStore.dislikeList.includes(song.id)
-  );
-});
-
-const showDayRecommend = () => {
-  if (!dayRecommendData.value?.dailySongs) return;
-
-  navigateToMusicList(router, {
-    type: 'dailyRecommend',
-    name: t('comp.recommendSinger.songlist'),
-    songList: getDisplayDaySongs.value,
-    canRemove: false
-  });
-};
-
-const openPlaylist = (item: any) => {
-  playlistItem.value = item;
-  playlistLoading.value = true;
-
-  getListDetail(item.id).then((res) => {
-    playlistDetail.value = res.data;
-    playlistLoading.value = false;
-
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: false
-    });
-  });
-};
-
-// 添加直接播放歌单的方法
-const handlePlayPlaylist = async (id: number) => {
-  try {
-    // 先显示加载状态
-    playlistLoading.value = true;
-
-    // 获取歌单详情
-    const { data } = await getListDetail(id);
-
-    if (data?.playlist) {
-      // 先使用已有的tracks开始播放（这些是已经在歌单详情中返回的前几首歌曲）
-      if (data.playlist.tracks?.length > 0) {
-        // 格式化歌曲列表
-        const initialSongs = data.playlist.tracks.map((track) => ({
-          ...track,
-          source: 'netease',
-          picUrl: track.al.picUrl
-        })) as unknown as SongResult[];
-
-        // 设置播放列表
-        playerStore.setPlayList(initialSongs);
-
-        // 开始播放第一首
-        await playerStore.setPlay(initialSongs[0]);
-
-        // 如果有trackIds，异步加载完整歌单
-        if (data.playlist.trackIds?.length > initialSongs.length) {
-          loadFullPlaylist(data.playlist.trackIds, initialSongs);
-        }
-      }
-    }
-
-    // 关闭加载状态
-    playlistLoading.value = false;
-  } catch (error) {
-    console.error('播放歌单失败:', error);
-    playlistLoading.value = false;
-  }
-};
-
-// 异步加载完整歌单
-const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongResult[]) => {
-  try {
-    // 获取已加载歌曲的ID集合，避免重复加载
-    const loadedIds = new Set(initialSongs.map((song) => song.id));
-
-    // 筛选出未加载的ID
-    const unloadedTrackIds = trackIds
-      .filter((item) => !loadedIds.has(item.id as number))
-      .map((item) => item.id);
-
-    if (unloadedTrackIds.length === 0) return;
-
-    // 分批获取歌曲详情，每批最多获取500首
-    const batchSize = 500;
-    const allSongs = [...initialSongs];
-
-    for (let i = 0; i < unloadedTrackIds.length; i += batchSize) {
-      const batchIds = unloadedTrackIds.slice(i, i + batchSize);
-      if (batchIds.length > 0) {
-        try {
-          const { data: songsData } = await getMusicDetail(batchIds);
-          if (songsData?.songs?.length) {
-            const formattedSongs = songsData.songs.map((item) => ({
-              ...item,
-              source: 'netease',
-              picUrl: item.al.picUrl
-            })) as unknown as SongResult[];
-
-            allSongs.push(...formattedSongs);
-          }
-        } catch (error) {
-          console.error('获取批次歌曲详情失败:', error);
-        }
-      }
-    }
-
-    // 更新完整的播放列表但保持当前播放的歌曲不变
-    if (allSongs.length > initialSongs.length) {
-      console.log('更新播放列表，总歌曲数:', allSongs.length);
-      playerStore.setPlayList(allSongs);
-    }
-  } catch (error) {
-    console.error('加载完整歌单失败:', error);
-  }
-};
-
-// 监听登录状态
-watchEffect(() => {
-  if (userStore.user) {
-    loadUserData();
-    loadDayRecommendData();
-  }
-});
-
-const getPlaylistGridClass = (length: number) => {
-  switch (length) {
-    case 1:
-      return 'one-column';
-    case 2:
-      return 'two-columns';
-    case 3:
-      return 'three-columns';
-    default:
-      return 'four-columns';
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.recommend-singer {
-  &-list {
-    @apply flex;
-    height: 220px;
-    margin-right: 20px;
-  }
-  &-item {
-    @apply flex-1 h-full rounded-3xl p-5 flex flex-col justify-between overflow-hidden relative;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-
-    &:hover {
-      transform: translateY(-5px);
-    }
-
-    &-bg {
-      @apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
-      filter: brightness(60%);
-    }
-
-    &-info {
-      @apply flex flex-col p-2;
-      &-name {
-        @apply text-gray-100 dark:text-gray-100;
-      }
-    }
-
-    &-count {
-      @apply text-gray-100 dark:text-gray-100;
-    }
-
-    &-play {
-      &-overlay {
-        @apply absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/20 z-20 opacity-0 transition-all duration-300 flex items-center justify-center;
-        backdrop-filter: blur(1px);
-
-        .recommend-singer-item:hover & {
-          opacity: 1;
-        }
-      }
-
-      &-btn {
-        @apply w-20 h-20 bg-transparent flex justify-center items-center text-white;
-        transform: translateY(50px) scale(0.8);
-        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-        .recommend-singer-item:hover & {
-          transform: translateY(0) scale(1);
-        }
-      }
-    }
-  }
-}
-
-.user-play {
-  @apply bg-light-300 dark:bg-dark-300 rounded-3xl px-4 py-3 h-full;
-  backdrop-filter: blur(20px);
-  &-title {
-    @apply text-gray-900 dark:text-gray-100 font-bold text-lg line-clamp-1;
-  }
-  &-list {
-    @apply grid gap-3 h-full;
-    &.one-column {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-      .user-play-item {
-        max-width: 100%;
-      }
-    }
-    &.two-columns {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      .user-play-item {
-        max-width: 100%;
-      }
-    }
-    &.three-columns {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      .user-play-item {
-        max-width: 100%;
-      }
-    }
-    &.four-columns {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      .user-play-item {
-        max-width: 100%;
-      }
-    }
-  }
-  &-item {
-    @apply rounded-2xl overflow-hidden flex flex-col;
-    height: 176px;
-
-    &-img {
-      @apply relative cursor-pointer transition-all duration-300;
-      height: 0;
-      width: 100%;
-      padding-bottom: 100%; /* 确保宽高比为1:1，即正方形 */
-      border-radius: 12px;
-      overflow: hidden;
-      &:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-      }
-
-      img {
-        @apply absolute inset-0 w-full h-full object-cover;
-      }
-    }
-    &-title {
-      @apply absolute top-0 left-0 right-0 p-2 bg-gradient-to-b from-black/70 to-transparent z-10;
-      &-name {
-        @apply text-white font-medium text-sm line-clamp-3;
-      }
-    }
-    &-count {
-      @apply absolute bottom-2 left-2 z-10;
-      &-tag {
-        @apply px-2 py-0.5 text-xs text-white bg-black/50 backdrop-blur-sm rounded-full;
-      }
-    }
-    &-direct-play {
-      @apply absolute bottom-2 right-2 z-20 w-10 h-10 rounded-full bg-green-600 hover:bg-green-700 flex items-center justify-center cursor-pointer transform scale-90 hover:scale-100 transition-all;
-      &:hover {
-        @apply shadow-lg;
-      }
-    }
-    &-play-btn {
-      @apply flex items-center justify-center;
-      transform: scale(0.8);
-      transition: transform 0.3s ease;
-
-      .user-play-item:hover & {
-        transform: scale(1);
-      }
-    }
-  }
-}
-.mobile {
-  .recommend-singer {
-    &-list {
-      height: 180px;
-      @apply ml-4;
-    }
-    &-item {
-      @apply p-2 rounded-xl;
-      &-bg {
-        @apply rounded-xl;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/renderer/views/home/components/HomeAlbumSection.vue b/src/renderer/views/home/components/HomeAlbumSection.vue
new file mode 100644
index 0000000..ecd36a3
--- /dev/null
+++ b/src/renderer/views/home/components/HomeAlbumSection.vue
@@ -0,0 +1,199 @@
+<template>
+  <section class="album-section">
+    <!-- Section Header -->
+    <div class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h2 class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white">
+          {{ title }}
+        </h2>
+        <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+      </div>
+      <button
+        class="group flex items-center gap-1.5 text-sm font-semibold text-neutral-400 transition-colors hover:text-primary dark:text-neutral-500 dark:hover:text-white"
+        @click="$emit('more')"
+      >
+        <span>{{ t('comp.more') }}</span>
+        <i class="ri-arrow-right-s-line text-base transition-transform group-hover:translate-x-1" />
+      </button>
+    </div>
+
+    <!-- Loading Skeleton -->
+    <div v-if="loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+      <div v-for="i in displayCount" :key="i" class="space-y-3">
+        <div class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800" />
+        <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+        <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+      </div>
+    </div>
+
+    <!-- Album Grid -->
+    <div
+      v-else-if="displayAlbums.length > 0"
+      class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"
+    >
+      <home-list-item
+        v-for="(album, index) in displayAlbums"
+        :key="album.id"
+        :cover="album.picUrl"
+        :title="album.name"
+        :subtitle="getArtistNames(album)"
+        :tracks="albumTracksMap[album.id] || []"
+        :animation-delay="calculateAnimationDelay(index, 0.04)"
+        @click="handleAlbumClick(album)"
+        @play="playAlbum(album)"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="flex flex-col items-center justify-center py-20 text-neutral-400">
+      <i class="ri-album-line mb-4 text-5xl opacity-20" />
+      <p class="text-sm font-medium">{{ t('comp.newAlbum.empty') }}</p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getTopAlbum } from '@/api/home';
+import { getAlbum } from '@/api/list';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import { usePlayerCoreStore } from '@/store/modules/playerCore';
+import { usePlaylistStore } from '@/store/modules/playlist';
+import { calculateAnimationDelay, isElectron } from '@/utils';
+
+import HomeListItem from './HomeListItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    limit?: number;
+    columns?: number;
+    rows?: number;
+  }>(),
+  {
+    limit: 10,
+    columns: 5,
+    rows: 2
+  }
+);
+
+defineEmits<{
+  (e: 'more'): void;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+const albums = ref<any[]>([]);
+const loading = ref(true);
+const albumTracksMap = reactive<Record<number, any[]>>({});
+
+// Calculate display count to fill exactly N rows
+const displayCount = computed(() => props.columns * props.rows);
+
+const displayAlbums = computed(() => {
+  const count = displayCount.value;
+  return albums.value.slice(0, count);
+});
+
+const fetchAlbums = async () => {
+  try {
+    const { data } = await getTopAlbum({ limit: props.limit || displayCount.value + 5 });
+    if (data.code === 200) {
+      albums.value = data.weekData || data.monthData || data.albums || [];
+      // Preload tracks for displayed albums (Electron only)
+      if (isElectron) {
+        preloadAllTracks();
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch albums:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const preloadAllTracks = async () => {
+  const albumsToLoad = displayAlbums.value;
+
+  // Load tracks in parallel with concurrency limit
+  const batchSize = 4;
+  for (let i = 0; i < albumsToLoad.length; i += batchSize) {
+    const batch = albumsToLoad.slice(i, i + batchSize);
+    await Promise.all(
+      batch.map(async (album) => {
+        if (albumTracksMap[album.id]) return;
+        try {
+          const { data } = await getAlbum(album.id);
+          if (data.code === 200 && data.songs) {
+            albumTracksMap[album.id] = data.songs.slice(0, 3).map((s: any) => ({
+              id: s.id,
+              name: s.name
+            }));
+          }
+        } catch (error) {
+          console.debug('Failed to load tracks for album:', album.id, error);
+        }
+      })
+    );
+  }
+};
+
+const getArtistNames = (album: any) => {
+  if (album.artists) {
+    return album.artists.map((ar: any) => ar.name).join(' / ');
+  }
+  if (album.artist) {
+    return album.artist.name;
+  }
+  return '';
+};
+
+const handleAlbumClick = async (album: any) => {
+  try {
+    navigateToMusicList(router, {
+      id: album.id,
+      type: 'album',
+      name: album.name,
+      listInfo: {
+        ...album,
+        coverImgUrl: album.picUrl
+      },
+      canRemove: false
+    });
+  } catch (error) {
+    console.error('Failed to navigate to album:', error);
+  }
+};
+
+const playAlbum = async (album: any) => {
+  try {
+    const { data } = await getAlbum(album.id);
+    if (data.code === 200 && data.songs?.length > 0) {
+      const playerCore = usePlayerCoreStore();
+      const playlistStore = usePlaylistStore();
+
+      const playlist = data.songs.map((s: any) => ({
+        id: s.id,
+        name: s.name,
+        picUrl: s.al?.picUrl || album.picUrl,
+        source: 'netease',
+        song: s,
+        ...s,
+        playLoading: false
+      }));
+
+      playlistStore.setPlayList(playlist, false, false);
+      await playerCore.handlePlayMusic(playlist[0], true);
+    }
+  } catch (error) {
+    console.error('Failed to play album:', error);
+  }
+};
+
+onMounted(() => {
+  fetchAlbums();
+});
+</script>
diff --git a/src/renderer/views/home/components/HomeArtists.vue b/src/renderer/views/home/components/HomeArtists.vue
new file mode 100644
index 0000000..3d7b763
--- /dev/null
+++ b/src/renderer/views/home/components/HomeArtists.vue
@@ -0,0 +1,183 @@
+<template>
+  <section class="artists-section">
+    <!-- Loading Skeleton -->
+    <div v-if="loading" class="artists-scroll flex gap-6 md:gap-8 overflow-x-hidden pb-4">
+      <div v-for="i in 8" :key="i" class="artist-skeleton flex flex-col items-center gap-3">
+        <div
+          class="h-20 w-20 md:h-24 md:w-24 lg:h-28 lg:w-28 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-800"
+        />
+        <div class="h-3 w-16 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
+      </div>
+    </div>
+
+    <!-- Artists Horizontal Scroll (Optimized with snap points) -->
+    <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"
+      @wheel="handleWheel"
+    >
+      <div class="artists-track flex gap-6 md:gap-8 lg:gap-10">
+        <div
+          v-for="(item, index) in artists"
+          :key="item.id"
+          class="artist-item animate-item group flex flex-shrink-0 snap-start flex-col items-center gap-3 md:gap-4 cursor-pointer"
+          :style="{ animationDelay: calculateAnimationDelay(index, 0.04) }"
+          @click="navigateToArtist(item.id)"
+        >
+          <!-- Artist Avatar -->
+          <div
+            class="artist-avatar relative h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 lg:h-32 lg:w-32 overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800 shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-2xl group-hover:shadow-primary/20"
+          >
+            <img
+              :src="getImgUrl(item.picUrl, '300y300')"
+              class="h-full w-full object-cover grayscale-[0.15] transition-all duration-700 group-hover:grayscale-0 group-hover:brightness-110"
+              loading="lazy"
+              :alt="item.name"
+            />
+            <!-- Gradient Overlay on Hover -->
+            <div
+              class="absolute inset-0 bg-gradient-to-tr from-primary/30 via-primary/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+            />
+          </div>
+
+          <!-- Artist Name -->
+          <span
+            class="artist-name text-xs sm:text-sm md:text-base font-semibold text-neutral-700 dark:text-neutral-300 transition-all duration-300 group-hover:text-primary dark:group-hover:text-white group-hover:scale-105"
+          >
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Scroll Indicators (Optional visual feedback) -->
+      <div
+        class="scroll-fade-left pointer-events-none absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-white dark:from-black to-transparent opacity-0 transition-opacity"
+        :class="{ 'opacity-100': showLeftFade }"
+      />
+      <div
+        class="scroll-fade-right pointer-events-none absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-white dark:from-black to-transparent opacity-0 transition-opacity"
+        :class="{ 'opacity-100': showRightFade }"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { getHotSinger } from '@/api/home';
+import { useArtist } from '@/hooks/useArtist';
+import { calculateAnimationDelay, getImgUrl } from '@/utils';
+
+const props = defineProps<{
+  title: string;
+  limit?: number;
+}>();
+
+const { navigateToArtist } = useArtist();
+const artists = ref<any[]>([]);
+const loading = ref(true);
+const scrollContainer = ref<HTMLElement | null>(null);
+const showLeftFade = ref(false);
+const showRightFade = ref(false);
+
+const fetchArtists = async () => {
+  try {
+    const { data } = await getHotSinger({ offset: 0, limit: props.limit || 10 });
+    if (data.code === 200) {
+      // 强制限制数量，确保不超过 limit
+      artists.value = data.artists.slice(0, props.limit || 10);
+    }
+  } catch (error) {
+    console.error('Failed to fetch hot artists:', error);
+  } finally {
+    loading.value = false;
+    // Update scroll indicators after content loads
+    setTimeout(updateScrollIndicators, 100);
+  }
+};
+
+// Enhanced horizontal scroll with wheel support
+const handleWheel = (e: WheelEvent) => {
+  if (!scrollContainer.value) return;
+
+  // Prevent default vertical scroll
+  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+    e.preventDefault();
+
+    // Convert vertical scroll to horizontal
+    scrollContainer.value.scrollBy({
+      left: e.deltaY,
+      behavior: 'auto' // Instant for smooth tracking
+    });
+  }
+
+  updateScrollIndicators();
+};
+
+// Update scroll fade indicators
+const updateScrollIndicators = () => {
+  if (!scrollContainer.value) return;
+
+  const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
+  showLeftFade.value = scrollLeft > 20;
+  showRightFade.value = scrollLeft < scrollWidth - clientWidth - 20;
+};
+
+onMounted(() => {
+  fetchArtists();
+
+  // Add scroll listener for fade indicators
+  if (scrollContainer.value) {
+    scrollContainer.value.addEventListener('scroll', updateScrollIndicators);
+  }
+});
+</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;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Smooth scroll behavior */
+  scroll-behavior: smooth;
+
+  /* Enable snap scrolling for better UX */
+  scroll-snap-type: x proximity;
+
+  /* Enable momentum scrolling on iOS */
+  -webkit-overflow-scrolling: touch;
+
+  /* Optimize for touch */
+  touch-action: pan-x;
+}
+
+.artists-track {
+  /* Ensure proper width for scrolling */
+  min-width: min-content;
+}
+
+.artist-item {
+  /* Snap alignment */
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+
+/* Scroll fade indicators */
+.scroll-fade-left,
+.scroll-fade-right {
+  transition: opacity 0.3s ease;
+}
+</style>
diff --git a/src/renderer/views/home/components/HomeCard.vue b/src/renderer/views/home/components/HomeCard.vue
new file mode 100644
index 0000000..a2ca433
--- /dev/null
+++ b/src/renderer/views/home/components/HomeCard.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="group relative overflow-hidden rounded-2xl bg-white/5 transition-all duration-300 hover:bg-white/10 hover:shadow-2xl hover:shadow-black/20 dark:bg-neutral-900/50"
+    :class="[containerClass]"
+    @click="$emit('click')"
+  >
+    <!-- 图片区域 -->
+    <div class="relative aspect-square overflow-hidden mb-3">
+      <img
+        v-if="image"
+        :src="image"
+        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+        loading="lazy"
+      />
+      <div v-else class="h-full w-full animate-pulse bg-neutral-200 dark:bg-neutral-800" />
+
+      <!-- 播放按钮遮罩 (Apple Music 风格) -->
+      <div
+        class="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+      >
+        <div
+          class="flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg backdrop-blur-sm transition-transform duration-300 hover:scale-110 active:scale-95"
+        >
+          <slot name="play-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="text-black ml-1"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </slot>
+        </div>
+      </div>
+
+      <!-- 右上角额外信息 (例如播放量) -->
+      <div
+        v-if="$slots.extra"
+        class="absolute top-2 right-2 flex items-center gap-1 rounded-full bg-black/40 px-2 py-0.5 text-[10px] text-white backdrop-blur-md"
+      >
+        <slot name="extra" />
+      </div>
+    </div>
+
+    <!-- 文字区域 -->
+    <div class="px-3 pb-4">
+      <h3
+        v-if="title"
+        class="truncate text-sm font-semibold text-neutral-800 dark:text-neutral-50 mb-0.5"
+      >
+        {{ title }}
+      </h3>
+      <p v-if="subtitle" class="truncate text-xs text-neutral-500 dark:text-neutral-300">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image?: string;
+  title?: string;
+  subtitle?: string;
+  containerClass?: string;
+}>();
+
+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
new file mode 100644
index 0000000..f1a2215
--- /dev/null
+++ b/src/renderer/views/home/components/HomeDailyRecommend.vue
@@ -0,0 +1,217 @@
+<template>
+  <section class="daily-recommend-section">
+    <!-- Section Header -->
+    <div class="section-header mb-6 md:mb-8 flex items-end justify-between">
+      <div>
+        <h2 class="section-title text-neutral-900 dark:text-white">
+          {{ title }}
+        </h2>
+        <div class="mt-1.5 h-1 w-12 rounded-full bg-primary" />
+      </div>
+      <div class="flex items-center gap-3">
+        <!-- Play All Button -->
+        <button
+          v-if="!loading && songs.length > 0"
+          class="play-all-btn flex items-center gap-1.5 text-xs md:text-sm font-bold text-primary dark:text-white hover:text-primary/80 dark:hover:text-white/80 transition-colors"
+          @click="playAll"
+        >
+          <i class="iconfont icon-playfill text-sm" />
+          <span>{{ t('musicList.playAll') }}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading Skeleton -->
+    <div
+      v-if="loading"
+      class="grid grid-cols-2 gap-4 md:gap-5 lg:gap-6 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="skeleton-item aspect-square animate-pulse rounded-2xl md:rounded-3xl bg-neutral-100 dark:bg-neutral-800/50"
+      />
+    </div>
+
+    <!-- Songs Grid -->
+    <div
+      v-else-if="songs.length > 0"
+      class="songs-grid grid grid-cols-2 gap-4 gap-y-8 md:gap-5 md:gap-y-10 lg:gap-6 lg:gap-y-12 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+    >
+      <div
+        v-for="(song, index) in songs.slice(0, limit)"
+        :key="song.id"
+        class="song-item animate-item group relative flex flex-col cursor-pointer"
+        :style="{ animationDelay: calculateAnimationDelay(index, 0.03) }"
+        @click="handleSongClick(song, index)"
+      >
+        <!-- Cover Container -->
+        <div class="cover-wrapper relative aspect-square">
+          <!-- 背景层 -->
+          <div
+            class="cover-bg absolute inset-0 rounded-2xl md:rounded-3xl bg-neutral-100 dark:bg-neutral-800 transition-shadow duration-300 group-hover:shadow-2xl group-hover:shadow-primary/10"
+          />
+
+          <!-- 图片层 -->
+          <div class="cover-container absolute inset-0 overflow-hidden rounded-2xl md:rounded-3xl">
+            <img
+              :src="getImgUrl(song.album?.picUrl || song.al?.picUrl, '500y500')"
+              class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+              loading="lazy"
+              :alt="song.name"
+            />
+          </div>
+
+          <!-- Play Overlay -->
+          <div
+            class="play-overlay absolute inset-0 flex items-center justify-center rounded-2xl md:rounded-3xl bg-black/0 opacity-0 backdrop-blur-0 transition-all duration-300 group-hover:bg-black/10 group-hover:opacity-100 group-hover:backdrop-blur-[2px]"
+          >
+            <div
+              class="play-button flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full bg-white shadow-2xl transition-all duration-300 scale-90 group-hover:scale-100 hover:scale-110 active:scale-95"
+            >
+              <i class="iconfont icon-playfill text-lg md:text-2xl text-neutral-900 ml-0.5" />
+            </div>
+          </div>
+
+          <!-- Recommended Badge -->
+          <div
+            class="badge absolute top-3 right-3 rounded-full bg-red-500 px-2.5 py-1 text-[10px] font-bold text-white"
+          >
+            {{ t('comp.dailyRecommend.badge') }}
+          </div>
+        </div>
+
+        <!-- Info -->
+        <div class="song-info mt-3 md:mt-4 px-0.5">
+          <h3
+            class="song-name line-clamp-2 text-sm md:text-base font-semibold leading-tight text-neutral-800 dark:text-neutral-100 transition-colors duration-200 group-hover:text-primary dark:group-hover:text-white"
+          >
+            {{ song.name }}
+          </h3>
+          <p
+            class="artist-name mt-1 md:mt-1.5 line-clamp-1 text-[10px] md:text-[11px] font-medium text-neutral-400 dark:text-neutral-500"
+          >
+            {{ getArtistNames(song) }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div
+      v-else
+      class="empty-state flex flex-col items-center justify-center py-20 text-neutral-400"
+    >
+      <i class="iconfont icon-music text-6xl mb-4 opacity-30" />
+      <p>{{ t('comp.dailyRecommend.empty') }}</p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onActivated, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useRecommendStore } from '@/store';
+import { calculateAnimationDelay, getImgUrl } from '@/utils';
+
+defineProps<{
+  title: string;
+  limit?: number;
+}>();
+
+const { t } = useI18n();
+const recommendStore = useRecommendStore();
+
+const songs = computed(() => recommendStore.dailyRecommendSongs);
+const loading = computed(() => songs.value.length === 0 && !recommendStore.lastFetchDate);
+
+onMounted(() => {
+  recommendStore.refreshIfStale();
+});
+
+// keep-alive 激活时检查是否跨天需要刷新
+onActivated(() => {
+  recommendStore.refreshIfStale();
+});
+
+const getArtistNames = (song: any) => {
+  if (song.artists) {
+    return song.artists.map((ar: any) => ar.name).join(' / ');
+  }
+  if (song.ar) {
+    return song.ar.map((ar: any) => ar.name).join(' / ');
+  }
+  return 'Unknown Artist';
+};
+
+const handleSongClick = async (_song: any, index: number) => {
+  const { usePlayerCoreStore } = await import('@/store/modules/playerCore');
+  const { usePlaylistStore } = await import('@/store/modules/playlist');
+
+  const playerCore = usePlayerCoreStore();
+  const playlistStore = usePlaylistStore();
+
+  const playlist = songs.value.map((s: any) => ({
+    id: s.id,
+    name: s.name,
+    picUrl: s.album?.picUrl || s.al?.picUrl,
+    source: 'netease',
+    song: s,
+    ...s,
+    playLoading: false
+  }));
+
+  playlistStore.setPlayList(playlist, false, false);
+  await playerCore.handlePlayMusic(playlist[index], true);
+};
+
+const playAll = async () => {
+  if (songs.value.length === 0) return;
+
+  const { usePlayerCoreStore } = await import('@/store/modules/playerCore');
+  const { usePlaylistStore } = await import('@/store/modules/playlist');
+
+  const playerCore = usePlayerCoreStore();
+  const playlistStore = usePlaylistStore();
+
+  const playlist = songs.value.map((s: any) => ({
+    id: s.id,
+    name: s.name,
+    picUrl: s.album?.picUrl || s.al?.picUrl,
+    source: 'netease',
+    song: s,
+    ...s,
+    playLoading: false
+  }));
+
+  playlistStore.setPlayList(playlist, false, false);
+  await playerCore.handlePlayMusic(playlist[0], true);
+};
+</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;
+}
+
+/* 确保圆角在任何情况下都保持不变 */
+.cover-wrapper {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.cover-container {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+</style>
diff --git a/src/renderer/views/home/components/HomeHero.vue b/src/renderer/views/home/components/HomeHero.vue
new file mode 100644
index 0000000..19e38b4
--- /dev/null
+++ b/src/renderer/views/home/components/HomeHero.vue
@@ -0,0 +1,535 @@
+<template>
+  <div class="hero-section mb-8 md:mb-12">
+    <!-- Skeleton Loading -->
+    <div v-if="loading" class="space-y-5">
+      <div class="flex gap-2 overflow-hidden">
+        <div
+          v-for="i in 6"
+          :key="i"
+          class="skeleton-pill h-10 w-24 flex-shrink-0 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-800"
+        />
+      </div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div
+          class="skeleton-card aspect-[2.2/1] animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+        />
+        <div
+          class="skeleton-card aspect-[2.2/1] animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+        />
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div v-else class="space-y-5">
+      <!-- Quick Navigation -->
+      <nav class="quick-nav flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+        <button
+          v-for="(item, index) in quickNavItems"
+          :key="item.key"
+          class="quick-nav-item group flex flex-shrink-0 items-center gap-2.5 rounded-full px-4 py-2 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+          :class="[
+            item.active
+              ? 'bg-primary text-white shadow-lg shadow-primary/25'
+              : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800/80 dark:text-neutral-200 dark:hover:bg-neutral-700/80'
+          ]"
+          :style="{ animationDelay: calculateAnimationDelay(index, 0.05) }"
+          @click="item.action"
+        >
+          <span
+            class="flex h-7 w-7 items-center justify-center rounded-full text-sm transition-transform duration-300 group-hover:scale-110"
+            :class="item.active ? 'bg-white/20' : item.iconBg"
+          >
+            <i :class="[item.icon, item.active ? 'text-white' : item.iconColor]" />
+          </span>
+          <span class="text-sm font-semibold whitespace-nowrap">{{ item.label }}</span>
+          <span
+            v-if="item.badge"
+            class="ml-0.5 rounded-full bg-white/30 px-1.5 py-0.5 text-[10px] font-bold"
+          >
+            {{ item.badge }}
+          </span>
+        </button>
+      </nav>
+
+      <!-- Feature Cards -->
+      <div class="cards-grid grid grid-cols-1 gap-4 md:grid-cols-5 lg:gap-5">
+        <!-- Daily Recommend Card -->
+        <div
+          class="daily-card group relative col-span-1 cursor-pointer overflow-hidden rounded-2xl md:col-span-3"
+          :style="{ animationDelay: calculateAnimationDelay(1, 0.08) }"
+          @click="showDayRecommend"
+        >
+          <!-- Background -->
+          <div class="absolute inset-0">
+            <img
+              v-if="dayRecommendCover"
+              :src="getImgUrl(dayRecommendCover, '600y600')"
+              alt=""
+              class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+            />
+            <div
+              class="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/70"
+            />
+          </div>
+
+          <!-- Content -->
+          <div
+            class="relative z-10 flex h-full min-h-[160px] flex-col justify-between p-5 md:min-h-[180px] md:p-6"
+          >
+            <div class="flex items-start justify-between">
+              <div class="flex items-center gap-2">
+                <span
+                  class="flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm"
+                >
+                  <i class="ri-calendar-check-fill" />
+                  {{ t('comp.homeHero.dailyRecommend') }}
+                </span>
+              </div>
+              <span class="text-xs font-medium text-white/70">
+                {{ dayRecommendSongs.length }} {{ t('comp.homeHero.songs') }}
+              </span>
+            </div>
+
+            <div class="flex items-end justify-between gap-4">
+              <!-- Song Preview List -->
+              <div v-if="dayRecommendSongs.length > 0" class="flex-1 space-y-1.5">
+                <div
+                  v-for="(song, idx) in dayRecommendSongs.slice(0, 3)"
+                  :key="song.id"
+                  class="flex items-center gap-2 text-white/90"
+                >
+                  <span class="w-4 text-center text-xs font-bold text-white/50">{{ idx + 1 }}</span>
+                  <span class="max-w-[140px] truncate text-sm font-medium md:max-w-[200px]">{{
+                    song.name
+                  }}</span>
+                  <span class="max-w-[80px] truncate text-xs text-white/50 md:max-w-[120px]">
+                    {{ song.ar?.[0]?.name }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- Play Button -->
+              <button
+                class="play-btn flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-white text-neutral-900 shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl active:scale-95"
+              >
+                <i class="ri-play-fill ml-0.5 text-xl" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Personal FM Card -->
+        <div
+          class="fm-card group relative col-span-1 cursor-pointer overflow-hidden rounded-2xl md:col-span-2"
+          :style="{ animationDelay: calculateAnimationDelay(2, 0.08) }"
+          @click="playPersonalFm"
+        >
+          <!-- Gradient Background -->
+          <div
+            class="absolute inset-0 bg-gradient-to-br from-violet-600 via-purple-600 to-fuchsia-600"
+          >
+            <img
+              v-if="personalFmCover"
+              :src="getImgUrl(personalFmCover, '400y400')"
+              alt=""
+              class="h-full w-full object-cover opacity-30 mix-blend-overlay transition-transform duration-700 group-hover:scale-105"
+            />
+          </div>
+
+          <!-- Wave Animation -->
+          <div class="fm-waves absolute right-4 top-4 flex items-end gap-[3px]">
+            <span
+              v-for="i in 4"
+              :key="i"
+              class="fm-wave-bar"
+              :style="{ animationDelay: `${i * 0.15}s` }"
+            />
+          </div>
+
+          <!-- Content -->
+          <div
+            class="relative z-10 flex h-full min-h-[160px] flex-col justify-between p-5 md:min-h-[180px] md:p-6"
+          >
+            <div>
+              <span
+                class="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm"
+              >
+                <i class="ri-radio-fill" />
+                私人FM
+              </span>
+            </div>
+
+            <div class="flex items-end justify-between gap-4">
+              <div v-if="personalFmSong" class="flex-1 min-w-0">
+                <p class="truncate text-base font-bold text-white md:text-lg">
+                  {{ personalFmSong.name }}
+                </p>
+                <p class="mt-1 truncate text-sm text-white/70">
+                  {{ personalFmSong.artists?.[0]?.name }}
+                </p>
+              </div>
+              <div v-else class="flex-1">
+                <p class="text-base font-bold text-white md:text-lg">发现新音乐</p>
+                <p class="mt-1 text-sm text-white/70">根据你的喜好推荐</p>
+              </div>
+
+              <button
+                class="play-btn flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-white/95 text-purple-600 shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl active:scale-95"
+              >
+                <i class="ri-play-fill ml-0.5 text-xl" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Hot Search Bar -->
+      <div
+        v-if="hotSearchList.length > 0"
+        class="hot-search flex items-center gap-3 rounded-xl bg-neutral-100 px-4 py-3 dark:bg-neutral-800/60"
+        :style="{ animationDelay: calculateAnimationDelay(3, 0.08) }"
+      >
+        <div class="flex flex-shrink-0 items-center gap-1.5 text-rose-500">
+          <i class="ri-fire-fill text-base" />
+          <span class="text-xs font-bold">热搜</span>
+        </div>
+        <div class="hot-list flex flex-1 gap-2 overflow-x-auto scrollbar-hide">
+          <button
+            v-for="(item, idx) in hotSearchList.slice(0, 10)"
+            :key="idx"
+            class="hot-item flex flex-shrink-0 items-center gap-1.5 rounded-full bg-white px-3 py-1.5 text-xs font-medium text-neutral-600 transition-all duration-200 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600 dark:hover:text-white"
+            @click="searchHotKeyword(item.searchWord)"
+          >
+            <span
+              class="font-bold"
+              :class="idx < 3 ? 'text-rose-500' : 'text-neutral-400 dark:text-neutral-500'"
+            >
+              {{ idx + 1 }}
+            </span>
+            <span class="max-w-[80px] truncate">{{ item.searchWord }}</span>
+            <i v-if="item.iconType === 1" class="ri-fire-fill text-[10px] text-rose-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onActivated, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getHotSearch, getPersonalFM } from '@/api/home';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import { useIntelligenceModeStore, useRecommendStore } from '@/store';
+import { calculateAnimationDelay, getImgUrl } from '@/utils';
+
+const { t } = useI18n();
+const router = useRouter();
+const recommendStore = useRecommendStore();
+const intelligenceModeStore = useIntelligenceModeStore();
+
+const loading = ref(false);
+const personalFmSong = ref<any>(null);
+const hotSearchList = ref<any[]>([]);
+
+const dayRecommendSongs = computed(() => recommendStore.dailyRecommendSongs);
+const dayRecommendCover = computed(() => dayRecommendSongs.value[0]?.al?.picUrl || '');
+const personalFmCover = computed(() => personalFmSong.value?.album?.picUrl || '');
+const isIntelligenceMode = computed(() => intelligenceModeStore.isIntelligenceMode);
+
+// Quick Nav Configuration
+const quickNavItems = computed(() => [
+  {
+    key: 'intelligence',
+    label: t('comp.homeHero.intelligenceMode'),
+    icon: 'ri-heart-pulse-fill',
+    iconBg: 'bg-rose-100 dark:bg-rose-900/40',
+    iconColor: 'text-rose-500 dark:text-rose-400',
+    active: isIntelligenceMode.value,
+    badge: isIntelligenceMode.value ? t('comp.homeHero.playing') : null,
+    action: toggleIntelligenceMode
+  },
+  {
+    key: 'toplist',
+    label: t('comp.toplist'),
+    icon: 'ri-trophy-fill',
+    iconBg: 'bg-amber-100 dark:bg-amber-900/40',
+    iconColor: 'text-amber-500 dark:text-amber-400',
+    active: false,
+    badge: null,
+    action: () => router.push('/toplist')
+  },
+  {
+    key: 'mv',
+    label: t('comp.mv'),
+    icon: 'ri-movie-2-fill',
+    iconBg: 'bg-violet-100 dark:bg-violet-900/40',
+    iconColor: 'text-violet-500 dark:text-violet-400',
+    active: false,
+    badge: null,
+    action: () => router.push('/mv')
+  },
+  {
+    key: 'playlist',
+    label: t('comp.list'),
+    icon: 'ri-play-list-2-fill',
+    iconBg: 'bg-sky-100 dark:bg-sky-900/40',
+    iconColor: 'text-sky-500 dark:text-sky-400',
+    active: false,
+    badge: null,
+    action: () => router.push('/list')
+  },
+  {
+    key: 'album',
+    label: t('comp.newAlbum.title'),
+    icon: 'ri-album-fill',
+    iconBg: 'bg-orange-100 dark:bg-orange-900/40',
+    iconColor: 'text-orange-500 dark:text-orange-400',
+    active: false,
+    badge: null,
+    action: () => router.push('/album')
+  },
+  {
+    key: 'history',
+    label: t('comp.history'),
+    icon: 'ri-history-fill',
+    iconBg: 'bg-emerald-100 dark:bg-emerald-900/40',
+    iconColor: 'text-emerald-500 dark:text-emerald-400',
+    active: false,
+    badge: null,
+    action: () => router.push('/history')
+  }
+]);
+
+const fetchHeroData = async () => {
+  try {
+    loading.value = true;
+    const promises: Promise<any>[] = [];
+
+    // 使用 refreshIfStale 检查是否需要刷新每日推荐
+    promises.push(recommendStore.refreshIfStale());
+
+    // Fetch Personal FM
+    promises.push(
+      getPersonalFM()
+        .then((res: any) => {
+          if (res.data?.[0]) {
+            personalFmSong.value = res.data[0];
+          }
+        })
+        .catch(() => {})
+    );
+
+    // Fetch Hot Search
+    promises.push(
+      getHotSearch()
+        .then((res: any) => {
+          if (res.data) {
+            hotSearchList.value = res.data;
+          }
+        })
+        .catch(() => {})
+    );
+
+    await Promise.all(promises);
+  } catch (error) {
+    console.error('Failed to fetch hero data:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const showDayRecommend = () => {
+  if (dayRecommendSongs.value.length === 0) return;
+  navigateToMusicList(router, {
+    type: 'dailyRecommend',
+    name: t('comp.recommendSinger.songlist'),
+    songList: dayRecommendSongs.value,
+    canRemove: false
+  });
+};
+
+const toggleIntelligenceMode = () => {
+  if (isIntelligenceMode.value) {
+    intelligenceModeStore.clearIntelligenceMode();
+  } else {
+    intelligenceModeStore.playIntelligenceMode();
+  }
+};
+
+const playPersonalFm = async () => {
+  if (!personalFmSong.value) return;
+
+  try {
+    const { usePlayerCoreStore } = await import('@/store/modules/playerCore');
+    const { usePlaylistStore } = await import('@/store/modules/playlist');
+
+    const playerCore = usePlayerCoreStore();
+    const playlistStore = usePlaylistStore();
+
+    const song = personalFmSong.value;
+    const playlist = [
+      {
+        id: song.id,
+        name: song.name,
+        picUrl: song.al?.picUrl || song.album?.picUrl,
+        source: 'netease',
+        song,
+        ...song,
+        playLoading: false
+      }
+    ];
+
+    playlistStore.setPlayList(playlist, false, false);
+    await playerCore.handlePlayMusic(playlist[0], true);
+  } catch (error) {
+    console.error('Failed to play Personal FM:', error);
+  }
+};
+
+const searchHotKeyword = (keyword: string) => {
+  router.push({ path: '/search-result', query: { keyword } });
+};
+
+onMounted(() => {
+  fetchHeroData();
+});
+
+// keep-alive 激活时检查是否跨天需要刷新
+onActivated(() => {
+  recommendStore.refreshIfStale();
+});
+</script>
+
+<style scoped>
+/* Hide scrollbar */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Quick Nav Animation */
+.quick-nav-item {
+  animation: fadeInUp 0.5s ease-out backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Cards Animation */
+.daily-card,
+.fm-card {
+  animation: fadeInScale 0.6s ease-out backwards;
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Hot Search Animation */
+.hot-search {
+  animation: fadeInUp 0.5s ease-out backwards;
+}
+
+/* FM Wave Animation */
+.fm-wave-bar {
+  @apply w-[3px] rounded-full bg-white/60;
+  height: 12px;
+  animation: fmWave 1s ease-in-out infinite;
+}
+
+.fm-wave-bar:nth-child(1) {
+  height: 8px;
+}
+
+.fm-wave-bar:nth-child(2) {
+  height: 16px;
+}
+
+.fm-wave-bar:nth-child(3) {
+  height: 10px;
+}
+
+.fm-wave-bar:nth-child(4) {
+  height: 14px;
+}
+
+@keyframes fmWave {
+  0%,
+  100% {
+    transform: scaleY(1);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scaleY(1.6);
+    opacity: 1;
+  }
+}
+
+/* Play Button Hover Glow */
+.play-btn {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.play-btn:hover {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+}
+
+/* Skeleton Shimmer */
+.skeleton-pill,
+.skeleton-card {
+  background: linear-gradient(
+    90deg,
+    theme('colors.neutral.200') 25%,
+    theme('colors.neutral.100') 50%,
+    theme('colors.neutral.200') 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.dark .skeleton-pill,
+.dark .skeleton-card {
+  background: linear-gradient(
+    90deg,
+    theme('colors.neutral.800') 25%,
+    theme('colors.neutral.700') 50%,
+    theme('colors.neutral.800') 75%
+  );
+  background-size: 200% 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>
diff --git a/src/renderer/views/home/components/HomeListItem.vue b/src/renderer/views/home/components/HomeListItem.vue
new file mode 100644
index 0000000..955fea5
--- /dev/null
+++ b/src/renderer/views/home/components/HomeListItem.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="list-item group cursor-pointer" :style="{ animationDelay }" @click="$emit('click')">
+    <!-- Cover -->
+    <div
+      class="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-300 ease-out group-hover:shadow-xl dark:bg-neutral-800"
+    >
+      <img
+        ref="coverRef"
+        :src="getImgUrl(cover, '512y512')"
+        class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
+        loading="lazy"
+        :alt="title"
+        crossorigin="anonymous"
+        @load="extractColor"
+      />
+
+      <!-- Hover Overlay with Song Preview -->
+      <div
+        class="absolute inset-0 flex items-end opacity-0 transition-all duration-500 ease-out group-hover:opacity-100"
+        :style="overlayStyle"
+      >
+        <!-- Song Preview + Play Button Container -->
+        <div class="flex w-full items-end justify-between gap-3 p-4">
+          <!-- Song List -->
+          <div
+            class="min-w-0 flex-1 translate-y-3 space-y-1.5 transition-all duration-500 ease-out group-hover:translate-y-0"
+          >
+            <div
+              v-for="(track, idx) in displayTracks"
+              :key="idx"
+              class="flex items-center gap-2.5 text-white/95"
+            >
+              <span class="w-5 flex-shrink-0 text-center text-xs font-bold text-white/40">{{
+                idx + 1
+              }}</span>
+              <span class="truncate text-sm font-semibold tracking-wide">{{ track.name }}</span>
+            </div>
+            <div v-if="tracks.length === 0" class="py-4 text-center text-xs text-white/50">
+              {{ t('comp.homeListItem.loading') }}
+            </div>
+          </div>
+
+          <!-- Play Button -->
+          <button
+            class="flex h-12 w-12 flex-shrink-0 translate-y-2 items-center justify-center rounded-full bg-white text-neutral-900 shadow-2xl transition-all duration-500 ease-out hover:scale-110 group-hover:translate-y-0 active:scale-95"
+            @click.stop="$emit('play')"
+          >
+            <i class="ri-play-fill ml-0.5 text-lg" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Badge -->
+      <div
+        v-if="badge"
+        class="absolute left-3 top-3 rounded-lg px-2.5 py-1 text-[11px] font-bold text-white shadow-lg backdrop-blur-sm"
+        :class="badgeClass"
+      >
+        {{ badge }}
+      </div>
+
+      <!-- Play Count (for playlists) -->
+      <div
+        v-if="playCount"
+        class="absolute right-3 top-3 flex items-center gap-1.5 rounded-lg bg-black/40 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-md"
+      >
+        <i class="ri-play-fill text-[10px]" />
+        <span>{{ formatNumber(playCount) }}</span>
+      </div>
+    </div>
+
+    <!-- Info -->
+    <div class="mt-3 px-0.5">
+      <h3
+        class="truncate text-base font-bold tracking-tight text-neutral-900 transition-colors duration-200 group-hover:text-primary dark:text-neutral-50 dark:group-hover:text-white"
+      >
+        {{ title }}
+      </h3>
+      <p
+        v-if="subtitle"
+        class="mt-1.5 truncate text-sm font-medium text-neutral-500 transition-colors duration-200 group-hover:text-neutral-600 dark:text-neutral-400 dark:group-hover:text-neutral-300"
+      >
+        {{ subtitle }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { formatNumber, getImgUrl } from '@/utils';
+import { getImageBackground } from '@/utils/linearColor';
+
+interface Track {
+  id: number;
+  name: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    cover: string;
+    title: string;
+    subtitle?: string;
+    tracks?: Track[];
+    badge?: string;
+    badgeType?: 'new' | 'hot' | 'recommend';
+    playCount?: number;
+    animationDelay?: string;
+  }>(),
+  {
+    tracks: () => [],
+    animationDelay: '0s'
+  }
+);
+
+defineEmits<{
+  (e: 'click'): void;
+  (e: 'play'): void;
+}>();
+
+const { t } = useI18n();
+const coverRef = ref<HTMLImageElement | null>(null);
+const backgroundGradient = ref(
+  'linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%)'
+);
+
+const displayTracks = computed(() => props.tracks.slice(0, 3));
+
+const badgeClass = computed(() => {
+  switch (props.badgeType) {
+    case 'new':
+      return 'bg-gradient-to-r from-orange-500 to-rose-500';
+    case 'hot':
+      return 'bg-gradient-to-r from-rose-500 to-pink-500';
+    case 'recommend':
+      return 'bg-gradient-to-r from-primary to-blue-500';
+    default:
+      return 'bg-gradient-to-r from-primary to-blue-500';
+  }
+});
+
+const overlayStyle = computed(() => ({
+  background: backgroundGradient.value
+}));
+
+const extractColor = async () => {
+  const img = coverRef.value;
+  if (!img) return;
+
+  try {
+    const { primaryColor } = await getImageBackground(img);
+    if (primaryColor) {
+      // 使用 tinycolor 来创建更自然的渐变效果
+      const tinycolor = (await import('tinycolor2')).default;
+      const baseColor = tinycolor(primaryColor);
+      const hsl = baseColor.toHsl();
+
+      // 创建深色渐变，确保文字可读性
+      const darkColor = tinycolor({
+        h: hsl.h,
+        s: Math.min(hsl.s * 1.3, 1),
+        l: Math.max(hsl.l * 0.15, 0.05)
+      }).setAlpha(0.95);
+
+      const midColor = tinycolor({
+        h: hsl.h,
+        s: Math.min(hsl.s * 1.1, 1),
+        l: Math.max(hsl.l * 0.4, 0.1)
+      }).setAlpha(0.85);
+
+      const topColor = tinycolor({
+        h: hsl.h,
+        s: hsl.s * 0.8,
+        l: Math.min(hsl.l * 0.6, 0.2)
+      }).setAlpha(0.3);
+
+      backgroundGradient.value = `linear-gradient(to top, ${darkColor.toRgbString()} 0%, ${midColor.toRgbString()} 60%, ${topColor.toRgbString()} 100%)`;
+    }
+  } catch (error) {
+    console.debug('Color extraction failed:', error);
+    // 使用深色fallback
+    backgroundGradient.value =
+      'linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.3) 100%)';
+  }
+};
+</script>
+
+<style scoped>
+.list-item {
+  animation: itemFadeIn 0.5s ease-out backwards;
+}
+
+@keyframes itemFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/renderer/views/home/components/HomeNewSongs.vue b/src/renderer/views/home/components/HomeNewSongs.vue
new file mode 100644
index 0000000..f31becd
--- /dev/null
+++ b/src/renderer/views/home/components/HomeNewSongs.vue
@@ -0,0 +1,121 @@
+<template>
+  <section class="new-songs-section">
+    <!-- Section Header -->
+    <div class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h2 class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white">
+          {{ title }}
+        </h2>
+        <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+      </div>
+      <button
+        class="play-all-btn text-xs md:text-sm font-bold text-primary dark:text-white hover:text-primary/80 dark:hover:text-white/80 transition-colors flex items-center gap-1.5"
+        @click="playAll"
+      >
+        <i class="iconfont icon-playfill text-sm"></i>
+        <span>{{ t('common.playAll') }}</span>
+      </button>
+    </div>
+
+    <!-- Loading Skeleton -->
+    <div
+      v-if="loading"
+      class="songs-grid grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
+    >
+      <div
+        v-for="i in 10"
+        :key="i"
+        class="skeleton-item h-20 animate-pulse rounded-xl md:rounded-2xl bg-neutral-100 dark:bg-neutral-800/50"
+      />
+    </div>
+
+    <!-- Songs Grid (Even columns: 1→2→3→4→5) -->
+    <div
+      v-else
+      class="songs-grid grid grid-cols-1 gap-2 md:gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
+    >
+      <song-item
+        v-for="(song, index) in songs"
+        :key="song.id"
+        :item="song"
+        home
+        :favorite="false"
+        :style="{ animationDelay: calculateAnimationDelay(index % 5, 0.05) }"
+        class="animate-item"
+        @play="playSong(song)"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getRecommendMusic } from '@/api/home';
+import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store';
+import { SongResult } from '@/types/music';
+import { calculateAnimationDelay } from '@/utils';
+
+const props = defineProps<{
+  title: string;
+  limit?: number;
+}>();
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const songs = ref<SongResult[]>([]);
+const loading = ref(true);
+
+const fetchSongs = async () => {
+  try {
+    const { data } = await getRecommendMusic({ limit: props.limit || 12 });
+    if (data.code === 200) {
+      // 转换数据格式为 SongResult
+      songs.value = data.result.slice(0, props.limit || 12).map((item: any) => ({
+        ...item,
+        source: 'netease',
+        picUrl: item.picUrl,
+        al: {
+          picUrl: item.picUrl,
+          name: item.name,
+          id: item.id
+        },
+        ar: item.song.artists
+      })) as SongResult[];
+    }
+  } catch (error) {
+    console.error('Failed to fetch new songs:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const playSong = (song: SongResult) => {
+  playerStore.setPlay(song);
+};
+
+const playAll = () => {
+  if (songs.value.length > 0) {
+    playerStore.setPlayList(songs.value);
+    playerStore.setPlay(songs.value[0]);
+  }
+};
+
+onMounted(() => {
+  fetchSongs();
+});
+</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;
+}
+</style>
diff --git a/src/renderer/views/home/components/HomePlaylistSection.vue b/src/renderer/views/home/components/HomePlaylistSection.vue
new file mode 100644
index 0000000..2cd1369
--- /dev/null
+++ b/src/renderer/views/home/components/HomePlaylistSection.vue
@@ -0,0 +1,188 @@
+<template>
+  <section class="playlist-section">
+    <!-- Section Header -->
+    <div class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h2 class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white">
+          {{ title }}
+        </h2>
+        <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+      </div>
+      <button
+        class="group flex items-center gap-1.5 text-sm font-semibold text-neutral-400 transition-colors hover:text-primary dark:text-neutral-500 dark:hover:text-white"
+        @click="$emit('more')"
+      >
+        <span>{{ t('comp.more') }}</span>
+        <i class="ri-arrow-right-s-line text-base transition-transform group-hover:translate-x-1" />
+      </button>
+    </div>
+
+    <!-- Loading Skeleton -->
+    <div v-if="loading" class="grid gap-6" :style="gridStyle">
+      <div v-for="i in displayCount" :key="i" class="space-y-3">
+        <div class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800" />
+        <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+        <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+      </div>
+    </div>
+
+    <!-- Playlist Grid -->
+    <div v-else-if="displayPlaylists.length > 0" class="grid gap-6" :style="gridStyle">
+      <home-list-item
+        v-for="(item, index) in displayPlaylists"
+        :key="item.id"
+        :cover="item.picUrl"
+        :title="item.name"
+        :subtitle="item.copywriter"
+        :tracks="playlistTracksMap[item.id] || []"
+        :play-count="item.playCount"
+        :animation-delay="calculateAnimationDelay(index, 0.04)"
+        @click="handlePlaylistClick(item)"
+        @play="playPlaylist(item)"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="flex flex-col items-center justify-center py-20 text-neutral-400">
+      <i class="ri-play-list-2-line mb-4 text-5xl opacity-20" />
+      <p class="text-sm font-medium">{{ t('comp.recommendSonglist.empty') }}</p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getPersonalizedPlaylist } from '@/api/home';
+import { getListDetail } from '@/api/list';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import { usePlayerCoreStore } from '@/store/modules/playerCore';
+import { usePlaylistStore } from '@/store/modules/playlist';
+import { calculateAnimationDelay, isElectron } from '@/utils';
+
+import HomeListItem from './HomeListItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    limit?: number;
+    columns?: number;
+    rows?: number;
+  }>(),
+  {
+    limit: 15,
+    columns: 5,
+    rows: 3
+  }
+);
+
+defineEmits<{
+  (e: 'more'): void;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+const playlists = ref<any[]>([]);
+const loading = ref(true);
+const playlistTracksMap = reactive<Record<number, any[]>>({});
+
+// Calculate display count to fill exactly N rows
+const displayCount = computed(() => props.columns * props.rows);
+
+const displayPlaylists = computed(() => {
+  const count = displayCount.value;
+  return playlists.value.slice(0, count);
+});
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`
+}));
+
+const fetchPlaylists = async () => {
+  try {
+    const { data } = await getPersonalizedPlaylist(props.limit || displayCount.value + 5);
+    if (data.code === 200) {
+      playlists.value = data.result || [];
+      // Preload tracks for displayed playlists (Electron only)
+      if (isElectron) {
+        preloadAllTracks();
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch playlists:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const preloadAllTracks = async () => {
+  const playlistsToLoad = displayPlaylists.value;
+
+  // Load tracks in parallel with concurrency limit
+  const batchSize = 4;
+  for (let i = 0; i < playlistsToLoad.length; i += batchSize) {
+    const batch = playlistsToLoad.slice(i, i + batchSize);
+    await Promise.all(
+      batch.map(async (item) => {
+        if (playlistTracksMap[item.id]) return;
+        try {
+          const { data } = await getListDetail(item.id);
+          if (data.playlist?.tracks) {
+            playlistTracksMap[item.id] = data.playlist.tracks.slice(0, 3).map((s: any) => ({
+              id: s.id,
+              name: s.name
+            }));
+          }
+        } catch (error) {
+          console.debug('Failed to load tracks for playlist:', item.id, error);
+        }
+      })
+    );
+  }
+};
+
+const handlePlaylistClick = async (item: any) => {
+  try {
+    navigateToMusicList(router, {
+      id: item.id,
+      type: 'playlist',
+      name: item.name,
+      listInfo: item,
+      canRemove: false
+    });
+  } catch (error) {
+    console.error('Failed to navigate to playlist:', error);
+  }
+};
+
+const playPlaylist = async (item: any) => {
+  try {
+    const { data } = await getListDetail(item.id);
+    if (data.playlist?.tracks?.length > 0) {
+      const playerCore = usePlayerCoreStore();
+      const playlistStore = usePlaylistStore();
+
+      const playlist = data.playlist.tracks.map((s: any) => ({
+        id: s.id,
+        name: s.name,
+        picUrl: s.al?.picUrl || item.picUrl,
+        source: 'netease',
+        song: s,
+        ...s,
+        playLoading: false
+      }));
+
+      playlistStore.setPlayList(playlist, false, false);
+      await playerCore.handlePlayMusic(playlist[0], true);
+    }
+  } catch (error) {
+    console.error('Failed to play playlist:', error);
+  }
+};
+
+onMounted(() => {
+  fetchPlaylists();
+});
+</script>
diff --git a/src/renderer/views/home/components/HomePrivateContent.vue b/src/renderer/views/home/components/HomePrivateContent.vue
new file mode 100644
index 0000000..9bc5f71
--- /dev/null
+++ b/src/renderer/views/home/components/HomePrivateContent.vue
@@ -0,0 +1,144 @@
+<template>
+  <section class="private-content-section">
+    <!-- Section Header -->
+    <div class="section-header mb-6 md:mb-8 flex items-end justify-between">
+      <div>
+        <h2 class="section-title text-neutral-900 dark:text-white">
+          {{ title }}
+        </h2>
+        <div class="mt-1.5 h-1 w-12 rounded-full bg-primary" />
+      </div>
+    </div>
+
+    <!-- Loading Skeleton -->
+    <div
+      v-if="loading"
+      class="grid grid-cols-1 gap-4 md:gap-5 lg:gap-6 md:grid-cols-2 lg:grid-cols-3"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="skeleton-item animate-pulse rounded-2xl md:rounded-3xl bg-neutral-100 dark:bg-neutral-800/50"
+        style="aspect-ratio: 16/9"
+      />
+    </div>
+
+    <!-- Private Content Grid -->
+    <div
+      v-else-if="contentList.length > 0"
+      class="private-content-grid grid grid-cols-1 gap-6 md:gap-8 lg:gap-10 md:grid-cols-2 lg:grid-cols-3"
+    >
+      <div
+        v-for="(content, index) in contentList"
+        :key="content.id"
+        class="content-item animate-item group relative flex flex-col cursor-pointer overflow-hidden rounded-2xl md:rounded-3xl bg-neutral-50 dark:bg-neutral-900"
+        :style="{ animationDelay: calculateAnimationDelay(index, 0.1) }"
+        @click="handleContentClick(content)"
+      >
+        <!-- Cover Image (16:9) -->
+        <div class="cover-wrapper relative" style="aspect-ratio: 16/9">
+          <img
+            :src="getImgUrl(content.picUrl, '640y360')"
+            class="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+            loading="lazy"
+            :alt="content.name"
+          />
+
+          <!-- Gradient Overlay -->
+          <div
+            class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"
+          />
+
+          <!-- Exclusive Badge -->
+          <div
+            class="exclusive-badge absolute top-4 left-4 flex items-center gap-1.5 rounded-full bg-purple-600 px-3 py-1.5 text-xs font-bold text-white shadow-lg"
+          >
+            <i class="iconfont icon-vip text-sm" />
+            <span>独家</span>
+          </div>
+        </div>
+
+        <!-- Content Info -->
+        <div class="content-info p-4 md:p-6">
+          <h3
+            class="content-name line-clamp-2 text-base md:text-lg font-bold leading-tight text-neutral-800 dark:text-neutral-100 transition-colors duration-200 group-hover:text-primary dark:group-hover:text-white"
+          >
+            {{ content.name }}
+          </h3>
+          <p
+            v-if="content.copywriter"
+            class="copywriter mt-2 line-clamp-2 text-xs md:text-sm text-neutral-500 dark:text-neutral-400"
+          >
+            {{ content.copywriter }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div
+      v-else
+      class="empty-state flex flex-col items-center justify-center py-20 text-neutral-400"
+    >
+      <i class="iconfont icon-empty text-6xl mb-4 opacity-30" />
+      <p>暂无独家内容</p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { getPrivateContent } from '@/api/home';
+import { calculateAnimationDelay, getImgUrl } from '@/utils';
+
+defineProps<{
+  title: string;
+}>();
+
+const router = useRouter();
+const contentList = ref<any[]>([]);
+const loading = ref(true);
+
+const fetchPrivateContent = async () => {
+  try {
+    const { data } = await getPrivateContent();
+    if (data.code === 200 && data.result) {
+      contentList.value = data.result;
+    }
+  } catch (error) {
+    console.error('Failed to fetch private content:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleContentClick = (content: any) => {
+  // 根据内容类型跳转
+  if (content.type === 'video' && content.id) {
+    router.push(`/mv?id=${content.id}`);
+  }
+};
+
+onMounted(() => {
+  fetchPrivateContent();
+});
+</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;
+}
+
+.cover-wrapper {
+  overflow: hidden;
+  will-change: transform;
+}
+</style>
diff --git a/src/renderer/views/home/components/NavCard.vue b/src/renderer/views/home/components/NavCard.vue
new file mode 100644
index 0000000..b1bb36f
--- /dev/null
+++ b/src/renderer/views/home/components/NavCard.vue
@@ -0,0 +1,262 @@
+<template>
+  <div
+    class="nav-card group relative overflow-hidden rounded-xl md:rounded-2xl cursor-pointer transition-all duration-300"
+    :class="[
+      aspectClass,
+      colorClasses.bg,
+      active ? colorClasses.activeBg : '',
+      'hover:shadow-lg hover:-translate-y-0.5'
+    ]"
+    @click="$emit('click')"
+  >
+    <!-- Background Pattern -->
+    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+      <div
+        class="absolute inset-0"
+        :class="colorClasses.pattern"
+        style="
+          background-image: radial-gradient(circle at 20% 50%, currentColor 1px, transparent 1px);
+          background-size: 20px 20px;
+          opacity: 0.05;
+        "
+      />
+    </div>
+
+    <!-- Glow Effect on Hover -->
+    <div
+      class="absolute -inset-[1px] rounded-xl md:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"
+      :class="colorClasses.glow"
+    />
+
+    <!-- Content Container -->
+    <div class="relative h-full flex flex-col justify-between p-4 md:p-5">
+      <!-- Header with Icon and Badge -->
+      <div class="flex items-start justify-between">
+        <!-- Icon -->
+        <div
+          class="icon-wrapper flex items-center justify-center h-10 w-10 md:h-11 md:w-11 rounded-xl md:rounded-2xl transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
+          :class="[colorClasses.iconBg, active ? colorClasses.activeIconBg : '']"
+        >
+          <i
+            :class="[
+              icon,
+              colorClasses.iconColor,
+              'text-lg md:text-xl transition-all duration-300'
+            ]"
+          ></i>
+        </div>
+
+        <!-- Badge (optional) -->
+        <div
+          v-if="badge"
+          class="badge px-2 py-0.5 rounded-full text-[10px] md:text-xs font-semibold animate-pulse"
+          :class="colorClasses.badgeBg"
+        >
+          {{ badge }}
+        </div>
+      </div>
+
+      <!-- Text Content -->
+      <div class="space-y-0.5 md:space-y-1">
+        <h3
+          class="text-sm md:text-base font-bold tracking-tight line-clamp-1"
+          :class="colorClasses.title"
+        >
+          {{ title }}
+        </h3>
+        <p class="text-xs md:text-sm line-clamp-1" :class="colorClasses.subtitle">
+          {{ subtitle }}
+        </p>
+      </div>
+
+      <!-- Arrow Indicator -->
+      <div
+        class="absolute bottom-3 right-3 md:bottom-4 md:right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1"
+        :class="colorClasses.arrow"
+      >
+        <i class="ri-arrow-right-line text-sm md:text-base"></i>
+      </div>
+    </div>
+
+    <!-- Active Indicator -->
+    <div
+      v-if="active"
+      class="absolute top-3 left-3 h-2 w-2 rounded-full animate-pulse"
+      :class="colorClasses.activeDot"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon: string;
+  title: string;
+  subtitle: string;
+  color?: 'rose' | 'amber' | 'purple' | 'blue' | 'emerald' | 'cyan';
+  active?: boolean;
+  badge?: string | null;
+  aspect?: 'square' | 'tall' | 'wide';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'blue',
+  active: false,
+  badge: null,
+  aspect: 'square'
+});
+
+defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const aspectClass = computed(() => {
+  switch (props.aspect) {
+    case 'tall':
+      return 'aspect-[4/5]';
+    case 'wide':
+      return 'aspect-[16/9]';
+    default:
+      return 'aspect-square md:aspect-[4/3]';
+  }
+});
+
+const colorClasses = computed(() => {
+  const colors = {
+    rose: {
+      bg: 'bg-rose-50 dark:bg-rose-950/30',
+      activeBg: 'dark:bg-rose-950/50',
+      iconBg: 'bg-rose-100 dark:bg-rose-900/40',
+      activeIconBg: 'dark:bg-rose-900/60',
+      iconColor: 'text-rose-600 dark:text-rose-400',
+      title: 'text-rose-900 dark:text-rose-100',
+      subtitle: 'text-rose-700 dark:text-rose-300',
+      arrow: 'text-rose-600 dark:text-rose-400',
+      pattern: 'text-rose-600',
+      glow: 'bg-rose-500/20',
+      badgeBg: 'bg-rose-500 text-white',
+      activeDot: 'bg-rose-500'
+    },
+    amber: {
+      bg: 'bg-amber-50 dark:bg-amber-950/30',
+      activeBg: 'dark:bg-amber-950/50',
+      iconBg: 'bg-amber-100 dark:bg-amber-900/40',
+      activeIconBg: 'dark:bg-amber-900/60',
+      iconColor: 'text-amber-600 dark:text-amber-400',
+      title: 'text-amber-900 dark:text-amber-100',
+      subtitle: 'text-amber-700 dark:text-amber-300',
+      arrow: 'text-amber-600 dark:text-amber-400',
+      pattern: 'text-amber-600',
+      glow: 'bg-amber-500/20',
+      badgeBg: 'bg-amber-500 text-white',
+      activeDot: 'bg-amber-500'
+    },
+    purple: {
+      bg: 'bg-purple-50 dark:bg-purple-950/30',
+      activeBg: 'dark:bg-purple-950/50',
+      iconBg: 'bg-purple-100 dark:bg-purple-900/40',
+      activeIconBg: 'dark:bg-purple-900/60',
+      iconColor: 'text-purple-600 dark:text-purple-400',
+      title: 'text-purple-900 dark:text-purple-100',
+      subtitle: 'text-purple-700 dark:text-purple-300',
+      arrow: 'text-purple-600 dark:text-purple-400',
+      pattern: 'text-purple-600',
+      glow: 'bg-purple-500/20',
+      badgeBg: 'bg-purple-500 text-white',
+      activeDot: 'bg-purple-500'
+    },
+    blue: {
+      bg: 'bg-blue-50 dark:bg-blue-950/30',
+      activeBg: 'dark:bg-blue-950/50',
+      iconBg: 'bg-blue-100 dark:bg-blue-900/40',
+      activeIconBg: 'dark:bg-blue-900/60',
+      iconColor: 'text-blue-600 dark:text-blue-400',
+      title: 'text-blue-900 dark:text-blue-100',
+      subtitle: 'text-blue-700 dark:text-blue-300',
+      arrow: 'text-blue-600 dark:text-blue-400',
+      pattern: 'text-blue-600',
+      glow: 'bg-blue-500/20',
+      badgeBg: 'bg-blue-500 text-white',
+      activeDot: 'bg-blue-500'
+    },
+    emerald: {
+      bg: 'bg-emerald-50 dark:bg-emerald-950/30',
+      activeBg: 'dark:bg-emerald-950/50',
+      iconBg: 'bg-emerald-100 dark:bg-emerald-900/40',
+      activeIconBg: 'dark:bg-emerald-900/60',
+      iconColor: 'text-emerald-600 dark:text-emerald-400',
+      title: 'text-emerald-900 dark:text-emerald-100',
+      subtitle: 'text-emerald-700 dark:text-emerald-300',
+      arrow: 'text-emerald-600 dark:text-emerald-400',
+      pattern: 'text-emerald-600',
+      glow: 'bg-emerald-500/20',
+      badgeBg: 'bg-emerald-500 text-white',
+      activeDot: 'bg-emerald-500'
+    },
+    cyan: {
+      bg: 'bg-cyan-50 dark:bg-cyan-950/30',
+      activeBg: 'dark:bg-cyan-950/50',
+      iconBg: 'bg-cyan-100 dark:bg-cyan-900/40',
+      activeIconBg: 'dark:bg-cyan-900/60',
+      iconColor: 'text-cyan-600 dark:text-cyan-400',
+      title: 'text-cyan-900 dark:text-cyan-100',
+      subtitle: 'text-cyan-700 dark:text-cyan-300',
+      arrow: 'text-cyan-600 dark:text-cyan-400',
+      pattern: 'text-cyan-600',
+      glow: 'bg-cyan-500/20',
+      badgeBg: 'bg-cyan-500 text-white',
+      activeDot: 'bg-cyan-500'
+    }
+  };
+
+  return colors[props.color];
+});
+</script>
+
+<style scoped>
+.nav-card {
+  position: relative;
+  will-change: transform;
+}
+
+.nav-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.nav-card:hover::before {
+  opacity: 1;
+}
+
+.icon-wrapper {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+@keyframes pulse-subtle {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.badge {
+  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+</style>
diff --git a/src/renderer/views/home/index.vue b/src/renderer/views/home/index.vue
index 0b4a980..aabe462 100644
--- a/src/renderer/views/home/index.vue
+++ b/src/renderer/views/home/index.vue
@@ -1,63 +1,81 @@
 <template>
-  <n-scrollbar :size="100" :x-scrollable="false">
-    <div class="main-page">
-      <!-- 推荐歌手 -->
-      <top-banner />
-      <div class="main-content">
-        <!-- 歌单分类列表 -->
-        <playlist-type v-if="!isMobile" />
-        <!-- 本周最热音乐 -->
-        <recommend-songlist />
-        <!-- 推荐最新专辑 -->
-        <div>
-          <favorite-list is-component />
-          <recommend-album />
+  <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">
+        <!-- Hero Section -->
+        <home-hero />
+
+        <!-- Main Content Sections -->
+        <div class="content-sections space-y-10 md:space-y-8 lg:space-y-12">
+          <!-- Recommended Playlists (Grid Section) -->
+          <home-playlist-section :title="t('comp.recommendSonglist.title')" :limit="18" />
+
+          <!-- Hot Artists (Horizontal Scroll Section) -->
+          <home-artists :title="t('comp.recommendSinger.title')" :limit="15" />
+
+          <!-- New Albums (NEW - 新碟上架) -->
+          <home-album-section
+            :title="t('comp.newAlbum.title')"
+            :limit="6"
+            :columns="5"
+            :rows="1"
+            @more="router.push('/album')"
+          />
+
+          <!-- New Songs (Compact Grid Section) -->
+          <home-new-songs :title="t('comp.recommendNewMusic.title')" :limit="20" />
         </div>
       </div>
-    </div>
-  </n-scrollbar>
+    </n-scrollbar>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import PlaylistType from '@/components/home/PlaylistType.vue';
-import RecommendAlbum from '@/components/home/RecommendAlbum.vue';
-import RecommendSonglist from '@/components/home/RecommendSonglist.vue';
-import TopBanner from '@/components/home/TopBanner.vue';
-import { isMobile } from '@/utils';
-import FavoriteList from '@/views/favorite/index.vue';
+import { NScrollbar } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import HomeAlbumSection from './components/HomeAlbumSection.vue';
+import HomeArtists from './components/HomeArtists.vue';
+import HomeHero from './components/HomeHero.vue';
+import HomeNewSongs from './components/HomeNewSongs.vue';
+import HomePlaylistSection from './components/HomePlaylistSection.vue';
 
 defineOptions({
   name: 'Home'
 });
+
+const { t } = useI18n();
+const router = useRouter();
 </script>
 
 <style lang="scss" scoped>
-.main-page {
-  @apply h-full w-full overflow-hidden bg-light dark:bg-black;
-}
-.main-content {
-  @apply mt-6 flex mb-28;
+.home-container {
+  position: relative;
 }
 
-.mobile {
-  .main-content {
-    @apply flex-col mx-4 mb-40;
+/* Global animation optimization - use will-change sparingly */
+:deep(.animate-item) {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
   }
-  :deep(.favorite-page) {
-    @apply p-0 mx-4 h-full;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-:deep(.favorite-page) {
-  @apply p-0 mx-4 h-[300px];
-  .favorite-header {
-    @apply mb-0 px-0 !important;
-    h2 {
-      @apply text-lg font-bold text-gray-900 dark:text-white;
+/* Stagger delays for sequential animations */
+:deep(.animate-item) {
+  @for $i from 1 through 20 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 0.05}s;
     }
   }
-  .favorite-list {
-    @apply px-0 !important;
-  }
 }
 </style>