优化动画效果,抽出组件

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 };