✨ feat: 修复样式问题

src/layout/AppLayout.vue

@@ -1,23 +1,31 @@
 <template>
     <div class="layout-page">
         <div class="layout-main">
-            <title-bar />
-            <div class="flex">
+            <title-bar v-if="isElectron" />
+            <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
                 <!-- 侧边菜单栏 -->
                 <app-menu class="menu" :menus="menus" />
                 <div class="main">
                     <!-- 搜索栏 -->
                     <search-bar />
                     <!-- 主页面路由 -->
-                    <div class="main-content bg-black" :native-scrollbar="false">
+                    <div class="main-content bg-black pb-" :native-scrollbar="false" :class="isPlay ? 'pb-20' : ''">
                         <n-message-provider>
-                            <router-view class="main-page" v-slot="{ Component }">
-                                <keep-alive>
-                                    <component :is="Component" />
+                            <router-view class="main-page" v-slot="{ Component }" :class="route.meta.noScroll? 'pr-3' : ''">
+                              <template v-if="route.meta.noScroll">
+                                <keep-alive v-if="!route.meta.noKeepAlive">
+                                  <component :is="Component" />
                                 </keep-alive>
-                                <!-- <component :is="Component" v-if="!$route.meta.keepAlive" />
-
-                                <component :is="Component" /> -->
+                                <component v-else :is="Component"/>
+                              </template>
+                              <template v-else>
+                                <n-scrollbar>
+                                  <keep-alive v-if="!route.meta.noKeepAlive">
+                                      <component :is="Component" />
+                                  </keep-alive>
+                                  <component v-else :is="Component"/>
+                                </n-scrollbar>
+                              </template>
                             </router-view>
                         </n-message-provider>
                     </div>
@@ -30,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { SongResult } from '@/type/music';
+import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
@@ -44,10 +52,17 @@ const isPlay = computed(() => store.state.isPlay as boolean)
 const menus = store.state.menus;
 const play = computed(() => store.state.play as boolean)
 
+const route = useRoute()
+
 const audio = {
   value: document.querySelector('#MusicAudio') as HTMLAudioElement
 }
 
+const windowData = window as any
+const isElectron = computed(() => {
+  return !!windowData.electronAPI
+})
+
 onMounted(() => {
   // 监听音乐是否播放
   watch(
@@ -105,23 +120,25 @@ const playMusicEvent = async () => {
 }
 
 .layout-main {
-    @apply bg-black rounded-lg  text-white shadow-xl flex-col relative;
+    @apply bg-black  text-white shadow-xl flex flex-col relative;
     height: 100%;
     width: 100%;
     overflow: hidden;
+    &-page{
+      @apply flex flex-1 overflow-hidden;
+    }
     .menu {
         width: 90px;
     }
     .main {
-        @apply pr-6 flex-1 box-border;
-        height: 100vh;
+        @apply flex-1 box-border flex flex-col;
+        height: 100%;
         &-content {
-            @apply rounded-2xl pb-28 box-border;
-            height: 100vh;
-        }
-        &-page {
-            margin: 20px 0;
+            @apply box-border flex-1 overflow-hidden;
         }
     }
+    :deep(.n-scrollbar-content){
+      @apply pr-3;
+    }
 }
 </style>

src/layout/components/AppMenu.vue

@@ -13,9 +13,9 @@
             <i
               class="iconfont app-menu-item-icon"
               :style="iconStyle(index)"
-              :class="item.mate.icon"
+              :class="item.meta.icon"
             ></i>
-            <span v-if="isText" class="app-menu-item-text ml-3">{{ item.mate.title }}</span>
+            <span v-if="isText" class="app-menu-item-text ml-3">{{ item.meta.title }}</span>
           </router-link>
         </div>
       </div>

src/layout/components/PlayBar.vue

@@ -242,8 +242,7 @@ const setMusicFull = () => {
 .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;
   z-index: 9999;
-  backdrop-filter: blur(20px);
-  box-shadow: 0px 0px 8px 0px rgba(203, 203, 203, 0.238);
+  box-shadow: 0px 0px 10px 2px rgba(203, 203, 203, 0.034);
   background-color: rgba(0, 0, 0, 0.747);  .music-content {
     width: 140px;
     @apply ml-4;

src/layout/components/SearchBar.vue

@@ -225,7 +225,9 @@ const selectItem = async (key: any) => {
     @apply ml-4 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
     background: #1a1a1a;
 }
-
+.search-box{
+    @apply pb-4 pr-4;
+}
 .search-box-input {
     @apply relative;
 }

src/layout/components/TitleBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="title-bar" @mousedown="drag" v-if="isElectron">
+  <div id="title-bar" @mousedown="drag">
     <div id="title">Alger Music</div>
     <div id="buttons">
       <button @click="minimize">
@@ -21,10 +21,6 @@ import { useDialog } from 'naive-ui'
 const dialog = useDialog()
 const windowData = window as any
 
-const isElectron = computed(() => {
-  return !!windowData.electronAPI.minimize
-})
-
 const minimize = () => {
   windowData.electronAPI.minimize()
 }