lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-23 23:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎈 perf: 添加自动导入，优化性能

Browse Source
This commit is contained in:
alger
2023-12-27 14:40:22 +08:00
parent 70139e3ca4
commit 6c57e77969
29 changed files with 268 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
-1
View File
@@ -11,7 +11,6 @@
<script lang="ts" setup>
import { darkTheme } from 'naive-ui'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
const audio = ref<HTMLAudioElement | null>(null)
src/components/MusicList.vue
+1 -2
View File
@@ -18,7 +18,6 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { Playlist } from '@/type/listDetail';
import { setAnimationClass, setAnimationDelay } from "@/utils";
@@ -48,7 +47,7 @@ const formatDetail = computed(() => (detail: any) => {
const handlePlay = (item: any) => {
const tracks = props.musicList?.tracks || []
const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
store.commit('setPlayList', tracks.slice(musicIndex))
store.commit('setPlayList', tracks)
}
const close = () => {
src/components/RecommendSinger.vue
+1 -1
View File
@@ -66,7 +66,7 @@ const toSearchSinger = (keyword: string) => {
.recommend-singer {
&-list {
@apply flex;
height: 350px;
height: 280px;
}
&-item {
@apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between;
src/components/RecommendSonglist.vue
+1 -2
View File
@@ -22,7 +22,6 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getRecommendMusic } from '@/api/home'
import type { IRecommendMusic } from '@/type/music'
import { setAnimationClass, setAnimationDelay } from '@/utils'
@@ -46,7 +45,7 @@ onMounted(() => {
const handlePlay = (item: any) => {
const musicIndex = (recommendMusic.value?.result.findIndex((music: any) => music.id == item.id) || 0) + 1
store.commit('setPlayList', recommendMusic.value?.result.slice(musicIndex))
store.commit('setPlayList', recommendMusic.value?.result)
}
</script>
src/components/common/MPop.vue
+41 -42
View File
@@ -1,43 +1,42 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { setAnimationClass, setAnimationDelay } from "@/utils";
const props = defineProps({
showPop: {
type: Boolean,
default: false
},
showClose: {
type: Boolean,
default: true
},
})
const musicFullClass = computed(() => {
if (props.showPop) {
return setAnimationClass('animate__fadeInUp')
} else {
return setAnimationClass('animate__fadeOutDown')
}
})
</script>
<template>
<div class="pop-page" v-show="props.showPop" :class="musicFullClass">
<i class="iconfont icon-icon_error close" v-if="props.showClose" @click="close()"></i>
<img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
.pop-page {
height: 800px;
@apply absolute top-4 left-0 w-full;
background-color: #000000f0;
.close {
@apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
}
}
<script lang="ts" setup>
import { setAnimationClass, setAnimationDelay } from "@/utils";
const props = defineProps({
showPop: {
type: Boolean,
default: false
},
showClose: {
type: Boolean,
default: true
},
})
const musicFullClass = computed(() => {
if (props.showPop) {
return setAnimationClass('animate__fadeInUp')
} else {
return setAnimationClass('animate__fadeOutDown')
}
})
</script>
<template>
<div class="pop-page" v-show="props.showPop" :class="musicFullClass">
<i class="iconfont icon-icon_error close" v-if="props.showClose"></i>
<img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
.pop-page {
height: 800px;
@apply absolute top-4 left-0 w-full;
background-color: #000000f0;
.close {
@apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
}
}
</style>
src/components/common/PlayBottom.vue
-1
View File
@@ -3,7 +3,6 @@
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore()
const isPlay = computed(() => store.state.isPlay as boolean)
src/hooks/MusicHook.ts
-1
View File
@@ -1,7 +1,6 @@
import { getMusicLrc } from '@/api/music'
import { ILyric } from '@/type/lyric'
import { getIsMc } from '@/utils'
import { ref } from 'vue'
interface ILrcData {
text: string
src/layout/AppLayout.vue
-3
View File
@@ -31,10 +31,7 @@
<script lang="ts" setup>
import type { SongResult } from '@/type/music';
import { computed } from 'vue';
import { useStore } from 'vuex';
// import { AppMenu, PlayBar, SearchBar } from './components';
import { defineAsyncComponent } from 'vue';
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
src/layout/components/lrcFull.vue
-2
View File
@@ -5,8 +5,6 @@
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
lrcList: {
type: Array,
src/main.ts
+19 -19
View File
@@ -1,19 +1,19 @@
import { createApp } from "vue";
import App from "./App.vue";
import naive from "naive-ui";
import "vfonts/Lato.css";
import "vfonts/FiraCode.css";
// tailwind css
import "./index.css";
import router from "@/router";
import store from "@/store";
const app = createApp(App);
app.use(router);
app.use(store);
app.use(naive);
app.mount("#app");
import { createApp } from "vue";
import App from "./App.vue";
import naive from "naive-ui";
import "vfonts/Lato.css";
import "vfonts/FiraCode.css";
// tailwind css
import "./index.css";
import router from "@/router";
import store from "@/store";
const app = createApp(App);
app.use(router);
app.use(store);
// app.use(naive);
app.mount("#app");
src/utils/index.ts
-3
View File
@@ -1,5 +1,3 @@
import { computed } from 'vue'
// 设置歌手背景图片
export const setBackgroundImg = (url: String) => {
return 'background-image:' + 'url(' + url + ')'
@@ -41,7 +39,6 @@ export const getMusicProxyUrl = (url: string) => {
return `${ProxyUrl}/mc?url=${PUrl}`
}
export const getImgUrl = computed(() => (url: string, size: string = '') => {
const bdUrl = 'https://image.baidu.com/search/down?url='
const imgUrl = encodeURIComponent(`${url}?param=${size}`)
src/views/home/index.vue
-1
View File
@@ -16,7 +16,6 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
const RecommendSinger = defineAsyncComponent(() => import("@/components/RecommendSinger.vue"));
const PlaylistType = defineAsyncComponent(() => import("@/components/PlaylistType.vue"));
const RecommendSonglist = defineAsyncComponent(() => import("@/components/RecommendSonglist.vue"));
src/views/list/index.vue
+1 -3
View File
@@ -1,6 +1,5 @@
<script lang="ts" setup>
import { getRecommendList, getListDetail, getListByCat } from '@/api/list'
import { ref, watch } from 'vue';
import type { IRecommendItem } from "@/type/list";
import type { IListDetail } from "@/type/listDetail";
import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
@@ -125,8 +124,7 @@ const formatNumber = (num: any) => {
@apply hover:scale-110 transition-all duration-300 ease-in-out;
}
&-img {
width: 200px;
height: 200px;
@apply h-full w-full rounded-xl overflow-hidden;
}
.top {
@apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
src/views/login/index.vue
+1 -2
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
import { onMounted } from '@vue/runtime-core';
import { ref } from 'vue';
import { getUserDetail, loginByCellphone } from '@/api/login';
import { useStore } from 'vuex';
import { useMessage } from 'naive-ui'
@@ -105,7 +104,7 @@ const loginPhone = async () => {
<style lang="scss" scoped>
.login-page {
@apply p-4 flex flex-col items-center justify-center p-20;
@apply flex flex-col items-center justify-center p-20;
}
.login-title {
src/views/search/index.vue
+1 -1
View File
@@ -115,7 +115,7 @@ const store = useStore()
const handlePlay = (item: any) => {
const tracks = searchDetail.value?.result.songs || []
const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
store.commit('setPlayList', tracks.slice(musicIndex))
store.commit('setPlayList', tracks)
}
</script>
src/views/user/index.vue
+1 -1
View File
@@ -64,7 +64,7 @@ const formatDetail = computed(() => (detail: any) => {
const handlePlay = (item: any) => {
const tracks = recordList.value || []
const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
store.commit('setPlayList', tracks.slice(musicIndex))
store.commit('setPlayList', tracks)
}
</script>