✨ feat: 添加eslint 和 桌面歌词（未完成）

src/components/MusicList.vue

@@ -5,12 +5,16 @@
       <div class="music-title">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
       <div class="music-list">
-        <n-scrollbar >
-          <div v-for="(item, index) in songList" :key="item.id" :class="setAnimationClass('animate__bounceInUp')"
-            :style="setAnimationDelay(index, 100)">
-            <SongItem :item="formatDetail(item)" @play="handlePlay" />
+        <n-scrollbar>
+          <div
+            v-for="(item, index) in songList"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 100)"
+          >
+            <song-item :item="formatDetail(item)" @play="handlePlay" />
           </div>
-          <PlayBottom/>
+          <play-bottom />
         </n-scrollbar>
       </div>
     </div>
@@ -18,40 +22,42 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex'
-import { setAnimationClass, setAnimationDelay } from "@/utils";
-import SongItem from "@/components/common/SongItem.vue";
+import { useStore } from 'vuex';
+
+import SongItem from '@/components/common/SongItem.vue';
+import { setAnimationClass, setAnimationDelay } from '@/utils';
+
 import PlayBottom from './common/PlayBottom.vue';
 
-const store = useStore()
+const store = useStore();
 
 const props = defineProps<{
   show: boolean;
   name: string;
-  songList: any[]
-}>()
-const emit = defineEmits(['update:show'])
+  songList: any[];
+}>();
+const emit = defineEmits(['update:show']);
 
 const formatDetail = computed(() => (detail: any) => {
-  let song = {
+  const song = {
     artists: detail.ar,
     name: detail.al.name,
     id: detail.al.id,
-  }
+  };
 
-  detail.song = song
-  detail.picUrl = detail.al.picUrl
-  return detail
-})
+  detail.song = song;
+  detail.picUrl = detail.al.picUrl;
+  return detail;
+});
 
-const handlePlay = (item: any) => {
-  const tracks = props.songList || []
-  store.commit('setPlayList', tracks)
-}
+const handlePlay = () => {
+  const tracks = props.songList || [];
+  store.commit('setPlayList', tracks);
+};
 
 const close = () => {
-  emit('update:show', false)
-}
+  emit('update:show', false);
+};
 </script>
 
 <style scoped lang="scss">
@@ -72,4 +78,4 @@ const close = () => {
     height: calc(100% - 60px);
   }
 }
-</style>
+</style>

src/components/PlaylistType.vue

@@ -1,39 +1,37 @@
 <template>
-    <!-- 歌单分类列表 -->
-    <div class="play-list-type">
-        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
-        <div>
-            <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
-                <span
-                    class="play-list-type-item"
-                    :class="setAnimationClass('animate__bounceIn')"
-                    :style="setAnimationDelay(index <= 19 ? index : index - 19)"
-                    v-show="isShowAllPlaylistCategory || index <= 19"
-                    @click="handleClickPlaylistType(item.name)"
-                >{{ item.name }}</span>
-            </template>
-            <div
-                class="play-list-type-showall"
-                :class="setAnimationClass('animate__bounceIn')"
-                :style="
-                    setAnimationDelay(
-                        !isShowAllPlaylistCategory
-                            ? 25
-                            : playlistCategory?.sub.length || 100 + 30
-                    )
-                "
-                @click="isShowAllPlaylistCategory = !isShowAllPlaylistCategory"
-            >{{ !isShowAllPlaylistCategory ? "显示全部" : "隐藏一些" }}</div>
-        </div>
+  <!-- 歌单分类列表 -->
+  <div class="play-list-type">
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
+    <div>
+      <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
+        <span
+          v-show="isShowAllPlaylistCategory || index <= 19"
+          class="play-list-type-item"
+          :class="setAnimationClass('animate__bounceIn')"
+          :style="setAnimationDelay(index <= 19 ? index : index - 19)"
+          @click="handleClickPlaylistType(item.name)"
+          >{{ item.name }}</span
+        >
+      </template>
+      <div
+        class="play-list-type-showall"
+        :class="setAnimationClass('animate__bounceIn')"
+        :style="setAnimationDelay(!isShowAllPlaylistCategory ? 25 : playlistCategory?.sub.length || 100 + 30)"
+        @click="isShowAllPlaylistCategory = !isShowAllPlaylistCategory"
+      >
+        {{ !isShowAllPlaylistCategory ? '显示全部' : '隐藏一些' }}
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import { getPlaylistCategory } from "@/api/home";
-import type { IPlayListSort } from "@/type/playlist";
-import { setAnimationDelay, setAnimationClass } from "@/utils";
-import { useRoute, useRouter } from "vue-router";
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { getPlaylistCategory } from '@/api/home';
+import type { IPlayListSort } from '@/type/playlist';
+import { setAnimationClass, setAnimationDelay } from '@/utils';
 // 歌单分类
 const playlistCategory = ref<IPlayListSort>();
 // 是否显示全部歌单分类
