fix: address user center review feedback

Author: sansenjian

src/components/user/AlbumDetailPanel.vue

@@ -71,6 +71,7 @@ const emit = defineEmits<{
     </div>
 
     <SongDetailList
+      v-else-if="!props.loading && props.songs.length > 0"
       :songs="props.songs"
       :fallback-cover="props.album?.picUrl ?? ''"
       @play-song="emit('play-song', $event)"

src/components/user/PlaylistDetailPanel.vue

@@ -60,7 +60,11 @@ const emit = defineEmits<{
       <p>当前歌单暂无可播放歌曲。</p>
     </div>
 
-    <SongDetailList :songs="props.songs" @play-song="emit('play-song', $event)" />
+    <SongDetailList
+      v-else-if="!props.loading && props.songs.length > 0"
+      :songs="props.songs"
+      @play-song="emit('play-song', $event)"
+    />
   </section>
 </template>
 

src/composables/useFavoriteAlbums.ts

@@ -269,7 +269,7 @@ export function useFavoriteAlbums(): UseFavoriteAlbumsReturn {
         .filter((track): track is Song => Boolean(track))
     } catch (requestError) {
       console.error('Failed to load album detail:', requestError)
-      return []
+      throw requestError
     }
   }
 

src/composables/useUserPlaylists.ts

@@ -213,7 +213,7 @@ export function useUserPlaylists(): UseUserPlaylistsReturn {
         .filter((track): track is Song => Boolean(track))
     } catch (requestError) {
       console.error('Failed to load playlist detail:', requestError)
-      return []
+      throw requestError
     }
   }
 

tests/components/user/AlbumDetailPanel.test.ts

@@ -32,4 +32,42 @@ describe('AlbumDetailPanel', () => {
     const cover = wrapper.get('img.detail-song-cover')
     expect(cover.attributes('src')).toBe('album-cover.jpg')
   })
+
+  it('does not render stale song rows while the next album detail is loading', () => {
+    const wrapper = mount(AlbumDetailPanel, {
+      props: {
+        album: {
+          id: 'album-1',
+          name: 'Album 1',
+          picUrl: 'album-cover.jpg',
+          size: 1,
+          artistName: 'Artist 1'
+        },
+        songs: [createMockSong({ id: 'song-1', name: 'Stale Song' })],
+        loading: true
+      }
+    })
+
+    expect(wrapper.text()).toContain('专辑详情加载中...')
+    expect(wrapper.find('.detail-song').exists()).toBe(false)
+  })
+
+  it('does not render stale song rows when detail loading fails', () => {
+    const wrapper = mount(AlbumDetailPanel, {
+      props: {
+        album: {
+          id: 'album-1',
+          name: 'Album 1',
+          picUrl: 'album-cover.jpg',
+          size: 1,
+          artistName: 'Artist 1'
+        },
+        songs: [createMockSong({ id: 'song-1', name: 'Stale Song' })],
+        error: new Error('load failed')
+      }
+    })
+
+    expect(wrapper.text()).toContain('专辑详情加载失败')
+    expect(wrapper.find('.detail-song').exists()).toBe(false)
+  })
 })

tests/components/user/PlaylistDetailPanel.test.ts

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import PlaylistDetailPanel from '@/components/user/PlaylistDetailPanel.vue'
+import { createMockSong } from '../../utils/test-utils'
+
+describe('PlaylistDetailPanel', () => {
+  it('does not render stale song rows while the next playlist detail is loading', () => {
+    const wrapper = mount(PlaylistDetailPanel, {
+      props: {
+        playlist: {
+          id: 'playlist-1',
+          name: 'Playlist 1',
+          trackCount: 10
+        },
+        songs: [createMockSong({ id: 'song-1', name: 'Stale Song' })],
+        loading: true
+      }
+    })
+
+    expect(wrapper.text()).toContain('歌单详情加载中...')
+    expect(wrapper.find('.detail-song').exists()).toBe(false)
+  })
+
+  it('does not render stale song rows when detail loading fails', () => {
+    const wrapper = mount(PlaylistDetailPanel, {
+      props: {
+        playlist: {
+          id: 'playlist-1',
+          name: 'Playlist 1',
+          trackCount: 10
+        },
+        songs: [createMockSong({ id: 'song-1', name: 'Stale Song' })],
+        error: new Error('load failed')
+      }
+    })
+
+    expect(wrapper.text()).toContain('歌单详情加载失败')
+    expect(wrapper.find('.detail-song').exists()).toBe(false)
+  })
+})

tests/composables/useFavoriteAlbums.test.ts

@@ -144,4 +144,12 @@ describe('useFavoriteAlbums', () => {
       platform: 'netease'
     })
   })
+
+  it('surfaces album detail failures instead of silently returning an empty song list', async () => {
+    getAlbumDetailMock.mockRejectedValue(new Error('album detail failed'))
+
+    const viewModel = mountUseFavoriteAlbums()
+
+    await expect(viewModel.loadAlbumSongs(88)).rejects.toThrow('album detail failed')
+  })
 })

tests/composables/useUserPlaylists.test.ts

@@ -141,4 +141,12 @@ describe('useUserPlaylists', () => {
     ])
     expect(viewModel.count.value).toBe(1)
   })
+
+  it('surfaces playlist detail failures instead of silently returning an empty song list', async () => {
+    getPlaylistTracksMock.mockRejectedValue(new Error('playlist detail failed'))
+
+    const viewModel = mountUseUserPlaylists()
+
+    await expect(viewModel.loadPlaylistSongs(3)).rejects.toThrow('playlist detail failed')
+  })
 })