feat(training): 握力环训练全面优化 - 音效集成 + 沉浸式画布 + Canvas 2D

## 主要改动 ### 1. 音效集成 - 集成 4 个捏碎音效(鸡蛋/核桃/易拉罐/气球) - 集成背景音乐 BGM + 右上角开关按钮 - 修复音效 URL 空值时的崩溃问题 - useMetronome 新增 volume 参数(默认 1.0) - 节拍音量调小至 0.35,避免木鱼声过大 ### 2. 画布升级到 Canvas 2D 接口 - 解决微信小程序 canvas-id 接口的警告 - 支持同层渲染,可与其他元素正常叠加 - 使用 requestAnimationFrame 替代 setTimeout - DPR 自适应,Retina 屏幕高清渲染 ### 3. 粒子特效差异化升级 - 4 种物品各自独立配色和形状 - 🥚 鸡蛋: 蛋黄黄+白色,圆形,中速 - 🌰 核桃: 4 种棕色,方形/三角/长方形,重粒 - 🥫 易拉罐: 5 种银色,长方形,快速 - 🎈 气球: 8 色彩虹,小颗粒,飘浮(低重力) - 新增双层冲击波效果 - 粒子旋转动画(方形/三角形/长方形) - 多形状粒子绘制(circle/square/triangle/rect) ### 4. 沉浸式画布重新设计 - 画布占屏幕 60vh(min 720rpx, max 900rpx) - 背景与页面无缝融合(#f8fafc) - 中心 1400rpx 大放射光晕,营造空间感 - 握力环放大至 520rpx,内圈 280rpx - 完全移除浮动气泡(性能优化) ### 5. 视觉与体验优化 - 主题色改回青绿色(#14b8a6),握力环保持粉色突出 - 训练完成卡片大改造: - 大号 emoji 跳动动画 - 统计项加入图标(💪⏱️🔥) - 食物对照可视化(emoji + 数量,最多 3 个) - 食物库扩展到 7 种(糖果/饼干/巧克力/苹果/香蕉/米饭/可乐) - BPM 数字大号显示(80rpx 深粉色) - 实时统计栏增加分隔线和顶部彩色高光 ### 6. 性能优化(低配机器友好) - 静态背景渐变(0 性能消耗) - 单层中心光晕(无动画) - 外发光仅在播放时启用 - GPU 加速(will-change + transform/opacity) - 移除 backdrop-filter(高消耗) ### 7. Bug 修复 - crush-canvas 的 \$scope of null 错误 - 进入页面时音效预热不再发声(静音预热) - 修复 walnut emoji 错用花生(🥜→🌰) - 弹窗遮挡粒子动画(延迟 1200ms 显示弹窗) ### 8. 文档 - 新增音效采集清单(grip-ring-audio-shopping-list.md) ## 修改文件 - grip-ring.vue: 主页面,音效集成、UI 重设计、食物对照 - grip-ring-canvas.vue: 沉浸式画布、握力环主体 - crush-canvas.vue: Canvas 2D 升级、差异化粒子系统 - useMetronome.ts: 音量参数支持 - dev-training-entry/index.vue: 入口配置微调 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-28 11:35:43 +08:00
parent 3ebe3c58c8
commit c3e4dfa479
6 changed files with 1095 additions and 289 deletions
@@ -3,7 +3,7 @@
        <!-- 展开后的菜单卡片(从下往上动画) -->
        <view v-if="expanded" class="menu-list" @click.stop>
            <!-- "练一练" 暂时隐藏,后续恢复时取消注释即可 -->
-            <view class="menu-item" @click="goto('/training/pages/index')">
+            <!-- <view class="menu-item" @click="goto('/training/pages/index')">
                <view class="menu-icon menu-icon&#45;&#45;train">
                    <text class="menu-icon-text">💪</text>
                </view>
@@ -12,7 +12,7 @@
                    <text class="menu-sub">器械跟练</text>
                </view>
                <view class="menu-arrow">›</view>
-            </view>
+            </view> -->

            <view class="menu-item" @click="goto('/training/pages/grip-ring')">
                <view class="menu-icon menu-icon--grip">
@@ -8,6 +8,7 @@ export interface MetronomeOptions {
    accentSrc?: string
    accentEvery?: number
    poolSize?: number
+    volume?: number  // 节拍音音量 0-1
    onBeat?: (beatIndex: number, isAccent: boolean) => void
 }

