feat：针对移动端优化

src/renderer/components/player/MobilePlayBar.vue

@@ -1,13 +1,14 @@
 <template>
   <div
+    ref="playBarRef"
     class="mobile-play-bar"
     :class="[
       setAnimationClass('animate__fadeInUp'),
-      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini',
-      !shouldShowMobileMenu ? 'mobile-play-bar-no-menu' : ''
+      playerStore.musicFull ? 'play-bar-expanded' : 'play-bar-mini',
+      shouldShowMobileMenu ? 'is-menu-show' : 'is-menu-hide'
     ]"
     :style="{
-      color: musicFullVisible
+      color: playerStore.musicFull
         ? textColors.theme === 'dark'
           ? '#ffffff'
           : '#ffffff'
@@ -16,63 +17,8 @@
           : '#000000'
     }"
   >
-    <!-- 完整模式 - 在musicFullVisible为true时显示 -->
-    <template v-if="false">
-      <!-- 顶部信息区域 -->
-      <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>
-        <div class="control-btn list" @click="openPlayListDrawer">
-          <i class="iconfont ri-menu-line"></i>
-        </div>
-      </div>
-
-      <!-- 定时关闭按钮 -->
-      <!-- <SleepTimerPopover mode="mobile" /> -->
-    </template>
-
     <!-- Mini模式 - 在musicFullVisible为false时显示 -->
-    <div v-if="!musicFullVisible" class="mobile-mini-controls">
+    <div v-if="!playerStore.musicFull" class="mobile-mini-controls">
       <!-- 歌曲信息 -->
       <div class="mini-song-info" @click="setMusicFull">
         <n-image
@@ -85,16 +31,17 @@
           <n-ellipsis line-clamp="1">
             <span class="mini-song-title">{{ playMusic.name }}</span>
             <span class="mx-2 text-gray-500 dark:text-gray-400">-</span>
-            <span class="mini-song-artist">
-              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
-                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
-              </span>
+            <span
+              class="mini-song-artist"
+              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>
@@ -104,21 +51,26 @@
     </div>
 
     <!-- 全屏播放器 -->
-    <music-full-wrapper ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+    <music-full-wrapper
+      ref="MusicFullRef"
+      v-model="playerStore.musicFull"
+      :background="background"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useThrottleFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { useSwipe } from '@vueuse/core';
+import type { Ref } from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 
 import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
-import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
+import { artistList, playMusic, textColors } from '@/hooks/MusicHook';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
-import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
+import { getImgUrl, setAnimationClass } from '@/utils';
 
-const shouldShowMobileMenu = inject('shouldShowMobileMenu');
+const shouldShowMobileMenu = inject('shouldShowMobileMenu') as Ref<boolean>;
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -128,18 +80,6 @@ const play = computed(() => playerStore.isPlay);
 // 背景颜色
 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();
@@ -151,36 +91,27 @@ function handlePrev() {
 
 // 全屏播放器
 const MusicFullRef = ref<any>(null);
-const musicFullVisible = ref(false);
 
 // 设置musicFull
 const setMusicFull = () => {
-  musicFullVisible.value = !musicFullVisible.value;
-  playerStore.setMusicFull(musicFullVisible.value);
-  if (musicFullVisible.value) {
+  playerStore.setMusicFull(!playerStore.musicFull);
+  if (playerStore.musicFull) {
     settingsStore.showArtistDrawer = false;
   }
 };
 
+watch(
+  () => playerStore.musicFull,
+  (_newVal) => {
+    // 状态栏样式更新已在 Web 环境下禁用
+  }
+);
+
 // 打开播放列表抽屉
 const openPlayListDrawer = () => {
   playerStore.setPlayListDrawerVisible(true);
 };
 
-// 收藏功能
-const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id as number);
-});
-
-const toggleFavorite = () => {
-  console.log('isFavorite.value', isFavorite.value);
-  if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id as number);
-  } else {
-    playerStore.addToFavorite(playMusic.value.id as number);
-  }
-};
-
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
@@ -191,6 +122,20 @@ const playMusicEvent = async () => {
   }
 };
 
