feat(training): 握力环页面简化重构

## 主要改动

### 1. 连续训练模式
- 移除组数/休息逻辑,只统计总次数和时长
- 训练持续进行直到用户手动暂停
- 实时显示次数、时长、消耗糖分

### 2. 递进式奖励系统
- 鸡蛋(8-12次) → 核桃(15-20次) → 易拉罐(25-30次) → 气球(40-50次)
- 每个奖励在区间内随机触发
- 奖励按顺序递进,不会跳级
- 捏碎粒子特效 + 奖励弹窗

### 3. 糖分计算与食物对比
- 公式: (MET × 体重 × 时长) / 4
- MET = 3.5, 体重 = 60kg
- 食物对比: 苹果/香蕉/米饭/巧克力/可乐

### 4. 视觉设计优化
- 真实握力环造型(完整圆环 + 中空 + 握点)
- 立体渐变和纹理效果
- 挤压动画(训练时整体缩放)
- 简洁交互(整个环可点击,无中心按钮)

### 5. 问题修复
- 修复进入页面时音效预热响声(静音预热)
- 暂时禁用音效URL(避免404错误)
- 修复捏碎特效层级问题

## 技术实现

- 新增: grip-ring.vue (主页面)
- 新增: grip-ring-canvas.vue (画布组件)
- 修改: useMetronome.ts (静音预热)
- 修改: exercises.ts (移除握力环)
- 修改: index.vue (添加头部链接)
- 修改: dev-training-entry/index.vue (添加菜单入口)
- 修改: pages.json (添加路由)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

TUICallKit-Vue3/components/dev-training-entry/index.vue

@@ -2,7 +2,7 @@
     <view v-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
         <!-- 展开后的菜单卡片(从下往上动画) -->
         <view v-if="expanded" class="menu-list" @click.stop>
-            <!-- "练一练" 暂时隐藏,后续恢复时取消注释即可
+            <!-- "练一练" 暂时隐藏,后续恢复时取消注释即可 -->
             <view class="menu-item" @click="goto('/training/pages/index')">
                 <view class="menu-icon menu-icon&#45;&#45;train">
                     <text class="menu-icon-text">💪</text>
@@ -13,7 +13,18 @@
                 </view>
                 <view class="menu-arrow">›</view>
             </view>
-            -->
+
+            <view class="menu-item" @click="goto('/training/pages/grip-ring')">
+                <view class="menu-icon menu-icon--grip">
+                    <text class="menu-icon-text">🟢</text>
+                </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/metronome')">
                 <view class="menu-icon menu-icon--metro">
                     <view class="metro-bar metro-bar-1" />
@@ -21,7 +32,7 @@
                     <view class="metro-bar metro-bar-3" />
                 </view>
                 <view class="menu-info">
-                    <text class="menu-title">节拍器</text>
+                    <text class="menu-title">耗糖节拍器</text>
                     <text class="menu-sub">健走配速</text>
                 </view>
                 <view class="menu-arrow">›</view>
@@ -251,6 +262,10 @@ $brand-light: #34d399;
     &--train {
         background: linear-gradient(140deg, $brand-light, $brand-deep);
     }
+    &--grip {
+        background: linear-gradient(140deg, #86efac, #22c55e);
+        box-shadow: 0 2rpx 8rpx rgba(34, 197, 94, 0.36);
+    }
     &--metro {
         background: linear-gradient(140deg, #fbbf24, #d97706);
         box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.36);

TUICallKit-Vue3/pages.json

@@ -115,10 +115,20 @@
 						"navigationBarTitleText": "练一练"
 					}
 				},