@@ -21,11 +22,15 @@ class AudioPool {
    private list: UniApp.InnerAudioContext[] = []
    private cursor = 0
    private warmedUp = false
+    private targetVolume = 1

    constructor(
        private src: string,
        private size: number,
-    ) {}
+        volume = 1,
+    ) {
+        this.targetVolume = volume
+    }

    private create() {
        for (let i = 0; i < this.size; i++) {
@@ -33,10 +38,20 @@ class AudioPool {
            ctx.src = this.src
            ctx.obeyMuteSwitch = false
            ctx.autoplay = false
+            ctx.volume = this.targetVolume
            this.list.push(ctx)
        }
    }

+    setVolume(volume: number) {
+        this.targetVolume = Math.max(0, Math.min(1, volume))
+        this.list.forEach((ctx) => {
+            try {
+                ctx.volume = this.targetVolume
+            } catch (_) {}
+        })
+    }
+
    /**
     * 预热：短暂播放,让音频文件下载/解码到内存
     * 真正首次 play 不会再卡冷启动
@@ -52,7 +67,7 @@ class AudioPool {
                setTimeout(() => {
                    try {
                        ctx.stop()
-                        ctx.volume = 1 // 恢复音量
+                        ctx.volume = this.targetVolume // 恢复目标音量
                    } catch (_) {}
                }, 60)
            } catch (_) {}
@@ -103,6 +118,7 @@ export function useMetronome(options: MetronomeOptions = {}) {
        clickSrc = DEFAULT_CLICK_SRC,
        accentSrc,
        poolSize = 4,
+        volume = 1,
        onBeat,
    } = options

@@ -121,11 +137,11 @@ export function useMetronome(options: MetronomeOptions = {}) {

    const ensureAudio = () => {
        if (!clickPool) {
-            clickPool = new AudioPool(clickSrc, poolSize)
+            clickPool = new AudioPool(clickSrc, poolSize, volume)
            clickPool.warmUp()
        }
        if (accentSrc && !accentPool) {
-            accentPool = new AudioPool(accentSrc, Math.max(2, Math.ceil(poolSize / 2)))
+            accentPool = new AudioPool(accentSrc, Math.max(2, Math.ceil(poolSize / 2)), volume)
            accentPool.warmUp()
        }
    }
@@ -1,10 +1,9 @@
 <template>
    <view class="crush-canvas-container">
        <canvas
-            canvas-id="crush"
+            type="2d"
            id="crush"
            class="crush-canvas"
-            :style="{ width: canvasSizePx + 'px', height: canvasSizePx + 'px' }"
        ></canvas>
    </view>
 </template>
@@ -12,7 +11,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'

-// 粒子接口
+// ============================================================
+// 类型定义
+// ============================================================
+
+type CrushItemType = 'egg' | 'walnut' | 'can' | 'balloon'
+type ParticleShape = 'circle' | 'square' | 'triangle' | 'rect'
+
 interface Particle {
    x: number
    y: number
@@ -20,44 +25,107 @@ interface Particle {
    vy: number
    size: number
    color: string
+    shape: ParticleShape
+    rotation: number
+    rotationSpeed: number
+    life: number
+    gravity: number
+}
+
+interface Shockwave {
+    x: number
+    y: number
+    radius: number
+    maxRadius: number
+    color: string
    life: number
 }

-// 捏碎物品类型
-type CrushItemType = 'egg' | 'walnut' | 'can' | 'balloon'
-
-// 捏碎物品配置
 interface CrushItemConfig {
-    emoji: string
-    color: string
+    colors: string[]
+    shapes: ParticleShape[]
    particles: number
+    speedMin: number
+    speedMax: number
+    sizeMin: number
+    sizeMax: number
+    gravity: number
+    shockwaveColor: string
 }

+// ============================================================
+// 物品差异化配置
+// ============================================================
+
 const CRUSH_ITEMS: Record<CrushItemType, CrushItemConfig> = {
-    egg: { emoji: '🥚', color: '#FFF9C4', particles: 20 },
-    walnut: { emoji: '🥜', color: '#8D6E63', particles: 25 },
-    can: { emoji: '🥫', color: '#B0BEC5', particles: 30 },
-    balloon: { emoji: '🎈', color: '#FF5252', particles: 15 }
+    egg: {
+        colors: ['#FFEB3B', '#FFF59D', '#FFFFFF', '#FFC107'],
+        shapes: ['circle', 'circle', 'circle'],
+        particles: 18,
+        speedMin: 3,
+        speedMax: 5.5,
+        sizeMin: 4,
+        sizeMax: 9,
+        gravity: 0.32,
+        shockwaveColor: 'rgba(255, 235, 59, 0.4)',
+    },
+    walnut: {
+        colors: ['#5D4037', '#795548', '#8D6E63', '#3E2723'],
+        shapes: ['square', 'triangle', 'rect'],
+        particles: 20,
+        speedMin: 2.5,
+        speedMax: 4.5,
+        sizeMin: 4,
+        sizeMax: 8,
+        gravity: 0.4,
+        shockwaveColor: 'rgba(141, 110, 99, 0.5)',
+    },
+    can: {
+        colors: ['#90A4AE', '#CFD8DC', '#B0BEC5', '#78909C', '#ECEFF1'],
+        shapes: ['rect', 'rect', 'triangle'],
+        particles: 22,
+        speedMin: 4,
+        speedMax: 6.5,
+        sizeMin: 3,
+        sizeMax: 10,
+        gravity: 0.35,
+        shockwaveColor: 'rgba(176, 190, 197, 0.6)',
+    },
+    balloon: {
+        colors: ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#FFEB3B', '#69F0AE'],
+        shapes: ['circle', 'triangle'],
+        particles: 24,
+        speedMin: 4.5,
+        speedMax: 7,
+        sizeMin: 3,
+        sizeMax: 6,
+        gravity: 0.12,
+        shockwaveColor: 'rgba(255, 64, 129, 0.5)',
+    },
 }

-// 物理参数常量
 const PHYSICS = {
-    GRAVITY: 0.3,           // 重力加速度
-    AIR_RESISTANCE: 0.98,   // 空气阻力系数
-    LIFE_DECAY: 0.015,      // 生命值衰减速度（约 67 帧 = 1.1 秒）
-    SPEED_MIN: 3,           // 最小初速度
-    SPEED_MAX: 5,           // 最大初速度
-    SIZE_MIN: 4,            // 最小粒子尺寸
-    SIZE_MAX: 8,            // 最大粒子尺寸
-    FPS: 60                 // 目标帧率
+    AIR_RESISTANCE: 0.985,
+    LIFE_DECAY: 0.02,
+    SHOCKWAVE_DECAY: 0.04,
 }

-// Canvas 尺寸（px）
-const canvasSizePx = ref<number>(240)
+// ============================================================
+// 状态
+// ============================================================
+
+const canvasNode = ref<any>(null)
 const ctx = ref<any>(null)
-const timer = ref<number | null>(null)
+const canvasWidth = ref<number>(240)
+const canvasHeight = ref<number>(240)
+const dpr = ref<number>(1)
+
+const rafId = ref<number | null>(null)
 const renderRunning = ref<boolean>(false)
 const particles = ref<Particle[]>([])
+const shockwaves = ref<Shockwave[]>([])
+
+const instance = getCurrentInstance()

 onMounted(() => {
    initCanvas()
@@ -67,129 +135,238 @@ onBeforeUnmount(() => {
    cleanup()
 })

-// 初始化 Canvas
+// ============================================================
+// 初始化 Canvas 2D
+// ============================================================
+
 function initCanvas() {
    setTimeout(() => {
-        const query = uni.createSelectorQuery().in(getCurrentInstance())
-        query.select('.crush-canvas-container').boundingClientRect(data => {
-            if (data && data.width > 0) {
-                // 获取实际渲染尺寸（px）
-                canvasSizePx.value = data.width
-            }
+        if (!instance) return

-            if (!ctx.value) {
-                ctx.value = uni.createCanvasContext('crush', getCurrentInstance())
-            }
-        }).exec()
-    }, 100)
+        const query = uni.createSelectorQuery().in(instance)
+        query.select('#crush')
+            .fields({ node: true, size: true } as any)
+            .exec((res: any[]) => {
+                if (!res || !res[0] || !res[0].node) {
+                    // 降级:如果获取不到 node(非微信平台),不渲染
+                    console.warn('[crush-canvas] canvas 2d not supported on this platform')
+                    return
+                }
+
+                const canvas = res[0].node
+                const width = res[0].width
+                const height = res[0].height
+
+                // 获取设备像素比
+                const systemInfo = uni.getSystemInfoSync()
+                const pixelRatio = systemInfo.pixelRatio || 1
+
+                // 设置 canvas 物理像素尺寸(高清)
+                canvas.width = width * pixelRatio
+                canvas.height = height * pixelRatio
+
+                // 获取 2D 上下文
+                const context = canvas.getContext('2d')
+                context.scale(pixelRatio, pixelRatio)
+
+                // 保存状态
+                canvasNode.value = canvas
+                ctx.value = context
+                canvasWidth.value = width
+                canvasHeight.value = height
+                dpr.value = pixelRatio
+            })
+    }, 200)
 }

-// 触发捏碎特效（供外部调用）
+// ============================================================
+// 触发捏碎特效
+// ============================================================
+
 function triggerCrush(itemType: CrushItemType) {
-    if (!ctx.value) {
-        return
-    }
+    if (!ctx.value || !canvasNode.value) return

    const item = CRUSH_ITEMS[itemType]
-    if (!item) {
-        return
-    }
+    if (!item) return

-    // 生成粒子
-    const centerX = canvasSizePx.value / 2
-    const centerY = canvasSizePx.value / 2
+    const centerX = canvasWidth.value / 2
+    const centerY = canvasHeight.value / 2
+
+    // 1. 生成双层冲击波
+    shockwaves.value.push({
+        x: centerX,
+        y: centerY,
+        radius: 10,
+        maxRadius: Math.min(canvasWidth.value, canvasHeight.value) * 0.6,
+        color: item.shockwaveColor,
+        life: 1.0,
+    })
+    shockwaves.value.push({
+        x: centerX,
+        y: centerY,
+        radius: 4,
+        maxRadius: Math.min(canvasWidth.value, canvasHeight.value) * 0.4,
+        color: item.shockwaveColor,
+        life: 1.0,
+    })
+
+    // 2. 生成粒子(径向扩散)
    const particleCount = item.particles
-
    for (let i = 0; i < particleCount; i++) {
-        // 随机角度和速度（径向扩散）
-        const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5
-        const speed = PHYSICS.SPEED_MIN + Math.random() * (PHYSICS.SPEED_MAX - PHYSICS.SPEED_MIN)
+        const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.6
+        const speed = item.speedMin + Math.random() * (item.speedMax - item.speedMin)
+        const size = item.sizeMin + Math.random() * (item.sizeMax - item.sizeMin)
+        const color = item.colors[Math.floor(Math.random() * item.colors.length)]
+        const shape = item.shapes[Math.floor(Math.random() * item.shapes.length)]

        particles.value.push({
            x: centerX,
            y: centerY,
            vx: Math.cos(angle) * speed,
            vy: Math.sin(angle) * speed,
-            size: PHYSICS.SIZE_MIN + Math.random() * (PHYSICS.SIZE_MAX - PHYSICS.SIZE_MIN),
-            color: item.color,
-            life: 1.0
+            size,
+            color,
+            shape,
+            rotation: Math.random() * Math.PI * 2,
+            rotationSpeed: (Math.random() - 0.5) * 0.3,
+            life: 1.0,
+            gravity: item.gravity,
        })
    }

    ensureRenderLoop()
 }

-// 确保渲染循环运行
+// ============================================================
+// 渲染循环(使用 requestAnimationFrame,更准确高效)
+// ============================================================
+
 function ensureRenderLoop() {
    if (renderRunning.value) return
    renderRunning.value = true
    renderLoop()
 }

-// 渲染循环
 function renderLoop() {
+    if (!canvasNode.value || !ctx.value) {
+        renderRunning.value = false
+        return
+    }
+
    // 更新粒子物理
    for (let i = particles.value.length - 1; i >= 0; i--) {
        const p = particles.value[i]
-
-        // 重力
-        p.vy += PHYSICS.GRAVITY
-
-        // 空气阻力
+        p.vy += p.gravity
        p.vx *= PHYSICS.AIR_RESISTANCE
        p.vy *= PHYSICS.AIR_RESISTANCE
-
-        // 位置更新
        p.x += p.vx
        p.y += p.vy
-
-        // 生命值衰减
+        p.rotation += p.rotationSpeed
        p.life -= PHYSICS.LIFE_DECAY

-        // 移除死亡粒子或飞出画布的粒子
-        const outOfBounds = p.x < -50 || p.x > canvasSizePx.value + 50 ||
-                           p.y < -50 || p.y > canvasSizePx.value + 50
+        const outOfBounds =
+            p.x < -50 || p.x > canvasWidth.value + 50 ||
+            p.y < -50 || p.y > canvasHeight.value + 50
        if (p.life <= 0 || outOfBounds) {
            particles.value.splice(i, 1)
        }
    }

-    // 绘制
-    draw()
-    ctx.value.draw(false)
+    // 更新冲击波
+    for (let i = shockwaves.value.length - 1; i >= 0; i--) {
+        const sw = shockwaves.value[i]
+        sw.radius += (sw.maxRadius - sw.radius) * 0.15
+        sw.life -= PHYSICS.SHOCKWAVE_DECAY
+        if (sw.life <= 0) {
+            shockwaves.value.splice(i, 1)
+        }
+    }

-    // 决定是否继续渲染
-    if (particles.value.length > 0) {
-        timer.value = setTimeout(() => {
-            renderLoop()
-        }, 1000 / PHYSICS.FPS) as unknown as number
+    draw()
+
+    // 决定是否继续
+    if (particles.value.length > 0 || shockwaves.value.length > 0) {
+        // canvas 2d 模式下使用 canvas.requestAnimationFrame
+        rafId.value = canvasNode.value.requestAnimationFrame(renderLoop) as unknown as number
    } else {
-        timer.value = null
+        rafId.value = null
        renderRunning.value = false
    }
 }

-// 绘制粒子
+// ============================================================
+// 绘制
+// ============================================================
+
 function draw() {
    const c = ctx.value
-    const size = canvasSizePx.value
+    const w = canvasWidth.value
+    const h = canvasHeight.value

-    // 清空画布（透明）
-    c.clearRect(0, 0, size, size)
+    // 清空画布(透明)
+    c.clearRect(0, 0, w, h)

-    // 绘制所有粒子
+    // 1. 绘制冲击波(底层)
+    shockwaves.value.forEach(sw => {
+        c.beginPath()
+        c.arc(sw.x, sw.y, sw.radius, 0, Math.PI * 2)
+        c.strokeStyle = applyAlphaToRgba(sw.color, sw.life)
+        c.lineWidth = 3 * sw.life
+        c.stroke()
+    })
+
+    // 2. 绘制粒子(上层)
    particles.value.forEach(p => {
        const alpha = p.life
-        const currentSize = p.size * (0.5 + p.life * 0.5)
-
-        c.beginPath()
-        c.arc(p.x, p.y, currentSize, 0, Math.PI * 2)
+        const currentSize = p.size * (0.6 + p.life * 0.4)
        c.fillStyle = hexToRgba(p.color, alpha)
-        c.fill()
+        drawParticleShape(c, p, currentSize)
    })
 }

-// 颜色转换工具
+function drawParticleShape(c: any, p: Particle, size: number) {
+    switch (p.shape) {
+        case 'circle':
+            c.beginPath()
+            c.arc(p.x, p.y, size, 0, Math.PI * 2)
+            c.fill()
+            break
+
+        case 'square':
+            c.save()
+            c.translate(p.x, p.y)
+            c.rotate(p.rotation)
+            c.fillRect(-size, -size, size * 2, size * 2)
+            c.restore()
+            break
+
+        case 'rect':
+            c.save()
+            c.translate(p.x, p.y)
+            c.rotate(p.rotation)
+            c.fillRect(-size * 1.5, -size * 0.5, size * 3, size)
+            c.restore()
+            break
+
+        case 'triangle':
+            c.save()
+            c.translate(p.x, p.y)
+            c.rotate(p.rotation)
+            c.beginPath()
+            c.moveTo(0, -size)
+            c.lineTo(size, size)
+            c.lineTo(-size, size)
+            c.closePath()
+            c.fill()
+            c.restore()
+            break
+    }
+}
+
+// ============================================================
+// 工具函数
+// ============================================================
+
 function hexToRgba(hex: string, alpha: number): string {
    const r = parseInt(hex.slice(1, 3), 16)
    const g = parseInt(hex.slice(3, 5), 16)
@@ -197,19 +374,36 @@ function hexToRgba(hex: string, alpha: number): string {
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
 }

-// 清理资源
+function applyAlphaToRgba(rgba: string, alphaMultiplier: number): string {
+    const match = rgba.match(/rgba?\(([^)]+)\)/)
+    if (!match) return rgba
+
+    const parts = match[1].split(',').map(s => s.trim())
+    const r = parts[0]
+    const g = parts[1]
+    const b = parts[2]
+    const a = parts[3] ? parseFloat(parts[3]) : 1
+    return `rgba(${r}, ${g}, ${b}, ${a * alphaMultiplier})`
+}
+
+// ============================================================
+// 清理
+// ============================================================
+
 function cleanup() {
-    if (timer.value) {
-        clearTimeout(timer.value)
-        timer.value = null
+    if (rafId.value !== null && canvasNode.value) {
+        try {
+            canvasNode.value.cancelAnimationFrame(rafId.value)
+        } catch (_) {}
+        rafId.value = null
    }
    renderRunning.value = false
    particles.value = []
+    shockwaves.value = []
 }

-// 暴露方法供父组件调用
 defineExpose({
-    triggerCrush
+    triggerCrush,
 })
 </script>

@@ -220,7 +414,7 @@ defineExpose({
    left: 0;
    width: 100%;
    height: 100%;
-    pointer-events: none; /* 不阻挡点击事件 */
+    pointer-events: none;
    z-index: 10;
 }

