feat play list (#42)

components/MiniPlayer.vue

@@ -51,7 +51,7 @@
           <Icon class="cursor-pointer text-[--text-color]" :name="playmodeIcon" size="24"
             @click="() => playmode < 2 ? playmode++ : playmode = 0" />
         </div>
-        <div @click="isOpen = true" class="flex  h-full items-center gap-4">
+        <div @click="isPlaylistOpen = !isPlaylistOpen" class="flex  h-full items-center gap-4">
           <Icon class="cursor-pointer text-[--text-color]" name="ri:play-list-2-line" size="24" />
         </div>
         <Volume class="lg:w-40 md:hidden" />
@@ -72,7 +72,7 @@ const { audio, playState, playerModeState, likeState, playmode, playmodeIcon,
   currentTime,
   currentSongUrl, currentSongDetail } = storeToRefs(playerStore)
 const { volume } = storeToRefs(volumeStore)
-const { isOpen } = storeToRefs(slideoverStore)
+const { isPlaylistOpen } = storeToRefs(slideoverStore)
 
 watch(volume, (newValue) => {
   audio.value!.volume = newValue

components/Playlist.vue

@@ -0,0 +1,73 @@
+<template>
+  <USlideover v-model="isPlaylistOpen">
+    <template #container>
+      <div class="h-full md:w-1/2 lg:w-1/3 flex flex-col bg-neutral-900 p-4" @click.stop>
+        <div class="flex flex-col gap-2 h-full">
+          <span class="text-xl font-black ">当前播放</span>
+          <div class="flex gap-4 pt-2 items-center">
+            <span class="text-sm font-semibold">共{{ currentPlaylist.length }}首</span>
+            <div class=" flex-1"></div>
+            <div class=" cursor-pointer select-none"><span class="font-bold text-base">收藏全部</span></div>
+            <div class=" cursor-pointer select-none" @click="clearPlaylist"><span
+                class="text-[rgb(81,126,175)] font-bold text-base">清空列表</span></div>
+          </div>
+          <div class="border-b dark:border-[rgb(63,63,63)] border-[rgb(242,242,242)]"></div>
+          <div class="max-h-full overflow-y-auto">
+            <div @dblclick="playSong(song.id)"
+              class="grid grid-cols-12 select-none gap-2 hover:bg-neutral-700 hover:cursor-pointer odd:bg-neutral-800 text-sm py-1.5 px-2"
+              v-for="song in currentPlaylist">
+              <div class="col-span-6 w-full">
+                <p class=" whitespace-nowrap text-ellipsis overflow-hidden">{{ song.name
+                  }}</p>
+              </div>
+              <div class="col-span-4 w-full">
+                <p class="whitespace-nowrap text-ellipsis overflow-hidden">{{ song.ar.map(x => x.name).join('/')
+                  }}</p>
+              </div>
+              <div class="col-span-2 w-full"><span>{{ $dayjs(song.dt).format('mm:ss') }}</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>
+<script setup lang="ts">
+import { PlayModeType } from '~/types'
+
+const slideoverStore = useSlideoverStore()
+const playerStore = usePlayerStore()
+const { isPlaylistOpen } = storeToRefs(slideoverStore)
+const { clearPlaylist } = playerStore
+const { playlist, playmode, playState, randomPlaylist, currentSongId } = storeToRefs(playerStore)
+
+const currentPlaylist = computedAsync(async () => {
+  const ids = (playmode.value === PlayModeType.Random ? randomPlaylist.value : playlist.value).join(',')
+  if (!ids) return []
+  const { songs } = await song_detail({ ids })
+  return songs
+})
+
+/**
+ * 播放歌曲不替换歌单顺序
+ * @param id song id
+ */
+function playSong(id: number) {
+  currentSongId.value = id
+  playState.value = true
+}
+
+function handleEsc(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isPlaylistOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEsc)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleEsc)
+})
+</script>

components/ui/Slideover.vue

@@ -1,8 +1,7 @@
 <template>
   <Transition name="slideover">
-    <div v-if="isOpen" @click="isOpen = false" class="fixed inset-0 flex z-50">
-      <div
-        class="fixed flex justify-end inset-0 bottom-[--player-height] md:left-28 lg:left-40 ">
+    <div v-if="isOpen" @click="handleClose" class="fixed inset-0 flex z-50">
+      <div class="fixed flex justify-end inset-0 bottom-[--player-height] md:left-28 lg:left-40 ">
         <slot name="container">
           <div class="h-full md:w-1/2 lg:w-1/3 flex flex-col bg-background" @click.stop>
             <slot></slot>
@@ -21,6 +20,9 @@ function handleEsc(event: KeyboardEvent) {
     isOpen.value = false
   }
 }
+function handleClose() {
+  isOpen.value = false
+}
 
 onMounted(() => {
   document.addEventListener('keydown', handleEsc)

layouts/default.vue

@@ -26,11 +26,10 @@
           <slot />
         </UPanelContent>
       </UPanel>
-
     </UPage>
     <MiniPlayer />
     <Player />
-    <USlideover v-model="isOpen" />
+    <Playlist />
     <audio :loop="playmode === PlayModeType.Single" ref="audio" autoplay
       :src="currentSongUrl?.url.replace('http://', 'https://')" @ended="control('next')" @timeupdate="timeupdate" />
   </ULayout>
@@ -39,12 +38,10 @@
 import { PlayModeType } from '~/types/player'
 
 const playerStore = usePlayerStore()
-const slideoverStore = useSlideoverStore()
 const { control } = playerStore
 const { audio, playmode,
   currentTime,
   currentSongUrl } = storeToRefs(playerStore)
-const { isOpen } = storeToRefs(slideoverStore)
 
 function timeupdate(e: Event) {
   currentTime.value = (e.target as AudioContext).currentTime

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="px-4 pb-4">
-    <UHeader>
+    <UHeader class="sticky z-20 backdrop-blur-3xl">
       <div class="grid grid-cols-12 w-full h-full">
         <div class=" hidden col-span-8 md:flex lg:flex items-center justify-end gap-6 ">
           <NuxtLink v-for="link in headLink" :to="link?.to"
@@ -160,7 +160,7 @@ const headLink = computed<Array<{ key: string, name: string, to?: string }>>(()
   return [{
     key: 'recommend',
     name: '推荐',
-    //to: '/',
+    to: '/',
   }, {
     key: 'playlist',
     name: '歌单',

stores/usePlayerStore.ts

@@ -157,6 +157,11 @@ export const usePlayerStore = defineStore('player', () => {
     playState.value = true;
   }
 
+  function clearPlaylist() {
+    playlist.value = [];
+    randomPlaylist.value = [];
+  }
+
   async function removeSong(songId: number) {}
 
   /**
@@ -283,6 +288,7 @@ export const usePlayerStore = defineStore('player', () => {
     addSongs,
     replacePlaylist,
     playSong,
+    clearPlaylist,
   };
 });
 

stores/useSlideover.ts

@@ -1,6 +1,6 @@
 export const useSlideoverStore = defineStore('slideover', () => {
-  const isOpen = ref(false);
+  const isPlaylistOpen = ref(false);
   return {
-    isOpen,
+    isPlaylistOpen,
   };
 });