update

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

@@ -16,7 +16,7 @@
 
             <view class="menu-item" @click="goto('/training/pages/grip-ring')">
                 <view class="menu-icon menu-icon--grip">
-                    <text class="menu-icon-text">🟢</text>
+                    <view class="grip-ring-shape" />
                 </view>
                 <view class="menu-info">
                     <text class="menu-title">握力环</text>
@@ -263,8 +263,8 @@ $brand-light: #34d399;
         background: linear-gradient(140deg, $brand-light, $brand-deep);
     }
     &--grip {
-        background: linear-gradient(140deg, #86efac, #22c55e);
+        background: linear-gradient(140deg, #5eead4, #14b8a6);
-        box-shadow: 0 2rpx 8rpx rgba(34, 197, 94, 0.36);
+        box-shadow: 0 2rpx 8rpx rgba(20, 184, 166, 0.36);
     }
     &--metro {
         background: linear-gradient(140deg, #fbbf24, #d97706);
@@ -278,6 +278,17 @@ $brand-light: #34d399;
     line-height: 1;
 }
 
+/* 握力环小 icon: 白色描边的环（甜甜圈） */
+.grip-ring-shape {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    border: 7rpx solid #fff;
+    box-shadow:
+        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
+        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
+}
+
 /* 节拍器小 icon: 3 根高低柱模拟均衡器/节拍 */
 .metro-bar {
     width: 4rpx;

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

@@ -111,10 +111,43 @@
             </view>
         </view>
 
-        <!-- ===== 动作要领 ===== -->
+        <!-- ===== 视频教学入口 ===== -->
-        <view class="tips-strip">
+        <view class="tutorial-card" @click="openTutorial">
-            <view v-for="(tip, i) in TIPS" :key="i" class="tip-chip">
+            <view class="tutorial-icon">
-                <text class="tip-text">{{ tip }}</text>
+                <view class="tutorial-play-triangle" />
+            </view>
+            <view class="tutorial-info">
+                <text class="tutorial-title">观看动作示范</text>
+                <text class="tutorial-sub">视频教学 · 学会正确握法</text>
+            </view>
+            <text class="tutorial-arrow">›</text>
+        </view>
+
+        <!-- ===== 视频教学弹层 ===== -->
+        <view v-if="showTutorial" class="tutorial-mask" @click="closeTutorial">
+            <view class="tutorial-modal" @click.stop>
+                <view class="tutorial-header">
+                    <text class="tutorial-modal-title">动作示范</text>
+                    <view class="tutorial-close" @click="closeTutorial">
+                        <text class="tutorial-close-icon">×</text>
+                    </view>
+                </view>
+                <video
+                    class="tutorial-video"
+                    :src="TUTORIAL_VIDEO_URL"
+                    controls
+                    autoplay
+                    loop
+                    object-fit="contain"
+                    show-center-play-btn
+                />
+                <view class="tutorial-tips">
+                    <text class="tutorial-tips-title">关键要领</text>
+                    <view v-for="(tip, i) in TIPS" :key="i" class="tutorial-tip-item">
+                        <view class="tip-dot" />
+                        <text class="tip-content">{{ tip }}</text>
+                    </view>
+                </view>
             </view>
         </view>
 
@@ -210,6 +243,9 @@ const PRESET_ICONS: Record<PresetId, string> = {
 
 const TIPS = ['握紧停 1 秒', '完全放松', '左右手交替'] as const
 
+// 视频教学
+const TUTORIAL_VIDEO_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/video/20260528/20260528173911bf6f93386.mp4'
+
 interface TargetOption {
     minutes: 0 | 5 | 10 | 15
     label: string
@@ -291,6 +327,7 @@ const targetMinutes = ref<0 | 5 | 10 | 15>(0) // 训练目标(0=自由)
 const gripCanvasRef = ref<any>(null)
 const showRewardPopup = ref(false)
 const showSummary = ref(false)
+const showTutorial = ref(false) // 视频教学弹层
 const currentReward = ref<RewardConfig>(REWARDS[0])
 const crushAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
 const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
@@ -550,6 +587,20 @@ function dismissSummary() {
     showSummary.value = false
 }
 
+// 打开视频教学(避免与 BGM 音轨冲突)
+function openTutorial() {
+    stopBgm()
+    showTutorial.value = true
+}
+
+function closeTutorial() {
+    showTutorial.value = false
+    // 训练中且 BGM 开关开着 → 恢复 BGM
+    if (isPlaying.value && bgmEnabled.value) {
+        startBgm()
+    }
+}
+
 function onContinue() {
     showSummary.value = false
     startTrainingInternal()
@@ -618,22 +669,22 @@ onShareTimeline(() => ({
 }))
 
 onHide(() => {
-    if (isPlaying.value) {
+    // 切出页面 → 自动暂停训练 + 强制停掉所有音频
-        metronome.stop()
+    // 不依赖 isPlaying 判断: 暂停/结算态也可能有未释放的音频实例
-        stopBgm()
+    // requiredBackgroundModes:['audio'] 下,InnerAudioContext.pause 不一定立即生效,这里用 stop+destroy 兜底
-        stopTimer()
+    try { metronome.stop() } catch (_) {}
-        uni.setKeepScreenOn({ keepScreenOn: false })
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+
+    if (bgmAudioCtx.value) {
+        try { bgmAudioCtx.value.stop() } catch (_) {}
+        try { bgmAudioCtx.value.destroy() } catch (_) {}
+        bgmAudioCtx.value = null
     }
     if (crushAudioCtx.value) {
-        try {
+        try { crushAudioCtx.value.stop() } catch (_) {}
-            crushAudioCtx.value.destroy()
+        try { crushAudioCtx.value.destroy() } catch (_) {}
-        } catch (_) {}
+        crushAudioCtx.value = null
-    }
-    if (bgmAudioCtx.value) {
-        try {
-            bgmAudioCtx.value.destroy()
-        } catch (_) {}
-        bgmAudioCtx.value = null
     }
 })
 </script>
@@ -1139,26 +1190,190 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }
 
 /* ============================================================
- * 动作要领条
+ * 视频教学入口卡片
  * ============================================================ */
-.tips-strip {
+.tutorial-card {
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
-    gap: 10rpx;
+    gap: 16rpx;
+    padding: 18rpx 24rpx 18rpx 18rpx;
+    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(20, 184, 166, 0.18);
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.04),
+        0 1rpx 0 rgba(255, 255, 255, 0.9) inset;
+    transition: transform 0.15s;
+
+    &:active {
+        transform: scale(0.98);
+        background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
+    }
+}
+
+.tutorial-icon {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: linear-gradient(140deg, $brand 0%, $brand-deep 100%);
+    display: flex;
+    align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 4rpx 12rpx rgba(20, 184, 166, 0.35);
 }
 
-.tip-chip {
+.tutorial-play-triangle {
-    padding: 10rpx 20rpx;
+    width: 0;
-    background: rgba(255, 255, 255, 0.7);
+    height: 0;
-    border-radius: 999rpx;
+    border-left: 22rpx solid #fff;
-    border: 2rpx solid $card-border;
+    border-top: 14rpx solid transparent;
+    border-bottom: 14rpx solid transparent;
+    margin-left: 6rpx;
 }
 
-.tip-text {
+.tutorial-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+    min-width: 0;
+}
+
+.tutorial-title {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: $text-1;
+    letter-spacing: 1rpx;
+}
+
+.tutorial-sub {
     font-size: 22rpx;
+    color: $text-3;
+    letter-spacing: 0.5rpx;
+}
+
+.tutorial-arrow {
+    font-size: 36rpx;
+    color: #cbd5e1;
+    font-weight: 300;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+/* ============================================================
+ * 视频教学弹层
+ * ============================================================ */
+.tutorial-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.65);
+    backdrop-filter: blur(8rpx);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 950;
+    padding: 0 24rpx;
+    animation: fade-in 0.2s ease;
+}
+
+.tutorial-modal {
+    width: 100%;
+    max-width: 700rpx;
+    background: #fff;
+    border-radius: 28rpx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation: tutorial-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes tutorial-pop {
+    from {
+        transform: scale(0.92);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.tutorial-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 28rpx 16rpx;
+}
+
+.tutorial-modal-title {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: $text-1;
+    letter-spacing: 1rpx;
+}
+
+.tutorial-close {
+    width: 56rpx;
+    height: 56rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f1f5f9;
+
+    &:active {
+        background: #e2e8f0;
+    }
+}
+
+.tutorial-close-icon {
+    font-size: 40rpx;
     color: $text-2;
-    line-height: 1.3;
+    line-height: 1;
+    font-weight: 300;
+}
+
+.tutorial-video {
+    width: 100%;
+    // 视频源 720×720 方形, 容器同比贴合避免左右黑边
+    // modal max-width = 700rpx, 这里也用 700rpx 完美 1:1
+    height: 700rpx;
+    background: #000;
+}
+
+.tutorial-tips {
+    padding: 24rpx 28rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+}
+
+.tutorial-tips-title {
+    font-size: 24rpx;
+    color: $text-3;
+    letter-spacing: 1rpx;
+    margin-bottom: 4rpx;
+}
+
+.tutorial-tip-item {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.tip-dot {
+    width: 8rpx;
+    height: 8rpx;
+    border-radius: 50%;
+    background: $brand;
+    flex-shrink: 0;
+}
+
+.tip-content {
+    font-size: 26rpx;
+    color: $text-2;
+    line-height: 1.5;
 }
 
 /* ============================================================