feat(training): 握力环训练趣味化 - 捏碎特效 + 卡路里统计

## 新增功能

### 1. Canvas 粒子捏碎特效
- 新建 crush-canvas.vue 组件（透明叠加层）
- 4 种捏碎物品：鸡蛋🥚、核桃🥜、易拉罐🥫、气球🎈
- 粒子物理模拟：径向扩散 + 重力 + 空气阻力 + 生命值衰减
- 性能优化：固定 60fps 时间步长，粒子边界清理

### 2. 随机触发逻辑
- 平均每 8-12 次随机触发捏碎特效
- 在握力环压缩峰值（scale 0.65）时触发
- 随机选择 4 种物品之一
- 资源清理：训练暂停/结束时清理所有定时器

### 3. 卡路里统计与完成页面
- 标准 MET 公式计算卡路里（MET = 3.5，默认 60kg）
- 5 种食物自动匹配（苹果、鸡蛋、巧克力、香蕉、米饭）
- 完成页面显示：组数、次数、时长、卡路里、食物对比
- 样式设计：浅色清爽风格，绿色渐变卡片

### 4. 预留接口
- useTTS.ts：预留 MiMo TTS 语音鼓励接口

## 技术实现

- Canvas 粒子系统：20-30 个粒子，物理模拟流畅
- 类型安全：完整的 TypeScript 类型定义
- 性能优化：固定时间步长、边界清理、资源管理
- 响应式布局：适配不同屏幕尺寸

## 相关任务

Task: .trellis/tasks/05-27-grip-ring-gamification
PRD: prd.md
Research: research/calorie-calculation.md

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

TUICallKit-Vue3/training/pages/components/exercise-anim.vue

@@ -24,9 +24,12 @@
                 </view>
             </view>
 
-            <!-- 握力环：缩放 -->
-            <view v-else-if="animationType === 'grip'" class="grip-ring">
-                <view class="grip-ring-inner">{{ icon }}</view>
+            <!-- 握力环：缩放 + 粒子特效 -->
+            <view v-else-if="animationType === 'grip'" class="grip-container">
+                <view class="grip-ring">
+                    <view class="grip-ring-inner">{{ icon }}</view>
+                </view>
+                <CrushCanvas ref="crushCanvasRef" />
             </view>
 
             <!-- 卷腹：身体折叠 -->
@@ -38,8 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import type { AnimationType } from '../exercises'
+import CrushCanvas from './crush-canvas.vue'
 
 interface Props {
     animationType: AnimationType
@@ -62,6 +66,17 @@ const cssVars = computed(() => {
         '--anim-state': props.isPlaying ? 'running' : 'paused',
     } as Record<string, string>
 })
+
+const crushCanvasRef = ref()
+
+// 暴露捏碎特效触发方法（供外部测试）
+const triggerCrushEffect = (itemType: 'egg' | 'walnut' | 'can' | 'balloon') => {
+    crushCanvasRef.value?.triggerCrush(itemType)
+}
+
+defineExpose({
+    triggerCrushEffect
+})
 </script>
 
 <style lang="scss" scoped>
@@ -208,6 +223,12 @@ const cssVars = computed(() => {
 }
 
 /* ===== 握力环 ===== */
+.grip-container {
+    position: relative;
+    width: 240rpx;
+    height: 240rpx;
+}
+
 .grip-ring {
     width: 240rpx;
     height: 240rpx;