From 7f4fad7b62348036fe32eee7bb5ede4671022e20 Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Fri, 29 May 2026 12:05:22 +0800
Subject: [PATCH] update

---
 .../components/dev-training-entry/index.vue   |  129 ++
 TUICallKit-Vue3/pages.json                    |   31 +-
 TUICallKit-Vue3/training/pages/dumbbell.vue   | 1895 +++++++++++++++++
 TUICallKit-Vue3/training/pages/foot-pedal.vue | 1895 +++++++++++++++++
 TUICallKit-Vue3/training/pages/grip-ring.vue  |  264 ++-
 TUICallKit-Vue3/training/pages/metronome.vue  |   14 +-
 .../training/pages/pilates-ring.vue           | 1895 +++++++++++++++++
 7 files changed, 6073 insertions(+), 50 deletions(-)
 create mode 100644 TUICallKit-Vue3/training/pages/dumbbell.vue
 create mode 100644 TUICallKit-Vue3/training/pages/foot-pedal.vue
 create mode 100644 TUICallKit-Vue3/training/pages/pilates-ring.vue

diff --git a/TUICallKit-Vue3/components/dev-training-entry/index.vue b/TUICallKit-Vue3/components/dev-training-entry/index.vue
index b24ef9e4..b0e23666 100644
--- a/TUICallKit-Vue3/components/dev-training-entry/index.vue
+++ b/TUICallKit-Vue3/components/dev-training-entry/index.vue
@@ -14,6 +14,46 @@
                 <view class="menu-arrow">›</view>
             </view> -->
 
+            <view class="menu-item" @click="goto('/training/pages/dumbbell')">
+                <view class="menu-icon menu-icon--dumbbell">
+                    <view class="dumbbell-shape">
+                        <view class="dumbbell-plate dumbbell-plate-left" />
+                        <view class="dumbbell-bar" />
+                        <view class="dumbbell-plate dumbbell-plate-right" />
+                    </view>
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">哑铃</text>
+                    <text class="menu-sub">力量塑形</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/foot-pedal')">
+                <view class="menu-icon menu-icon--pedal">
+                    <view class="foot-pedal-shape">
+                        <view class="pedal-bar pedal-bar-left" />
+                        <view class="pedal-bar pedal-bar-right" />
+                    </view>
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">脚蹬器</text>
+                    <text class="menu-sub">下肢有氧</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/pilates-ring')">
+                <view class="menu-icon menu-icon--pilates">
+                    <view class="pilates-ring-shape" />
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">瑜伽环</text>
+                    <text class="menu-sub">核心塑形</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
             <view class="menu-item" @click="goto('/training/pages/grip-ring')">
                 <view class="menu-icon menu-icon--grip">
                     <view class="grip-ring-shape" />
@@ -262,6 +302,18 @@ $brand-light: #34d399;
     &--train {
         background: linear-gradient(140deg, $brand-light, $brand-deep);
     }
