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

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