🦄 refactor: 适配 web移动端 改造

src/layout/AppLayout.vue

@@ -4,14 +4,18 @@
       <title-bar v-if="isElectron" />
       <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
         <!-- 侧边菜单栏 -->
-        <app-menu class="menu" :menus="menus" />
+        <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
           <div class="main-content bg-black" :native-scrollbar="false">
             <n-message-provider>
-              <router-view v-slot="{ Component }" class="main-page" :class="route.meta.noScroll ? 'pr-3' : ''">
+              <router-view
+                v-slot="{ Component }"
+                class="main-page"
+                :class="route.meta.noScroll && !isMobile ? 'pr-3' : ''"
+              >
                 <keep-alive :include="keepAliveInclude">
                   <component :is="Component" />
                 </keep-alive>
@@ -19,6 +23,7 @@
             </n-message-provider>
           </div>
           <play-bottom height="5rem" />
+          <app-menu v-if="isMobile" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
@@ -33,6 +38,7 @@ import { useStore } from 'vuex';
 
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import homeRouter from '@/router/home';
+import { isMobile } from '@/utils';
 
 const keepAliveInclude = computed(() =>
   homeRouter
@@ -135,18 +141,23 @@ const playMusicEvent = async () => {
   &-page {
     @apply flex flex-1 overflow-hidden;
   }
-  .menu {
-    width: 90px;
-  }
   .main {
-    @apply flex-1 box-border flex flex-col;
+    @apply flex-1 box-border flex flex-col overflow-hidden;
     height: 100%;
     &-content {
       @apply box-border flex-1 overflow-hidden;
     }
   }
-  :deep(.n-scrollbar-content) {
-    @apply pr-3;
+  // :deep(.n-scrollbar-content) {
+  //   @apply pr-3;
+  // }
+}
+
+.mobile {
+  .layout-main {
+    &-page {
+      @apply pt-4;
+    }
   }
 }
 </style>

src/layout/components/AppMenu.vue

@@ -82,4 +82,25 @@ const iconStyle = (index: number) => {
   transform: scale(1.05);
   transition: 0.2s ease-in-out;
 }
+
+.mobile {
+  .app-menu {
+    max-width: 100%;
+    width: 100vw;
+    position: relative;
+    z-index: 999999;
+    background-color: #000;
+    &-header {
+      display: none;
+    }
+    &-list {
+      @apply flex justify-between;
+    }
+    &-item {
+      &-link {
+        @apply my-4;
+      }
+    }
+  }
+}
 </style>

src/layout/components/MusicFull.vue

@@ -179,4 +179,16 @@ defineExpose({
     }
   }
 }
+
+.mobile {
+  #drawer-target {
+    @apply flex-col p-4 pt-8;
+    .music-img {
+      display: none;
+    }
+    .music-lrc {
+      height: calc(100vh - 260px) !important;
+    }
+  }
+}
 </style>

src/layout/components/PlayBar.vue

@@ -25,13 +25,13 @@
       </div>
     </div>
     <div class="music-buttons">
-      <div @click="handlePrev">
+      <div class="music-buttons-prev" @click="handlePrev">
         <i class="iconfont icon-prev"></i>
       </div>
       <div class="music-buttons-play" @click="playMusicEvent">
         <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
       </div>
-      <div @click="handleEnded">
+      <div class="music-buttons-next" @click="handleEnded">
         <i class="iconfont icon-next"></i>
       </div>
     </div>
@@ -59,7 +59,7 @@
         </template>
         解析播放
       </n-tooltip> -->
-      <n-tooltip trigger="hover" :z-index="9999999">
+      <n-tooltip class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont ri-netease-cloud-music-line" @click="openLyric"></i>
         </template>
@@ -305,4 +305,36 @@ const setMusicFull = () => {
     }
   }
 }
+
+.mobile {
+  .music-play-bar {
+    @apply px-4;
+    bottom: 70px;
+  }
+  .music-time {
+    display: none;
+  }
+  .ri-netease-cloud-music-line {
+    display: none;
+  }
+  .audio-volume {
+    display: none;
+  }
+  .audio-button {
+    @apply mx-0;
+  }
+  .music-buttons {
+    @apply m-0;
+    &-prev,
+    &-next {
+      display: none;
+    }
+    &-play {
+      @apply m-0;
+    }
+  }
+  .music-content {
+    flex: 1;
+  }
+}
 </style>

src/layout/components/SearchBar.vue

@@ -145,4 +145,10 @@ const selectItem = async (key: string) => {
 .search-box-input {
   @apply relative;
 }
+
+.mobile {
+  .search-box {
+    @apply pl-4;
+  }
+}
 </style>