🦄 refactor(MusicList): 重构播放列表组件

src/components/MusicList.vue

@@ -0,0 +1,77 @@
+<template>
+  <n-drawer :show="show" height="70vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
+    <div class="music-page">
+      <i class="iconfont icon-icon_error music-close" @click="close"></i>
+      <div class="music-title">{{ musicList?.name }}</div>
+      <!-- 歌单歌曲列表 -->
+      <div class="music-list">
+        <n-scrollbar >
+          <div v-for="(item, index) in musicList?.tracks" :key="item.id" :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 100)">
+            <SongItem :item="formatDetail(item)" @play="handlePlay" />
+          </div>
+          <PlayBottom/>
+        </n-scrollbar>
+      </div>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { Playlist } from '@/type/listDetail';
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+import SongItem from "@/components/common/SongItem.vue";
+import PlayBottom from './common/PlayBottom.vue';
+
+const store = useStore()
+
+const props = defineProps<{
+  show: boolean;
+  musicList: Playlist;
+}>()
+const emit = defineEmits(['update:show'])
+
+const formatDetail = computed(() => (detail: any) => {
+  let song = {
+    artists: detail.ar,
+    name: detail.al.name,
+    id: detail.al.id,
+  }
+
+  detail.song = song
+  detail.picUrl = detail.al.picUrl
+  return detail
+})
+
+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))
+}
+
+const close = () => {
+  emit('update:show', false)
+}
+</script>
+
+<style scoped lang="scss">
+.music {
+  &-page {
+    @apply px-8 w-full h-full bg-black bg-opacity-75 rounded-t-2xl;
+    backdrop-filter: blur(20px);
+  }
+  &-title {
+    @apply text-lg font-bold text-white p-4;
+  }
+
+  &-close {
+    @apply absolute top-4 right-8 cursor-pointer text-white text-3xl;
+  }
+
+  &-list {
+    height: calc(100% - 60px);
+  }
+}
+</style>

src/components/common/PlayBottom.vue

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