@@ -41,39 +39,39 @@ const isShowAllPlaylistCategory = ref<boolean>(false);
 
 // 加载歌单分类
 const loadPlaylistCategory = async () => {
-    const { data } = await getPlaylistCategory();
-    playlistCategory.value = data;
+  const { data } = await getPlaylistCategory();
+  playlistCategory.value = data;
 };
 
 const router = useRouter();
 const handleClickPlaylistType = (type: any) => {
-    router.push({
-        path: "/list",
-        query: {
-            type: type,
-        }
-    });
+  router.push({
+    path: '/list',
+    query: {
+      type,
+    },
+  });
 };
 // 页面初始化
 onMounted(() => {
-    loadPlaylistCategory();
+  loadPlaylistCategory();
 });
 </script>
 
 <style lang="scss" scoped>
 .title {
-    @apply text-lg font-bold mb-4;
+  @apply text-lg font-bold mb-4;
 }
 .play-list-type {
-    width: 250px;
-    @apply mx-6;
-    &-item,
-    &-showall {
-        @apply py-2 px-3 mr-3 mb-3 inline-block border border-gray-700 rounded-xl cursor-pointer hover:bg-green-600 transition;
-        background-color: #1a1a1a;
-    }
-    &-showall {
-        @apply block text-center;
-    }
+  width: 250px;
+  @apply mx-6;
+  &-item,
+  &-showall {
+    @apply py-2 px-3 mr-3 mb-3 inline-block border border-gray-700 rounded-xl cursor-pointer hover:bg-green-600 transition;
+    background-color: #1a1a1a;
+  }
+  &-showall {
+    @apply block text-center;
+  }
 }
 </style>

src/components/RecommendAlbum.vue

@@ -1,86 +1,86 @@
 <template>
-    <div class="recommend-album">
-        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">最新专辑</div>
-        <div class="recommend-album-list">
-            <template v-for="(item,index) in albumData?.albums" :key="item.id">
-                <div
-                    v-if="index < 6"
-                    class="recommend-album-list-item"
-                    :class="setAnimationClass('animate__backInUp')"
-                    :style="setAnimationDelay(index, 100)"
-                    @click="handleClick(item)"
-                >
-                    <n-image
-                        class="recommend-album-list-item-img"
-                        :src="getImgUrl( item.blurPicUrl, '200y200')"
-                        lazy
-                        preview-disabled
-                    />
-                    <div class="recommend-album-list-item-content">{{ item.name }}</div>
-                </div>
-            </template>
+  <div class="recommend-album">
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">最新专辑</div>
+    <div class="recommend-album-list">
+      <template v-for="(item, index) in albumData?.albums" :key="item.id">
+        <div
+          v-if="index < 6"
+          class="recommend-album-list-item"
+          :class="setAnimationClass('animate__backInUp')"
+          :style="setAnimationDelay(index, 100)"
+          @click="handleClick(item)"
+        >
+          <n-image
+            class="recommend-album-list-item-img"
+            :src="getImgUrl(item.blurPicUrl, '200y200')"
+            lazy
+            preview-disabled
+          />
+          <div class="recommend-album-list-item-content">{{ item.name }}</div>
         </div>
