fix: address verified review findings

Author: sansenjian

src/api/album.ts

@@ -1,26 +1,103 @@
+import type { AxiosResponse } from 'axios'
+
 import request from '@/utils/http'
 
+export interface AlbumArtistResponse {
+  id?: string | number
+  name?: string
+}
+
+export interface AlbumInfoResponse {
+  id?: string | number
+  name?: string
+  picUrl?: string
+  size?: number
+  artist?: AlbumArtistResponse
+  artists?: AlbumArtistResponse[]
+}
+
+export interface AlbumTrackResponse {
+  id?: string | number
+  name?: string
+  platform?: 'netease' | 'qq'
+  server?: 'netease' | 'qq'
+  artists?: AlbumArtistResponse[]
+  ar?: AlbumArtistResponse[]
+  album?: {
+    id?: string | number
+    name?: string
+    picUrl?: string
+    artist?: {
+      img1v1Url?: string
+    }
+  }
+  al?: {
+    id?: string | number
+    name?: string
+    picUrl?: string
+    artist?: {
+      img1v1Url?: string
+    }
+  }
+  duration?: number
+  dt?: number
+  mvid?: string | number
+  mv?: string | number
+  originalId?: string | number
+  url?: string
+  mediaId?: string | number
+  extra?: Record<string, unknown>
+}
+
+export interface AlbumDetailResponse {
+  album?: AlbumInfoResponse
+  songs?: AlbumTrackResponse[]
+}
+
+export interface AlbumSublistResponse {
+  count?: number
+  data?: AlbumInfoResponse[]
+  hasMore?: boolean
+}
+
+type HttpResponseData<T> = AxiosResponse<T> | T
+
+function unwrapResponseData<T>(response: HttpResponseData<T>): T {
+  if (response && typeof response === 'object' && 'data' in response) {
+    return (response as AxiosResponse<T>).data
+  }
+
+  return response as T
+}
+
 /**
  * 获取专辑详情
  * @param {number} id - 专辑 ID
  */
