From 3f0087bef816e201c1432673e505d5266e17a806 Mon Sep 17 00:00:00 2001
From: MoYingJi <moyingjiaw@outlook.com>
Date: Thu, 30 Apr 2026 05:03:56 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix(mobile):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=AD=8C=E8=AF=8D=E7=95=8C=E9=9D=A2=20mix-bl?=
 =?UTF-8?q?end-mode=20=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI 改的，我也不懂喵（
---
 src/components/Player/FullPlayerMobile.vue | 47 ++++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/Player/FullPlayerMobile.vue b/src/components/Player/FullPlayerMobile.vue
index dbb73a2e9..04504856d 100644
--- a/src/components/Player/FullPlayerMobile.vue
+++ b/src/components/Player/FullPlayerMobile.vue
@@ -151,12 +151,20 @@
             />
           </div>
         </div>
-        <div class="lyric-main">
-          <PlayerLyric />
-        </div>
+        <div class="lyric-main" />
       </div>
     </div>
 
+    <!-- 独立歌词覆盖层（提取到 mobile-content 之外以避免 transform stacking context 阻断 mix-blend-mode） -->
+    <div
+      v-if="hasLyric"
+      class="lyric-overlay"
+      :class="{ swiping: isSwiping }"
+      :style="{ transform: lyricPageTransform }"
+    >
+      <PlayerLyric />
+    </div>
+
     <!-- 页面指示器 -->
     <div class="pagination" v-if="hasLyric">
       <div
@@ -230,6 +238,23 @@ const { direction, isSwiping, lengthX } = useSwipe(mobileStart, {
   },
 });
 
