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

src/renderer/views/artist/detail.vue

@@ -115,6 +115,7 @@
                     :compact="isCompactLayout"
                     :item="formatSong(item)"
                     @play="handlePlay"
+                    :style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
                   />
                 </div>
               </template>
@@ -697,7 +698,7 @@ const handleVirtualScroll = (e: any) => {
   }
 
   .albums-grid {
-    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6;
+    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 pb-40;
   }
 
   .loading-more {

src/renderer/views/favorite/index.vue

@@ -539,7 +539,7 @@ const handleBatchDownload = async () => {
 
   .mobile {
     .favorite-page {
-      @apply p-4;
+      @apply p-4 m-0;
 
       .favorite-header {
         @apply mb-4;

src/renderer/views/login/index.vue

@@ -146,7 +146,7 @@ const loginPhone = async () => {
 
 <style lang="scss" scoped>
 .login-page {
-  @apply flex flex-col items-center justify-center p-20 pt-20;
+  @apply flex flex-col items-center justify-center pt-20;
   @apply bg-light dark:bg-black;
 }
 
@@ -216,4 +216,10 @@ const loginPhone = async () => {
     }
   }
 }
+
+.mobile {
+  .login-page {
+    @apply pt-0;
+  }
+}
 </style>

src/renderer/views/music/MusicListPage.vue

@@ -160,7 +160,7 @@
               <n-virtual-list
                 ref="songListRef"
                 class="song-virtual-list"
-                style="height: calc(80vh - 60px)"
+                style="max-height: calc(100vh - 130px);"
                 :items="filteredSongs"
                 :item-size="isCompactLayout ? 50 : 70"
                 item-resizable
@@ -179,6 +179,7 @@
                       @play="handlePlay"
                       @remove-song="handleRemoveSong"
                       @select="(id, selected) => handleSelect(id, selected)"
+                      :style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
                     />
                   </div>
                 </template>

src/renderer/views/user/index.vue

@@ -90,6 +90,10 @@
         </n-scrollbar>
       </div>
     </div>
+    <!-- 未登录时显示登录组件 -->
+    <div v-if="!isLoggedIn && isMobile" class="login-container" :class="setAnimationClass('animate__fadeIn')">
+      <login-component @login-success="handleLoginSuccess" />
+    </div>
   </div>
 </template>
 
@@ -109,6 +113,7 @@ import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
 import { getImgUrl, isElectron, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import LoginComponent from '@/views/login/index.vue';
 
 defineOptions({
   name: 'User'
@@ -143,7 +148,7 @@ const checkLoginStatus = () => {
   const userData = localStorage.getItem('user');
 
   if (!token || !userData) {
-    router.push('/login');
+    !isMobile.value && router.push('/login');
     return false;
   }
 
@@ -270,6 +275,14 @@ const showFollowList = () => {
 //   if (!user.value) return;
 //   router.push('/user/followers');
 // };
+
+const handleLoginSuccess = () => {
+  // 处理登录成功后的逻辑
+  checkLoginStatus();
+  loadData();
+};
+
+const isLoggedIn = computed(() => userStore.user);
 </script>
 
 <style lang="scss" scoped>
@@ -398,5 +411,9 @@ const showFollowList = () => {
   .user-page {
     @apply px-4;
   }
+
+  .login-container {
+    @apply flex justify-center items-center h-full w-full;
+  }
 }
 </style>