From 1dc7d0ceca5a8943633759499d4a94fa2f127a77 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 3 Jan 2025 22:03:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E9=A1=B5=E9=9D=A2=E4=B8=8E=E5=BA=95=E6=A0=8F?=
 =?UTF-8?q?=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98=EF=BC=88#26=EF=BC=89=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2=E6=AD=8C=E6=9B=B2=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20=EF=BC=88#33=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closed #26   #33
---
 src/renderer/components/MusicList.vue        | 9 +++++++++
 src/renderer/layout/AppLayout.vue            | 4 ++--
 src/renderer/layout/components/MusicFull.vue | 9 ++++++---
 src/renderer/layout/components/PlayBar.vue   | 6 +++---
 src/renderer/store/index.ts                  | 7 ++++++-
 src/renderer/views/list/index.vue            | 7 ++++---
 src/renderer/views/mv/index.vue              | 9 +++++++++
 7 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/MusicList.vue b/src/renderer/components/MusicList.vue
index bbc951e..631bc50 100644
--- a/src/renderer/components/MusicList.vue
+++ b/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>
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index a3fe837..1cce800 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/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 />
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index 1c1cdd3..0ef1926 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -35,8 +35,8 @@
           class="music-lrc"
           style="height: 60vh"
           :native-scrollbar="false"
-          @mouseover="mouseOverLayout"
-          @mouseleave="mouseLeaveLayout"
+          @mouseover="!isMobile ? mouseOverLayout : null"
+          @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)];
+    }
   }
 }
 
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index b16f57d..1f46273 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/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;
-    bottom: 70px;
+    @apply px-4 bottom-[70px] transition-all duration-300;
   }
   .music-time {
     display: none;
diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts
index 526097f..f90bf9f 100644
--- a/src/renderer/store/index.ts
+++ b/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;
diff --git a/src/renderer/views/list/index.vue b/src/renderer/views/list/index.vue
index 8a5deb0..19a6571 100644
--- a/src/renderer/views/list/index.vue
+++ b/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>
diff --git a/src/renderer/views/mv/index.vue b/src/renderer/views/mv/index.vue
index 0add1e7..3659c64 100644
--- a/src/renderer/views/mv/index.vue
+++ b/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>