✨ feat: 修改音乐列表为页面，优化专辑和歌单详情加载逻辑，支持通过路由跳转展示音乐列表

src/renderer/components/common/MusicListNavigator.ts

@@ -0,0 +1,38 @@
+import { Router } from 'vue-router';
+import { useMusicStore } from '@/store/modules/music';
+
+/**
+ * 导航到音乐列表页面的通用方法
+ * @param router Vue路由实例
+ * @param options 导航选项
+ */
+export function navigateToMusicList(
+  router: Router,
+  options: {
+    id?: string | number;
+    type?: 'album' | 'playlist' | 'dailyRecommend' | string;
+    name: string;
+    songList: any[];
+    listInfo?: any;
+    canRemove?: boolean;
+  }
+) {
+  const musicStore = useMusicStore();
+  const { id, type, name, songList, listInfo, canRemove = false } = options;
+
+  // 保存数据到状态管理
+  musicStore.setCurrentMusicList(songList, name, listInfo, canRemove);
+
+  // 路由跳转
+  if (id) {
+    router.push({
+      name: 'musicList',
+      params: { id },
+      query: { type }
+    });
+  } else {
+    router.push({
+      name: 'musicList'
+    });
+  }
+} 

src/renderer/components/common/PlayBottom.vue

@@ -1,11 +1,12 @@
 <template>
-  <div v-if="isPlay" class="bottom" :style="{ height }"></div>
+  <div v-if="isPlay && !isMobile" class="bottom" :style="{ height }"></div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
 import { usePlayerStore } from '@/store/modules/player';
+import { isMobile } from '@/utils';
 
 const playerStore = usePlayerStore();
 const isPlay = computed(() => playerStore.playMusicUrl);

src/renderer/components/common/SearchItem.vue

@@ -21,15 +21,6 @@
       <span>{{ item.size }}</span>
     </div>
 
-    <music-list
-      v-if="['专辑', 'playlist'].includes(item.type)"
-      v-model:show="showPop"
-      :name="item.name"
-      :song-list="songList"
-      :list-info="listInfo"
-      :cover="false"
-      :z-index="zIndex"
-    />
     <mv-player
       v-if="item.type === 'mv'"
       v-model:show="showPop"
