✨ feat: 优化移动端和网页端效果和体验

feat: #82

src/renderer/components/MusicList.vue

@@ -439,6 +439,7 @@ onUnmounted(() => {
 
   .music-content {
     @apply flex-col;
+    width: 100vw !important;
   }
 
   .music-info {

src/renderer/components/home/TopBanner.vue

@@ -11,7 +11,7 @@
       >
         <n-carousel-item
           :class="setAnimationClass('animate__backInRight')"
-          :style="getCarouselItemStyle(0, 100, 6 )"
+          :style="getCarouselItemStyle(0, 100, 6)"
         >
           <div v-if="dayRecommendData" class="recommend-singer-item relative">
             <div
@@ -49,7 +49,7 @@
         >
           <div class="user-play">
             <div class="user-play-title mb-3">
-                {{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
+              {{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
             </div>
             <div class="user-play-list" :class="getPlaylistGridClass(userPlaylist.length)">
               <div
@@ -69,7 +69,9 @@
                     <div class="user-play-item-title-name">{{ item.name }}</div>
                   </div>
                   <div class="user-play-item-count">
-                    <div class="user-play-item-count-tag">{{ t('common.songCount', { count: item.trackCount }) }}</div>
+                    <div class="user-play-item-count-tag">
+                      {{ t('common.songCount', { count: item.trackCount }) }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -96,7 +98,9 @@
               {{ t('common.songCount', { count: item.musicSize }) }}
             </div>
             <div class="recommend-singer-item-info z-10">
-              <div class="recommend-singer-item-info-name text-el text-right line-clamp-1">{{ item.name }}</div>
+              <div class="recommend-singer-item-info-name text-el text-right line-clamp-1">
+                {{ item.name }}
+              </div>
             </div>
             <!-- 播放按钮(hover时显示) -->
             <div class="recommend-singer-item-play-overlay" @click.stop="handleOpenSinger(item.id)">
@@ -141,7 +145,13 @@ import { IDayRecommend } from '@/type/day_recommend';
 import { Playlist } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
 import type { IHotSinger } from '@/type/singer';
-import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
+import {
+  getImgUrl,
+  isMobile,
+  setAnimationClass,
+  setAnimationDelay,
+  setBackgroundImg
+} from '@/utils';
 
 const userStore = useUserStore();
 
@@ -173,6 +183,9 @@ const getCarouselItemStyle = (
   totalItems: number = 5,
   maxWidth?: number
 ) => {
+  if (isMobile.value) {
+    return 'width: 30%;';
+  }
   const animationDelay = setAnimationDelay(index, delayStep);
   const width = `calc((100% / ${totalItems}) - 16px)`;
   const maxWidthStyle = maxWidth ? `max-width: ${maxWidth}px;` : '';
@@ -186,11 +199,14 @@ const getCarouselItemStyle = (
  * @returns 样式字符串
  */
 const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
+  if (isMobile.value) {
+    return 'width: 100%;';
+  }
   const animationDelay = setAnimationDelay(1, 100);
   let width = '';
   let maxWidth = '';
 
-  switch(playlistCount) {
+  switch (playlistCount) {
     case 1:
       width = 'calc(100% / 4 - 16px)';
       maxWidth = 'max-width: 180px;';
@@ -281,7 +297,7 @@ watchEffect(() => {
 });
 
 const getPlaylistGridClass = (length: number) => {
-  switch(length) {
+  switch (length) {
     case 1:
       return 'one-column';
     case 2:
@@ -394,12 +410,12 @@ const getPlaylistGridClass = (length: number) => {
       border-radius: 12px;
       overflow: hidden;
       &:hover {
-      transform: translateY(-5px);
+        transform: translateY(-5px);
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-      .user-play-item-overlay {
+        .user-play-item-overlay {
-        opacity: 1;
+          opacity: 1;
+        }
       }
-    }
 
       img {
         @apply absolute inset-0 w-full h-full object-cover;
@@ -431,15 +447,17 @@ const getPlaylistGridClass = (length: number) => {
     }
   }
 }
-.mobile .recommend-singer {
+.mobile {
-  &-list {
+  .recommend-singer {
-    height: 180px;
+    &-list {
-    @apply ml-4;
+      height: 180px;
-  }
+      @apply ml-4;
-  &-item {
+    }
-    @apply p-4 rounded-xl;
+    &-item {
-    &-bg {
+      @apply p-2 rounded-xl;
-      @apply rounded-xl;
+      &-bg {
+        @apply rounded-xl;
+      }
     }
   }
 }

src/renderer/layout/AppLayout.vue

@@ -25,7 +25,16 @@
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar v-show="isPlay" :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''" />
+      <play-bar
+        v-if="!isMobile"
+        v-show="isPlay"
+        :style="playerStore.musicFull ? 'bottom: 0;' : ''"
+      />
+      <mobile-play-bar
+        v-else
+        v-show="isPlay"
+        :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
+      />
       <!-- 下载管理抽屉 -->
       <download-drawer
         v-if="
@@ -69,6 +78,7 @@ const keepAliveInclude = computed(() =>
 
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
+const MobilePlayBar = defineAsyncComponent(() => import('./components/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
@@ -99,7 +109,7 @@ watch(
   () => settingsStore.currentArtistId,
   (newId) => {
     if (newId) {
-      console.log('newId',newId)
+      console.log('newId', newId);
       artistDrawerShow.value = true;
       nextTick(() => {
         artistDrawerRef.value?.loadArtistInfo(newId);
@@ -152,7 +162,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
 
 .mobile {
   .main-content {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 154px);
     overflow: auto;
     display: block;
     flex: none;

src/renderer/layout/components/AppMenu.vue

@@ -127,7 +127,7 @@ const isText = ref(false);
 
     &-item {
       &-link {
-        @apply my-4 w-auto;
+        @apply my-2 w-auto;
       }
     }
   }

src/renderer/layout/components/MobilePlayBar.vue

@@ -0,0 +1,505 @@
+<template>
+  <div
+    class="mobile-play-bar"
+    :class="[
+      setAnimationClass('animate__fadeInUp'),
+      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini'
+    ]"
+    :style="{
+      color: musicFullVisible
+        ? textColors.theme === 'dark'
+          ? '#ffffff'
+          : '#ffffff'
+        : settingsStore.theme === 'dark'
+          ? '#ffffff'
+          : '#000000'
+    }"
+  >
+    <!-- 完整模式 - 在musicFullVisible为true时显示 -->
+    <template v-if="musicFullVisible">
+      <!-- 顶部信息区域 -->
+      <div class="music-info-header">
+        <div class="music-info-main">
+          <h1 class="music-title">{{ playMusic.name }}</h1>
+          <div class="artist-info">
+            <span class="artist-name">
+              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
+                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 进度条 -->
+      <div class="music-progress-bar">
+        <span class="current-time">{{ secondToMinute(nowTime) }}</span>
+        <div class="progress-wrapper">
+          <n-slider
+            v-model:value="timeSlider"
+            :step="1"
+            :max="allTime"
+            :min="0"
+            :tooltip="false"
+            class="progress-slider"
+          ></n-slider>
+        </div>
+        <span class="total-time">{{ secondToMinute(allTime) }}</span>
+      </div>
+
+      <!-- 主控制区 -->
+      <div class="player-controls">
+        <div class="control-btn like" @click="toggleFavorite">
+          <i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
+        </div>
+        <div class="control-btn prev" @click="handlePrev">
+          <i class="iconfont ri-skip-back-fill"></i>
+        </div>
+        <div class="control-btn play-pause" @click="playMusicEvent">
+          <i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
+        </div>
+        <div class="control-btn next" @click="handleNext">
+          <i class="iconfont ri-skip-forward-fill"></i>
+        </div>
+        <n-popover
+          trigger="click"
+          :z-index="99999999"
+          content-class="mobile-play-list"
+          raw
+          :show-arrow="false"
+          placement="top"
+          @update-show="scrollToPlayList"
+        >
+          <template #trigger>
+            <div class="control-btn list">
+              <i class="iconfont ri-menu-line"></i>
+            </div>
+          </template>
+          <div class="mobile-play-list-container">
+            <div class="mobile-play-list-back"></div>
+            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
+              <template #default="{ item }">
+                <div class="mobile-play-list-item">
+                  <song-item :key="item.id" :item="item" mini></song-item>
+                </div>
+              </template>
+            </n-virtual-list>
+          </div>
+        </n-popover>
+      </div>
+    </template>
+
+    <!-- Mini模式 - 在musicFullVisible为false时显示 -->
+    <div v-else class="mobile-mini-controls">
+      <!-- 歌曲信息 -->
+      <div class="mini-song-info" @click="setMusicFull">
+        <n-image
+          :src="getImgUrl(playMusic?.picUrl, '100y100')"
+          class="mini-song-cover"
+          lazy
+          preview-disabled
+        />
+        <div class="mini-song-text">
+          <n-ellipsis class="mini-song-title" line-clamp="1">
+            {{ playMusic.name }}
+          </n-ellipsis>
+          <n-ellipsis class="mini-song-artist" line-clamp="1">
+            <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
+              {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+            </span>
+          </n-ellipsis>
+        </div>
+      </div>
+
+      <!-- 播放按钮 -->
+      <div class="mini-playback-controls">
+        <div class="mini-control-btn play" @click="playMusicEvent">
+          <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
+        </div>
+        <n-popover
+          trigger="click"
+          :z-index="99999999"
+          content-class="mobile-play-list"
+          raw
+          :show-arrow="false"
+          placement="top"
+          @update-show="scrollToPlayList"
+        >
+          <template #trigger>
+            <i class="iconfont icon-list mini-list-icon"></i>
+          </template>
+          <div class="mobile-play-list-container">
+            <div class="mobile-play-list-back"></div>
+            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
+              <template #default="{ item }">
+                <div class="mobile-play-list-item">
+                  <song-item :key="item.id" :item="item" mini></song-item>
+                </div>
+              </template>
+            </n-virtual-list>
+          </div>
+        </n-popover>
+      </div>
+    </div>
+
+    <!-- 全屏播放器 -->
+    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useThrottleFn } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+
+import SongItem from '@/components/common/SongItem.vue';
+import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
+import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
+import type { SongResult } from '@/type/music';
+import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
+
+import MusicFull from './MusicFull.vue';
+
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
+// 是否播放
+const play = computed(() => playerStore.isPlay);
+// 播放列表
+const playList = computed(() => playerStore.playList as SongResult[]);
+// 背景颜色
+const background = ref('#000');
+
+// 播放进度条
+const throttledSeek = useThrottleFn((value: number) => {
+  if (!sound.value) return;
+  sound.value.seek(value);
+  nowTime.value = value;
+}, 50);
+
+const timeSlider = computed({
+  get: () => nowTime.value,
+  set: throttledSeek
+});
+
+// 播放控制
+function handleNext() {
+  playerStore.nextPlay();
+}
+
+function handlePrev() {
+  playerStore.prevPlay();
+}
+
+// 全屏播放器
+const MusicFullRef = ref<any>(null);
+const musicFullVisible = ref(false);
+
+// 设置musicFull
+const setMusicFull = () => {
+  musicFullVisible.value = !musicFullVisible.value;
+  playerStore.setMusicFull(musicFullVisible.value);
+  if (musicFullVisible.value) {
+    settingsStore.showArtistDrawer = false;
+  }
+};
+
+// 播放列表引用
+const playListRef = ref<any>(null);
+
+const scrollToPlayList = (val: boolean) => {
+  if (!val) return;
+  setTimeout(() => {
+    playListRef.value?.scrollTo({ top: playerStore.playListIndex * 56 });
+  }, 50);
+};
+
+// 收藏功能
+const isFavorite = computed(() => {
+  return playerStore.favoriteList.includes(playMusic.value.id);
+});
+
+const toggleFavorite = () => {
+  console.log('isFavorite.value', isFavorite.value);
+  if (isFavorite.value) {
+    playerStore.removeFromFavorite(playMusic.value.id);
+  } else {
+    playerStore.addToFavorite(playMusic.value.id);
+  }
+};
+
+// 播放暂停按钮事件
+const playMusicEvent = async () => {
+  try {
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
+      console.warn('No valid music or URL available');
+      playerStore.setPlay(playMusic.value);
+      return;
+    }
+
+    if (play.value) {
+      if (audioService.getCurrentSound()) {
+        audioService.pause();
+        playerStore.setPlayMusic(false);
+      }
+    } else {
+      if (audioService.getCurrentSound()) {
+        audioService.play();
+      } else {
+        await audioService.play(playerStore.playMusicUrl, playMusic.value);
+      }
+      playerStore.setPlayMusic(true);
+    }
+  } catch (error) {
+    console.error('播放出错:', error);
+    playerStore.nextPlay();
+  }
+};
+
+watch(
+  () => playerStore.playMusic,
+  async () => {
+    background.value = playMusic.value.backgroundColor as string;
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.mobile-play-bar {
+  @apply fixed bottom-[56px] left-0 w-full flex flex-col shadow-lg;
+  z-index: 10000;
+  animation-duration: 0.3s !important;
+  transition: all 0.3s ease;
+
+  &.play-bar-expanded {
+    @apply bg-transparent;
+    height: auto; /* 自动适应内容高度 */
+    max-height: 230px; /* 限制最大高度 */
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.5) 20%,
+      rgba(0, 0, 0, 0.8) 80%,
+      rgba(0, 0, 0, 0.9) 100%
+    );
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50px; /* 延伸到上方 */
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
+      background-size: cover;
+      background-position: center;
+      filter: blur(20px);
+      opacity: 0.2;
+      z-index: -1;
+    }
+  }
+
+  &.play-bar-mini {
+    @apply h-14 py-0 bg-light dark:bg-dark;
+  }
+
+  // 顶部信息区域
+  .music-info-header {
+    @apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;
+
+    .music-info-main {
+      @apply flex flex-col;
+
+      .music-title {
+        @apply text-xl font-bold text-white mb-1;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+      }
+
+      .artist-info {
+        @apply flex items-center;
+
+        .artist-name {
+          @apply text-sm text-white opacity-90;
+        }
+      }
+    }
+
+    .action-stats {
+      @apply flex items-center gap-4;
+
+      .like-count,
+      .comment-count {
+        @apply flex items-center text-white;
+
+        i {
+          @apply text-base mr-1;
+        }
+
+        span {
+          @apply text-xs font-medium;
+        }
+      }
+    }
+  }
+
+  // 进度条
+  .music-progress-bar {
+    @apply flex items-center justify-between px-4 py-2 relative z-10;
+
+    .current-time,
+    .total-time {
+      @apply text-xs text-white opacity-80;
+    }
+
+    .progress-wrapper {
+      @apply flex-1 mx-3 flex flex-col items-center;
+
+      .progress-slider {
+        @apply w-full;
+
+        :deep(.n-slider) {
+          --n-rail-height: 3px;
+          --n-rail-color: rgba(255, 255, 255, 0.15);
+          --n-rail-color-dark: rgba(255, 255, 255, 0.15);
+          --n-fill-color: #1ed760; /* Spotify绿色，可调整为其他绿色 */
+          --n-handle-size: 0px; /* 隐藏滑块 */
+          --n-handle-color: #1ed760;
+
+          &:hover {
+            --n-handle-size: 10px; /* 鼠标悬停时显示滑块 */
+          }
+
+          .n-slider-rail {
+            @apply rounded-full !important; /* 圆角进度条 */
+          }
+
+          .n-slider-fill {
+            @apply rounded-full !important;
+            box-shadow: 0 0 4px rgba(30, 215, 96, 0.5); /* 发光效果 */
+          }
+
+          .n-slider-handle {
+            @apply transition-all duration-200;
+            opacity: 0;
+            box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
+          }
+
+          &:hover .n-slider-handle,
+          &:active .n-slider-handle {
+            opacity: 1;
+          }
+        }
+      }
+
+      .quality-label {
+        @apply text-xs text-white opacity-70 mt-1;
+      }
+    }
+  }
+
+  // 主控制区
+  .player-controls {
+    @apply flex items-center justify-between px-8 py-3 relative z-10 pb-8;
+
+    .control-btn {
+      @apply flex items-center justify-center cursor-pointer transition;
+
+      i {
+        @apply text-white transition-all;
+      }
+
+      &.like i {
+        @apply text-2xl;
+      }
+
+      &.prev i,
+      &.next i {
+        @apply text-3xl;
+      }
+
+      &.play-pause {
+        @apply w-12 h-12 rounded-full flex items-center justify-center;
+        background: rgba(255, 255, 255, 0.2);
+
+        i {
+          @apply text-4xl;
+        }
+      }
+
+      &.list i {
+        @apply text-2xl;
+      }
+
+      .like-active {
+        @apply text-red-500;
+      }
+    }
+  }
+
+  // Mini模式样式
+  .mobile-mini-controls {
+    @apply flex items-center justify-between px-4 h-14;
+
+    .mini-song-info {
+      @apply flex items-center flex-1 min-w-0 cursor-pointer;
+
+      .mini-song-cover {
+        @apply w-8 h-8 rounded-md;
+      }
+
+      .mini-song-text {
+        @apply ml-3 min-w-0 flex-1;
+
+        .mini-song-title {
+          @apply text-sm font-medium;
+        }
+
+        .mini-song-artist {
+          @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
+        }
+      }
+    }
+
+    .mini-playback-controls {
+      @apply flex items-center;
+
+      .mini-control-btn {
+        @apply flex items-center justify-center cursor-pointer transition;
+
+        &.play {
+          @apply w-9 h-9 rounded-full flex items-center justify-center mr-2;
+          @apply bg-gray-100 dark:bg-gray-800;
+
+          .iconfont {
+            @apply text-xl text-green-500 transition hover:text-green-600;
+          }
+        }
+      }
+
+      .mini-list-icon {
+        @apply text-xl p-1 transition cursor-pointer;
+        @apply hover:text-green-500;
+      }
+    }
+  }
+}
+
+.mobile-play-list-container {
+  height: 60vh;
+  width: 90vw;
+  max-width: 400px;
+  @apply relative rounded-t-2xl overflow-hidden;
+
+  .mobile-play-list-back {
+    backdrop-filter: blur(20px);
+    @apply absolute top-0 left-0 w-full h-full;
+    @apply bg-light dark:bg-black bg-opacity-90;
+  }
+
+  .mobile-play-list-item {
+    @apply px-3 py-1;
+  }
+}
+</style>

src/renderer/layout/components/MusicFull.vue

@@ -11,7 +11,7 @@
       <div
         class="control-btn absolute top-8 left-8"
         :class="{ 'pure-mode': config.pureModeEnabled }"
-        @click="isVisible = false"
+        @click="closeMusicFull"
       >
         <i class="ri-arrow-down-s-line"></i>
       </div>
@@ -70,7 +70,7 @@
           class="music-lrc"
           :style="{
             height: config.hidePlayBar ? '85vh' : '65vh',
-            width: config.hideCover ? '50vw' : '500px'
+            width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
           }"
           :native-scrollbar="false"
           @mouseover="mouseOverLayout"
@@ -142,6 +142,7 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
@@ -432,6 +433,13 @@ const handleScroll = () => {
   showStickyHeader.value = scrollTop > 100;
 };
 
+const playerStore = usePlayerStore();
+
+const closeMusicFull = () => {
+  isVisible.value = false;
+  playerStore.setMusicFull(false);
+};
+
 // 添加滚动监听
 onMounted(() => {
   if (lrcSider.value?.$el) {
@@ -648,12 +656,17 @@ defineExpose({
       span {
         padding-right: 0px !important;
       }
-    }
+      .hover-text {
+      &:hover {
+        background-color: transparent;
+        }
+      }
     .music-lrc-text {
       @apply text-xl text-center;
     }
     .music-content {
       @apply h-[calc(100vh-120px)];
+      width: 100vw !important;
     }
   }
 }
@@ -664,8 +677,9 @@ defineExpose({
 
 // 添加全局字体样式
 :root {
-  --current-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  --current-font-family:
-    'Helvetica Neue', Arial, sans-serif;
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
 }
 
 #drawer-target {
@@ -687,7 +701,7 @@ defineExpose({
 }
 
 .control-btn {
-  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
+  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
   background: rgba(142, 142, 142, 0.192);
   backdrop-filter: blur(12px);
 

src/renderer/layout/components/PlayBar.vue

@@ -567,7 +567,7 @@ const isEQVisible = ref(false);
 
 .mobile {
   .music-play-bar {
-    @apply px-4 bottom-[70px] transition-all duration-300;
+    @apply px-4 bottom-[56px] transition-all duration-300;
   }
   .music-time {
     display: none;

src/renderer/store/modules/settings.ts

@@ -37,11 +37,10 @@ export const useSettingsStore = defineStore('settings', () => {
 
     if (isElectron) {
       window.electron.ipcRenderer.send('set-store-value', 'set', cloneDeep(mergedData));
-      console.log('mergedData', mergedData);
-      setData.value = cloneDeep(mergedData);
     } else {
       localStorage.setItem('appSettings', JSON.stringify(cloneDeep(mergedData)));
     }
+    setData.value = cloneDeep(mergedData);
   };
 
   const toggleTheme = () => {

src/renderer/utils/index.ts

@@ -1,3 +1,4 @@
+import { useWindowSize } from '@vueuse/core';
 import { computed } from 'vue';
 
 import { useSettingsStore } from '@/store/modules/settings';
@@ -73,16 +74,26 @@ export const getImgUrl = (url: string | undefined, size: string = '') => {
 };
 
 export const isMobile = computed(() => {
-  const flag = navigator.userAgent.match(
+  const { width } = useWindowSize();
+  const userAgentFlag = navigator.userAgent.match(
     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
   );
 
-  const settingsStore = useSettingsStore();
+  const isMobileWidth = width.value < 500;
-  settingsStore.isMobile = !!flag;
+  const isMobileDevice = !!userAgentFlag || isMobileWidth;
 
-  // 给html标签 添加mobile
+  const settingsStore = useSettingsStore();
-  if (flag) document.documentElement.classList.add('mobile');
+  settingsStore.isMobile = isMobileDevice;
-  return !!flag;
+
+  // 给html标签 添加或移除mobile类
+  if (isMobileDevice) {
+    document.documentElement.classList.add('mobile');
+  } else {
+    document.documentElement.classList.add('pc');
+    document.documentElement.classList.remove('mobile');
+  }
+
+  return isMobileDevice;
 });
 
 export const isElectron = (window as any).electron !== undefined;

src/renderer/views/set/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings-container">
     <!-- 左侧导航栏 -->
-    <div class="settings-nav">
+    <div v-if="!isMobile" class="settings-nav">
       <div
         v-for="section in settingSections"
         :key="section.id"
@@ -462,7 +462,6 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import { debounce } from 'lodash';
 import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
@@ -476,7 +475,7 @@ import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
-import { isElectron } from '@/utils';
+import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';