✨ 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();
   }
 };