🎈 perf: 优化加载 升级vue3.5 electron32等多个包 添加v-loading指令

src/views/list/index.vue

@@ -16,19 +16,24 @@ const showMusic = ref(false);
 
 const recommendItem = ref<IRecommendItem | null>();
 const listDetail = ref<IListDetail | null>();
+const listLoading = ref(true);
 const selectRecommendItem = async (item: IRecommendItem) => {
+  listLoading.value = true;
   recommendItem.value = null;
   listDetail.value = null;
   showMusic.value = true;
   recommendItem.value = item;
   const { data } = await getListDetail(item.id);
   listDetail.value = data;
+  listLoading.value = false;
 };
 
 const route = useRoute();
 const listTitle = ref(route.query.type || '歌单列表');
 
+const loading = ref(false);
 const loadList = async (type: string) => {
+  loading.value = true;
   const params = {
     cat: type || '',
     limit: 30,
@@ -36,6 +41,7 @@ const loadList = async (type: string) => {
   };
   const { data } = await getListByCat(params);
   recommendList.value = data.playlists;
+  loading.value = false;
 };
 
 if (route.query.type) {
@@ -51,6 +57,7 @@ watch(
   async (newParams) => {
     if (newParams.type) {
       recommendList.value = null;
+      listTitle.value = newParams.type || '歌单列表';
       loadList(newParams.type as string);
     }
   },
@@ -62,7 +69,7 @@ watch(
     <div class="recommend-title" :class="setAnimationClass('animate__bounceInLeft')">{{ listTitle }}</div>
     <!-- 歌单列表 -->
     <n-scrollbar class="recommend" :size="100" @click="showMusic = false">
-      <div v-if="recommendList" class="recommend-list">
+      <div v-loading="loading" class="recommend-list">
         <div
           v-for="(item, index) in recommendList"
           :key="item.id"
@@ -91,6 +98,7 @@ watch(
     </n-scrollbar>
     <music-list
       v-model:show="showMusic"
+      v-model:loading="listLoading"
       :name="recommendItem?.name || ''"
       :song-list="listDetail?.playlist.tracks || []"
     />

src/views/login/index.vue

@@ -70,6 +70,14 @@ const timerIsQr = (key: string) => {
   return timer;
 };
 
+// 离开页面时
+onBeforeUnmount(() => {
+  if (timerRef.value) {
+    clearInterval(timerRef.value);
+    timerRef.value = null;
+  }
+});
+
 // 是否扫码登陆
 const isQr = ref(!isMobile.value);
 const chooseQr = () => {

src/views/mv/index.vue

@@ -4,7 +4,7 @@
       <h2>推荐MV</h2>
     </div>
     <n-scrollbar :size="100">
-      <div class="mv-list-content" :class="setAnimationClass('animate__bounceInLeft')">
+      <div v-loading="loading" class="mv-list-content" :class="setAnimationClass('animate__bounceInLeft')">
         <div
           v-for="(item, index) in mvList"
           :key="item.id"
@@ -32,7 +32,7 @@
     </n-scrollbar>
 
     <n-drawer :show="showMv" height="100vh" placement="bottom" :z-index="999999999">
-      <div class="mv-detail">
+      <div v-loading="mvLoading" class="mv-detail">
         <video :src="playMvUrl" controls autoplay></video>
         <div class="mv-detail-title">
           <div class="title">{{ playMvItem?.name }}</div>
@@ -62,19 +62,25 @@ const mvList = ref<Array<IMvItem>>([]);
 const playMvItem = ref<IMvItem>();
 const playMvUrl = ref<string>();
 const store = useStore();
+const loading = ref(false);
 
 onMounted(async () => {
+  loading.value = true;
   const res = await getTopMv(30);
   mvList.value = res.data.data;
+  loading.value = false;
 });
 
+const mvLoading = ref(false);
 const handleShowMv = async (item: IMvItem) => {
+  mvLoading.value = true;
   store.commit('setIsPlay', false);
   store.commit('setPlayMusic', false);
   showMv.value = true;
   const res = await getMvUrl(item.id);
   playMvItem.value = item;
   playMvUrl.value = res.data.data.url;
+  mvLoading.value = false;
 };
 
 const close = () => {

src/views/search/index.vue

@@ -29,32 +29,30 @@
       :native-scrollbar="false"
     >
       <div class="title">{{ hotKeyword }}</div>
-      <n-spin :show="searchDetailLoading">
-        <div class="search-list-box">
-          <template v-if="searchDetail">
-            <div
-              v-for="(item, index) in searchDetail?.songs"
-              :key="item.id"
-              :class="setAnimationClass('animate__bounceInRight')"
-              :style="setAnimationDelay(index, 50)"
-            >
-              <song-item :item="item" @play="handlePlay" />
-            </div>
-            <template v-for="(list, key) in searchDetail">
-              <template v-if="key.toString() !== 'songs'">
-                <div
-                  v-for="(item, index) in list"
-                  :key="item.id"
-                  :class="setAnimationClass('animate__bounceInRight')"
-                  :style="setAnimationDelay(index, 50)"
-                >
-                  <SearchItem :item="item" />
-                </div>
-              </template>
+      <div v-loading="searchDetailLoading" class="search-list-box">
+        <template v-if="searchDetail">
+          <div
+            v-for="(item, index) in searchDetail?.songs"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInRight')"
+            :style="setAnimationDelay(index, 50)"
+          >
+            <song-item :item="item" @play="handlePlay" />
+          </div>
+          <template v-for="(list, key) in searchDetail">
+            <template v-if="key.toString() !== 'songs'">
+              <div
+                v-for="(item, index) in list"
+                :key="item.id"
+                :class="setAnimationClass('animate__bounceInRight')"
+                :style="setAnimationDelay(index, 50)"
+              >
+                <SearchItem :item="item" />
+              </div>
             </template>
           </template>
-        </div>
-      </n-spin>
+        </template>
+      </div>
     </n-layout>
   </div>
 </template>

src/views/user/index.vue

@@ -21,6 +21,7 @@ const router = useRouter();
 const userDetail = ref<IUserDetail>();
 const playList = ref<any[]>([]);
 const recordList = ref();
+const infoLoading = ref(false);
 
 const user = computed(() => store.state.user);
 
@@ -29,6 +30,7 @@ const loadPage = async () => {
     router.push('/login');
     return;
   }
+  infoLoading.value = true;
 
   const { data: userData } = await getUserDetail(user.value.userId);
   userDetail.value = userData;
@@ -36,9 +38,12 @@ const loadPage = async () => {
   const { data: playlistData } = await getUserPlaylist(user.value.userId);
   playList.value = playlistData.playlist;
 
-  getUserRecord(user.value.userId).then(({ data: recordData }) => {
-    recordList.value = recordData.allData;
-  });
+  // getUserRecord(user.value.userId).then(({ data: recordData }) => {
+  //   recordList.value = recordData.allData;
+  // });
+  const { data: recordData } = await getUserRecord(user.value.userId);
+  recordList.value = recordData.allData;
+  infoLoading.value = false;
 };
 
 onActivated(() => {
@@ -109,7 +114,7 @@ const handlePlay = () => {
 
         <div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
           <div class="  ">创建的歌单</div>
-          <n-scrollbar>
+          <n-scrollbar v-loading="infoLoading">
             <div v-for="(item, index) in playList" :key="index" class="play-list-item" @click="showPlaylist(item.id)">
               <n-image :src="getImgUrl(item.coverImgUrl, '50y50')" class="play-list-item-img" lazy preview-disabled />
               <div class="play-list-item-info">
@@ -125,7 +130,7 @@ const handlePlay = () => {
     <div v-if="!isMobile" class="right" :class="setAnimationClass('animate__fadeInRight')">
       <div class="title">听歌排行</div>
       <div class="record-list">
-        <n-scrollbar>
+        <n-scrollbar v-loading="infoLoading">
           <div
             v-for="(item, index) in recordList"
             :key="item.song.id"