-       <MusicList v-model:show="showMusic" :name="albumName" :song-list="songList" />
+      </template>
     </div>
+    <MusicList v-model:show="showMusic" :name="albumName" :song-list="songList" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { getNewAlbum } from "@/api/home"
-import { ref, onMounted } from "vue";
-import type { IAlbumNew } from "@/type/album"
-import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
-import { getAlbum } from "@/api/list";
+import { onMounted, ref } from 'vue';
 
+import { getNewAlbum } from '@/api/home';
+import { getAlbum } from '@/api/list';
+import type { IAlbumNew } from '@/type/album';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 
-const albumData = ref<IAlbumNew>()
+const albumData = ref<IAlbumNew>();
 const loadAlbumList = async () => {
-    const { data } = await getNewAlbum();
-    albumData.value = data
-}
+  const { data } = await getNewAlbum();
+  albumData.value = data;
+};
 
-const showMusic = ref(false)
-const songList = ref([])
-const albumName = ref('')
+const showMusic = ref(false);
+const songList = ref([]);
+const albumName = ref('');
 
-const handleClick = async (item:any) => {
-  albumName.value = item.name
-  showMusic.value = true
-   const res = await getAlbum(item.id)
-    songList.value = res.data.songs.map((song:any)=>{
-      song.al.picUrl = song.al.picUrl || item.picUrl
-      return song
-    })
-}
+const handleClick = async (item: any) => {
+  albumName.value = item.name;
+  showMusic.value = true;
+  const res = await getAlbum(item.id);
+  songList.value = res.data.songs.map((song: any) => {
+    song.al.picUrl = song.al.picUrl || item.picUrl;
+    return song;
+  });
+};
 
 onMounted(() => {
-    loadAlbumList()
-})
+  loadAlbumList();
+});
 </script>
 
 <style lang="scss" scoped>
 .recommend-album {
-    @apply flex-1 mx-5;
-    .title {
-        @apply text-lg font-bold mb-4;
-    }
+  @apply flex-1 mx-5;
+  .title {
+    @apply text-lg font-bold mb-4;
+  }
 
-    .recommend-album-list {
-        @apply grid grid-cols-2 grid-rows-3 gap-2;
-        &-item {
-            @apply rounded-xl overflow-hidden relative;
-            &-img {
-                @apply rounded-xl transition w-full h-full;
-            }
-            &:hover img {
-                filter: brightness(50%);
-            }
-            &-content {
-                @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl bg-opacity-60 bg-black;
-            }
-            &-content:hover {
-                opacity: 1;
-            }
-        }
+  .recommend-album-list {
+    @apply grid grid-cols-2 grid-rows-3 gap-2;
+    &-item {
+      @apply rounded-xl overflow-hidden relative;
+      &-img {
+        @apply rounded-xl transition w-full h-full;
+      }
+      &:hover img {
+        filter: brightness(50%);
+      }
+      &-content {
+        @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl bg-opacity-60 bg-black;
+      }
+      &-content:hover {
+        opacity: 1;
+      }
     }
+  }
 }
 </style>

src/components/RecommendSinger.vue

@@ -1,85 +1,79 @@
 <template>
-    <!-- 推荐歌手 -->
-    <div class="recommend-singer">
-        <div class="recommend-singer-list">
-            <div
-                class="recommend-singer-item relative"
-                :class="setAnimationClass('animate__backInRight')"
-                v-for="(item, index) in hotSingerData?.artists"
-                :style="setAnimationDelay(index, 100)"
-                :key="item.id"
-            >
-                <div
-                    :style="setBackgroundImg(getImgUrl(item.picUrl,'300y300'))"
-                    class="recommend-singer-item-bg"
-                ></div>
-                <div
-                    class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
-                >{{ item.musicSize }}首</div>
-                <div class="recommend-singer-item-info z-10">
-                    <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
-                        <i class="iconfont icon-playfill text-xl"></i>
-                    </div>
-                    <div class="ml-4">
-                        <div class="recommend-singer-item-info-name">{{ item.name }}</div>
-                        <div class="recommend-singer-item-info-name">{{ item.name }}</div>
-                    </div>
-                </div>
-            </div>
+  <!-- 推荐歌手 -->
+  <div class="recommend-singer">
+    <div class="recommend-singer-list">
+      <div
+        v-for="(item, index) in hotSingerData?.artists"
+        :key="item.id"
+        class="recommend-singer-item relative"
+        :class="setAnimationClass('animate__backInRight')"
+        :style="setAnimationDelay(index, 100)"
+      >
+        <div :style="setBackgroundImg(getImgUrl(item.picUrl, '300y300'))" class="recommend-singer-item-bg"></div>
+        <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">{{ item.musicSize }}首</div>
+        <div class="recommend-singer-item-info z-10">
+          <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
+            <i class="iconfont icon-playfill text-xl"></i>
+          </div>
+          <div class="ml-4">
+            <div class="recommend-singer-item-info-name">{{ item.name }}</div>
+            <div class="recommend-singer-item-info-name">{{ item.name }}</div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { setBackgroundImg, setAnimationDelay, setAnimationClass,getImgUrl } from "@/utils";
-import { onMounted, ref } from "vue";
-import { getHotSinger } from "@/api/home";
-import type { IHotSinger } from "@/type/singer";
-import router from "@/router";
+import { onMounted, ref } from 'vue';
+
+import { getHotSinger } from '@/api/home';
+import router from '@/router';
+import type { IHotSinger } from '@/type/singer';
+import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
 
 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
 
-//加载推荐歌手
+// 加载推荐歌手
 const loadSingerList = async () => {
-    const { data } = await getHotSinger({ offset: 0, limit: 5 });
-    hotSingerData.value = data;
+  const { data } = await getHotSinger({ offset: 0, limit: 5 });
+  hotSingerData.value = data;
 };
 // 页面初始化
 onMounted(() => {
-    loadSingerList();
+  loadSingerList();
 });
 
-
 const toSearchSinger = (keyword: string) => {
-    router.push({
-        path: "/search",
-        query: {
-            keyword: keyword,
-        },
-    });
+  router.push({
+    path: '/search',
+    query: {
+      keyword,
+    },
+  });
 };
-
 </script>
 
 <style lang="scss" scoped>
 .recommend-singer {
-    &-list {
-        @apply flex;
-        height: 280px;
+  &-list {
+    @apply flex;
+    height: 280px;
+  }
+  &-item {
+    @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between;
+    &-bg {
+      @apply bg-gray-900 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
+      filter: brightness(80%);
     }
-    &-item {
-        @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between;
-        &-bg {
-            @apply bg-gray-900 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
-            filter: brightness(80%);
-        }
-        &-info {
-            @apply flex items-center p-2;
-            &-play {
-                @apply w-12 h-12 bg-green-500 rounded-full flex justify-center items-center hover:bg-green-600 cursor-pointer;
-            }
-        }
+    &-info {
+      @apply flex items-center p-2;
+      &-play {
+        @apply w-12 h-12 bg-green-500 rounded-full flex justify-center items-center hover:bg-green-600 cursor-pointer;
+      }
     }
+  }
 }
 </style>

src/components/RecommendSonglist.vue

@@ -1,19 +1,10 @@
 <template>
   <div class="recommend-music">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
-      本周最热音乐
-    </div>
-    <div
-      class="recommend-music-list"
-      :class="setAnimationClass('animate__bounceInUp')"
-      v-show="recommendMusic?.result"
-    >
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
+    <div v-show="recommendMusic?.result" 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)"
-        >
+        <div :class="setAnimationClass('animate__bounceInUp')" :style="setAnimationDelay(index, 100)">
           <song-item :item="item" @play="handlePlay" />
         </div>
       </template>
@@ -22,30 +13,32 @@
 </template>
 
 <script lang="ts" setup>
-import { getRecommendMusic } from '@/api/home'
-import type { IRecommendMusic } from '@/type/music'
-import { setAnimationClass, setAnimationDelay } from '@/utils'
-import SongItem from './common/SongItem.vue'
-import { useStore } from 'vuex'
+import { useStore } from 'vuex';
+
+import { getRecommendMusic } from '@/api/home';
+import type { IRecommendMusic } from '@/type/music';
+import { setAnimationClass, setAnimationDelay } from '@/utils';
+
+import SongItem from './common/SongItem.vue';
 
 const store = useStore();
 // 推荐歌曲
-const recommendMusic = ref<IRecommendMusic>()
+const recommendMusic = ref<IRecommendMusic>();
 
 // 加载推荐歌曲
 const loadRecommendMusic = async () => {
-  const { data } = await getRecommendMusic({ limit: 10 })
-  recommendMusic.value = data
-}
+  const { data } = await getRecommendMusic({ limit: 10 });
+  recommendMusic.value = data;
+};
 
 // 页面初始化
 onMounted(() => {
-  loadRecommendMusic()
-})
+  loadRecommendMusic();
+});
 
