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

src/renderer/views/user/detail.vue

@@ -63,7 +63,7 @@
                   class="playlist-item"
                   :class="setAnimationClass('animate__fadeInUp')"
                   :style="setAnimationDelay(index, 50)"
-                  @click="showPlaylist(item.id, item.name)"
+                  @click="openPlaylist(item)"
                 >
                   <div class="playlist-cover">
                     <n-image
@@ -120,14 +120,6 @@
         <div class="pb-20"></div>
       </div>
     </n-scrollbar>
-
-    <music-list
-      v-model:show="isShowList"
-      :name="currentList?.name || ''"
-      :song-list="currentList?.tracks || []"
-      :list-info="currentList"
-      :loading="listLoading"
-    />
   </div>
 </template>
 
@@ -140,7 +132,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getListDetail } from '@/api/list';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import SongItem from '@/components/common/SongItem.vue';
-import MusicList from '@/components/MusicList.vue';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { usePlayerStore } from '@/store/modules/player';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
@@ -166,7 +158,6 @@ const recordList = ref<any[]>([]);
 const loading = ref(true);
 
 // 歌单详情相关
-const isShowList = ref(false);
 const currentList = ref<Playlist>();
 const listLoading = ref(false);
 
@@ -208,21 +199,23 @@ const loadUserData = async () => {
   }
 };
 
-// 展示歌单
-const showPlaylist = async (id: number, name: string) => {
-  isShowList.value = true;
+// 替换显示歌单的方法
+const openPlaylist = (item: any) => {
   listLoading.value = true;
-
-  try {
-    currentList.value = { id, name } as Playlist;
-    const { data } = await getListDetail(id);
-    currentList.value = data.playlist;
-  } catch (error) {
-    console.error('加载歌单详情失败:', error);
-    message.error('加载歌单详情失败');
-  } finally {
+  
+  getListDetail(item.id).then(res => {
+    currentList.value = res.data.playlist;
     listLoading.value = false;
-  }
+    
+    navigateToMusicList(router, {
+      id: item.id,
+      type: 'playlist',
+      name: item.name,
+      songList: res.data.playlist.tracks || [],
+      listInfo: res.data.playlist,
+      canRemove: false
+    });
+  });
 };
 
 // 播放歌曲

src/renderer/views/user/index.vue

@@ -34,7 +34,7 @@
               v-for="(item, index) in playList"
               :key="index"
               class="play-list-item"
-              @click="showPlaylist(item.id, item.name)"
+              @click="openPlaylist(item)"
             >
               <n-image
                 :src="getImgUrl(item.coverImgUrl, '50y50')"
@@ -82,15 +82,6 @@
         </n-scrollbar>
       </div>
     </div>
-    <music-list
-      v-model:show="isShowList"
-      :name="list?.name || ''"
-      :song-list="list?.tracks || []"
-      :list-info="list"
-      :loading="listLoading"
-      :can-remove="true"
-      @remove-song="handleRemoveFromPlaylist"
-    />
   </div>
 </template>
 
@@ -101,11 +92,10 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import { getListDetail } from '@/api/list';
-import { updatePlaylistTracks } from '@/api/music';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
-import MusicList from '@/components/MusicList.vue';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
@@ -125,7 +115,6 @@ const playList = ref<any[]>([]);
 const recordList = ref();
 const infoLoading = ref(false);
 const mounted = ref(true);
-const isShowList = ref(false);
 const list = ref<Playlist>();
 const listLoading = ref(false);
 const message = useMessage();
@@ -234,47 +223,23 @@ onMounted(() => {
   checkLoginStatus() && loadData();
 });
 
-// 展示歌单
-const showPlaylist = async (id: number, name: string) => {
-  isShowList.value = true;
+// 替换显示歌单的方法
+const openPlaylist = (item: any) => {
   listLoading.value = true;
-
-  list.value = {
-    name,
-    id
-  } as Playlist;
-  await loadPlaylistDetail(id);
-  listLoading.value = false;
-};
-
-// 加载歌单详情
-const loadPlaylistDetail = async (id: number) => {
-  const { data } = await getListDetail(id);
-  list.value = data.playlist;
-};
-
-// 从歌单中删除歌曲
-const handleRemoveFromPlaylist = async (songId: number) => {
-  if (!list.value?.id) return;
-
-  try {
-    const res = await updatePlaylistTracks({
-      op: 'del',
-      pid: list.value.id,
-      tracks: songId.toString()
+  
+  getListDetail(item.id).then(res => {
+    list.value = res.data.playlist;
+    listLoading.value = false;
+    
+    navigateToMusicList(router, {
+      id: item.id,
+      type: 'playlist',
+      name: item.name,
+      songList: res.data.playlist.tracks || [],
+      listInfo: res.data.playlist,
+      canRemove: true // 保留可移除功能
     });
-
-    if (res.status === 200) {
-      message.success(t('user.message.deleteSuccess'));
-      // 重新加载歌单详情
-      await loadPlaylistDetail(list.value.id);
-    } else {
-      throw new Error(res.data?.msg || t('user.message.deleteFailed'));
-    }
-  } catch (error: any) {
-    console.error('删除歌曲失败:', error);
-    message.error(error.message || t('user.message.deleteFailed'));
-  }
+  });
 };
 
 const handlePlay = () => {