From e104249707d1014bab8213e6ead44b39a05406cd Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 12:45:17 +0800
Subject: [PATCH] =?UTF-8?q?style(metronome):=20=E8=84=9A=E5=8D=B0=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=20SVG=20=E7=9F=A2=E9=87=8F,=E5=8D=95=E7=AC=94?=
 =?UTF-8?q?=E6=88=90=E5=9E=8B=E5=91=8A=E5=88=AB=E5=8D=A1=E9=80=9A=E6=84=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

div 拼接(椭圆+5 个圆)无论怎么调都摆脱不了"青蛙脚"既视感,
根本原因是 div 画不出曲线轮廓。改用 SVG path 单笔成型:

- 新增 static/training/footprint.svg(775B)
  · path 一笔走完:前足→足弓凹陷→脚跟,模拟真实脚印拓印
  · 5 个脚趾用 ellipse + rotate 转角,大小递减(7.2→3.8rpx)
  · 内侧（拇趾侧）凹陷、外侧饱满,符合解剖学
  · 单色 #e2e8f0 fill-opacity 0.92,接近湿沙脚印质感

- metronome.vue:
  · 模板:删 heel + 5×toe,改用 image src=footprint.svg
  · CSS:删除 70+ 行 heel/toe 位置定位,只保留 footprint 容器
  · 左脚保持 scaleX(-1) 镜像,动画 keyframe 不变

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 TUICallKit-Vue3/pages/training/metronome.vue  | 83 +++----------------
 TUICallKit-Vue3/static/training/footprint.svg | 11 +++
 2 files changed, 24 insertions(+), 70 deletions(-)
 create mode 100644 TUICallKit-Vue3/static/training/footprint.svg

diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue
index 50c9b96b..8f45c196 100644
--- a/TUICallKit-Vue3/pages/training/metronome.vue
+++ b/TUICallKit-Vue3/pages/training/metronome.vue
@@ -29,25 +29,19 @@
 
             <view class="walker" :class="{ playing: isPlaying }">
                 <view class="foot foot-left">
-                    <view class="footprint">
-                        <view class="heel" />
-                        <view class="toe toe-1" />
-                        <view class="toe toe-2" />
-                        <view class="toe toe-3" />
-                        <view class="toe toe-4" />
-                        <view class="toe toe-5" />
-                    </view>
+                    <image
+                        class="footprint"
+                        src="/static/training/footprint.svg"
+                        mode="aspectFit"
+                    />
                     <view class="shadow" />
                 </view>
                 <view class="foot foot-right">
-                    <view class="footprint">
-                        <view class="heel" />
-                        <view class="toe toe-1" />
-                        <view class="toe toe-2" />
-                        <view class="toe toe-3" />
-                        <view class="toe toe-4" />
-                        <view class="toe toe-5" />
-                    </view>
+                    <image
+                        class="footprint"
+                        src="/static/training/footprint.svg"
+                        mode="aspectFit"
+                    />
                     <view class="shadow" />
                 </view>
                 <view class="ground" />
@@ -440,72 +434,21 @@ $radius-btn: 20rpx;
 }
 
 /* ============================================================
- * 拟真脚印(单色,内敛)
+ * 拟真脚印(SVG 矢量,单笔成型)
  * ============================================================ */
 .foot {
     position: absolute;
     bottom: 18rpx;
     width: 100rpx;
-    height: 130rpx;
+    height: 140rpx;
 
     .footprint {
-        position: relative;
+        display: block;
         width: 100%;
         height: 100%;
         transform-origin: bottom center;
     }
 
-    /* 脚跟+脚掌一体椭圆,不规则更像真实脚印 */
-    .heel {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 72rpx;
-        height: 86rpx;
-        background: rgba(241, 245, 249, 0.92);
-        border-radius: 48% 48% 50% 50% / 56% 56% 44% 44%;
-    }
-
-    /* 5 个脚趾 - 紧贴脚掌,大小递减,呈弧形排布 */
-    .toe {
-        position: absolute;
-        background: rgba(241, 245, 249, 0.92);
-        border-radius: 50%;
-    }
-    .toe-1 {
-        /* 大脚趾,内侧最大 */
-        width: 22rpx;
-        height: 22rpx;
-        bottom: 86rpx;
-        left: 16rpx;
-    }
-    .toe-2 {
-        width: 18rpx;
-        height: 18rpx;
-        bottom: 92rpx;
-        left: 36rpx;
-    }
-    .toe-3 {
-        width: 16rpx;
-        height: 16rpx;
-        bottom: 92rpx;
-        left: 52rpx;
-    }
-    .toe-4 {
-        width: 14rpx;
-        height: 14rpx;
-        bottom: 88rpx;
-        left: 66rpx;
-    }
-    .toe-5 {
-        /* 小脚趾,外侧最小 */
-        width: 12rpx;
-        height: 12rpx;
-        bottom: 82rpx;
-        left: 78rpx;
-    }
-
     .shadow {
         position: absolute;
         bottom: -6rpx;
diff --git a/TUICallKit-Vue3/static/training/footprint.svg b/TUICallKit-Vue3/static/training/footprint.svg
new file mode 100644
index 00000000..3ef52eee
--- /dev/null
+++ b/TUICallKit-Vue3/static/training/footprint.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
+  <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)"/>
+  </g>
+</svg>