From b6a5461a1d5185ed2ecba0cfc77bfac440d43aa3 Mon Sep 17 00:00:00 2001 From: alger Date: Wed, 4 Sep 2024 15:20:43 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=20=E5=8D=87=E7=BA=A7vue3.5=20electron32?= =?UTF-8?q?=E7=AD=89=E5=A4=9A=E4=B8=AA=E5=8C=85=20=E6=B7=BB=E5=8A=A0v-load?= =?UTF-8?q?ing=E6=8C=87=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 3 +- package.json | 46 +++++++------- src/components/MusicList.vue | 39 +++++------- src/components/RecommendSinger.vue | 23 ++++++- src/components/RecommendSonglist.vue | 10 ++- src/directive/index.ts | 7 +++ src/directive/loading/index.ts | 40 ++++++++++++ src/directive/loading/index.vue | 92 ++++++++++++++++++++++++++++ src/main.ts | 5 ++ src/views/list/index.vue | 10 ++- src/views/login/index.vue | 8 +++ src/views/mv/index.vue | 10 ++- src/views/search/index.vue | 46 +++++++------- src/views/user/index.vue | 15 +++-- 14 files changed, 268 insertions(+), 86 deletions(-) create mode 100644 src/directive/index.ts create mode 100644 src/directive/loading/index.ts create mode 100644 src/directive/loading/index.vue diff --git a/components.d.ts b/components.d.ts index 83da548..c777cfd 100644 --- a/components.d.ts +++ b/components.d.ts @@ -1,10 +1,10 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { MPop: typeof import('./src/components/common/MPop.vue')['default'] @@ -23,7 +23,6 @@ declare module 'vue' { NPopover: typeof import('naive-ui')['NPopover'] NScrollbar: typeof import('naive-ui')['NScrollbar'] NSlider: typeof import('naive-ui')['NSlider'] - NSpin: typeof import('naive-ui')['NSpin'] NSwitch: typeof import('naive-ui')['NSwitch'] NTooltip: typeof import('naive-ui')['NTooltip'] PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default'] diff --git a/package.json b/package.json index 330e9fe..28b307b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "alger-music", - "version": "1.5.1", + "version": "1.6.0", "description": "这是一个用于音乐播放的应用程序。", "author": "Alger ", "main": "app.js", @@ -21,16 +21,16 @@ "@tailwindcss/postcss7-compat": "^2.2.4", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", - "@vitejs/plugin-vue": "^4.2.3", - "@vue/compiler-sfc": "^3.3.4", - "@vue/eslint-config-typescript": "^12.0.0", - "@vue/runtime-core": "^3.3.4", - "@vueuse/core": "^10.7.1", - "@vueuse/electron": "^10.9.0", - "autoprefixer": "^9.8.6", - "axios": "^0.21.1", - "electron": "^30.0.0", - "electron-builder": "^24.13.0", + "@vitejs/plugin-vue": "^5.1.3", + "@vue/compiler-sfc": "^3.5.0", + "@vue/eslint-config-typescript": "^13.0.0", + "@vue/runtime-core": "^3.5.0", + "@vueuse/core": "^11.0.3", + "@vueuse/electron": "^11.0.3", + "autoprefixer": "^10.4.20", + "axios": "^1.7.7", + "electron": "^32.0.1", + "electron-builder": "^25.0.5", "eslint": "^8.56.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-prettier": "^9.0.0", @@ -40,22 +40,22 @@ "eslint-plugin-vue": "^9.21.1", "eslint-plugin-vue-scoped-css": "^2.7.2", "lodash": "^4.17.21", - "naive-ui": "^2.38.2", - "postcss": "^7.0.36", - "prettier": "^3.2.5", + "naive-ui": "^2.39.0", + "postcss": "^8.4.44", + "prettier": "^3.3.3", "remixicon": "^4.2.0", - "sass": "^1.35.2", + "sass": "^1.78.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4", - "typescript": "^4.3.2", - "unplugin-auto-import": "^0.17.2", - "unplugin-vue-components": "^0.26.0", + "typescript": "^5.5.4", + "unplugin-auto-import": "^0.18.2", + "unplugin-vue-components": "^0.27.4", "vfonts": "^0.1.0", - "vite": "^4.4.7", + "vite": "^5.4.3", "vite-plugin-compression": "^0.5.1", - "vite-plugin-vue-devtools": "1.0.0-beta.5", - "vue": "^3.3.4", - "vue-router": "^4.2.4", - "vue-tsc": "^0.0.24", + "vite-plugin-vue-devtools": "7.4.0", + "vue": "^3.5.0", + "vue-router": "^4.4.3", + "vue-tsc": "^2.1.4", "vuex": "^4.1.0" } } diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue index 825b3f4..33645e0 100644 --- a/src/components/MusicList.vue +++ b/src/components/MusicList.vue @@ -9,20 +9,18 @@
{{ name }}
-
+
- -
-
- -
+
+
+
- +
@@ -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); }; diff --git a/src/components/RecommendSinger.vue b/src/components/RecommendSinger.vue index b9a7d4b..602fb8f 100644 --- a/src/components/RecommendSinger.vue +++ b/src/components/RecommendSinger.vue @@ -4,6 +4,7 @@
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(); const dayRecommendData = ref(); @@ -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(); + } +}); diff --git a/src/main.ts b/src/main.ts index df2f7df..fb5321d 100644 --- a/src/main.ts +++ b/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'); diff --git a/src/views/list/index.vue b/src/views/list/index.vue index cefeaed..2d00481 100644 --- a/src/views/list/index.vue +++ b/src/views/list/index.vue @@ -16,19 +16,24 @@ const showMusic = ref(false); const recommendItem = ref(); const listDetail = ref(); +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(
{{ listTitle }}
-
+
diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 5f84464..cfb2492 100644 --- a/src/views/login/index.vue +++ b/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 = () => { diff --git a/src/views/mv/index.vue b/src/views/mv/index.vue index c849635..6d899b0 100644 --- a/src/views/mv/index.vue +++ b/src/views/mv/index.vue @@ -4,7 +4,7 @@

推荐MV

-
+
-
+
{{ playMvItem?.name }}
@@ -62,19 +62,25 @@ const mvList = ref>([]); const playMvItem = ref(); const playMvUrl = ref(); 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 = () => { diff --git a/src/views/search/index.vue b/src/views/search/index.vue index 190f0cb..c2e30dd 100644 --- a/src/views/search/index.vue +++ b/src/views/search/index.vue @@ -29,32 +29,30 @@ :native-scrollbar="false" >
{{ hotKeyword }}
- -
-