style(metronome): 脚印重画为葫芦型,告别椭圆感

之前的 SVG path 内外侧太对称,看起来还是椭圆。重新设计:

- viewBox 100x140 → 100x150 (拉长比例 1:1.5,更"瘦长")
- 主体 path 内侧凹陷 + 外侧饱满,形成葫芦轮廓:
  · 内侧足弓 x 收到 22 (凹陷)
  · 外侧饱满 x 推到 78 (凸出)
  · 前足比脚跟略宽,模拟真实脚型
- 5 个脚趾:
  · 拇趾 rotate(-18°) 内侧明显倾斜
  · 小趾 rotate(+22°) 外侧外展
  · cy 沿弧线 22→11→9→13→20,形成自然弧形
  · rx 从 6.5 递减到 3.5,大小过渡更自然
- 容器尺寸从 100x140 → 96x144,匹配 SVG 新比例
- walker 高度 200→220rpx 以容纳抬脚动画上限

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

TUICallKit-Vue3/pages/training/metronome.vue

@@ -412,7 +412,7 @@ $radius-btn: 20rpx;
 .walker {
     position: relative;
     width: 100%;
-    height: 200rpx;
+    height: 220rpx;
     display: flex;
     justify-content: center;
     align-items: flex-end;
@@ -420,7 +420,7 @@ $radius-btn: 20rpx;
 
 .walker .ground {
     position: absolute;
-    bottom: 18rpx;
+    bottom: 22rpx;
     left: 10%;
     right: 10%;
     height: 1rpx;
@@ -438,9 +438,9 @@ $radius-btn: 20rpx;
  * ============================================================ */
 .foot {
     position: absolute;
-    bottom: 18rpx;
-    width: 100rpx;
-    height: 140rpx;
+    bottom: 22rpx;
+    width: 96rpx;
+    height: 144rpx;
 
     .footprint {
         display: block;
@@ -454,7 +454,7 @@ $radius-btn: 20rpx;
         bottom: -6rpx;
         left: 50%;
         transform: translateX(-50%);
-        width: 76rpx;
+        width: 70rpx;
         height: 8rpx;
         background: radial-gradient(
             ellipse at center,

TUICallKit-Vue3/static/training/footprint.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150">
   <g fill="#e2e8f0" fill-opacity="0.92">
-    <path d="M 30,34 C 26,42 24,52 24,64 C 24,72 23,80 23,88 C 24,98 26,108 30,116 C 35,124 42,130 50,131 C 58,130 65,124 70,116 C 74,108 76,98 77,88 C 77,80 76,72 76,64 C 76,52 74,42 70,34 C 66,30 60,29 50,30 C 40,29 34,30 30,34 Z"/>
-    <ellipse cx="32" cy="22" rx="7.2" ry="9" transform="rotate(-12 32 22)"/>
-    <ellipse cx="45" cy="13" rx="5.8" ry="7.8" transform="rotate(-4 45 13)"/>
-    <ellipse cx="57" cy="11" rx="5" ry="7" transform="rotate(2 57 11)"/>
-    <ellipse cx="67" cy="14" rx="4.5" ry="6.2" transform="rotate(8 67 14)"/>
-    <ellipse cx="75" cy="20" rx="3.8" ry="5.2" transform="rotate(14 75 20)"/>
+    <path d="M 50,30 C 38,30 28,32 24,40 C 19,50 18,60 22,70 C 26,80 26,90 28,100 C 30,116 38,130 50,138 C 62,130 70,116 72,100 C 74,90 74,80 78,70 C 82,60 81,50 76,40 C 72,32 62,30 50,30 Z"/>
+    <ellipse cx="30" cy="20" rx="6.5" ry="8" transform="rotate(-18 30 20)"/>
+    <ellipse cx="43" cy="11" rx="5" ry="6.8" transform="rotate(-6 43 11)"/>
+    <ellipse cx="55" cy="9" rx="4.5" ry="6.2" transform="rotate(4 55 9)"/>
+    <ellipse cx="66" cy="13" rx="4" ry="5.5" transform="rotate(13 66 13)"/>
+    <ellipse cx="76" cy="20" rx="3.5" ry="5" transform="rotate(22 76 20)"/>
   </g>
 </svg>