From 27c2ada4ec8e9c5698991f58a2a99606d7b3c51e Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 17:14:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(metronome):=20=E6=B5=85=E8=89=B2=E6=B8=85?=
 =?UTF-8?q?=E7=88=BD=E6=94=B9=E7=89=88=20+=20=E4=B8=89=E6=A1=A3=E4=BD=8D?=
 =?UTF-8?q?=20+=20=E9=98=B3=E5=85=89=E8=8A=82=E6=8B=8D=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

整页配色从暗色系换成浅色清爽:
- 背景 #f8fafc → #eef2f7 渐变
- 卡片纯白 + 柔和阴影
- 主圆 emerald 翡翠绿,重音切琥珀色

视频区域:
- 移除卡片外框/光晕/阴影,保留圆形蒙版
  (圆形蒙版仍负责裁掉 video 灰白边 + 隐藏微信原生右上角小窗按钮)
- video 透明背景,跟白底融合

新增 3 档位推荐(主操作):
- 慢走 80 BPM · 健走 110 BPM · 快走 130 BPM
- 横排白卡,选中变浅绿 + emerald 描边
- 一键同步 BPM 和拍号,免去手动调

右下角微调(次要操作):
- absolute 定位胶囊,7 成透明
- ± BPM 微调 + 2/3/4 拍号
- 不抢主视觉,需要精确时才点

替换节拍音色(ffmpeg 合成):
- 普通拍 C6 1046Hz + C7 泛音,清脆"叮"
- 重音 G6 1568Hz + D7 + G7,更明亮"叮咚"
- 加 5ms attack + exp decay + 轻微回声,模拟钢片琴
- 旧的阴沉鼓点声备份在 audio/_backup/

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 TUICallKit-Vue3/pages/training/metronome.vue  | 720 +++++++-----------
 .../static/training/audio/click-wood.mp3      | Bin 4697 -> 3179 bytes
 .../static/training/audio/click.mp3           | Bin 3444 -> 2552 bytes
 3 files changed, 286 insertions(+), 434 deletions(-)

diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue
index 8ab0863b..7a2f443a 100644
--- a/TUICallKit-Vue3/pages/training/metronome.vue
+++ b/TUICallKit-Vue3/pages/training/metronome.vue
@@ -17,99 +17,65 @@
             </view>
         </view>
 
-        <!-- ===== 配速 + 走路动画卡片 ===== -->
-        <view class="walker-card">
-            <view class="walker-header">
-                <view class="badge" :class="badgeClass">
-                    <view class="badge-dot" />
-                    <text>{{ walkerTip }}</text>
-                </view>
-                <text class="status">{{ statusHint }}</text>
-            </view>
-
-            <view class="walker" :class="{ playing: isPlaying }">
-                <view class="runner-orb">
-                    <view class="orb-glow" :class="badgeClass" />
-                    <view class="orb-clip">
-                        <video
-                            id="runner-video"
-                            class="runner-video"
-                            :src="RUNNER_VIDEO_URL"
-                            :muted="true"
-                            :loop="true"
-                            :autoplay="true"
-                            :show-controls="false"
-                            :show-fullscreen-btn="false"
-                            :show-play-btn="false"
-                            :show-center-play-btn="false"
-                            :enable-progress-gesture="false"
-                            :show-mute-btn="false"
-                            :picture-in-picture-mode="[]"
-                            object-fit="cover"
-                            @error="onVideoError"
-                            @loadedmetadata="onVideoLoaded"
-                        />
-                    </view>
-                </view>
-
-                <view class="walker-stats">
-                    <view class="stat-row">
-                        <text class="stat-label">每分钟</text>
-                        <view class="stat-value">
-                            <text class="stat-num">{{ bpm }}</text>
-                            <text class="stat-unit">步</text>
-                        </view>
-                    </view>
-                    <view class="stat-row">
-                        <text class="stat-label">每步耗时</text>
-                        <view class="stat-value">
-                            <text class="stat-num">{{ intervalMs }}</text>
-                            <text class="stat-unit">ms</text>
-                        </view>
-                    </view>
-                    <view class="stat-row">
-                        <text class="stat-label">动画速度</text>
-                        <view class="stat-value">
-                            <text class="stat-num">{{ playbackRate.toFixed(2) }}</text>
-                            <text class="stat-unit">×</text>
-                        </view>
-                    </view>
-                </view>
+        <!-- ===== 跑步小人(无边框,跟白底融合) ===== -->
+        <view class="walker">
+            <view class="walker-clip">
+                <video
+                    id="runner-video"
+                    class="runner-video"
+                    :src="RUNNER_VIDEO_URL"
+                    :muted="true"
+                    :loop="true"
+                    :autoplay="true"
+                    :show-controls="false"
+                    :show-fullscreen-btn="false"
+                    :show-play-btn="false"
+                    :show-center-play-btn="false"
+                    :enable-progress-gesture="false"
+                    :show-mute-btn="false"
+                    :picture-in-picture-mode="[]"
+                    object-fit="cover"
+                    @error="onVideoError"
+                    @loadedmetadata="onVideoLoaded"
+                />
             </view>
         </view>
 
