fix(metronome): 视频区域消除黑边 + PIP 遮罩融入画面

黑边原因:容器 280×240 跟 video 内容 1:1 不匹配,
微信 native video 默认 #000 底色从两侧露出来。

修复:
- walker-box 改成 260×260 正方形,跟视频比例一致,
  contain 模式下视频撑满整个容器,左右没缝隙
- 容器和 video 的 background 都设成 #e8ecf2
  (匹配视频右上角浅灰白渐变),万一还有 1rpx 缝也不刺眼
- 容器加微妙的 box-shadow,跟下方档位卡片视觉对齐

PIP/小窗按钮遮罩融入视频画面:
- cover-view 颜色从页面色 #f8fafc 改成 #dde2eb
  (匹配视频右上角的浅灰渐变中间色)
- 盖在 video 上就像视频画面的一部分,看不出是色块
- 尺寸缩到 80×56 刚好覆盖 PIP 按钮,不多遮挡画面
- 左下加 18rpx 圆角让边缘柔和过渡

Co-authored-by: Cursor <cursoragent@cursor.com>

TUICallKit-Vue3/pages/training/metronome.vue

@@ -431,39 +431,45 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
  * ============================================================ */
 .walker {
     width: 100%;
-    height: 240rpx;
+    height: 260rpx;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .walker-box {
-    /* 矩形容器,小人完整显示,不再裁切
+    /* 1:1 矩形,跟 video 内容比例一致,消除左右黑边
-       background 跟页面色一致,让 video 灰白渐变边自然融入背景 */
+       background 设成 video 内容右上角的浅灰白色,
+       万一还有 1rpx 缝隙也不会出现刺眼黑边 */
     position: relative;
-    width: 280rpx;
+    width: 260rpx;
-    height: 240rpx;
+    height: 260rpx;
-    background: $bg-color;
+    background: #e8ecf2;
     border-radius: 24rpx;
     overflow: hidden;
+    box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.06);
 }
 
 .runner-video {
     width: 100%;
     height: 100%;
-    background: transparent;
+    /* 微信 native video 自身默认是 #000 黑底,父容器 bg 在 web 看不到,
+       只能让 video 占满 + 让父 bg 跟 video 内容色融合 */
+    background: #e8ecf2;
 }
 
 /* 覆盖在 video 右上角原生 PIP/小窗按钮上的色块
+   颜色取 video 内容右上角的浅灰白渐变(#dde2eb 左右),让色块融入视频画面
    仅小程序端有效(cover-view 是小程序唯一能盖住 native 组件的元素) */
 .pip-mask {
     position: absolute;
     top: 0;
     right: 0;
-    width: 86rpx;
+    width: 80rpx;
-    height: 64rpx;
+    height: 56rpx;
-    background: $bg-color;
+    background-color: #dde2eb;
-    border-bottom-left-radius: 24rpx;
+    border-bottom-left-radius: 18rpx;
+    border-top-right-radius: 24rpx;
 }
 
 /* ============================================================