🎈 perf: 优化歌曲列表以及图片加载

src/components/MusicList.vue

@@ -9,16 +9,20 @@
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
       <div class="music-title text-el">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
-      <div class="music-list">
+      <div :show="loading" class="music-list">
         <n-scrollbar>
-          <div
+          <n-spin :show="loading">
-            v-for="(item, index) in songList"
+            <div class="music-list-content">
-            :key="item.id"
+              <div
-            :class="setAnimationClass('animate__bounceInUp')"
+                v-for="(item, index) in songList"
-            :style="setAnimationDelay(index, 50)"
+                :key="item.id"
-          >
+                :class="setAnimationClass('animate__bounceInUp')"
-            <song-item :item="formatDetail(item)" @play="handlePlay" />
+                :style="setAnimationDelay(index, 50)"
-          </div>
+              >
+                <song-item :item="formatDetail(item)" @play="handlePlay" />
+              </div>
+            </div>
+          </n-spin>
           <play-bottom />
         </n-scrollbar>
       </div>
@@ -34,6 +38,8 @@ import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 import PlayBottom from './common/PlayBottom.vue';
 
+const loading = ref(true);
+
 const store = useStore();
 
 const props = defineProps<{
@@ -43,6 +49,14 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['update:show']);
 
+watch(
+  () => props.songList,
+  (val) => {
+    loading.value = !(val && val.length);
+  },
+  { immediate: true },
+);
+
 const formatDetail = computed(() => (detail: any) => {
   const song = {
     artists: detail.ar,
@@ -81,6 +95,9 @@ const close = () => {
 
   &-list {
     height: calc(100% - 60px);
+    &-content {
+      min-height: 400px;
+    }
   }
 }
 

src/utils/index.ts

@@ -60,8 +60,11 @@ export const getMusicProxyUrl = (url: string) => {
 
 export const getImgUrl = computed(() => (url: string | undefined, size: string = '') => {
   const bdUrl = 'https://image.baidu.com/search/down?url=';
-  const imgUrl = encodeURIComponent(`${url}?param=${size}`);
+  const imgUrl = `${url}?param=${size}`;
-  return `${bdUrl}${imgUrl}`;
+  if (!getIsMc()) {
+    return imgUrl;
+  }
+  return `${bdUrl}${encodeURIComponent(imgUrl)}`;
 });
 
 export const isMobile = computed(() => {

src/views/list/index.vue

@@ -20,8 +20,8 @@ const selectRecommendItem = async (item: IRecommendItem) => {
   recommendItem.value = null;
   listDetail.value = null;
   showMusic.value = true;
-  const { data } = await getListDetail(item.id);
   recommendItem.value = item;
+  const { data } = await getListDetail(item.id);
   listDetail.value = data;
 };
 
@@ -90,10 +90,9 @@ watch(
       </div>
     </n-scrollbar>
     <music-list
-      v-if="listDetail?.playlist"
       v-model:show="showMusic"
-      :name="listDetail?.playlist.name"
+      :name="recommendItem?.name || ''"
-      :song-list="listDetail?.playlist.tracks"
+      :song-list="listDetail?.playlist.tracks || []"
     />
   </div>
 </template>

src/views/user/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { onBeforeRouteUpdate, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
 import { getListDetail } from '@/api/list';
@@ -36,8 +36,9 @@ const loadPage = async () => {
   const { data: playlistData } = await getUserPlaylist(user.value.userId);
   playList.value = playlistData.playlist;
 
-  const { data: recordData } = await getUserRecord(user.value.userId);
+  getUserRecord(user.value.userId).then(({ data: recordData }) => {
-  recordList.value = recordData.allData;
+    recordList.value = recordData.allData;
+  });
 };
 
 onActivated(() => {
@@ -52,8 +53,9 @@ const isShowList = ref(false);
 const list = ref<Playlist>();
 // 展示歌单
 const showPlaylist = async (id: number) => {
-  const { data } = await getListDetail(id);
   isShowList.value = true;
+  list.value = {};
+  const { data } = await getListDetail(id);
   list.value = data.playlist;
 };
 
@@ -77,7 +79,7 @@ const handlePlay = () => {
 </script>
 
 <template>
-  <div class="user-page" @click.stop="isShowList = false">
+  <div class="user-page">
     <div
       v-if="userDetail"
       class="left"
@@ -138,7 +140,7 @@ const handlePlay = () => {
         </n-scrollbar>
       </div>
     </div>
-    <music-list v-if="list" v-model:show="isShowList" :name="list.name" :song-list="list.tracks" />
+    <music-list v-model:show="isShowList" :name="list?.name || ''" :song-list="list?.tracks || []" />
   </div>
 </template>