优化动画效果,抽出组件

src/layout/AppLayout.vue

@@ -2,105 +2,26 @@
     <div class="layout-page">
         <div class="layout-main">
             <div class="flex">
+                <!-- 侧边菜单栏 -->
                 <app-menu class="menu" :menus="menus" />
                 <div class="main">
-                    <div class="search-box flex">
-                        <div class="search-box-input flex-1">
-                            <n-input
-                                size="large"
-                                round
-                                :placeholder="searchKeyword"
-                                class="border border-gray-600"
-                            >
-                                <template #prefix>
-                                    <i class="iconfont icon-search"></i>
-                                </template>
-                            </n-input>
-                        </div>
-                        <div class="user-box">
-                            <n-popselect
-                                v-model:value="value"
-                                :options="options"
-                                trigger="click"
-                                size="small"
-                            >
-                                <i class="iconfont icon-xiasanjiaoxing"></i>
-                            </n-popselect>
-                            <n-avatar
-                                class="ml-2"
-                                circle
-                                size="large"
-                                src="https://picsum.photos/200/300?random=1"
-                            />
-                        </div>
-                    </div>
+                    <!-- 搜索栏 -->
+                    <search-bar />
+                    <!-- 主页面路由 -->
                     <router-view class="main-content"></router-view>
                 </div>
             </div>
-            <div class="music-play-bar" v-show="isPlay">
-                <img :src="playMusic.picUrl" width="50" height="50" />
-                <div class="music-name"></div>
-                <div class="music-singer"></div>
-                <div class="music-time"></div>
-                <!-- 播放音乐 -->
-                <audio :src="playMusicUrl" autoplay></audio>
-                <n-button @click="playMusicEvent">playMusicEvent</n-button>
-            </div>
+            <!-- 底部音乐播放 -->
+            <play-bar />
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { useStore } from 'vuex';
-import { AppMenu } from './components';
-import { getSearchKeyword } from '@/api/home';
-import { ref, onMounted, computed } from 'vue';
-import type { SongResult } from "@/type/music";
-import { getMusicUrl } from '@/api/music';
-
+import { AppMenu, PlayBar, SearchBar } from './components';
 const store = useStore();
 const menus = store.state.menus;
-const playMusic = computed(() => store.state.playMusic as SongResult)
-const isPlay = computed(() => store.state.isPlay)
-
-const playMusicUrl = ref("");
-
-const playMusicEvent = async () => {
-    console.log(playMusic);
-
-    const { data } = await getMusicUrl(playMusic.value.id);
-    console.log(data);
-
-    playMusicUrl.value = data.data[0].url;
-}
-
-const value = 'Drive My Car'
-const options = [
-    {
-        label: 'Girl',
-        value: 'Girl'
-    },
-    {
-        label: 'In My Life',
-        value: 'In My Life'
-    },
-    {
-        label: 'Wait',
-        value: 'Wait'
-    }
-]
-
-const searchKeyword = ref<String>("搜索点什么吧...")
-
-const loadSearchKeyword = async () => {
-    const { data } = await getSearchKeyword();
-    searchKeyword.value = data.data.showKeyword
-}
-
-onMounted(() => {
-    loadSearchKeyword()
-})
-
 </script>
 
 <style lang="scss" scoped>
@@ -126,15 +47,5 @@ onMounted(() => {
             height: 810px;
         }
     }
-
-    .user-box {
-        @apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
-        background: #1a1a1a;
-    }
-
-    .music-play-bar {
-        @apply h-20 w-full absolute bottom-0 left-0 flex rounded-t-2xl overflow-hidden border border-gray-600 box-border px-4 py-2;
-        background-color: #1a1a1a;
-    }
 }
 </style>

src/layout/components/PlayBar.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="music-play-bar" v-if="isPlay && playMusic">
+        <img class="play-bar-img" :src="playMusic.picUrl" />
+        <div class="music-content">
+            <div class="music-content-title">{{ playMusic.name }}</div>
+            <div class="music-content-name">{{ playMusic.song.artists[0].name }}</div>
+        </div>
+        <div class="music-time"></div>
+        <!-- 播放音乐 -->
+        <audio :src="playMusicUrl" autoplay></audio>
+        <n-button @click="playMusicEvent">playMusicEvent</n-button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useStore } from 'vuex';
+import type { SongResult } from "@/type/music";
+import { getMusicUrl } from '@/api/music';
+
+const store = useStore();
+const playMusic = computed(() => store.state.playMusic as SongResult)
+console.log(playMusic.value);
+
+const isPlay = computed(() => store.state.isPlay)
+
+const playMusicUrl = ref("");
+
+const playMusicEvent = async () => {
+    console.log(playMusic);
+
+    const { data } = await getMusicUrl(playMusic.value.id);
+    console.log(data);
+
+    playMusicUrl.value = data.data[0].url;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.music-play-bar {
+    @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
+    background-color: #212121;
+}
+
+.play-bar-img {
+    @apply w-14 h-14 rounded-2xl;
+}
+
+.music-content {
+    width: 200px;
+    @apply ml-4;
+    &-title {
+        @apply text-base text-white;
+    }
+    &-name {
+        @apply text-xs mt-1;
+        @apply text-gray-400;
+    }
+}
+</style>

src/layout/components/SearchBar.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="search-box flex">
+        <div class="search-box-input flex-1">
+            <n-input size="large" round :placeholder="searchKeyword" class="border border-gray-600">
+                <template #prefix>
+                    <i class="iconfont icon-search"></i>
+                </template>
+            </n-input>
+        </div>
+        <div class="user-box">
+            <n-popselect v-model:value="value" :options="options" trigger="click" size="small">
+                <i class="iconfont icon-xiasanjiaoxing"></i>
+            </n-popselect>
+            <n-avatar
+                class="ml-2"
+                circle
+                size="large"
+                src="https://picsum.photos/200/300?random=1"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { getSearchKeyword } from '@/api/home';
+import { onMounted, ref } from 'vue';
+
+
+const searchKeyword = ref<String>("搜索点什么吧...")
+
+const loadSearchKeyword = async () => {
+    const { data } = await getSearchKeyword();
+    searchKeyword.value = data.data.showKeyword
+}
+
+onMounted(() => {
+    loadSearchKeyword()
+})
+
+
+
+const value = 'Drive My Car'
+const options = [
+    {
+        label: 'Girl',
+        value: 'Girl'
+    },
+    {
+        label: 'In My Life',
+        value: 'In My Life'
+    },
+    {
+        label: 'Wait',
+        value: 'Wait'
+    }
+]
+
+</script>
+
+<style lang="scss" scoped>
+.user-box {
+    @apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
+    background: #1a1a1a;
+}
+</style>

src/layout/components/index.ts

@@ -1,3 +1,5 @@
 import AppMenu from "./AppMenu.vue";
+import PlayBar from "./PlayBar.vue";
+import SearchBar from "./SearchBar.vue";
 
-export { AppMenu };
+export { AppMenu, PlayBar, SearchBar };