From ed5285b58a14d03b6165575184c0701f4880543a Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 17:47:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(metronome):=20=E8=A7=86=E9=A2=91=E6=94=B9?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=E5=AE=8C=E6=95=B4=E6=98=BE=E7=A4=BA,cover-vi?=
 =?UTF-8?q?ew=20=E6=8C=A1=E4=BD=8F=20PIP=20=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前圆形蒙版 + scale(1.4) 把小人手臂和头部裁掉一部分,
改成矩形容器:
- walker-box 280×240 微圆角矩形,object-fit:contain
  小人四肢完整露出,不再被切
- 容器 background 跟页面色一致,video 自带灰白边自然融入
- 移除 transform:scale 缩放(原本只为推 PIP 按钮出圆外)

PIP/小窗按钮处理改为 cover-view:
- cover-view 是小程序唯一能覆盖在 native video 上的元素
- 右上角放 86×64 跟背景同色的色块,挡住原生按钮
- #ifdef MP-WEIXIN 条件编译,只在小程序端启用

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 TUICallKit-Vue3/pages/training/metronome.vue | 47 ++++++++++++--------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue
index a2c9eb94..997c18ff 100644
--- a/TUICallKit-Vue3/pages/training/metronome.vue
+++ b/TUICallKit-Vue3/pages/training/metronome.vue
@@ -17,9 +17,9 @@
             </view>
         </view>
 
-        <!-- ===== 跑步小人(无边框,跟白底融合) ===== -->
+        <!-- ===== 跑步小人(矩形完整显示,跟白底融合) ===== -->
         <view class="walker">
-            <view class="walker-clip">
+            <view class="walker-box">
                 <video
                     id="runner-video"
                     class="runner-video"
@@ -34,10 +34,15 @@
                     :enable-progress-gesture="false"
                     :show-mute-btn="false"
                     :picture-in-picture-mode="[]"
-                    object-fit="cover"
+                    object-fit="contain"
                     @error="onVideoError"
                     @loadedmetadata="onVideoLoaded"
                 />
+                <!-- 微信原生 video 右上角的 PIP/小窗按钮无法靠属性彻底关掉,
+                     用 cover-view 覆盖一个跟背景同色的小色块盖住它 -->
+                <!-- #ifdef MP-WEIXIN -->
+                <cover-view class="pip-mask">&nbsp;</cover-view>
+                <!-- #endif -->
             </view>
         </view>
 
@@ -426,35 +431,41 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
  * ============================================================ */
 .walker {
     width: 100%;
-    height: 220rpx;
+    height: 240rpx;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.walker-clip {
-    /* 圆形蒙版裁掉 video 的灰白边 + 隐藏右上角原生小窗按钮
-       外圈柔化阴影颜色等于页面背景,圆形边缘自然消融到背景里
-       视觉上不再有硬切感的"边框"
-    */
-    width: 220rpx;
-    height: 220rpx;
-    border-radius: 50%;
+.walker-box {
+    /* 矩形容器,小人完整显示,不再裁切
+       background 跟页面色一致,让 video 灰白渐变边自然融入背景 */
+    position: relative;
+    width: 280rpx;
+    height: 240rpx;
+    background: $bg-color;
+    border-radius: 24rpx;
     overflow: hidden;
-    box-shadow:
-        0 0 0 6rpx $bg-color,
-        0 0 30rpx 12rpx $bg-color;
 }
 
 .runner-video {
     width: 100%;
     height: 100%;
-    /* scale 1.4: 把 video 内容放大,让自带的灰白渐变边和右上角原生
-       PIP/小窗按钮全部被推到圆形外,被 overflow:hidden 切掉 */
-    transform: scale(1.4);
     background: transparent;
 }
 
+/* 覆盖在 video 右上角原生 PIP/小窗按钮上的色块
+   仅小程序端有效(cover-view 是小程序唯一能盖住 native 组件的元素) */
+.pip-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 86rpx;
+    height: 64rpx;
+    background: $bg-color;
+    border-bottom-left-radius: 24rpx;
+}
+
 /* ============================================================
  * 三档位推荐
  * ============================================================ */