+// 计算歌词覆盖层的位移（与 mobile-content 内歌词页视觉同步，但在 stacking context 之外）
+const lyricPageTransform = computed(() => {
+  // pageIndex=0 时覆盖层在屏幕右侧，pageIndex=1 时回到屏幕内
+  const baseOffset = (1 - pageIndex.value) * 100;
+  if (!isSwiping.value || !hasLyric.value) {
+    return `translateX(${baseOffset}%)`;
+  }
+  let pixelOffset = lengthX.value;
+  if (pageIndex.value === 0 && pixelOffset < 0) {
+    pixelOffset = pixelOffset * 0.3;
+  }
+  if (pageIndex.value === 1 && pixelOffset > 0) {
+    pixelOffset = pixelOffset * 0.3;
+  }
+  return `translateX(calc(${baseOffset}% - ${pixelOffset}px))`;
+});
+
 // 计算实时的变换位置
 const contentTransform = computed(() => {
   const baseOffset = pageIndex.value * 50; // 百分比
@@ -536,6 +561,22 @@ const contentTransform = computed(() => {
       }
     }
   }
+  // 歌词覆盖层：提取到 mobile-content 之外，使 mix-blend-mode 能与实际模糊背景混合
+  .lyric-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // 顶部留出 lyric-page padding-top(60px) + lyric-header 高度(约 80px)
+    padding: 140px 24px 0;
+    box-sizing: border-box;
+    mix-blend-mode: var(--lyric-blend-mode);
+    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+    &.swiping {
+      transition: none;
+    }
+  }
   .pagination {
     position: absolute;
     bottom: 24px;

From 4d78e24895ee9f49eb324fd5621f7df66664fbcd Mon Sep 17 00:00:00 2001
From: MoYingJi <moyingjiaw@outlook.com>
Date: Thu, 30 Apr 2026 05:49:56 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(mobile):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=AD=8C=E8=AF=8D=E7=95=8C=E9=9D=A2=E6=A8=AA?=
 =?UTF-8?q?=E7=BA=B5=E5=90=91=E6=BB=91=E5=8A=A8=E5=90=8C=E6=97=B6=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

横纵向滑动会同时进行，如我想横向滑动切换到主页面却滑动了歌词，我想纵向滑动歌词却进行了横向滑动，导致体验不佳

神奇的 AI 改的，我也不懂喵（
---
 src/components/Player/FullPlayerMobile.vue | 95 +++++++++++++++++-----
 1 file changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/components/Player/FullPlayerMobile.vue b/src/components/Player/FullPlayerMobile.vue
index 04504856d..8f6a3af1b 100644
--- a/src/components/Player/FullPlayerMobile.vue
+++ b/src/components/Player/FullPlayerMobile.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="full-player-mobile" ref="mobileStart">
+  <div
+    class="full-player-mobile"
+    ref="mobileStart"
+    @touchstart.capture="onTouchStart"
+    @touchmove.capture="onTouchMove"
+    @touchend.capture="onTouchEnd"
+  >
     <!-- 顶部功能栏 -->
     <div class="top-bar">
       <!-- 收起按钮 -->
@@ -10,7 +16,7 @@
 
     <!-- 主内容 -->
     <div
-      :class="['mobile-content', { swiping: isSwiping }]"
+      :class="['mobile-content', { swiping: isSwipingX }]"
       :style="{ transform: contentTransform }"
       @click.stop
     >
@@ -159,7 +165,7 @@
     <div
       v-if="hasLyric"
       class="lyric-overlay"
-      :class="{ swiping: isSwiping }"
+      :class="{ swiping: isSwipingX }"
       :style="{ transform: lyricPageTransform }"
     >
       <PlayerLyric />
@@ -178,7 +184,6 @@
 </template>
 
 <script setup lang="ts">
-import { useSwipe } from "@vueuse/core";
 import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { usePlayerController } from "@/core/player/PlayerController";
 import { useTimeFormat } from "@/composables/useTimeFormat";
@@ -215,34 +220,80 @@ watch(hasLyric, (val) => {
 
 // 滑动偏移量
 const swipeOffset = ref(0);
+// 轴锁定：null=未确定, 'x'=水平翻页, 'y'=纵向滚动
+const axisLock = ref<"x" | "y" | null>(null);
+const isSwiping = ref(false);
+const lengthX = ref(0);
 
-const { direction, isSwiping, lengthX } = useSwipe(mobileStart, {
-  threshold: 10,
-  onSwipe: () => {
-    if (!hasLyric.value) return;
-    // 为正表示向左滑，为负表示向右滑
-    swipeOffset.value = lengthX.value;
-  },
-  onSwipeEnd: () => {
-    if (!hasLyric.value) {
-      swipeOffset.value = 0;
-      return;
+let startX = 0;
+let startY = 0;
+
+const onTouchStart = (e: TouchEvent) => {
+  if (!hasLyric.value) return;
+  startX = e.touches[0].clientX;
+  startY = e.touches[0].clientY;
+  axisLock.value = null;
+  isSwiping.value = true;
+  lengthX.value = 0;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  if (!hasLyric.value || !isSwiping.value) return;
+
+  const currentX = e.touches[0].clientX;
+  const currentY = e.touches[0].clientY;
+  const deltaX = startX - currentX; // 左滑为正，符合 lengthX 语义
+  const deltaY = startY - currentY;
+
+  if (axisLock.value === null) {
+    if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
+      axisLock.value = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+      // 确认是水平滑动时，在捕获阶段下发 touchcancel 终止子组件(如AMLL)内部的滑动状态
+      if (axisLock.value === "x" && e.target instanceof EventTarget) {
+        e.target.dispatchEvent(new TouchEvent("touchcancel", { bubbles: true, cancelable: true }));
+      }
     }
+  }
+
+  if (axisLock.value === "x") {
+    // 拦截后续的 touchmove 事件，避免歌词收到滑动导致滚动
+    e.preventDefault();
+    e.stopPropagation();
+    lengthX.value = deltaX;
+    swipeOffset.value = lengthX.value;
+  }
+};
+
+const onTouchEnd = (e: TouchEvent) => {
+  if (!hasLyric.value || !isSwiping.value) return;
+  isSwiping.value = false;
+
+  if (axisLock.value === "x") {
+    e.stopPropagation(); // 防止拦截事件造成点击误触
+    const finalLengthX = startX - e.changedTouches[0].clientX;
+    const direction = finalLengthX > 0 ? "left" : "right";
+
     // 超过阈值则切换页面
-    if (direction.value === "left" && lengthX.value > 100) {
+    if (direction === "left" && finalLengthX > 100) {
       pageIndex.value = 1;
-    } else if (direction.value === "right" && lengthX.value < -100) {
+    } else if (direction === "right" && finalLengthX < -100) {
       pageIndex.value = 0;
     }
-    swipeOffset.value = 0;
-  },
-});
+  }
+  
+  swipeOffset.value = 0;
+  axisLock.value = null;
+  lengthX.value = 0;
+};
+
+// 仅水平轴锁定时才视为正在水平滑动
+const isSwipingX = computed(() => isSwiping.value && axisLock.value === "x");
 
 // 计算歌词覆盖层的位移（与 mobile-content 内歌词页视觉同步，但在 stacking context 之外）
 const lyricPageTransform = computed(() => {
   // pageIndex=0 时覆盖层在屏幕右侧，pageIndex=1 时回到屏幕内
   const baseOffset = (1 - pageIndex.value) * 100;
-  if (!isSwiping.value || !hasLyric.value) {
+  if (!isSwipingX.value || !hasLyric.value) {
     return `translateX(${baseOffset}%)`;
   }
   let pixelOffset = lengthX.value;
@@ -258,7 +309,7 @@ const lyricPageTransform = computed(() => {
 // 计算实时的变换位置
 const contentTransform = computed(() => {
   const baseOffset = pageIndex.value * 50; // 百分比
-  if (!isSwiping.value || !hasLyric.value) {
+  if (!isSwipingX.value || !hasLyric.value) {
     return `translateX(-${baseOffset}%)`;
   }
   let pixelOffset = lengthX.value;

From 5a0476c7631ffaa69725546161bb4b42c1962449 Mon Sep 17 00:00:00 2001
From: MoYingJi <moyingjiaw@outlook.com>
Date: Thu, 30 Apr 2026 23:53:16 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(mobile):=20=E4=BF=AE=E5=A4=8D=E5=AE=A1?=
 =?UTF-8?q?=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player/FullPlayerMobile.vue | 38 ++++++++++++++--------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Player/FullPlayerMobile.vue b/src/components/Player/FullPlayerMobile.vue
index 8f6a3af1b..f1b4e23f6 100644
--- a/src/components/Player/FullPlayerMobile.vue
+++ b/src/components/Player/FullPlayerMobile.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="full-player-mobile"
-    ref="mobileStart"
     @touchstart.capture="onTouchStart"
     @touchmove.capture="onTouchMove"
     @touchend.capture="onTouchEnd"
@@ -130,7 +129,7 @@
 
       <!-- 歌词页 -->
       <div class="page lyric-page">
-        <div class="lyric-header">
+        <div class="lyric-header" ref="lyricHeaderRef">
           <s-image :src="musicStore.getSongCover('s')" class="lyric-cover" />
           <div class="lyric-info">
             <div class="name text-hidden">
@@ -166,7 +165,7 @@
       v-if="hasLyric"
       class="lyric-overlay"
       :class="{ swiping: isSwipingX }"
-      :style="{ transform: lyricPageTransform }"
+      :style="{ transform: lyricPageTransform, paddingTop: lyricOverlayPaddingTop }"
     >
       <PlayerLyric />
     </div>
@@ -184,6 +183,7 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize } from "@vueuse/core";
 import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { usePlayerController } from "@/core/player/PlayerController";
 import { useTimeFormat } from "@/composables/useTimeFormat";
@@ -198,7 +198,6 @@ const dataStore = useDataStore();
 const player = usePlayerController();
 const { timeDisplay, toggleTimeFormat } = useTimeFormat();
 
-const mobileStart = ref<HTMLElement | null>(null);
 const pageIndex = ref(0);
 
 const hasLyric = computed(() => {
@@ -218,8 +217,14 @@ watch(hasLyric, (val) => {
   if (!val) pageIndex.value = 0;
 });
 
-// 滑动偏移量
-const swipeOffset = ref(0);
+// 动态计算歌词覆盖层高度以对齐
+const lyricHeaderRef = ref<HTMLElement | null>(null);
+const { height: lyricHeaderHeight } = useElementSize(lyricHeaderRef);
+const lyricOverlayPaddingTop = computed(() => {
+  // 60px (lyric-page padding-top) + header height + 20px (margin-bottom)
+  return lyricHeaderHeight.value ? `${60 + lyricHeaderHeight.value + 20}px` : "140px";
+});
+
 // 轴锁定：null=未确定, 'x'=水平翻页, 'y'=纵向滚动
 const axisLock = ref<"x" | "y" | null>(null);
 const isSwiping = ref(false);
@@ -250,7 +255,16 @@ const onTouchMove = (e: TouchEvent) => {
       axisLock.value = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
       // 确认是水平滑动时，在捕获阶段下发 touchcancel 终止子组件(如AMLL)内部的滑动状态
       if (axisLock.value === "x" && e.target instanceof EventTarget) {
-        e.target.dispatchEvent(new TouchEvent("touchcancel", { bubbles: true, cancelable: true }));
+        const touchList = e.touches;
+        e.target.dispatchEvent(
+          new TouchEvent("touchcancel", {
+            bubbles: true,
+            cancelable: true,
+            touches: Array.from(touchList),
+            targetTouches: Array.from(e.targetTouches),
+            changedTouches: Array.from(e.changedTouches),
+          }),
+        );
       }
     }
   }
@@ -260,7 +274,6 @@ const onTouchMove = (e: TouchEvent) => {
     e.preventDefault();
     e.stopPropagation();
     lengthX.value = deltaX;
-    swipeOffset.value = lengthX.value;
   }
 };
 
@@ -269,7 +282,8 @@ const onTouchEnd = (e: TouchEvent) => {
   isSwiping.value = false;
 
   if (axisLock.value === "x") {
-    e.stopPropagation(); // 防止拦截事件造成点击误触
+    // 防止拦截事件造成点击误触
+    e.preventDefault();
     const finalLengthX = startX - e.changedTouches[0].clientX;
     const direction = finalLengthX > 0 ? "left" : "right";
 
@@ -280,8 +294,7 @@ const onTouchEnd = (e: TouchEvent) => {
       pageIndex.value = 0;
     }
   }
-  
-  swipeOffset.value = 0;
+
   axisLock.value = null;
   lengthX.value = 0;
 };
@@ -619,8 +632,7 @@ const contentTransform = computed(() => {
     left: 0;
     width: 100%;
     height: 100%;
-    // 顶部留出 lyric-page padding-top(60px) + lyric-header 高度(约 80px)
-    padding: 140px 24px 0;
+    padding: 0 24px;
     box-sizing: border-box;
     mix-blend-mode: var(--lyric-blend-mode);
     transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);