From b06459f10d29e99a817ee229e6b7769a67c31336 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:15:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8=E4=B8=8E=E6=92=AD=E6=94=BE=E6=9D=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/MvPlayer.vue          | 964 ++++++++----------
 .../components/player/MiniPlayBar.vue         |  15 +-
 src/renderer/components/player/PlayBar.vue    |  15 +-
 .../components/player/ReparsePopover.vue      |   9 +-
 4 files changed, 432 insertions(+), 571 deletions(-)

diff --git a/src/renderer/components/MvPlayer.vue b/src/renderer/components/MvPlayer.vue
index 985616f..7c86502 100644
--- a/src/renderer/components/MvPlayer.vue
+++ b/src/renderer/components/MvPlayer.vue
@@ -1,201 +1,330 @@
 <template>
-  <n-drawer :show="show" height="100%" placement="bottom" :z-index="999999999" :to="`#layout-main`">
-    <div class="mv-detail">
+  <n-drawer
+    :show="show"
+    height="100%"
+    placement="bottom"
+    :z-index="999999999"
+    :to="`#layout-main`"
+    :trap-focus="false"
+  >
+    <div
+      ref="containerRef"
+      class="group relative h-full w-full bg-black overflow-hidden"
+      :class="{ 'cursor-none': !showCursor && isPlaying }"
+      @mousemove="handleMouseMove"
+      @click="handleContainerClick"
+      @dblclick="handleDoubleClick"
+    >
+      <!-- Video Player -->
+      <video
+        ref="videoRef"
+        :src="mvUrl"
+        class="h-full w-full object-contain"
+        crossorigin="anonymous"
+        playsinline
+        @ended="handleEnded"
+        @timeupdate="handleTimeUpdate"
+        @loadedmetadata="handleLoadedMetadata"
+        @play="isPlaying = true"
+        @pause="isPlaying = false"
+        @waiting="isBuffering = true"
+        @playing="isBuffering = false"
+      ></video>
+
+      <!-- Loading / Buffering Indicator -->
       <div
-        ref="videoContainerRef"
-        class="video-container"
-        :class="{ 'cursor-hidden': !showCursor }"
+        v-if="playLoading || isBuffering"
+        class="absolute inset-0 flex items-center justify-center pointer-events-none z-30"
       >
-        <video
-          ref="videoRef"
-          :src="mvUrl"
-          class="video-player"
-          @ended="handleEnded"
-          @timeupdate="handleTimeUpdate"
-          @loadedmetadata="handleLoadedMetadata"
-          @play="isPlaying = true"
-          @pause="isPlaying = false"
-          @click="togglePlay"
-        ></video>
+        <n-spin size="large" stroke="#10b981" />
+      </div>
 
-        <div v-if="autoPlayBlocked" class="play-hint" @click="togglePlay">
-          <n-button quaternary circle size="large">
-            <template #icon>
-              <n-icon size="48">
-                <i class="ri-play-circle-line"></i>
-              </n-icon>
-            </template>
-          </n-button>
+      <!-- Mobile: Center Play Button Overlay -->
+      <div
+        v-if="isMobile && showControls && !playLoading && !isBuffering"
+        class="absolute inset-0 flex items-center justify-center z-20 pointer-events-none"
+      >
+        <div
+          class="bg-black/40 backdrop-blur-sm rounded-full p-4 pointer-events-auto transition-transform active:scale-95"
+          @click.stop="togglePlay"
+        >
+          <n-icon size="48" color="white">
+            <i :class="isPlaying ? 'ri-pause-fill' : 'ri-play-fill'"></i>
+          </n-icon>
         </div>
+      </div>
 
-        <div class="custom-controls" :class="{ 'controls-hidden': !showControls }">
-          <div class="progress-bar custom-slider">
-            <n-slider
-              v-model:value="progress"
-              :min="0"
-              :max="100"
-              :tooltip="false"
-              :step="0.1"
-              @update:value="handleProgressChange"
-            >
-            </n-slider>
-          </div>
+      <!-- Play Hint (Desktop) -->
+      <div
+        v-if="autoPlayBlocked && !isMobile"
+        class="absolute inset-0 flex items-center justify-center bg-black/50 z-30 cursor-pointer"
+        @click="togglePlay"
+      >
+        <n-button
+          quaternary
+          circle
+          size="large"
+          class="!text-white hover:!text-green-500 scale-150"
+        >
+          <template #icon>
+            <n-icon size="48"><i class="ri-play-circle-line"></i></n-icon>
+          </template>
+        </n-button>
+      </div>
 