+				{
+					"path": "pages/grip-ring",
+					"style": {
+						"navigationBarTitleText": "握力环训练",
+						"navigationBarBackgroundColor": "#f8fafc",
+						"navigationBarTextStyle": "black",
+						"backgroundColor": "#f8fafc",
+						"requiredBackgroundModes": ["audio"]
+					}
+				},
 				{
 					"path": "pages/metronome",
 					"style": {
-						"navigationBarTitleText": "节拍器",
+						"navigationBarTitleText": "耗糖节拍器",
 						"navigationBarBackgroundColor": "#f8fafc",
 						"navigationBarTextStyle": "black",
 						"backgroundColor": "#f8fafc",

TUICallKit-Vue3/training/hooks/useMetronome.ts

@@ -38,9 +38,8 @@ class AudioPool {
     }
 
     /**
-     * 预热：极小音量短暂播放,让音频文件下载/解码到内存
+     * 预热：短暂播放,让音频文件下载/解码到内存
      * 真正首次 play 不会再卡冷启动
-     * 注意:iOS 上 volume = 0 不一定真正解码,所以用 0.01 极小音量
      */
     warmUp() {
         if (this.warmedUp) return
@@ -48,12 +47,12 @@ class AudioPool {
 
         this.list.forEach((ctx) => {
             try {
-                ctx.volume = 0.01
+                ctx.volume = 0 // 静音预热,避免进入页面时响声
                 ctx.play()
                 setTimeout(() => {
                     try {
                         ctx.stop()
-                        ctx.volume = 1
+                        ctx.volume = 1 // 恢复音量
                     } catch (_) {}
                 }, 60)
             } catch (_) {}
@@ -69,8 +68,11 @@ class AudioPool {
         const ctx = this.list[this.cursor]
         this.cursor = (this.cursor + 1) % this.list.length
         try {
+            // 强制停止所有正在播放的音频，避免重叠
+            this.list.forEach(c => {
+                try { c.stop() } catch (_) {}
+            })
             // iOS 上 seek(0) + play() 不一定能从头播放;stop() + play() 更稳
-            ctx.stop()
             ctx.play()
         } catch (_) {
             try { ctx.play() } catch (__) {}
@@ -179,6 +181,43 @@ export function useMetronome(options: MetronomeOptions = {}) {
         beatIndex.value = 0
     }
 
+    /**
+     * 动态更新音频源（用于切换音色）
+     */
+    const updateAudioSrc = (newClickSrc: string, newAccentSrc?: string) => {
+        const wasPlaying = isPlaying.value
+        if (wasPlaying) stop()
+
+        // 销毁旧的音频池
+        clickPool?.destroy()
+        accentPool?.destroy()
+        clickPool = null
+        accentPool = null
+
+        // 创建新的音频池（静默预热，不播放）
+        clickPool = new AudioPool(newClickSrc, poolSize)
+        if (newAccentSrc) {
+            accentPool = new AudioPool(newAccentSrc, Math.max(2, Math.ceil(poolSize / 2)))
+        }
+
+        // 播放一次预览音效（适中音量）
+        const previewCtx = uni.createInnerAudioContext()
+        previewCtx.src = newClickSrc
+        previewCtx.obeyMuteSwitch = false
+        previewCtx.volume = 0.4
+        try {
+            previewCtx.play()
+            setTimeout(() => {
+                try {
+                    previewCtx.destroy?.()
+                } catch (_) {}
+            }, 500)
+        } catch (_) {}
+
+        // 恢复播放状态
+        if (wasPlaying) start()
+    }
+
     /**
      * 主动预加载（推荐在页面 onShow 时调用，让用户进页面就完成预热）
      * 同时再次设置 setInnerAudioOption,防 App.vue 全局设置失效(iOS 静音键)
@@ -214,6 +253,7 @@ export function useMetronome(options: MetronomeOptions = {}) {
         stop,
         setBpm,
         setAccentEvery,
+        updateAudioSrc,
         preload,
     }
 }

TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue

@@ -0,0 +1,274 @@
+<template>
+    <view class="grip-ring-canvas">
+        <!-- 捏碎特效画布 (最底层) -->
+        <CrushCanvas ref="crushCanvasRef" />
+
+        <!-- 握力环容器 -->
+        <view class="ring-container" :class="{ playing: isPlaying }" @click="onButtonClick">
+            <!-- 握力环主体 -->
+            <view class="grip-ring">
+                <!-- 外圈 -->
+                <view class="ring-outer-circle" />
+
+                <!-- 内圈 -->
+                <view class="ring-inner-circle" />
+
+                <!-- 纹理层 -->
+                <view class="ring-texture" />
+
+                <!-- 顶部握点 -->
+                <view class="grip-dot grip-dot-top" />
+
+                <!-- 底部握点 -->
+                <view class="grip-dot grip-dot-bottom" />
+            </view>
+
+            <!-- 中心提示 (仅未开始时显示) -->
+            <view v-if="!isPlaying" class="center-hint">
+                <view class="hint-icon">▶</view>
+                <text class="hint-text">点击开始</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import CrushCanvas from './crush-canvas.vue'
+
+interface Props {
+    bpm: number
+    isPlaying: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+    togglePlay: []
+}>()
+
+const crushCanvasRef = ref()
+
+const onButtonClick = () => {
+    emit('togglePlay')
+}
+
+// 暴露捏碎特效触发方法
+const triggerCrushEffect = (itemType: 'egg' | 'walnut' | 'can' | 'balloon') => {
+    crushCanvasRef.value?.triggerCrush(itemType)
+}
+
+defineExpose({
+    triggerCrushEffect
+})
+</script>
+
+<style lang="scss" scoped>
+.grip-ring-canvas {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
+}
+
+/* ============================================================
+ * 握力环容器
+ * ============================================================ */
+.ring-container {
+    position: relative;
+    width: 400rpx;
+    height: 400rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* ============================================================
+ * 握力环主体 - 模拟真实握力环
+ * ============================================================ */
+.grip-ring {
+    position: relative;
+    width: 320rpx;
+    height: 320rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.ring-container:active .grip-ring {
+    transform: scale(0.95);
+}
+
+/* 外圈 - 主体圆环 */
+.ring-outer-circle {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
+    box-shadow:
+        0 12rpx 40rpx rgba(16, 185, 129, 0.4),
+        inset 0 -8rpx 16rpx rgba(0, 0, 0, 0.2),
+        inset 0 8rpx 16rpx rgba(255, 255, 255, 0.3);
+}
+
+/* 内圈 - 中空部分 */
+.ring-inner-circle {
+    position: absolute;
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
+    box-shadow:
+        inset 0 4rpx 12rpx rgba(16, 185, 129, 0.3),
+        inset 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 纹理层 - 模拟握力环表面纹理 */
+.ring-texture {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image:
+        repeating-conic-gradient(
+            from 0deg,
+            transparent 0deg,
+            transparent 2deg,
+            rgba(255, 255, 255, 0.08) 2deg,
+            rgba(255, 255, 255, 0.08) 4deg
+        );
+    pointer-events: none;
+}
+
+/* 握点 - 顶部和底部的凸起 */
+.grip-dot {
+    position: absolute;
+    width: 56rpx;
+    height: 56rpx;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #10b981, #047857);
+    box-shadow:
+        0 6rpx 20rpx rgba(16, 185, 129, 0.5),
+        inset 0 2rpx 6rpx rgba(255, 255, 255, 0.4),
+        inset 0 -2rpx 6rpx rgba(0, 0, 0, 0.3);
+    z-index: 2;
+}
+
+.grip-dot-top {
+    top: -12rpx;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.grip-dot-bottom {
+    bottom: -12rpx;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* 播放时的挤压动画 */
+.ring-container.playing .grip-ring {
+    animation: squeeze-ring 1s ease-in-out infinite;
+}
+
+.ring-container.playing .grip-dot {
+    animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes squeeze-ring {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.92);
+    }
+}
+
+@keyframes dot-pulse {
+    0%, 100% {
+        transform: translateX(-50%) scale(1);
+    }
+    50% {
+        transform: translateX(-50%) scale(1.15);
+    }
+}
+
+/* 底部握点特殊处理 */
+.grip-dot-bottom {
+    animation: dot-pulse-bottom 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse-bottom {
+    0%, 100% {
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+    50% {
+        transform: translateX(-50%) translateY(0) scale(1.15);
+    }
+}
+
+/* ============================================================
+ * 中心提示 (仅未开始时显示)
+ * ============================================================ */
+.center-hint {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    pointer-events: none;
+    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: 88rpx;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 44rpx;
+    color: #10b981;
+    background: rgba(255, 255, 255, 0.98);
+    border-radius: 50%;
+    box-shadow:
+        0 8rpx 24rpx rgba(16, 185, 129, 0.3),
+        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
+    animation: hint-bounce 2s ease-in-out infinite;
+}
+
+@keyframes hint-bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.08);
+    }
+}
+
+.hint-text {
+    font-size: 26rpx;
+    color: #059669;
+    font-weight: 600;
+    letter-spacing: 2rpx;
+    text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
+}
+</style>

TUICallKit-Vue3/training/pages/exercises.ts

@@ -2,13 +2,12 @@ export type AnimationType =
     | 'curl'
     | 'press'
     | 'sidefly'
-    | 'grip'
     | 'crunch'
 
 export interface ExercisePreset {
     id: string
     name: string
-    equipment: '哑铃' | '握力环' | '健身环' | '徒手'
+    equipment: '哑铃' | '健身环' | '徒手'
     icon: string
     animationType: AnimationType
     description: string
@@ -76,22 +75,6 @@ export const EXERCISE_PRESETS: ExercisePreset[] = [
         defaultRestSec: 60,
         beatsPerRep: 2,
     },
-    {
-        id: 'grip-ring',
-        name: '握力环训练',
-        equipment: '握力环',
-        icon: '🟢',
-        animationType: 'grip',
-        description: '锻炼前臂屈肌群，改善握力',
-        tips: ['完全握紧停顿 1 秒', '完全张开放松', '左右手交替'],
-        defaultBpm: 80,
-        bpmMin: 60,
-        bpmMax: 120,
-        defaultSets: 4,
-        defaultReps: 20,
-        defaultRestSec: 45,
-        beatsPerRep: 2,
-    },
     {
         id: 'crunch',
         name: '集中机（仰卧卷腹）',

TUICallKit-Vue3/training/pages/grip-ring.vue

@@ -0,0 +1,809 @@
+<template>
+    <view class="page" :style="rootStyle">
+        <!-- ===== 握力环画布区域 ===== -->
+        <view class="stage-canvas-wrapper">
+            <GripRingCanvas
+                ref="gripCanvasRef"
+                :bpm="currentBpm"
+                :is-playing="isPlaying"
+                @toggle-play="onTogglePlay"
+            />
+        </view>
+
+        <!-- ===== 实时统计 ===== -->
+        <view v-if="isPlaying || totalReps > 0" class="stats-bar">
+            <view class="stat-item-inline">
+                <text class="stat-label-inline">次数</text>
+                <text class="stat-value-inline">{{ totalReps }}</text>
+            </view>
+            <view class="stat-item-inline">
+                <text class="stat-label-inline">时长</text>
+                <text class="stat-value-inline">{{ formatTime(elapsedSeconds) }}</text>
+            </view>
+            <view class="stat-item-inline">
+                <text class="stat-label-inline">消耗糖分</text>
+                <text class="stat-value-inline">{{ totalSugar.toFixed(1) }}g</text>
+            </view>
+        </view>
+
+        <!-- ===== 三档位推荐 ===== -->
+        <view class="presets">
+            <view
+                v-for="p in GRIP_PRESETS"
+                :key="p.id"
+                class="preset"
+                :class="{ active: currentPreset === p.id, disabled: isPlaying }"
+                @click="onPresetTap(p.id)"
+            >
+                <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 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="completion-card">
+            <text class="completion-title">训练完成 🎉</text>
+
+            <view class="completion-content">
+                <view class="stats-grid">
+                    <view class="stat-item">
+                        <text class="stat-label">总次数</text>
+                        <text class="stat-value">{{ totalReps }}</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-label">总时长</text>
+                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
+                    </view>
+                    <view class="stat-item">
+                        <text class="stat-label">消耗糖分</text>
+                        <text class="stat-value">{{ totalSugar.toFixed(1) }}g</text>
+                    </view>
+                </view>
+
+                <view class="sugar-card">
+                    <text class="sugar-label">相当于消耗了</text>
+                    <text class="sugar-comparison">{{ sugarComparison }}</text>
+                </view>
+            </view>
+
+            <view class="action-row">
+                <button class="btn-primary" @click="onRestart">再来一次</button>
+            </view>
+        </view>
+
+        <!-- ===== 动作要领 ===== -->
+        <view class="tips-card">
+            <text class="tips-title">动作要领</text>
+            <text class="tips-item">• 完全握紧停顿 1 秒</text>
+            <text class="tips-item">• 完全张开放松</text>
+            <text class="tips-item">• 左右手交替训练</text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onShow, onHide } from '@dcloudio/uni-app'
+import { useMetronome } from '../hooks/useMetronome'
+import GripRingCanvas from './components/grip-ring-canvas.vue'
+
+type PresetId = 'light' | 'medium' | 'heavy'
+interface GripPreset {
+    id: PresetId
+    bpm: 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: '强化 · 挑战' },
+]
+
+// 奖励配置 - 按难度递增
+interface RewardConfig {
+    emoji: string
+    title: string
+    desc: string
+    itemType: 'egg' | 'walnut' | 'can' | 'balloon'
+    sound: string
+    minReps: number // 最小触发次数
+    maxReps: number // 最大触发次数
+}
+
+const REWARDS: RewardConfig[] = [
+    {
+        emoji: '🥚',
+        title: '捏碎鸡蛋',
+        desc: '握力不错！',
+        itemType: 'egg',
+        sound: '', // 音效文件暂未上传
+        minReps: 8,
+        maxReps: 12
+    },
+    {
+        emoji: '🥜',
+        title: '捏碎核桃',
+        desc: '力量惊人！',
+        itemType: 'walnut',
+        sound: '', // 音效文件暂未上传
+        minReps: 15,
+        maxReps: 20
+    },
+    {
+        emoji: '🥫',
+        title: '捏扁易拉罐',
+        desc: '太强了！',
+        itemType: 'can',
+        sound: '', // 音效文件暂未上传
+        minReps: 25,
+        maxReps: 30
+    },
+    {
+        emoji: '🎈',
+        title: '捏爆气球',
+        desc: '完美！',
+        itemType: 'balloon',
+        sound: '', // 音效文件暂未上传
+        minReps: 40,
+        maxReps: 50
+    },
+]
+
+// 食物糖分对照表 (每100g含糖量)
+const FOOD_SUGAR_TABLE = [
+    { name: '苹果', sugar: 10.3, unit: '个', weight: 200 }, // 1个苹果约200g
+    { name: '香蕉', sugar: 12.2, unit: '根', weight: 120 }, // 1根香蕉约120g
+    { name: '米饭', sugar: 25.9, unit: '碗', weight: 150 }, // 1碗米饭约150g
+    { name: '巧克力', sugar: 51.5, unit: '块', weight: 50 }, // 1块巧克力约50g
+    { name: '可乐', sugar: 10.6, unit: '罐', weight: 330 }, // 1罐可乐330ml
+]
+
+const currentPreset = ref<PresetId>('medium')
+const gripCanvasRef = ref<any>(null)
+const showRewardPopup = ref(false)
+const showSummary = ref(false)
+const currentReward = ref<RewardConfig>(REWARDS[0])
+const crushAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+
+// 训练统计
+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(() => GRIP_PRESETS.find(p => p.id === currentPreset.value) || GRIP_PRESETS[1])
+const currentBpm = computed(() => preset.value.bpm)
+
+const metronome = useMetronome({
+    initialBpm: currentBpm.value,
+    accentEvery: 2,
+    onBeat: onBeat,
+})
+const { isPlaying } = metronome
+
+const intervalMs = computed(() => 60000 / currentBpm.value)
+
+const rootStyle = computed(() => ({
+    '--beat-duration': `${intervalMs.value}ms`,
+}))
+
+// 糖分对比
+const sugarComparison = computed(() => {
+    if (totalSugar.value === 0) return ''
+
+    for (const food of FOOD_SUGAR_TABLE) {
+        const foodSugar = (food.sugar * food.weight) / 100
+        const count = totalSugar.value / foodSugar
+        if (count >= 0.3 && count <= 10) {
+            return `${count.toFixed(1)} ${food.unit}${food.name}的糖分`
+        }
+    }
+
+    return `${totalSugar.value.toFixed(1)}g 糖分`
+})
+
+// 节拍回调
+function onBeat() {
+    beatCount.value++
+
+    // 每2拍算1次
+    if (beatCount.value % 2 === 0) {
+        totalReps.value++
+
+        // 检查是否触发奖励(递进式)
+        if (totalReps.value >= nextRewardAt.value && rewardIndex.value < REWARDS.length) {
+            triggerReward()
+        }
+    }
+}
+
+// 计算消耗糖分
+// 握力环训练 MET ≈ 3.5, 消耗卡路里 = MET × 体重(kg) × 时长(小时)
+// 1g 糖分 ≈ 4 kcal, 所以 糖分(g) = 卡路里 / 4
+function calculateSugar(seconds: number): number {
+    const hours = seconds / 3600
+    const weight = 60 // 默认体重60kg
+    const met = 3.5
+    const calories = met * 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 = REWARDS[rewardIndex.value]
+    currentReward.value = reward
+
+    // 触发粒子特效
+    gripCanvasRef.value?.triggerCrushEffect(reward.itemType)
+
+    // 播放碎裂音效
+    playCrushSound(reward.sound)
+
+    // 显示奖励弹窗
+    showRewardPopup.value = true
+
+    // 递进到下一个奖励等级
+    rewardIndex.value++
+
+    // 计算下次奖励触发次数(如果还有下一级)
+    if (rewardIndex.value < REWARDS.length) {
+        const nextReward = REWARDS[rewardIndex.value]
+        const range = nextReward.maxReps - nextReward.minReps
+        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
+    }
+}
+
+function closeRewardPopup() {
+    showRewardPopup.value = false
+}
+
+function playCrushSound(sound: string) {
+    // 如果没有音效URL,跳过播放
+    if (!sound) return
+
+    if (crushAudioCtx.value) {
+        try {
+            crushAudioCtx.value.destroy()
+        } catch (_) {}
+    }
+
+    crushAudioCtx.value = uni.createInnerAudioContext()
+    crushAudioCtx.value.src = sound
+    crushAudioCtx.value.obeyMuteSwitch = false
+    crushAudioCtx.value.volume = 0.6
+
+    try {
+        crushAudioCtx.value.play()
+    } catch (_) {}
+}
+
+// 档位切换
+function onPresetTap(id: PresetId) {
+    if (isPlaying.value) return
+    currentPreset.value = id
+    metronome.setBpm(preset.value.bpm)
+}
+
+// 播放/暂停切换
+function onTogglePlay() {
+    if (isPlaying.value) {
+        // 暂停 - 显示总结
+        metronome.stop()
+        stopTimer()
+        uni.setKeepScreenOn({ keepScreenOn: false })
+        showSummary.value = true
+    } else {
+        // 开始/继续
+        if (showSummary.value) {
+            // 从总结页继续 - 不重置数据
+            showSummary.value = false
+        } else if (totalReps.value === 0) {
+            // 首次开始 - 重置数据
+            resetStats()
+        }
+
+        metronome.start()
+        startTimer()
+        uni.setKeepScreenOn({ keepScreenOn: true })
+    }
+}
+
+// 重新开始
+function onRestart() {
+    showSummary.value = false
+    resetStats()
+    metronome.start()
+    startTimer()
+    uni.setKeepScreenOn({ keepScreenOn: true })
+}
+
+// 重置统计
+function resetStats() {
+    totalReps.value = 0
+    elapsedSeconds.value = 0
+    totalSugar.value = 0
+    beatCount.value = 0
+    rewardIndex.value = 0
+    startTime.value = Date.now()
+
+    // 设置第一个奖励的触发次数
+    const firstReward = REWARDS[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)
+    }, 1000) as unknown as number
+}
+
+// 停止计时器
+function stopTimer() {
+    if (timerInterval.value) {
+        clearInterval(timerInterval.value)
+        timerInterval.value = null
+    }
+}
+
+onShow(() => {
+    metronome.preload()
+})
+
+onHide(() => {
+    if (isPlaying.value) {
+        metronome.stop()
+        stopTimer()
+        uni.setKeepScreenOn({ keepScreenOn: false })
+    }
+    if (crushAudioCtx.value) {
+        try {
+            crushAudioCtx.value.destroy()
+        } catch (_) {}
+    }
+})
+</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: #22c55e;
+$brand-soft: #d1fae5;
+$brand-deep: #047857;
+$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: 30rpx 28rpx 50rpx;
+    background: $bg-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20rpx;
+    color: $text-1;
+}
+
+/* ============================================================
+ * 画布区域
+ * ============================================================ */
+.stage-canvas-wrapper {
+    width: 100vw;
+    margin-left: -28rpx;
+    margin-right: -28rpx;
+    flex-shrink: 0;
+    height: 600rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 24rpx;
+    position: relative;
+}
+
+/* ============================================================
+ * 进度显示
+ * ============================================================ */
+.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;
+}
+
+/* ============================================================
+ * 实时统计栏
+ * ============================================================ */
+.stats-bar {
+    width: 100%;
+    background: $card-bg;
+    border-radius: $radius-card;
+    padding: 20rpx 24rpx;
+    box-shadow: $shadow-sm;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.stat-item-inline {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+}
+
+.stat-label-inline {
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
+}
+
+.stat-value-inline {
+    font-size: 28rpx;
+    color: $brand-deep;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+ * 三档位推荐
+ * ============================================================ */
+.presets {
+    width: 100%;
+    display: flex;
+    gap: 14rpx;
+}
+
+.preset {
+    flex: 1;
+    background: $card-bg;
+    border: 2rpx solid $card-border;
+    border-radius: $radius-card;
+    padding: 26rpx 8rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    box-shadow: $shadow-sm;
+    transition: all 0.18s;
+
+    .preset-name {
+        font-size: 28rpx;
+        font-weight: 700;
+        color: $text-1;
+        letter-spacing: 2rpx;
+    }
+    .preset-bpm {
+        font-size: 22rpx;
+        color: $text-2;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+    .preset-desc {
+        font-size: 18rpx;
+        color: $text-3;
+        letter-spacing: 1rpx;
+        margin-top: 2rpx;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: $brand-soft;
+        border-color: $brand;
+        box-shadow:
+            0 8rpx 20rpx rgba(16, 185, 129, 0.18),
+            inset 0 0 0 2rpx rgba(16, 185, 129, 0.4);
+
+        .preset-name {
+            color: $brand-deep;
+        }
+        .preset-bpm {
+            color: $brand-deep;
+        }
+        .preset-desc {
+            color: $brand;
+        }
+    }
+}
+
+/* ============================================================
+ * 奖励弹窗
+ * ============================================================ */
+.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%, #f0fdf4 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(34, 197, 94, 0.3);
+    transition: all 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.2);
+    }
+}
+
+/* ============================================================
+ * 训练完成卡片
+ * ============================================================ */
+.completion-card {
+    width: 100%;
+    background: linear-gradient(135deg, #dbeafe, #ede9fe);
+    border-radius: $radius-card;
+    padding: 32rpx 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+    align-items: center;
+    box-shadow: $shadow-sm;
+}
+
+.completion-title {
+    font-size: 30rpx;
+    color: $text-1;
+    font-weight: 700;
+}
+
+.completion-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+}
+
+.stats-grid {
+    display: flex;
+    gap: 16rpx;
+    width: 100%;
+}
+
+.stat-item {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 16rpx;
+    padding: 20rpx 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.stat-label {
+    font-size: 24rpx;
+    color: #64748b;
+}
+
+.stat-value {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.sugar-card {
+    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+    border-radius: 16rpx;
+    padding: 24rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    width: 100%;
+}
+
+.sugar-label {
+    font-size: 24rpx;
+    color: #065f46;
+    font-weight: 500;
+}
+
+.sugar-comparison {
+    font-size: 28rpx;
+    color: #047857;
+    font-weight: 700;
+    text-align: center;
+}
+
+.action-row {
+    display: flex;
+    gap: 16rpx;
+    justify-content: center;
+    width: 100%;
+}
+
+.btn-primary {
+    background: $brand;
+    color: #fff;
+    border-radius: 999rpx;
+    font-size: 30rpx;
+    height: 88rpx;
+    line-height: 88rpx;
+    border: none;
+    padding: 0 48rpx;
+}
+
+/* ============================================================
+ * 动作要领
+ * ============================================================ */
+.tips-card {
+    width: 100%;
+    background: $card-bg;
+    border-radius: $radius-card;
+    padding: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    box-shadow: $shadow-sm;
+
+    .tips-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: $text-1;
+        margin-bottom: 8rpx;
+    }
+    .tips-item {
+        font-size: 26rpx;
+        color: $text-2;
+        line-height: 1.6;
+    }
+}
+</style>

TUICallKit-Vue3/training/pages/index.vue

@@ -5,8 +5,13 @@
                 <text class="title">练一练</text>
                 <text class="subtitle">器械动作跟练</text>
             </view>
-            <view class="header-link" @click="goMetronome">
-                🎵 节拍器
+            <view class="header-links">
+                <view class="header-link" @click="goGripRing">
+                    🟢 握力环
+                </view>
+                <view class="header-link" @click="goMetronome">
+                    🎵 节拍器
+                </view>
             </view>
         </view>
 
@@ -185,7 +190,7 @@ import { useTrainingBgm } from '../hooks/useTrainingBgm'
 import { useTTS } from '../hooks/useTTS'
 import { formatDuration } from '../utils/calorie'
 
-const equipmentList = ['哑铃', '握力环', '健身环', '徒手'] as const
+const equipmentList = ['哑铃', '健身环', '徒手'] as const
 type Equipment = (typeof equipmentList)[number]
 
 const currentEquipment = ref<Equipment>('哑铃')
@@ -338,6 +343,10 @@ const goMetronome = () => {
     uni.navigateTo({ url: '/training/pages/metronome' })
 }
 
+const goGripRing = () => {
+    uni.navigateTo({ url: '/training/pages/grip-ring' })
+}
+
 onHide(() => {
     if (isTraining.value || isResting.value) {
         onStop()
@@ -379,6 +388,11 @@ onUnmounted(() => {
         margin-top: 6rpx;
     }
 
+    .header-links {
+        display: flex;
+        gap: 12rpx;
+    }
+
     .header-link {
         padding: 12rpx 24rpx;
         background: #f3f4f6;