修改动画, 修改搜索

src/api/search.ts

@@ -1,9 +1,9 @@
-import request from "@/utils/request";
-import { ISearchDetail } from "@/type/search";
+import request from "@/utils/request"
+import { ISearchDetail } from "@/type/search"
 
 // 搜索内容
 export const getSearch = (keywords: any) => {
-  return request.get<ISearchDetail>("/search", {
-    params: { keywords: keywords, type: 1018 },
-  });
-};
+  return request.get<any>("/cloudsearch", {
+    params: { keywords: keywords, type: 1 },
+  })
+}

src/components/PlaylistType.vue

@@ -7,8 +7,8 @@
                 <span
                     class="play-list-type-item"
                     :class="setAnimationClass('animate__bounceIn')"
-                    :style="setAnimationDelay(index <= 13 ? index : index - 13)"
-                    v-if="isShowAllPlaylistCategory || index <= 13"
+                    :style="setAnimationDelay(index <= 19 ? index : index - 19)"
+                    v-show="isShowAllPlaylistCategory || index <= 19"
                     @click="handleClickPlaylistType(item.name)"
                 >{{ item.name }}</span>
             </template>

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;

src/router/index.ts

@@ -1,6 +1,6 @@
-import { createRouter, createWebHistory } from "vue-router";
-import AppLayout from "@/layout/AppLayout.vue";
-import homeRouter from "@/router/home";
+import { createRouter, createWebHistory, createMemoryHistory } from "vue-router"
+import AppLayout from "@/layout/AppLayout.vue"
+import homeRouter from "@/router/home"
 
 let loginRouter = {
   path: "/login",
@@ -11,7 +11,7 @@ let loginRouter = {
     icon: "icon-Home",
   },
   component: () => import("@/views/login/index.vue"),
-};
+}
 
 const routes = [
   {
@@ -19,9 +19,9 @@ const routes = [
     component: AppLayout,
     children: [...homeRouter, loginRouter],
   },
-];
+]
 
 export default createRouter({
   routes: routes,
-  history: createWebHistory(),
-});
+  history: createMemoryHistory(),
+})

src/utils/index.ts

@@ -1,23 +1,26 @@
 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
-  return "background-image:" + "url(" + url + ")";
-};
+  return "background-image:" + "url(" + url + ")"
+}
 // 设置动画类型
 export const setAnimationClass = (type: String) => {
-  return "animate__animated " + type;
-};
+  return "animate__animated " + type
+}
 // 设置动画延时
 export const setAnimationDelay = (index: number = 6, time: number = 50) => {
-  return "animation-delay:" + index * time + "ms";
-};
+  return "animation-delay:" + index * time + "ms"
+}
 
 //将秒转换为分钟和秒
 export const secondToMinute = (s: number) => {
-  let minute: number = Math.floor(s / 60);
-  let second: number = Math.floor(s % 60);
+  if (!s) {
+    return "00:00"
+  }
+  let minute: number = Math.floor(s / 60)
+  let second: number = Math.floor(s % 60)
   let minuteStr: string =
-    minute > 9 ? minute.toString() : "0" + minute.toString();
+    minute > 9 ? minute.toString() : "0" + minute.toString()
   let secondStr: string =
-    second > 9 ? second.toString() : "0" + second.toString();
-  return minuteStr + ":" + secondStr;
-};
+    second > 9 ? second.toString() : "0" + second.toString()
+  return minuteStr + ":" + secondStr
+}

src/views/list/index.vue