@@ -46,8 +37,8 @@ import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
-
-import MusicList from '../MusicList.vue';
+import { useRouter } from 'vue-router';
+import { useMusicStore } from '@/store/modules/music';
 
 const props = withDefaults(
   defineProps<{
@@ -72,6 +63,8 @@ const showPop = ref(false);
 const listInfo = ref<any>(null);
 
 const playerStore = usePlayerStore();
+const router = useRouter();
+const musicStore = useMusicStore();
 
 const getCurrentMv = () => {
   return {
@@ -83,7 +76,6 @@ const getCurrentMv = () => {
 const handleClick = async () => {
   listInfo.value = null;
   if (props.item.type === '专辑') {
-    showPop.value = true;
     const res = await getAlbum(props.item.id);
     songList.value = res.data.songs.map((song: any) => {
       song.al.picUrl = song.al.picUrl || props.item.picUrl;
@@ -97,16 +89,41 @@ const handleClick = async () => {
       },
       description: res.data.album.description
     };
-  }
-
-  if (props.item.type === 'playlist') {
-    showPop.value = true;
+    
+    // 保存数据到store
+    musicStore.setCurrentMusicList(
+      songList.value, 
+      props.item.name, 
+      listInfo.value, 
+      false
+    );
+    
+    // 使用路由跳转
+    router.push({
+      name: 'musicList',
+      params: { id: props.item.id },
+      query: { type: 'album' }
+    });
+  } else if (props.item.type === 'playlist') {
     const res = await getListDetail(props.item.id);
     songList.value = res.data.playlist.tracks;
     listInfo.value = res.data.playlist;
-  }
-
-  if (props.item.type === 'mv') {
+    
+    // 保存数据到store
+    musicStore.setCurrentMusicList(
+      songList.value, 
+      props.item.name, 
+      listInfo.value, 
+      false
+    );
+    
+    // 使用路由跳转
+    router.push({
+      name: 'musicList',
+      params: { id: props.item.id },
+      query: { type: 'playlist' }
+    });
+  } else if (props.item.type === 'mv') {
     handleShowMv();
   }
 };

src/renderer/components/home/RecommendAlbum.vue

@@ -22,26 +22,19 @@
         </div>
       </template>
     </div>
-    <music-list
-      v-model:show="showMusic"
-      :name="albumName"
-      :song-list="songList"
-      :cover="true"
-      :loading="loadingList"
-      :list-info="albumInfo"
-    />
   </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 MusicList from '@/components/MusicList.vue';
-import type { IAlbumNew } from '@/type/album';
 import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import type { IAlbumNew } from '@/type/album';
 
 const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
@@ -50,33 +43,42 @@ const loadAlbumList = async () => {
   albumData.value = data;
 };
 
-const showMusic = ref(false);
-const songList = ref([]);
-const albumName = ref('');
-const loadingList = ref(false);
-const albumInfo = ref<any>({});
+const router = useRouter();
+
 const handleClick = async (item: any) => {
-  songList.value = [];
-  albumInfo.value = {};
-  albumName.value = item.name;
-  loadingList.value = true;
-  showMusic.value = true;
-  const res = await getAlbum(item.id);
-  const { songs, album } = res.data;
-  songList.value = songs.map((song: any) => {
-    song.al.picUrl = song.al.picUrl || album.picUrl;
-    song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
-    return song;
-  });
-  albumInfo.value = {
-    ...album,
-    creator: {
-      avatarUrl: album.artist.img1v1Url,
-      nickname: `${album.artist.name} - ${album.company}`
-    },
-    description: album.description
-  };
-  loadingList.value = false;
+  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(() => {

src/renderer/components/home/TopBanner.vue

@@ -23,7 +23,7 @@
             ></div>
             <div
               class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-              @click="showMusic = true"
+              @click="showDayRecommend"
             >
               <div class="font-bold text-lg">
                 {{ t('comp.recommendSinger.title') }}
@@ -57,7 +57,7 @@
                 v-for="item in userPlaylist"
                 :key="item.id"
                 class="user-play-item"
-                @click="toPlaylist(item.id)"
+                @click="openPlaylist(item)"
               >
                 <div class="user-play-item-img">
                   <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
@@ -124,35 +124,18 @@
         </n-carousel-item>
       </n-carousel>
     </div>
-
-    <music-list
-      v-if="dayRecommendData?.dailySongs.length"
-      v-model:show="showMusic"
-      :name="t('comp.recommendSinger.songlist')"
-      :song-list="dayRecommendData?.dailySongs"
-      :cover="false"
-    />
-
-    <!-- 添加用户歌单弹窗 -->
-    <music-list
-      v-model:show="showPlaylist"
-      v-model:loading="playlistLoading"
-      :name="playlistItem?.name || ''"
-      :song-list="playlistDetail?.playlist?.tracks || []"
-      :list-info="playlistDetail?.playlist"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import { getDayRecommend, getHotSinger } from '@/api/home';
 import { getListDetail } from '@/api/list';
 import { getMusicDetail } from '@/api/music';
 import { getUserPlaylist } from '@/api/user';
-import MusicList from '@/components/MusicList.vue';
 import { useArtist } from '@/hooks/useArtist';
 import { usePlayerStore, useUserStore } from '@/store';
 import { IDayRecommend } from '@/type/day_recommend';
@@ -168,20 +151,20 @@ import {
   setBackgroundImg
 } from '@/utils';
 import { getArtistDetail } from '@/api/artist';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 
 const userStore = useUserStore();
 const playerStore = usePlayerStore();
+const router = useRouter();
 
 const { t } = useI18n();
 
 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
 const dayRecommendData = ref<IDayRecommend>();
-const showMusic = ref(false);
 const userPlaylist = ref<Playlist[]>([]);
 
 // 为歌单弹窗添加的状态
-const showPlaylist = ref(false);
 const playlistLoading = ref(false);
 const playlistItem = ref<Playlist | null>(null);
 const playlistDetail = ref<IListDetail | null>(null);
@@ -306,27 +289,34 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 
-const toPlaylist = async (id: number) => {
+const showDayRecommend = () => {
+  if (!dayRecommendData.value?.dailySongs) return;
+  
+  navigateToMusicList(router, {
+    type: 'dailyRecommend',
+    name: t('comp.recommendSinger.songlist'),
+    songList: dayRecommendData.value.dailySongs,
+    canRemove: false
+  });
+};
+
+const openPlaylist = (item: any) => {
+  playlistItem.value = item;
   playlistLoading.value = true;
-  playlistItem.value = null;
-  playlistDetail.value = null;
-  showPlaylist.value = true;
-
-  // 设置当前点击的歌单信息
-  const selectedPlaylist = userPlaylist.value.find((item) => item.id === id);
-  if (selectedPlaylist) {
-    playlistItem.value = selectedPlaylist;
-  }
-
-  try {
-    // 获取歌单详情
-    const { data } = await getListDetail(id);
-    playlistDetail.value = data;
-  } catch (error) {
-    console.error('获取歌单详情失败:', error);
-  } finally {
+  
+  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
+    });
+  });
 };
 
 // 添加直接播放歌单的方法