+    &--dumbbell {
+        background: linear-gradient(140deg, #93c5fd, #3b82f6);
+        box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.36);
+    }
+    &--pedal {
+        background: linear-gradient(140deg, #fdba74, #f97316);
+        box-shadow: 0 2rpx 8rpx rgba(249, 115, 22, 0.36);
+    }
+    &--pilates {
+        background: linear-gradient(140deg, #c4b5fd, #8b5cf6);
+        box-shadow: 0 2rpx 8rpx rgba(139, 92, 246, 0.36);
+    }
     &--grip {
         background: linear-gradient(140deg, #5eead4, #14b8a6);
         box-shadow: 0 2rpx 8rpx rgba(20, 184, 166, 0.36);
@@ -278,6 +330,83 @@ $brand-light: #34d399;
     line-height: 1;
 }
 
+/* 哑铃小 icon */
+.dumbbell-shape {
+    width: 40rpx;
+    height: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dumbbell-plate {
+    width: 10rpx;
+    height: 18rpx;
+    background: #fff;
+    border-radius: 3rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+.dumbbell-bar {
+    width: 16rpx;
+    height: 5rpx;
+    background: #fff;
+    border-radius: 2rpx;
+    margin: 0 2rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+/* 脚蹬器小 icon: 左右踏板 */
+.foot-pedal-shape {
+    width: 40rpx;
+    height: 28rpx;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 6rpx;
+}
+
+.pedal-bar {
+    width: 14rpx;
+    background: #fff;
+    border-radius: 4rpx 4rpx 2rpx 2rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+.pedal-bar-left {
+    height: 18rpx;
+    transform: rotate(-12deg);
+}
+
+.pedal-bar-right {
+    height: 22rpx;
+    transform: rotate(12deg);
+}
+
+/* 瑜伽环小 icon: 双弧阻力环 */
+.pilates-ring-shape {
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    border: 5rpx solid #fff;
+    position: relative;
+    box-shadow:
+        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
+        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 18rpx;
+        height: 18rpx;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        border: 3rpx solid rgba(255, 255, 255, 0.85);
+    }
+}
+
 /* 握力环小 icon: 白色描边的环（甜甜圈） */
 .grip-ring-shape {
     width: 32rpx;
diff --git a/TUICallKit-Vue3/pages.json b/TUICallKit-Vue3/pages.json
index d9f3fe15..a605b43a 100644
--- a/TUICallKit-Vue3/pages.json
+++ b/TUICallKit-Vue3/pages.json
@@ -124,8 +124,35 @@
 						"backgroundColor": "#f8fafc"
 					}
 				},
-				{
-					"path": "pages/metronome",
+                {
+                    "path": "pages/pilates-ring",
+                    "style": {
+                        "navigationBarTitleText": "瑜伽环训练",
+                        "navigationBarBackgroundColor": "#f8fafc",
+                        "navigationBarTextStyle": "black",
+                        "backgroundColor": "#f8fafc"
+                    }
+                },
+                {
+                    "path": "pages/foot-pedal",
+                    "style": {
+                        "navigationBarTitleText": "脚蹬器训练",
+                        "navigationBarBackgroundColor": "#f8fafc",
+                        "navigationBarTextStyle": "black",
+                        "backgroundColor": "#f8fafc"
+                    }
+                },
+                {
+                    "path": "pages/dumbbell",
+                    "style": {
+                        "navigationBarTitleText": "哑铃训练",
+                        "navigationBarBackgroundColor": "#f8fafc",
+                        "navigationBarTextStyle": "black",
+                        "backgroundColor": "#f8fafc"
+                    }
+                },
+                {
+                    "path": "pages/metronome",
 					"style": {
 						"navigationBarTitleText": "耗糖节拍器",
 						"navigationBarBackgroundColor": "#f8fafc",
diff --git a/TUICallKit-Vue3/training/pages/dumbbell.vue b/TUICallKit-Vue3/training/pages/dumbbell.vue
new file mode 100644
index 00000000..5c4b0087
--- /dev/null
+++ b/TUICallKit-Vue3/training/pages/dumbbell.vue
@@ -0,0 +1,1895 @@
+<template>
+    <view class="page" :style="rootStyle">
+        <!-- ===== 页头 ===== -->
+        <view class="page-header">
+            <view class="header-main">
+                <text class="page-title">哑铃训练</text>
+                <text class="page-subtitle">跟随示范 · 控制节奏 · 塑造线条</text>
+            </view>
+            <view class="status-pill" :class="{ active: isPlaying, paused: isPaused }">
+                <view class="status-dot" />
+                <text class="status-text">{{ statusText }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 哑铃画布区域 ===== -->
+        <view class="stage-canvas-wrapper">
+            <view class="ambient-glow" />
+
+            <!-- 哑铃容器 -->
+            <view class="ring-container" :class="{ playing: isPlaying }">
+                <!-- 节拍光环 - 跟随 BPM 精确缩放 -->
+                <view class="beat-halo" />
+
+                <!-- 视频示范主体(圆形) -->
+                <view class="video-ring">
+                    <video
+                        id="dumbbellDemoVideo"
+                        class="demo-video"
+                        :src="TUTORIAL_VIDEO_URL"
+                        :poster="TUTORIAL_POSTER_URL"
+                        muted
+                        loop
+                        :controls="false"
+                        :show-center-play-btn="false"
+                        :show-play-btn="false"
+                        :show-fullscreen-btn="false"
+                        :show-progress="false"
+                        :enable-progress-gesture="false"
+                        object-fit="cover"
+                    />
+                    <view class="video-ring-border" />
+                </view>
+
+                <!-- 中心提示(仅未开始时显示) -->
+                <view v-if="!isPlaying" class="center-hint">
+                    <view class="hint-icon">
+                        <view class="play-triangle" />
+                    </view>
+                    <text class="hint-text">{{ centerHintText }}</text>
+                </view>
+
+                <!-- BPM 角标(播放中) -->
+                <view v-else class="bpm-chip">
+                    <text class="bpm-value">{{ currentBpm }}</text>
+                    <text class="bpm-label">BPM</text>
+                </view>
+
+                <!-- 点击层(捕获点击切换训练状态) -->
+                <view class="tap-overlay" @click="onTogglePlay" />
+            </view>
+
+            <view class="bgm-toggle" @click="toggleBgm">
+                <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
+            </view>
+
+            <!-- 倒计时浮标(仅有目标且训练已开始时显示) -->
+            <view v-if="remainingSeconds !== null && hasStats" class="countdown-badge">
+                <text class="countdown-label">剩余</text>
+                <text class="countdown-value">{{ formatTime(remainingSeconds) }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 控制面板：统计 + 档位 + 目标 ===== -->
+        <view class="control-deck" :class="{ 'is-playing': isPlaying, 'is-paused': isPaused }">
+            <view class="stats-row">
+                <view class="stat-chip">
+                    <text class="stat-chip-label">次数</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? totalReps : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">时长</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? formatTime(elapsedSeconds) : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">糖分</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? `≈${totalSugar.toFixed(1)}g` : '—' }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="presets-block">
+                <view class="presets-header">
+                    <text class="presets-title">训练强度</text>
+                    <text v-if="isPlaying" class="presets-hint">训练中不可切换</text>
+                </view>
+                <view class="presets">
+                    <view
+                        v-for="p in DUMBBELL_PRESETS"
+                        :key="p.id"
+                        class="preset"
+                        :class="{ active: currentPreset === p.id, disabled: isPlaying }"
+                        @click="onPresetTap(p.id)"
+                    >
+                        <text class="preset-icon">{{ PRESET_ICONS[p.id] }}</text>
+                        <text class="preset-name">{{ p.label }}</text>
+                        <text class="preset-bpm">{{ p.bpm }} BPM</text>
+                        <text class="preset-desc">{{ p.desc }}</text>
+                    </view>
+                </view>
+                <view class="intensity-estimate">
+                    <text class="estimate-icon">🔥</text>
+                    <text class="estimate-text">{{ estimateText }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="target-block">
+                <view class="target-header">
+                    <text class="target-title">训练目标</text>
+                    <text class="target-hint">到时间自动结束</text>
+                </view>
+                <view class="target-chips">
+                    <view
+                        v-for="t in TARGET_OPTIONS"
+                        :key="t.minutes"
+                        class="target-chip"
+                        :class="{ active: targetMinutes === t.minutes, disabled: isPlaying }"
+                        @click="onTargetTap(t.minutes)"
+                    >
+                        <text class="target-chip-text">{{ t.label }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 仅暂停时显示一行提示 + 结束训练文字链 -->
+            <view class="deck-divider" />
+
+            <!-- 训练功效介绍(可折叠) -->
+            <view class="benefit-block">
+                <view class="benefit-header" @click="benefitExpanded = !benefitExpanded">
+                    <text class="benefit-title">训练功效</text>
+                    <text class="benefit-toggle">{{ benefitExpanded ? '收起 ▲' : '展开 ▼' }}</text>
+                </view>
+                <view v-if="benefitExpanded" class="benefit-content">
+                    <view class="benefit-row">
+                        <text class="benefit-label">主要锻炼</text>
+                        <view class="muscle-tags">
+                            <text v-for="m in TRAINING_BENEFIT.muscles" :key="m" class="muscle-tag">{{ m }}</text>
+                        </view>
+                    </view>
+                    <view class="benefit-row">
+                        <text class="benefit-label">训练效果</text>
+                        <text class="benefit-effect">{{ TRAINING_BENEFIT.effect }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 暂停时显示醒目大按钮(老年友好) -->
+            <view v-if="isPaused" class="pause-actions">
+                <button class="big-btn big-btn-resume" @click="onTogglePlay">
+                    <text class="big-btn-icon">▶</text>
+                    <text class="big-btn-text">继续训练</text>
+                </button>
+                <button class="big-btn big-btn-end" @click="onEndTraining">
+                    <text class="big-btn-icon">■</text>
+                    <text class="big-btn-text">结束训练</text>
+                </button>
+            </view>
+        </view>
+    </view>
+
+    <!-- ===== 奖励弹窗 ===== -->
+    <view v-if="showRewardPopup" class="reward-popup-mask" @click="closeRewardPopup">
+            <view class="reward-popup" @click.stop>
+                <text class="reward-emoji">{{ currentReward.emoji }}</text>
+                <text class="reward-title">{{ currentReward.title }}</text>
+                <text class="reward-desc">{{ currentReward.desc }}</text>
+                <text class="reward-count">已完成 {{ totalReps }} 次</text>
+                <view class="reward-btn" @click="closeRewardPopup">继续加油</view>
+            </view>
+        </view>
+
+        <!-- ===== 训练完成（浮层） ===== -->
+        <view v-if="showSummary" class="summary-mask" @click="dismissSummary">
+            <view class="completion-card" @click.stop>
+            <view class="completion-header">
+                <text class="completion-emoji">🎉</text>
+                <text class="completion-title">训练完成</text>
+                <text class="completion-subtitle">辛苦啦,休息一下吧</text>
+            </view>
+
+            <view class="completion-content">
+                <!-- 核心统计 -->
+                <view class="stats-grid">
+                    <view class="stat-item">
+                        <text class="stat-icon">💪</text>
+                        <text class="stat-value">{{ totalReps }}</text>
+                        <text class="stat-label">总次数</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">⏱️</text>
+                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
+                        <text class="stat-label">总时长</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">🔥</text>
+                        <text class="stat-value">≈{{ totalSugar.toFixed(1) }}g</text>
+                        <text class="stat-label">消耗糖分 (估算)</text>
+                    </view>
+                </view>
+
+                <!-- 食物对照 -->
+                <view v-if="sugarComparisons.length > 0" class="food-comparison-card">
+                    <view class="food-comparison-header">
+                        <text class="food-comparison-title">大约相当于</text>
+                        <text class="food-comparison-hint">这些食物的糖分 🍭</text>
+                    </view>
+
+                    <view class="food-list">
+                        <view
+                            v-for="(food, idx) in sugarComparisons"
+                            :key="idx"
+                            class="food-item"
+                        >
+                            <text class="food-emoji">{{ food.emoji }}</text>
+                            <view class="food-info">
+                                <text class="food-count">{{ food.count }}</text>
+                                <text class="food-name">{{ food.unit }}{{ food.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="action-row">
+                <button class="btn-share" open-type="share">
+                    <text class="share-icon">📤</text>
+                </button>
+                <button class="btn-secondary" @click="onContinue">继续训练</button>
+                <button class="btn-primary" @click="onRestart">再来一次</button>
+            </view>
+            </view>
+        </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onHide, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+
+type PresetId = 'light' | 'medium' | 'heavy'
+interface DumbbellPreset {
+    id: PresetId
+    bpm: number
+    met: number // 运动强度系数(用于估算糖分消耗)
+    label: string
+    desc: string
+}
+
+const DUMBBELL_PRESETS: readonly DumbbellPreset[] = [
+    { id: 'light', bpm: 50, met: 3.5, label: '轻度', desc: '热身 · 激活' },
+    { id: 'medium', bpm: 65, met: 5.0, label: '中度', desc: '日常 · 塑形' },
+    { id: 'heavy', bpm: 80, met: 6.5, label: '重度', desc: '强化 · 挑战' },
+]
+
+// 训练功效介绍(专业文案)
+const TRAINING_BENEFIT = {
+    muscles: ['肱二头肌', '三角肌', '胸大肌', '背阔肌'],
+    effect: '多角度抗阻训练上肢与肩背肌群，提升肌肉力量与耐力，雕塑手臂与肩部线条，增强骨密度，改善上肢日常功能。',
+}
+
+// 强度预估参考时长(选择"自由"目标时按此估算)
+const ESTIMATE_REF_MINUTES = 10
+
+const PRESET_ICONS: Record<PresetId, string> = {
+    light: '🌱',
+    medium: '💪',
+    heavy: '🔥',
+}
+
+// 画布指导视频
+const TUTORIAL_VIDEO_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260528/202605281739117bf3c2914.mp4'
+const TUTORIAL_POSTER_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/images/20260529/202605291142269212d9402.jpg'
+
+interface TargetOption {
+    minutes: 0 | 5 | 10 | 15
+    label: string
+}
+
+const TARGET_OPTIONS: readonly TargetOption[] = [
+    { minutes: 0, label: '自由' },
+    { minutes: 5, label: '5 分钟' },
+    { minutes: 10, label: '10 分钟' },
+    { minutes: 15, label: '15 分钟' },
+]
+
+// 里程碑奖励(纯视觉弹窗,无音效)
+interface MilestoneConfig {
+    emoji: string
+    title: string
+    desc: string
+    minReps: number
+    maxReps: number
+}
+
+const MILESTONES: MilestoneConfig[] = [
+    { emoji: '💪', title: '热身完成', desc: '肌肉已激活！', minReps: 8, maxReps: 12 },
+    { emoji: '🔥', title: '力量提升', desc: '动作很标准！', minReps: 15, maxReps: 20 },
+    { emoji: '⚡', title: '塑形进阶', desc: '线条感很棒！', minReps: 25, maxReps: 30 },
+    { emoji: '🏆', title: '完美收官', desc: '太强了！', minReps: 40, maxReps: 50 },
+]
+
+// 背景音乐 URL
+const BGM_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093709c669f4659.mp3'
+
+// 食物糖分对照表 (每100g含糖量)
+const FOOD_SUGAR_TABLE = [
+    { emoji: '🍬', name: '糖果', sugar: 95.0, unit: '颗', weight: 5 },     // 1颗糖果约5g
+    { emoji: '🍪', name: '饼干', sugar: 65.0, unit: '块', weight: 10 },    // 1块饼干约10g
+    { emoji: '🍫', name: '巧克力', sugar: 51.5, unit: '块', weight: 50 },  // 1块巧克力约50g
+    { emoji: '🍎', name: '苹果', sugar: 10.3, unit: '个', weight: 200 },   // 1个苹果约200g
+    { emoji: '🍌', name: '香蕉', sugar: 12.2, unit: '根', weight: 120 },   // 1根香蕉约120g
+    { emoji: '🍚', name: '米饭', sugar: 25.9, unit: '碗', weight: 150 },   // 1碗米饭约150g
+    { emoji: '🥤', name: '可乐', sugar: 10.6, unit: '罐', weight: 330 },   // 1罐可乐330ml
+]
+
+const currentPreset = ref<PresetId>('medium')
+const targetMinutes = ref<0 | 5 | 10 | 15>(0)
+const isPlaying = ref(false)
+const beatTimer = ref<number | null>(null)
+const showRewardPopup = ref(false)
+const showSummary = ref(false)
+const currentReward = ref<MilestoneConfig>(MILESTONES[0])
+const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmEnabled = ref(true) // BGM 开关
+
+// 训练统计
+const totalReps = ref(0) // 总次数
+const elapsedSeconds = ref(0) // 总时长(秒)
+const totalSugar = ref(0) // 总消耗糖分(克)
+const beatCount = ref(0) // 节拍计数
+const rewardIndex = ref(0) // 当前奖励索引
+const nextRewardAt = ref(0) // 下次奖励触发次数
+const startTime = ref(0)
+const timerInterval = ref<number | null>(null)
+
+// 获取当前档位配置
+const preset = computed(() => DUMBBELL_PRESETS.find(p => p.id === currentPreset.value) || DUMBBELL_PRESETS[1])
+const currentBpm = computed(() => preset.value.bpm)
+const currentMet = computed(() => preset.value.met)
+const benefitExpanded = ref(false)
+
+// 当前强度预估消耗文案: 按选中目标时长(自由→10分钟参考)估算
+const estimateText = computed(() => {
+    const mins = targetMinutes.value > 0 ? targetMinutes.value : ESTIMATE_REF_MINUTES
+    const sugar = (currentMet.value * 60 * (mins / 60)) / 4
+    const suffix = targetMinutes.value > 0 ? '' : '（按 10 分钟估算）'
+    return `${preset.value.label}训练 ${mins} 分钟，约消耗 ${sugar.toFixed(1)}g 糖分${suffix}`
+})
+
+// 示范视频跟随训练状态
+watch(isPlaying, (playing) => {
+    const videoCtx = uni.createVideoContext('dumbbellDemoVideo')
+    if (!videoCtx) return
+    if (playing) {
+        videoCtx.play()
+    } else {
+        videoCtx.pause()
+    }
+})
+
+const intervalMs = computed(() => 60000 / currentBpm.value)
+const hasStats = computed(() => isPlaying.value || totalReps.value > 0)
+const isPaused = computed(() => !isPlaying.value && totalReps.value > 0 && !showSummary.value)
+
+// 目标剩余秒数(targetMinutes=0 时返回 null,代表无目标)
+const remainingSeconds = computed<number | null>(() => {
+    if (targetMinutes.value === 0) return null
+    const total = targetMinutes.value * 60
+    return Math.max(0, total - elapsedSeconds.value)
+})
+
+// 环中心显示的提示文字
+const centerHintText = computed(() => (isPaused.value ? '点击继续' : '点击开始'))
+
+// 状态胶囊文字
+const statusText = computed(() => {
+    if (isPlaying.value) return '训练中'
+    if (isPaused.value) return '已暂停'
+    return '待开始'
+})
+
+// 分享文案
+const shareTitle = computed(() => {
+    if (totalReps.value === 0) return '哑铃训练 · 一起练起来'
+    return `刚刚完成 ${totalReps.value} 次哑铃训练，约消耗 ${totalSugar.value.toFixed(1)}g 糖分 💪`
+})
+
+
+const rootStyle = computed(() => ({
+    '--beat-duration': `${intervalMs.value}ms`,
+}))
+
+// 糖分对比 - 返回多个食物对照(显示用)
+const sugarComparisons = computed(() => {
+    if (totalSugar.value === 0) return []
+
+    const results: Array<{ emoji: string; name: string; count: string; unit: string }> = []
+
+    for (const food of FOOD_SUGAR_TABLE) {
+        const foodSugar = (food.sugar * food.weight) / 100
+        const count = totalSugar.value / foodSugar
+
+        // 选择 0.1 ~ 50 范围内的食物展示
+        if (count >= 0.1 && count <= 50) {
+            results.push({
+                emoji: food.emoji,
+                name: food.name,
+                count: count >= 10 ? Math.round(count).toString() : count.toFixed(1),
+                unit: food.unit,
+            })
+        }
+    }
+
+    // 最多展示 3 个
+    return results.slice(0, 3)
+})
+
+// 节拍回调
+function onBeat() {
+    beatCount.value++
+
+    // 每2拍算1次
+    if (beatCount.value % 2 === 0) {
+        totalReps.value++
+
+        // 检查是否触发奖励(递进式)
+        if (totalReps.value >= nextRewardAt.value && rewardIndex.value < MILESTONES.length) {
+            triggerReward()
+        }
+    }
+}
+
+// 计算消耗糖分(随训练强度变化)
+function calculateSugar(seconds: number): number {
+    const hours = seconds / 3600
+    const weight = 60
+    const calories = currentMet.value * weight * hours
+    return calories / 4
+}
+
+// 格式化时间
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+// 触发里程碑弹窗(无音效)
+function triggerReward() {
+    const reward = MILESTONES[rewardIndex.value]
+    currentReward.value = reward
+    triggerHaptic()
+    rewardIndex.value++
+
+    if (rewardIndex.value < MILESTONES.length) {
+        const nextReward = MILESTONES[rewardIndex.value]
+        const range = nextReward.maxReps - nextReward.minReps
+        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
+    }
+
+    setTimeout(() => {
+        showRewardPopup.value = true
+    }, 400)
+}
+
+function closeRewardPopup() {
+    showRewardPopup.value = false
+}
+
+function triggerHaptic() {
+    uni.vibrateShort({
+        type: 'medium',
+        fail: () => {
+            try { uni.vibrateShort({}) } catch (_) {}
+        },
+    } as any)
+}
+
+// 纯视觉节奏(无节拍音效)
+function startRhythm() {
+    stopRhythm()
+    isPlaying.value = true
+    const beatMs = 60000 / currentBpm.value
+    beatTimer.value = setInterval(onBeat, beatMs) as unknown as number
+}
+
+function stopRhythm() {
+    isPlaying.value = false
+    if (beatTimer.value) {
+        clearInterval(beatTimer.value)
+        beatTimer.value = null
+    }
+}
+
+// 启动背景音乐
+function startBgm() {
+    if (!bgmEnabled.value) return
+
+    // 如果已存在,直接 play
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.play()
+        } catch (_) {}
+        return
+    }
+
+    bgmAudioCtx.value = uni.createInnerAudioContext()
+    bgmAudioCtx.value.src = BGM_URL
+    bgmAudioCtx.value.loop = true
+    bgmAudioCtx.value.obeyMuteSwitch = false
+    bgmAudioCtx.value.volume = 0.4 // 背景音乐音量较低,不抢戏
+
+    try {
+        bgmAudioCtx.value.play()
+    } catch (_) {}
+}
+
+// 停止背景音乐
+function stopBgm() {
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.pause()
+        } catch (_) {}
+    }
+}
+
+// 切换 BGM 开关
+function toggleBgm() {
+    bgmEnabled.value = !bgmEnabled.value
+    if (bgmEnabled.value && isPlaying.value) {
+        startBgm()
+    } else {
+        stopBgm()
+    }
+}
+
+// 档位切换 - 仅训练中禁用(暂停时可重新选)
+function onPresetTap(id: PresetId) {
+    if (isPlaying.value) return
+    currentPreset.value = id
+    if (beatTimer.value) {
+        stopRhythm()
+        startRhythm()
+    }
+}
+
+// 训练目标切换 - 训练中禁用
+function onTargetTap(minutes: 0 | 5 | 10 | 15) {
+    if (isPlaying.value) return
+    targetMinutes.value = minutes
+}
+
+// 点击环:开始 / 暂停 / 继续(不再直接弹结算)
+function onTogglePlay() {
+    if (isPlaying.value) {
+        pauseTraining()
+    } else {
+        if (totalReps.value === 0) {
+            resetStats()
+        }
+        startTrainingInternal()
+    }
+}
+
+function startTrainingInternal() {
+    startRhythm()
+    startBgm()
+    startTimer()
+    uni.setKeepScreenOn({ keepScreenOn: true })
+}
+
+function pauseTraining() {
+    stopRhythm()
+    stopBgm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+}
+
+// 显式结束训练 - 弹结算页
+function onEndTraining() {
+    if (totalReps.value === 0) return
+    pauseTraining()
+    showSummary.value = true
+}
+
+function dismissSummary() {
+    showSummary.value = false
+}
+
+function onContinue() {
+    showSummary.value = false
+    startTrainingInternal()
+}
+
+// 再来一次
+function onRestart() {
+    showSummary.value = false
+    resetStats()
+    startTrainingInternal()
+}
+
+// 重置统计
+function resetStats() {
+    totalReps.value = 0
+    elapsedSeconds.value = 0
+    totalSugar.value = 0
+    beatCount.value = 0
+    rewardIndex.value = 0
+    startTime.value = Date.now()
+
+    // 设置第一个奖励的触发次数
+    const firstReward = MILESTONES[0]
+    const range = firstReward.maxReps - firstReward.minReps
+    nextRewardAt.value = firstReward.minReps + Math.floor(Math.random() * (range + 1))
+}
+
+// 启动计时器
+function startTimer() {
+    if (timerInterval.value) return
+
+    startTime.value = Date.now() - elapsedSeconds.value * 1000
+
+    timerInterval.value = setInterval(() => {
+        elapsedSeconds.value = Math.floor((Date.now() - startTime.value) / 1000)
+        totalSugar.value = calculateSugar(elapsedSeconds.value)
+
+        // 到达训练目标 → 自动结束
+        if (targetMinutes.value > 0 && elapsedSeconds.value >= targetMinutes.value * 60) {
+            onEndTraining()
+        }
+    }, 1000) as unknown as number
+}
+
+// 停止计时器
+function stopTimer() {
+    if (timerInterval.value) {
+        clearInterval(timerInterval.value)
+        timerInterval.value = null
+    }
+}
+
+onShareAppMessage(() => ({
+    title: shareTitle.value,
+    path: '/training/pages/dumbbell',
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+onShareTimeline(() => ({
+    title: shareTitle.value,
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+// 切出/卸载页面时强制释放所有媒体(含 BGM + 示范视频)
+function cleanupAllMedia() {
+    stopRhythm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+
+    try {
+        uni.createVideoContext('dumbbellDemoVideo')?.pause()
+    } catch (_) {}
+
+    if (bgmAudioCtx.value) {
+        try { bgmAudioCtx.value.stop() } catch (_) {}
+        try { bgmAudioCtx.value.destroy() } catch (_) {}
+        bgmAudioCtx.value = null
+    }
+}
+
+onHide(cleanupAllMedia)
+onUnload(cleanupAllMedia)
+</script>
+
+<style lang="scss" scoped>
+/* ============================================================
+ * 设计 token
+ * ============================================================ */
+$bg-color: #f8fafc;
+$card-bg: #ffffff;
+$card-border: rgba(15, 23, 42, 0.06);
+$text-1: #0f172a;
+$text-2: #475569;
+$text-3: #94a3b8;
+$brand: #3b82f6;        /* 主品牌色:蓝(哑铃力量主题) */
+$brand-soft: #dbeafe;   /* 浅蓝背景 */
+$brand-deep: #1d4ed8;   /* 深蓝文字 */
+$radius-card: 24rpx;
+$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+
+/* ============================================================
+ * 页面容器
+ * ============================================================ */
+.page {
+    position: relative;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 24rpx 28rpx calc(48rpx + env(safe-area-inset-bottom));
+    background: linear-gradient(180deg, #eff6ff 0%, $bg-color 28%, $bg-color 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 20rpx;
+    color: $text-1;
+    overflow-x: hidden;
+}
+
+/* ============================================================
+ * 页头
+ * ============================================================ */
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16rpx;
+    flex-shrink: 0;
+}
+
+.header-main {
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    flex: 1;
+    min-width: 0;
+}
+
+.page-title {
+    font-size: 40rpx;
+    font-weight: 800;
+    color: $text-1;
+    letter-spacing: 1rpx;
+    line-height: 1.2;
+}
+
+.page-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    line-height: 1.4;
+}
+
+.status-pill {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 10rpx 18rpx;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border: 2rpx solid $card-border;
+    box-shadow: $shadow-sm;
+
+    &.active {
+        background: $brand-soft;
+        border-color: rgba(59, 130, 246, 0.35);
+
+        .status-dot {
+            background: $brand;
+            box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.25);
+            animation: status-pulse 1.2s ease-in-out infinite;
+        }
+
+        .status-text {
+            color: $brand-deep;
+        }
+    }
+
+    &.paused {
+        background: #fef3c7;
+        border-color: rgba(245, 158, 11, 0.4);
+
+        .status-dot {
+            background: #f59e0b;
+        }
+
+        .status-text {
+            color: #92400e;
+        }
+    }
+}
+
+.status-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background: $text-3;
+}
+
+.status-text {
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $text-2;
+    white-space: nowrap;
+}
+
+@keyframes status-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.15);
+        opacity: 0.85;
+    }
+}
+
+/* ============================================================
+ * 画布区域
+ * ============================================================ */
+.stage-canvas-wrapper {
+    /* 用 calc 替代 100vw，避免右侧被裁切导致圆角不对称 */
+    width: calc(100% + 56rpx);
+    margin-left: -28rpx;
+    margin-right: -28rpx;
+    flex-shrink: 0;
+    height: 520rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border-radius: 0 0 40rpx 40rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 55%, #f1f5f9 100%);
+}
+
+/* ============================================================
+ * 握力环舞台(由 grip-ring-canvas 组件内联而来)
+ * ============================================================ */
+.ambient-glow {
+    position: absolute;
+    width: 1200rpx;
+    height: 1200rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background:
+        radial-gradient(circle,
+            rgba(191, 219, 254, 0.9) 0%,
+            rgba(219, 234, 254, 0.5) 30%,
+            rgba(241, 245, 249, 0.2) 55%,
+            transparent 72%);
+    pointer-events: none;
+}
+
+.ring-container {
+    position: relative;
+    width: 560rpx;
+    height: 560rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+.beat-halo {
+    position: absolute;
+    width: 560rpx;
+    height: 560rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+        rgba(59, 130, 246, 0.45) 0%,
+        rgba(96, 165, 250, 0.18) 38%,
+        rgba(59, 130, 246, 0) 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    will-change: transform, opacity;
+}
+
+.ring-container.playing .beat-halo {
+    opacity: 1;
+    animation: beat-pulse calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes beat-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 0.4;
+    }
+    50% {
+        transform: scale(0.86);
+        opacity: 0.95;
+    }
+}
+
+.video-ring {
+    position: relative;
+    width: 460rpx;
+    height: 460rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow:
+        0 20rpx 56rpx rgba(59, 130, 246, 0.35),
+        0 10rpx 28rpx rgba(96, 165, 250, 0.22);
+    will-change: transform;
+    z-index: 1;
+}
+
+.ring-container.playing .video-ring {
+    animation: video-squeeze calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes video-squeeze {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+}
+
+.demo-video {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #dbeafe;
+}
+
+.video-ring-border {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow:
+        inset 0 0 0 4rpx rgba(255, 255, 255, 0.6),
+        inset 0 8rpx 24rpx rgba(29, 78, 216, 0.25);
+}
+
+.center-hint {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    pointer-events: none;
+    z-index: 3;
+    animation: hint-fade-in 0.3s ease;
+}
+
+@keyframes hint-fade-in {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.hint-icon {
+    width: 116rpx;
+    height: 116rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    border: 3rpx solid rgba(255, 255, 255, 0.85);
+    border-radius: 50%;
+    box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.3);
+    animation: hint-bounce 2s ease-in-out infinite;
+    will-change: transform;
+}
+
+.play-triangle {
+    width: 0;
+    height: 0;
+    border-left: 34rpx solid #ffffff;
+    border-top: 23rpx solid transparent;
+    border-bottom: 23rpx solid transparent;
+    margin-left: 8rpx;
+}
+
+@keyframes hint-bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.06);
+    }
+}
+
+.hint-text {
+    font-size: 26rpx;
+    color: #ffffff;
+    font-weight: 700;
+    letter-spacing: 3rpx;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.55);
+}
+
+.bpm-chip {
+    position: absolute;
+    bottom: 24rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: baseline;
+    gap: 6rpx;
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    background: rgba(29, 78, 216, 0.78);
+    box-shadow: 0 6rpx 18rpx rgba(29, 78, 216, 0.35);
+    pointer-events: none;
+    z-index: 3;
+}
+
+.bpm-value {
+    font-size: 36rpx;
+    color: #ffffff;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -1rpx;
+    font-variant-numeric: tabular-nums;
+}
+
+.bpm-label {
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.85);
+    font-weight: 700;
+    letter-spacing: 2rpx;
+}
+
+.tap-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+}
+
+/* ============================================================
+ * BGM 开关
+ * ============================================================ */
+.bgm-toggle {
+    position: absolute;
+    top: 24rpx;
+    right: 28rpx;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 4rpx 16rpx rgba(0, 0, 0, 0.1),
+        0 0 0 2rpx rgba(59, 130, 246, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.2s ease;
+
+    &:active {
+        transform: scale(0.92);
+        background: #eff6ff;
+    }
+}
+
+.bgm-icon {
+    font-size: 36rpx;
+    line-height: 1;
+}
+
+/* ============================================================
+ * 进度显示
+ * ============================================================ */
+.progress-bar {
+    width: 100%;
+    background: $card-bg;
+    border-radius: $radius-card;
+    padding: 20rpx 24rpx;
+    box-shadow: $shadow-sm;
+    margin-bottom: 20rpx;
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.progress-label {
+    font-size: 26rpx;
+    color: $text-2;
+    font-weight: 600;
+}
+
+.progress-count {
+    font-size: 32rpx;
+    color: $brand-deep;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+ * 控制面板（统计 + 档位合一）
+ * ============================================================ */
+.control-deck {
+    width: 100%;
+    box-sizing: border-box;
+    background: $card-bg;
+    border-radius: 28rpx;
+    padding: 24rpx 20rpx 20rpx;
+    box-shadow:
+        0 8rpx 32rpx rgba(15, 23, 42, 0.06),
+        0 1rpx 0 rgba(255, 255, 255, 0.9) inset;
+    border: 2rpx solid rgba(255, 255, 255, 0.8);
+    transition: box-shadow 0.25s ease;
+
+    &.is-playing {
+        box-shadow:
+            0 12rpx 40rpx rgba(59, 130, 246, 0.12),
+            0 0 0 2rpx rgba(59, 130, 246, 0.12);
+    }
+}
+
+.stats-row {
+    display: flex;
+    gap: 12rpx;
+}
+
+.stat-chip {
+    flex: 1;
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 20rpx;
+    padding: 18rpx 8rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    border: 2rpx solid rgba(15, 23, 42, 0.04);
+}
+
+.stat-chip-label {
+    font-size: 20rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-chip-value {
+    font-size: 34rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+
+    &.muted {
+        color: #cbd5e1;
+        font-weight: 600;
+    }
+}
+
+.deck-divider {
+    height: 2rpx;
+    margin: 20rpx 8rpx 18rpx;
+    background: linear-gradient(90deg, transparent, $card-border, transparent);
+}
+
+.presets-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.presets-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.presets-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.presets-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.presets {
+    display: flex;
+    gap: 12rpx;
+}
+
+.preset {
+    flex: 1;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 20rpx;
+    padding: 20rpx 6rpx 18rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    transition: all 0.18s;
+
+    .preset-icon {
+        font-size: 32rpx;
+        line-height: 1;
+        margin-bottom: 4rpx;
+    }
+
+    .preset-name {
+        font-size: 26rpx;
+        font-weight: 700;
+        color: $text-1;
+    }
+    .preset-bpm {
+        font-size: 22rpx;
+        color: $text-2;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+    }
+    .preset-desc {
+        font-size: 18rpx;
+        color: $text-3;
+        text-align: center;
+        line-height: 1.3;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: linear-gradient(160deg, $brand-soft 0%, #ecfeff 100%);
+        border-color: $brand;
+        box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.15);
+
+        .preset-name,
+        .preset-bpm {
+            color: $brand-deep;
+        }
+        .preset-desc {
+            color: $brand;
+        }
+    }
+}
+
+/* ============================================================
+ * 训练目标 chips
+ * ============================================================ */
+.target-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.target-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.target-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.target-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.target-chips {
+    display: flex;
+    gap: 12rpx;
+}
+
+.target-chip {
+    flex: 1;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 16rpx;
+    transition: all 0.18s;
+
+    .target-chip-text {
+        font-size: 24rpx;
+        font-weight: 600;
+        color: $text-2;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: $brand-soft;
+        border-color: $brand;
+
+        .target-chip-text {
+            color: $brand-deep;
+        }
+    }
+}
+
+/* ============================================================
+ * 倒计时浮标
+ * ============================================================ */
+.countdown-badge {
+    position: absolute;
+    top: 24rpx;
+    left: 28rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8rpx 20rpx 10rpx;
+    border-radius: 16rpx;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.08),
+        0 0 0 2rpx rgba(59, 130, 246, 0.18);
+    z-index: 20;
+}
+
+.countdown-label {
+    font-size: 18rpx;
+    color: $text-3;
+    line-height: 1.1;
+}
+
+.countdown-value {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-top: 2rpx;
+}
+
+/* ============================================================
+ * 强度预估消耗
+ * ============================================================ */
+.intensity-estimate {
+    margin-top: 14rpx;
+    padding: 16rpx 20rpx;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    background: $brand-soft;
+    border-radius: 14rpx;
+}
+
+.estimate-icon {
+    font-size: 30rpx;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.estimate-text {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    letter-spacing: 0.5rpx;
+}
+
+/* ============================================================
+ * 训练功效(可折叠)
+ * ============================================================ */
+.benefit-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.benefit-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4rpx;
+
+    &:active {
+        opacity: 0.7;
+    }
+}
+
+.benefit-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.benefit-toggle {
+    font-size: 22rpx;
+    color: $brand-deep;
+    font-weight: 600;
+}
+
+.benefit-content {
+    margin-top: 14rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 20rpx;
+    background: #f8fafc;
+    border-radius: 16rpx;
+}
+
+.benefit-row {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+}
+
+.benefit-label {
+    font-size: 22rpx;
+    font-weight: 700;
+    color: $text-2;
+}
+
+.muscle-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.muscle-tag {
+    padding: 6rpx 18rpx;
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    background: $brand-soft;
+    border-radius: 999rpx;
+}
+
+.benefit-effect {
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: $text-2;
+}
+
+/* ============================================================
+ * 暂停态大按钮(老年友好,醒目易点)
+ * ============================================================ */
+.pause-actions {
+    margin-top: 20rpx;
+    display: flex;
+    gap: 16rpx;
+}
+
+.big-btn {
+    flex: 1;
+    height: 104rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    border-radius: 20rpx;
+    border: none;
+    padding: 0;
+    line-height: 1;
+
+    &::after {
+        border: none;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}
+
+.big-btn-icon {
+    font-size: 30rpx;
+    line-height: 1;
+}
+
+.big-btn-text {
+    font-size: 34rpx;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.big-btn-resume {
+    background: $brand;
+    color: #fff;
+    box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.32);
+}
+
+.big-btn-end {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 2rpx solid rgba(220, 38, 38, 0.3);
+
+    .big-btn-icon {
+        font-size: 26rpx;
+    }
+}
+
+/* ============================================================
+ * 完成浮层
+ * ============================================================ */
+.summary-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 900;
+    padding: 0 24rpx calc(32rpx + env(safe-area-inset-bottom));
+    animation: fade-in 0.2s ease;
+}
+
+/* ============================================================
+ * 奖励弹窗
+ * ============================================================ */
+.reward-popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fade-in 0.2s ease;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.reward-popup {
+    width: 560rpx;
+    background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
+    border-radius: 32rpx;
+    padding: 48rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20rpx;
+    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
+    animation: popup-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes popup-bounce {
+    0% {
+        transform: scale(0.8) translateY(40rpx);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+
+.reward-emoji {
+    font-size: 120rpx;
+    line-height: 1;
+    animation: emoji-pop 0.6s ease;
+}
+
+@keyframes emoji-pop {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+.reward-title {
+    font-size: 36rpx;
+    font-weight: 700;
+    color: $brand-deep;
+    letter-spacing: 2rpx;
+}
+
+.reward-desc {
+    font-size: 28rpx;
+    color: $text-2;
+    margin-bottom: 8rpx;
+}
+
+.reward-count {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-bottom: 12rpx;
+}
+
+.reward-btn {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+    background: $brand;
+    color: #fff;
+    border-radius: 999rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.3);
+    transition: all 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
+    }
+}
+
+/* ============================================================
+ * 训练完成卡片
+ * ============================================================ */
+.completion-card {
+    width: 100%;
+    max-width: 700rpx;
+    background: linear-gradient(135deg, #eff6ff, #dbeafe);
+    border-radius: 32rpx 32rpx 28rpx 28rpx;
+    padding: 40rpx 28rpx 36rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 28rpx;
+    align-items: center;
+    box-shadow:
+        0 -8rpx 48rpx rgba(15, 23, 42, 0.12),
+        0 8rpx 32rpx rgba(59, 130, 246, 0.08);
+    border: 2rpx solid rgba(59, 130, 246, 0.1);
+    animation: sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes sheet-up {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.completion-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.completion-emoji {
+    font-size: 80rpx;
+    line-height: 1;
+    margin-bottom: 8rpx;
+    animation: emoji-bounce 1.5s ease-in-out infinite;
+}
+
+@keyframes emoji-bounce {
+    0%, 100% {
+        transform: scale(1) rotate(0deg);
+    }
+    25% {
+        transform: scale(1.1) rotate(-5deg);
+    }
+    75% {
+        transform: scale(1.1) rotate(5deg);
+    }
+}
+
+.completion-title {
+    font-size: 36rpx;
+    color: $text-1;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.completion-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-top: 4rpx;
+}
+
+.completion-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+}
+
+/* 核心统计网格 */
+.stats-grid {
+    display: flex;
+    gap: 16rpx;
+    width: 100%;
+}
+
+.stat-item {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20rpx;
+    padding: 24rpx 12rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    box-shadow:
+        0 4rpx 12rpx rgba(15, 23, 42, 0.04),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8rpx);
+}
+
+.stat-icon {
+    font-size: 40rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
+}
+
+.stat-label {
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-value {
+    font-size: 36rpx;
+    font-weight: 800;
+    color: $text-1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+}
+
+/* ============================================================
+ * 食物对照卡片
+ * ============================================================ */
+.food-comparison-card {
+    background: linear-gradient(135deg, #eff6ff 0%, #fffbeb 100%);
+    border-radius: 20rpx;
+    padding: 28rpx 24rpx;
+    width: 100%;
+    box-shadow:
+        0 4rpx 16rpx rgba(251, 191, 36, 0.1),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    border: 2rpx solid rgba(251, 191, 36, 0.15);
+}
+
+.food-comparison-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    margin-bottom: 24rpx;
+}
+
+.food-comparison-title {
+    font-size: 26rpx;
+    color: #92400e;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+
+.food-comparison-hint {
+    font-size: 22rpx;
+    color: #b45309;
+    opacity: 0.8;
+}
+
+.food-list {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.food-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    padding: 16rpx 8rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 16rpx;
+    transition: transform 0.3s ease;
+}
+
+.food-item:active {
+    transform: scale(0.95);
+}
+
+.food-emoji {
+    font-size: 56rpx;
+    line-height: 1;
+    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.food-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rpx;
+}
+
+.food-count {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: #92400e;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+}
+
+.food-name {
+    font-size: 20rpx;
+    color: #b45309;
+    font-weight: 500;
+    letter-spacing: 1rpx;
+}
+
+.action-row {
+    display: flex;
+    gap: 16rpx;
+    justify-content: center;
+    width: 100%;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-share {
+    flex: 1;
+    border-radius: 999rpx;
+    font-size: 28rpx;
+    height: 88rpx;
+    line-height: 88rpx;
+    border: none;
+    padding: 0 16rpx;
+
+    &::after {
+        border: none;
+    }
+}
+
+.btn-primary {
+    background: $brand;
+    color: #fff;
+}
+
+.btn-secondary {
+    background: #fff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(59, 130, 246, 0.35);
+}
+
+.btn-share {
+    flex: 0 0 auto;
+    width: 88rpx;
+    padding: 0;
+    background: #eff6ff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(59, 130, 246, 0.25);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6rpx;
+    font-size: 24rpx;
+
+    .share-icon {
+        font-size: 30rpx;
+        line-height: 1;
+    }
+}
+</style>
diff --git a/TUICallKit-Vue3/training/pages/foot-pedal.vue b/TUICallKit-Vue3/training/pages/foot-pedal.vue
new file mode 100644
index 00000000..fefc7691
--- /dev/null
+++ b/TUICallKit-Vue3/training/pages/foot-pedal.vue
@@ -0,0 +1,1895 @@
+<template>
+    <view class="page" :style="rootStyle">
+        <!-- ===== 页头 ===== -->
+        <view class="page-header">
+            <view class="header-main">
+                <text class="page-title">脚蹬器训练</text>
+                <text class="page-subtitle">跟随示范 · 均匀蹬踏 · 激活下肢</text>
+            </view>
+            <view class="status-pill" :class="{ active: isPlaying, paused: isPaused }">
+                <view class="status-dot" />
+                <text class="status-text">{{ statusText }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 脚蹬器画布区域 ===== -->
+        <view class="stage-canvas-wrapper">
+            <view class="ambient-glow" />
+
+            <!-- 脚蹬器容器 -->
+            <view class="ring-container" :class="{ playing: isPlaying }">
+                <!-- 节拍光环 - 跟随 BPM 精确缩放 -->
+                <view class="beat-halo" />
+
+                <!-- 视频示范主体(圆形) -->
+                <view class="video-ring">
+                    <video
+                        id="footPedalDemoVideo"
+                        class="demo-video"
+                        :src="TUTORIAL_VIDEO_URL"
+                        :poster="TUTORIAL_POSTER_URL"
+                        muted
+                        loop
+                        :controls="false"
+                        :show-center-play-btn="false"
+                        :show-play-btn="false"
+                        :show-fullscreen-btn="false"
+                        :show-progress="false"
+                        :enable-progress-gesture="false"
+                        object-fit="cover"
+                    />
+                    <view class="video-ring-border" />
+                </view>
+
+                <!-- 中心提示(仅未开始时显示) -->
+                <view v-if="!isPlaying" class="center-hint">
+                    <view class="hint-icon">
+                        <view class="play-triangle" />
+                    </view>
+                    <text class="hint-text">{{ centerHintText }}</text>
+                </view>
+
+                <!-- BPM 角标(播放中) -->
+                <view v-else class="bpm-chip">
+                    <text class="bpm-value">{{ currentBpm }}</text>
+                    <text class="bpm-label">BPM</text>
+                </view>
+
+                <!-- 点击层(捕获点击切换训练状态) -->
+                <view class="tap-overlay" @click="onTogglePlay" />
+            </view>
+
+            <view class="bgm-toggle" @click="toggleBgm">
+                <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
+            </view>
+
+            <!-- 倒计时浮标(仅有目标且训练已开始时显示) -->
+            <view v-if="remainingSeconds !== null && hasStats" class="countdown-badge">
+                <text class="countdown-label">剩余</text>
+                <text class="countdown-value">{{ formatTime(remainingSeconds) }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 控制面板：统计 + 档位 + 目标 ===== -->
+        <view class="control-deck" :class="{ 'is-playing': isPlaying, 'is-paused': isPaused }">
+            <view class="stats-row">
+                <view class="stat-chip">
+                    <text class="stat-chip-label">次数</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? totalReps : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">时长</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? formatTime(elapsedSeconds) : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">糖分</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? `≈${totalSugar.toFixed(1)}g` : '—' }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="presets-block">
+                <view class="presets-header">
+                    <text class="presets-title">训练强度</text>
+                    <text v-if="isPlaying" class="presets-hint">训练中不可切换</text>
+                </view>
+                <view class="presets">
+                    <view
+                        v-for="p in FOOT_PEDAL_PRESETS"
+                        :key="p.id"
+                        class="preset"
+                        :class="{ active: currentPreset === p.id, disabled: isPlaying }"
+                        @click="onPresetTap(p.id)"
+                    >
+                        <text class="preset-icon">{{ PRESET_ICONS[p.id] }}</text>
+                        <text class="preset-name">{{ p.label }}</text>
+                        <text class="preset-bpm">{{ p.bpm }} BPM</text>
+                        <text class="preset-desc">{{ p.desc }}</text>
+                    </view>
+                </view>
+                <view class="intensity-estimate">
+                    <text class="estimate-icon">🔥</text>
+                    <text class="estimate-text">{{ estimateText }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="target-block">
+                <view class="target-header">
+                    <text class="target-title">训练目标</text>
+                    <text class="target-hint">到时间自动结束</text>
+                </view>
+                <view class="target-chips">
+                    <view
+                        v-for="t in TARGET_OPTIONS"
+                        :key="t.minutes"
+                        class="target-chip"
+                        :class="{ active: targetMinutes === t.minutes, disabled: isPlaying }"
+                        @click="onTargetTap(t.minutes)"
+                    >
+                        <text class="target-chip-text">{{ t.label }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 仅暂停时显示一行提示 + 结束训练文字链 -->
+            <view class="deck-divider" />
+
+            <!-- 训练功效介绍(可折叠) -->
+            <view class="benefit-block">
+                <view class="benefit-header" @click="benefitExpanded = !benefitExpanded">
+                    <text class="benefit-title">训练功效</text>
+                    <text class="benefit-toggle">{{ benefitExpanded ? '收起 ▲' : '展开 ▼' }}</text>
+                </view>
+                <view v-if="benefitExpanded" class="benefit-content">
+                    <view class="benefit-row">
+                        <text class="benefit-label">主要锻炼</text>
+                        <view class="muscle-tags">
+                            <text v-for="m in TRAINING_BENEFIT.muscles" :key="m" class="muscle-tag">{{ m }}</text>
+                        </view>
+                    </view>
+                    <view class="benefit-row">
+                        <text class="benefit-label">训练效果</text>
+                        <text class="benefit-effect">{{ TRAINING_BENEFIT.effect }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 暂停时显示醒目大按钮(老年友好) -->
+            <view v-if="isPaused" class="pause-actions">
+                <button class="big-btn big-btn-resume" @click="onTogglePlay">
+                    <text class="big-btn-icon">▶</text>
+                    <text class="big-btn-text">继续训练</text>
+                </button>
+                <button class="big-btn big-btn-end" @click="onEndTraining">
+                    <text class="big-btn-icon">■</text>
+                    <text class="big-btn-text">结束训练</text>
+                </button>
+            </view>
+        </view>
+    </view>
+
+    <!-- ===== 奖励弹窗 ===== -->
+    <view v-if="showRewardPopup" class="reward-popup-mask" @click="closeRewardPopup">
+            <view class="reward-popup" @click.stop>
+                <text class="reward-emoji">{{ currentReward.emoji }}</text>
+                <text class="reward-title">{{ currentReward.title }}</text>
+                <text class="reward-desc">{{ currentReward.desc }}</text>
+                <text class="reward-count">已完成 {{ totalReps }} 次</text>
+                <view class="reward-btn" @click="closeRewardPopup">继续加油</view>
+            </view>
+        </view>
+
+        <!-- ===== 训练完成（浮层） ===== -->
+        <view v-if="showSummary" class="summary-mask" @click="dismissSummary">
+            <view class="completion-card" @click.stop>
+            <view class="completion-header">
+                <text class="completion-emoji">🎉</text>
+                <text class="completion-title">训练完成</text>
+                <text class="completion-subtitle">辛苦啦,休息一下吧</text>
+            </view>
+
+            <view class="completion-content">
+                <!-- 核心统计 -->
+                <view class="stats-grid">
+                    <view class="stat-item">
+                        <text class="stat-icon">💪</text>
+                        <text class="stat-value">{{ totalReps }}</text>
+                        <text class="stat-label">总次数</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">⏱️</text>
+                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
+                        <text class="stat-label">总时长</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">🔥</text>
+                        <text class="stat-value">≈{{ totalSugar.toFixed(1) }}g</text>
+                        <text class="stat-label">消耗糖分 (估算)</text>
+                    </view>
+                </view>
+
+                <!-- 食物对照 -->
+                <view v-if="sugarComparisons.length > 0" class="food-comparison-card">
+                    <view class="food-comparison-header">
+                        <text class="food-comparison-title">大约相当于</text>
+                        <text class="food-comparison-hint">这些食物的糖分 🍭</text>
+                    </view>
+
+                    <view class="food-list">
+                        <view
+                            v-for="(food, idx) in sugarComparisons"
+                            :key="idx"
+                            class="food-item"
+                        >
+                            <text class="food-emoji">{{ food.emoji }}</text>
+                            <view class="food-info">
+                                <text class="food-count">{{ food.count }}</text>
+                                <text class="food-name">{{ food.unit }}{{ food.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="action-row">
+                <button class="btn-share" open-type="share">
+                    <text class="share-icon">📤</text>
+                </button>
+                <button class="btn-secondary" @click="onContinue">继续训练</button>
+                <button class="btn-primary" @click="onRestart">再来一次</button>
+            </view>
+            </view>
+        </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onHide, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+
+type PresetId = 'light' | 'medium' | 'heavy'
+interface FootPedalPreset {
+    id: PresetId
+    bpm: number
+    met: number // 运动强度系数(用于估算糖分消耗)
+    label: string
+    desc: string
+}
+
+const FOOT_PEDAL_PRESETS: readonly FootPedalPreset[] = [
+    { id: 'light', bpm: 55, met: 4.0, label: '轻度', desc: '热身 · 激活' },
+    { id: 'medium', bpm: 70, met: 5.5, label: '中度', desc: '日常 · 燃脂' },
+    { id: 'heavy', bpm: 85, met: 7.0, label: '重度', desc: '强化 · 挑战' },
+]
+
+// 训练功效介绍(专业文案)
+const TRAINING_BENEFIT = {
+    muscles: ['股四头肌', '腘绳肌', '小腿肌群', '臀大肌'],
+    effect: '低冲击有氧蹬踏，强化下肢肌力与心肺耐力，促进腿部血液循环、帮助燃脂塑形，特别适合久坐人群激活双腿。',
+}
+
+// 强度预估参考时长(选择"自由"目标时按此估算)
+const ESTIMATE_REF_MINUTES = 10
+
+const PRESET_ICONS: Record<PresetId, string> = {
+    light: '🌱',
+    medium: '💪',
+    heavy: '🔥',
+}
+
+// 画布指导视频
+const TUTORIAL_VIDEO_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260528/20260528173911fd8002487.mp4'
+const TUTORIAL_POSTER_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/images/20260529/2026052911251788eb49233.jpg'
+
+interface TargetOption {
+    minutes: 0 | 5 | 10 | 15
+    label: string
+}
+
+const TARGET_OPTIONS: readonly TargetOption[] = [
+    { minutes: 0, label: '自由' },
+    { minutes: 5, label: '5 分钟' },
+    { minutes: 10, label: '10 分钟' },
+    { minutes: 15, label: '15 分钟' },
+]
+
+// 里程碑奖励(纯视觉弹窗,无音效)
+interface MilestoneConfig {
+    emoji: string
+    title: string
+    desc: string
+    minReps: number
+    maxReps: number
+}
+
+const MILESTONES: MilestoneConfig[] = [
+    { emoji: '🦵', title: '腿部激活', desc: '热身到位！', minReps: 8, maxReps: 12 },
+    { emoji: '🔥', title: '燃脂加速', desc: '节奏很好！', minReps: 15, maxReps: 20 },
+    { emoji: '⚡', title: '耐力提升', desc: '坚持很棒！', minReps: 25, maxReps: 30 },
+    { emoji: '🏆', title: '完美收官', desc: '太厉害了！', minReps: 40, maxReps: 50 },
+]
+
+// 背景音乐 URL
+const BGM_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093709c669f4659.mp3'
+
+// 食物糖分对照表 (每100g含糖量)
+const FOOD_SUGAR_TABLE = [
+    { emoji: '🍬', name: '糖果', sugar: 95.0, unit: '颗', weight: 5 },     // 1颗糖果约5g
+    { emoji: '🍪', name: '饼干', sugar: 65.0, unit: '块', weight: 10 },    // 1块饼干约10g
+    { emoji: '🍫', name: '巧克力', sugar: 51.5, unit: '块', weight: 50 },  // 1块巧克力约50g
+    { emoji: '🍎', name: '苹果', sugar: 10.3, unit: '个', weight: 200 },   // 1个苹果约200g
+    { emoji: '🍌', name: '香蕉', sugar: 12.2, unit: '根', weight: 120 },   // 1根香蕉约120g
+    { emoji: '🍚', name: '米饭', sugar: 25.9, unit: '碗', weight: 150 },   // 1碗米饭约150g
+    { emoji: '🥤', name: '可乐', sugar: 10.6, unit: '罐', weight: 330 },   // 1罐可乐330ml
+]
+
+const currentPreset = ref<PresetId>('medium')
+const targetMinutes = ref<0 | 5 | 10 | 15>(0)
+const isPlaying = ref(false)
+const beatTimer = ref<number | null>(null)
+const showRewardPopup = ref(false)
+const showSummary = ref(false)
+const currentReward = ref<MilestoneConfig>(MILESTONES[0])
+const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmEnabled = ref(true) // BGM 开关
+
+// 训练统计
+const totalReps = ref(0) // 总次数
+const elapsedSeconds = ref(0) // 总时长(秒)
+const totalSugar = ref(0) // 总消耗糖分(克)
+const beatCount = ref(0) // 节拍计数
+const rewardIndex = ref(0) // 当前奖励索引
+const nextRewardAt = ref(0) // 下次奖励触发次数
+const startTime = ref(0)
+const timerInterval = ref<number | null>(null)
+
+// 获取当前档位配置
+const preset = computed(() => FOOT_PEDAL_PRESETS.find(p => p.id === currentPreset.value) || FOOT_PEDAL_PRESETS[1])
+const currentBpm = computed(() => preset.value.bpm)
+const currentMet = computed(() => preset.value.met)
+const benefitExpanded = ref(false)
+
+// 当前强度预估消耗文案: 按选中目标时长(自由→10分钟参考)估算
+const estimateText = computed(() => {
+    const mins = targetMinutes.value > 0 ? targetMinutes.value : ESTIMATE_REF_MINUTES
+    const sugar = (currentMet.value * 60 * (mins / 60)) / 4
+    const suffix = targetMinutes.value > 0 ? '' : '（按 10 分钟估算）'
+    return `${preset.value.label}训练 ${mins} 分钟，约消耗 ${sugar.toFixed(1)}g 糖分${suffix}`
+})
+
+// 示范视频跟随训练状态
+watch(isPlaying, (playing) => {
+    const videoCtx = uni.createVideoContext('footPedalDemoVideo')
+    if (!videoCtx) return
+    if (playing) {
+        videoCtx.play()
+    } else {
+        videoCtx.pause()
+    }
+})
+
+const intervalMs = computed(() => 60000 / currentBpm.value)
+const hasStats = computed(() => isPlaying.value || totalReps.value > 0)
+const isPaused = computed(() => !isPlaying.value && totalReps.value > 0 && !showSummary.value)
+
+// 目标剩余秒数(targetMinutes=0 时返回 null,代表无目标)
+const remainingSeconds = computed<number | null>(() => {
+    if (targetMinutes.value === 0) return null
+    const total = targetMinutes.value * 60
+    return Math.max(0, total - elapsedSeconds.value)
+})
+
+// 环中心显示的提示文字
+const centerHintText = computed(() => (isPaused.value ? '点击继续' : '点击开始'))
+
+// 状态胶囊文字
+const statusText = computed(() => {
+    if (isPlaying.value) return '训练中'
+    if (isPaused.value) return '已暂停'
+    return '待开始'
+})
+
+// 分享文案
+const shareTitle = computed(() => {
+    if (totalReps.value === 0) return '脚蹬器训练 · 一起练起来'
+    return `刚刚完成 ${totalReps.value} 次脚蹬训练，约消耗 ${totalSugar.value.toFixed(1)}g 糖分 🔥`
+})
+
+
+const rootStyle = computed(() => ({
+    '--beat-duration': `${intervalMs.value}ms`,
+}))
+
+// 糖分对比 - 返回多个食物对照(显示用)
+const sugarComparisons = computed(() => {
+    if (totalSugar.value === 0) return []
+
+    const results: Array<{ emoji: string; name: string; count: string; unit: string }> = []
+
+    for (const food of FOOD_SUGAR_TABLE) {
+        const foodSugar = (food.sugar * food.weight) / 100
+        const count = totalSugar.value / foodSugar
+
+        // 选择 0.1 ~ 50 范围内的食物展示
+        if (count >= 0.1 && count <= 50) {
+            results.push({
+                emoji: food.emoji,
+                name: food.name,
+                count: count >= 10 ? Math.round(count).toString() : count.toFixed(1),
+                unit: food.unit,
+            })
+        }
+    }
+
+    // 最多展示 3 个
+    return results.slice(0, 3)
+})
+
+// 节拍回调
+function onBeat() {
+    beatCount.value++
+
+    // 每2拍算1次
+    if (beatCount.value % 2 === 0) {
+        totalReps.value++
+
+        // 检查是否触发奖励(递进式)
+        if (totalReps.value >= nextRewardAt.value && rewardIndex.value < MILESTONES.length) {
+            triggerReward()
+        }
+    }
+}
+
+// 计算消耗糖分(随训练强度变化)
+function calculateSugar(seconds: number): number {
+    const hours = seconds / 3600
+    const weight = 60
+    const calories = currentMet.value * weight * hours
+    return calories / 4
+}
+
+// 格式化时间
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+// 触发里程碑弹窗(无音效)
+function triggerReward() {
+    const reward = MILESTONES[rewardIndex.value]
+    currentReward.value = reward
+    triggerHaptic()
+    rewardIndex.value++
+
+    if (rewardIndex.value < MILESTONES.length) {
+        const nextReward = MILESTONES[rewardIndex.value]
+        const range = nextReward.maxReps - nextReward.minReps
+        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
+    }
+
+    setTimeout(() => {
+        showRewardPopup.value = true
+    }, 400)
+}
+
+function closeRewardPopup() {
+    showRewardPopup.value = false
+}
+
+function triggerHaptic() {
+    uni.vibrateShort({
+        type: 'medium',
+        fail: () => {
+            try { uni.vibrateShort({}) } catch (_) {}
+        },
+    } as any)
+}
+
+// 纯视觉节奏(无节拍音效)
+function startRhythm() {
+    stopRhythm()
+    isPlaying.value = true
+    const beatMs = 60000 / currentBpm.value
+    beatTimer.value = setInterval(onBeat, beatMs) as unknown as number
+}
+
+function stopRhythm() {
+    isPlaying.value = false
+    if (beatTimer.value) {
+        clearInterval(beatTimer.value)
+        beatTimer.value = null
+    }
+}
+
+// 启动背景音乐
+function startBgm() {
+    if (!bgmEnabled.value) return
+
+    // 如果已存在,直接 play
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.play()
+        } catch (_) {}
+        return
+    }
+
+    bgmAudioCtx.value = uni.createInnerAudioContext()
+    bgmAudioCtx.value.src = BGM_URL
+    bgmAudioCtx.value.loop = true
+    bgmAudioCtx.value.obeyMuteSwitch = false
+    bgmAudioCtx.value.volume = 0.4 // 背景音乐音量较低,不抢戏
+
+    try {
+        bgmAudioCtx.value.play()
+    } catch (_) {}
+}
+
+// 停止背景音乐
+function stopBgm() {
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.pause()
+        } catch (_) {}
+    }
+}
+
+// 切换 BGM 开关
+function toggleBgm() {
+    bgmEnabled.value = !bgmEnabled.value
+    if (bgmEnabled.value && isPlaying.value) {
+        startBgm()
+    } else {
+        stopBgm()
+    }
+}
+
+// 档位切换 - 仅训练中禁用(暂停时可重新选)
+function onPresetTap(id: PresetId) {
+    if (isPlaying.value) return
+    currentPreset.value = id
+    if (beatTimer.value) {
+        stopRhythm()
+        startRhythm()
+    }
+}
+
+// 训练目标切换 - 训练中禁用
+function onTargetTap(minutes: 0 | 5 | 10 | 15) {
+    if (isPlaying.value) return
+    targetMinutes.value = minutes
+}
+
+// 点击环:开始 / 暂停 / 继续(不再直接弹结算)
+function onTogglePlay() {
+    if (isPlaying.value) {
+        pauseTraining()
+    } else {
+        if (totalReps.value === 0) {
+            resetStats()
+        }
+        startTrainingInternal()
+    }
+}
+
+function startTrainingInternal() {
+    startRhythm()
+    startBgm()
+    startTimer()
+    uni.setKeepScreenOn({ keepScreenOn: true })
+}
+
+function pauseTraining() {
+    stopRhythm()
+    stopBgm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+}
+
+// 显式结束训练 - 弹结算页
+function onEndTraining() {
+    if (totalReps.value === 0) return
+    pauseTraining()
+    showSummary.value = true
+}
+
+function dismissSummary() {
+    showSummary.value = false
+}
+
+function onContinue() {
+    showSummary.value = false
+    startTrainingInternal()
+}
+
+// 再来一次
+function onRestart() {
+    showSummary.value = false
+    resetStats()
+    startTrainingInternal()
+}
+
+// 重置统计
+function resetStats() {
+    totalReps.value = 0
+    elapsedSeconds.value = 0
+    totalSugar.value = 0
+    beatCount.value = 0
+    rewardIndex.value = 0
+    startTime.value = Date.now()
+
+    // 设置第一个奖励的触发次数
+    const firstReward = MILESTONES[0]
+    const range = firstReward.maxReps - firstReward.minReps
+    nextRewardAt.value = firstReward.minReps + Math.floor(Math.random() * (range + 1))
+}
+
+// 启动计时器
+function startTimer() {
+    if (timerInterval.value) return
+
+    startTime.value = Date.now() - elapsedSeconds.value * 1000
+
+    timerInterval.value = setInterval(() => {
+        elapsedSeconds.value = Math.floor((Date.now() - startTime.value) / 1000)
+        totalSugar.value = calculateSugar(elapsedSeconds.value)
+
+        // 到达训练目标 → 自动结束
+        if (targetMinutes.value > 0 && elapsedSeconds.value >= targetMinutes.value * 60) {
+            onEndTraining()
+        }
+    }, 1000) as unknown as number
+}
+
+// 停止计时器
+function stopTimer() {
+    if (timerInterval.value) {
+        clearInterval(timerInterval.value)
+        timerInterval.value = null
+    }
+}
+
+onShareAppMessage(() => ({
+    title: shareTitle.value,
+    path: '/training/pages/foot-pedal',
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+onShareTimeline(() => ({
+    title: shareTitle.value,
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+// 切出/卸载页面时强制释放所有媒体(含 BGM + 示范视频)
+function cleanupAllMedia() {
+    stopRhythm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+
+    try {
+        uni.createVideoContext('footPedalDemoVideo')?.pause()
+    } catch (_) {}
+
+    if (bgmAudioCtx.value) {
+        try { bgmAudioCtx.value.stop() } catch (_) {}
+        try { bgmAudioCtx.value.destroy() } catch (_) {}
+        bgmAudioCtx.value = null
+    }
+}
+
+onHide(cleanupAllMedia)
+onUnload(cleanupAllMedia)
+</script>
+
+<style lang="scss" scoped>
+/* ============================================================
+ * 设计 token
+ * ============================================================ */
+$bg-color: #f8fafc;
+$card-bg: #ffffff;
+$card-border: rgba(15, 23, 42, 0.06);
+$text-1: #0f172a;
+$text-2: #475569;
+$text-3: #94a3b8;
+$brand: #f97316;        /* 主品牌色:橙(脚蹬有氧主题) */
+$brand-soft: #ffedd5;   /* 浅橙背景 */
+$brand-deep: #c2410c;   /* 深橙文字 */
+$radius-card: 24rpx;
+$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+
+/* ============================================================
+ * 页面容器
+ * ============================================================ */
+.page {
+    position: relative;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 24rpx 28rpx calc(48rpx + env(safe-area-inset-bottom));
+    background: linear-gradient(180deg, #fff7ed 0%, $bg-color 28%, $bg-color 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 20rpx;
+    color: $text-1;
+    overflow-x: hidden;
+}
+
+/* ============================================================
+ * 页头
+ * ============================================================ */
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16rpx;
+    flex-shrink: 0;
+}
+
+.header-main {
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    flex: 1;
+    min-width: 0;
+}
+
+.page-title {
+    font-size: 40rpx;
+    font-weight: 800;
+    color: $text-1;
+    letter-spacing: 1rpx;
+    line-height: 1.2;
+}
+
+.page-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    line-height: 1.4;
+}
+
+.status-pill {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 10rpx 18rpx;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border: 2rpx solid $card-border;
+    box-shadow: $shadow-sm;
+
+    &.active {
+        background: $brand-soft;
+        border-color: rgba(249, 115, 22, 0.35);
+
+        .status-dot {
+            background: $brand;
+            box-shadow: 0 0 0 4rpx rgba(249, 115, 22, 0.25);
+            animation: status-pulse 1.2s ease-in-out infinite;
+        }
+
+        .status-text {
+            color: $brand-deep;
+        }
+    }
+
+    &.paused {
+        background: #fef3c7;
+        border-color: rgba(245, 158, 11, 0.4);
+
+        .status-dot {
+            background: #f59e0b;
+        }
+
+        .status-text {
+            color: #92400e;
+        }
+    }
+}
+
+.status-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background: $text-3;
+}
+
+.status-text {
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $text-2;
+    white-space: nowrap;
+}
+
+@keyframes status-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.15);
+        opacity: 0.85;
+    }
+}
+
+/* ============================================================
+ * 画布区域
+ * ============================================================ */
+.stage-canvas-wrapper {
+    /* 用 calc 替代 100vw，避免右侧被裁切导致圆角不对称 */
+    width: calc(100% + 56rpx);
+    margin-left: -28rpx;
+    margin-right: -28rpx;
+    flex-shrink: 0;
+    height: 520rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border-radius: 0 0 40rpx 40rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 55%, #f1f5f9 100%);
+}
+
+/* ============================================================
+ * 握力环舞台(由 grip-ring-canvas 组件内联而来)
+ * ============================================================ */
+.ambient-glow {
+    position: absolute;
+    width: 1200rpx;
+    height: 1200rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background:
+        radial-gradient(circle,
+            rgba(254, 215, 170, 0.9) 0%,
+            rgba(255, 237, 213, 0.5) 30%,
+            rgba(241, 245, 249, 0.2) 55%,
+            transparent 72%);
+    pointer-events: none;
+}
+
+.ring-container {
+    position: relative;
+    width: 560rpx;
+    height: 560rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+.beat-halo {
+    position: absolute;
+    width: 560rpx;
+    height: 560rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+        rgba(249, 115, 22, 0.45) 0%,
+        rgba(251, 146, 60, 0.18) 38%,
+        rgba(249, 115, 22, 0) 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    will-change: transform, opacity;
+}
+
+.ring-container.playing .beat-halo {
+    opacity: 1;
+    animation: beat-pulse calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes beat-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 0.4;
+    }
+    50% {
+        transform: scale(0.86);
+        opacity: 0.95;
+    }
+}
+
+.video-ring {
+    position: relative;
+    width: 460rpx;
+    height: 460rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow:
+        0 20rpx 56rpx rgba(249, 115, 22, 0.35),
+        0 10rpx 28rpx rgba(251, 146, 60, 0.22);
+    will-change: transform;
+    z-index: 1;
+}
+
+.ring-container.playing .video-ring {
+    animation: video-squeeze calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes video-squeeze {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+}
+
+.demo-video {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #ffedd5;
+}
+
+.video-ring-border {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow:
+        inset 0 0 0 4rpx rgba(255, 255, 255, 0.6),
+        inset 0 8rpx 24rpx rgba(194, 65, 12, 0.25);
+}
+
+.center-hint {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    pointer-events: none;
+    z-index: 3;
+    animation: hint-fade-in 0.3s ease;
+}
+
+@keyframes hint-fade-in {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.hint-icon {
+    width: 116rpx;
+    height: 116rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    border: 3rpx solid rgba(255, 255, 255, 0.85);
+    border-radius: 50%;
+    box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.3);
+    animation: hint-bounce 2s ease-in-out infinite;
+    will-change: transform;
+}
+
+.play-triangle {
+    width: 0;
+    height: 0;
+    border-left: 34rpx solid #ffffff;
+    border-top: 23rpx solid transparent;
+    border-bottom: 23rpx solid transparent;
+    margin-left: 8rpx;
+}
+
+@keyframes hint-bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.06);
+    }
+}
+
+.hint-text {
+    font-size: 26rpx;
+    color: #ffffff;
+    font-weight: 700;
+    letter-spacing: 3rpx;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.55);
+}
+
+.bpm-chip {
+    position: absolute;
+    bottom: 24rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: baseline;
+    gap: 6rpx;
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    background: rgba(194, 65, 12, 0.78);
+    box-shadow: 0 6rpx 18rpx rgba(194, 65, 12, 0.35);
+    pointer-events: none;
+    z-index: 3;
+}
+
+.bpm-value {
+    font-size: 36rpx;
+    color: #ffffff;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -1rpx;
+    font-variant-numeric: tabular-nums;
+}
+
+.bpm-label {
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.85);
+    font-weight: 700;
+    letter-spacing: 2rpx;
+}
+
+.tap-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+}
+
+/* ============================================================
+ * BGM 开关
+ * ============================================================ */
+.bgm-toggle {
+    position: absolute;
+    top: 24rpx;
+    right: 28rpx;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 4rpx 16rpx rgba(0, 0, 0, 0.1),
+        0 0 0 2rpx rgba(249, 115, 22, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.2s ease;
+
+    &:active {
+        transform: scale(0.92);
+        background: #fff7ed;
+    }
+}
+
+.bgm-icon {
+    font-size: 36rpx;
+    line-height: 1;
+}
+
+/* ============================================================
+ * 进度显示
+ * ============================================================ */
+.progress-bar {
+    width: 100%;
+    background: $card-bg;
+    border-radius: $radius-card;
+    padding: 20rpx 24rpx;
+    box-shadow: $shadow-sm;
+    margin-bottom: 20rpx;
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.progress-label {
+    font-size: 26rpx;
+    color: $text-2;
+    font-weight: 600;
+}
+
+.progress-count {
+    font-size: 32rpx;
+    color: $brand-deep;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+ * 控制面板（统计 + 档位合一）
+ * ============================================================ */
+.control-deck {
+    width: 100%;
+    box-sizing: border-box;
+    background: $card-bg;
+    border-radius: 28rpx;
+    padding: 24rpx 20rpx 20rpx;
+    box-shadow:
+        0 8rpx 32rpx rgba(15, 23, 42, 0.06),
+        0 1rpx 0 rgba(255, 255, 255, 0.9) inset;
+    border: 2rpx solid rgba(255, 255, 255, 0.8);
+    transition: box-shadow 0.25s ease;
+
+    &.is-playing {
+        box-shadow:
+            0 12rpx 40rpx rgba(249, 115, 22, 0.12),
+            0 0 0 2rpx rgba(249, 115, 22, 0.12);
+    }
+}
+
+.stats-row {
+    display: flex;
+    gap: 12rpx;
+}
+
+.stat-chip {
+    flex: 1;
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 20rpx;
+    padding: 18rpx 8rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    border: 2rpx solid rgba(15, 23, 42, 0.04);
+}
+
+.stat-chip-label {
+    font-size: 20rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-chip-value {
+    font-size: 34rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+
+    &.muted {
+        color: #cbd5e1;
+        font-weight: 600;
+    }
+}
+
+.deck-divider {
+    height: 2rpx;
+    margin: 20rpx 8rpx 18rpx;
+    background: linear-gradient(90deg, transparent, $card-border, transparent);
+}
+
+.presets-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.presets-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.presets-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.presets-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.presets {
+    display: flex;
+    gap: 12rpx;
+}
+
+.preset {
+    flex: 1;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 20rpx;
+    padding: 20rpx 6rpx 18rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    transition: all 0.18s;
+
+    .preset-icon {
+        font-size: 32rpx;
+        line-height: 1;
+        margin-bottom: 4rpx;
+    }
+
+    .preset-name {
+        font-size: 26rpx;
+        font-weight: 700;
+        color: $text-1;
+    }
+    .preset-bpm {
+        font-size: 22rpx;
+        color: $text-2;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+    }
+    .preset-desc {
+        font-size: 18rpx;
+        color: $text-3;
+        text-align: center;
+        line-height: 1.3;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: linear-gradient(160deg, $brand-soft 0%, #ecfeff 100%);
+        border-color: $brand;
+        box-shadow: 0 6rpx 16rpx rgba(249, 115, 22, 0.15);
+
+        .preset-name,
+        .preset-bpm {
+            color: $brand-deep;
+        }
+        .preset-desc {
+            color: $brand;
+        }
+    }
+}
+
+/* ============================================================
+ * 训练目标 chips
+ * ============================================================ */
+.target-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.target-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.target-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.target-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.target-chips {
+    display: flex;
+    gap: 12rpx;
+}
+
+.target-chip {
+    flex: 1;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 16rpx;
+    transition: all 0.18s;
+
+    .target-chip-text {
+        font-size: 24rpx;
+        font-weight: 600;
+        color: $text-2;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: $brand-soft;
+        border-color: $brand;
+
+        .target-chip-text {
+            color: $brand-deep;
+        }
+    }
+}
+
+/* ============================================================
+ * 倒计时浮标
+ * ============================================================ */
+.countdown-badge {
+    position: absolute;
+    top: 24rpx;
+    left: 28rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8rpx 20rpx 10rpx;
+    border-radius: 16rpx;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.08),
+        0 0 0 2rpx rgba(249, 115, 22, 0.18);
+    z-index: 20;
+}
+
+.countdown-label {
+    font-size: 18rpx;
+    color: $text-3;
+    line-height: 1.1;
+}
+
+.countdown-value {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-top: 2rpx;
+}
+
+/* ============================================================
+ * 强度预估消耗
+ * ============================================================ */
+.intensity-estimate {
+    margin-top: 14rpx;
+    padding: 16rpx 20rpx;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    background: $brand-soft;
+    border-radius: 14rpx;
+}
+
+.estimate-icon {
+    font-size: 30rpx;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.estimate-text {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    letter-spacing: 0.5rpx;
+}
+
+/* ============================================================
+ * 训练功效(可折叠)
+ * ============================================================ */
+.benefit-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.benefit-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4rpx;
+
+    &:active {
+        opacity: 0.7;
+    }
+}
+
+.benefit-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.benefit-toggle {
+    font-size: 22rpx;
+    color: $brand-deep;
+    font-weight: 600;
+}
+
+.benefit-content {
+    margin-top: 14rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 20rpx;
+    background: #f8fafc;
+    border-radius: 16rpx;
+}
+
+.benefit-row {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+}
+
+.benefit-label {
+    font-size: 22rpx;
+    font-weight: 700;
+    color: $text-2;
+}
+
+.muscle-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.muscle-tag {
+    padding: 6rpx 18rpx;
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    background: $brand-soft;
+    border-radius: 999rpx;
+}
+
+.benefit-effect {
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: $text-2;
+}
+
+/* ============================================================
+ * 暂停态大按钮(老年友好,醒目易点)
+ * ============================================================ */
+.pause-actions {
+    margin-top: 20rpx;
+    display: flex;
+    gap: 16rpx;
+}
+
+.big-btn {
+    flex: 1;
+    height: 104rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    border-radius: 20rpx;
+    border: none;
+    padding: 0;
+    line-height: 1;
+
+    &::after {
+        border: none;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}
+
+.big-btn-icon {
+    font-size: 30rpx;
+    line-height: 1;
+}
+
+.big-btn-text {
+    font-size: 34rpx;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.big-btn-resume {
+    background: $brand;
+    color: #fff;
+    box-shadow: 0 8rpx 20rpx rgba(249, 115, 22, 0.32);
+}
+
+.big-btn-end {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 2rpx solid rgba(220, 38, 38, 0.3);
+
+    .big-btn-icon {
+        font-size: 26rpx;
+    }
+}
+
+/* ============================================================
+ * 完成浮层
+ * ============================================================ */
+.summary-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 900;
+    padding: 0 24rpx calc(32rpx + env(safe-area-inset-bottom));
+    animation: fade-in 0.2s ease;
+}
+
+/* ============================================================
+ * 奖励弹窗
+ * ============================================================ */
+.reward-popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fade-in 0.2s ease;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.reward-popup {
+    width: 560rpx;
+    background: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
+    border-radius: 32rpx;
+    padding: 48rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20rpx;
+    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
+    animation: popup-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes popup-bounce {
+    0% {
+        transform: scale(0.8) translateY(40rpx);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+
+.reward-emoji {
+    font-size: 120rpx;
+    line-height: 1;
+    animation: emoji-pop 0.6s ease;
+}
+
+@keyframes emoji-pop {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+.reward-title {
+    font-size: 36rpx;
+    font-weight: 700;
+    color: $brand-deep;
+    letter-spacing: 2rpx;
+}
+
+.reward-desc {
+    font-size: 28rpx;
+    color: $text-2;
+    margin-bottom: 8rpx;
+}
+
+.reward-count {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-bottom: 12rpx;
+}
+
+.reward-btn {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+    background: $brand;
+    color: #fff;
+    border-radius: 999rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    box-shadow: 0 8rpx 20rpx rgba(249, 115, 22, 0.3);
+    transition: all 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.2);
+    }
+}
+
+/* ============================================================
+ * 训练完成卡片
+ * ============================================================ */
+.completion-card {
+    width: 100%;
+    max-width: 700rpx;
+    background: linear-gradient(135deg, #fff7ed, #ffedd5);
+    border-radius: 32rpx 32rpx 28rpx 28rpx;
+    padding: 40rpx 28rpx 36rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 28rpx;
+    align-items: center;
+    box-shadow:
+        0 -8rpx 48rpx rgba(15, 23, 42, 0.12),
+        0 8rpx 32rpx rgba(249, 115, 22, 0.08);
+    border: 2rpx solid rgba(249, 115, 22, 0.1);
+    animation: sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes sheet-up {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.completion-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.completion-emoji {
+    font-size: 80rpx;
+    line-height: 1;
+    margin-bottom: 8rpx;
+    animation: emoji-bounce 1.5s ease-in-out infinite;
+}
+
+@keyframes emoji-bounce {
+    0%, 100% {
+        transform: scale(1) rotate(0deg);
+    }
+    25% {
+        transform: scale(1.1) rotate(-5deg);
+    }
+    75% {
+        transform: scale(1.1) rotate(5deg);
+    }
+}
+
+.completion-title {
+    font-size: 36rpx;
+    color: $text-1;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.completion-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-top: 4rpx;
+}
+
+.completion-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+}
+
+/* 核心统计网格 */
+.stats-grid {
+    display: flex;
+    gap: 16rpx;
+    width: 100%;
+}
+
+.stat-item {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20rpx;
+    padding: 24rpx 12rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    box-shadow:
+        0 4rpx 12rpx rgba(15, 23, 42, 0.04),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8rpx);
+}
+
+.stat-icon {
+    font-size: 40rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
+}
+
+.stat-label {
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-value {
+    font-size: 36rpx;
+    font-weight: 800;
+    color: $text-1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+}
+
+/* ============================================================
+ * 食物对照卡片
+ * ============================================================ */
+.food-comparison-card {
+    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
+    border-radius: 20rpx;
+    padding: 28rpx 24rpx;
+    width: 100%;
+    box-shadow:
+        0 4rpx 16rpx rgba(251, 191, 36, 0.1),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    border: 2rpx solid rgba(251, 191, 36, 0.15);
+}
+
+.food-comparison-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    margin-bottom: 24rpx;
+}
+
+.food-comparison-title {
+    font-size: 26rpx;
+    color: #92400e;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+
+.food-comparison-hint {
+    font-size: 22rpx;
+    color: #b45309;
+    opacity: 0.8;
+}
+
+.food-list {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.food-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    padding: 16rpx 8rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 16rpx;
+    transition: transform 0.3s ease;
+}
+
+.food-item:active {
+    transform: scale(0.95);
+}
+
+.food-emoji {
+    font-size: 56rpx;
+    line-height: 1;
+    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.food-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rpx;
+}
+
+.food-count {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: #92400e;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+}
+
+.food-name {
+    font-size: 20rpx;
+    color: #b45309;
+    font-weight: 500;
+    letter-spacing: 1rpx;
+}
+
+.action-row {
+    display: flex;
+    gap: 16rpx;
+    justify-content: center;
+    width: 100%;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-share {
+    flex: 1;
+    border-radius: 999rpx;
+    font-size: 28rpx;
+    height: 88rpx;
+    line-height: 88rpx;
+    border: none;
+    padding: 0 16rpx;
+
+    &::after {
+        border: none;
+    }
+}
+
+.btn-primary {
+    background: $brand;
+    color: #fff;
+}
+
+.btn-secondary {
+    background: #fff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(249, 115, 22, 0.35);
+}
+
+.btn-share {
+    flex: 0 0 auto;
+    width: 88rpx;
+    padding: 0;
+    background: #fff7ed;
+    color: $brand-deep;
+    border: 2rpx solid rgba(249, 115, 22, 0.25);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6rpx;
+    font-size: 24rpx;
+
+    .share-icon {
+        font-size: 30rpx;
+        line-height: 1;
+    }
+}
+</style>
diff --git a/TUICallKit-Vue3/training/pages/grip-ring.vue b/TUICallKit-Vue3/training/pages/grip-ring.vue
index fa9aa76e..50735d5a 100644
--- a/TUICallKit-Vue3/training/pages/grip-ring.vue
+++ b/TUICallKit-Vue3/training/pages/grip-ring.vue
@@ -112,6 +112,11 @@
                         <text class="preset-desc">{{ p.desc }}</text>
                     </view>
                 </view>
+                <!-- 当前强度预估消耗 -->
+                <view class="intensity-estimate">
+                    <text class="estimate-icon">🔥</text>
+                    <text class="estimate-text">{{ estimateText }}</text>
+                </view>
             </view>
 
             <view class="deck-divider" />
@@ -134,10 +139,38 @@
                 </view>
             </view>
 
-            <!-- 仅暂停时显示一行提示 + 结束训练文字链 -->
-            <view v-if="isPaused" class="action-bar">
-                <text class="paused-hint-text">已暂停 · 点击握力环继续</text>
-                <text class="end-link" @click="onEndTraining">结束训练 ›</text>
+            <view class="deck-divider" />
+
+            <!-- 训练功效介绍(可折叠) -->
+            <view class="benefit-block">
+                <view class="benefit-header" @click="benefitExpanded = !benefitExpanded">
+                    <text class="benefit-title">训练功效</text>
+                    <text class="benefit-toggle">{{ benefitExpanded ? '收起 ▲' : '展开 ▼' }}</text>
+                </view>
+                <view v-if="benefitExpanded" class="benefit-content">
+                    <view class="benefit-row">
+                        <text class="benefit-label">主要锻炼</text>
+                        <view class="muscle-tags">
+                            <text v-for="m in TRAINING_BENEFIT.muscles" :key="m" class="muscle-tag">{{ m }}</text>
+                        </view>
+                    </view>
+                    <view class="benefit-row">
+                        <text class="benefit-label">训练效果</text>
+                        <text class="benefit-effect">{{ TRAINING_BENEFIT.effect }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 暂停时显示醒目大按钮(老年友好) -->
+            <view v-if="isPaused" class="pause-actions">
+                <button class="big-btn big-btn-resume" @click="onTogglePlay">
+                    <text class="big-btn-icon">▶</text>
+                    <text class="big-btn-text">继续训练</text>
+                </button>
+                <button class="big-btn big-btn-end" @click="onEndTraining">
+                    <text class="big-btn-icon">■</text>
+                    <text class="big-btn-text">结束训练</text>
+                </button>
             </view>
         </view>
     </view>
@@ -218,7 +251,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { onShow, onHide, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onShow, onHide, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import { useMetronome } from '../hooks/useMetronome'
 import CrushCanvas from './components/crush-canvas.vue'
 
@@ -226,16 +259,26 @@ type PresetId = 'light' | 'medium' | 'heavy'
 interface GripPreset {
     id: PresetId
     bpm: number
+    met: number // 运动强度系数(用于估算糖分消耗)
     label: string
     desc: string
 }
 
 const GRIP_PRESETS: readonly GripPreset[] = [
-    { id: 'light', bpm: 60, label: '轻度', desc: '热身 · 恢复' },
-    { id: 'medium', bpm: 80, label: '中度', desc: '日常 · 锻炼' },
-    { id: 'heavy', bpm: 100, label: '重度', desc: '强化 · 挑战' },
+    { id: 'light', bpm: 60, met: 2.5, label: '轻度', desc: '热身 · 恢复' },
+    { id: 'medium', bpm: 80, met: 3.5, label: '中度', desc: '日常 · 锻炼' },
+    { id: 'heavy', bpm: 100, met: 4.5, label: '重度', desc: '强化 · 挑战' },
 ]
 
+// 训练功效介绍(专业文案)
+const TRAINING_BENEFIT = {
+    muscles: ['前臂屈肌', '手部小肌群', '握力'],
+    effect: '增强握力与前臂肌肉耐力，促进手部血液循环，缓解手指与腕部僵硬，适合日常碎片化锻炼及手部功能康复。',
+}
+
+// 强度预估参考时长(选择"自由"目标时按此估算)
+const ESTIMATE_REF_MINUTES = 10
+
 const PRESET_ICONS: Record<PresetId, string> = {
     light: '🌱',
     medium: '💪',
@@ -347,6 +390,16 @@ const timerInterval = ref<number | null>(null)
 // 获取当前档位配置
 const preset = computed(() => GRIP_PRESETS.find(p => p.id === currentPreset.value) || GRIP_PRESETS[1])
 const currentBpm = computed(() => preset.value.bpm)
+const currentMet = computed(() => preset.value.met)
+const benefitExpanded = ref(false)
+
+// 当前强度预估消耗文案: 按选中目标时长(自由→10分钟参考)估算
+const estimateText = computed(() => {
+    const mins = targetMinutes.value > 0 ? targetMinutes.value : ESTIMATE_REF_MINUTES
+    const sugar = (currentMet.value * 60 * (mins / 60)) / 4
+    const suffix = targetMinutes.value > 0 ? '' : '（按 10 分钟估算）'
+    return `${preset.value.label}训练 ${mins} 分钟，约消耗 ${sugar.toFixed(1)}g 糖分${suffix}`
+})
 
 const metronome = useMetronome({
     initialBpm: currentBpm.value,
@@ -440,14 +493,12 @@ function onBeat() {
     }
 }
 
-// 计算消耗糖分
-// 握力环训练 MET ≈ 3.5, 消耗卡路里 = MET × 体重(kg) × 时长(小时)
-// 1g 糖分 ≈ 4 kcal, 所以 糖分(g) = 卡路里 / 4
+// 计算消耗糖分(随训练强度变化)
+// 消耗卡路里 = MET × 体重(kg) × 时长(小时); 1g 糖分 ≈ 4 kcal
 function calculateSugar(seconds: number): number {
     const hours = seconds / 3600
     const weight = 60 // 默认体重60kg
-    const met = 3.5
-    const calories = met * weight * hours
+    const calories = currentMet.value * weight * hours
     return calories / 4 // 转换为糖分(克)
 }
 
@@ -676,21 +727,25 @@ onShow(() => {
 onShareAppMessage(() => ({
     title: shareTitle.value,
     path: '/training/pages/grip-ring',
+    imageUrl: TUTORIAL_POSTER_URL,
 }))
 
 // 分享到朋友圈
 onShareTimeline(() => ({
     title: shareTitle.value,
+    imageUrl: TUTORIAL_POSTER_URL,
 }))
 
-onHide(() => {
-    // 切出页面 → 自动暂停训练 + 强制停掉所有音频
-    // 不依赖 isPlaying 判断: 暂停/结算态也可能有未释放的音频实例
-    // requiredBackgroundModes:['audio'] 下,InnerAudioContext.pause 不一定立即生效,这里用 stop+destroy 兜底
+// 切出/卸载页面时强制释放所有媒体(含 BGM + 节拍 + 示范视频)
+function cleanupAllMedia() {
     try { metronome.stop() } catch (_) {}
     stopTimer()
     uni.setKeepScreenOn({ keepScreenOn: false })
 
+    try {
+        uni.createVideoContext('gripDemoVideo')?.pause()
+    } catch (_) {}
+
     if (bgmAudioCtx.value) {
         try { bgmAudioCtx.value.stop() } catch (_) {}
         try { bgmAudioCtx.value.destroy() } catch (_) {}
@@ -701,7 +756,10 @@ onHide(() => {
         try { crushAudioCtx.value.destroy() } catch (_) {}
         crushAudioCtx.value = null
     }
-})
+}
+
+onHide(cleanupAllMedia)
+onUnload(cleanupAllMedia)
 </script>
 
 <style lang="scss" scoped>
@@ -1378,35 +1436,159 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }
 
 /* ============================================================
- * 控制面板底部操作（仅暂停时显示）
+ * 强度预估消耗
  * ============================================================ */
-.action-bar {
-    margin-top: 18rpx;
-    padding: 14rpx 4rpx 2rpx;
+.intensity-estimate {
+    margin-top: 14rpx;
+    padding: 16rpx 20rpx;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    background: $brand-soft;
+    border-radius: 14rpx;
+}
+
+.estimate-icon {
+    font-size: 30rpx;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.estimate-text {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    letter-spacing: 0.5rpx;
+}
+
+/* ============================================================
+ * 训练功效(可折叠)
+ * ============================================================ */
+.benefit-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.benefit-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12rpx;
-    border-top: 2rpx dashed rgba(15, 23, 42, 0.06);
-}
-
-.paused-hint-text {
-    flex: 1;
-    font-size: 22rpx;
-    color: $text-3;
-    letter-spacing: 1rpx;
-}
-
-.end-link {
-    flex-shrink: 0;
-    padding: 8rpx 4rpx;
-    font-size: 24rpx;
-    color: $text-2;
-    font-weight: 500;
-    letter-spacing: 1rpx;
+    padding: 4rpx;
 
     &:active {
-        color: $text-1;
+        opacity: 0.7;
+    }
+}
+
+.benefit-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.benefit-toggle {
+    font-size: 22rpx;
+    color: $brand-deep;
+    font-weight: 600;
+}
+
+.benefit-content {
+    margin-top: 14rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 20rpx;
+    background: #f8fafc;
+    border-radius: 16rpx;
+}
+
+.benefit-row {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+}
+
+.benefit-label {
+    font-size: 22rpx;
+    font-weight: 700;
+    color: $text-2;
+}
+
+.muscle-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.muscle-tag {
+    padding: 6rpx 18rpx;
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    background: $brand-soft;
+    border-radius: 999rpx;
+}
+
+.benefit-effect {
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: $text-2;
+}
+
+/* ============================================================
+ * 暂停态大按钮(老年友好,醒目易点)
+ * ============================================================ */
+.pause-actions {
+    margin-top: 20rpx;
+    display: flex;
+    gap: 16rpx;
+}
+
+.big-btn {
+    flex: 1;
+    height: 104rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    border-radius: 20rpx;
+    border: none;
+    padding: 0;
+    line-height: 1;
+
+    &::after {
+        border: none;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}
+
+.big-btn-icon {
+    font-size: 30rpx;
+    line-height: 1;
+}
+
+.big-btn-text {
+    font-size: 34rpx;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.big-btn-resume {
+    background: $brand;
+    color: #fff;
+    box-shadow: 0 8rpx 20rpx rgba(20, 184, 166, 0.32);
+}
+
+.big-btn-end {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 2rpx solid rgba(220, 38, 38, 0.3);
+
+    .big-btn-icon {
+        font-size: 26rpx;
     }
 }
 
diff --git a/TUICallKit-Vue3/training/pages/metronome.vue b/TUICallKit-Vue3/training/pages/metronome.vue
index 8eb6f68d..81f4ed28 100644
--- a/TUICallKit-Vue3/training/pages/metronome.vue
+++ b/TUICallKit-Vue3/training/pages/metronome.vue
@@ -86,7 +86,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { onShow, onHide } from '@dcloudio/uni-app'
+import { onShow, onHide, onUnload } from '@dcloudio/uni-app'
 import { useMetronome } from '../hooks/useMetronome'
 import WalkerCanvas from './components/walker-canvas.vue'
 
@@ -206,15 +206,15 @@ onShow(() => {
     fg.preload()
 })
 
-onHide(() => {
+function cleanupMetronome() {
     fg.stop()
     uni.setKeepScreenOn({ keepScreenOn: false })
-})
+}
 
-onUnmounted(() => {
-    fg.stop()
-    uni.setKeepScreenOn({ keepScreenOn: false })
-})
+onHide(cleanupMetronome)
+onUnload(cleanupMetronome)
+
+onUnmounted(cleanupMetronome)
 </script>
 
 <style lang="scss" scoped>
diff --git a/TUICallKit-Vue3/training/pages/pilates-ring.vue b/TUICallKit-Vue3/training/pages/pilates-ring.vue
new file mode 100644
index 00000000..4fa48331
--- /dev/null
+++ b/TUICallKit-Vue3/training/pages/pilates-ring.vue
@@ -0,0 +1,1895 @@
+<template>
+    <view class="page" :style="rootStyle">
+        <!-- ===== 页头 ===== -->
+        <view class="page-header">
+            <view class="header-main">
+                <text class="page-title">瑜伽环训练</text>
+                <text class="page-subtitle">跟随示范 · 控制呼吸 · 稳定核心</text>
+            </view>
+            <view class="status-pill" :class="{ active: isPlaying, paused: isPaused }">
+                <view class="status-dot" />
+                <text class="status-text">{{ statusText }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 瑜伽环画布区域 ===== -->
+        <view class="stage-canvas-wrapper">
+            <view class="ambient-glow" />
+
+            <!-- 瑜伽环容器 -->
+            <view class="ring-container" :class="{ playing: isPlaying }">
+                <!-- 节拍光环 - 跟随 BPM 精确缩放 -->
+                <view class="beat-halo" />
+
+                <!-- 视频示范主体(圆形) -->
+                <view class="video-ring">
+                    <video
+                        id="pilatesDemoVideo"
+                        class="demo-video"
+                        :src="TUTORIAL_VIDEO_URL"
+                        :poster="TUTORIAL_POSTER_URL"
+                        muted
+                        loop
+                        :controls="false"
+                        :show-center-play-btn="false"
+                        :show-play-btn="false"
+                        :show-fullscreen-btn="false"
+                        :show-progress="false"
+                        :enable-progress-gesture="false"
+                        object-fit="cover"
+                    />
+                    <view class="video-ring-border" />
+                </view>
+
+                <!-- 中心提示(仅未开始时显示) -->
+                <view v-if="!isPlaying" class="center-hint">
+                    <view class="hint-icon">
+                        <view class="play-triangle" />
+                    </view>
+                    <text class="hint-text">{{ centerHintText }}</text>
+                </view>
+
+                <!-- BPM 角标(播放中) -->
+                <view v-else class="bpm-chip">
+                    <text class="bpm-value">{{ currentBpm }}</text>
+                    <text class="bpm-label">BPM</text>
+                </view>
+
+                <!-- 点击层(捕获点击切换训练状态) -->
+                <view class="tap-overlay" @click="onTogglePlay" />
+            </view>
+
+            <view class="bgm-toggle" @click="toggleBgm">
+                <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
+            </view>
+
+            <!-- 倒计时浮标(仅有目标且训练已开始时显示) -->
+            <view v-if="remainingSeconds !== null && hasStats" class="countdown-badge">
+                <text class="countdown-label">剩余</text>
+                <text class="countdown-value">{{ formatTime(remainingSeconds) }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 控制面板：统计 + 档位 + 目标 ===== -->
+        <view class="control-deck" :class="{ 'is-playing': isPlaying, 'is-paused': isPaused }">
+            <view class="stats-row">
+                <view class="stat-chip">
+                    <text class="stat-chip-label">次数</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? totalReps : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">时长</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? formatTime(elapsedSeconds) : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">糖分</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? `≈${totalSugar.toFixed(1)}g` : '—' }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="presets-block">
+                <view class="presets-header">
+                    <text class="presets-title">训练强度</text>
+                    <text v-if="isPlaying" class="presets-hint">训练中不可切换</text>
+                </view>
+                <view class="presets">
+                    <view
+                        v-for="p in PILATES_PRESETS"
+                        :key="p.id"
+                        class="preset"
+                        :class="{ active: currentPreset === p.id, disabled: isPlaying }"
+                        @click="onPresetTap(p.id)"
+                    >
+                        <text class="preset-icon">{{ PRESET_ICONS[p.id] }}</text>
+                        <text class="preset-name">{{ p.label }}</text>
+                        <text class="preset-bpm">{{ p.bpm }} BPM</text>
+                        <text class="preset-desc">{{ p.desc }}</text>
+                    </view>
+                </view>
+                <view class="intensity-estimate">
+                    <text class="estimate-icon">🔥</text>
+                    <text class="estimate-text">{{ estimateText }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="target-block">
+                <view class="target-header">
+                    <text class="target-title">训练目标</text>
+                    <text class="target-hint">到时间自动结束</text>
+                </view>
+                <view class="target-chips">
+                    <view
+                        v-for="t in TARGET_OPTIONS"
+                        :key="t.minutes"
+                        class="target-chip"
+                        :class="{ active: targetMinutes === t.minutes, disabled: isPlaying }"
+                        @click="onTargetTap(t.minutes)"
+                    >
+                        <text class="target-chip-text">{{ t.label }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 仅暂停时显示一行提示 + 结束训练文字链 -->
+            <view class="deck-divider" />
+
+            <!-- 训练功效介绍(可折叠) -->
+            <view class="benefit-block">
+                <view class="benefit-header" @click="benefitExpanded = !benefitExpanded">
+                    <text class="benefit-title">训练功效</text>
+                    <text class="benefit-toggle">{{ benefitExpanded ? '收起 ▲' : '展开 ▼' }}</text>
+                </view>
+                <view v-if="benefitExpanded" class="benefit-content">
+                    <view class="benefit-row">
+                        <text class="benefit-label">主要锻炼</text>
+                        <view class="muscle-tags">
+                            <text v-for="m in TRAINING_BENEFIT.muscles" :key="m" class="muscle-tag">{{ m }}</text>
+                        </view>
+                    </view>
+                    <view class="benefit-row">
+                        <text class="benefit-label">训练效果</text>
+                        <text class="benefit-effect">{{ TRAINING_BENEFIT.effect }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 暂停时显示醒目大按钮(老年友好) -->
+            <view v-if="isPaused" class="pause-actions">
+                <button class="big-btn big-btn-resume" @click="onTogglePlay">
+                    <text class="big-btn-icon">▶</text>
+                    <text class="big-btn-text">继续训练</text>
+                </button>
+                <button class="big-btn big-btn-end" @click="onEndTraining">
+                    <text class="big-btn-icon">■</text>
+                    <text class="big-btn-text">结束训练</text>
+                </button>
+            </view>
+        </view>
+    </view>
+
+    <!-- ===== 奖励弹窗 ===== -->
+    <view v-if="showRewardPopup" class="reward-popup-mask" @click="closeRewardPopup">
+            <view class="reward-popup" @click.stop>
+                <text class="reward-emoji">{{ currentReward.emoji }}</text>
+                <text class="reward-title">{{ currentReward.title }}</text>
+                <text class="reward-desc">{{ currentReward.desc }}</text>
+                <text class="reward-count">已完成 {{ totalReps }} 次</text>
+                <view class="reward-btn" @click="closeRewardPopup">继续加油</view>
+            </view>
+        </view>
+
+        <!-- ===== 训练完成（浮层） ===== -->
+        <view v-if="showSummary" class="summary-mask" @click="dismissSummary">
+            <view class="completion-card" @click.stop>
+            <view class="completion-header">
+                <text class="completion-emoji">🎉</text>
+                <text class="completion-title">训练完成</text>
+                <text class="completion-subtitle">辛苦啦,休息一下吧</text>
+            </view>
+
+            <view class="completion-content">
+                <!-- 核心统计 -->
+                <view class="stats-grid">
+                    <view class="stat-item">
+                        <text class="stat-icon">💪</text>
+                        <text class="stat-value">{{ totalReps }}</text>
+                        <text class="stat-label">总次数</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">⏱️</text>
+                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
+                        <text class="stat-label">总时长</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-icon">🔥</text>
+                        <text class="stat-value">≈{{ totalSugar.toFixed(1) }}g</text>
+                        <text class="stat-label">消耗糖分 (估算)</text>
+                    </view>
+                </view>
+
+                <!-- 食物对照 -->
+                <view v-if="sugarComparisons.length > 0" class="food-comparison-card">
+                    <view class="food-comparison-header">
+                        <text class="food-comparison-title">大约相当于</text>
+                        <text class="food-comparison-hint">这些食物的糖分 🍭</text>
+                    </view>
+
+                    <view class="food-list">
+                        <view
+                            v-for="(food, idx) in sugarComparisons"
+                            :key="idx"
+                            class="food-item"
+                        >
+                            <text class="food-emoji">{{ food.emoji }}</text>
+                            <view class="food-info">
+                                <text class="food-count">{{ food.count }}</text>
+                                <text class="food-name">{{ food.unit }}{{ food.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="action-row">
+                <button class="btn-share" open-type="share">
+                    <text class="share-icon">📤</text>
+                </button>
+                <button class="btn-secondary" @click="onContinue">继续训练</button>
+                <button class="btn-primary" @click="onRestart">再来一次</button>
+            </view>
+            </view>
+        </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onHide, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+
+type PresetId = 'light' | 'medium' | 'heavy'
+interface PilatesPreset {
+    id: PresetId
+    bpm: number
+    met: number // 运动强度系数(用于估算糖分消耗)
+    label: string
+    desc: string
+}
+
+const PILATES_PRESETS: readonly PilatesPreset[] = [
+    { id: 'light', bpm: 50, met: 3.0, label: '轻度', desc: '热身 · 激活' },
+    { id: 'medium', bpm: 65, met: 4.0, label: '中度', desc: '日常 · 塑形' },
+    { id: 'heavy', bpm: 80, met: 5.0, label: '重度', desc: '强化 · 挑战' },
+]
+
+// 训练功效介绍(专业文案)
+const TRAINING_BENEFIT = {
+    muscles: ['核心肌群', '盆底肌', '大腿内侧', '臀部'],
+    effect: '通过持续抗阻收紧核心与盆底肌，强化深层稳定肌群，改善体态、收紧腹部与腿部线条，提升身体协调性与柔韧度。',
+}
+
+// 强度预估参考时长(选择"自由"目标时按此估算)
+const ESTIMATE_REF_MINUTES = 10
+
+const PRESET_ICONS: Record<PresetId, string> = {
+    light: '🌱',
+    medium: '💪',
+    heavy: '🔥',
+}
+
+// 画布指导视频
+const TUTORIAL_VIDEO_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260528/202605281739110fa2d3784.mp4'
+const TUTORIAL_POSTER_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/images/20260529/2026052911251785db25125.jpg'
+
+interface TargetOption {
+    minutes: 0 | 5 | 10 | 15
+    label: string
+}
+
+const TARGET_OPTIONS: readonly TargetOption[] = [
+    { minutes: 0, label: '自由' },
+    { minutes: 5, label: '5 分钟' },
+    { minutes: 10, label: '10 分钟' },
+    { minutes: 15, label: '15 分钟' },
+]
+
+// 里程碑奖励(纯视觉弹窗,无音效)
+interface MilestoneConfig {
+    emoji: string
+    title: string
+    desc: string
+    minReps: number
+    maxReps: number
+}
+
+const MILESTONES: MilestoneConfig[] = [
+    { emoji: '🌸', title: '热身完成', desc: '身体已激活！', minReps: 8, maxReps: 12 },
+    { emoji: '💫', title: '核心稳定', desc: '动作很标准！', minReps: 15, maxReps: 20 },
+    { emoji: '✨', title: '塑形进阶', desc: '力量感很棒！', minReps: 25, maxReps: 30 },
+    { emoji: '🏆', title: '完美收官', desc: '太棒了！', minReps: 40, maxReps: 50 },
+]
+
+// 背景音乐 URL
+const BGM_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093709c669f4659.mp3'
+
+// 食物糖分对照表 (每100g含糖量)
+const FOOD_SUGAR_TABLE = [
+    { emoji: '🍬', name: '糖果', sugar: 95.0, unit: '颗', weight: 5 },     // 1颗糖果约5g
+    { emoji: '🍪', name: '饼干', sugar: 65.0, unit: '块', weight: 10 },    // 1块饼干约10g
+    { emoji: '🍫', name: '巧克力', sugar: 51.5, unit: '块', weight: 50 },  // 1块巧克力约50g
+    { emoji: '🍎', name: '苹果', sugar: 10.3, unit: '个', weight: 200 },   // 1个苹果约200g
+    { emoji: '🍌', name: '香蕉', sugar: 12.2, unit: '根', weight: 120 },   // 1根香蕉约120g
+    { emoji: '🍚', name: '米饭', sugar: 25.9, unit: '碗', weight: 150 },   // 1碗米饭约150g
+    { emoji: '🥤', name: '可乐', sugar: 10.6, unit: '罐', weight: 330 },   // 1罐可乐330ml
+]
+
+const currentPreset = ref<PresetId>('medium')
+const targetMinutes = ref<0 | 5 | 10 | 15>(0)
+const isPlaying = ref(false)
+const beatTimer = ref<number | null>(null)
+const showRewardPopup = ref(false)
+const showSummary = ref(false)
+const currentReward = ref<MilestoneConfig>(MILESTONES[0])
+const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmEnabled = ref(true) // BGM 开关
+
+// 训练统计
+const totalReps = ref(0) // 总次数
+const elapsedSeconds = ref(0) // 总时长(秒)
+const totalSugar = ref(0) // 总消耗糖分(克)
+const beatCount = ref(0) // 节拍计数
+const rewardIndex = ref(0) // 当前奖励索引
+const nextRewardAt = ref(0) // 下次奖励触发次数
+const startTime = ref(0)
+const timerInterval = ref<number | null>(null)
+
+// 获取当前档位配置
+const preset = computed(() => PILATES_PRESETS.find(p => p.id === currentPreset.value) || PILATES_PRESETS[1])
+const currentBpm = computed(() => preset.value.bpm)
+const currentMet = computed(() => preset.value.met)
+const benefitExpanded = ref(false)
+
+// 当前强度预估消耗文案: 按选中目标时长(自由→10分钟参考)估算
+const estimateText = computed(() => {
+    const mins = targetMinutes.value > 0 ? targetMinutes.value : ESTIMATE_REF_MINUTES
+    const sugar = (currentMet.value * 60 * (mins / 60)) / 4
+    const suffix = targetMinutes.value > 0 ? '' : '（按 10 分钟估算）'
+    return `${preset.value.label}训练 ${mins} 分钟，约消耗 ${sugar.toFixed(1)}g 糖分${suffix}`
+})
+
+// 示范视频跟随训练状态
+watch(isPlaying, (playing) => {
+    const videoCtx = uni.createVideoContext('pilatesDemoVideo')
+    if (!videoCtx) return
+    if (playing) {
+        videoCtx.play()
+    } else {
+        videoCtx.pause()
+    }
+})
+
+const intervalMs = computed(() => 60000 / currentBpm.value)
+const hasStats = computed(() => isPlaying.value || totalReps.value > 0)
+const isPaused = computed(() => !isPlaying.value && totalReps.value > 0 && !showSummary.value)
+
+// 目标剩余秒数(targetMinutes=0 时返回 null,代表无目标)
+const remainingSeconds = computed<number | null>(() => {
+    if (targetMinutes.value === 0) return null
+    const total = targetMinutes.value * 60
+    return Math.max(0, total - elapsedSeconds.value)
+})
+
+// 环中心显示的提示文字
+const centerHintText = computed(() => (isPaused.value ? '点击继续' : '点击开始'))
+
+// 状态胶囊文字
+const statusText = computed(() => {
+    if (isPlaying.value) return '训练中'
+    if (isPaused.value) return '已暂停'
+    return '待开始'
+})
+
+// 分享文案
+const shareTitle = computed(() => {
+    if (totalReps.value === 0) return '瑜伽环训练 · 一起练起来'
+    return `刚刚完成 ${totalReps.value} 次瑜伽环训练，约消耗 ${totalSugar.value.toFixed(1)}g 糖分 ✨`
+})
+
+
+const rootStyle = computed(() => ({
+    '--beat-duration': `${intervalMs.value}ms`,
+}))
+
+// 糖分对比 - 返回多个食物对照(显示用)
+const sugarComparisons = computed(() => {
+    if (totalSugar.value === 0) return []
+
+    const results: Array<{ emoji: string; name: string; count: string; unit: string }> = []
+
+    for (const food of FOOD_SUGAR_TABLE) {
+        const foodSugar = (food.sugar * food.weight) / 100
+        const count = totalSugar.value / foodSugar
+
+        // 选择 0.1 ~ 50 范围内的食物展示
+        if (count >= 0.1 && count <= 50) {
+            results.push({
+                emoji: food.emoji,
+                name: food.name,
+                count: count >= 10 ? Math.round(count).toString() : count.toFixed(1),
+                unit: food.unit,
+            })
+        }
+    }
+
+    // 最多展示 3 个
+    return results.slice(0, 3)
+})
+
+// 节拍回调
+function onBeat() {
+    beatCount.value++
+
+    // 每2拍算1次
+    if (beatCount.value % 2 === 0) {
+        totalReps.value++
+
+        // 检查是否触发奖励(递进式)
+        if (totalReps.value >= nextRewardAt.value && rewardIndex.value < MILESTONES.length) {
+            triggerReward()
+        }
+    }
+}
+
+// 计算消耗糖分(随训练强度变化)
+function calculateSugar(seconds: number): number {
+    const hours = seconds / 3600
+    const weight = 60
+    const calories = currentMet.value * weight * hours
+    return calories / 4
+}
+
+// 格式化时间
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+// 触发里程碑弹窗(无音效)
+function triggerReward() {
+    const reward = MILESTONES[rewardIndex.value]
+    currentReward.value = reward
+    triggerHaptic()
+    rewardIndex.value++
+
+    if (rewardIndex.value < MILESTONES.length) {
+        const nextReward = MILESTONES[rewardIndex.value]
+        const range = nextReward.maxReps - nextReward.minReps
+        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
+    }
+
+    setTimeout(() => {
+        showRewardPopup.value = true
+    }, 400)
+}
+
+function closeRewardPopup() {
+    showRewardPopup.value = false
+}
+
+function triggerHaptic() {
+    uni.vibrateShort({
+        type: 'medium',
+        fail: () => {
+            try { uni.vibrateShort({}) } catch (_) {}
+        },
+    } as any)
+}
+
+// 纯视觉节奏(无节拍音效)
+function startRhythm() {
+    stopRhythm()
+    isPlaying.value = true
+    const beatMs = 60000 / currentBpm.value
+    beatTimer.value = setInterval(onBeat, beatMs) as unknown as number
+}
+
+function stopRhythm() {
+    isPlaying.value = false
+    if (beatTimer.value) {
+        clearInterval(beatTimer.value)
+        beatTimer.value = null
+    }
+}
+
+// 启动背景音乐
+function startBgm() {
+    if (!bgmEnabled.value) return
+
+    // 如果已存在,直接 play
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.play()
+        } catch (_) {}
+        return
+    }
+
+    bgmAudioCtx.value = uni.createInnerAudioContext()
+    bgmAudioCtx.value.src = BGM_URL
+    bgmAudioCtx.value.loop = true
+    bgmAudioCtx.value.obeyMuteSwitch = false
+    bgmAudioCtx.value.volume = 0.4 // 背景音乐音量较低,不抢戏
+
+    try {
+        bgmAudioCtx.value.play()
+    } catch (_) {}
+}
+
+// 停止背景音乐
+function stopBgm() {
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.pause()
+        } catch (_) {}
+    }
+}
+
+// 切换 BGM 开关
+function toggleBgm() {
+    bgmEnabled.value = !bgmEnabled.value
+    if (bgmEnabled.value && isPlaying.value) {
+        startBgm()
+    } else {
+        stopBgm()
+    }
+}
+
+// 档位切换 - 仅训练中禁用(暂停时可重新选)
+function onPresetTap(id: PresetId) {
+    if (isPlaying.value) return
+    currentPreset.value = id
+    if (beatTimer.value) {
+        stopRhythm()
+        startRhythm()
+    }
+}
+
+// 训练目标切换 - 训练中禁用
+function onTargetTap(minutes: 0 | 5 | 10 | 15) {
+    if (isPlaying.value) return
+    targetMinutes.value = minutes
+}
+
+// 点击环:开始 / 暂停 / 继续(不再直接弹结算)
+function onTogglePlay() {
+    if (isPlaying.value) {
+        pauseTraining()
+    } else {
+        if (totalReps.value === 0) {
+            resetStats()
+        }
+        startTrainingInternal()
+    }
+}
+
+function startTrainingInternal() {
+    startRhythm()
+    startBgm()
+    startTimer()
+    uni.setKeepScreenOn({ keepScreenOn: true })
+}
+
+function pauseTraining() {
+    stopRhythm()
+    stopBgm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+}
+
+// 显式结束训练 - 弹结算页
+function onEndTraining() {
+    if (totalReps.value === 0) return
+    pauseTraining()
+    showSummary.value = true
+}
+
+function dismissSummary() {
+    showSummary.value = false
+}
+
+function onContinue() {
+    showSummary.value = false
+    startTrainingInternal()
+}
+
+// 再来一次
+function onRestart() {
+    showSummary.value = false
+    resetStats()
+    startTrainingInternal()
+}
+
+// 重置统计
+function resetStats() {
+    totalReps.value = 0
+    elapsedSeconds.value = 0
+    totalSugar.value = 0
+    beatCount.value = 0
+    rewardIndex.value = 0
+    startTime.value = Date.now()
+
+    // 设置第一个奖励的触发次数
+    const firstReward = MILESTONES[0]
+    const range = firstReward.maxReps - firstReward.minReps
+    nextRewardAt.value = firstReward.minReps + Math.floor(Math.random() * (range + 1))
+}
+
+// 启动计时器
+function startTimer() {
+    if (timerInterval.value) return
+
+    startTime.value = Date.now() - elapsedSeconds.value * 1000
+
+    timerInterval.value = setInterval(() => {
+        elapsedSeconds.value = Math.floor((Date.now() - startTime.value) / 1000)
+        totalSugar.value = calculateSugar(elapsedSeconds.value)
+
+        // 到达训练目标 → 自动结束
+        if (targetMinutes.value > 0 && elapsedSeconds.value >= targetMinutes.value * 60) {
+            onEndTraining()
+        }
+    }, 1000) as unknown as number
+}
+
+// 停止计时器
+function stopTimer() {
+    if (timerInterval.value) {
+        clearInterval(timerInterval.value)
+        timerInterval.value = null
+    }
+}
+
+onShareAppMessage(() => ({
+    title: shareTitle.value,
+    path: '/training/pages/pilates-ring',
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+onShareTimeline(() => ({
+    title: shareTitle.value,
+    imageUrl: TUTORIAL_POSTER_URL,
+}))
+
+// 切出/卸载页面时强制释放所有媒体(含 BGM + 示范视频)
+function cleanupAllMedia() {
+    stopRhythm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+
+    try {
+        uni.createVideoContext('pilatesDemoVideo')?.pause()
+    } catch (_) {}
+
+    if (bgmAudioCtx.value) {
+        try { bgmAudioCtx.value.stop() } catch (_) {}
+        try { bgmAudioCtx.value.destroy() } catch (_) {}
+        bgmAudioCtx.value = null
+    }
+}
+
+onHide(cleanupAllMedia)
+onUnload(cleanupAllMedia)
+</script>
+
+<style lang="scss" scoped>
+/* ============================================================
+ * 设计 token
+ * ============================================================ */
+$bg-color: #f8fafc;
+$card-bg: #ffffff;
+$card-border: rgba(15, 23, 42, 0.06);
+$text-1: #0f172a;
+$text-2: #475569;
+$text-3: #94a3b8;
+$brand: #8b5cf6;        /* 主品牌色:紫(瑜伽环主题) */
+$brand-soft: #ede9fe;   /* 浅紫背景 */
+$brand-deep: #6d28d9;   /* 深紫文字 */
+$radius-card: 24rpx;
+$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+
+/* ============================================================
+ * 页面容器
+ * ============================================================ */
+.page {
+    position: relative;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 24rpx 28rpx calc(48rpx + env(safe-area-inset-bottom));
+    background: linear-gradient(180deg, #f5f3ff 0%, $bg-color 28%, $bg-color 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 20rpx;
+    color: $text-1;
+    overflow-x: hidden;
+}
+
+/* ============================================================
+ * 页头
+ * ============================================================ */
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16rpx;
+    flex-shrink: 0;
+}
+
+.header-main {
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    flex: 1;
+    min-width: 0;
+}
+
+.page-title {
+    font-size: 40rpx;
+    font-weight: 800;
+    color: $text-1;
+    letter-spacing: 1rpx;
+    line-height: 1.2;
+}
+
+.page-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    line-height: 1.4;
+}
+
+.status-pill {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 10rpx 18rpx;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border: 2rpx solid $card-border;
+    box-shadow: $shadow-sm;
+
+    &.active {
+        background: $brand-soft;
+        border-color: rgba(139, 92, 246, 0.35);
+
+        .status-dot {
+            background: $brand;
+            box-shadow: 0 0 0 4rpx rgba(139, 92, 246, 0.25);
+            animation: status-pulse 1.2s ease-in-out infinite;
+        }
+
+        .status-text {
+            color: $brand-deep;
+        }
+    }
+
+    &.paused {
+        background: #fef3c7;
+        border-color: rgba(245, 158, 11, 0.4);
+
+        .status-dot {
+            background: #f59e0b;
+        }
+
+        .status-text {
+            color: #92400e;
+        }
+    }
+}
+
+.status-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background: $text-3;
+}
+
+.status-text {
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $text-2;
+    white-space: nowrap;
+}
+
+@keyframes status-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.15);
+        opacity: 0.85;
+    }
+}
+
+/* ============================================================
+ * 画布区域
+ * ============================================================ */
+.stage-canvas-wrapper {
+    /* 用 calc 替代 100vw，避免右侧被裁切导致圆角不对称 */
+    width: calc(100% + 56rpx);
+    margin-left: -28rpx;
+    margin-right: -28rpx;
+    flex-shrink: 0;
+    height: 520rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border-radius: 0 0 40rpx 40rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #f5f3ff 0%, #f8fafc 55%, #f1f5f9 100%);
+}
+
+/* ============================================================
+ * 握力环舞台(由 grip-ring-canvas 组件内联而来)
+ * ============================================================ */
+.ambient-glow {
+    position: absolute;
+    width: 1200rpx;
+    height: 1200rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background:
+        radial-gradient(circle,
+            rgba(221, 214, 254, 0.9) 0%,
+            rgba(237, 233, 254, 0.5) 30%,
+            rgba(241, 245, 249, 0.2) 55%,
+            transparent 72%);
+    pointer-events: none;
+}
+
+.ring-container {
+    position: relative;
+    width: 560rpx;
+    height: 560rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+.beat-halo {
+    position: absolute;
+    width: 560rpx;
+    height: 560rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+        rgba(139, 92, 246, 0.45) 0%,
+        rgba(167, 139, 250, 0.18) 38%,
+        rgba(139, 92, 246, 0) 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    will-change: transform, opacity;
+}
+
+.ring-container.playing .beat-halo {
+    opacity: 1;
+    animation: beat-pulse calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes beat-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 0.4;
+    }
+    50% {
+        transform: scale(0.86);
+        opacity: 0.95;
+    }
+}
+
+.video-ring {
+    position: relative;
+    width: 460rpx;
+    height: 460rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow:
+        0 20rpx 56rpx rgba(139, 92, 246, 0.35),
+        0 10rpx 28rpx rgba(167, 139, 250, 0.22);
+    will-change: transform;
+    z-index: 1;
+}
+
+.ring-container.playing .video-ring {
+    animation: video-squeeze calc(var(--beat-duration, 750ms) * 2) ease-in-out infinite;
+}
+
+@keyframes video-squeeze {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+}
+
+.demo-video {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #ede9fe;
+}
+
+.video-ring-border {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow:
+        inset 0 0 0 4rpx rgba(255, 255, 255, 0.6),
+        inset 0 8rpx 24rpx rgba(109, 40, 217, 0.25);
+}
+
+.center-hint {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    pointer-events: none;
+    z-index: 3;
+    animation: hint-fade-in 0.3s ease;
+}
+
+@keyframes hint-fade-in {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.hint-icon {
+    width: 116rpx;
+    height: 116rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    border: 3rpx solid rgba(255, 255, 255, 0.85);
+    border-radius: 50%;
+    box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.3);
+    animation: hint-bounce 2s ease-in-out infinite;
+    will-change: transform;
+}
+
+.play-triangle {
+    width: 0;
+    height: 0;
+    border-left: 34rpx solid #ffffff;
+    border-top: 23rpx solid transparent;
+    border-bottom: 23rpx solid transparent;
+    margin-left: 8rpx;
+}
+
+@keyframes hint-bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.06);
+    }
+}
+
+.hint-text {
+    font-size: 26rpx;
+    color: #ffffff;
+    font-weight: 700;
+    letter-spacing: 3rpx;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.55);
+}
+
+.bpm-chip {
+    position: absolute;
+    bottom: 24rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: baseline;
+    gap: 6rpx;
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    background: rgba(109, 40, 217, 0.78);
+    box-shadow: 0 6rpx 18rpx rgba(109, 40, 217, 0.35);
+    pointer-events: none;
+    z-index: 3;
+}
+
+.bpm-value {
+    font-size: 36rpx;
+    color: #ffffff;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -1rpx;
+    font-variant-numeric: tabular-nums;
+}
+
+.bpm-label {
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.85);
+    font-weight: 700;
+    letter-spacing: 2rpx;
+}
+
+.tap-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+}
+
+/* ============================================================
+ * BGM 开关
+ * ============================================================ */
+.bgm-toggle {
+    position: absolute;
+    top: 24rpx;
+    right: 28rpx;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 4rpx 16rpx rgba(0, 0, 0, 0.1),
+        0 0 0 2rpx rgba(139, 92, 246, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.2s ease;
+
+    &:active {
+        transform: scale(0.92);
+        background: #f5f3ff;
+    }
+}
+
+.bgm-icon {
+    font-size: 36rpx;
+    line-height: 1;
+}
+
+/* ============================================================
+ * 进度显示
+ * ============================================================ */
+.progress-bar {
+    width: 100%;
+    background: $card-bg;
+    border-radius: $radius-card;
+    padding: 20rpx 24rpx;
+    box-shadow: $shadow-sm;
+    margin-bottom: 20rpx;
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.progress-label {
+    font-size: 26rpx;
+    color: $text-2;
+    font-weight: 600;
+}
+
+.progress-count {
+    font-size: 32rpx;
+    color: $brand-deep;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+ * 控制面板（统计 + 档位合一）
+ * ============================================================ */
+.control-deck {
+    width: 100%;
+    box-sizing: border-box;
+    background: $card-bg;
+    border-radius: 28rpx;
+    padding: 24rpx 20rpx 20rpx;
+    box-shadow:
+        0 8rpx 32rpx rgba(15, 23, 42, 0.06),
+        0 1rpx 0 rgba(255, 255, 255, 0.9) inset;
+    border: 2rpx solid rgba(255, 255, 255, 0.8);
+    transition: box-shadow 0.25s ease;
+
+    &.is-playing {
+        box-shadow:
+            0 12rpx 40rpx rgba(139, 92, 246, 0.12),
+            0 0 0 2rpx rgba(139, 92, 246, 0.12);
+    }
+}
+
+.stats-row {
+    display: flex;
+    gap: 12rpx;
+}
+
+.stat-chip {
+    flex: 1;
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 20rpx;
+    padding: 18rpx 8rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    border: 2rpx solid rgba(15, 23, 42, 0.04);
+}
+
+.stat-chip-label {
+    font-size: 20rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-chip-value {
+    font-size: 34rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+
+    &.muted {
+        color: #cbd5e1;
+        font-weight: 600;
+    }
+}
+
+.deck-divider {
+    height: 2rpx;
+    margin: 20rpx 8rpx 18rpx;
+    background: linear-gradient(90deg, transparent, $card-border, transparent);
+}
+
+.presets-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.presets-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.presets-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.presets-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.presets {
+    display: flex;
+    gap: 12rpx;
+}
+
+.preset {
+    flex: 1;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 20rpx;
+    padding: 20rpx 6rpx 18rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    transition: all 0.18s;
+
+    .preset-icon {
+        font-size: 32rpx;
+        line-height: 1;
+        margin-bottom: 4rpx;
+    }
+
+    .preset-name {
+        font-size: 26rpx;
+        font-weight: 700;
+        color: $text-1;
+    }
+    .preset-bpm {
+        font-size: 22rpx;
+        color: $text-2;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+    }
+    .preset-desc {
+        font-size: 18rpx;
+        color: $text-3;
+        text-align: center;
+        line-height: 1.3;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: linear-gradient(160deg, $brand-soft 0%, #ecfeff 100%);
+        border-color: $brand;
+        box-shadow: 0 6rpx 16rpx rgba(139, 92, 246, 0.15);
+
+        .preset-name,
+        .preset-bpm {
+            color: $brand-deep;
+        }
+        .preset-desc {
+            color: $brand;
+        }
+    }
+}
+
+/* ============================================================
+ * 训练目标 chips
+ * ============================================================ */
+.target-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.target-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.target-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.target-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.target-chips {
+    display: flex;
+    gap: 12rpx;
+}
+
+.target-chip {
+    flex: 1;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 16rpx;
+    transition: all 0.18s;
+
+    .target-chip-text {
+        font-size: 24rpx;
+        font-weight: 600;
+        color: $text-2;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: $brand-soft;
+        border-color: $brand;
+
+        .target-chip-text {
+            color: $brand-deep;
+        }
+    }
+}
+
+/* ============================================================
+ * 倒计时浮标
+ * ============================================================ */
+.countdown-badge {
+    position: absolute;
+    top: 24rpx;
+    left: 28rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8rpx 20rpx 10rpx;
+    border-radius: 16rpx;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.08),
+        0 0 0 2rpx rgba(139, 92, 246, 0.18);
+    z-index: 20;
+}
+
+.countdown-label {
+    font-size: 18rpx;
+    color: $text-3;
+    line-height: 1.1;
+}
+
+.countdown-value {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-top: 2rpx;
+}
+
+/* ============================================================
+ * 强度预估消耗
+ * ============================================================ */
+.intensity-estimate {
+    margin-top: 14rpx;
+    padding: 16rpx 20rpx;
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    background: $brand-soft;
+    border-radius: 14rpx;
+}
+
+.estimate-icon {
+    font-size: 30rpx;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.estimate-text {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    letter-spacing: 0.5rpx;
+}
+
+/* ============================================================
+ * 训练功效(可折叠)
+ * ============================================================ */
+.benefit-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.benefit-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4rpx;
+
+    &:active {
+        opacity: 0.7;
+    }
+}
+
+.benefit-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.benefit-toggle {
+    font-size: 22rpx;
+    color: $brand-deep;
+    font-weight: 600;
+}
+
+.benefit-content {
+    margin-top: 14rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 20rpx;
+    background: #f8fafc;
+    border-radius: 16rpx;
+}
+
+.benefit-row {
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+}
+
+.benefit-label {
+    font-size: 22rpx;
+    font-weight: 700;
+    color: $text-2;
+}
+
+.muscle-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.muscle-tag {
+    padding: 6rpx 18rpx;
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $brand-deep;
+    background: $brand-soft;
+    border-radius: 999rpx;
+}
+
+.benefit-effect {
+    font-size: 24rpx;
+    line-height: 1.7;
+    color: $text-2;
+}
+
+/* ============================================================
+ * 暂停态大按钮(老年友好,醒目易点)
+ * ============================================================ */
+.pause-actions {
+    margin-top: 20rpx;
+    display: flex;
+    gap: 16rpx;
+}
+
+.big-btn {
+    flex: 1;
+    height: 104rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    border-radius: 20rpx;
+    border: none;
+    padding: 0;
+    line-height: 1;
+
+    &::after {
+        border: none;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}
+
+.big-btn-icon {
+    font-size: 30rpx;
+    line-height: 1;
+}
+
+.big-btn-text {
+    font-size: 34rpx;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.big-btn-resume {
+    background: $brand;
+    color: #fff;
+    box-shadow: 0 8rpx 20rpx rgba(139, 92, 246, 0.32);
+}
+
+.big-btn-end {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 2rpx solid rgba(220, 38, 38, 0.3);
+
+    .big-btn-icon {
+        font-size: 26rpx;
+    }
+}
+
+/* ============================================================
+ * 完成浮层
+ * ============================================================ */
+.summary-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 900;
+    padding: 0 24rpx calc(32rpx + env(safe-area-inset-bottom));
+    animation: fade-in 0.2s ease;
+}
+
+/* ============================================================
+ * 奖励弹窗
+ * ============================================================ */
+.reward-popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fade-in 0.2s ease;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.reward-popup {
+    width: 560rpx;
+    background: linear-gradient(135deg, #fff 0%, #f5f3ff 100%);
+    border-radius: 32rpx;
+    padding: 48rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20rpx;
+    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
+    animation: popup-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes popup-bounce {
+    0% {
+        transform: scale(0.8) translateY(40rpx);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+
+.reward-emoji {
+    font-size: 120rpx;
+    line-height: 1;
+    animation: emoji-pop 0.6s ease;
+}
+
+@keyframes emoji-pop {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+.reward-title {
+    font-size: 36rpx;
+    font-weight: 700;
+    color: $brand-deep;
+    letter-spacing: 2rpx;
+}
+
+.reward-desc {
+    font-size: 28rpx;
+    color: $text-2;
+    margin-bottom: 8rpx;
+}
+
+.reward-count {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-bottom: 12rpx;
+}
+
+.reward-btn {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+    background: $brand;
+    color: #fff;
+    border-radius: 999rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    box-shadow: 0 8rpx 20rpx rgba(139, 92, 246, 0.3);
+    transition: all 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 4rpx 12rpx rgba(139, 92, 246, 0.2);
+    }
+}
+
+/* ============================================================
+ * 训练完成卡片
+ * ============================================================ */
+.completion-card {
+    width: 100%;
+    max-width: 700rpx;
+    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
+    border-radius: 32rpx 32rpx 28rpx 28rpx;
+    padding: 40rpx 28rpx 36rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 28rpx;
+    align-items: center;
+    box-shadow:
+        0 -8rpx 48rpx rgba(15, 23, 42, 0.12),
+        0 8rpx 32rpx rgba(139, 92, 246, 0.08);
+    border: 2rpx solid rgba(139, 92, 246, 0.1);
+    animation: sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes sheet-up {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.completion-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.completion-emoji {
+    font-size: 80rpx;
+    line-height: 1;
+    margin-bottom: 8rpx;
+    animation: emoji-bounce 1.5s ease-in-out infinite;
+}
+
+@keyframes emoji-bounce {
+    0%, 100% {
+        transform: scale(1) rotate(0deg);
+    }
+    25% {
+        transform: scale(1.1) rotate(-5deg);
+    }
+    75% {
+        transform: scale(1.1) rotate(5deg);
+    }
+}
+
+.completion-title {
+    font-size: 36rpx;
+    color: $text-1;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.completion-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-top: 4rpx;
+}
+
+.completion-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+}
+
+/* 核心统计网格 */
+.stats-grid {
+    display: flex;
+    gap: 16rpx;
+    width: 100%;
+}
+
+.stat-item {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20rpx;
+    padding: 24rpx 12rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    box-shadow:
+        0 4rpx 12rpx rgba(15, 23, 42, 0.04),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8rpx);
+}
+
+.stat-icon {
+    font-size: 40rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
+}
+
+.stat-label {
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-value {
+    font-size: 36rpx;
+    font-weight: 800;
+    color: $text-1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+}
+
+/* ============================================================
+ * 食物对照卡片
+ * ============================================================ */
+.food-comparison-card {
+    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
+    border-radius: 20rpx;
+    padding: 28rpx 24rpx;
+    width: 100%;
+    box-shadow:
+        0 4rpx 16rpx rgba(251, 191, 36, 0.1),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    border: 2rpx solid rgba(251, 191, 36, 0.15);
+}
+
+.food-comparison-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    margin-bottom: 24rpx;
+}
+
+.food-comparison-title {
+    font-size: 26rpx;
+    color: #92400e;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+
+.food-comparison-hint {
+    font-size: 22rpx;
+    color: #b45309;
+    opacity: 0.8;
+}
+
+.food-list {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.food-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    padding: 16rpx 8rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 16rpx;
+    transition: transform 0.3s ease;
+}
+
+.food-item:active {
+    transform: scale(0.95);
+}
+
+.food-emoji {
+    font-size: 56rpx;
+    line-height: 1;
+    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.food-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rpx;
+}
+
+.food-count {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: #92400e;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+}
+
+.food-name {
+    font-size: 20rpx;
+    color: #b45309;
+    font-weight: 500;
+    letter-spacing: 1rpx;
+}
+
+.action-row {
+    display: flex;
+    gap: 16rpx;
+    justify-content: center;
+    width: 100%;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-share {
+    flex: 1;
+    border-radius: 999rpx;
+    font-size: 28rpx;
+    height: 88rpx;
+    line-height: 88rpx;
+    border: none;
+    padding: 0 16rpx;
+
+    &::after {
+        border: none;
+    }
+}
+
+.btn-primary {
+    background: $brand;
+    color: #fff;
+}
+
+.btn-secondary {
+    background: #fff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(139, 92, 246, 0.35);
+}
+
+.btn-share {
+    flex: 0 0 auto;
+    width: 88rpx;
+    padding: 0;
+    background: #f5f3ff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(139, 92, 246, 0.25);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6rpx;
+    font-size: 24rpx;
+
+    .share-icon {
+        font-size: 30rpx;
+        line-height: 1;
+    }
+}
+</style>