首页 歌手推荐 歌单分类 最热音乐没写完

src/layout/AppLayout.vue

@@ -2,31 +2,80 @@
     <div class="layout-page">
         <div class="layout-main">
             <app-menu class="menu" :menus="menus" />
-            <router-view class="main"></router-view>
+            <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>
+                <router-view></router-view>
+            </div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from '@vue/reactivity';
+import { useStore } from 'vuex';
 import { AppMenu } from './components';
-let menus = ref([
+import { getSearchKeyword } from '@/api/home';
+import { ref, onMounted } from 'vue';
+
+const store = useStore();
+const menus = store.state.menus;
+
+
+const value = 'Drive My Car'
+const options = [
     {
-        href: '/',
-        icon: "icon-homefill",
-        text: "hello"
+        label: 'Girl',
+        value: 'Girl'
     },
     {
-        href: '/main',
-        icon: "icon-peoplefill",
-        text: "hello"
+        label: 'In My Life',
+        value: 'In My Life'
     },
     {
-        href: '/',
-        icon: "icon-videofill",
-        text: "hello"
-    },
-])
+        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>
@@ -38,8 +87,10 @@ let menus = ref([
 
 .layout-main {
     @apply bg-black rounded-lg mb-10 text-white shadow-xl flex;
-    height: 800px;
-    width: 1400px;
+    height: 900px;
+    width: 1500px;
+    overflow: hidden;
+    min-width: 1500px;
     .menu {
         width: 90px;
     }
@@ -47,5 +98,10 @@ let menus = ref([
         @apply pt-6 pr-6 pb-6;
         flex: 1;
     }
+
+    .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/AppMenu.vue

@@ -4,12 +4,12 @@
     <div class="app-menu">
       <div class="app-menu-header">
         <div class="app-menu-logo">
-          <img src="@/assets/logo.png" class="w-10 h-10" alt="logo" />
+          <img src="@/assets/logo.png" class="w-9 h-9 mt-2" alt="logo" />
         </div>
       </div>
       <div class="app-menu-list">
         <div class="app-menu-item" v-for="(item,index) in menus" :key="index">
-          <router-link class="app-menu-item-link mb-4 mt-4" :to="item.href">
+          <router-link class="app-menu-item-link" :to="item.href">
             <i class="iconfont app-menu-item-icon" :style="iconStyle" :class="item.icon"></i>
             <span v-if="isText" class="app-menu-item-text ml-3">{{ item.text }}</span>
           </router-link>
@@ -29,15 +29,15 @@ const props = defineProps({
   },
   size: {
     type: String,
-    default: '30px'
+    default: '26px'
   },
   color: {
     type: String,
-    default: '#fff'
+    default: '#aaa'
   },
   menus: {
     type: Array,
-    default: () => []
+    default: []
   }
 })
 
@@ -61,7 +61,13 @@ onMounted(() => {
   @apply flex items-center justify-center;
 }
 
-img {
-  color: #fff;
+.app-menu-item-link {
+  @apply mb-6 mt-6;
+}
+
+.app-menu-item-icon:hover {
+  color: #fff !important;
+  transform: scale(1.05);
+  transition: 0.2s ease-in-out;
 }
 </style>