@@ -122,21 +122,23 @@ const formatDetail = computed(() => (detail: any) => {
       </div>
     </n-layout>
 
-    <div class="music-page" v-show="showMusic" :class="musicFullClass">
-      <i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
-      <div class="music-title">{{ recommendItem?.name }}</div>
-      <!-- 歌单歌曲列表 -->
-      <n-layout class="music-list" :native-scrollbar="false">
-        <div
-          v-for="(item, index) in listDetail?.playlist.tracks"
-          :key="item.id"
-          :class="setAnimationClass('animate__bounceInUp')"
-          :style="setAnimationDelay(index, 50)"
-        >
-          <SongItem :item="formatDetail(item)" />
-        </div>
-      </n-layout>
-    </div>
+    <transition name="musicPage">
+      <div class="music-page" v-if="showMusic">
+        <i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
+        <div class="music-title">{{ recommendItem?.name }}</div>
+        <!-- 歌单歌曲列表 -->
+        <n-layout class="music-list" :native-scrollbar="false">
+          <div
+            v-for="(item, index) in listDetail?.playlist.tracks"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 50)"
+          >
+            <SongItem :item="formatDetail(item)" />
+          </div>
+        </n-layout>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -145,6 +147,14 @@ const formatDetail = computed(() => (detail: any) => {
   position: relative;
 }
 
+.musicPage-enter-active {
+  animation: fadeInUp 0.8s ease-in-out;
+}
+
+.musicPage-leave-active {
+  animation: fadeOutDown 0.8s ease-in-out;
+}
+
 .recommend {
   width: 100%;
   height: 800px;

src/views/login/index.vue

@@ -117,7 +117,7 @@ const loginPhone = async () => {
   width: 350px;
   height: 550px;
   @apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
-  background-image: url(https://z3.ax1x.com/2021/09/30/4IMyUx.jpg);
+  background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
   background-color: #383838;
   box-shadow: inset 0px 0px 20px 5px #0000005e;
 

src/views/search/index.vue

@@ -26,11 +26,12 @@
             class="search-list"
             :class="setAnimationClass('animate__fadeInUp')"
             :native-scrollbar="false"
+            @scroll="searchScrolling"
         >
             <div class="title">{{ hotKeyword }}</div>
             <template v-if="searchDetail">
                 <div
-                    v-for="(item, index) in searchDetail?.result.song.songs"
+                    v-for="(item, index) in searchDetail?.result.songs"
                     :key="item.id"
                     :class="setAnimationClass('animate__bounceInRight')"
                     :style="setAnimationDelay(index, 100)"
@@ -55,7 +56,7 @@ import SongItem from "@/components/common/SongItem.vue";
 
 const route = useRoute();
 const router = useRouter();
-const searchDetail = ref<ISearchDetail>();
+const searchDetail = ref<any>();
 
 // 热搜列表
 const hotSearchData = ref<IHotSearch>();
@@ -64,6 +65,10 @@ const loadHotSearch = async () => {
     hotSearchData.value = data;
 };
 
+function searchScrolling(e: any) {
+    console.log(e);
+}
+
 
 onMounted(() => {
     loadHotSearch();
@@ -88,14 +93,15 @@ const loadSearch = async (keyword: any) => {
     searchDetail.value = undefined;
     if (!keyword) return;
     const { data } = await getSearch(keyword);
-    const songs = data.result.song.songs;
+
+    const songs = data.result.songs;
+
     // songs map 替换属性
     songs.map((item: any) => {
         item.picUrl = item.al.picUrl;
         item.song = item;
         item.artists = item.ar;
     });
-    data.result.song.songs = songs;
     searchDetail.value = data;
 };
 

src/views/user/index.vue

@@ -133,26 +133,34 @@ const musicFullClass = computed(() => {
         </div>
       </n-layout>
     </div>
-
-    <div class="music-page" v-show="isShowList" :class="musicFullClass">
-      <i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
-      <div class="music-title">{{ list?.name }}</div>
-      <!-- 歌单歌曲列表 -->
-      <n-layout class="music-list" :native-scrollbar="false">
-        <div
-          v-for="(item, index) in list?.tracks"
-          :key="item.id"
-          :class="setAnimationClass('animate__bounceInUp')"
-          :style="setAnimationDelay(index, 100)"
-        >
-          <SongItem :item="formatDetail(item)" />
-        </div>
-      </n-layout>
-    </div>
+    <transition name="musicPage">
+      <div class="music-page" v-if="isShowList">
+        <i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
+        <div class="music-title">{{ list?.name }}</div>
+        <!-- 歌单歌曲列表 -->
+        <n-layout class="music-list" :native-scrollbar="false">
+          <div
+            v-for="(item, index) in list?.tracks"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInUp')"
+            :style="setAnimationDelay(index, 100)"
+          >
+            <SongItem :item="formatDetail(item)" />
+          </div>
+        </n-layout>
+      </div>
+    </transition>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.musicPage-enter-active {
+  animation: fadeInUp 0.8s ease-in-out;
+}
+
+.musicPage-leave-active {
+  animation: fadeOutDown 0.8s ease-in-out;
+}
 .user-page {
   @apply flex;
   .left {