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

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>