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

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;
       }
     }