@@ -1,33 +1,36 @@
 <template>
    <view class="grip-ring-canvas">
-        <!-- 捏碎特效画布 (最底层) -->
+        <!-- 环境氛围:中心放射光晕(不形成边界,真正融入) -->
+        <view class="ambient-glow" />
+
+        <!-- 捏碎特效画布 -->
        <CrushCanvas ref="crushCanvasRef" />

        <!-- 握力环容器 -->
        <view class="ring-container" :class="{ playing: isPlaying }" @click="onButtonClick">
+            <!-- 外发光(只在播放时启用) -->
+            <view class="ring-aura" />
+
            <!-- 握力环主体 -->
            <view class="grip-ring">
-                <!-- 外圈 -->
                <view class="ring-outer-circle" />
-
-                <!-- 内圈 -->
+                <view class="ring-highlight" />
                <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>
+                <view class="hint-icon">
+                    <view class="play-triangle" />
+                </view>
                <text class="hint-text">点击开始</text>
            </view>
+
+            <!-- BPM 显示 (播放时显示) -->
+            <view v-else class="bpm-display">
+                <text class="bpm-value">{{ bpm }}</text>
+                <text class="bpm-label">BPM</text>
+            </view>
        </view>
    </view>
 </template>
@@ -64,6 +67,9 @@ defineExpose({
 </script>

 <style lang="scss" scoped>
+/* ============================================================
+ * 画布容器 - 完全融入页面,无边界
+ * ============================================================ */
 .grip-ring-canvas {
    width: 100%;
    height: 100%;
@@ -71,16 +77,36 @@ defineExpose({
    align-items: center;
    justify-content: center;
    position: relative;
-    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
+    overflow: hidden;
+    /* 与页面背景一致,无可见边界 */
+    background: #f8fafc;
+}
+
+/* 环境氛围 - 中心大放射光晕,营造空间感 */
+.ambient-glow {
+    position: absolute;
+    width: 1400rpx;
+    height: 1400rpx;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background:
+        radial-gradient(circle,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(241, 245, 249, 0.6) 25%,
+            rgba(226, 232, 240, 0.3) 50%,
+            transparent 75%);
+    pointer-events: none;
 }

 /* ============================================================
- * 握力环容器
+ * 握力环容器 - 主视觉
 * ============================================================ */
 .ring-container {
    position: relative;
-    width: 400rpx;
-    height: 400rpx;
+    width: 640rpx;
+    height: 640rpx;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -88,134 +114,113 @@ defineExpose({
    z-index: 1;
 }

+/* 外发光 - 只在播放时显示(节省 GPU) */
+.ring-aura {
+    position: absolute;
+    width: 700rpx;
+    height: 700rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+        rgba(244, 114, 182, 0.45) 0%,
+        rgba(244, 114, 182, 0.15) 35%,
+        rgba(244, 114, 182, 0) 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    will-change: transform, opacity;
+}
+
+.ring-container.playing .ring-aura {
+    opacity: 1;
+    animation: aura-breath 2s ease-in-out infinite;
+}
+
+@keyframes aura-breath {
+    0%, 100% {
+        transform: scale(0.95);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scale(1.08);
+        opacity: 1;
+    }
+}
+
 /* ============================================================
- * 握力环主体 - 模拟真实握力环
+ * 握力环主体 - 大尺寸沉浸感
 * ============================================================ */
 .grip-ring {
    position: relative;
-    width: 320rpx;
-    height: 320rpx;
+    width: 520rpx;
+    height: 520rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform;
 }

 .ring-container:active .grip-ring {
-    transform: scale(0.95);
+    transform: scale(0.96);
 }

-/* 外圈 - 主体圆环 */
+/* 外圈 - 粉色渐变(精致质感) */
 .ring-outer-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
-    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
+    background: linear-gradient(135deg,
+        #fda4af 0%,
+        #f472b6 50%,
+        #ec4899 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);
+        0 24rpx 64rpx rgba(236, 72, 153, 0.4),
+        0 12rpx 32rpx rgba(244, 114, 182, 0.3),
+        inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
+        inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
 }

-/* 内圈 - 中空部分 */
-.ring-inner-circle {
+/* 顶部高光 - 模拟材质感 */
+.ring-highlight {
    position: absolute;
-    width: 180rpx;
-    height: 180rpx;
+    width: 420rpx;
+    height: 120rpx;
+    top: 40rpx;
    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
-        );
+    background: radial-gradient(ellipse,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
 }

-/* 握点 - 顶部和底部的凸起 */
-.grip-dot {
+/* 内圈中空 */
+.ring-inner-circle {
    position: absolute;
-    width: 56rpx;
-    height: 56rpx;
+    width: 280rpx;
+    height: 280rpx;
    border-radius: 50%;
-    background: linear-gradient(135deg, #10b981, #047857);
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    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;
+        inset 0 8rpx 20rpx rgba(190, 24, 93, 0.3),
+        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
 }

-.grip-dot-top {
-    top: -12rpx;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.grip-dot-bottom {
-    bottom: -12rpx;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-/* 播放时的挤压动画 */
+/* 播放时的挤压动画(只影响 transform,GPU 加速) */
 .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);
+        transform: scale(0.93);
    }
 }

 /* ============================================================
- * 中心提示 (仅未开始时显示)
+ * 中心提示 (未开始)
 * ============================================================ */
 .center-hint {
    position: absolute;
@@ -223,7 +228,7 @@ defineExpose({
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    gap: 12rpx;
+    gap: 16rpx;
    pointer-events: none;
    animation: hint-fade-in 0.3s ease;
 }
@@ -240,19 +245,27 @@ defineExpose({
 }

 .hint-icon {
-    width: 88rpx;
-    height: 88rpx;
+    width: 108rpx;
+    height: 108rpx;
    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);
+        0 12rpx 32rpx rgba(236, 72, 153, 0.35),
+        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
    animation: hint-bounce 2s ease-in-out infinite;
+    will-change: transform;
+}
+
+.play-triangle {
+    width: 0;
+    height: 0;
+    border-left: 36rpx solid #ec4899;
+    border-top: 24rpx solid transparent;
+    border-bottom: 24rpx solid transparent;
+    margin-left: 10rpx;
 }

@keyframes hint-bounce {
@@ -260,15 +273,46 @@ defineExpose({
        transform: scale(1);
    }
    50% {
-        transform: scale(1.08);
+        transform: scale(1.06);
    }
 }

 .hint-text {
-    font-size: 26rpx;
-    color: #059669;
-    font-weight: 600;
-    letter-spacing: 2rpx;
-    text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
+    font-size: 28rpx;
+    color: #be185d;
+    font-weight: 700;
+    letter-spacing: 4rpx;
+    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
+}
+
+/* ============================================================
+ * BPM 显示 (播放中)
+ * ============================================================ */
+.bpm-display {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4rpx;
+    pointer-events: none;
+}
+
+.bpm-value {
+    font-size: 88rpx;
+    color: #be185d;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -2rpx;
+    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
+    font-variant-numeric: tabular-nums;
+}
+
+.bpm-label {
+    font-size: 22rpx;
+    color: #ec4899;
+    font-weight: 700;
+    letter-spacing: 6rpx;
+    margin-top: 2rpx;
 }
 </style>
@@ -8,6 +8,11 @@
                :is-playing="isPlaying"
                @toggle-play="onTogglePlay"
            />
+
+            <!-- BGM 开关按钮 -->
+            <view class="bgm-toggle" @click="toggleBgm">
+                <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
+            </view>
        </view>

        <!-- ===== 实时统计 ===== -->
@@ -54,27 +59,52 @@

        <!-- ===== 训练完成卡片 ===== -->
        <view v-if="showSummary" class="completion-card">
-            <text class="completion-title">训练完成 🎉</text>
+            <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-label">总次数</text>
+                        <text class="stat-icon">💪</text>
                        <text class="stat-value">{{ totalReps }}</text>
+                        <text class="stat-label">总次数</text>
                    </view>
                    <view class="stat-item">
-                        <text class="stat-label">总时长</text>
+                        <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-label">消耗糖分</text>
+                        <text class="stat-icon">🔥</text>
                        <text class="stat-value">{{ totalSugar.toFixed(1) }}g</text>
+                        <text class="stat-label">消耗糖分</text>
                    </view>
                </view>

-                <view class="sugar-card">
-                    <text class="sugar-label">相当于消耗了</text>
-                    <text class="sugar-comparison">{{ sugarComparison }}</text>
+                <!-- 食物对照 -->
+                <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>

@@ -130,16 +160,16 @@ const REWARDS: RewardConfig[] = [
        title: '捏碎鸡蛋',
        desc: '握力不错！',
        itemType: 'egg',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/202605280937077bad76716.mp3',
        minReps: 8,
        maxReps: 12
    },
    {
-        emoji: '🥜',
+        emoji: '🌰',
        title: '捏碎核桃',
        desc: '力量惊人！',
        itemType: 'walnut',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707b021f5794.mp3',
        minReps: 15,
        maxReps: 20
    },
@@ -148,7 +178,7 @@ const REWARDS: RewardConfig[] = [
        title: '捏扁易拉罐',
        desc: '太强了！',
        itemType: 'can',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707ebd4d5733.mp3',
        minReps: 25,
        maxReps: 30
    },
@@ -157,19 +187,24 @@ const REWARDS: RewardConfig[] = [
        title: '捏爆气球',
        desc: '完美！',
        itemType: 'balloon',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707016f07427.mp3',
        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 = [
-    { 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
+    { 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')
@@ -178,6 +213,8 @@ const showRewardPopup = ref(false)
 const showSummary = ref(false)
 const currentReward = ref<RewardConfig>(REWARDS[0])
 const crushAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmEnabled = ref(true) // BGM 开关

 // 训练统计
 const totalReps = ref(0) // 总次数
@@ -196,6 +233,7 @@ const currentBpm = computed(() => preset.value.bpm)
 const metronome = useMetronome({
    initialBpm: currentBpm.value,
    accentEvery: 2,
+    volume: 0.35, // 节拍音音量调小,避免木鱼声太大
    onBeat: onBeat,
 })
 const { isPlaying } = metronome
@@ -206,19 +244,29 @@ const rootStyle = computed(() => ({
    '--beat-duration': `${intervalMs.value}ms`,
 }))

-// 糖分对比
-const sugarComparison = computed(() => {
-    if (totalSugar.value === 0) return ''
+// 糖分对比 - 返回多个食物对照(显示用)
+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
-        if (count >= 0.3 && count <= 10) {
-            return `${count.toFixed(1)} ${food.unit}${food.name}的糖分`
+
+        // 选择 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,
+            })
        }
    }

-    return `${totalSugar.value.toFixed(1)}g 糖分`
+    // 最多展示 3 个
+    return results.slice(0, 3)
 })

 // 节拍回调
@@ -260,15 +308,10 @@ function triggerReward() {
    const reward = REWARDS[rewardIndex.value]
    currentReward.value = reward

-    // 触发粒子特效
+    // 立即触发粒子特效和音效
    gripCanvasRef.value?.triggerCrushEffect(reward.itemType)
-
-    // 播放碎裂音效
    playCrushSound(reward.sound)

-    // 显示奖励弹窗
-    showRewardPopup.value = true
-
    // 递进到下一个奖励等级
    rewardIndex.value++

@@ -278,6 +321,11 @@ function triggerReward() {
        const range = nextReward.maxReps - nextReward.minReps
        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
    }
+
+    // 延迟 1200ms 显示弹窗,让粒子动画先完整播放
+    setTimeout(() => {
+        showRewardPopup.value = true
+    }, 1200)
 }

 function closeRewardPopup() {
@@ -304,6 +352,48 @@ function playCrushSound(sound: string) {
    } catch (_) {}
 }

+// 启动背景音乐
+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
@@ -316,6 +406,7 @@ function onTogglePlay() {
    if (isPlaying.value) {
        // 暂停 - 显示总结
        metronome.stop()
+        stopBgm()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
        showSummary.value = true
@@ -330,6 +421,7 @@ function onTogglePlay() {
        }

        metronome.start()
+        startBgm()
        startTimer()
        uni.setKeepScreenOn({ keepScreenOn: true })
    }
@@ -340,6 +432,7 @@ function onRestart() {
    showSummary.value = false
    resetStats()
    metronome.start()
+    startBgm()
    startTimer()
    uni.setKeepScreenOn({ keepScreenOn: true })
 }
@@ -386,6 +479,7 @@ onShow(() => {
 onHide(() => {
    if (isPlaying.value) {
        metronome.stop()
+        stopBgm()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
    }
@@ -394,6 +488,12 @@ onHide(() => {
            crushAudioCtx.value.destroy()
        } catch (_) {}
    }
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.destroy()
+        } catch (_) {}
+        bgmAudioCtx.value = null
+    }
 })
 </script>

@@ -407,9 +507,9 @@ $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;
+$brand: #14b8a6;        /* 主品牌色:青绿(健康主题) */
+$brand-soft: #ccfbf1;   /* 浅青绿背景 */
+$brand-deep: #0f766e;   /* 深青绿文字 */
 $radius-card: 24rpx;
 $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

@@ -436,8 +536,12 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    width: 100vw;
    margin-left: -28rpx;
    margin-right: -28rpx;
+    margin-top: -30rpx; /* 向上拉,贴近导航栏 */
    flex-shrink: 0;
-    height: 600rpx;
+    /* 占主屏 60%,确保下方统计栏和档位可见 */
+    height: 60vh;
+    min-height: 720rpx;
+    max-height: 900rpx;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -445,6 +549,37 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    position: relative;
 }

+/* ============================================================
+ * BGM 开关按钮
+ * ============================================================ */
+.bgm-toggle {
+    position: absolute;
+    top: 32rpx;
+    right: 32rpx;
+    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(20, 184, 166, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.2s ease;
+
+    &:active {
+        transform: scale(0.92);
+        background: #f0fdfa;
+    }
+}
+
+.bgm-icon {
+    font-size: 36rpx;
+    line-height: 1;
+}
+
 /* ============================================================
 * 进度显示
 * ============================================================ */
@@ -483,32 +618,61 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    width: 100%;
    background: $card-bg;
    border-radius: $radius-card;
-    padding: 20rpx 24rpx;
-    box-shadow: $shadow-sm;
+    padding: 24rpx 28rpx;
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.04),
+        0 1rpx 2rpx rgba(15, 23, 42, 0.04);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 16rpx;
+    border: 2rpx solid rgba(20, 184, 166, 0.08);
+    position: relative;
+    overflow: hidden;
+}
+
+.stats-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3rpx;
+    background: linear-gradient(90deg, transparent, $brand, transparent);
 }

 .stat-item-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 6rpx;
+    gap: 8rpx;
+    flex: 1;
+    position: relative;
+}
+
+.stat-item-inline:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: -8rpx;
+    top: 20%;
+    bottom: 20%;
+    width: 2rpx;
+    background: linear-gradient(to bottom, transparent, $card-border, transparent);
 }

 .stat-label-inline {
    font-size: 22rpx;
    color: $text-3;
    font-weight: 500;
+    letter-spacing: 1rpx;
 }

 .stat-value-inline {
-    font-size: 28rpx;
+    font-size: 32rpx;
    color: $brand-deep;
-    font-weight: 700;
+    font-weight: 800;
    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
 }

 /* ============================================================
@@ -565,8 +729,8 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
        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);
+            0 8rpx 20rpx rgba(20, 184, 166, 0.18),
+            inset 0 0 0 2rpx rgba(20, 184, 166, 0.4);

        .preset-name {
            color: $brand-deep;
@@ -608,7 +772,7 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

 .reward-popup {
    width: 560rpx;
-    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
+    background: linear-gradient(135deg, #fff 0%, #f0fdfa 100%);
    border-radius: 32rpx;
    padding: 48rpx 32rpx;
    display: flex;
@@ -674,12 +838,12 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    border-radius: 999rpx;
    font-size: 30rpx;
    font-weight: 600;
-    box-shadow: 0 8rpx 20rpx rgba(34, 197, 94, 0.3);
+    box-shadow: 0 8rpx 20rpx rgba(20, 184, 166, 0.3);
    transition: all 0.2s;

    &:active {
        transform: scale(0.97);
-        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.2);
+        box-shadow: 0 4rpx 12rpx rgba(20, 184, 166, 0.2);
    }
 }

@@ -688,29 +852,66 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 * ============================================================ */
 .completion-card {
    width: 100%;
-    background: linear-gradient(135deg, #dbeafe, #ede9fe);
+    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border-radius: $radius-card;
-    padding: 32rpx 24rpx;
+    padding: 40rpx 28rpx 32rpx;
    display: flex;
    flex-direction: column;
-    gap: 24rpx;
+    gap: 28rpx;
    align-items: center;
-    box-shadow: $shadow-sm;
+    box-shadow:
+        0 8rpx 32rpx rgba(20, 184, 166, 0.08),
+        0 2rpx 8rpx rgba(15, 23, 42, 0.04);
+    border: 2rpx solid rgba(20, 184, 166, 0.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: 30rpx;
+    font-size: 36rpx;
    color: $text-1;
-    font-weight: 700;
+    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: 20rpx;
+    gap: 24rpx;
 }

+/* 核心统计网格 */
 .stats-grid {
    display: flex;
    gap: 16rpx;
@@ -719,48 +920,123 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

 .stat-item {
    flex: 1;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 16rpx;
-    padding: 20rpx 12rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20rpx;
+    padding: 24rpx 12rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 8rpx;
+    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: 24rpx;
-    color: #64748b;
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
 }

 .stat-value {
-    font-size: 32rpx;
-    font-weight: 700;
+    font-size: 36rpx;
+    font-weight: 800;
    color: $text-1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
 }

-.sugar-card {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-    border-radius: 16rpx;
-    padding: 24rpx;
+/* ============================================================
+ * 食物对照卡片
+ * ============================================================ */
+.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;
-    width: 100%;
+    padding: 16rpx 8rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 16rpx;
+    transition: transform 0.3s ease;
 }

-.sugar-label {
-    font-size: 24rpx;
-    color: #065f46;
+.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;
-}
-
-.sugar-comparison {
-    font-size: 28rpx;
-    color: #047857;
-    font-weight: 700;
-    text-align: center;
+    letter-spacing: 1rpx;
 }

 .action-row {
@@ -0,0 +1,276 @@
+# 握力环训练音效采集清单
+
+> 更新日期: 2026-05-28
+> 用途: 为握力环训练页面添加完整音效体系
+
+---
+
+## 📋 总体规划
+
+| 类型 | 数量 | 单文件大小 | 总大小预算 | 优先级 |
+|------|------|-----------|-----------|--------|
+| 节拍音效 | 1-3 个音色 | 5-10 KB | < 30 KB | P0 |
+| 捏碎音效 | 4 个 | 20-50 KB | < 200 KB | P0 |
+| 背景音乐 | 1-2 首 | 200-500 KB | < 1 MB | P1 |
+| 语音鼓励 | 4-8 句 | 10-30 KB | < 200 KB | P1 |
+
+**总计预算**: < 1.5 MB(都放 CDN,不影响小程序包体积)
+
+---
+
+## 🥁 一、节拍音效 (P0 - 必需)
+
+### 用途
+训练时按 BPM 节奏播放,引导用户握紧/松开。
+
+### 推荐音色 (任选 1-3 个)
+
+| 音色 | 推荐度 | 描述 | Pixabay 搜索词 |
+|------|--------|------|---------------|
+| 木鱼 | ⭐⭐⭐⭐⭐ | 温暖、东方意境,适合养生主题 | `wood block`, `wooden tap`, `muyu` |
+| 心跳 | ⭐⭐⭐⭐ | 有运动感,代入感强 | `heart beat`, `heartbeat single` |
+| 轻柔敲击 | ⭐⭐⭐⭐ | 不刺耳,适合长时间训练 | `soft tap`, `gentle knock` |
+| 竹片声 | ⭐⭐⭐ | 清脆,有节奏感 | `bamboo tap`, `bamboo click` |
+| 鼓点 | ⭐⭐⭐ | 有力量感,适合"重度"档位 | `kick drum soft`, `tom drum tap` |
+
+### 技术要求
+- **格式**: mp3
+- **时长**: 50-150ms (不能太长,会重叠)
+- **采样率**: 22050Hz 或 44100Hz
+- **声道**: 单声道
+- **大小**: < 10 KB
+
+### 命名规范
+```
+grip-tick-wood.mp3      # 木鱼
+grip-tick-heart.mp3     # 心跳
+grip-tick-soft.mp3      # 轻柔
+grip-tick-bamboo.mp3    # 竹片
+```
+
+---
+
+## 💥 二、捏碎音效 (P0 - 必需)
+
+### 用途
+达成奖励里程碑时播放,与粒子特效同步。
+
+### 音效清单
+
+| 奖励 | 触发次数 | Pixabay 搜索词 | 时长 | 备注 |
+|------|---------|---------------|------|------|
+| 🥚 鸡蛋 | 8-12 | `egg crack`, `eggshell break`, `crack sound` | 0.5-1s | 清脆短促 |
+| 🥜 核桃 | 15-20 | `nut crack`, `walnut break`, `wood snap` | 0.5-1s | 木质爆裂感 |
+| 🥫 易拉罐 | 25-30 | `can crush`, `aluminum crush`, `metal crunch` | 1-2s | 金属挤压 |
+| 🎈 气球 | 40-50 | `balloon pop`, `pop burst`, `balloon explosion` | 0.3-0.5s | 短促爆裂 |
+
+### 技术要求
+- **格式**: mp3
+- **时长**: 0.3-2s
+- **大小**: < 50 KB
+- **音量**: 适中(避免突然吓到用户)
+
+### 命名规范
+```
+crush-egg.mp3
+crush-walnut.mp3
+crush-can.mp3
+crush-balloon.mp3
+```
+
+### 试听建议
+下载前一定要试听,优先选择:
+- ✅ 干净,无杂音
+- ✅ 中等音量(峰值不爆音)
+- ✅ 短促有力(不拖沓)
+- ❌ 避免: 太长、太尖锐、有人声
+
+---
+
+## 🎵 三、背景音乐 BGM (P1 - 推荐)
+
+### 用途
+训练时持续播放,营造轻松氛围,缓解握力训练的枯燥感。
+
+### 风格推荐
+
+| 风格 | 描述 | Pixabay 搜索词 | 适合人群 |
+|------|------|---------------|---------|
+| **Lo-Fi** | 慵懒电子,流行选择 | `lofi calm`, `lofi study`, `lofi chill` | 年轻人 |
+| **冥想轻音乐** | 钢琴 + 自然音,放松 | `meditation`, `calm piano`, `relaxing` | 中老年 |
+| **轻爵士** | 优雅放松,有质感 | `light jazz`, `cafe jazz`, `bossa nova` | 通用 |
+| **自然环境音** | 鸟叫/流水/雨声 | `nature ambient`, `forest sounds`, `rain bgm` | 喜欢自然的用户 |
+| **东方禅意** | 古筝/笛子,养生 | `chinese zen`, `oriental calm`, `guqin` | 养生主题契合 |
+
+### 推荐场景搭配
+- **轻度档位 (60 BPM)**: 冥想轻音乐 (节奏舒缓)
+- **中度档位 (80 BPM)**: 轻爵士 / Lo-Fi (适中)
+- **重度档位 (100 BPM)**: 轻快电子 / 健身流行
+
+### 技术要求
+- **格式**: mp3
+- **时长**: 30s - 2min (循环播放)
+- **比特率**: 128 kbps (单声道 64 kbps 也可)
+- **大小**: < 500 KB
+- **循环点**: 选择起止点接近的片段,避免明显接缝
+
+### 命名规范
+```
+bgm-grip-light.mp3       # 轻度档位 BGM
+bgm-grip-medium.mp3      # 中度档位 BGM (可选)
+bgm-grip-heavy.mp3       # 重度档位 BGM (可选)
+```
+
+或简化:
+```
+bgm-grip-default.mp3     # 默认 BGM (所有档位通用)
+```
+
+---
+
+## 🎙️ 四、语音鼓励 (P1 - 推荐)
+
+### 用途
+达成奖励时播放鼓励语音,增强成就感。
+
+### 两种方案
+
+#### 方案 A: 小米 MiMo TTS 自动生成 (推荐)
+
+项目已有 `useVoiceCoach.ts` + `generate-voice.mjs` 脚本支持。
+
+**操作步骤**:
+1. 申请小米 MiMo API Key: https://platform.xiaomimimo.com/
+2. 配置环境变量: `export MIMO_API_KEY=sk-xxx`
+3. 在 `generate-voice.mjs` 添加握力环话术
+4. 运行脚本自动生成
+
+**话术清单**:
+```javascript
+const gripPrompts = [
+    { id: 'grip-egg', text: '握力不错！' },
+    { id: 'grip-walnut', text: '力量惊人！' },
+    { id: 'grip-can', text: '太强了！' },
+    { id: 'grip-balloon', text: '完美！继续保持！' },
+    { id: 'grip-start', text: '开始训练！' },
+    { id: 'grip-pause', text: '休息一下！' },
+    { id: 'grip-encourage-1', text: '加油，再来！' },
+    { id: 'grip-encourage-2', text: '坚持住！' },
+]
+```
+
+**音色推荐**: `茉莉` (清爽利落,有"运动博主"感)
+
+#### 方案 B: 手工录制
+
+如果不想用 TTS,可以自己录制(质感更好,但费时):
+- 工具: 手机录音 / Audacity
+- 环境: 安静的房间,距离麦克风 15-30cm
+- 后期: 去噪 + 标准化音量
+
+---
+
+## 🛠️ 五、采集工具推荐
+
+### 在线裁剪
+- [audiotrimmer.com](https://audiotrimmer.com) - 简单的 mp3 裁剪
+- [mp3cut.net](https://mp3cut.net) - 功能更全
+
+### 桌面工具(免费)
+- **Audacity** (Mac/Windows/Linux) - 专业级,可以剪辑、降噪、标准化
+- **Logic Pro** (Mac, 付费) - 更专业的音频处理
+
+### 音量标准化
+统一音量(避免有的太响有的太轻):
+```bash
+# 使用 ffmpeg (Mac: brew install ffmpeg)
+ffmpeg -i input.mp3 -af "loudnorm=I=-16:LRA=11:TP=-1.5" output.mp3
+```
+
+或在 Audacity 里: Effect → Normalize (峰值 -3dB)
+
+---
+
+## ☁️ 六、上传到 CDN
+
+### 项目使用的 COS 信息
+- **域名**: `gz-1349751149.cos.ap-guangzhou.myqcloud.com`
+- **目录建议**: `uploads/training/grip-ring/`
+
+### 上传途径
+1. **腾讯云控制台**: https://console.cloud.tencent.com/cos
+2. **管理后台** (如果项目有上传入口)
+3. **找团队 COS 管理员上传**
+
+### 上传后获得的 URL 格式
+```
+https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/training/grip-ring/crush-egg.mp3
+```
+
+---
+
+## 📝 七、最终采集清单 (一次性收齐)
+
+### 最小可行版本 (MVP) - 4 个文件
+```
+☐ grip-tick-wood.mp3       # 节拍音 - 木鱼
+☐ crush-egg.mp3            # 鸡蛋
+☐ crush-walnut.mp3         # 核桃
+☐ crush-can.mp3            # 易拉罐
+☐ crush-balloon.mp3        # 气球
+```
+
+### 完整版本 - 10 个文件
+```
+节拍音 (3 选 1 或全部):
+☐ grip-tick-wood.mp3
+☐ grip-tick-heart.mp3
+☐ grip-tick-soft.mp3
+
+捏碎音效 (必需 4 个):
+☐ crush-egg.mp3
+☐ crush-walnut.mp3
+☐ crush-can.mp3
+☐ crush-balloon.mp3
+
+BGM (1-3 首):
+☐ bgm-grip-default.mp3
+☐ bgm-grip-meditation.mp3 (可选)
+☐ bgm-grip-lofi.mp3 (可选)
+
+语音鼓励 (TTS 自动生成,8 个):
+☐ grip-egg.mp3
+☐ grip-walnut.mp3
+☐ grip-can.mp3
+☐ grip-balloon.mp3
+☐ grip-start.mp3
+☐ grip-pause.mp3
+☐ grip-encourage-1.mp3
+☐ grip-encourage-2.mp3
+```
+
+---
+
+## ✅ 八、采集完成后
+
+把所有 URL 整理给我,我会:
+1. 更新 `grip-ring.vue` 中的 REWARDS 配置 (替换捏碎音效 URL)
+2. 创建/更新 `useMetronome.ts` 的音色配置 (支持切换节拍音色)
+3. 在 `grip-ring.vue` 集成 `useTrainingBgm` (添加 BGM)
+4. 在 `grip-ring.vue` 集成 `useVoiceCoach` (添加语音鼓励)
+5. 在 UI 上添加音色/BGM 切换选项 (可选)
+
+预计代码改动: 50-100 行,1-2 小时工作量。
+
+---
+
+## 📚 参考链接
+
+- [Pixabay 音效](https://pixabay.com/sound-effects/) - 免费可商用
+- [Pixabay 音乐](https://pixabay.com/music/) - 免费可商用
+- [Freesound](https://freesound.org) - 大量音效,部分需署名
+- [Mixkit](https://mixkit.co/free-sound-effects/) - 免费音效库
+- [Bensound](https://bensound.com) - 免费音乐(需署名)
+- [Free Music Archive](https://freemusicarchive.org) - 免费音乐
+
+**版权提示**: 务必确认音效/音乐是"免费商用"(Public Domain 或 CC0),避免侵权风险。