✨ feat: 修复样式问题

components.d.ts

@@ -23,7 +23,6 @@ declare module 'vue' {
     NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
     PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
     PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']

src/components/MusicList.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="show" height="70vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
+  <n-drawer :show="show" height="70vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
     <div class="music-page">
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
       <div class="music-title">{{ name }}</div>

src/layout/AppLayout.vue

@@ -1,23 +1,31 @@
 <template>
     <div class="layout-page">
         <div class="layout-main">
-            <title-bar />
+            <title-bar v-if="isElectron" />
-            <div class="flex">
+            <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 }">
+                            <router-view class="main-page" v-slot="{ Component }" :class="route.meta.noScroll? 'pr-3' : ''">
-                                <keep-alive>
+                              <template v-if="route.meta.noScroll">
-                                    <component :is="Component" />
+                                <keep-alive v-if="!route.meta.noKeepAlive">
+                                  <component :is="Component" />
                                 </keep-alive>
-                                <!-- <component :is="Component" v-if="!$route.meta.keepAlive" />
+                                <component v-else :is="Component"/>
-
+                              </template>
-                                <component :is="Component" /> -->
+                              <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;
+        @apply flex-1 box-border flex flex-col;
-        height: 100vh;
+        height: 100%;
         &-content {
-            @apply rounded-2xl pb-28 box-border;
+            @apply box-border flex-1 overflow-hidden;
-            height: 100vh;
-        }
-        &-page {
-            margin: 20px 0;
         }
     }
+    :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 10px 2px rgba(203, 203, 203, 0.034);
-  box-shadow: 0px 0px 8px 0px rgba(203, 203, 203, 0.238);
   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()
 }

src/router/home.ts

@@ -2,8 +2,7 @@ const layoutRouter = [
   {
     path: '/',
     name: 'home',
-    mate: {
+    meta: {
-      keepAlive: true,
       title: '首页',
       icon: 'icon-Home',
     },
@@ -12,9 +11,10 @@ const layoutRouter = [
   {
     path: '/search',
     name: 'search',
-    mate: {
+    meta: {
       title: '搜索',
-      keepAlive: true,
+      noScroll: true,
+      noKeepAlive: true,
       icon: 'icon-Search',
     },
     component: () => import('@/views/search/index.vue'),
@@ -22,9 +22,8 @@ const layoutRouter = [
   {
     path: '/list',
     name: 'list',
-    mate: {
+    meta: {
       title: '歌单',
-      keepAlive: true,
       icon: 'icon-Paper',
     },
     component: () => import('@/views/list/index.vue'),
@@ -32,9 +31,8 @@ const layoutRouter = [
   {
     path: '/mv',
     name: 'mv',
-    mate: {
+    meta: {
       title: 'MV',
-      keepAlive: true,
       icon: 'icon-recordfill',
     },
     component: () => import('@/views/mv/index.vue'),
@@ -42,9 +40,8 @@ const layoutRouter = [
   {
     path: '/history',
     name: 'history',
-    mate: {
+    meta: {
       title: '历史',
-      keepAlive: true,
       icon: 'icon-a-TicketStar',
     },
     component: () => import('@/views/history/index.vue'),
@@ -52,23 +49,12 @@ const layoutRouter = [
   {
     path: '/user',
     name: 'user',
-    mate: {
+    meta: {
       title: '用户',
-      keepAlive: true,
+      noKeepAlive: true,
       icon: 'icon-Profile',
     },
     component: () => import('@/views/user/index.vue'),
   },
-  // {
-  //   path: "/test",
-  //   name: "test",
-  //   mate: {
-  //     title: "用户",
-  //     keepAlive: true,
-  //     icon: "icon-Profile",
-  //   },
-  //   component: () => import("@/views/test/test.vue"),
-  // },
 ]
-
 export default layoutRouter;

src/views/home/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="main-page">
-    <n-scrollbar>
       <!-- 推荐歌手 -->
       <recommend-singer />
       <div class="main-content">
@@ -11,7 +10,6 @@
         <!-- 推荐最新专辑 -->
         <recommend-album />
       </div>
-    </n-scrollbar>
   </div>
 </template>
 
@@ -24,7 +22,7 @@ const RecommendAlbum = defineAsyncComponent(() => import("@/components/Recommend
 
 <style lang="scss" scoped>
 .main-page{
-  @apply pt-4 h-full w-full;
+  @apply h-full w-full;
 }
 .main-content {
   @apply mt-6 flex pb-28;

src/views/list/index.vue

@@ -97,7 +97,7 @@ watch(
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full w-full pt-2;
+  @apply relative h-full w-full;
 }
 
 .recommend {
@@ -107,7 +107,7 @@ watch(
   }
 
   &-list {
-    @apply grid gap-6 pb-28 pr-3;
+    @apply grid gap-6 pb-28;
     grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
   }
   &-item {

src/views/login/index.vue

@@ -104,7 +104,7 @@ const loginPhone = async () => {
 
 <style lang="scss" scoped>
 .login-page {
-  @apply flex flex-col items-center justify-center p-20;
+  @apply flex flex-col items-center justify-center p-20 pt-20;
 }
 
 .login-title {

src/views/mv/index.vue

@@ -72,14 +72,14 @@ const close = () => {
 
 <style scoped lang="scss">
 .mv-list {
-  @apply relative h-full w-full pt-2;
+  @apply relative h-full w-full;
 
   &-title {
     @apply text-xl font-bold;
   }
 
   &-content {
-    @apply grid gap-6 pb-28 pr-3 mt-2;
+    @apply grid gap-6 pb-4 mt-2;
     grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
   }
 

src/views/search/index.vue

@@ -148,7 +148,7 @@ const handlePlay = (item: any) => {
     @apply flex h-full;
 }
 .hot-search {
-    @apply mt-3 mr-4 rounded-xl  flex-1 overflow-hidden;
+    @apply mr-4 rounded-xl  flex-1 overflow-hidden;
     background-color: #0d0d0d;
     animation-duration: 0.2s;
     min-width: 400px;
@@ -168,7 +168,7 @@ const handlePlay = (item: any) => {
 }
 
 .search-list {
-    @apply mt-3 flex-1 rounded-xl;
+    @apply flex-1 rounded-xl;
     background-color: #0d0d0d;
     height: 100%;
     &-box{

src/views/test/test.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="p-4">
-    <div class="box"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-
-
-<style lang="scss" scoped>
-.box{
-  width: 100px;
-  height: 100px;
-  background-image: url(http://p2.music.126.net/w_vuv9hBWq2hlJxJcmJrjg==/109951166115915081.jpg?param=500y500);
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-</style>

src/views/user/index.vue

@@ -149,13 +149,6 @@ const handlePlay = (item: any) => {
 </template>
 
 <style lang="scss" scoped>
-.musicPage-enter-active {
-  animation: fadeInUp 0.8s ease-in-out;
-}
-
-.musicPage-leave-active {
-  animation: fadeOutDown 0.8s ease-in-out;
-}
 .user-page {
   @apply flex h-full;
   .left {