fix(mobile): 修复移动端歌词混合模式和滚动行为

[MoYingJi]

详情可以看每个 commit

有 99% 的是 AI 写的（

[gemini-code-assist]

Code Review

This pull request replaces the useSwipe hook with a custom touch handling implementation to support axis locking, ensuring horizontal page switching does not conflict with vertical scrolling. It also moves the lyric component to a separate overlay to resolve mix-blend-mode issues caused by the transform stacking context. Key feedback includes ensuring touchmove listeners are not passive to allow event prevention, managing pointer-events on the new overlay to avoid blocking underlying UI elements, providing full touch data when dispatching touchcancel, and using preventDefault on touchend to avoid ghost clicks.

[gemini-code-assist]

在现代移动端浏览器中，touchmove 事件监听器默认通常是 passive 的，这会导致在 onTouchMove 中调用 e.preventDefault() 失效并触发控制台警告。由于 Vue 模板目前没有直接支持非 passive 监听器的修饰符，建议在 onMounted 生命周期钩子中通过 addEventListener(..., { capture: true, passive: false }) 手动绑定这些事件，以确保能够正确拦截滚动。

[gemini-code-assist]

lyric-overlay 作为一个覆盖在整个播放器上方的绝对定位层，其 padding-top 区域虽然在视觉上是透明的，但默认仍会拦截触摸事件。这会导致位于其下方的 lyric-header 中的操作按钮（如喜欢按钮）无法被点击。建议为 .lyric-overlay 设置 pointer-events: none，并为其内部内容恢复点击事件。

  .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);
    pointer-events: none;
    & > * {
      pointer-events: auto;
    }
    &.swiping {
      transition: none;
    }
  }

[Copilot]

Pull request overview

该 PR 针对移动端全屏播放器的歌词页做了交互与渲染层级调整，主要解决歌词 mix-blend-mode 被 transform 形成的 stacking context 阻断，以及歌词页横向翻页与纵向滚动手势冲突的问题。

Changes:

• 将歌词组件从 mobile-content 内抽离为独立的覆盖层（lyric-overlay），以避免 transform 阻断混合模式效果
• 用自定义 touch 轴锁定逻辑替换 @vueuse/core 的 useSwipe，区分横向翻页与纵向滚动
• 调整滑动状态类名与 transform 计算，使歌词覆盖层与页面滑动视觉同步