🐞 fix: 修复歌词页面与底栏冲突问题（#26） 修复搜索歌曲列表页面显示错误问题 （#33）

closed #26   #33

src/renderer/components/MusicList.vue

@@ -313,4 +313,13 @@ watch(
 .double-item {
   @apply mb-2 bg-light-100 bg-opacity-20 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
 }
+
+.mobile {
+  .music-info {
+    @apply hidden;
+  }
+  .music-list-content {
+    @apply pb-[100px];
+  }
+}
 </style>

src/renderer/layout/AppLayout.vue

@@ -21,11 +21,11 @@
             </router-view>
           </div>
           <play-bottom height="5rem" />
-          <app-menu v-if="isMobile" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !store.state.musicFull" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar v-if="isPlay" />
+      <play-bar v-if="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal />

src/renderer/layout/components/MusicFull.vue

@@ -35,8 +35,8 @@
           class="music-lrc"
           style="height: 60vh"
           :native-scrollbar="false"
-          @mouseover="mouseOverLayout"
+          @mouseover="!isMobile ? mouseOverLayout : null"
-          @mouseleave="mouseLeaveLayout"
+          @mouseleave="!isMobile ? mouseLeaveLayout : null"
         >
           <div ref="lrcContainer">
             <div
@@ -79,7 +79,7 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
-import { getImgUrl } from '@/utils';
+import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
 
 // 定义 refs
@@ -321,6 +321,9 @@ defineExpose({
     .music-lrc-text {
       @apply text-xl text-center;
     }
+    .music-content {
+      @apply h-[calc(100vh-120px)];
+    }
   }
 }
 

src/renderer/layout/components/PlayBar.vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 展开全屏 -->
-  <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :background="background" />
   <!-- 底部播放栏 -->
 
   <div
@@ -141,6 +140,7 @@
       </n-popover>
     </div>
     <!-- 播放音乐 -->
+  <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :background="background" />
   </div>
 </template>
 
@@ -294,6 +294,7 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
+  store.commit('setMusicFull', musicFullVisible.value);
 };
 
 const palyListRef = useTemplateRef('palyListRef');
@@ -432,8 +433,7 @@ const openLyricWindow = () => {
 
 .mobile {
   .music-play-bar {
-    @apply px-4;
+    @apply px-4 bottom-[70px] transition-all duration-300;
-    bottom: 70px;
   }
   .music-time {
     display: none;

src/renderer/store/index.ts

@@ -37,6 +37,7 @@ interface State {
   favoriteList: number[];
   playMode: number;
   theme: ThemeType;
+  musicFull: boolean;
 }
 
 const state: State = {
@@ -55,7 +56,8 @@ const state: State = {
   searchType: 1,
   favoriteList: getLocalStorageItem('favoriteList', []),
   playMode: getLocalStorageItem('playMode', 0),
-  theme: getCurrentTheme()
+  theme: getCurrentTheme(),
+  musicFull: false
 };
 
 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -73,6 +75,9 @@ const mutations = {
   setPlayMusic(state: State, play: boolean) {
     state.play = play;
   },
+  setMusicFull(state: State, musicFull: boolean) {
+    state.musicFull = musicFull;
+  },
   setPlayList(state: State, playList: SongResult[]) {
     state.playListIndex = playList.findIndex((item) => item.id === state.playMusic.id);
     state.playList = playList;

src/renderer/views/list/index.vue

@@ -18,7 +18,7 @@
       </n-scrollbar>
     </div>
     <!-- 歌单列表 -->
-    <n-scrollbar class="recommend" :size="100" @scroll="handleScroll">
+    <n-scrollbar class="recommend" style="height: calc(100% - 55px)" :size="100" @scroll="handleScroll">
       <div v-loading="loading" class="recommend-list">
         <div
           v-for="(item, index) in recommendList"
@@ -218,8 +218,6 @@ watch(
 }
 
 .recommend {
-  @apply w-full h-full;
-
   &-title {
     @apply text-lg font-bold pb-2;
     @apply text-gray-900 dark:text-white;
@@ -325,5 +323,8 @@ watch(
   .play-list-type {
     @apply mx-0 w-full;
   }
+  .categories-wrapper {
+    @apply pl-4;
+  }
 }
 </style>

src/renderer/views/mv/index.vue

@@ -292,4 +292,13 @@ const isPrevDisabled = computed(() => currentIndex.value === 0);
   @apply text-center py-4 col-span-full;
   @apply text-gray-500 dark:text-gray-400;
 }
+
+.mobile {
+  .mv-list-content {
+    @apply pl-4 pr-4;
+  }
+  .categories-wrapper {
+    @apply pl-4;
+  }
+}
 </style>