-export function getAlbumDetail(id: number) {
-  return request({
+export async function getAlbumDetail(id: number): Promise<AlbumDetailResponse> {
+  const response = await request<AlbumDetailResponse>({
     url: '/album',
     method: 'get',
     params: { id }
   })
+
+  return unwrapResponseData(response)
 }
 
 /**
  * 获取当前登录用户收藏的专辑
  * @param {number} limit - 数量
  * @param {number} offset - 偏移量
  */
-export function getAlbumSublist(limit: number = 50, offset: number = 0) {
-  return request({
+export async function getAlbumSublist(
+  limit: number = 50,
+  offset: number = 0
+): Promise<AlbumSublistResponse> {
+  const response = await request<AlbumSublistResponse>({
     url: '/album/sublist',
     method: 'get',
     params: { limit, offset }
   })
+
+  return unwrapResponseData(response)
 }

src/components/Playlist.vue

@@ -26,6 +26,17 @@ type PlaylistItem = {
   name: string
 }
 
+function createPlaylistItemFingerprint(song: Song): string {
+  return JSON.stringify({
+    id: song.id,
+    name: song.name,
+    duration: song.duration,
+    platform: song.platform,
+    cover: song.album?.picUrl || '',
+    artists: Array.isArray(song.artists) ? song.artists.map(artist => artist.name) : []
+  })
+}
+
 function normalizePlaylistItem(song: Song): PlaylistItem {
   return {
     id: song.id,
@@ -41,7 +52,7 @@ function normalizePlaylistItem(song: Song): PlaylistItem {
 
 const renderedCount = ref(0)
 const normalizedSongs = shallowRef<PlaylistItem[]>([])
-let normalizedSongSources: Song[] = []
+let normalizedSongFingerprints: string[] = []
 const totalSongCount = computed(() => playerStore.songList.length)
 const currentIndex = computed(() => playerStore.currentIndex)
 const renderedSongCount = computed(() =>
@@ -69,12 +80,15 @@ const visibleSongs = computed(() =>
 
 function syncNormalizedSongs(songList: Song[]): void {
   const nextNormalizedSongs = new Array<PlaylistItem>(songList.length)
-  let changed = normalizedSongSources.length !== songList.length
+  const nextFingerprints = new Array<string>(songList.length)
+  let changed = normalizedSongFingerprints.length !== songList.length
 
   for (let index = 0; index < songList.length; index += 1) {
     const song = songList[index]
+    const fingerprint = createPlaylistItemFingerprint(song)
+    nextFingerprints[index] = fingerprint
 
-    if (normalizedSongSources[index] === song) {
+    if (normalizedSongFingerprints[index] === fingerprint) {
       nextNormalizedSongs[index] = normalizedSongs.value[index]
       continue
     }
@@ -87,7 +101,7 @@ function syncNormalizedSongs(songList: Song[]): void {
     return
   }
 
-  normalizedSongSources = songList.slice()
+  normalizedSongFingerprints = nextFingerprints
   normalizedSongs.value = nextNormalizedSongs
 }
 

src/components/user/AlbumDetailPanel.vue

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

src/components/user/FavoriteAlbumsView.vue

@@ -4,8 +4,8 @@ import type { FavoriteAlbumItem } from '@/composables/useFavoriteAlbums'
 interface FavoriteAlbumsViewProps {
   albums: FavoriteAlbumItem[]
   loading?: boolean
-  activeAlbumId?: string | null
-  playingAlbumId?: string | null
+  activeAlbumId?: FavoriteAlbumItem['id'] | null
+  playingAlbumId?: FavoriteAlbumItem['id'] | null
 }
 
 const props = withDefaults(defineProps<FavoriteAlbumsViewProps>(), {
@@ -28,7 +28,11 @@ function handleAlbumPlay(albumId: string | number): void {
 }
 
 function isPlayingAlbum(albumId: string | number): boolean {
-  return String(albumId) === props.playingAlbumId
+  return props.playingAlbumId !== null && String(albumId) === String(props.playingAlbumId)
+}
+
+function isActiveAlbum(albumId: FavoriteAlbumItem['id']): boolean {
+  return props.activeAlbumId !== null && String(albumId) === String(props.activeAlbumId)
 }
 
 function formatArtistName(album: FavoriteAlbumItem): string {
@@ -52,7 +56,7 @@ function formatArtistName(album: FavoriteAlbumItem): string {
         v-for="album in props.albums"
         :key="album.id"
         class="album-card"
-        :class="{ active: String(album.id) === props.activeAlbumId }"
+        :class="{ active: isActiveAlbum(album.id) }"
       >
         <button type="button" class="album-card-hit" @click="handleAlbumOpen(album.id)">
           <div class="album-cover">

src/components/user/LikedSongsView.vue

@@ -161,11 +161,11 @@ function readItemHeight(): number {
 }
 
 function clampIndex(index: number): number {
-  if (props.likeSongs.length === 0) {
+  if (filteredSongs.value.length === 0) {
     return 0
   }
 
-  return Math.min(Math.max(index, 0), props.likeSongs.length - 1)
+  return Math.min(Math.max(index, 0), filteredSongs.value.length - 1)
 }
 
 function syncItemHeight(): void {

src/components/user/PlaylistDetailPanel.vue

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

src/components/user/SongDetailList.vue

@@ -43,7 +43,15 @@ const offsetY = computed(() => startIndex.value * itemHeight.value)
 const visibleSongs = computed(() =>
   props.songs.slice(startIndex.value, endIndex.value).map((song, offset) => ({
     index: startIndex.value + offset,
-    song
+    song,
+    coverUrl: resolveSongCover(song)
+  }))
+)
+const staticSongs = computed(() =>
+  props.songs.map((song, index) => ({
+    index,
+    song,
+    coverUrl: resolveSongCover(song)
   }))
 )
 
@@ -217,16 +225,16 @@ onUnmounted(() => {
       <div class="detail-viewport" :style="{ height: `${totalHeight}px` }">
         <div class="detail-window" :style="{ transform: `translateY(${offsetY}px)` }">
           <div
-            v-for="{ song, index } in visibleSongs"
+            v-for="{ song, index, coverUrl } in visibleSongs"
             :key="`${song.id}-${index}`"
             class="detail-song-row"
           >
             <button type="button" class="detail-song" @click="emitPlaySong(index)">
               <span class="detail-song-index">{{ String(index + 1).padStart(2, '0') }}</span>
               <img
-                v-if="resolveSongCover(song)"
+                v-if="coverUrl"
                 class="detail-song-cover"
-                :src="resolveSongCover(song)"
+                :src="coverUrl"
                 :alt="song.name"
                 loading="lazy"
               />
@@ -248,17 +256,17 @@ onUnmounted(() => {
 
     <div v-else class="detail-list detail-list-static">
       <button
-        v-for="(song, index) in props.songs"
+        v-for="{ song, index, coverUrl } in staticSongs"
         :key="`${song.id}-${index}`"
         type="button"
         class="detail-song"
         @click="emitPlaySong(index)"
       >
         <span class="detail-song-index">{{ String(index + 1).padStart(2, '0') }}</span>
         <img
-          v-if="resolveSongCover(song)"
+          v-if="coverUrl"
           class="detail-song-cover"
-          :src="resolveSongCover(song)"
+          :src="coverUrl"
           :alt="song.name"
           loading="lazy"
         />

src/composables/useFavoriteAlbums.ts

@@ -1,5 +1,11 @@
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
 
+import type {
+  AlbumDetailResponse,
+  AlbumInfoResponse as RawAlbumInfo,
+  AlbumSublistResponse,
+  AlbumTrackResponse as RawAlbumTrack
+} from '@/api/album'
 import { getAlbumDetail, getAlbumSublist } from '@/api/album'
 import { createSong, type Song } from '@/platform/music/interface'
 import { isCanceledRequestError } from '@/utils/http/cancelError'
@@ -24,64 +30,6 @@ export interface UseFavoriteAlbumsReturn {
   loadAlbumSongs: (albumId: string | number) => Promise<Song[]>
 }
 
-interface RawAlbumArtist {
-  id?: string | number
-  name?: string
-}
-
-interface RawAlbumInfo {
-  id?: string | number
-  name?: string
-  picUrl?: string
-  size?: number
-  artist?: RawAlbumArtist
-  artists?: RawAlbumArtist[]
-}
-
-interface RawAlbumTrack {
-  id?: string | number
-  name?: string
-  platform?: Song['platform']
-  server?: Song['platform']
-  artists?: RawAlbumArtist[]
-  ar?: RawAlbumArtist[]
-  album?: {
-    id?: string | number
-    name?: string
-    picUrl?: string
-    artist?: {
-      img1v1Url?: string
-    }
-  }
-  al?: {
-    id?: string | number
-    name?: string
-    picUrl?: string
-    artist?: {
-      img1v1Url?: string
-    }
-  }
-  duration?: number
-  dt?: number
-  mvid?: string | number
-  mv?: string | number
-  originalId?: string | number
-  url?: string
-  mediaId?: string | number
-  extra?: Record<string, unknown>
-}
-
-interface AlbumSublistResponse {
-  count?: number
-  data?: RawAlbumInfo[]
-  hasMore?: boolean
-}
-
-interface AlbumDetailResponse {
-  album?: RawAlbumInfo
-  songs?: RawAlbumTrack[]
-}
-
 const ALBUM_PAGE_SIZE = 50
 
 function formatAlbumArtistName(album: RawAlbumInfo): string {
@@ -217,27 +165,28 @@ export function useFavoriteAlbums(): UseFavoriteAlbumsReturn {
         const response = (await task.guard(
           getAlbumSublist(ALBUM_PAGE_SIZE, offset)
         )) as AlbumSublistResponse
-        const pageAlbums = extractFavoriteAlbums(response)
+        const rawPageAlbums = extractFavoriteAlbums(response)
+        const rawPageCount = rawPageAlbums.length
+        const pageAlbums = rawPageAlbums
           .map(album => normalizeFavoriteAlbum(album))
           .filter((album): album is FavoriteAlbumItem => Boolean(album))
 
         nextAlbums.push(...pageAlbums)
 
         const totalCount = Number(response.count)
         const reachedEnd =
-          pageAlbums.length === 0 ||
-          (Number.isFinite(totalCount) && nextAlbums.length >= totalCount)
+          rawPageCount === 0 || (Number.isFinite(totalCount) && nextAlbums.length >= totalCount)
 
         const canInferMore =
-          pageAlbums.length === ALBUM_PAGE_SIZE &&
+          rawPageCount === ALBUM_PAGE_SIZE &&
           (!Number.isFinite(totalCount) || nextAlbums.length < totalCount)
 
         hasMore = (response.hasMore ?? canInferMore) && !reachedEnd
         if (!hasMore) {
           break
         }
 
-        offset += pageAlbums.length
+        offset += rawPageCount
       }
 
       task.commit(() => {