修改动画, 修改搜索

src/layout/AppLayout.vue

@@ -14,10 +14,9 @@
                                 <!-- <keep-alive>
                                     <component :is="Component" v-if="$route.meta.keepAlive" />
                                 </keep-alive>
-                                <component :is="Component" v-if="!$route.meta.keepAlive" /> -->
-                                 <keep-alive>
-                                    <component :is="Component"/>
-                                </keep-alive>
+                                <component :is="Component" v-if="!$route.meta.keepAlive" />-->
+
+                                <component :is="Component" />
                             </router-view>
                         </n-message-provider>
                     </n-layout>
@@ -34,7 +33,7 @@ import type { SongResult } from '@/type/music';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 // import { AppMenu, PlayBar, SearchBar } from './components';
-import {defineAsyncComponent} from 'vue';
+import { defineAsyncComponent } from 'vue';
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));

src/layout/components/MusicFull.vue

@@ -0,0 +1,189 @@
+
+<template>
+  <div id="drawer-target" v-show="isFull">
+    <div class="music-img">
+      <img class="img" :src="playMusic?.picUrl + '?param=300y300'" />
+    </div>
+    <div class="music-content">
+      <div class="music-content-name">{{ playMusic?.song.name }}</div>
+      <div class="music-content-singer">
+        <span
+          v-for="(item,index) in playMusic?.song.artists"
+          :key="index"
+        >{{ item.name }}{{ index < playMusic?.song.artists.length - 1 ? ' / ' : '' }}</span>
+      </div>
+      <n-layout
+        class="music-lrc"
+        style="height: 550px;"
+        ref="lrcSider"
+        :native-scrollbar="false"
+        @mouseover="mouseOverLayout"
+        @mouseleave="mouseLeaveLayout"
+      >
+        <template v-for="(item,index) in lrcArray" :key="index">
+          <div
+            class="music-lrc-text"
+            :class="{ 'now-text': isCurrentLrc(index) }"
+            @click="setAudioTime(index)"
+          >{{ item.text }}</div>
+        </template>
+      </n-layout>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import type { SongResult } from "@/type/music";
+import type { ILyric } from "@/type/lyric";
+import { getMusicLrc } from "@/api/music"
+import { useStore } from 'vuex';
+
+const store = useStore();
+const props = defineProps({
+  isFull: {
+    type: Boolean
+  },
+  audio: {
+    type: Object,
+    default: {}
+  }
+})
+
+
+const playMusic = computed(() => store.state.playMusic as SongResult)
+
+
+const lrcData = ref<ILyric>()
+
+interface ILrcData {
+  text: string;
+  trText: string;
+}
+const lrcArray = ref<Array<ILrcData>>()
+const lrcTimeArray = ref<Array<Number>>([])
+// 加载歌词
+const loadLrc = async () => {
+  const { data } = await getMusicLrc(playMusic.value.id)
+  lrcData.value = data
+
+  try {
+
+    let musicText = data.lrc.lyric
+    //歌词时间
+    let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
+    let timeArrayNum: Array<Number> = []
+    timeArray?.forEach(function (item, index) {
+      if (item.length < 9) {
+        item = item + "0"
+      }
+      timeArrayNum.push(parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1]));
+    })
+    lrcTimeArray.value = timeArrayNum
+    //歌词
+    let musicTextArray = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+    let text = []
+
+    try {
+      let trMusicText = data.tlyric.lyric
+      let trMusicTextArray = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+      for (let i = 0; i < musicTextArray.length - 1; i++) {
+        text.push({
+          text: musicTextArray[i],
+          trText: trMusicTextArray[i]
+        })
+      }
+      lrcArray.value = text
+
+    } catch (err) {
+      text = []
+    }
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+
+const newLrcIndex = ref(0)
+const isMouse = ref(false)
+// 获取歌词滚动dom
+const lrcSider = ref<any>(null)
+// 歌词滚动方法
+const lrcScroll = () => {
+  if (props.isFull && !isMouse.value) {
+    let top = newLrcIndex.value * 50 - 225;
+    lrcSider.value.scrollTo({ top: top, behavior: 'smooth' })
+  }
+}
+
+const nowTime = ref(0)
+const allTime = ref(0)
+// 计算属性  获取当前播放时间的进度
+const timeSlider = computed({
+  get: () => nowTime.value / allTime.value * 100,
+  set: (value) => {
+    props.audio.value.currentTime = value * allTime.value / 100
+    props.audio.value.play()
+    store.commit("setPlayMusic", true);
+  }
+})
+
+// 是否是当前正在播放的歌词
+const isCurrentLrc = (index: any) => {
+  let isTrue = !(nowTime.value <= lrcTimeArray.value[index] || nowTime.value >= lrcTimeArray.value[index + 1])
+  if (isTrue) {
+    newLrcIndex.value = index
+  }
+  return isTrue
+}
+
+
+const mouseOverLayout = () => {
+  isMouse.value = true
+}
+const mouseLeaveLayout = () => {
+  setTimeout(() => {
+    isMouse.value = false
+  }, 3000);
+}
+</script>
+
+<style lang="scss" scoped>
+#drawer-target {
+  @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
+  background-color: #333333;
+  animation-duration: 300ms;
+  .music-img {
+    @apply flex-1;
+    .img {
+      @apply rounded-xl;
+    }
+  }
+
+  .music-content {
+    @apply flex flex-col justify-center items-center;
+    &-name {
+      @apply font-bold text-3xl py-2;
+    }
+    &-singer {
+      @apply text-base py-2;
+    }
+  }
+  .music-lrc {
+    background-color: #333333;
+    width: 800px;
+    height: 550px;
+    &-text {
+      @apply text-white text-lg flex justify-center items-center cursor-pointer;
+      height: 50px;
+      transition: all 0.2s ease-out;
+      &:hover {
+        @apply font-bold text-xl text-red-500;
+      }
+    }
+
+    .now-text {
+      @apply font-bold text-xl text-red-500;
+    }
+  }
+}
+</style>