-const handlePlay = (item: any) => {
-  store.commit('setPlayList', recommendMusic.value?.result)
-}
+const handlePlay = () => {
+  store.commit('setPlayList', recommendMusic.value?.result);
+};
 </script>
 
 <style lang="scss" scoped>

src/components/common/MPop.vue

@@ -1,42 +1,40 @@
-<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>
+<script lang="ts" setup>
+import { setAnimationClass } 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');
+  }
+  return setAnimationClass('animate__fadeOutDown');
+});
+</script>
+
+<template>
+  <div v-show="props.showPop" class="pop-page" :class="musicFullClass">
+    <i v-if="props.showClose" class="iconfont icon-icon_error 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;
+  }
+}
+</style>

src/components/common/PlayBottom.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="bottom" v-if="isPlay"></div>
+  <div v-if="isPlay" class="bottom"></div>
 </template>
 
 <script setup lang="ts">
 import { useStore } from 'vuex';
-const store = useStore()
-const isPlay = computed(() => store.state.isPlay as boolean)
+
+const store = useStore();
+const isPlay = computed(() => store.state.isPlay as boolean);
 </script>
 
 <style lang="scss" scoped>
-.bottom{
+.bottom {
   @apply h-28;
 }
-</style>
+</style>

src/components/common/SearchItem.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="search-item" @click="handleClick">
     <div class="search-item-img">
-      <n-image
-        :src="getImgUrl(item.picUrl, 'album')"
-        lazy
-        preview-disabled
-      />
+      <n-image :src="getImgUrl(item.picUrl, 'album')" lazy preview-disabled />
     </div>
     <div class="search-item-info">
       <div class="search-item-name">{{ item.name }}</div>
-      <div class="search-item-artist">{{ item.desc}}</div>
+      <div class="search-item-artist">{{ item.desc }}</div>
     </div>
 
     <MusicList v-model:show="showMusic" :name="item.name" :song-list="songList" />
@@ -17,54 +13,49 @@
 </template>
 
 <script setup lang="ts">
-import { getImgUrl } from '@/utils'
-import type {Album}  from '@/type/album'
 import { getAlbum } from '@/api/list';
+import { getImgUrl } from '@/utils';
+
 const props = defineProps<{
   item: {
-    picUrl: string
-    name: string
-    desc: string
-    type: string
-    [key: string]: any
-  }
-}>()
+    picUrl: string;
+    name: string;
+    desc: string;
+    type: string;
+    [key: string]: any;
+  };
+}>();
 