-        <!-- ===== 控制卡片:BPM + 拍号 ===== -->
-        <view class="control-card">
-            <view class="bpm-row">
-                <view class="step-btn" @click="adjustBpm(-10)">
-                    <text class="step-num">−10</text>
-                </view>
-                <view class="step-btn" @click="adjustBpm(-1)">
-                    <text class="step-num">−1</text>
-                </view>
-                <view class="step-btn" @click="adjustBpm(1)">
-                    <text class="step-num">+1</text>
-                </view>
-                <view class="step-btn" @click="adjustBpm(10)">
-                    <text class="step-num">+10</text>
-                </view>
+        <!-- ===== 推荐档位(3 选 1) ===== -->
+        <view class="presets">
+            <view
+                v-for="p in PRESETS"
+                :key="p.id"
+                class="preset"
+                :class="{ active: activePreset === p.id }"
+                @click="applyPreset(p)"
+            >
+                <text class="preset-icon">{{ p.icon }}</text>
+                <text class="preset-name">{{ p.name }}</text>
+                <text class="preset-bpm">{{ p.bpm }} BPM</text>
+                <text class="preset-desc">{{ p.desc }}</text>
             </view>
+        </view>
 
-            <view class="divider" />
-
-            <view class="meter-row">
-                <text class="meter-label">每组拍数</text>
-                <view class="meter-options">
-                    <view
-                        v-for="m in METER_OPTIONS"
-                        :key="m.value"
-                        class="meter-btn"
-                        :class="{ active: accentEvery === m.value }"
-                        @click="onMeterChange(m.value)"
-                    >
-                        <text>{{ m.label }}</text>
-                    </view>
+        <!-- ===== 右下角微调(不显眼) ===== -->
+        <view class="quick-adjust">
+            <view class="qa-group">
+                <view class="qa-btn" @click.stop="adjustBpm(-1)">−</view>
+                <text class="qa-label">微调</text>
+                <view class="qa-btn" @click.stop="adjustBpm(1)">+</view>
+            </view>
+            <view class="qa-divider" />
+            <view class="qa-group">
+                <view
+                    v-for="m in METER_OPTIONS"
+                    :key="m.value"
+                    class="qa-meter"
+                    :class="{ active: accentEvery === m.value }"
+                    @click.stop="onMeterChange(m.value)"
+                >
+                    {{ m.label }}
                 </view>
+                <text class="qa-label">拍</text>
             </view>
         </view>
     </view>
@@ -129,13 +95,42 @@ const RUNNER_VIDEO_URL =
     'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260525/20260525164014ef89f8862.mp4'
 
 /**
- * 视频原速对应的 BPM 基准
- * runner.mp4 时长 0.97s, 一个 walk cycle (左右脚各一次) ≈ 124 BPM 步频
- * 用户调速时 playbackRate = bpm / VIDEO_BASE_BPM
- * 微信小程序限制 playback-rate 范围 [0.5, 2.0]
+ * 视频原速对应的 BPM 基准(参见 hooks 实现注释)
+ * playback-rate 范围 [0.5, 2.0]
  */
 const VIDEO_BASE_BPM = 124
 
