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

src/components/MusicList.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)