-          <div class="controls-main">
-            <div class="left-controls">
-              <n-tooltip v-if="!props.noList" placement="top">
-                <template #trigger>
-                  <n-button quaternary circle @click="handlePrev">
-                    <template #icon>
-                      <n-icon size="24">
-                        <n-spin v-if="prevLoading" size="small" />
-                        <i v-else class="ri-skip-back-line"></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
+      <!-- Top Bar (Title & Close) -->
+      <div
+        class="absolute top-0 left-0 right-0 p-4 z-[9999999] transition-all duration-300 bg-gradient-to-b from-black/80 to-transparent pointer-events-auto"
+        :class="{ '-translate-y-full opacity-0': !showControls }"
+        style="-webkit-app-region: drag"
+        @click.stop
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4 flex-1 min-w-0">
+            <div style="-webkit-app-region: no-drag">
+              <n-button
+                quaternary
+                circle
+                class="!text-white hover:!bg-white/10"
+                @click.stop="handleClose"
+              >
+                <template #icon>
+                  <n-icon size="28"><i class="ri-close-line"></i></n-icon>
                 </template>
-                {{ t('player.previous') }}
-              </n-tooltip>
-
-              <n-tooltip placement="top">
-                <template #trigger>
-                  <n-button quaternary circle @click="togglePlay">
-                    <template #icon>
-                      <n-icon size="24">
-                        <n-spin v-if="playLoading" size="small" />
-                        <i v-else :class="isPlaying ? 'ri-pause-line' : 'ri-play-line'"></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                {{ isPlaying ? t('player.pause') : t('player.play') }}
-              </n-tooltip>
-
-              <n-tooltip v-if="!props.noList" placement="top">
-                <template #trigger>
-                  <n-button quaternary circle @click="handleNext">
-                    <template #icon>
-                      <n-icon size="24">
-                        <n-spin v-if="nextLoading" size="small" />
-                        <i v-else class="ri-skip-forward-line"></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                {{ t('player.next') }}
-              </n-tooltip>
-
-              <div class="time-display">
-                {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-              </div>
+              </n-button>
+            </div>
+            <div class="text-white truncate font-medium text-lg">
+              {{ currentMv?.name }}
             </div>
 
-            <div class="right-controls">
-              <div v-if="!isMobile" class="volume-control custom-slider">
-                <n-tooltip placement="top">
-                  <template #trigger>
-                    <n-button quaternary circle @click="toggleMute">
-                      <template #icon>
-                        <n-icon size="24">
-                          <i
-                            :class="volume === 0 ? 'ri-volume-mute-line' : 'ri-volume-up-line'"
-                          ></i>
-                        </n-icon>
-                      </template>
-                    </n-button>
+            <div v-if="currentMv?.artistName" class="text-gray-300 text-sm truncate">
+              - {{ currentMv.artistName }}
+            </div>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <!-- Mobile: More Menu (Optional) -->
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom Controls -->
+      <div
+        class="absolute bottom-0 left-0 right-0 z-40 transition-all duration-300 bg-gradient-to-t from-black/90 via-black/60 to-transparent pb-6 pt-12 px-4 md:px-6"
+        :class="{ 'translate-y-full opacity-0': !showControls }"
+        @click.stop
+      >
+        <!-- Progress Bar -->
+        <div class="group/slider relative h-6 w-full flex items-center mb-2 cursor-pointer">
+          <n-slider
+            v-model:value="progress"
+            :min="0"
+            :max="100"
+            :tooltip="false"
+            :step="0.01"
+            class="mv-slider"
+            @update:value="handleProgressChange"
+            @dragstart="isDragging = true"
+            @dragend="isDragging = false"
+          >
+            <template #thumb>
+              <div
+                class="w-3 h-3 bg-white rounded-full shadow-md scale-0 group-hover/slider:scale-100 transition-transform duration-200"
+              ></div>
+            </template>
+          </n-slider>
+          <!-- Time Display (Mobile Overlay) -->
+          <div
+            v-if="isDragging"
+            class="absolute -top-8 left-1/2 -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded"
+          >
+            {{ formatTime((progress / 100) * duration) }}
+          </div>
+        </div>
+
+        <!-- Controls Row -->
+        <div class="flex items-center justify-between">
+          <!-- Left: Play/Pause/Nav (Desktop) -->
+          <div class="flex items-center gap-2 md:gap-4">
+            <!-- Mobile: Only Time -->
+            <div v-if="isMobile" class="text-xs text-gray-300 font-mono">
+              {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+            </div>
+
+            <!-- Desktop Controls -->
+            <template v-else>
+              <n-button
+                quaternary
+                circle
+                class="!text-white hover:!text-green-400"
+                @click="handlePrev"
+                :disabled="!props.currentMv"
+              >
+                <template #icon
+                  ><n-icon size="24"><i class="ri-skip-back-line"></i></n-icon
+                ></template>
+              </n-button>
+
+              <n-button
+                quaternary
+                circle
+                class="!text-white hover:!text-green-400"
+                @click="togglePlay"
+              >
+                <template #icon>
+                  <n-icon size="32">
+                    <i :class="isPlaying ? 'ri-pause-fill' : 'ri-play-fill'"></i>
+                  </n-icon>
+                </template>
+              </n-button>
+
+              <n-button
+                quaternary
+                circle
+                class="!text-white hover:!text-green-400"
+                @click="handleNext"
+                :disabled="!props.currentMv"
+              >
+                <template #icon
+                  ><n-icon size="24"><i class="ri-skip-forward-line"></i></n-icon
+                ></template>
+              </n-button>
+
+              <div class="text-xs text-gray-300 font-mono ml-2">
+                {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+              </div>
+            </template>
+          </div>
+
+          <!-- Right: Volume/Mode/Fullscreen -->
+          <div class="flex items-center gap-2 md:gap-4">
+            <!-- Play Mode -->
+            <n-tooltip trigger="hover" placement="top">
+              <template #trigger>
+                <n-button
+                  quaternary
+                  circle
+                  class="!text-white hover:!text-green-400"
+                  @click="togglePlayMode"
+                >
+                  <template #icon>
+                    <n-icon size="20">
+                      <i
+                        :class="playMode === 'single' ? 'ri-repeat-one-line' : 'ri-play-list-line'"
+                      ></i>
+                    </n-icon>
                   </template>
-                  {{ volume === 0 ? t('player.unmute') : t('player.mute') }}
-                </n-tooltip>
+                </n-button>
+              </template>
+              {{ playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list') }}
+            </n-tooltip>
+
+            <!-- Volume (Desktop Only) -->
+            <div v-if="!isMobile" class="group/volume flex items-center relative">
+              <n-button
+                quaternary
+                circle
+                class="!text-white hover:!text-green-400"
+                @click="toggleMute"
+              >
+                <template #icon>
+                  <n-icon size="20">
+                    <i :class="volume === 0 ? 'ri-volume-mute-line' : 'ri-volume-up-line'"></i>
+                  </n-icon>
+                </template>
+              </n-button>
+              <div
+                class="w-0 overflow-hidden group-hover/volume:w-24 transition-all duration-300 ease-in-out ml-2"
+              >
                 <n-slider
                   v-model:value="volume"
                   :min="0"
                   :max="100"
                   :tooltip="false"
-                  class="volume-slider"
+                  class="mv-volume-slider"
                 />
               </div>
-
-              <n-tooltip v-if="!props.noList" placement="top">
-                <template #trigger>
-                  <n-button quaternary circle class="play-mode-btn" @click="togglePlayMode">
-                    <template #icon>
-                      <n-icon size="24">
-                        <i
-                          :class="
-                            playMode === 'single' ? 'ri-repeat-one-line' : 'ri-play-list-line'
-                          "
-                        ></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                {{
-                  playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list')
-                }}
-              </n-tooltip>
-
-              <n-tooltip placement="top">
-                <template #trigger>
-                  <n-button quaternary circle @click="toggleFullscreen">
-                    <template #icon>
-                      <n-icon size="24">
-                        <i
-                          :class="isFullscreen ? 'ri-fullscreen-exit-line' : 'ri-fullscreen-line'"
-                        ></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                {{ isFullscreen ? t('player.fullscreen.exit') : t('player.fullscreen.enter') }}
-              </n-tooltip>
-
-              <n-tooltip placement="top">
-                <template #trigger>
-                  <n-button quaternary circle @click="handleClose">
-                    <template #icon>
-                      <n-icon size="24">
-                        <i class="ri-close-line"></i>
-                      </n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                {{ t('player.close') }}
-              </n-tooltip>
             </div>
+
+            <!-- Fullscreen -->
+            <n-button
+              quaternary
+              circle
+              class="!text-white hover:!text-green-400"
+              @click="toggleFullscreen"
+            >
+              <template #icon>
+                <n-icon size="20">
+                  <i :class="isFullscreen ? 'ri-fullscreen-exit-line' : 'ri-fullscreen-line'"></i>
+                </n-icon>
+              </template>
+            </n-button>
           </div>
         </div>
-
-        <!-- 添加模式切换提示 -->
-        <transition name="fade">
-          <div v-if="showModeHint" class="mode-hint">
-            <n-icon size="48" class="mode-icon">
-              <i :class="playMode === 'single' ? 'ri-repeat-one-line' : 'ri-play-list-line'"></i>
-            </n-icon>
-            <div class="mode-text">
-              {{ playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list') }}
-            </div>
-          </div>
-        </transition>
       </div>
 
-      <div class="mv-detail-title" :class="{ 'title-hidden': !showControls }">
-        <div class="title">
-          <n-ellipsis>{{ currentMv?.name }}</n-ellipsis>
+      <!-- Mode Switch Toast -->
+      <transition
+        enter-active-class="transition ease-out duration-300"
+        enter-from-class="opacity-0 scale-90"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-200"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-90"
+      >
+        <div
+          v-if="showModeHint"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-black/70 backdrop-blur px-6 py-4 rounded-xl flex flex-col items-center gap-2 pointer-events-none z-50"
+        >
+          <n-icon size="32" class="text-green-500">
+            <i :class="playMode === 'single' ? 'ri-repeat-one-line' : 'ri-play-list-line'"></i>
+          </n-icon>
+          <span class="text-white text-sm font-medium">
+            {{ playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list') }}
+          </span>
         </div>
-      </div>
+      </transition>
+
+      <!-- Double Tap Toast -->
+      <transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0 scale-50"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-50"
+      >
+        <div
+          v-if="doubleTapAction"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col items-center text-white/90"
+        >
+          <n-icon size="48"
+            ><i
+              :class="doubleTapAction === 'forward' ? 'ri-forward-10-line' : 'ri-replay-10-line'"
+            ></i
+          ></n-icon>
+          <span class="text-sm font-bold">{{
+            doubleTapAction === 'forward' ? '+10s' : '-10s'
+          }}</span>
+        </div>
+      </transition>
     </div>
   </n-drawer>
 </template>
 
 <script setup lang="ts">
-import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { breakpointsTailwind, useBreakpoints, useFullscreen, useIdle } from '@vueuse/core';
+import { NButton, NIcon, NSlider, NSpin, NTooltip } from 'naive-ui';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getMvUrl } from '@/api/mv';
 import { IMvItem } from '@/types/mv';
 
 const { t } = useI18n();
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smaller('md');
+
 type PlayMode = 'single' | 'auto';
 const PLAY_MODE = {
   Single: 'single' as PlayMode,
@@ -221,20 +350,42 @@ const emit = defineEmits<{
   (e: 'prev', loading: (value: boolean) => void): void;
 }>();
 
+// Refs
+const containerRef = ref<HTMLElement | null>(null);
+const videoRef = ref<HTMLVideoElement | null>(null);
+
+// State
 const mvUrl = ref<string>();
 const playMode = ref<PlayMode>(PLAY_MODE.Auto);
-
-const videoRef = ref<HTMLVideoElement>();
 const isPlaying = ref(false);
+const isBuffering = ref(false);
 const currentTime = ref(0);
 const duration = ref(0);
 const progress = ref(0);
-const bufferedProgress = ref(0);
 const volume = ref(100);
-const showControls = ref(true);
-let controlsTimer: NodeJS.Timeout | null = null;
+const playLoading = ref(false);
+const autoPlayBlocked = ref(false);
+const isDragging = ref(false);
+const showModeHint = ref(false);
+const doubleTapAction = ref<'forward' | 'rewind' | null>(null);
 
+// Controls Visibility Logic
+const { idle } = useIdle(3000); // 3 seconds idle
+const showControls = computed(() => {
+  if (!isPlaying.value) return true; // Always show when paused
+  if (isDragging.value) return true;
+  if (isMobile.value) return !idle.value;
+  return !idle.value || showCursor.value; // Desktop logic
+});
+
+const showCursor = ref(true);
+let cursorTimer: NodeJS.Timeout | null = null;
+
+const { isFullscreen, toggle: toggleFullscreenState } = useFullscreen(containerRef);
+
+// Methods
 const formatTime = (seconds: number) => {
+  if (!seconds || isNaN(seconds)) return '00:00';
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = Math.floor(seconds % 60);
   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
@@ -242,29 +393,20 @@ const formatTime = (seconds: number) => {
 
 const togglePlay = () => {
   if (!videoRef.value) return;
-  if (isPlaying.value) {
-    videoRef.value.pause();
+  if (videoRef.value.paused) {
+    videoRef.value.play().catch(() => {
+      autoPlayBlocked.value = true;
+    });
   } else {
-    videoRef.value.play();
+    videoRef.value.pause();
   }
-  resetCursorTimer();
 };
 
 const toggleMute = () => {
   if (!videoRef.value) return;
-  if (volume.value === 0) {
-    volume.value = 100;
-  } else {
-    volume.value = 0;
-  }
+  volume.value = volume.value === 0 ? 100 : 0;
 };
 
-watch(volume, (newVolume) => {
-  if (videoRef.value) {
-    videoRef.value.volume = newVolume / 100;
-  }
-});
-
 const handleProgressChange = (value: number) => {
   if (!videoRef.value || !duration.value) return;
   const newTime = (value / 100) * duration.value;
@@ -277,10 +419,6 @@ const handleTimeUpdate = () => {
   if (!isDragging.value) {
     progress.value = (currentTime.value / duration.value) * 100;
   }
-
-  if (videoRef.value.buffered.length > 0) {
-    bufferedProgress.value = (videoRef.value.buffered.end(0) / duration.value) * 100;
-  }
 };
 
 const handleLoadedMetadata = () => {
@@ -288,50 +426,46 @@ const handleLoadedMetadata = () => {
   duration.value = videoRef.value.duration;
 };
 
-const resetControlsTimer = () => {
-  if (controlsTimer) {
-    clearTimeout(controlsTimer);
-  }
-  showControls.value = true;
-  controlsTimer = setTimeout(() => {
-    if (isPlaying.value) {
-      showControls.value = false;
+const handleEnded = () => {
+  if (playMode.value === PLAY_MODE.Single) {
+    if (videoRef.value) {
+      videoRef.value.currentTime = 0;
+      videoRef.value.play();
     }
-  }, 3000);
+  } else {
+    emit('next', (loading) => {
+      playLoading.value = loading;
+    });
+  }
 };
 
-const handleMouseMove = () => {
-  resetControlsTimer();
-  resetCursorTimer();
+const handlePrev = () => {
+  emit('prev', (loading) => {
+    playLoading.value = loading;
+  });
 };
 
-onMounted(() => {
-  document.addEventListener('mousemove', handleMouseMove);
-});
+const handleNext = () => {
+  emit('next', (loading) => {
+    playLoading.value = loading;
+  });
+};
 
-onUnmounted(() => {
-  document.removeEventListener('mousemove', handleMouseMove);
-  if (controlsTimer) {
-    clearTimeout(controlsTimer);
-  }
-  if (cursorTimer) {
-    clearTimeout(cursorTimer);
-  }
-});
+const togglePlayMode = () => {
+  playMode.value = playMode.value === PLAY_MODE.Auto ? PLAY_MODE.Single : PLAY_MODE.Auto;
+  showModeHint.value = true;
+  setTimeout(() => {
+    showModeHint.value = false;
+  }, 1500);
+};
 
-// 监听 currentMv 的变化
-watch(
-  () => props.currentMv,
-  async (newMv) => {
-    if (newMv) {
-      await loadMvUrl(newMv);
-    }
-  }
-);
+const toggleFullscreen = () => {
+  toggleFullscreenState();
+};
 
-const autoPlayBlocked = ref(false);
-
-const playLoading = ref(false);
+const handleClose = () => {
+  emit('update:show', false);
+};
 
 const loadMvUrl = async (mv: IMvItem) => {
   playLoading.value = true;
@@ -344,350 +478,108 @@ const loadMvUrl = async (mv: IMvItem) => {
       try {
         await videoRef.value.play();
       } catch (error) {
-        console.warn('自动播放失败，可能需要用户交互:', error);
+        console.warn('Auto-play blocked:', error);
         autoPlayBlocked.value = true;
       }
     }
   } catch (error) {
-    console.error('加载MV地址失败:', error);
+    console.error('Failed to load MV:', error);
   } finally {
     playLoading.value = false;
   }
 };
 
-const handleClose = () => {
-  emit('update:show', false);
+// Mouse/Touch Interaction
+const handleMouseMove = () => {
+  showCursor.value = true;
+  if (cursorTimer) clearTimeout(cursorTimer);
+  cursorTimer = setTimeout(() => {
+    if (isPlaying.value && !isDragging.value) {
+      showCursor.value = false;
+    }
+  }, 3000);
 };
 
-const handleEnded = () => {
-  if (playMode.value === PLAY_MODE.Single) {
-    // 单曲循环模式，重新加载当前MV
-    if (props.currentMv) {
-      loadMvUrl(props.currentMv);
-    }
+const handleContainerClick = () => {
+  if (isMobile.value) {
+    // logic handled by UI overlay
   } else {
-    // 自动播放模式，触发下一个
-    emit('next', (value: boolean) => {
-      nextLoading.value = value;
-    });
+    togglePlay();
   }
 };
 
-const togglePlayMode = () => {
-  playMode.value = playMode.value === PLAY_MODE.Auto ? PLAY_MODE.Single : PLAY_MODE.Auto;
-  showModeHint.value = true;
-  setTimeout(() => {
-    showModeHint.value = false;
-  }, 1500);
-};
+const handleDoubleClick = (e: MouseEvent) => {
+  if (!videoRef.value) return;
+  const width = containerRef.value?.clientWidth || 0;
+  const x = e.clientX;
 
-const isDragging = ref(false);
+  // Left side double click -> rewind 10s
+  // Right side double click -> forward 10s
+  // Center -> Toggle Fullscreen (standard behavior) but let's stick to 10s skip for utility
 
-// 添加全屏相关的状态和方法
-const videoContainerRef = ref<HTMLElement>();
-const isFullscreen = ref(false);
-
-// 检查是否支持全屏API
-const checkFullscreenAPI = () => {
-  const doc = document as any;
-  return {
-    requestFullscreen:
-      videoContainerRef.value?.requestFullscreen ||
-      (videoContainerRef.value as any)?.webkitRequestFullscreen ||
-      (videoContainerRef.value as any)?.mozRequestFullScreen ||
-      (videoContainerRef.value as any)?.msRequestFullscreen,
-    exitFullscreen:
-      doc.exitFullscreen ||
-      doc.webkitExitFullscreen ||
-      doc.mozCancelFullScreen ||
-      doc.msExitFullscreen,
-    fullscreenElement:
-      doc.fullscreenElement ||
-      doc.webkitFullscreenElement ||
-      doc.mozFullScreenElement ||
-      doc.msFullscreenElement,
-    fullscreenEnabled:
-      doc.fullscreenEnabled ||
-      doc.webkitFullscreenEnabled ||
-      doc.mozFullScreenEnabled ||
-      doc.msFullscreenEnabled
-  };
-};
-
-// 修改切换全屏状态的方法
-const toggleFullscreen = async () => {
-  const api = checkFullscreenAPI();
-
-  if (!api.fullscreenEnabled) {
-    console.warn('全屏API不可用');
+  if (x < width / 3) {
+    videoRef.value.currentTime = Math.max(0, videoRef.value.currentTime - 10);
+    doubleTapAction.value = 'rewind';
+  } else if (x > (width * 2) / 3) {
+    videoRef.value.currentTime = Math.min(duration.value, videoRef.value.currentTime + 10);
+    doubleTapAction.value = 'forward';
+  } else {
+    toggleFullscreen();
     return;
   }
 
-  try {
-    if (!api.fullscreenElement) {
-      await videoContainerRef.value?.requestFullscreen();
-      isFullscreen.value = true;
-    } else {
-      await document.exitFullscreen();
-      isFullscreen.value = false;
+  setTimeout(() => {
+    doubleTapAction.value = null;
+  }, 500);
+};
+
+// Watchers
+watch(volume, (newVolume) => {
+  if (videoRef.value) videoRef.value.volume = newVolume / 100;
+});
+
+watch(
+  () => props.currentMv,
+  async (newMv) => {
+    if (newMv) await loadMvUrl(newMv);
+  }
+);
+
+watch(
+  () => props.show,
+  (show) => {
+    if (!show && videoRef.value) {
+      videoRef.value.pause();
     }
-  } catch (error) {
-    console.error('切换全屏失败:', error);
   }
-};
-
-// 监听全屏状态变化
-const handleFullscreenChange = () => {
-  const api = checkFullscreenAPI();
-  isFullscreen.value = !!api.fullscreenElement;
-};
-
-// 在组件挂载时添加全屏变化监听
-onMounted(() => {
-  document.addEventListener('fullscreenchange', handleFullscreenChange);
-  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
-  document.addEventListener('MSFullscreenChange', handleFullscreenChange);
-});
-
-// 在组件卸载时移除监听
-onUnmounted(() => {
-  document.removeEventListener('fullscreenchange', handleFullscreenChange);
-  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
-  document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
-  document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
-});
-
-// 添加键盘快捷键支持
-const handleKeyPress = (e: KeyboardEvent) => {
-  if (e.key === 'f' || e.key === 'F') {
-    toggleFullscreen();
-  }
-};
-
-onMounted(() => {
-  // 添加到现有的 onMounted 中
-  document.addEventListener('keydown', handleKeyPress);
-});
+);
 
 onUnmounted(() => {
-  // 添加到现有的 onUnmounted 中
-  document.removeEventListener('keydown', handleKeyPress);
+  if (cursorTimer) clearTimeout(cursorTimer);
 });
-
-// 添加提示状态
-const showModeHint = ref(false);
-
-// 添加加载状态
-const prevLoading = ref(false);
-const nextLoading = ref(false);
-
-// 添加处理函数
-const handlePrev = () => {
-  prevLoading.value = true;
-  emit('prev', (value: boolean) => {
-    prevLoading.value = value;
-  });
-};
-
-const handleNext = () => {
-  nextLoading.value = true;
-  emit('next', (value: boolean) => {
-    nextLoading.value = value;
-  });
-};
-
-// 添加鼠标显示状态
-const showCursor = ref(true);
-let cursorTimer: NodeJS.Timeout | null = null;
-
-// 添加重置鼠标计时器的函数
-const resetCursorTimer = () => {
-  if (cursorTimer) {
-    clearTimeout(cursorTimer);
-  }
-  showCursor.value = true;
-  if (isPlaying.value && !showControls.value) {
-    cursorTimer = setTimeout(() => {
-      showCursor.value = false;
-    }, 3000);
-  }
-};
-
-// 监听播放状态变化
-watch(isPlaying, (newValue) => {
-  if (!newValue) {
-    showCursor.value = true;
-    if (cursorTimer) {
-      clearTimeout(cursorTimer);
-    }
-  } else {
-    resetCursorTimer();
-  }
-});
-
-// 添加控制栏状态监听
-watch(showControls, (newValue) => {
-  if (newValue) {
-    showCursor.value = true;
-    if (cursorTimer) {
-      clearTimeout(cursorTimer);
-    }
-  } else {
-    resetCursorTimer();
-  }
-});
-
-const isMobile = computed(() => false); // TODO: 从 settings store 获取
 </script>
 
-<style scoped lang="scss">
-.mv-detail {
-  @apply h-full bg-light dark:bg-black;
-
-  &-title {
-    @apply fixed top-0 left-0 right-0 p-4 z-10 transition-opacity duration-300;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
-
-    .title {
-      @apply text-white text-lg font-bold;
-    }
-  }
+<style scoped>
+/* Custom Slider Styles to override Naive UI default for cleaner look */
+.mv-slider {
+  --n-rail-height: 4px !important;
+  --n-rail-color: rgba(255, 255, 255, 0.2) !important;
+  --n-rail-color-hover: rgba(255, 255, 255, 0.3) !important;
+  --n-fill-color: #10b981 !important;
+  --n-fill-color-hover: #34d399 !important;
+  --n-handle-size: 12px !important;
+  --n-handle-color: #fff !important;
 }
 
-.video-container {
-  @apply h-full w-full relative;
-
-  .video-player {
-    @apply h-full w-full object-contain bg-black;
-  }
-
-  .play-hint {
-    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-50;
-    .n-button {
-      @apply text-white hover:text-green-500 transition-colors;
-    }
-  }
-
-  .custom-controls {
-    @apply absolute bottom-0 left-0 right-0 p-4 transition-opacity duration-300;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
-
-    .controls-main {
-      @apply flex justify-between items-center;
-
-      .left-controls,
-      .right-controls {
-        @apply flex items-center gap-2;
-
-        .n-button {
-          @apply text-white hover:text-green-500 transition-colors;
-        }
-
-        .time-display {
-          @apply text-white text-sm ml-4;
-        }
-      }
-    }
-  }
+.mv-volume-slider {
+  --n-rail-height: 4px !important;
+  --n-rail-color: rgba(255, 255, 255, 0.2) !important;
+  --n-fill-color: #fff !important;
+  --n-handle-size: 10px !important;
 }
 
-.mode-hint {
-  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center;
-
-  .mode-icon {
-    @apply text-white mb-2;
-  }
-
-  .mode-text {
-    @apply text-white text-sm;
-  }
-}
-
-.custom-slider {
-  :deep(.n-slider) {
-    --n-rail-height: 4px;
-    --n-rail-color: theme('colors.gray.200');
-    --n-rail-color-dark: theme('colors.gray.700');
-    --n-fill-color: theme('colors.green.500');
-    --n-handle-size: 12px;
-    --n-handle-color: theme('colors.green.500');
-
-    &.n-slider--vertical {
-      height: 100%;
-
-      .n-slider-rail {
-        width: 4px;
-      }
-
-      &:hover {
-        .n-slider-rail {
-          width: 6px;
-        }
-
-        .n-slider-handle {
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
-
-    .n-slider-rail {
-      @apply overflow-hidden transition-all duration-200;
-      @apply bg-gray-500 dark:bg-dark-300 bg-opacity-10 !important;
-    }
-
-    .n-slider-handle {
-      @apply transition-all duration-200;
-      opacity: 0;
-    }
-
-    &:hover .n-slider-handle {
-      opacity: 1;
-    }
-  }
-}
-
-.progress-bar {
-  @apply mb-4;
-
-  .progress-rail {
-    @apply relative w-full h-1 bg-gray-600;
-
-    .progress-buffer {
-      @apply absolute top-0 left-0 h-full bg-gray-400;
-    }
-  }
-}
-
-.volume-control {
-  @apply flex items-center gap-2;
-
-  .volume-slider {
-    width: 100px;
-  }
-}
-
-.controls-hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.cursor-hidden {
+/* Hide cursor when needed */
+.cursor-none {
   cursor: none;
 }
-
-.title-hidden {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>
diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue
index 3fd0e09..e555854 100644
--- a/src/renderer/components/player/MiniPlayBar.vue
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -130,7 +130,7 @@ import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
 import { audioService } from '@/services/audioService';
-import { isBilibiliIdMatch, usePlayerStore, useSettingsStore } from '@/store';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/types/music';
 import { getImgUrl } from '@/utils';
 
@@ -200,26 +200,13 @@ const handleVolumeWheel = (e: WheelEvent) => {
 
 // 收藏相关
 const isFavorite = computed(() => {
-  // 对于B站视频，使用ID匹配函数
-  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
-  }
-
-  // 非B站视频直接比较ID
   return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
 
-  // 处理B站视频的收藏ID
   let favoriteId = playMusic.value.id;
-  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    // 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
-    if (!String(favoriteId).includes('--')) {
-      favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
-    }
-  }
 
   if (isFavorite.value) {
     playerStore.removeFromFavorite(favoriteId);
diff --git a/src/renderer/components/player/PlayBar.vue b/src/renderer/components/player/PlayBar.vue
index c28b376..dcf9535 100644
--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -184,7 +184,7 @@ import {
 import { useArtist } from '@/hooks/useArtist';
 import { usePlayMode } from '@/hooks/usePlayMode';
 import { audioService } from '@/services/audioService';
-import { isBilibiliIdMatch, usePlayerStore } from '@/store/modules/player';
+import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 
@@ -338,12 +338,6 @@ const setMusicFull = () => {
 
 const isFavorite = computed(() => {
   if (!playMusic || !playMusic.value) return false;
-  // 对于B站视频，使用ID匹配函数
-  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
-  }
-
-  // 非B站视频直接比较ID
   return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
@@ -351,14 +345,7 @@ const toggleFavorite = async (e: Event) => {
   console.log('playMusic.value', playMusic.value);
   e.stopPropagation();
 
-  // 处理B站视频的收藏ID
   let favoriteId = playMusic.value.id;
-  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    // 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
-    if (!String(favoriteId).includes('--')) {
-      favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
-    }
-  }
 
   if (isFavorite.value) {
     playerStore.removeFromFavorite(favoriteId);
diff --git a/src/renderer/components/player/ReparsePopover.vue b/src/renderer/components/player/ReparsePopover.vue
index 1f02f38..a781723 100644
--- a/src/renderer/components/player/ReparsePopover.vue
+++ b/src/renderer/components/player/ReparsePopover.vue
@@ -30,7 +30,7 @@
             class="source-button flex items-center p-2 rounded-lg cursor-pointer transition-all duration-200 bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300"
             :class="{
               'bg-green-50 dark:bg-green-900/20 text-green-500': isCurrentSource(source.value),
-              'opacity-50 cursor-not-allowed': isReparsing || playMusic.source === 'bilibili'
+              'opacity-50 cursor-not-allowed': isReparsing
             }"
             @click="directReparseMusic(source.value)"
           >
@@ -55,9 +55,6 @@
           </div>
         </div>
       </div>
-      <div v-if="playMusic.source === 'bilibili'" class="text-red-500 text-sm">
-        {{ t('player.reparse.bilibiliNotSupported') }}
-      </div>
       <!-- 清除自定义音源 -->
       <div
         class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer"
@@ -103,7 +100,6 @@ const musicSourceOptions = ref([
   { label: 'MiGu', value: 'migu' as Platform },
   { label: 'KuGou', value: 'kugou' as Platform },
   { label: 'pyncmd', value: 'pyncmd' as Platform },
-  { label: 'Bilibili', value: 'bilibili' as Platform },
   { label: 'GdMuisc', value: 'gdmusic' as Platform }
 ]);
 
@@ -120,7 +116,6 @@ const getSourceIcon = (source: Platform) => {
     qq: 'ri-qq-fill',
     joox: 'ri-disc-fill',
     pyncmd: 'ri-netease-cloud-music-fill',
-    bilibili: 'ri-bilibili-fill',
     gdmusic: 'ri-google-fill',
     kuwo: 'ri-music-fill',
     lxMusic: 'ri-leaf-fill'
@@ -149,7 +144,7 @@ const clearCustomSource = () => {
 
 // 直接重新解析当前歌曲
 const directReparseMusic = async (source: Platform) => {
-  if (isReparsing.value || playMusic.value.source === 'bilibili') {
+  if (isReparsing.value) {
     return;
   }