+/**
+ * 推荐档位:覆盖大多数老人健走场景,一键切换 BPM + 拍号
+ * 不在档位的中间数值用右下角微调即可
+ */
+const PRESETS = [
+    {
+        id: 'slow',
+        icon: '🚶',
+        name: '慢走',
+        bpm: 80,
+        accent: 4,
+        desc: '热身 · 恢复',
+    },
+    {
+        id: 'normal',
+        icon: '🏃‍♀️',
+        name: '健走',
+        bpm: 110,
+        accent: 4,
+        desc: '日常 · 通勤',
+    },
+    {
+        id: 'brisk',
+        icon: '🏃',
+        name: '快走',
+        bpm: 130,
+        accent: 4,
+        desc: '提速 · 燃脂',
+    },
+] as const
+
 const METER_OPTIONS = [
     { label: '2', value: 2 },
     { label: '3', value: 3 },
@@ -151,7 +146,6 @@ const metronome = useMetronome({
 const {
     bpm,
     isPlaying,
-    beatIndex,
     isAccent,
     accentEvery,
     intervalMs,
@@ -180,6 +174,19 @@ const togglePlay = () => {
     }
 }
 
+/* 当前命中的档位(BPM + 拍号都匹配才算选中) */
+const activePreset = computed(() => {
+    const hit = PRESETS.find(
+        (p) => p.bpm === bpm.value && p.accent === accentEvery.value,
+    )
+    return hit?.id ?? null
+})
+
+const applyPreset = (p: (typeof PRESETS)[number]) => {
+    setBpm(p.bpm)
+    setAccentEvery(p.accent)
+}
+
 /* 视频实例与 BPM 同步 */
 let videoCtx: UniApp.VideoContext | null = null
 
@@ -190,7 +197,6 @@ const playbackRate = computed(() => {
 
 onMounted(() => {
     videoCtx = uni.createVideoContext('runner-video')
-    /* 进页面默认让视频保持暂停,跟节拍器 isPlaying 状态同步 */
     setTimeout(() => videoCtx?.pause(), 50)
 })
 
@@ -205,13 +211,11 @@ const onVideoError = (e: any) => {
 
 const onVideoLoaded = (e: any) => {
     console.log('[runner-video] metadata loaded:', e?.detail)
-    /* 元数据加载完后再设 playbackRate,部分基础库初始化时设非 1.0 会卡 */
     try {
         videoCtx?.playbackRate?.(playbackRate.value)
     } catch (_) {}
 }
 
-/* 节拍器状态变化 → 同步视频播放/暂停 */
 watch(isPlaying, (playing) => {
     if (playing) {
         videoCtx?.play()
@@ -220,7 +224,6 @@ watch(isPlaying, (playing) => {
     }
 })
 
-/* BPM 变化 → 调整视频播放速度(部分基础库需要手动 API 调用) */
 watch(playbackRate, (rate) => {
     try {
         videoCtx?.playbackRate?.(rate)
@@ -232,29 +235,6 @@ const rootStyle = computed(() => ({
     '--step-duration': `${intervalMs.value}ms`,
 }))
 
-const statusHint = computed(() => {
-    if (isPlaying.value) {
-        const cur = ((beatIndex.value - 1) % accentEvery.value) + 1
-        return `第 ${cur} 拍 / 共 ${accentEvery.value} 拍`
-    }
-    return '轻点中央圆点开始'
-})
-
-const walkerTip = computed(() => {
-    if (bpm.value < 70) return '慢走 · 热身'
-    if (bpm.value < 100) return '健走 · 日常'
-    if (bpm.value < 130) return '快走 · 提速'
-    if (bpm.value < 170) return '慢跑 · 有氧'
-    return '快跑 · 高强'
-})
-
-const badgeClass = computed(() => {
-    if (bpm.value < 100) return 'badge-mild'
-    if (bpm.value < 130) return 'badge-mid'
-    if (bpm.value < 170) return 'badge-strong'
-    return 'badge-hot'
-})
-
 onShow(() => {
     preload()
 })
@@ -273,33 +253,37 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 /* ============================================================
- * 设计 token
+ * 设计 token —— 浅色清爽
  * ============================================================ */
-$bg-grad: linear-gradient(180deg, #0a0f1c 0%, #141a2a 100%);
-$card-bg: rgba(255, 255, 255, 0.035);
-$card-border: rgba(255, 255, 255, 0.06);
-$text-1: #f1f5f9;
-$text-2: #cbd5e1;
-$text-3: #64748b;
-$brand: #22c55e;
-$brand-deep: #15803d;
+$bg-grad: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+$card-bg: #ffffff;
+$card-border: rgba(15, 23, 42, 0.06);
+$text-1: #0f172a;
+$text-2: #475569;
+$text-3: #94a3b8;
+$brand: #10b981;
+$brand-soft: #d1fae5;
+$brand-deep: #047857;
 $accent: #f59e0b;
-$accent-deep: #b45309;
-$radius-card: 28rpx;
-$radius-btn: 20rpx;
+$accent-soft: #fef3c7;
+$radius-card: 24rpx;
+$radius-btn: 18rpx;
+$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+$shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
 
 /* ============================================================
  * 页面容器
  * ============================================================ */
 .page {
+    position: relative;
     height: 100vh;
     box-sizing: border-box;
-    padding: 30rpx 28rpx 60rpx;
+    padding: 30rpx 28rpx 80rpx;
     background: $bg-grad;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 24rpx;
+    gap: 22rpx;
     color: $text-1;
     overflow: hidden;
 }
@@ -309,9 +293,9 @@ $radius-btn: 20rpx;
  * ============================================================ */
 .stage {
     position: relative;
-    width: 540rpx;
-    height: 540rpx;
-    margin-top: 20rpx;
+    width: 480rpx;
+    height: 480rpx;
+    margin-top: 16rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -326,7 +310,7 @@ $radius-btn: 20rpx;
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: 3rpx solid rgba(34, 197, 94, 0.14);
+    border: 3rpx solid rgba(16, 185, 129, 0.12);
     pointer-events: none;
 
     &.playing {
@@ -340,29 +324,29 @@ $radius-btn: 20rpx;
     0% {
         transform: scale(0.94);
         opacity: 0.85;
-        border-color: rgba(34, 197, 94, 0.45);
+        border-color: rgba(16, 185, 129, 0.4);
     }
     100% {
         transform: scale(1.18);
         opacity: 0;
-        border-color: rgba(34, 197, 94, 0);
+        border-color: rgba(16, 185, 129, 0);
     }
 }
 
 .core {
     position: relative;
-    width: 420rpx;
-    height: 420rpx;
+    width: 380rpx;
+    height: 380rpx;
     border-radius: 50%;
-    background: linear-gradient(140deg, $brand 0%, $brand-deep 100%);
+    background: linear-gradient(140deg, #34d399 0%, $brand-deep 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow:
-        inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.22),
-        inset 0 16rpx 50rpx rgba(255, 255, 255, 0.1),
-        0 20rpx 50rpx rgba(34, 197, 94, 0.32);
+        inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.18),
+        inset 0 16rpx 50rpx rgba(255, 255, 255, 0.18),
+        0 16rpx 40rpx rgba(16, 185, 129, 0.32);
     transition: transform 0.12s, background 0.18s, box-shadow 0.18s;
 
     &.playing {
@@ -370,34 +354,34 @@ $radius-btn: 20rpx;
     }
 
     &.playing.accent {
-        background: linear-gradient(140deg, #fbbf24 0%, $accent-deep 100%);
+        background: linear-gradient(140deg, #fbbf24 0%, #d97706 100%);
         box-shadow:
-            inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.22),
-            inset 0 16rpx 50rpx rgba(255, 255, 255, 0.18),
-            0 20rpx 50rpx rgba(245, 158, 11, 0.4);
+            inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.18),
+            inset 0 16rpx 50rpx rgba(255, 255, 255, 0.22),
+            0 16rpx 40rpx rgba(245, 158, 11, 0.4);
     }
 
     .bpm-num {
-        font-size: 180rpx;
+        font-size: 168rpx;
         font-weight: 800;
         color: #fff;
         line-height: 1;
         letter-spacing: -2rpx;
         font-variant-numeric: tabular-nums;
-        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.18);
+        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.16);
     }
 
     .bpm-label {
         font-size: 22rpx;
-        color: rgba(255, 255, 255, 0.65);
+        color: rgba(255, 255, 255, 0.7);
         letter-spacing: 6rpx;
         margin-top: 10rpx;
         font-weight: 600;
     }
 
     .ctrl {
-        margin-top: 26rpx;
-        height: 76rpx;
+        margin-top: 22rpx;
+        height: 64rpx;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -413,336 +397,204 @@ $radius-btn: 20rpx;
     }
 }
 
-/* 播放/暂停 icon (CSS 几何) */
+/* 播放/暂停 icon */
 .icon-play {
     width: 0;
     height: 0;
-    border-left: 60rpx solid #fff;
-    border-top: 38rpx solid transparent;
-    border-bottom: 38rpx solid transparent;
-    margin-left: 14rpx;
-    filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.2));
+    border-left: 52rpx solid #fff;
+    border-top: 32rpx solid transparent;
+    border-bottom: 32rpx solid transparent;
+    margin-left: 12rpx;
+    filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.18));
 }
 .icon-pause {
     display: flex;
-    gap: 18rpx;
-    height: 70rpx;
+    gap: 16rpx;
+    height: 60rpx;
 
     .bar {
-        width: 18rpx;
+        width: 16rpx;
         height: 100%;
         background: #fff;
-        border-radius: 5rpx;
-        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
+        border-radius: 4rpx;
+        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18);
     }
 }
 
 /* ============================================================
- * 走路动画卡片
+ * 跑步小人(无边框,跟白底融合)
  * ============================================================ */
-.walker-card {
-    width: 100%;
-    background: $card-bg;
-    border: 1rpx solid $card-border;
-    border-radius: $radius-card;
-    padding: 24rpx 28rpx 32rpx;
-    backdrop-filter: blur(20rpx);
-}
-
-.walker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12rpx;
-}
-
-.badge {
-    display: flex;
-    align-items: center;
-    gap: 10rpx;
-    padding: 8rpx 20rpx;
-    background: rgba(34, 197, 94, 0.12);
-    border: 1rpx solid rgba(34, 197, 94, 0.3);
-    border-radius: 999rpx;
-    font-size: 24rpx;
-    color: $brand;
-    font-weight: 600;
-
-    .badge-dot {
-        width: 12rpx;
-        height: 12rpx;
-        border-radius: 50%;
-        background: currentColor;
-        box-shadow: 0 0 8rpx currentColor;
-    }
-
-    &.badge-mild {
-        background: rgba(34, 197, 94, 0.12);
-        border-color: rgba(34, 197, 94, 0.3);
-        color: #4ade80;
-    }
-    &.badge-mid {
-        background: rgba(251, 191, 36, 0.12);
-        border-color: rgba(251, 191, 36, 0.3);
-        color: #fbbf24;
-    }
-    &.badge-strong {
-        background: rgba(249, 115, 22, 0.12);
-        border-color: rgba(249, 115, 22, 0.3);
-        color: #fb923c;
-    }
-    &.badge-hot {
-        background: rgba(239, 68, 68, 0.14);
-        border-color: rgba(239, 68, 68, 0.32);
-        color: #f87171;
-    }
-}
-
-.status {
-    font-size: 24rpx;
-    color: $text-3;
-    letter-spacing: 1rpx;
-}
-
 .walker {
-    position: relative;
     width: 100%;
-    height: 240rpx;
-    display: flex;
-    align-items: center;
-    gap: 28rpx;
-    padding: 0 8rpx;
-}
-
-/* ============================================================
- * 跑步小人 圆形蒙版(裁掉灰白底 + 右上角原生按钮)
- * ============================================================ */
-.runner-orb {
-    position: relative;
-    width: 220rpx;
     height: 220rpx;
-    flex-shrink: 0;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 }
 
-/* 外圈彩色光晕,跟 badge 颜色联动 */
-.orb-glow {
-    position: absolute;
-    inset: -10rpx;
-    border-radius: 50%;
-    background: radial-gradient(
-        circle at 50% 50%,
-        rgba(34, 197, 94, 0.32) 0%,
-        rgba(34, 197, 94, 0.12) 55%,
-        transparent 75%
-    );
-    filter: blur(8rpx);
-    transition: background 0.3s;
-
-    &.badge-mid {
-        background: radial-gradient(
-            circle at 50% 50%,
-            rgba(251, 191, 36, 0.32) 0%,
-            rgba(251, 191, 36, 0.12) 55%,
-            transparent 75%
-        );
-    }
-    &.badge-strong {
-        background: radial-gradient(
-            circle at 50% 50%,
-            rgba(249, 115, 22, 0.34) 0%,
-            rgba(249, 115, 22, 0.14) 55%,
-            transparent 75%
-        );
-    }
-    &.badge-hot {
-        background: radial-gradient(
-            circle at 50% 50%,
-            rgba(239, 68, 68, 0.36) 0%,
-            rgba(239, 68, 68, 0.14) 55%,
-            transparent 75%
-        );
-    }
-}
-
-.walker.playing .orb-glow {
-    animation: orb-pulse var(--beat-duration, 750ms) ease-in-out infinite;
-}
-@keyframes orb-pulse {
-    0%,
-    100% {
-        transform: scale(1);
-        opacity: 0.85;
-    }
-    50% {
-        transform: scale(1.08);
-        opacity: 1;
-    }
-}
-
-/* 圆形裁切容器 */
-.orb-clip {
-    position: relative;
+.walker-clip {
+    /* 圆形蒙版裁掉 video 的灰白边 + 隐藏右上角原生小窗按钮 */
     width: 220rpx;
     height: 220rpx;
     border-radius: 50%;
     overflow: hidden;
-    background: linear-gradient(160deg, #f5f7fa 0%, #c9d1dc 100%);
-    box-shadow:
-        inset 0 0 0 2rpx rgba(255, 255, 255, 0.5),
-        inset 0 -20rpx 36rpx rgba(0, 0, 0, 0.08);
 }
 
 .runner-video {
     width: 100%;
     height: 100%;
-    /* video 比 orb 略大,object-fit:cover 配合定位让小人居中且裁掉灰边 */
-    transform: scale(1.08);
+    transform: scale(1.1);
     background: transparent;
 }
 
 /* ============================================================
- * 走路节奏数据(右侧)
+ * 三档位推荐
  * ============================================================ */
-.walker-stats {
+.presets {
+    width: 100%;
+    display: flex;
+    gap: 16rpx;
+}
+
+.preset {
     flex: 1;
+    background: $card-bg;
+    border: 2rpx solid $card-border;
+    border-radius: $radius-card;
+    padding: 22rpx 12rpx 20rpx;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    gap: 14rpx;
-    padding: 8rpx 0;
-}
-
-.stat-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12rpx;
-}
-
-.stat-label {
-    font-size: 24rpx;
-    color: $text-3;
-    letter-spacing: 1rpx;
-}
-
-.stat-value {
-    display: flex;
-    align-items: baseline;
-    gap: 4rpx;
-}
-
-.stat-num {
-    font-size: 40rpx;
-    font-weight: 700;
-    color: $text-1;
-    line-height: 1;
-    font-variant-numeric: tabular-nums;
-    letter-spacing: -0.5rpx;
-}
-
-.stat-unit {
-    font-size: 22rpx;
-    color: $text-3;
-    font-weight: 500;
-}
-
-/* ============================================================
- * 控制卡片(BPM + 拍号)
- * ============================================================ */
-.control-card {
-    width: 100%;
-    background: $card-bg;
-    border: 1rpx solid $card-border;
-    border-radius: $radius-card;
-    padding: 28rpx;
-    backdrop-filter: blur(20rpx);
-}
-
-.bpm-row {
-    display: flex;
-    gap: 14rpx;
-}
-
-.step-btn {
-    flex: 1;
-    height: 96rpx;
-    border-radius: $radius-btn;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1rpx solid rgba(255, 255, 255, 0.08);
-    display: flex;
     align-items: center;
-    justify-content: center;
-    transition: all 0.15s;
-
-    &:active {
-        background: rgba(34, 197, 94, 0.18);
-        border-color: rgba(34, 197, 94, 0.5);
-        transform: scale(0.96);
-    }
-
-    .step-num {
-        font-size: 38rpx;
-        color: $text-1;
-        font-weight: 700;
-        font-variant-numeric: tabular-nums;
-        letter-spacing: -1rpx;
-    }
-}
-
-.divider {
-    height: 1rpx;
-    background: rgba(255, 255, 255, 0.06);
-    margin: 24rpx 0;
-}
-
-.meter-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 20rpx;
-}
-
-.meter-label {
-    font-size: 26rpx;
-    color: $text-3;
-    letter-spacing: 1rpx;
-}
-
-.meter-options {
-    display: flex;
-    gap: 10rpx;
-    background: rgba(255, 255, 255, 0.04);
-    padding: 6rpx;
-    border-radius: 999rpx;
-    border: 1rpx solid rgba(255, 255, 255, 0.05);
-}
-
-.meter-btn {
-    min-width: 84rpx;
-    height: 60rpx;
-    padding: 0 20rpx;
-    border-radius: 999rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    gap: 6rpx;
+    box-shadow: $shadow-sm;
     transition: all 0.18s;
 
-    text {
+    .preset-icon {
+        font-size: 44rpx;
+        line-height: 1;
+        margin-bottom: 6rpx;
+    }
+    .preset-name {
         font-size: 30rpx;
+        font-weight: 700;
+        color: $text-1;
+        letter-spacing: 2rpx;
+    }
+    .preset-bpm {
+        font-size: 24rpx;
         color: $text-2;
         font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+    .preset-desc {
+        font-size: 20rpx;
+        color: $text-3;
+        letter-spacing: 1rpx;
+        margin-top: 2rpx;
+    }
+
+    &:active {
+        transform: scale(0.97);
     }
 
     &.active {
-        background: $brand;
-        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.4);
+        background: $brand-soft;
+        border-color: $brand;
+        box-shadow:
+            0 8rpx 20rpx rgba(16, 185, 129, 0.18),
+            inset 0 0 0 2rpx rgba(16, 185, 129, 0.4);
 
-        text {
-            color: #fff;
+        .preset-name {
+            color: $brand-deep;
+        }
+        .preset-bpm {
+            color: $brand-deep;
+        }
+        .preset-desc {
+            color: $brand;
         }
     }
 }
+
+/* ============================================================
+ * 右下角微调(不显眼)
+ * ============================================================ */
+.quick-adjust {
+    position: absolute;
+    right: 28rpx;
+    bottom: 22rpx;
+    display: flex;
+    align-items: center;
+    gap: 14rpx;
+    padding: 10rpx 18rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border: 1rpx solid rgba(15, 23, 42, 0.05);
+    border-radius: 999rpx;
+    backdrop-filter: blur(10rpx);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:active {
+        opacity: 1;
+    }
+}
+
+.qa-group {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+}
+
+.qa-label {
+    font-size: 20rpx;
+    color: $text-3;
+    margin: 0 4rpx;
+    letter-spacing: 1rpx;
+}
+
+.qa-btn {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    background: rgba(15, 23, 42, 0.05);
+    color: $text-2;
+    font-size: 26rpx;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    &:active {
+        background: rgba(16, 185, 129, 0.18);
+        color: $brand-deep;
+    }
+}
+
+.qa-meter {
+    min-width: 36rpx;
+    height: 36rpx;
+    padding: 0 10rpx;
+    border-radius: 999rpx;
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    transition: all 0.15s;
+
+    &.active {
+        background: $brand;
+        color: #fff;
+        box-shadow: 0 2rpx 6rpx rgba(16, 185, 129, 0.4);
+    }
+}
+
+.qa-divider {
+    width: 1rpx;
+    height: 22rpx;
+    background: rgba(15, 23, 42, 0.08);
+}
 </style>
diff --git a/TUICallKit-Vue3/static/training/audio/click-wood.mp3 b/TUICallKit-Vue3/static/training/audio/click-wood.mp3
index a6127c85b8409bcc86b1111f68ca3893b5f1f689..4f89ad7affb658b05b95830581314a94625b720a 100644
GIT binary patch
literal 3179
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

literal 4697
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

diff --git a/TUICallKit-Vue3/static/training/audio/click.mp3 b/TUICallKit-Vue3/static/training/audio/click.mp3
index a25fa2b0fa13017eb572999424b3756d2c663466..d56c0dd0d722b76eee79624ac12081f0a27bb4d4 100644
GIT binary patch
literal 2552
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

literal 3444
zcmds)c{J4BAIHBl24jgyVq_|!j5HXGERV8`eF+)HppYbk45FfDEZL?+X)M_)lwD0|
zOl5tBY;8=o5RK_cv`95szQ1|?cz*wNe*gUbdS2(;bI-Z&d(Qp5Kj+^2xffi`4g&rM
z#FG&xgi~aN4F&+4VgTZAxcobKzXSXo!nItTES#<NwXwRoFxEd2;#AaO;m!bL=I=NZ
z!fN3E2>;q1T%ExK03;JQv<?999WzRcWi((rufR`GbXBB7UlYWY0Up){<?4reA$Bqn
zQ%H2=qlbYzb7SEmZ^4YI3yp&4FUFs#xp6RK+ej<$XE7gqld7K6wi1+m34r+jDuUzr
z-6v*JuzjWis_Zx3)J{<Lmi1oC{LKiYFsUl)b3QI1j9Qy$ASbgT-BEgG5;%Q2g${KO
z+T9?9bd0pfeXnzXLJLXt896UIeOzXXMUo;*<w}g3J63|Tt&9$B^5+#OGDD*sPKi{-
zEAC6mPcCHGX>1$7O7FLst)*mWB6KNmt*Y96B=4a8S{W{FVfUS7dw3h;#u8hkP3o7|
z_arR7=u)UuIzPA!g4}Il3&)zkl&PpJmvR1wB_#jQB>H2*t!srW^z~RjPm7{K5*IVt
zaHu$xVN9v@&W^kKtMuo@z1XO%oeZDM&Y7x$4ZkWjcHuDYOC{swLf%So!lj}7z2@==
zJWXggjc&gP5kGYa0dv9nb1X7Y5CfE6O4{AMc7V|UOqX%x=?hglw4cX!f)wvU;GFYK
z@5nOu07;qMsS=6G(HeiDhBIPLW-A0hM>5*K<)kU4YZG^afp$_BsYgKchXO~<pvZRz
zUD}k${xNeA%%sV&;l07wYgyoQDQFWi47_z=w<xFR1KhMw+emV>E7e#q-}lkVm2(iZ
zx7VtiKfnItEOEZ&NFW7l!d;(u@U02sm4u0?i(j5(26JO|tSIN4Y9`*8v3LFqIQa15
zR8OEn+~vn_)-<V2AvHE3_wIbU;4>0;H_i=$07UJ(J={6kYAVkQU@0^Uib%KhZFmw2
z#dw9p{$=7}(*C~0$Fl<wo7J0;af$wPK7>(NnPDd45L&Ol*IKQ=x$u@P=KE~sZHJP1
z!<faowB{4xUpUF6(ICGtK^q9pR)P&#H4S_^`|%Liz<--F5|(OMKUr%c(_D}KITjLj
z(d=Ezbm+XfIRG(b;ij&F?^L0N`0%B*JjxWgbplzdO)yL@x+5u@;}G>Y1;NK4(j~QP
z*rhk&HkM|8_T6WX4OA%To|ZY5JpeTlc-Kd3w*4Yj^Zn#<@ZNp(-tKI@{G|XKJ{ZsR
z8>)FMrqYRrfAd(>m-fd?7!Tc=!)Dt_yGrWmB^TIvJd+X=Q^#-f9Xz4i`4qvDq6|dq
zn~mHm?QSKU?8_}a`zo~g;RAJ}m+@X)rX0&pDGlp$q_Jkl!eizZr<XRDNv}ym?9sSM
z<1gZTER(cOQmD9`J~2X>3*=6N;09Td2vVuu&p>5x?m+7hbwi%)quleX<w59tf@L6E
z|NZ#a^^SOj)}$3uzv9s|-?_mL&|^MU&iCPfnucwJZN202?J@#FzShK5HhjY~7+h@(
znt`exKI%;k@Ry{};}3q6hio-2^<K%N?UHHKy3j}yl~f>CTkBegs(u8r@n;NW*#&52
z5&w6pR%L%_!mOILpApc+8c}rAhJl%($4Efq3sLco<vORU;RG!oj3$Ocp@P2_8kvqq
z^&<zVehxQ4w=iz$`KAu%-Kf*8J$%Fg9Rbc6O!?w^9VkQS0)RObQ0+&xKkuG5e{Y5D
z?d<Ii6Uo+Iene9nO@%wVo=&P&Z!?{M7hm3mb-A>jY)DC0vZO2QB;eBYtT$zBQBdI|
z?$CX5WAD@8XM&4zcp4{>sP|q1fQY+xH%Ih3L&VB0zK1**Fz-S_wq3KHv*Bgt7+HEt
zR=cZ7#^`--9miD@SN}-ACq1p9>E0!u&wiHN`KDsf*2J*+x%||m>8_TFzUoV}(^O<(
zv%*bR%*1w{86(eDg)ue%gJq^|?8TWJEQmeyPF!S&$dXTgWxFtuJ8?60Rxs7Hsefg9
znkR_+3WChMvlrvfP=5&WUfIpce>X-Kyqm8XzAY?btK38+0%8sT-4GyYgzI?~)9atV
z*l|oE<uLDC$fh%8+WwK%30lDObhunjtsXnbq5U|%+G&I<hn|$;Bg@0R;pufbb`8Oj
z4(VmSB7HG=R_z@-Vwsz1M{P>j)1*&OfBo-C3y-dRXl~bz-}q@hR8*DFo`uig<R8;f
z?%90-)pLKujuZK7G>;I736^;>Jo{Q*sdqPhw;-75yYVKD@I)&4ZNmEKqZ)5^lN2~P
zd<V5UuH_}z?{2%7GZ~7rA9Hs4;K2<1@k93B<Z8*8Ij{3;py21SHV+(HC=^zqpsxU2
z@A%6IGM>iYXAchf1DYc@oLP?nt0Vea`>`~5PwC?~U8G0n?|%iL!bJQHTuQ?(C=eoA
z(P<EK&DPl9I3!mkHnCV8pgUFEoyf7Qv{CU5=?%`6kBI6KM{fXmi94b9Hp7e-r6m<;
zAzkGmy;g{XURhDVa7k+Xn9cRH=mCplyhk@gr*|_^C9w$>z(L+jN3Z8wh#8sF?9chl
z$-s$_8iV7BO3Qm7#Kz2-*<=-bVxDhjv3+myJRXLY&)=0)ahQbpdJx%BS)NfQ{U_?I
zrJS(VNjT7p)HQYJYgL7zD(yj?w$_T_q4b?6Wp0T0gY3q&iOo#wyp1ItMb#(g#yB%}
zn|czp>~_Qj{A^w1Ot9iUIa|Hb?q4Omi3vYA=$zt6nmyGaGf}qIl4;_!Jyw53C+JkX
zZzZQ&`yFp|R>L>EGVCz(^*NkEozq*ZCV5fR3#=fJF808Sy^r3M|E+%emBo@P3oSJ2
z^|qYPiQ>nSb^#Bekgb<mf{CAA_EpGf5*(ON*v;2}C{f1jX~(bEI3iKib+JoT?}Mvs
z1H~vwA4lBvo@QBV1bfimFAtY@p=wB}{t~Y-dG?IHv5>7AABkPY1>=}w_&RP0w`9GQ
z^|fRQnZRR3v_*}>L!)HtWba=ozgJ2Hd49RvHgMH4YQ_9qaerY@C@S?cANNeS<%dpq
zw)|?NY8jZ`DZHR2$4YSVezcOx5-J0$WDpZqwDxs<!KHT3L9J^~P?=WI&(}7qP}PL;
zhB!hpag=xbw0-(TJ^WQu1`KfTWu%}yv#*#V6f+oE>D+R|GcULLwo6GHB)Lf=FW+tg
zER`>l*EyVFz6mKblpG$xH;u@ss;a697;F%bBgoNpcUyUNVajq@T}4Zz*Hmzkd;ztj
zI*keM_gRXrMlJB_SY#iTT5wl!yc;g&aFnFF{AV|cwW;xKgTuN$MvH9y?bUY(j?yrg
zmc?@ssqL!0IHMf5qp1-}4Fpf_&3Z2a;pm1^q5amAga+_!;R>1OS&%n&gAhURniGzL
z>x5GTQqo0+(hYa(2(%6~U-FFR!yE1Oq6akZSx2Iu-}zJFzwg=Ve+A%bWYCQ4H%+&f
jV1PfA{IvSi+cMz|2q_mHd=&sNpb5VV{|cl3ZxjCkZ+u!i