1

2026-05-27 14:47:29 +08:00
parent 3325be0622
commit 012830de4a
3 changed files with 514 additions and 614 deletions
@@ -0,0 +1,383 @@
+<template>
+    <view class="walker-canvas-container">
+        <canvas
+            canvas-id="walker"
+            id="walker"
+            class="walker-canvas"
+            :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchCancel"
+        ></canvas>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        isPlaying: {
+            type: Boolean,
+            default: false
+        },
+        bpm: {
+            type: Number,
+            default: 110
+        }
+    },
+    data() {
+        return {
+            canvasWidth: 320,
+            canvasHeight: 400,
+            ctx: null,
+            timer: null,
+            renderRunning: false,
+
+            // Interaction State (Spring Physics)
+            coreScale: 1,
+            coreTargetScale: 1,
+            coreVelocity: 0,
+            pressed: false,
+
+            // Animation Physics (Time)
+            time: 0,
+            lastFrameTime: 0,
+            
+            // Metronome State
+            lastBeatTime: 0,
+            
+            // Energy Waves
+            waveAmplitudeMultiplier: 1,
+            
+            // Shockwaves
+            shockwaves: [],
+            
+            // Rotation for outer ring
+            ringAngle: 0
+        };
+    },
+    mounted() {
+        this.initCanvas();
+    },
+    beforeUnmount() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.renderRunning = false;
+    },
+    watch: {
+        isPlaying(newVal) {
+            if (newVal) {
+                this.waveAmplitudeMultiplier = 1;
+                this.ensureRenderLoop();
+            }
+        }
+    },
+    methods: {
+        initCanvas() {
+            // Delay to ensure Flexbox layout is fully complete before measuring
+            setTimeout(() => {
+                const query = uni.createSelectorQuery().in(this);
+                query.select('.walker-canvas-container').boundingClientRect(data => {
+                    if (data && data.width > 0) {
+                        this.canvasWidth = data.width;
+                        this.canvasHeight = data.height > 100 ? data.height : data.width * 1.2;
+                    } else {
+                        const sys = uni.getSystemInfoSync();
+                        this.canvasWidth = sys.windowWidth - 30; // approximate padding
+                        this.canvasHeight = this.canvasWidth * 1.2;
+                    }
+                    
+                    if (!this.ctx) {
+                        this.ctx = uni.createCanvasContext('walker', this);
+                        this.lastFrameTime = Date.now();
+                        this.ensureRenderLoop();
+                    }
+                }).exec();
+            }, 100);
+        },
+        
+        // Expose a method to be called from parent when a beat hits
+        triggerBeat() {
+            const coreRadius = Math.min(this.canvasWidth, this.canvasHeight) * 0.32;
+            // Add a shockwave
+            this.shockwaves.push({
+                radius: coreRadius,
+                maxRadius: coreRadius * 2.2,
+                opacity: 1
+            });
+
+            // Spike the wave amplitude
+            this.waveAmplitudeMultiplier = 2.5;
+
+            // Slight pulse to the core
+            this.coreVelocity -= 0.05;
+
+            this.ensureRenderLoop();
+        },
+        
+        onTouchStart(e) {
+            const touch = e.touches[0];
+            if (!touch) return;
+
+            // Center
+            const cx = this.canvasWidth / 2;
+            const cy = this.canvasHeight / 2 - 30;
+            const coreRadius = Math.min(this.canvasWidth, this.canvasHeight) * 0.32;
+
+            const dx = touch.x - cx;
+            const dy = touch.y - cy;
+            const dist = Math.sqrt(dx*dx + dy*dy);
+
+            // Hit box slightly larger than the visual circle
+            if (dist <= coreRadius + 40) {
+                this.pressed = true;
+                this.coreTargetScale = 0.9;
+                this.ensureRenderLoop();
+            }
+        },
+        onTouchMove(e) {
+            if (!this.pressed) return;
+            const touch = e.touches[0];
+            if (!touch) return;
+
+            const cx = this.canvasWidth / 2;
+            const cy = this.canvasHeight / 2 - 30;
+            const coreRadius = Math.min(this.canvasWidth, this.canvasHeight) * 0.32;
+
+            const dx = touch.x - cx;
+            const dy = touch.y - cy;
+            const dist = Math.sqrt(dx*dx + dy*dy);
+
+            // Slid out of the hit box - cancel the press
+            if (dist > coreRadius + 40) {
+                this.pressed = false;
+                this.coreTargetScale = 1;
+            }
+        },
+        onTouchEnd() {
+            // Unconditionally reset the visual scale
+            this.coreTargetScale = 1;
+            // Only emit toggle when the press has not been cancelled by drag-out
+            if (this.pressed) {
+                this.$emit('toggle-play');
+            }
+            this.pressed = false;
+        },
+        onTouchCancel() {
+            // System interruption (incoming call, notification pull-down, etc.):
+            // reset visuals only — do NOT count this as a user toggle intent.
+            this.coreTargetScale = 1;
+            this.pressed = false;
+        },
+        
+        ensureRenderLoop() {
+            if (this.renderRunning) return;
+            this.renderRunning = true;
+            this.renderLoop();
+        },
+
+        renderLoop() {
+            // Use a fixed time delta to prevent rubber-banding/jitter on unstable JS timers
+            const fixedDt = 0.016;
+
+            if (this.isPlaying) {
+                this.time += fixedDt;
+            } else {
+                this.time += fixedDt * 0.2; // slow drift when paused
+            }
+
+            // Spring Physics for Core Scale
+            const tension = 120;
+            const friction = 12;
+            const force = (this.coreTargetScale - this.coreScale) * tension;
+            this.coreVelocity += force * fixedDt;
+            this.coreVelocity *= Math.exp(-friction * fixedDt);
+            this.coreScale += this.coreVelocity * fixedDt;
+
+            // Decay wave amplitude back to 1
+            if (this.waveAmplitudeMultiplier > 1) {
+                this.waveAmplitudeMultiplier -= fixedDt * 3;
+                if (this.waveAmplitudeMultiplier < 1) this.waveAmplitudeMultiplier = 1;
+            } else if (!this.isPlaying && this.waveAmplitudeMultiplier > 0.1) {
+                this.waveAmplitudeMultiplier -= fixedDt * 2;
+                if (this.waveAmplitudeMultiplier < 0.1) this.waveAmplitudeMultiplier = 0.1;
+            }
+
+            this.draw();
+
+            this.ctx.draw(false);
+
+            // Decide whether to continue the render loop. Short-circuit on isPlaying first for perf.
+            const shouldContinue =
+                this.isPlaying ||
+                this.shockwaves.length > 0 ||
+                Math.abs(this.coreScale - this.coreTargetScale) >= 0.001 ||
+                Math.abs(this.coreVelocity) >= 0.001 ||
+                this.waveAmplitudeMultiplier > 0.11;
+
+            if (shouldContinue) {
+                // Polyfill requestAnimationFrame for uni-app
+                this.timer = setTimeout(() => {
+                    this.renderLoop();
+                }, 1000 / 60);
+            } else {
+                this.timer = null;
+                this.renderRunning = false;
+            }
+        },
+        
+        draw() {
+            const ctx = this.ctx;
+            const W = this.canvasWidth;
+            const H = this.canvasHeight;
+            
+            // Clear entire canvas to ensure it is completely transparent and blends with the page background
+            ctx.clearRect(0, 0, W, H);
+            
+            // Dynamic majestic sizing to fill the huge screen area
+            const coreRadius = Math.min(W, H) * 0.32; // Make the central circle MASSIVE
+            const ringRadius = coreRadius + 18;
+            const cx = W / 2;
+            const cy = H / 2 - 30; // Slightly above center
+            
+            // 3. Draw Shockwaves (Ripples)
+            for (let i = this.shockwaves.length - 1; i >= 0; i--) {
+                const sw = this.shockwaves[i];
+                sw.radius += (sw.maxRadius - sw.radius) * 0.08;
+                sw.opacity -= 0.03;
+                
+                if (sw.opacity <= 0) {
+                    this.shockwaves.splice(i, 1);
+                    continue;
+                }
+                
+                ctx.beginPath();
+                ctx.arc(cx, cy, sw.radius, 0, Math.PI * 2);
+                ctx.strokeStyle = `rgba(16, 185, 129, ${sw.opacity * 0.5})`;
+                ctx.lineWidth = 3;
+                ctx.stroke();
+            }
+            
+            // 4. Draw Energy Waves (Bottom area)
+            this.drawWaves(ctx, W, H);
+            
+            // 5. Draw Interactive BPM Core
+            ctx.save();
+            ctx.translate(cx, cy);
+            ctx.scale(this.coreScale, this.coreScale);
+            
+            // The Core Button (Emerald Gradient)
+            ctx.setShadow(0, 12, 24, 'rgba(16, 185, 129, 0.3)');
+            
+            const coreGrad = ctx.createLinearGradient(-coreRadius, -coreRadius, coreRadius, coreRadius);
+            coreGrad.addColorStop(0, '#34d399'); // Light Mint
+            coreGrad.addColorStop(1, '#047857'); // Deep Emerald
+            
+            ctx.beginPath();
+            ctx.arc(0, 0, coreRadius, 0, Math.PI * 2);
+            ctx.fillStyle = coreGrad;
+            ctx.fill();
+            
+            // Clear shadow for internal elements
+            ctx.setShadow(0, 0, 0, 'transparent');
+            
+            // Inner Subtle Highlight (Glass edge)
+            ctx.beginPath();
+            ctx.arc(0, 0, coreRadius - 2, 0, Math.PI * 2);
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            
+            // Text - BPM Number (MASSIVE font)
+            const fontSize = Math.floor(coreRadius * 0.7); // Dynamic font size based on radius
+            ctx.fillStyle = '#ffffff';
+            ctx.font = `bold ${fontSize}px "DIN Condensed", "Inter", sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            // Removed shadowBlur for text to save low-end GPU performance
+            ctx.fillText(this.bpm.toString(), 0, -12);
+            
+            // Text - 'BPM' Label
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
+            ctx.font = '500 16px "Inter", sans-serif';
+            ctx.fillText('BPM', 0, coreRadius * 0.3);
+            
+            // Play/Pause Icon
+            ctx.fillStyle = '#ffffff';
+            const iconY = coreRadius * 0.55;
+            if (this.isPlaying) {
+                // Pause Icon (Two vertical bars)
+                ctx.fillRect(-8, iconY - 6, 5, 14);
+                ctx.fillRect(3, iconY - 6, 5, 14);
+            } else {
+                // Play Icon (Triangle)
+                ctx.beginPath();
+                ctx.moveTo(-5, iconY - 8);
+                ctx.lineTo(9, iconY);
+                ctx.lineTo(-5, iconY + 8);
+                ctx.closePath();
+                ctx.fill();
+            }
+            
+            ctx.restore();
+        },
+        
+        drawWaves(ctx, W, H) {
+            const baseY = H * 0.82; 
+            const dynamicAmp = H * 0.08; 
+            // Reduced to 2 layers to save GPU/Bridge rendering time and ensure 60fps
+            const waves = [
+                { color: 'rgba(52, 211, 153, 0.3)', speed: 1.5, freq: 0.012, amp: dynamicAmp * 0.7, offset: 0 }, 
+                { color: 'rgba(16, 185, 129, 0.6)', speed: 2.5, freq: 0.015, amp: dynamicAmp, offset: Math.PI } 
+            ];
+            
+            const activeAmp = this.waveAmplitudeMultiplier;
+            const t = this.time;
+            
+            waves.forEach(wave => {
+                ctx.beginPath();
+                ctx.moveTo(0, H);
+                ctx.lineTo(0, baseY);
+                
+                // Increased step size to drastically reduce JS-to-Native bridge commands
+                const step = 25;
+                for (let x = 0; x <= W; x += step) {
+                    // Removed edge envelope taper so waves crash cleanly into the edge of the screen
+                    const y = baseY + Math.sin(x * wave.freq + t * wave.speed + wave.offset) * wave.amp * activeAmp;
+                    ctx.lineTo(x, y);
+                }
+                
+                // Add one final line to exactly W to ensure flush edge
+                const finalY = baseY + Math.sin(W * wave.freq + t * wave.speed + wave.offset) * wave.amp * activeAmp;
+                ctx.lineTo(W, finalY);
+                
+                ctx.lineTo(W, H);
+                ctx.closePath();
+                ctx.fillStyle = wave.color;
+                ctx.fill();
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.walker-canvas-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.walker-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: transparent; /* Pure transparent to blend into page */
+}
+</style>
@@ -1,47 +1,13 @@
 <template>
    <view class="page" :style="rootStyle">
-        <!-- ===== 主舞台:节拍器圆 ===== -->
-        <view class="stage" @click="onCenterTap">
-            <view class="ring r1" :class="{ playing: isPlaying }" />
-            <view class="ring r2" :class="{ playing: isPlaying }" />
-            <view class="core" :class="{ playing: isPlaying }">
-                <text class="bpm-num">{{ currentBpm }}</text>
-                <text class="bpm-label">BPM</text>
-                <view class="ctrl">
-                    <view v-if="isPlaying" class="icon-pause">
-                        <view class="bar" />
-                        <view class="bar" />
-                    </view>
-                    <view v-else class="icon-play" />
-                </view>
-            </view>
-        </view>
-
-        <!-- ===== 跑步小人(矩形完整显示,跟白底融合) ===== -->
-        <view class="walker">
-            <view class="walker-box">
-                <video
-                    id="runner-video"
-                    class="runner-video"
-                    :src="RUNNER_VIDEO_URL"
-                    :muted="true"
-                    :loop="true"
-                    :autoplay="true"
-                    :show-controls="false"
-                    :show-fullscreen-btn="false"
-                    :show-play-btn="false"
-                    :show-center-play-btn="false"
-                    :enable-progress-gesture="false"
-                    :show-mute-btn="false"
-                    :picture-in-picture-mode="[]"
-                    object-fit="contain"
-                    @error="onVideoError"
-                    @loadedmetadata="onVideoLoaded"
-                />
-                <!-- #ifdef MP-WEIXIN -->
-                <cover-view class="pip-mask">&nbsp;</cover-view>
-                <!-- #endif -->
-            </view>
+        <!-- ===== 统一运动律动视区 (Canvas 律动舞台) ===== -->
+        <view class="stage-canvas-wrapper">
+            <WalkerCanvas
+                ref="walkerCanvasRef"
+                :bpm="currentBpm"
+                :is-playing="isPlaying"
+                @toggle-play="onCenterTap"
+            />
        </view>

        <!-- ===== 推荐档位(3 选 1) ===== -->
@@ -50,276 +16,168 @@
                v-for="p in LOOP_PRESETS"
                :key="p.id"
                class="preset"
-                :class="{ active: mode === 'preset' && currentLoop === p.id }"
+                :class="{ active: currentLoop === p.id }"
                @click="onPresetTap(p.id)"
            >
-                <text class="preset-icon">{{ presetIcon(p.id) }}</text>
-                <text class="preset-name">{{ presetName(p.id) }}</text>
+                <text class="preset-name">{{ p.label }}</text>
                <text class="preset-bpm">{{ p.bpm }} BPM</text>
-                <text class="preset-desc">{{ presetDesc(p.id) }}</text>
+                <text class="preset-desc">{{ p.desc }}</text>
            </view>
        </view>

-        <!-- ===== 自定义节奏(高级折叠区) ===== -->
-        <view v-if="customExpanded" class="custom-panel">
-            <view class="custom-warn">
-                <text class="warn-dot">●</text>
-                <text class="warn-text">前台模式 · 切后台会暂停</text>
+        <!-- ===== 自定义节奏区域(含标题栏+折叠内容) ===== -->
+        <view class="custom-section">
+            <!-- 标题栏(始终显示) -->
+            <view class="custom-header" @click="onToggleCustom">
+                <text class="custom-title">{{ customExpanded ? '✕ 收起自定义' : '⚙ 自定义节奏' }}</text>
            </view>

-            <!-- BPM 微调 -->
-            <view class="row">
-                <text class="row-label">BPM</text>
-                <view class="bpm-stepper">
-                    <view class="step-btn" @click="onBpmDelta(-5)">−5</view>
-                    <view class="step-btn" @click="onBpmDelta(-1)">−1</view>
-                    <view class="step-val">{{ customBpm }}</view>
-                    <view class="step-btn" @click="onBpmDelta(1)">+1</view>
-                    <view class="step-btn" @click="onBpmDelta(5)">+5</view>
+            <!-- 折叠内容(仅展开时显示) -->
+            <view v-if="customExpanded" class="custom-content">
+                <!-- BPM 微调 -->
+                <view class="row">
+                    <text class="row-label">BPM</text>
+                    <view class="bpm-stepper">
+                        <view class="step-btn" @click="onBpmDelta(-5)">−5</view>
+                        <view class="step-btn" @click="onBpmDelta(-1)">−1</view>
+                        <view class="step-val">{{ currentBpm }}</view>
+                        <view class="step-btn" @click="onBpmDelta(1)">+1</view>
+                        <view class="step-btn" @click="onBpmDelta(5)">+5</view>
+                    </view>
+                </view>
+
+                <!-- 拍号 -->
+                <view class="row">
+                    <text class="row-label">拍号</text>
+                    <view class="meter-tabs">
+                        <view
+                            v-for="n in [2, 3, 4]"
+                            :key="n"
+                            class="meter-tab"
+                            :class="{ active: customAccent === n }"
+                            @click="onAccentSelect(n)"
+                        >{{ n }}/4</view>
+                    </view>
                </view>
            </view>
-
-            <!-- 拍号 -->
-            <view class="row">
-                <text class="row-label">拍号</text>
-                <view class="meter-tabs">
-                    <view
-                        v-for="n in [2, 3, 4]"
-                        :key="n"
-                        class="meter-tab"
-                        :class="{ active: customAccent === n }"
-                        @click="onAccentSelect(n)"
-                    >{{ n }}/4</view>
-                </view>
-            </view>
-        </view>
-
-        <!-- 底部行:自定义入口 + 提示 -->
-        <view class="bottom-row">
-            <text class="bottom-link" @click="onToggleCustom">
-                {{ customExpanded ? '✕ 收起自定义' : '⚙ 自定义节奏' }}
-            </text>
-            <text class="bottom-hint" v-if="mode === 'preset'">🔒 锁屏可继续播放</text>
        </view>
    </view>
 </template>

 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { onShow, onHide } from '@dcloudio/uni-app'
-import { useMetronomeBg, type LoopId } from '../hooks/useMetronomeBg'
 import { useMetronome } from '../hooks/useMetronome'
+import WalkerCanvas from './components/walker-canvas.vue'

-/**
- * 跑步动画视频(腾讯云 COS CDN)
- * 注意:小程序后台需将 cos.ap-guangzhou.myqcloud.com 加入 downloadFile 合法域名,
- *       否则正式发布版会被拦截(开发版默认不校验)
- */
-const RUNNER_VIDEO_URL =
-    'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260525/20260525164014ef89f8862.mp4'
+type LoopId = 'slow' | 'normal' | 'brisk'
+interface LoopPreset {
+    id: LoopId
+    bpm: number
+    label: string
+    desc: string
+}

-/** 视频原速对应的 BPM 基准, playback-rate 范围 [0.5, 2.0] */
-const VIDEO_BASE_BPM = 124
+const LOOP_PRESETS: readonly LoopPreset[] = [
+    { id: 'slow', bpm: 80, label: '慢走', desc: '热身 · 恢复' },
+    { id: 'normal', bpm: 110, label: '健走', desc: '日常 · 通勤' },
+    { id: 'brisk', bpm: 130, label: '快走', desc: '提速 · 燃脂' },
+]

-/* ============================================================
- * 双引擎设计
- * ------------------------------------------------------------
- * - mode='preset': 用 BgAudio 播预合成 mp3,支持后台/锁屏(走路场景)
- * - mode='custom': 用 InnerAudio 实时合成,支持任意 BPM/拍号,但仅前台
- * - 切模式时停掉对侧引擎,避免双声道叠加
- * ============================================================ */
-type Mode = 'preset' | 'custom'
-const mode = ref<Mode>('preset')
 const customExpanded = ref<boolean>(false)
+const currentLoop = ref<LoopId | null>('normal')
+const walkerCanvasRef = ref<any>(null)

 /* click-wood.mp3 (CDN), 木鱼质感的敲击音 */
 const CLICK_WOOD_URL =
    'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260526/202605261051282a0a94508.mp3'

-const bg = useMetronomeBg()
+// 统一采用高精度引擎，彻底抛弃卡顿的后台播放引擎
 const fg = useMetronome({
-    initialBpm: 100,
+    initialBpm: 110,
    accentEvery: 2,
    clickSrc: CLICK_WOOD_URL,
    accentSrc: CLICK_WOOD_URL,
    poolSize: 4,
-})
-
-const { LOOP_PRESETS } = bg
-const currentLoop = bg.currentLoop
-
-const customBpm = computed(() => fg.bpm.value)
-const customAccent = computed(() => fg.accentEvery.value)
-
-/* 统一对外暴露的 isPlaying / currentBpm,根据 mode 选择信号源 */
-const isPlaying = computed(() =>
-    mode.value === 'preset' ? bg.isPlaying.value : fg.isPlaying.value,
-)
-
-const currentBpm = computed(() => {
-    if (mode.value === 'preset') {
-        const p = LOOP_PRESETS.find((p) => p.id === currentLoop.value)
-        return p?.bpm ?? 110
+    // 【完美音画同步核心】
+    onBeat: (index, isAccent) => {
+        if (walkerCanvasRef.value && walkerCanvasRef.value.triggerBeat) {
+            walkerCanvasRef.value.triggerBeat()
+        }
    }
-    return fg.bpm.value
 })

-const intervalMs = computed(() => 60000 / currentBpm.value)
+const isPlaying = computed(() => fg.isPlaying.value)
+const currentBpm = computed(() => fg.bpm.value)
+const customAccent = computed(() => fg.accentEvery.value)
+const intervalMs = computed(() => 60000 / fg.bpm.value)

 /* ============================================================
- * 档位元数据
- * ============================================================ */
-const presetIcon = (id: LoopId) =>
-    id === 'slow' ? '🚶' : id === 'normal' ? '🏃‍♀️' : '🏃'
-const presetName = (id: LoopId) =>
-    id === 'slow' ? '慢走' : id === 'normal' ? '健走' : '快走'
-const presetDesc = (id: LoopId) =>
-    id === 'slow' ? '热身 · 恢复' : id === 'normal' ? '日常 · 通勤' : '提速 · 燃脂'
-
-/* ============================================================
- * 中央圆按钮:在两个模式下分别工作
+ * 中央圆按钮
 * ============================================================ */
 const onCenterTap = () => {
-    if (mode.value === 'preset') {
-        if (!currentLoop.value) {
-            bg.playLoop('normal')
-            uni.setKeepScreenOn({ keepScreenOn: true })
-            return
-        }
-        if (bg.isPlaying.value) {
-            bg.pause()
-            uni.setKeepScreenOn({ keepScreenOn: false })
-        } else {
-            bg.resume()
-            uni.setKeepScreenOn({ keepScreenOn: true })
-        }
+    if (fg.isPlaying.value) {
+        fg.stop()
+        uni.setKeepScreenOn({ keepScreenOn: false })
    } else {
-        /* custom 模式 */
-        if (fg.isPlaying.value) {
-            fg.stop()
-            uni.setKeepScreenOn({ keepScreenOn: false })
-        } else {
-            fg.start()
-            uni.setKeepScreenOn({ keepScreenOn: true })
-        }
+        fg.start()
+        uni.setKeepScreenOn({ keepScreenOn: true })
    }
 }

 /* ============================================================
- * 档位卡片:点了 → 切回 preset 模式 + 停掉 custom
+ * 档位卡片
 * ============================================================ */
 const onPresetTap = (id: LoopId) => {
-    if (mode.value === 'custom') {
-        fg.stop()
-        mode.value = 'preset'
-        customExpanded.value = false
+    const preset = LOOP_PRESETS.find(p => p.id === id)
+    if (!preset) return
+    
+    currentLoop.value = id
+    fg.setBpm(preset.bpm)
+    if (!fg.isPlaying.value) {
+        fg.start()
+        uni.setKeepScreenOn({ keepScreenOn: true })
    }
-    bg.playLoop(id)
-    uni.setKeepScreenOn({ keepScreenOn: true })
 }

 /* ============================================================
 * 自定义折叠区切换
 * ============================================================ */
 const onToggleCustom = () => {
-    if (!customExpanded.value) {
-        /* 展开:进入 custom 模式 + 停掉 preset */
-        if (bg.isPlaying.value || currentLoop.value) {
-            bg.stop()
-        }
-        mode.value = 'custom'
-        /* 把当前显示 BPM 带过去当起始值 */
-        const seed =
-            LOOP_PRESETS.find((p) => p.id === (currentLoop.value ?? 'normal'))?.bpm ?? 100
-        fg.setBpm(seed)
-        fg.setAccentEvery(2)
-        /* 立即预热 InnerAudio,避免首拍冷启动延迟 */
+    customExpanded.value = !customExpanded.value
+    if (customExpanded.value) {
        fg.preload()
-        customExpanded.value = true
    } else {
-        /* 收起:回到 preset,停掉 fg */
-        fg.stop()
-        mode.value = 'preset'
-        customExpanded.value = false
-        uni.setKeepScreenOn({ keepScreenOn: false })
+        // 收起时，如果当前 BPM 刚好匹配某个档位，高亮对应档位卡片
+        const matched = LOOP_PRESETS.find(p => p.bpm === fg.bpm.value)
+        currentLoop.value = matched ? matched.id : null
    }
 }

 const onBpmDelta = (delta: number) => {
    fg.setBpm(fg.bpm.value + delta)
+    currentLoop.value = null // 用户手动微调后取消档位高亮
 }

 const onAccentSelect = (n: number) => {
    fg.setAccentEvery(n)
 }

-/* ============================================================
- * 视频实例与 BPM 同步
- * ============================================================ */
-let videoCtx: UniApp.VideoContext | null = null
-
-const playbackRate = computed(() => {
-    const rate = currentBpm.value / VIDEO_BASE_BPM
-    return Math.max(0.5, Math.min(2.0, +rate.toFixed(2)))
-})
-
-onMounted(() => {
-    videoCtx = uni.createVideoContext('runner-video')
-    setTimeout(() => videoCtx?.pause(), 50)
-})
-
-const onVideoError = (e: any) => {
-    console.error('[runner-video] error:', e?.detail || e)
-}
-
-const onVideoLoaded = (e: any) => {
-    console.log('[runner-video] metadata loaded:', e?.detail)
-    try {
-        videoCtx?.playbackRate?.(playbackRate.value)
-    } catch (_) {}
-}
-
-watch(isPlaying, (playing) => {
-    if (playing) {
-        videoCtx?.play()
-    } else {
-        videoCtx?.pause()
-    }
-})
-
-watch(playbackRate, (rate) => {
-    try {
-        videoCtx?.playbackRate?.(rate)
-    } catch (_) {}
-})
-
 const rootStyle = computed(() => ({
    '--beat-duration': `${intervalMs.value}ms`,
 }))

 onShow(() => {
-    /* custom 模式回到前台时主动预加载,避免冷启动延迟 */
-    if (mode.value === 'custom') {
-        fg.preload()
-    }
+    fg.preload()
 })

-/**
- * onHide:差异化处理
- *   - preset 模式: 不停,BgAudio 接管后台播放
- *   - custom 模式: 立即停掉,InnerAudio 后台不工作,留着会被 iOS 挂起后状态错乱
- */
 onHide(() => {
-    if (mode.value === 'custom') {
-        fg.stop()
-        uni.setKeepScreenOn({ keepScreenOn: false })
-    }
+    fg.stop()
+    uni.setKeepScreenOn({ keepScreenOn: false })
 })

 onUnmounted(() => {
-    /* 页面销毁时全部清理 */
-    if (mode.value === 'preset' && bg.isPlaying.value) bg.stop()
-    if (mode.value === 'custom') fg.stop()
+    fg.stop()
    uni.setKeepScreenOn({ keepScreenOn: false })
 })
 </script>
@@ -359,166 +217,19 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }

 /* ============================================================
- * 节拍器主舞台
+ * 统一运动律动视区 (Canvas)
 * ============================================================ */
-.stage {
-    position: relative;
-    width: 480rpx;
-    height: 480rpx;
-    margin-top: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:active .core {
-        transform: scale(0.97);
-    }
-}
-
-.ring {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 3rpx solid rgba(16, 185, 129, 0.12);
-    pointer-events: none;
-
-    &.playing {
-        animation: ring-pulse var(--beat-duration, 750ms) ease-out infinite;
-    }
-    &.r2.playing {
-        animation-delay: calc(var(--beat-duration, 750ms) * -0.5);
-    }
-}
-@keyframes ring-pulse {
-    0% {
-        transform: scale(0.94);
-        opacity: 0.85;
-        border-color: rgba(16, 185, 129, 0.4);
-    }
-    100% {
-        transform: scale(1.18);
-        opacity: 0;
-        border-color: rgba(16, 185, 129, 0);
-    }
-}
-
-.core {
-    position: relative;
-    width: 380rpx;
-    height: 380rpx;
-    border-radius: 50%;
-    background: linear-gradient(140deg, #34d399 0%, $brand-deep 100%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-shadow:
-        inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.18),
-        inset 0 16rpx 50rpx rgba(255, 255, 255, 0.18),
-        0 16rpx 40rpx rgba(16, 185, 129, 0.32);
-    transition: transform 0.12s, background 0.18s, box-shadow 0.18s;
-
-    &.playing {
-        animation: core-beat var(--beat-duration, 750ms) ease-in-out infinite;
-    }
-
-    .bpm-num {
-        font-size: 168rpx;
-        font-weight: 800;
-        color: #fff;
-        line-height: 1;
-        letter-spacing: -2rpx;
-        font-variant-numeric: tabular-nums;
-        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.16);
-    }
-
-    .bpm-label {
-        font-size: 22rpx;
-        color: rgba(255, 255, 255, 0.7);
-        letter-spacing: 6rpx;
-        margin-top: 10rpx;
-        font-weight: 600;
-    }
-
-    .ctrl {
-        margin-top: 22rpx;
-        height: 64rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
-@keyframes core-beat {
-    0%,
-    100% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.04);
-    }
-}
-
-/* 播放/暂停 icon */
-.icon-play {
-    width: 0;
-    height: 0;
-    border-left: 52rpx solid #fff;
-    border-top: 32rpx solid transparent;
-    border-bottom: 32rpx solid transparent;
-    margin-left: 12rpx;
-    filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.18));
-}
-.icon-pause {
-    display: flex;
-    gap: 16rpx;
-    height: 60rpx;
-
-    .bar {
-        width: 16rpx;
-        height: 100%;
-        background: #fff;
-        border-radius: 4rpx;
-        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18);
-    }
-}
-
-/* ============================================================
- * 跑步小人
- * ============================================================ */
-.walker {
-    width: 100%;
-    height: 240rpx;
+.stage-canvas-wrapper {
+    width: 100vw;
+    margin-left: -28rpx;
+    margin-right: -28rpx;
+    flex-shrink: 0; /* 防止被压缩 */
+    height: 600rpx; /* 固定高度，不随内容变化 */
    display: flex;
    justify-content: center;
    align-items: center;
-}
-
-.walker-box {
+    margin-bottom: 24rpx;
    position: relative;
-    width: 240rpx;
-    height: 240rpx;
-    background: #e8ecf2;
-    border-radius: 24rpx;
-    overflow: hidden;
-    box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.06);
-}
-
-.runner-video {
-    width: 100%;
-    height: 100%;
-    background: #e8ecf2;
-}
-
-.pip-mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 80rpx;
-    height: 56rpx;
-    background-color: #dde2eb;
-    border-bottom-left-radius: 18rpx;
-    border-top-right-radius: 24rpx;
 }

 /* ============================================================
@@ -535,19 +246,14 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    background: $card-bg;
    border: 2rpx solid $card-border;
    border-radius: $radius-card;
-    padding: 18rpx 8rpx 16rpx;
+    padding: 26rpx 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 4rpx;
+    gap: 8rpx;
    box-shadow: $shadow-sm;
    transition: all 0.18s;

-    .preset-icon {
-        font-size: 40rpx;
-        line-height: 1;
-        margin-bottom: 4rpx;
-    }
    .preset-name {
        font-size: 28rpx;
        font-weight: 700;
@@ -591,9 +297,32 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }

 /* ============================================================
- * 自定义节奏面板(仅 customExpanded 时显示)
+ * 自定义节奏区域(标题栏 + 折叠内容)
 * ============================================================ */
-.custom-panel {
+.custom-section {
+    width: 100%;
+    margin-top: 12rpx;
+}
+
+.custom-header {
+    width: 100%;
+    padding: 16rpx 6rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .custom-title {
+        font-size: 22rpx;
+        color: $text-3;
+        letter-spacing: 0.5rpx;
+
+        &:active {
+            color: $text-2;
+        }
+    }
+}
+
+.custom-content {
    width: 100%;
    background: $card-bg;
    border: 2rpx solid rgba(245, 158, 11, 0.25);
@@ -603,6 +332,7 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16rpx;
+    margin-top: 8rpx;
 }

 .custom-warn {
@@ -705,7 +435,7 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }

 /* ============================================================
- * 底部行(自定义入口 + 锁屏提示,横向排布)
+ * 底部行(已废弃,保留样式以防引用)
 * ============================================================ */
 .bottom-row {
    width: 100%;