-const songList = ref([])
+const songList = ref([]);
 
-const showMusic = ref(false)
+const showMusic = ref(false);
 
 const handleClick = async () => {
-  showMusic.value = true
-  if(props.item.type === '专辑'){
-   const res = await getAlbum(props.item.id)
-    songList.value = res.data.songs.map((song:any)=>{
-      song.al.picUrl = song.al.picUrl || props.item.picUrl
-      return song
-    })
+  showMusic.value = true;
+  if (props.item.type === '专辑') {
+    const res = await getAlbum(props.item.id);
+    songList.value = res.data.songs.map((song: any) => {
+      song.al.picUrl = song.al.picUrl || props.item.picUrl;
+      return song;
+    });
   }
-}
-
+};
 </script>
 
 <style scoped lang="scss">
-
-.search-item{
+.search-item {
   @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
   margin: 0 10px;
-  .search-item-img{
+  .search-item-img {
     @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
   }
-  .search-item-info{
-    &-name{
+  .search-item-info {
+    &-name {
       @apply text-white text-sm text-center;
     }
-    &-artist{
+    &-artist {
       @apply text-gray-400 text-xs text-center;
     }
   }
-
-
 }
-
-</style>
+</style>

src/components/common/SongItem.vue

@@ -1,27 +1,14 @@
 <template>
-  <div class="song-item" :class="{'song-mini': mini}">
-    <n-image
-      v-if="item.picUrl "
-      :src="getImgUrl( item.picUrl, '40y40')"
-      class="song-item-img"
-      lazy
-      preview-disabled
-    />
+  <div class="song-item" :class="{ 'song-mini': mini }">
+    <n-image v-if="item.picUrl" :src="getImgUrl(item.picUrl, '40y40')" class="song-item-img" lazy preview-disabled />
     <div class="song-item-content">
       <div class="song-item-content-title">
-        <n-ellipsis class="text-ellipsis" line-clamp="1">{{
-          item.name
-        }}</n-ellipsis>
+        <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.name }}</n-ellipsis>
       </div>
       <div class="song-item-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          <span
-            v-for="(artists, artistsindex) in item.song.artists"
-            :key="artistsindex"
-            >{{ artists.name
-            }}{{
-              artistsindex < item.song.artists.length - 1 ? ' / ' : ''
-            }}</span
+          <span v-for="(artists, artistsindex) in item.song.artists" :key="artistsindex"
+            >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span
           >
         </n-ellipsis>
       </div>
@@ -43,40 +30,43 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
-import type { SongResult } from '@/type/music'
-import { getImgUrl } from '@/utils'
+import { useStore } from 'vuex';
 
-const props = withDefaults(defineProps<{
-  item: SongResult
-  mini?: boolean
-}>(), {
-  mini: false
-})
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
 
-const store = useStore()
+const props = withDefaults(
+  defineProps<{
+    item: SongResult;
+    mini?: boolean;
+  }>(),
+  {
+    mini: false,
+  },
+);
 
-const play = computed(() => store.state.play as boolean)
+const store = useStore();
 
-const playMusic = computed(() => store.state.playMusic)
+const play = computed(() => store.state.play as boolean);
+
+const playMusic = computed(() => store.state.playMusic);
 
 // 判断是否为正在播放的音乐
 const isPlaying = computed(() => {
-  return playMusic.value.id == props.item.id
-})
+  return playMusic.value.id === props.item.id;
+});
 
-const emits = defineEmits(['play'])
+const emits = defineEmits(['play']);
 
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = (item: any) => {
-  store.commit('setPlay', item)
-  store.commit('setIsPlay', true)
-  emits('play', item)
-}
+  store.commit('setPlay', item);
+  store.commit('setIsPlay', true);
+  emits('play', item);
+};
 </script>
 
 <style lang="scss" scoped>
-
 // 配置文字不可选中
 .text-ellipsis {
   width: 100%;
@@ -119,31 +109,31 @@ const playMusicEvent = (item: any) => {
   }
 }
 
-.song-mini{
+.song-mini {
   @apply p-2 rounded-2xl;
-  .song-item{
+  .song-item {
     @apply p-0;
-    &-img{
+    &-img {
       @apply w-10 h-10 mr-2;
     }
-    &-content{
+    &-content {
       @apply flex-1;
-      &-title{
+      &-title {
         @apply text-sm;
       }
-      &-name{
+      &-name {
         @apply text-xs;
       }
     }
-    &-operating{
+    &-operating {
       @apply pl-2;
-      .iconfont{
+      .iconfont {
         @apply text-base;
       }
-      &-like{
+      &-like {
         @apply mr-1;
       }
-      &-play{
+      &-play {
         @apply w-8 h-8;
       }
     }