src/layout/components/PlayBar.vue

@@ -1,35 +1,37 @@
 <template>
     <!-- 展开全屏 -->
-    <div id="drawer-target" :class="musicFullClass" v-show="musicFull">
-        <div class="music-img">
-            <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
-        </div>
-        <div class="music-content">
-            <div class="music-content-name">{{ playMusic.song.name }}</div>
-            <div class="music-content-singer">
-                <span
-                    v-for="(item,index) in playMusic.song.artists"
-                    :key="index"
-                >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
+    <transition name="musicPage">
+        <div id="drawer-target" v-show="musicFull">
+            <div class="music-img">
+                <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
+            </div>
+            <div class="music-content">
+                <div class="music-content-name">{{ playMusic.song.name }}</div>
+                <div class="music-content-singer">
+                    <span
+                        v-for="(item,index) in playMusic.song.artists"
+                        :key="index"
+                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
+                </div>
+                <n-layout
+                    class="music-lrc"
+                    style="height: 550px;"
+                    ref="lrcSider"
+                    :native-scrollbar="false"
+                    @mouseover="mouseOverLayout"
+                    @mouseleave="mouseLeaveLayout"
+                >
+                    <template v-for="(item,index) in lrcArray" :key="index">
+                        <div
+                            class="music-lrc-text"
+                            :class="{ 'now-text': isCurrentLrc(index) }"
+                            @click="setAudioTime(index)"
+                        >{{ item.text }}</div>
+                    </template>
+                </n-layout>
             </div>
-            <n-layout
-                class="music-lrc"
-                style="height: 550px;"
-                ref="lrcSider"
-                :native-scrollbar="false"
-                @mouseover="mouseOverLayout"
-                @mouseleave="mouseLeaveLayout"
-            >
-                <template v-for="(item,index) in lrcArray" :key="index">
-                    <div
-                        class="music-lrc-text"
-                        :class="{ 'now-text': isCurrentLrc(index) }"
-                        @click="setAudioTime(index)"
-                    >{{ item.text }}</div>
-                </template>
-            </n-layout>
         </div>
-    </div>
+    </transition>
     <!-- 底部播放栏 -->
     <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
         <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
@@ -126,6 +128,12 @@ onMounted(() => {
         }
     })
 
+    watch(() => playMusicUrl.value, (value, oldValue) => {
+        if (!value) {
+            parsingMusic()
+        }
+    })
+
     // 抬起键盘按钮监听
     document.onkeyup = (e) => {
         switch (e.code) {
@@ -240,13 +248,6 @@ const parsingMusic = async () => {
     store.state.playMusicUrl = data.data.url
 }
 
-const musicFullClass = computed(() => {
-    if (musicFull.value) {
-        return setAnimationClass('animate__fadeInUp')
-    } else {
-        return setAnimationClass('animate__fadeOutDown')
-    }
-})
 
 const lrcData = ref<ILyric>()
 
@@ -315,6 +316,12 @@ const setAudioTime = (index: any) => {
 </script>
 
 <style lang="scss" scoped>
+.musicPage-enter-active {
+    animation: fadeInUp 0.8s ease-in-out;
+}
+.musicPage-leave-active {
+    animation: fadeOutDown 0.8s ease-in-out;
+}
 #drawer-target {
     @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
     background-color: #333333;