feat: 优化移动端界面设计以及歌词界面设计 添加播放模式选择

src/renderer/layout/AppLayout.vue

@@ -9,7 +9,7 @@
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
-          <div class="main-content" :native-scrollbar="false">
+          <div class="main-content" :native-scrollbar="false" :class="{'mobile-content': !shouldShowMobileMenu}">
             <router-view
               v-slot="{ Component }"
               class="main-page"
@@ -21,7 +21,7 @@
             </router-view>
           </div>
           <play-bottom />
-          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="shouldShowMobileMenu" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
@@ -103,6 +103,16 @@ const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id)
 const { menus } = menuStore;
 const route = useRoute();
 
+// 判断当前路由是否应该在移动端显示AppMenu
+const shouldShowMobileMenu = computed(() => {
+  // 过滤出在menus中定义的路径
+  const menuPaths = menus.map((item: any) => item.path);
+  // 检查当前路由路径是否在menus中
+  return menuPaths.includes(route.path) && isMobile.value && !playerStore.musicFull;
+});
+
+provide('shouldShowMobileMenu', shouldShowMobileMenu);
+
 onMounted(() => {
   settingsStore.initializeSettings();
   settingsStore.initializeTheme();
@@ -156,7 +166,10 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
     overflow: auto;
     display: block;
     flex: none;
-    padding-bottom: 70px;
+  }
+
+  .mobile-content {
+    height: calc(100vh - 75px);
   }
 }
 </style>

src/renderer/layout/components/AppMenu.vue

@@ -27,6 +27,7 @@
 
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
+import { ref, watch } from 'vue';
 
 import icon from '@/assets/icon.png';
 
@@ -115,7 +116,7 @@ const isText = ref(false);
     bottom: 0;
     left: 0;
     z-index: 99999;
-    @apply bg-light dark:bg-black border-t border-gray-200 dark:border-gray-700;
+    @apply bg-light dark:bg-black border-none border-gray-200 dark:border-gray-700;
 
     &-header {
       display: none;
@@ -127,9 +128,16 @@ const isText = ref(false);
 
     &-item {
       &-link {
-        @apply my-2 w-auto;
+        @apply my-2 w-auto px-2;
+        width: auto !important;
+        margin-top: 8px;
+        margin-bottom: 8px;
       }
     }
+
+    &-expanded {
+      @apply w-full;
+    }
   }
 }
 </style>

src/renderer/layout/components/MusicFullWrapper.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="componentToUse" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isMobile } from '@/utils';
+import MusicFull from '@/layout/components/MusicFull.vue';
+import MusicFullMobile from '@/components/lyric/MusicFullMobile.vue';
+
+// 根据当前设备类型选择需要显示的组件
+const componentToUse = computed(() => {
+  return isMobile.value ? MusicFullMobile : MusicFull;
+});
+</script>