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

src/components/MusicList.vue

@@ -9,20 +9,18 @@
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
       <div class="music-title text-el">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
-      <div :show="loading" class="music-list">
+      <div class="music-list">
         <n-scrollbar>
-          <n-spin :show="loading">
-            <div class="music-list-content">
-              <div
-                v-for="(item, index) in songList"
-                :key="item.id"
-                :class="setAnimationClass('animate__bounceInUp')"
-                :style="setAnimationDelay(index, 50)"
-              >
-                <song-item :item="formatDetail(item)" @play="handlePlay" />
-              </div>
+          <div v-loading="loading || !songList.length" class="music-list-content">
+            <div
+              v-for="(item, index) in songList"
+              :key="item.id"
+              :class="setAnimationClass('animate__bounceInLeft')"
+              :style="setAnimationDelay(index, 50)"
+            >
+              <song-item :item="formatDetail(item)" @play="handlePlay" />
             </div>
-          </n-spin>
+          </div>
           <play-bottom />
         </n-scrollbar>
       </div>
@@ -38,24 +36,15 @@ import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 import PlayBottom from './common/PlayBottom.vue';
 
-const loading = ref(true);
-
 const store = useStore();
 
-const props = defineProps<{
+const { songList, loading = false } = defineProps<{
   show: boolean;
   name: string;
   songList: any[];
+  loading?: boolean;
 }>();
-const emit = defineEmits(['update:show']);
-
-watch(
-  () => props.songList,
-  (val) => {
-    loading.value = !(val && val.length);
-  },
-  { immediate: true },
-);
+const emit = defineEmits(['update:show', 'update:loading']);
 
 const formatDetail = computed(() => (detail: any) => {
   const song = {
@@ -70,7 +59,7 @@ const formatDetail = computed(() => (detail: any) => {
 });
 
 const handlePlay = () => {
-  const tracks = props.songList || [];
+  const tracks = songList || [];
   store.commit('setPlayList', tracks);
 };
 

src/components/RecommendSinger.vue

@@ -4,6 +4,7 @@
     <div class="recommend-singer">
       <div class="recommend-singer-list">
         <div
+          v-if="dayRecommendData"
           class="recommend-singer-item relative"
           :class="setAnimationClass('animate__backInRight')"
           :style="setAnimationDelay(0, 100)"
@@ -27,7 +28,7 @@
           </div>
         </div>
         <div
-          v-for="(item, index) in hotSingerData?.artists.slice(0, 4)"
+          v-for="(item, index) in hotSingerData?.artists"
           :key="item.id"
           class="recommend-singer-item relative"
           :class="setAnimationClass('animate__backInRight')"
@@ -59,6 +60,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
 
 import { getDayRecommend, getHotSinger } from '@/api/home';
 import router from '@/router';
@@ -66,6 +68,8 @@ import { IDayRecommend } from '@/type/day_recommend';
 import type { IHotSinger } from '@/type/singer';
 import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
 
+const store = useStore();
+
 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
 const dayRecommendData = ref<IDayRecommend>();
@@ -82,18 +86,24 @@ const showMusic = ref(false);
 // };
 // 页面初始化
 onMounted(async () => {
+  await loadData();
+});
+
+const loadData = async () => {
   try {
     const [{ data: singerData }, { data: dayRecommend }] = await Promise.all([
       getHotSinger({ offset: 0, limit: 5 }),
       getDayRecommend(),
     ]);
-
+    if (dayRecommend.data) {
+      singerData.artists = singerData.artists.slice(0, 4);
+    }
     hotSingerData.value = singerData;
     dayRecommendData.value = dayRecommend.data;
   } catch (error) {
     console.error('error', error);
   }
-});
+};
 
 const toSearchSinger = (keyword: string) => {
   router.push({
@@ -103,6 +113,13 @@ const toSearchSinger = (keyword: string) => {
     },
   });
 };
+
+// 监听登录状态
+watchEffect(() => {
+  if (store.state.user) {
+    loadData();
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/components/RecommendSonglist.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="recommend-music">
     <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
-    <div v-show="recommendMusic?.result" class="recommend-music-list" :class="setAnimationClass('animate__bounceInUp')">
+    <div
+      v-show="recommendMusic?.result"
+      v-loading="loading"
+      class="recommend-music-list"
+      :class="setAnimationClass('animate__bounceInUp')"
+    >
       <!-- 推荐音乐列表 -->
       <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
         <div :class="setAnimationClass('animate__bounceInUp')" :style="setAnimationDelay(index, 100)">
@@ -24,11 +29,14 @@ import SongItem from './common/SongItem.vue';
 const store = useStore();
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();
+const loading = ref(false);
 
 // 加载推荐歌曲
 const loadRecommendMusic = async () => {
+  loading.value = true;
   const { data } = await getRecommendMusic({ limit: 10 });
   recommendMusic.value = data;
+  loading.value = false;
 };
 
 // 页面初始化

src/directive/index.ts

@@ -0,0 +1,7 @@
+import { vLoading } from './loading/index';
+
+const directives = {
+  loading: vLoading,
+};
+
+export default directives;

src/directive/loading/index.ts

@@ -0,0 +1,40 @@
+import { createVNode, render, VNode } from 'vue';
+
+import Loading from './index.vue';
+
+const vnode: VNode = createVNode(Loading) as VNode;
+
+export const vLoading = {
+  // 在绑定元素的父组件 及他自己的所有子节点都挂载完成后调用
+  mounted: (el: HTMLElement, binding: any) => {
+    render(vnode, el);
+  },
+  // 在绑定元素的父组件 及他自己的所有子节点都更新后调用
+  updated: (el: HTMLElement, binding: any) => {
+    if (binding.value) {
+      vnode?.component?.exposed.show();
+    } else {
+      vnode?.component?.exposed.hide();
+    }
+    // 动态添加删除自定义class: loading-parent
+    formatterClass(el, binding);
+  },
+  // 绑定元素的父组件卸载后调用
+  unmounted: () => {
+    vnode?.component?.exposed.hide();
+  },
+};
+
+function formatterClass(el: HTMLElement, binding: any) {
+  const classStr = el.getAttribute('class');
+  const tagetClass: number = classStr?.indexOf('loading-parent') as number;
+  if (binding.value) {
+    if (tagetClass === -1) {
+      el.setAttribute('class', `${classStr} loading-parent`);
+    }
+  } else if (tagetClass > -1) {
+    const classArray: Array<string> = classStr?.split('') as string[];
+    classArray.splice(tagetClass - 1, tagetClass + 15);
+    el.setAttribute('class', classArray?.join(''));
+  }
+}

src/directive/loading/index.vue

@@ -0,0 +1,92 @@
+<!--  -->
+<template>
+  <div v-if="isShow" class="loading-box">
+    <div class="mask" :style="{ background: maskBackground }"></div>
+    <div class="loading-content-box">
+      <n-spin size="small" />
+      <div :style="{ color: textColor }" class="tip">{{ tip }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NSpin } from 'naive-ui';
+import { ref } from 'vue';
+
+defineProps({
+  tip: {
+    type: String,
+    default() {
+      return '加载中...';
+    },
+  },
+  maskBackground: {
+    type: String,
+    default() {
+      return 'rgba(0, 0, 0, 0.8)';
+    },
+  },
+  loadingColor: {
+    type: String,
+    default() {
+      return 'rgba(255, 255, 255, 1)';
+    },
+  },
+  textColor: {
+    type: String,
+    default() {
+      return 'rgba(255, 255, 255, 1)';
+    },
+  },
+});
+
+const isShow = ref(false);
+const show = () => {
+  isShow.value = true;
+};
+const hide = () => {
+  isShow.value = false;
+};
+defineExpose({
+  show,
+  hide,
+  isShow,
+});
+</script>
+<style lang="scss" scoped>
+.loading-box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 9999;
+  .n-spin {
+    // color: #ccc;
+  }
+  .mask {
+    width: 100%;
+    height: 100%;
+  }
+  .loading-content-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .tip {
+    font-size: 14px;
+    margin-top: 8px;
+  }
+}
+</style>

src/main.ts

@@ -10,8 +10,13 @@ import router from '@/router';
 import store from '@/store';
 
 import App from './App.vue';
+import directives from './directive';
 
 const app = createApp(App);
+
+Object.keys(directives).forEach((key: string) => {
+  app.directive(key, directives[key]);
+});
 app.use(router);
 app.use(store);
 app.mount('#app');

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"