+// 滑动切歌
+const playBarRef = ref<HTMLElement | null>(null);
+onMounted(() => {
+  if (playBarRef.value) {
+    const { direction } = useSwipe(playBarRef, {
+      onSwipeEnd: () => {
+        if (direction.value === 'left') handleNext();
+        if (direction.value === 'right') handlePrev();
+      },
+      threshold: 30
+    });
+  }
+});
+
 watch(
   () => playerStore.playMusic,
   async () => {
@@ -207,8 +152,11 @@ watch(
   animation-duration: 0.3s !important;
   transition: all 0.3s ease;
 
-  &.mobile-play-bar-no-menu {
-    @apply bottom-[10px];
+  &.is-menu-show {
+    bottom: calc(var(--safe-area-inset-bottom, 0) + 66px);
+  }
+  &.is-menu-hide {
+    bottom: calc(var(--safe-area-inset-bottom, 0) + 10px);
   }
 
   &.play-bar-expanded {
@@ -222,66 +170,12 @@ watch(
       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;
   }
 
-  // 顶部信息区域
-  .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;
@@ -388,7 +282,7 @@ watch(
       }
 
       .mini-song-text {
-        @apply ml-3 min-w-0 flex-1;
+        @apply ml-3 min-w-0 flex-1 flex items-center;
 
         .mini-song-title {
           @apply text-sm font-medium;

src/renderer/components/player/MobilePlayerSettings.vue

@@ -0,0 +1,363 @@
+<template>
+  <Teleport to="body">
+    <Transition name="settings-drawer">
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-[99999] flex items-end justify-center"
+        @click.self="close"
+      >
+        <!-- 遮罩层 -->
+        <div class="absolute inset-0 bg-black/50" @click="close"></div>
+
+        <!-- 弹窗内容 - 磨砂玻璃效果 -->
+        <div
+          class="relative w-full max-w-lg bg-gray-900/70 backdrop-blur-2xl rounded-t-3xl overflow-hidden max-h-[85vh] flex flex-col border-t border-white/10 shadow-2xl"
+        >
+          <!-- 顶部拖拽条 -->
+          <div class="flex justify-center pt-3 pb-2 flex-shrink-0">
+            <div class="w-10 h-1 rounded-full bg-white/30"></div>
+          </div>
+
+          <!-- 标题栏 -->
+          <div class="flex items-center justify-between px-5 pb-4 flex-shrink-0">
+            <h2 class="text-lg font-semibold text-white">
+              {{ t('player.settings.title') }}
+            </h2>
+            <button
+              @click="close"
+              class="w-8 h-8 rounded-full flex items-center justify-center text-white/60 hover:bg-white/10"
+            >
+              <i class="ri-close-line text-xl"></i>
+            </button>
+          </div>
+
+          <!-- 内容区域 -->
+          <div
+            class="flex-1 overflow-y-auto px-5 pb-6"
+            :style="{ paddingBottom: `calc(24px + var(--safe-area-inset-bottom, 0px))` }"
+          >
+            <!-- 播放速度 -->
+            <div class="mb-6">
+              <div class="flex items-center justify-between mb-3">
+                <span class="text-sm font-medium text-white/80">
+                  {{ t('player.settings.playbackSpeed') }}
+                </span>
+                <span class="text-sm text-green-400 font-medium">{{ playbackRate }}x</span>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  v-for="option in speedOptions"
+                  :key="option"
+                  @click="setSpeed(option)"
+                  class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
+                  :class="
+                    playbackRate === option
+                      ? 'bg-green-500 text-white'
+                      : 'bg-white/10 text-white/70 hover:bg-white/15'
+                  "
+                >
+                  {{ option }}x
+                </button>
+              </div>
+            </div>
+
+            <!-- 分隔线 -->
+            <div class="h-px bg-white/10 my-5"></div>
+
+            <!-- 定时关闭 -->
+            <div>
+              <div class="flex items-center justify-between mb-3">
+                <span class="text-sm font-medium text-white/80">
+                  {{ t('player.sleepTimer.title') }}
+                </span>
+                <span v-if="hasTimerActive" class="text-sm text-green-400 font-medium">
+                  {{ timerStatusText }}
+                </span>
+              </div>
+
+              <!-- 已激活状态 -->
+              <div v-if="hasTimerActive" class="space-y-3">
+                <div class="p-4 rounded-2xl bg-green-500/15 border border-green-500/30">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <i class="ri-timer-line text-green-400 text-xl"></i>
+                      <span class="text-green-400">
+                        {{ timerDisplayText }}
+                      </span>
+                    </div>
+                    <button
+                      @click="cancelTimer"
+                      class="px-3 py-1 rounded-full text-sm bg-red-500/20 text-red-400 hover:bg-red-500/30"
+                    >
+                      {{ t('player.sleepTimer.cancel') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 未激活状态 - 设置选项 -->
+              <div v-else class="space-y-4">
+                <!-- 按时间 -->
+                <div>
+                  <p class="text-xs text-white/50 mb-2">
+                    {{ t('player.sleepTimer.timeMode') }}
+                  </p>
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="minutes in [15, 30, 60, 90]"
+                      :key="minutes"
+                      @click="setTimeTimer(minutes)"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                    >
+                      {{ minutes }}{{ t('player.sleepTimer.minutes') }}
+                    </button>
+                  </div>
+                  <!-- 自定义时间 -->
+                  <div class="flex items-center gap-2 mt-3">
+                    <div class="flex items-center flex-1 bg-white/10 rounded-full overflow-hidden">
+                      <button
+                        @click="decreaseMinutes"
+                        class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
+                      >
+                        <i class="ri-subtract-line text-lg"></i>
+                      </button>
+                      <input
+                        v-model="customMinutes"
+                        type="text"
+                        inputmode="numeric"
+                        pattern="[0-9]*"
+                        placeholder="分钟"
+                        class="flex-1 px-2 py-2 text-sm text-center bg-transparent text-white/80 border-0 outline-none placeholder-white/40"
+                        @input="handleMinutesInput"
+                      />
+                      <button
+                        @click="increaseMinutes"
+                        class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
+                      >
+                        <i class="ri-add-line text-lg"></i>
+                      </button>
+                    </div>
+                    <button
+                      @click="setCustomTimeTimer"
+                      :disabled="!customMinutes || Number(customMinutes) < 1"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-green-500 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {{ t('player.sleepTimer.set') }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 按歌曲数 -->
+                <div>
+                  <p class="text-xs text-white/50 mb-2">
+                    {{ t('player.sleepTimer.songsMode') }}
+                  </p>
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="songs in [1, 3, 5, 10]"
+                      :key="songs"
+                      @click="setSongsTimer(songs)"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                    >
+                      {{ songs }}{{ t('player.sleepTimer.songs') }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 播放列表结束 -->
+                <button
+                  @click="setPlaylistEndTimer"
+                  class="w-full py-3 rounded-2xl text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                >
+                  {{ t('player.sleepTimer.playlistEnd') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const { sleepTimer, playbackRate } = storeToRefs(playerStore);
+
+// Props & Emits
+defineProps<{
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+// 播放速度选项
+const speedOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
+
+// 自定义时间
+const customMinutes = ref<number | string>(30);
+
+// 定时器相关
+const refreshTrigger = ref(0);
+let timerInterval: number | null = null;
+
+const hasTimerActive = computed(() => playerStore.hasSleepTimerActive);
+
+const timerStatusText = computed(() => {
+  if (sleepTimer.value.type === 'time') return t('player.sleepTimer.activeTime');
+  if (sleepTimer.value.type === 'songs') return t('player.sleepTimer.activeSongs');
+  if (sleepTimer.value.type === 'end') return t('player.sleepTimer.activeEnd');
+  return '';
+});
+
+const timerDisplayText = computed(() => {
+  void refreshTrigger.value;
+
+  if (sleepTimer.value.type === 'time' && sleepTimer.value.endTime) {
+    const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
+    const totalSeconds = Math.floor(remaining / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = Math.floor(totalSeconds % 60);
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  if (sleepTimer.value.type === 'songs') {
+    return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs || 0 });
+  }
+
+  if (sleepTimer.value.type === 'end') {
+    return t('player.sleepTimer.afterPlaylist');
+  }
+
+  return '';
+});
+
+// 方法
+const close = () => {
+  emit('update:visible', false);
+};
+
+const setSpeed = (speed: number) => {
+  playerStore.setPlaybackRate(speed);
+};
+
+const setTimeTimer = (minutes: number) => {
+  playerStore.setSleepTimerByTime(minutes);
+};
+
+const setCustomTimeTimer = () => {
+  const minutes =
+    typeof customMinutes.value === 'number'
+      ? customMinutes.value
+      : parseInt(String(customMinutes.value) || '0', 10);
+  if (minutes >= 1) {
+    playerStore.setSleepTimerByTime(minutes);
+    customMinutes.value = 30;
+  }
+};
+
+const increaseMinutes = () => {
+  const current = Number(customMinutes.value) || 0;
+  customMinutes.value = Math.min(300, current + 1);
+};
+
+const decreaseMinutes = () => {
+  const current = Number(customMinutes.value) || 0;
+  customMinutes.value = Math.max(1, current - 1);
+};
+
+const handleMinutesInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  const value = input.value.replace(/[^0-9]/g, '');
+  if (value) {
+    customMinutes.value = Math.min(300, Math.max(1, parseInt(value, 10)));
+  } else {
+    customMinutes.value = '';
+  }
+};
+
+const setSongsTimer = (songs: number) => {
+  playerStore.setSleepTimerBySongs(songs);
+};
+
+const setPlaylistEndTimer = () => {
+  playerStore.setSleepTimerAtPlaylistEnd();
+};
+
+const cancelTimer = () => {
+  playerStore.clearSleepTimer();
+};
+
+// 定时刷新倒计时
+const startTimerUpdate = () => {
+  if (timerInterval) return;
+  timerInterval = window.setInterval(() => {
+    refreshTrigger.value = Date.now();
+  }, 500);
+};
+
+const stopTimerUpdate = () => {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+};
+
+watch(
+  () => [hasTimerActive.value, sleepTimer.value.type],
+  ([active, type]) => {
+    if (active && type === 'time') {
+      startTimerUpdate();
+    } else {
+      stopTimerUpdate();
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (hasTimerActive.value && sleepTimer.value.type === 'time') {
+    startTimerUpdate();
+  }
+});
+
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</script>
+
+<style scoped>
+/* 弹窗动画 */
+.settings-drawer-enter-active,
+.settings-drawer-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.settings-drawer-enter-active > div:last-child,
+.settings-drawer-leave-active > div:last-child {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.settings-drawer-enter-from,
+.settings-drawer-leave-to {
+  opacity: 0;
+}
+
+.settings-drawer-enter-from > div:last-child,
+.settings-drawer-leave-to > div:last-child {
+  transform: translateY(100%);
+}
+</style>