修改动画 完善搜索

src/components/RecommendSinger.vue

@@ -17,7 +17,7 @@
                     class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
                 >{{ item.musicSize }}首</div>
                 <div class="recommend-singer-item-info z-10">
-                    <div class="recommend-singer-item-info-play">
+                    <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
                         <i class="iconfont icon-playfill text-xl"></i>
                     </div>
                     <div class="ml-4">
@@ -35,6 +35,7 @@ import { setBackgroundImg, setAnimationDelay, setAnimationClass } from "@/utils"
 import { onMounted, ref } from "vue";
 import { getHotSinger } from "@/api/home";
 import type { IHotSinger } from "@/type/singer";
+import router from "@/router";
 
 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
@@ -48,6 +49,17 @@ const loadSingerList = async () => {
 onMounted(() => {
     loadSingerList();
 });
+
+
+const toSearchSinger = (keyword: string) => {
+    router.push({
+        path: "/search",
+        query: {
+            keyword: keyword,
+        },
+    });
+};
+
 </script>
 
 <style lang="scss" scoped>

src/components/RecommendSonglist.vue

@@ -8,7 +8,12 @@
         >
             <!-- 推荐音乐列表 -->
             <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
-                <song-item :item="item" :index="index" />
+                <div
+                    :class="setAnimationClass('animate__bounceInUp')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <song-item :item="item" />
+                </div>
             </template>
         </div>
     </div>
@@ -18,7 +23,7 @@
 import { onMounted, ref } from "vue";
 import { getRecommendMusic } from "@/api/home";
 import type { IRecommendMusic } from "@/type/music";
-import { setAnimationClass } from "@/utils";
+import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "./common/SongItem.vue";
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();

src/components/common/SongItem.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="recommend-music-list-item"
-        :class="setAnimationClass('animate__bounceInUp')"
-        :style="setAnimationDelay(index, 200)"
-    >
+    <div class="recommend-music-list-item">
         <img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
         <div class="recommend-music-list-item-content">
             <div class="recommend-music-list-item-content-title">
@@ -12,9 +8,9 @@
             <div class="recommend-music-list-item-content-name">
                 <n-ellipsis class="text-ellipsis" line-clamp="1">
                     <span
-                        v-for="(artists,index) in item.song.artists"
-                        :key="index"
-                    >{{ artists.name }}{{ index < item.song.artists.length - 1 ? ' / ' : '' }}</span>
+                        v-for="(artists,artistsindex) in item.song.artists"
+                        :key="artistsindex"
+                    >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
                 </n-ellipsis>
             </div>
         </div>
@@ -34,20 +30,14 @@
 </template>
 
 <script lang="ts" setup>
-import { setAnimationDelay, setAnimationClass } from "@/utils";
 import { useStore } from "vuex";
 import type { SongResult } from "@/type/music";
 import { computed, } from "vue";
-import type { PropType } from "vue";
 
 
 const props = defineProps({
     item: {
-        type: Object as PropType<SongResult>,
-        required: true
-    },
-    index: {
-        type: Number,
+        type: Object,
         required: true
     }
 })

src/layout/AppLayout.vue

@@ -8,7 +8,11 @@
                     <!-- 搜索栏 -->
                     <search-bar />
                     <!-- 主页面路由 -->
-                    <router-view class="main-content"></router-view>
+                    <n-layout class="main-content bg-black" :native-scrollbar="false">
+                        <keep-alive>
+                            <router-view class="main-page"></router-view>
+                        </keep-alive>
+                    </n-layout>
                 </div>
             </div>
             <!-- 底部音乐播放 -->
@@ -48,9 +52,13 @@ const menus = store.state.menus;
     }
     .main {
         @apply pt-6 pr-6 flex-1 box-border;
-        .main-content {
+        &-content {
             @apply rounded-2xl;
-            height: 810px;
+            height: 834px;
+        }
+        &-page {
+            padding: 20px 0;
+            padding-bottom: 80px;
         }
     }
 }

src/layout/components/PlayBar.vue

@@ -23,7 +23,7 @@
     </div>
 
     <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
-        <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" />
+        <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
         <div class="music-content">
             <div class="music-content-title">
                 <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>

src/views/home/index.vue

@@ -1,18 +1,16 @@
 <template>
-  <n-layout class="h-full bg-black" :native-scrollbar="false">
-    <div class="main-page pb-20">
-      <!-- 推荐歌手 -->
-      <recommend-singer />
-      <div class="main-content">
-        <!-- 歌单分类列表 -->
-        <playlist-type />
-        <!-- 本周最热音乐 -->
-        <recommend-songlist />
-        <!-- 推荐最新专辑 -->
-        <recommend-album />
-      </div>
+  <div class="main-page pb-20">
+    <!-- 推荐歌手 -->
+    <recommend-singer />
+    <div class="main-content">
+      <!-- 歌单分类列表 -->
+      <playlist-type />
+      <!-- 本周最热音乐 -->
+      <recommend-songlist />
+      <!-- 推荐最新专辑 -->
+      <recommend-album />
     </div>
-  </n-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -21,7 +19,7 @@ import PlaylistType from "@/components/PlaylistType.vue";
 import RecommendSonglist from "@/components/RecommendSonglist.vue";
 import RecommendAlbum from "@/components/RecommendAlbum.vue";
 
-</script>
+                                                                </script>
 
 <style lang="scss" scoped>
 .main-content {