Merge branch 'master' into master-5-24
This commit is contained in:
Your Name
@@ -33,3 +33,4 @@ bin-release/
|
||||
/server/.spool
|
||||
/server/.claude
|
||||
/.spool
|
||||
TUICallKit-Vue3/.env
|
||||
|
||||
@@ -15,6 +15,19 @@ const globalData = {
|
||||
let avatarUrl = ref(""); // 声明为响应式变量
|
||||
uni.CallManager = new CallManager();
|
||||
onLaunch(() => {
|
||||
// iOS 静音键模式下 InnerAudioContext 默认不发声,
|
||||
// 必须在 onLaunch 全局调用此 API,单实例 obeyMuteSwitch 在 iOS 不可靠
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
uni.setInnerAudioOption({
|
||||
obeyMuteSwitch: false,
|
||||
mixWithOther: true,
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn('setInnerAudioOption failed:', e)
|
||||
}
|
||||
// #endif
|
||||
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view v-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
|
||||
<!-- 展开后的菜单卡片(从下往上动画) -->
|
||||
<view v-if="expanded" class="menu-list" @click.stop>
|
||||
<!-- "练一练" 暂时隐藏,后续恢复时取消注释即可
|
||||
<view class="menu-item" @click="goto('/training/pages/index')">
|
||||
<view class="menu-icon menu-icon--train">
|
||||
<text class="menu-icon-text">💪</text>
|
||||
</view>
|
||||
<view class="menu-info">
|
||||
<text class="menu-title">练一练</text>
|
||||
<text class="menu-sub">器械跟练</text>
|
||||
</view>
|
||||
<view class="menu-arrow">›</view>
|
||||
</view>
|
||||
-->
|
||||
<view class="menu-item" @click="goto('/training/pages/metronome')">
|
||||
<view class="menu-icon menu-icon--metro">
|
||||
<view class="metro-bar metro-bar-1" />
|
||||
<view class="metro-bar metro-bar-2" />
|
||||
<view class="metro-bar metro-bar-3" />
|
||||
</view>
|
||||
<view class="menu-info">
|
||||
<text class="menu-title">节拍器</text>
|
||||
<text class="menu-sub">健走配速</text>
|
||||
</view>
|
||||
<view class="menu-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主浮动按钮(单字"练" + 呼吸光环) -->
|
||||
<view class="fab-container">
|
||||
<view v-if="!expanded" class="fab-pulse" />
|
||||
<view v-if="!expanded" class="fab-pulse fab-pulse-2" />
|
||||
<view class="entry-fab" :class="{ expanded }" @click="toggle">
|
||||
<view v-if="expanded" class="icon-close">
|
||||
<view class="cross-bar bar-1" />
|
||||
<view class="cross-bar bar-2" />
|
||||
</view>
|
||||
<!-- 心跳波形 icon: 健康主题,SVG 折线 -->
|
||||
<view v-else class="fab-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
bottom?: number
|
||||
}>(),
|
||||
{ bottom: 200 },
|
||||
)
|
||||
|
||||
const isDevMode = (): boolean => {
|
||||
/* HBuilderX 工程：发行(release)模式下 NODE_ENV === 'production' */
|
||||
try {
|
||||
return process.env.NODE_ENV !== 'production'
|
||||
} catch (_) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const visible = ref(isDevMode())
|
||||
const expanded = ref(false)
|
||||
|
||||
const toggle = () => {
|
||||
expanded.value = !expanded.value
|
||||
}
|
||||
|
||||
const goto = (url: string) => {
|
||||
expanded.value = false
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$brand: #10b981;
|
||||
$brand-deep: #047857;
|
||||
$brand-light: #34d399;
|
||||
|
||||
.dev-entry-wrap {
|
||||
position: fixed;
|
||||
right: 24rpx;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 主浮动按钮
|
||||
* ============================================================ */
|
||||
.fab-container {
|
||||
position: relative;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
}
|
||||
|
||||
.entry-fab {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(140deg, $brand-light 0%, $brand-deep 100%);
|
||||
box-shadow:
|
||||
0 8rpx 20rpx rgba(16, 185, 129, 0.42),
|
||||
0 2rpx 6rpx rgba(15, 23, 42, 0.12),
|
||||
inset 0 -8rpx 16rpx rgba(0, 0, 0, 0.12),
|
||||
inset 0 8rpx 16rpx rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
background: linear-gradient(140deg, #94a3b8 0%, #475569 100%);
|
||||
transform: rotate(135deg);
|
||||
box-shadow:
|
||||
0 6rpx 16rpx rgba(15, 23, 42, 0.2),
|
||||
inset 0 -6rpx 14rpx rgba(0, 0, 0, 0.12),
|
||||
inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.22));
|
||||
animation: fab-icon-beat 1.6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
@keyframes fab-icon-beat {
|
||||
0%, 60%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 关闭态 X 图标 (CSS 几何) */
|
||||
.icon-close {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
|
||||
.cross-bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5rpx;
|
||||
background: #fff;
|
||||
border-radius: 3rpx;
|
||||
transform-origin: center;
|
||||
}
|
||||
.bar-1 {
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
.bar-2 {
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 呼吸光环(2 圈错相位扩散) */
|
||||
.fab-pulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(16, 185, 129, 0.25);
|
||||
animation: fab-ring 2.4s ease-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fab-pulse-2 {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
@keyframes fab-ring {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.55);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 展开菜单
|
||||
* ============================================================ */
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
animation: slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx) scale(0.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
padding: 14rpx 20rpx 14rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
box-shadow:
|
||||
0 8rpx 24rpx rgba(15, 23, 42, 0.1),
|
||||
0 1rpx 2rpx rgba(15, 23, 42, 0.06);
|
||||
min-width: 280rpx;
|
||||
transition: transform 0.15s;
|
||||
backdrop-filter: blur(12rpx);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
background: #f0fdf4;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.32);
|
||||
|
||||
&--train {
|
||||
background: linear-gradient(140deg, $brand-light, $brand-deep);
|
||||
}
|
||||
&--metro {
|
||||
background: linear-gradient(140deg, #fbbf24, #d97706);
|
||||
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.36);
|
||||
gap: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-text {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 节拍器小 icon: 3 根高低柱模拟均衡器/节拍 */
|
||||
.metro-bar {
|
||||
width: 4rpx;
|
||||
background: #fff;
|
||||
border-radius: 2rpx;
|
||||
box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.metro-bar-1 {
|
||||
height: 16rpx;
|
||||
}
|
||||
.metro-bar-2 {
|
||||
height: 28rpx;
|
||||
}
|
||||
.metro-bar-3 {
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.menu-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 28rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.menu-sub {
|
||||
font-size: 20rpx;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #cbd5e1;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -105,6 +105,27 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "training",
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "练一练"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/metronome",
|
||||
"style": {
|
||||
"navigationBarTitleText": "节拍器",
|
||||
"navigationBarBackgroundColor": "#f8fafc",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#f8fafc",
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
@@ -88,13 +88,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEV 开发悬浮入口（生产环境自动隐藏） -->
|
||||
<dev-training-entry />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onShow, onShareAppMessage } from '@dcloudio/uni-app'
|
||||
import DevTrainingEntry from '@/components/dev-training-entry/index.vue'
|
||||
export default {
|
||||
name: 'profileB',
|
||||
components: { DevTrainingEntry },
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
#!/usr/bin/env node
|
||||
/* eslint-disable no-console */
|
||||
/**
|
||||
* 用小米 MiMo TTS 生成训练语音素材
|
||||
*
|
||||
* 文档: https://platform.xiaomimimo.com/docs/en-US/usage-guide/speech-synthesis-v2.5
|
||||
* 接口: POST https://api.xiaomimimo.com/v1/chat/completions
|
||||
*
|
||||
* 准备:
|
||||
* export MIMO_API_KEY=sk-your-key-here
|
||||
* (或 export XIAOMI_API_KEY=...)
|
||||
*
|
||||
* 运行:
|
||||
* cd uniapp
|
||||
* node scripts/generate-voice.mjs # 默认音色 冰糖
|
||||
* node scripts/generate-voice.mjs --voice 茉莉
|
||||
* node scripts/generate-voice.mjs --force # 已存在的也重新生成
|
||||
*
|
||||
* 输出(分包):
|
||||
* training/static/voice/numbers/{1..30}.mp3
|
||||
* training/static/voice/prompts/{key}.mp3
|
||||
*
|
||||
* 需要 Node 18+（用内置 fetch）
|
||||
*/
|
||||
|
||||
import { mkdir, writeFile, access, stat } from 'node:fs/promises'
|
||||
import { dirname, join } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { Buffer } from 'node:buffer'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = dirname(__filename)
|
||||
|
||||
const ROOT = join(__dirname, '..')
|
||||
const VOICE_DIR = join(ROOT, 'training/static/voice')
|
||||
const NUMBERS_DIR = join(VOICE_DIR, 'numbers')
|
||||
const PROMPTS_DIR = join(VOICE_DIR, 'prompts')
|
||||
|
||||
// ============ 参数 ============
|
||||
const args = process.argv.slice(2)
|
||||
const FORCE = args.includes('--force')
|
||||
const VOICE = pickArg('--voice') || '冰糖'
|
||||
const MODEL = pickArg('--model') || 'mimo-v2.5-tts'
|
||||
const FORMAT = pickArg('--format') || 'mp3'
|
||||
|
||||
const API_KEY =
|
||||
process.env.MIMO_API_KEY ||
|
||||
process.env.XIAOMI_API_KEY ||
|
||||
process.env.XIAOMI_MIMO_API_KEY
|
||||
const ENDPOINT =
|
||||
process.env.MIMO_ENDPOINT || 'https://api.xiaomimimo.com/v1/chat/completions'
|
||||
|
||||
if (!API_KEY) {
|
||||
console.error('❌ 未找到 API Key')
|
||||
console.error(' 请先 export MIMO_API_KEY=your-key')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
function pickArg(name) {
|
||||
const idx = args.indexOf(name)
|
||||
if (idx === -1) return null
|
||||
return args[idx + 1]
|
||||
}
|
||||
|
||||
// ============ 语音内容 ============
|
||||
|
||||
// 数字报数：简短的"教练点数"风格
|
||||
const NUMBER_STYLE =
|
||||
'用简短有力的健身教练口吻报数，干净利落，节奏明快，每个数字独立清晰。'
|
||||
|
||||
// 口令：温柔有鼓励性的女教练
|
||||
const PROMPT_STYLE =
|
||||
'用温柔但有力量的女教练口吻说话，语调亲切自然，节奏适中，像在带学员训练。'
|
||||
|
||||
const PROMPTS = {
|
||||
start: '开始',
|
||||
ready: '准备',
|
||||
rest: '休息一下',
|
||||
'next-set': '下一组开始',
|
||||
'last-rep': '最后一次',
|
||||
'keep-it-up': '继续坚持',
|
||||
'good-job': '很棒，训练完成',
|
||||
'breathe-in': '吸气',
|
||||
'breathe-out': '呼气',
|
||||
}
|
||||
|
||||
// ============ 工具 ============
|
||||
|
||||
async function fileExists(p) {
|
||||
try {
|
||||
await access(p)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureDir(d) {
|
||||
await mkdir(d, { recursive: true })
|
||||
}
|
||||
|
||||
async function tts(text, outPath, styleInstruction) {
|
||||
if (!FORCE && (await fileExists(outPath))) {
|
||||
const s = await stat(outPath)
|
||||
if (s.size > 0) {
|
||||
console.log(`[skip] ${outPath} (已存在)`)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const body = {
|
||||
model: MODEL,
|
||||
messages: [
|
||||
{ role: 'user', content: styleInstruction },
|
||||
{ role: 'assistant', content: text },
|
||||
],
|
||||
audio: { format: FORMAT, voice: VOICE },
|
||||
}
|
||||
|
||||
const res = await fetch(ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'api-key': API_KEY,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const errText = await res.text().catch(() => '')
|
||||
throw new Error(`HTTP ${res.status} ${res.statusText}: ${errText.slice(0, 300)}`)
|
||||
}
|
||||
|
||||
const json = await res.json()
|
||||
const audioBase64 = json?.choices?.[0]?.message?.audio?.data
|
||||
if (!audioBase64) {
|
||||
throw new Error(
|
||||
`响应里找不到 audio.data 字段。完整响应: ${JSON.stringify(json).slice(0, 500)}`,
|
||||
)
|
||||
}
|
||||
|
||||
const buf = Buffer.from(audioBase64, 'base64')
|
||||
await writeFile(outPath, buf)
|
||||
console.log(`[ok] ${outPath} (${buf.length} bytes) → "${text}"`)
|
||||
}
|
||||
|
||||
async function sleep(ms) {
|
||||
return new Promise((r) => setTimeout(r, ms))
|
||||
}
|
||||
|
||||
// ============ 主流程 ============
|
||||
|
||||
async function main() {
|
||||
console.log('====== 小米 MiMo TTS 语音生成 ======')
|
||||
console.log(`Endpoint : ${ENDPOINT}`)
|
||||
console.log(`Model : ${MODEL}`)
|
||||
console.log(`Voice : ${VOICE}`)
|
||||
console.log(`Format : ${FORMAT}`)
|
||||
console.log(`Force : ${FORCE}`)
|
||||
console.log(`Output : ${VOICE_DIR}`)
|
||||
console.log('====================================\n')
|
||||
|
||||
await ensureDir(NUMBERS_DIR)
|
||||
await ensureDir(PROMPTS_DIR)
|
||||
|
||||
let successCount = 0
|
||||
let failCount = 0
|
||||
|
||||
console.log('--- 数字 1-30 ---')
|
||||
for (let n = 1; n <= 30; n++) {
|
||||
try {
|
||||
await tts(String(n), join(NUMBERS_DIR, `${n}.${FORMAT}`), NUMBER_STYLE)
|
||||
successCount++
|
||||
await sleep(120)
|
||||
} catch (e) {
|
||||
failCount++
|
||||
console.error(`[fail] 数字 ${n}: ${e.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n--- 口令 ---')
|
||||
for (const [key, text] of Object.entries(PROMPTS)) {
|
||||
try {
|
||||
await tts(text, join(PROMPTS_DIR, `${key}.${FORMAT}`), PROMPT_STYLE)
|
||||
successCount++
|
||||
await sleep(120)
|
||||
} catch (e) {
|
||||
failCount++
|
||||
console.error(`[fail] ${key}: ${e.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n====================================')
|
||||
console.log(`成功 ${successCount} | 失败 ${failCount}`)
|
||||
console.log('====================================')
|
||||
|
||||
if (FORMAT !== 'mp3') {
|
||||
console.log(
|
||||
`\n⚠️ 当前生成格式是 ${FORMAT}，但 hooks/useVoiceCoach.ts 默认引用 .mp3。`,
|
||||
)
|
||||
console.log(' 要么换 --format mp3 重跑，要么修改 hooks 里的 src 后缀。')
|
||||
}
|
||||
|
||||
console.log('\n下一步：')
|
||||
console.log(' 1. 准备 click 音 → training/static/audio/click.mp3')
|
||||
console.log(' 2. 准备 BGM → training/static/bgm/{train-light,rest-meditation}.mp3')
|
||||
console.log(' 3. 编译运行 → 进入 /training/pages/index')
|
||||
}
|
||||
|
||||
main().catch((e) => {
|
||||
console.error('\n❌ 致命错误:', e)
|
||||
process.exit(1)
|
||||
})
|
||||
@@ -0,0 +1,214 @@
|
||||
import { ref, computed, onUnmounted } from 'vue'
|
||||
|
||||
export interface MetronomeOptions {
|
||||
initialBpm?: number
|
||||
bpmMin?: number
|
||||
bpmMax?: number
|
||||
clickSrc?: string
|
||||
accentSrc?: string
|
||||
accentEvery?: number
|
||||
poolSize?: number
|
||||
onBeat?: (beatIndex: number, isAccent: boolean) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 音频实例池：每个 click 用一个独立 InnerAudioContext，循环复用。
|
||||
* 解决两个问题：
|
||||
* 1. seek+play 模式在某些设备上首拍冷启动延迟（100-300ms）
|
||||
* 2. BPM 偏快时上一拍音频还没播完，下一拍 play 会被阻塞或丢失
|
||||
*/
|
||||
class AudioPool {
|
||||
private list: UniApp.InnerAudioContext[] = []
|
||||
private cursor = 0
|
||||
private warmedUp = false
|
||||
|
||||
constructor(
|
||||
private src: string,
|
||||
private size: number,
|
||||
) {}
|
||||
|
||||
private create() {
|
||||
for (let i = 0; i < this.size; i++) {
|
||||
const ctx = uni.createInnerAudioContext()
|
||||
ctx.src = this.src
|
||||
ctx.obeyMuteSwitch = false
|
||||
ctx.autoplay = false
|
||||
this.list.push(ctx)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 预热：极小音量短暂播放,让音频文件下载/解码到内存
|
||||
* 真正首次 play 不会再卡冷启动
|
||||
* 注意:iOS 上 volume = 0 不一定真正解码,所以用 0.01 极小音量
|
||||
*/
|
||||
warmUp() {
|
||||
if (this.warmedUp) return
|
||||
if (this.list.length === 0) this.create()
|
||||
|
||||
this.list.forEach((ctx) => {
|
||||
try {
|
||||
ctx.volume = 0.01
|
||||
ctx.play()
|
||||
setTimeout(() => {
|
||||
try {
|
||||
ctx.stop()
|
||||
ctx.volume = 1
|
||||
} catch (_) {}
|
||||
}, 60)
|
||||
} catch (_) {}
|
||||
})
|
||||
this.warmedUp = true
|
||||
}
|
||||
|
||||
play() {
|
||||
if (this.list.length === 0) {
|
||||
this.create()
|
||||
this.warmUp()
|
||||
}
|
||||
const ctx = this.list[this.cursor]
|
||||
this.cursor = (this.cursor + 1) % this.list.length
|
||||
try {
|
||||
// iOS 上 seek(0) + play() 不一定能从头播放;stop() + play() 更稳
|
||||
ctx.stop()
|
||||
ctx.play()
|
||||
} catch (_) {
|
||||
try { ctx.play() } catch (__) {}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.list.forEach((ctx) => {
|
||||
try {
|
||||
ctx.destroy?.()
|
||||
} catch (_) {}
|
||||
})
|
||||
this.list = []
|
||||
this.warmedUp = false
|
||||
}
|
||||
}
|
||||
|
||||
export function useMetronome(options: MetronomeOptions = {}) {
|
||||
const {
|
||||
initialBpm = 80,
|
||||
bpmMin = 40,
|
||||
bpmMax = 240,
|
||||
clickSrc = '/training/static/audio/click.mp3',
|
||||
accentSrc,
|
||||
poolSize = 4,
|
||||
onBeat,
|
||||
} = options
|
||||
|
||||
const bpm = ref<number>(initialBpm)
|
||||
const isPlaying = ref<boolean>(false)
|
||||
const beatIndex = ref<number>(0)
|
||||
const isAccent = ref<boolean>(false)
|
||||
const accentEveryRef = ref<number>(options.accentEvery ?? 4)
|
||||
|
||||
const intervalMs = computed(() => 60000 / bpm.value)
|
||||
|
||||
let clickPool: AudioPool | null = null
|
||||
let accentPool: AudioPool | null = null
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
let nextTickAt = 0
|
||||
|
||||
const ensureAudio = () => {
|
||||
if (!clickPool) {
|
||||
clickPool = new AudioPool(clickSrc, poolSize)
|
||||
clickPool.warmUp()
|
||||
}
|
||||
if (accentSrc && !accentPool) {
|
||||
accentPool = new AudioPool(accentSrc, Math.max(2, Math.ceil(poolSize / 2)))
|
||||
accentPool.warmUp()
|
||||
}
|
||||
}
|
||||
|
||||
const playSound = (accent: boolean) => {
|
||||
if (accent && accentPool) {
|
||||
accentPool.play()
|
||||
} else if (clickPool) {
|
||||
clickPool.play()
|
||||
}
|
||||
}
|
||||
|
||||
const tick = () => {
|
||||
if (!isPlaying.value) return
|
||||
|
||||
const every = Math.max(1, accentEveryRef.value)
|
||||
const accent = beatIndex.value % every === 0
|
||||
isAccent.value = accent
|
||||
|
||||
playSound(accent)
|
||||
onBeat?.(beatIndex.value, accent)
|
||||
beatIndex.value++
|
||||
|
||||
nextTickAt += intervalMs.value
|
||||
const nextDelay = Math.max(0, nextTickAt - Date.now())
|
||||
|
||||
timer = setTimeout(tick, nextDelay)
|
||||
}
|
||||
|
||||
const start = () => {
|
||||
if (isPlaying.value) return
|
||||
ensureAudio()
|
||||
isPlaying.value = true
|
||||
beatIndex.value = 0
|
||||
nextTickAt = Date.now()
|
||||
tick()
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
isPlaying.value = false
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
}
|
||||
}
|
||||
|
||||
const setBpm = (val: number) => {
|
||||
bpm.value = Math.max(bpmMin, Math.min(bpmMax, Math.round(val)))
|
||||
}
|
||||
|
||||
const setAccentEvery = (n: number) => {
|
||||
accentEveryRef.value = Math.max(1, Math.min(16, Math.round(n)))
|
||||
beatIndex.value = 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 主动预加载（推荐在页面 onShow 时调用，让用户进页面就完成预热）
|
||||
* 同时再次设置 setInnerAudioOption,防 App.vue 全局设置失效(iOS 静音键)
|
||||
*/
|
||||
const preload = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
uni.setInnerAudioOption({
|
||||
obeyMuteSwitch: false,
|
||||
mixWithOther: true,
|
||||
})
|
||||
} catch (_) {}
|
||||
// #endif
|
||||
ensureAudio()
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stop()
|
||||
clickPool?.destroy()
|
||||
accentPool?.destroy()
|
||||
clickPool = null
|
||||
accentPool = null
|
||||
})
|
||||
|
||||
return {
|
||||
bpm,
|
||||
isPlaying,
|
||||
beatIndex,
|
||||
isAccent,
|
||||
intervalMs,
|
||||
accentEvery: accentEveryRef,
|
||||
start,
|
||||
stop,
|
||||
setBpm,
|
||||
setAccentEvery,
|
||||
preload,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const BGM_BASE = '/training/static/bgm'
|
||||
|
||||
export type BgmMode = 'none' | 'training' | 'resting'
|
||||
|
||||
export interface UseTrainingBgmOptions {
|
||||
trainingSrc?: string
|
||||
restingSrc?: string
|
||||
volume?: number
|
||||
fadeMs?: number
|
||||
}
|
||||
|
||||
export function useTrainingBgm(options: UseTrainingBgmOptions = {}) {
|
||||
const {
|
||||
trainingSrc = `${BGM_BASE}/train-light.mp3`,
|
||||
restingSrc = `${BGM_BASE}/rest-meditation.mp3`,
|
||||
volume = 0.6,
|
||||
fadeMs = 600,
|
||||
} = options
|
||||
|
||||
const mode = ref<BgmMode>('none')
|
||||
const enabled = ref<boolean>(true)
|
||||
|
||||
let trainCtx: UniApp.InnerAudioContext | null = null
|
||||
let restCtx: UniApp.InnerAudioContext | null = null
|
||||
let fadeTimers: ReturnType<typeof setInterval>[] = []
|
||||
|
||||
const ensureCtx = () => {
|
||||
if (!trainCtx) {
|
||||
trainCtx = uni.createInnerAudioContext()
|
||||
trainCtx.src = trainingSrc
|
||||
trainCtx.loop = true
|
||||
trainCtx.obeyMuteSwitch = false
|
||||
trainCtx.volume = 0
|
||||
}
|
||||
if (!restCtx) {
|
||||
restCtx = uni.createInnerAudioContext()
|
||||
restCtx.src = restingSrc
|
||||
restCtx.loop = true
|
||||
restCtx.obeyMuteSwitch = false
|
||||
restCtx.volume = 0
|
||||
}
|
||||
}
|
||||
|
||||
const fade = (
|
||||
ctx: UniApp.InnerAudioContext,
|
||||
from: number,
|
||||
to: number,
|
||||
duration = fadeMs,
|
||||
) => {
|
||||
const steps = 16
|
||||
const stepMs = Math.max(16, duration / steps)
|
||||
let i = 0
|
||||
const t = setInterval(() => {
|
||||
i++
|
||||
const v = from + (to - from) * (i / steps)
|
||||
ctx.volume = Math.max(0, Math.min(1, v))
|
||||
if (i >= steps) {
|
||||
clearInterval(t)
|
||||
fadeTimers = fadeTimers.filter((x) => x !== t)
|
||||
}
|
||||
}, stepMs)
|
||||
fadeTimers.push(t)
|
||||
}
|
||||
|
||||
const switchTo = (target: BgmMode) => {
|
||||
if (!enabled.value) return
|
||||
if (mode.value === target) return
|
||||
ensureCtx()
|
||||
|
||||
if (target === 'training' && trainCtx && restCtx) {
|
||||
fade(restCtx, restCtx.volume, 0)
|
||||
setTimeout(() => restCtx?.pause(), fadeMs)
|
||||
trainCtx.play()
|
||||
fade(trainCtx, 0, volume)
|
||||
} else if (target === 'resting' && trainCtx && restCtx) {
|
||||
fade(trainCtx, trainCtx.volume, 0)
|
||||
setTimeout(() => trainCtx?.pause(), fadeMs)
|
||||
restCtx.play()
|
||||
fade(restCtx, 0, volume)
|
||||
} else if (target === 'none') {
|
||||
if (trainCtx) {
|
||||
fade(trainCtx, trainCtx.volume, 0)
|
||||
setTimeout(() => trainCtx?.pause(), fadeMs)
|
||||
}
|
||||
if (restCtx) {
|
||||
fade(restCtx, restCtx.volume, 0)
|
||||
setTimeout(() => restCtx?.pause(), fadeMs)
|
||||
}
|
||||
}
|
||||
mode.value = target
|
||||
}
|
||||
|
||||
const setEnabled = (v: boolean) => {
|
||||
enabled.value = v
|
||||
if (!v) switchTo('none')
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
fadeTimers.forEach((t) => clearInterval(t))
|
||||
fadeTimers = []
|
||||
trainCtx?.destroy?.()
|
||||
restCtx?.destroy?.()
|
||||
trainCtx = null
|
||||
restCtx = null
|
||||
})
|
||||
|
||||
return {
|
||||
mode,
|
||||
enabled,
|
||||
switchTo,
|
||||
setEnabled,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { ref, computed, onUnmounted } from 'vue'
|
||||
|
||||
export type SessionPhase = 'idle' | 'training' | 'resting' | 'done'
|
||||
|
||||
export interface TrainingSessionConfig {
|
||||
sets: number
|
||||
reps: number
|
||||
restSec: number
|
||||
beatsPerRep?: number
|
||||
onRepComplete?: (currentRep: number, totalReps: number) => void
|
||||
onSetComplete?: (currentSet: number, totalSets: number) => void
|
||||
onEnterRest?: (restSec: number) => void
|
||||
onExitRest?: () => void
|
||||
onDone?: () => void
|
||||
onCountdownTick?: (remainingSec: number) => void
|
||||
}
|
||||
|
||||
export function useTrainingSession() {
|
||||
const phase = ref<SessionPhase>('idle')
|
||||
const currentSet = ref<number>(0)
|
||||
const currentRep = ref<number>(0)
|
||||
const restRemainingSec = ref<number>(0)
|
||||
const beatCounter = ref<number>(0)
|
||||
|
||||
let config: TrainingSessionConfig | null = null
|
||||
let restTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const totalReps = computed(() => config?.reps ?? 0)
|
||||
const totalSets = computed(() => config?.sets ?? 0)
|
||||
const beatsPerRep = computed(() => config?.beatsPerRep ?? 2)
|
||||
|
||||
const isTraining = computed(() => phase.value === 'training')
|
||||
const isResting = computed(() => phase.value === 'resting')
|
||||
const isDone = computed(() => phase.value === 'done')
|
||||
|
||||
const start = (cfg: TrainingSessionConfig) => {
|
||||
config = cfg
|
||||
phase.value = 'training'
|
||||
currentSet.value = 1
|
||||
currentRep.value = 0
|
||||
beatCounter.value = 0
|
||||
restRemainingSec.value = 0
|
||||
}
|
||||
|
||||
const onBeat = () => {
|
||||
if (phase.value !== 'training' || !config) return
|
||||
|
||||
beatCounter.value++
|
||||
|
||||
if (beatCounter.value % beatsPerRep.value !== 0) return
|
||||
|
||||
currentRep.value++
|
||||
config.onRepComplete?.(currentRep.value, totalReps.value)
|
||||
|
||||
if (currentRep.value >= totalReps.value) {
|
||||
config.onSetComplete?.(currentSet.value, totalSets.value)
|
||||
|
||||
if (currentSet.value >= totalSets.value) {
|
||||
phase.value = 'done'
|
||||
config.onDone?.()
|
||||
return
|
||||
}
|
||||
|
||||
enterRest()
|
||||
}
|
||||
}
|
||||
|
||||
const enterRest = () => {
|
||||
if (!config) return
|
||||
phase.value = 'resting'
|
||||
restRemainingSec.value = config.restSec
|
||||
config.onEnterRest?.(config.restSec)
|
||||
|
||||
restTimer = setInterval(() => {
|
||||
restRemainingSec.value--
|
||||
config?.onCountdownTick?.(restRemainingSec.value)
|
||||
if (restRemainingSec.value <= 0) {
|
||||
exitRest()
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const exitRest = () => {
|
||||
if (restTimer) {
|
||||
clearInterval(restTimer)
|
||||
restTimer = null
|
||||
}
|
||||
if (!config) return
|
||||
|
||||
currentSet.value++
|
||||
currentRep.value = 0
|
||||
beatCounter.value = 0
|
||||
phase.value = 'training'
|
||||
config.onExitRest?.()
|
||||
}
|
||||
|
||||
const skipRest = () => {
|
||||
if (phase.value !== 'resting') return
|
||||
exitRest()
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
if (restTimer) {
|
||||
clearInterval(restTimer)
|
||||
restTimer = null
|
||||
}
|
||||
phase.value = 'idle'
|
||||
currentSet.value = 0
|
||||
currentRep.value = 0
|
||||
beatCounter.value = 0
|
||||
restRemainingSec.value = 0
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (restTimer) clearInterval(restTimer)
|
||||
})
|
||||
|
||||
return {
|
||||
phase,
|
||||
currentSet,
|
||||
currentRep,
|
||||
restRemainingSec,
|
||||
totalReps,
|
||||
totalSets,
|
||||
isTraining,
|
||||
isResting,
|
||||
isDone,
|
||||
start,
|
||||
stop,
|
||||
skipRest,
|
||||
onBeat,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { onUnmounted } from 'vue'
|
||||
|
||||
const VOICE_BASE = '/training/static/voice'
|
||||
|
||||
export type VoicePromptKey =
|
||||
| 'start'
|
||||
| 'ready'
|
||||
| 'rest'
|
||||
| 'next-set'
|
||||
| 'last-rep'
|
||||
| 'keep-it-up'
|
||||
| 'good-job'
|
||||
| 'breathe-in'
|
||||
| 'breathe-out'
|
||||
|
||||
export interface UseVoiceCoachOptions {
|
||||
enabled?: boolean
|
||||
volume?: number
|
||||
}
|
||||
|
||||
export function useVoiceCoach(options: UseVoiceCoachOptions = {}) {
|
||||
const { enabled = true, volume = 1 } = options
|
||||
|
||||
let ctx: UniApp.InnerAudioContext | null = null
|
||||
let queue: string[] = []
|
||||
let isPlayingQueue = false
|
||||
|
||||
const ensureCtx = () => {
|
||||
if (ctx) return
|
||||
ctx = uni.createInnerAudioContext()
|
||||
ctx.volume = volume
|
||||
ctx.obeyMuteSwitch = false
|
||||
ctx.onEnded(() => {
|
||||
playNextInQueue()
|
||||
})
|
||||
ctx.onError(() => {
|
||||
playNextInQueue()
|
||||
})
|
||||
}
|
||||
|
||||
const playNextInQueue = () => {
|
||||
if (!ctx || queue.length === 0) {
|
||||
isPlayingQueue = false
|
||||
return
|
||||
}
|
||||
const nextSrc = queue.shift()!
|
||||
ctx.src = nextSrc
|
||||
ctx.play()
|
||||
}
|
||||
|
||||
const enqueue = (src: string) => {
|
||||
if (!enabled) return
|
||||
ensureCtx()
|
||||
queue.push(src)
|
||||
if (!isPlayingQueue) {
|
||||
isPlayingQueue = true
|
||||
playNextInQueue()
|
||||
}
|
||||
}
|
||||
|
||||
const speakNumber = (n: number) => {
|
||||
if (n < 1 || n > 30) return
|
||||
enqueue(`${VOICE_BASE}/numbers/${n}.mp3`)
|
||||
}
|
||||
|
||||
const speakPrompt = (key: VoicePromptKey) => {
|
||||
enqueue(`${VOICE_BASE}/prompts/${key}.mp3`)
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
queue = []
|
||||
isPlayingQueue = false
|
||||
ctx?.stop()
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stop()
|
||||
ctx?.destroy?.()
|
||||
ctx = null
|
||||
})
|
||||
|
||||
return {
|
||||
speakNumber,
|
||||
speakPrompt,
|
||||
stop,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="exercise-anim" :class="`anim-${animationType}`" :style="cssVars">
|
||||
<view class="stage">
|
||||
<!-- 哑铃弯举：摆臂 -->
|
||||
<view v-if="animationType === 'curl'" class="curl-arm">
|
||||
<view class="curl-forearm">
|
||||
<view class="curl-dumbbell">{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 哑铃推举：上下移动 -->
|
||||
<view v-else-if="animationType === 'press'" class="press-wrap">
|
||||
<view class="press-dumbbell left">{{ icon }}</view>
|
||||
<view class="press-dumbbell right">{{ icon }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 哑铃侧平举：双臂张开 -->
|
||||
<view v-else-if="animationType === 'sidefly'" class="sidefly-wrap">
|
||||
<view class="sidefly-arm sidefly-left">
|
||||
<view class="sidefly-dumbbell">{{ icon }}</view>
|
||||
</view>
|
||||
<view class="sidefly-arm sidefly-right">
|
||||
<view class="sidefly-dumbbell">{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 握力环：缩放 -->
|
||||
<view v-else-if="animationType === 'grip'" class="grip-ring">
|
||||
<view class="grip-ring-inner">{{ icon }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 卷腹：身体折叠 -->
|
||||
<view v-else-if="animationType === 'crunch'" class="crunch-wrap">
|
||||
<view class="crunch-body">{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { AnimationType } from '../exercises'
|
||||
|
||||
interface Props {
|
||||
animationType: AnimationType
|
||||
bpm: number
|
||||
beatsPerRep?: number
|
||||
icon?: string
|
||||
isPlaying?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
beatsPerRep: 2,
|
||||
icon: '🏋',
|
||||
isPlaying: false,
|
||||
})
|
||||
|
||||
const cssVars = computed(() => {
|
||||
const repDurationMs = (60000 / props.bpm) * props.beatsPerRep
|
||||
return {
|
||||
'--rep-duration': `${repDurationMs}ms`,
|
||||
'--anim-state': props.isPlaying ? 'running' : 'paused',
|
||||
} as Record<string, string>
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exercise-anim {
|
||||
width: 100%;
|
||||
height: 480rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #f0fdf4, #ecfeff);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage {
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== 弯举 ===== */
|
||||
.curl-arm {
|
||||
width: 60rpx;
|
||||
height: 240rpx;
|
||||
background: #fbbf24;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.curl-forearm {
|
||||
width: 60rpx;
|
||||
height: 200rpx;
|
||||
background: #f59e0b;
|
||||
border-radius: 30rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform-origin: bottom center;
|
||||
animation: curl-anim var(--rep-duration) ease-in-out infinite;
|
||||
animation-play-state: var(--anim-state);
|
||||
}
|
||||
|
||||
.curl-dumbbell {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 56rpx;
|
||||
}
|
||||
}
|
||||
@keyframes curl-anim {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-115deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 推举 ===== */
|
||||
.press-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.press-dumbbell {
|
||||
font-size: 88rpx;
|
||||
animation: press-anim var(--rep-duration) ease-in-out infinite;
|
||||
animation-play-state: var(--anim-state);
|
||||
}
|
||||
@keyframes press-anim {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(80rpx);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-80rpx);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 侧平举 ===== */
|
||||
.sidefly-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sidefly-arm {
|
||||
position: absolute;
|
||||
width: 140rpx;
|
||||
height: 24rpx;
|
||||
background: #f59e0b;
|
||||
border-radius: 12rpx;
|
||||
top: 50%;
|
||||
transform-origin: center right;
|
||||
animation: sidefly-left var(--rep-duration) ease-in-out infinite;
|
||||
animation-play-state: var(--anim-state);
|
||||
|
||||
&.sidefly-left {
|
||||
right: 50%;
|
||||
}
|
||||
&.sidefly-right {
|
||||
left: 50%;
|
||||
transform-origin: center left;
|
||||
animation-name: sidefly-right;
|
||||
}
|
||||
}
|
||||
.sidefly-dumbbell {
|
||||
position: absolute;
|
||||
top: -36rpx;
|
||||
font-size: 56rpx;
|
||||
}
|
||||
.sidefly-left .sidefly-dumbbell {
|
||||
left: -20rpx;
|
||||
}
|
||||
.sidefly-right .sidefly-dumbbell {
|
||||
right: -20rpx;
|
||||
}
|
||||
@keyframes sidefly-left {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes sidefly-right {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 握力环 ===== */
|
||||
.grip-ring {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
animation: grip-anim var(--rep-duration) ease-in-out infinite;
|
||||
animation-play-state: var(--anim-state);
|
||||
border: 16rpx solid #22c55e;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
.grip-ring-inner {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
@keyframes grip-anim {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.65);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 卷腹 ===== */
|
||||
.crunch-wrap {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.crunch-body {
|
||||
font-size: 120rpx;
|
||||
animation: crunch-anim var(--rep-duration) ease-in-out infinite;
|
||||
animation-play-state: var(--anim-state);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
@keyframes crunch-anim {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(1) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(0.6) translateY(-10rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
export type AnimationType =
|
||||
| 'curl'
|
||||
| 'press'
|
||||
| 'sidefly'
|
||||
| 'grip'
|
||||
| 'crunch'
|
||||
|
||||
export interface ExercisePreset {
|
||||
id: string
|
||||
name: string
|
||||
equipment: '哑铃' | '握力环' | '健身环' | '徒手'
|
||||
icon: string
|
||||
animationType: AnimationType
|
||||
description: string
|
||||
tips: string[]
|
||||
contraindication?: string
|
||||
|
||||
defaultBpm: number
|
||||
bpmMin: number
|
||||
bpmMax: number
|
||||
defaultSets: number
|
||||
defaultReps: number
|
||||
defaultRestSec: number
|
||||
|
||||
beatsPerRep: number
|
||||
}
|
||||
|
||||
export const EXERCISE_PRESETS: ExercisePreset[] = [
|
||||
{
|
||||
id: 'dumbbell-curl',
|
||||
name: '哑铃弯举',
|
||||
equipment: '哑铃',
|
||||
icon: '🏋',
|
||||
animationType: 'curl',
|
||||
description: '锻炼肱二头肌，注意肘部固定不动',
|
||||
tips: ['肘部贴紧身体', '上举吸气，下落呼气', '动作放慢，控制重量'],
|
||||
contraindication: '肘关节炎症急性期不宜',
|
||||
defaultBpm: 60,
|
||||
bpmMin: 40,
|
||||
bpmMax: 100,
|
||||
defaultSets: 3,
|
||||
defaultReps: 12,
|
||||
defaultRestSec: 60,
|
||||
beatsPerRep: 2,
|
||||
},
|
||||
{
|
||||
id: 'dumbbell-press',
|
||||
name: '哑铃推举',
|
||||
equipment: '哑铃',
|
||||
icon: '🏋',
|
||||
animationType: 'press',
|
||||
description: '锻炼肩部三角肌，核心保持收紧',
|
||||
tips: ['不要含胸驼背', '推举时呼气', '不要锁死肘关节'],
|
||||
contraindication: '肩袖损伤者请咨询医生',
|
||||
defaultBpm: 60,
|
||||
bpmMin: 40,
|
||||
bpmMax: 90,
|
||||
defaultSets: 3,
|
||||
defaultReps: 10,
|
||||
defaultRestSec: 90,
|
||||
beatsPerRep: 2,
|
||||
},
|
||||
{
|
||||
id: 'dumbbell-sidefly',
|
||||
name: '哑铃侧平举',
|
||||
equipment: '哑铃',
|
||||
icon: '🏋',
|
||||
animationType: 'sidefly',
|
||||
description: '锻炼三角肌中束，重量宜轻不宜重',
|
||||
tips: ['手肘微屈', '抬至与肩平齐即可', '想象用肩膀发力，不是手臂'],
|
||||
defaultBpm: 60,
|
||||
bpmMin: 40,
|
||||
bpmMax: 80,
|
||||
defaultSets: 3,
|
||||
defaultReps: 12,
|
||||
defaultRestSec: 60,
|
||||
beatsPerRep: 2,
|
||||
},
|
||||
{
|
||||
id: 'grip-ring',
|
||||
name: '握力环训练',
|
||||
equipment: '握力环',
|
||||
icon: '🟢',
|
||||
animationType: 'grip',
|
||||
description: '锻炼前臂屈肌群，改善握力',
|
||||
tips: ['完全握紧停顿 1 秒', '完全张开放松', '左右手交替'],
|
||||
defaultBpm: 80,
|
||||
bpmMin: 60,
|
||||
bpmMax: 120,
|
||||
defaultSets: 4,
|
||||
defaultReps: 20,
|
||||
defaultRestSec: 45,
|
||||
beatsPerRep: 2,
|
||||
},
|
||||
{
|
||||
id: 'crunch',
|
||||
name: '集中机（仰卧卷腹）',
|
||||
equipment: '健身环',
|
||||
icon: '💪',
|
||||
animationType: 'crunch',
|
||||
description: '锻炼腹直肌，借助健身环增加阻力',
|
||||
tips: ['下背贴地', '用腹部发力，不是脖子', '上抬呼气，下落吸气'],
|
||||
contraindication: '腰椎间盘突出急性期不宜',
|
||||
defaultBpm: 50,
|
||||
bpmMin: 40,
|
||||
bpmMax: 80,
|
||||
defaultSets: 3,
|
||||
defaultReps: 15,
|
||||
defaultRestSec: 60,
|
||||
beatsPerRep: 2,
|
||||
},
|
||||
]
|
||||
|
||||
export function getPresetById(id: string): ExercisePreset | undefined {
|
||||
return EXERCISE_PRESETS.find((e) => e.id === id)
|
||||
}
|
||||
@@ -0,0 +1,610 @@
|
||||
<template>
|
||||
<view class="training-page">
|
||||
<view class="header">
|
||||
<view class="header-main">
|
||||
<text class="title">练一练</text>
|
||||
<text class="subtitle">器械动作跟练</text>
|
||||
</view>
|
||||
<view class="header-link" @click="goMetronome">
|
||||
🎵 节拍器
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="equipment-tabs">
|
||||
<view
|
||||
v-for="eq in equipmentList"
|
||||
:key="eq"
|
||||
class="equipment-tab"
|
||||
:class="{ active: currentEquipment === eq }"
|
||||
@click="onSwitchEquipment(eq)"
|
||||
>
|
||||
{{ eq }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x class="exercise-scroll">
|
||||
<view class="exercise-list">
|
||||
<view
|
||||
v-for="ex in filteredExercises"
|
||||
:key="ex.id"
|
||||
class="exercise-card"
|
||||
:class="{ active: selectedId === ex.id }"
|
||||
@click="onSelect(ex.id)"
|
||||
>
|
||||
<text class="exercise-icon">{{ ex.icon }}</text>
|
||||
<text class="exercise-name">{{ ex.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view v-if="selected" class="exercise-detail">
|
||||
<exercise-anim
|
||||
:animation-type="selected.animationType"
|
||||
:bpm="bpm"
|
||||
:beats-per-rep="selected.beatsPerRep"
|
||||
:icon="selected.icon"
|
||||
:is-playing="metronomeIsPlaying"
|
||||
/>
|
||||
|
||||
<view class="beat-indicator">
|
||||
<view
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
class="beat-dot"
|
||||
:class="{ active: ((beatIndex - 1) % 4) + 1 === i && metronomeIsPlaying }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="meta-row">
|
||||
<text class="meta-label">{{ selected.description }}</text>
|
||||
</view>
|
||||
|
||||
<view class="settings">
|
||||
<view class="setting-row">
|
||||
<text class="setting-label">节奏</text>
|
||||
<slider
|
||||
:value="bpm"
|
||||
:min="selected.bpmMin"
|
||||
:max="selected.bpmMax"
|
||||
:step="2"
|
||||
block-size="24"
|
||||
active-color="#22c55e"
|
||||
@change="onBpmChange"
|
||||
/>
|
||||
<text class="setting-value">{{ bpm }} BPM</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-row inline">
|
||||
<view class="inline-item">
|
||||
<text class="setting-label">组数</text>
|
||||
<view class="stepper">
|
||||
<text class="step-btn" @click="adjust('sets', -1)">-</text>
|
||||
<text class="step-val">{{ sets }}</text>
|
||||
<text class="step-btn" @click="adjust('sets', 1)">+</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-item">
|
||||
<text class="setting-label">次数</text>
|
||||
<view class="stepper">
|
||||
<text class="step-btn" @click="adjust('reps', -1)">-</text>
|
||||
<text class="step-val">{{ reps }}</text>
|
||||
<text class="step-btn" @click="adjust('reps', 1)">+</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-item">
|
||||
<text class="setting-label">休息(秒)</text>
|
||||
<view class="stepper">
|
||||
<text class="step-btn" @click="adjust('rest', -15)">-</text>
|
||||
<text class="step-val">{{ restSec }}</text>
|
||||
<text class="step-btn" @click="adjust('rest', 15)">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!isTraining && !isResting && !isDone" class="action-row">
|
||||
<button class="btn-primary" @click="onStart">开始训练</button>
|
||||
</view>
|
||||
|
||||
<view v-if="isTraining" class="status-card training">
|
||||
<text class="status-title">训练中</text>
|
||||
<text class="status-line">第 {{ currentSet }} / {{ totalSets }} 组</text>
|
||||
<text class="status-line big">{{ currentRep }} / {{ totalReps }}</text>
|
||||
<view class="action-row">
|
||||
<button class="btn-secondary" @click="onStop">停止</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isResting" class="status-card resting">
|
||||
<text class="status-title">休息中</text>
|
||||
<text class="status-line big">{{ restRemainingSec }}s</text>
|
||||
<view class="action-row">
|
||||
<button class="btn-secondary" @click="onSkipRest">跳过休息</button>
|
||||
<button class="btn-text" @click="onStop">结束训练</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isDone" class="status-card done">
|
||||
<text class="status-title">训练完成 🎉</text>
|
||||
<text class="status-line">共 {{ totalSets }} 组 × {{ totalReps }} 次</text>
|
||||
<view class="action-row">
|
||||
<button class="btn-primary" @click="onStart">再来一次</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips-card">
|
||||
<text class="tips-title">动作要领</text>
|
||||
<text v-for="(tip, i) in selected.tips" :key="i" class="tips-item">
|
||||
• {{ tip }}
|
||||
</text>
|
||||
<text v-if="selected.contraindication" class="tips-warn">
|
||||
⚠ {{ selected.contraindication }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onUnmounted } from 'vue'
|
||||
import { onShow, onHide } from '@dcloudio/uni-app'
|
||||
import ExerciseAnim from './components/exercise-anim.vue'
|
||||
import { EXERCISE_PRESETS, getPresetById } from './exercises'
|
||||
import type { ExercisePreset } from './exercises'
|
||||
import { useMetronome } from '../hooks/useMetronome'
|
||||
import { useTrainingSession } from '../hooks/useTrainingSession'
|
||||
import { useVoiceCoach } from '../hooks/useVoiceCoach'
|
||||
import { useTrainingBgm } from '../hooks/useTrainingBgm'
|
||||
|
||||
const equipmentList = ['哑铃', '握力环', '健身环', '徒手'] as const
|
||||
type Equipment = (typeof equipmentList)[number]
|
||||
|
||||
const currentEquipment = ref<Equipment>('哑铃')
|
||||
const selectedId = ref<string>(EXERCISE_PRESETS[0].id)
|
||||
|
||||
const filteredExercises = computed(() =>
|
||||
EXERCISE_PRESETS.filter((e) => e.equipment === currentEquipment.value),
|
||||
)
|
||||
|
||||
const selected = computed<ExercisePreset | undefined>(() =>
|
||||
getPresetById(selectedId.value),
|
||||
)
|
||||
|
||||
const bpm = ref<number>(60)
|
||||
const sets = ref<number>(3)
|
||||
const reps = ref<number>(12)
|
||||
const restSec = ref<number>(60)
|
||||
|
||||
watch(
|
||||
selected,
|
||||
(val) => {
|
||||
if (!val) return
|
||||
bpm.value = val.defaultBpm
|
||||
sets.value = val.defaultSets
|
||||
reps.value = val.defaultReps
|
||||
restSec.value = val.defaultRestSec
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const voice = useVoiceCoach()
|
||||
const bgm = useTrainingBgm()
|
||||
|
||||
const session = useTrainingSession()
|
||||
const {
|
||||
currentSet,
|
||||
currentRep,
|
||||
restRemainingSec,
|
||||
totalReps,
|
||||
totalSets,
|
||||
isTraining,
|
||||
isResting,
|
||||
isDone,
|
||||
} = session
|
||||
|
||||
const metronome = useMetronome({
|
||||
initialBpm: bpm.value,
|
||||
onBeat: () => session.onBeat(),
|
||||
})
|
||||
const { beatIndex, isPlaying: metronomeIsPlaying } = metronome
|
||||
|
||||
watch(bpm, (v) => metronome.setBpm(v))
|
||||
|
||||
const onSwitchEquipment = (eq: Equipment) => {
|
||||
if (isTraining.value || isResting.value) return
|
||||
currentEquipment.value = eq
|
||||
const first = EXERCISE_PRESETS.find((e) => e.equipment === eq)
|
||||
if (first) selectedId.value = first.id
|
||||
}
|
||||
|
||||
const onSelect = (id: string) => {
|
||||
if (isTraining.value || isResting.value) return
|
||||
selectedId.value = id
|
||||
}
|
||||
|
||||
const onBpmChange = (e: any) => {
|
||||
const v = e.detail?.value ?? e
|
||||
bpm.value = Number(v)
|
||||
}
|
||||
|
||||
const adjust = (key: 'sets' | 'reps' | 'rest', delta: number) => {
|
||||
if (isTraining.value || isResting.value) return
|
||||
if (key === 'sets') sets.value = Math.max(1, Math.min(10, sets.value + delta))
|
||||
if (key === 'reps') reps.value = Math.max(1, Math.min(50, reps.value + delta))
|
||||
if (key === 'rest') restSec.value = Math.max(0, Math.min(300, restSec.value + delta))
|
||||
}
|
||||
|
||||
const onStart = () => {
|
||||
if (!selected.value) return
|
||||
uni.setKeepScreenOn({ keepScreenOn: true })
|
||||
|
||||
voice.speakPrompt('start')
|
||||
|
||||
session.start({
|
||||
sets: sets.value,
|
||||
reps: reps.value,
|
||||
restSec: restSec.value,
|
||||
beatsPerRep: selected.value.beatsPerRep,
|
||||
onRepComplete: (rep, total) => {
|
||||
if (rep <= 30) voice.speakNumber(rep)
|
||||
if (rep === total - 1) voice.speakPrompt('last-rep')
|
||||
},
|
||||
onSetComplete: (set, total) => {
|
||||
if (set < total) voice.speakPrompt('keep-it-up')
|
||||
},
|
||||
onEnterRest: () => {
|
||||
metronome.stop()
|
||||
voice.speakPrompt('rest')
|
||||
bgm.switchTo('resting')
|
||||
},
|
||||
onExitRest: () => {
|
||||
voice.speakPrompt('next-set')
|
||||
bgm.switchTo('training')
|
||||
metronome.start()
|
||||
},
|
||||
onDone: () => {
|
||||
metronome.stop()
|
||||
bgm.switchTo('none')
|
||||
voice.speakPrompt('good-job')
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
},
|
||||
})
|
||||
|
||||
bgm.switchTo('training')
|
||||
metronome.start()
|
||||
}
|
||||
|
||||
const onStop = () => {
|
||||
metronome.stop()
|
||||
session.stop()
|
||||
bgm.switchTo('none')
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
}
|
||||
|
||||
const onSkipRest = () => {
|
||||
session.skipRest()
|
||||
}
|
||||
|
||||
const goMetronome = () => {
|
||||
uni.navigateTo({ url: '/training/pages/metronome' })
|
||||
}
|
||||
|
||||
onHide(() => {
|
||||
if (isTraining.value || isResting.value) {
|
||||
onStop()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.training-page {
|
||||
min-height: 100vh;
|
||||
background: #f9fafb;
|
||||
padding: 32rpx 24rpx 80rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
padding: 12rpx 24rpx;
|
||||
background: #f3f4f6;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #4b5563;
|
||||
|
||||
&:active {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-tabs {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.equipment-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 14rpx 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #4b5563;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
background: #22c55e;
|
||||
color: #fff;
|
||||
border-color: #22c55e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exercise-scroll {
|
||||
width: 100%;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.exercise-list {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.exercise-card {
|
||||
flex-shrink: 0;
|
||||
width: 160rpx;
|
||||
padding: 20rpx 12rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
border-color: #22c55e;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.exercise-icon {
|
||||
display: block;
|
||||
font-size: 56rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.exercise-name {
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.exercise-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.beat-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
padding: 8rpx 0;
|
||||
|
||||
.beat-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: #d1d5db;
|
||||
transition: transform 0.15s, background 0.15s;
|
||||
|
||||
&.active {
|
||||
background: #22c55e;
|
||||
transform: scale(1.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
.meta-label {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.setting-label {
|
||||
font-size: 26rpx;
|
||||
color: #4b5563;
|
||||
min-width: 80rpx;
|
||||
}
|
||||
.setting-value {
|
||||
font-size: 26rpx;
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
min-width: 120rpx;
|
||||
text-align: right;
|
||||
}
|
||||
slider {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
justify-content: space-between;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.step-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #f3f4f6;
|
||||
border-radius: 24rpx;
|
||||
font-size: 32rpx;
|
||||
color: #4b5563;
|
||||
}
|
||||
.step-val {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
min-width: 56rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
max-width: 320rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #22c55e;
|
||||
color: #fff;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: #22c55e;
|
||||
border: 2rpx solid #22c55e;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 76rpx;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
font-size: 26rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
align-items: center;
|
||||
|
||||
&.training {
|
||||
background: linear-gradient(135deg, #f0fdf4, #ecfeff);
|
||||
}
|
||||
&.resting {
|
||||
background: linear-gradient(135deg, #fef3c7, #fef9c3);
|
||||
}
|
||||
&.done {
|
||||
background: linear-gradient(135deg, #dbeafe, #ede9fe);
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 30rpx;
|
||||
color: #4b5563;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-line {
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
&.big {
|
||||
font-size: 64rpx;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.tips-item {
|
||||
font-size: 26rpx;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.tips-warn {
|
||||
font-size: 26rpx;
|
||||
color: #ef4444;
|
||||
margin-top: 12rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<view class="page" :style="rootStyle">
|
||||
<!-- ===== 主舞台:节拍器圆 ===== -->
|
||||
<view class="stage" @click="togglePlay">
|
||||
<view class="ring r1" :class="{ playing: isPlaying }" />
|
||||
<view class="ring r2" :class="{ playing: isPlaying }" />
|
||||
<view class="core" :class="{ playing: isPlaying, accent: isAccent }">
|
||||
<text class="bpm-num">{{ bpm }}</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"
|
||||
/>
|
||||
<!-- 微信原生 video 右上角的 PIP/小窗按钮无法靠属性彻底关掉,
|
||||
用 cover-view 覆盖一个跟背景同色的小色块盖住它 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <cover-view class="pip-mask"> </cover-view> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ===== 推荐档位(3 选 1) ===== -->
|
||||
<view class="presets">
|
||||
<view
|
||||
v-for="p in PRESETS"
|
||||
:key="p.id"
|
||||
class="preset"
|
||||
:class="{ active: activePreset === p.id }"
|
||||
@click="applyPreset(p)"
|
||||
>
|
||||
<text class="preset-icon">{{ p.icon }}</text>
|
||||
<text class="preset-name">{{ p.name }}</text>
|
||||
<text class="preset-bpm">{{ p.bpm }} BPM</text>
|
||||
<text class="preset-desc">{{ p.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ===== 右下角微调(不显眼) ===== -->
|
||||
<view class="quick-adjust">
|
||||
<view class="qa-group">
|
||||
<view class="qa-btn" @click.stop="adjustBpm(-1)">−</view>
|
||||
<text class="qa-label">微调</text>
|
||||
<view class="qa-btn" @click.stop="adjustBpm(1)">+</view>
|
||||
</view>
|
||||
<view class="qa-divider" />
|
||||
<view class="qa-group">
|
||||
<view
|
||||
v-for="m in METER_OPTIONS"
|
||||
:key="m.value"
|
||||
class="qa-meter"
|
||||
:class="{ active: accentEvery === m.value }"
|
||||
@click.stop="onMeterChange(m.value)"
|
||||
>
|
||||
{{ m.label }}
|
||||
</view>
|
||||
<text class="qa-label">拍</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { onShow, onHide } from '@dcloudio/uni-app'
|
||||
import { useMetronome } from '../hooks/useMetronome'
|
||||
|
||||
/**
|
||||
* 跑步动画视频(腾讯云 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'
|
||||
|
||||
/**
|
||||
* 视频原速对应的 BPM 基准(参见 hooks 实现注释)
|
||||
* playback-rate 范围 [0.5, 2.0]
|
||||
*/
|
||||
const VIDEO_BASE_BPM = 124
|
||||
|
||||
/**
|
||||
* 推荐档位:覆盖大多数老人健走场景,一键切换 BPM + 拍号
|
||||
* 不在档位的中间数值用右下角微调即可
|
||||
*/
|
||||
const PRESETS = [
|
||||
{
|
||||
id: 'slow',
|
||||
icon: '🚶',
|
||||
name: '慢走',
|
||||
bpm: 80,
|
||||
accent: 2,
|
||||
desc: '热身 · 恢复',
|
||||
},
|
||||
{
|
||||
id: 'normal',
|
||||
icon: '🏃♀️',
|
||||
name: '健走',
|
||||
bpm: 110,
|
||||
accent: 2,
|
||||
desc: '日常 · 通勤',
|
||||
},
|
||||
{
|
||||
id: 'brisk',
|
||||
icon: '🏃',
|
||||
name: '快走',
|
||||
bpm: 130,
|
||||
accent: 2,
|
||||
desc: '提速 · 燃脂',
|
||||
},
|
||||
] as const
|
||||
|
||||
const METER_OPTIONS = [
|
||||
{ label: '2', value: 2 },
|
||||
{ label: '3', value: 3 },
|
||||
{ label: '4', value: 4 },
|
||||
]
|
||||
|
||||
const metronome = useMetronome({
|
||||
initialBpm: 80,
|
||||
accentEvery: 4,
|
||||
clickSrc: '/training/static/audio/click.mp3',
|
||||
accentSrc: '/training/static/audio/click-wood.mp3',
|
||||
})
|
||||
const {
|
||||
bpm,
|
||||
isPlaying,
|
||||
isAccent,
|
||||
accentEvery,
|
||||
intervalMs,
|
||||
start,
|
||||
stop,
|
||||
setBpm,
|
||||
setAccentEvery,
|
||||
preload,
|
||||
} = metronome
|
||||
|
||||
const adjustBpm = (delta: number) => {
|
||||
setBpm(bpm.value + delta)
|
||||
}
|
||||
|
||||
const onMeterChange = (val: number) => {
|
||||
setAccentEvery(val)
|
||||
}
|
||||
|
||||
const togglePlay = () => {
|
||||
if (isPlaying.value) {
|
||||
stop()
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
} else {
|
||||
start()
|
||||
uni.setKeepScreenOn({ keepScreenOn: true })
|
||||
}
|
||||
}
|
||||
|
||||
/* 当前命中的档位(BPM + 拍号都匹配才算选中) */
|
||||
const activePreset = computed(() => {
|
||||
const hit = PRESETS.find(
|
||||
(p) => p.bpm === bpm.value && p.accent === accentEvery.value,
|
||||
)
|
||||
return hit?.id ?? null
|
||||
})
|
||||
|
||||
const applyPreset = (p: (typeof PRESETS)[number]) => {
|
||||
setBpm(p.bpm)
|
||||
setAccentEvery(p.accent)
|
||||
}
|
||||
|
||||
/* 视频实例与 BPM 同步 */
|
||||
let videoCtx: UniApp.VideoContext | null = null
|
||||
|
||||
const playbackRate = computed(() => {
|
||||
const rate = bpm.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)
|
||||
uni.showToast({
|
||||
title: '视频加载失败,请用真机预览',
|
||||
icon: 'none',
|
||||
duration: 2500,
|
||||
})
|
||||
}
|
||||
|
||||
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`,
|
||||
'--step-duration': `${intervalMs.value}ms`,
|
||||
}))
|
||||
|
||||
onShow(() => {
|
||||
preload()
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
if (isPlaying.value) {
|
||||
stop()
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.setKeepScreenOn({ keepScreenOn: false })
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ============================================================
|
||||
* 设计 token —— 浅色清爽
|
||||
* ============================================================ */
|
||||
$bg-color: #f8fafc;
|
||||
$card-bg: #ffffff;
|
||||
$card-border: rgba(15, 23, 42, 0.06);
|
||||
$text-1: #0f172a;
|
||||
$text-2: #475569;
|
||||
$text-3: #94a3b8;
|
||||
$brand: #10b981;
|
||||
$brand-soft: #d1fae5;
|
||||
$brand-deep: #047857;
|
||||
$accent: #f59e0b;
|
||||
$accent-soft: #fef3c7;
|
||||
$radius-card: 24rpx;
|
||||
$radius-btn: 18rpx;
|
||||
$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
|
||||
$shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
|
||||
|
||||
/* ============================================================
|
||||
* 页面容器
|
||||
* ============================================================ */
|
||||
.page {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 28rpx 80rpx;
|
||||
background: $bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 22rpx;
|
||||
color: $text-1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 节拍器主舞台
|
||||
* ============================================================ */
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 480rpx;
|
||||
height: 480rpx;
|
||||
margin-top: 16rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
&.playing.accent {
|
||||
background: linear-gradient(140deg, #fbbf24 0%, #d97706 100%);
|
||||
box-shadow:
|
||||
inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.18),
|
||||
inset 0 16rpx 50rpx rgba(255, 255, 255, 0.22),
|
||||
0 16rpx 40rpx rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.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: 260rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.walker-box {
|
||||
/* 1:1 矩形,跟 video 内容比例一致,消除左右黑边
|
||||
background 设成 video 内容右上角的浅灰白色,
|
||||
万一还有 1rpx 缝隙也不会出现刺眼黑边 */
|
||||
position: relative;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
background: #e8ecf2;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.runner-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 微信 native video 自身默认是 #000 黑底,父容器 bg 在 web 看不到,
|
||||
只能让 video 占满 + 让父 bg 跟 video 内容色融合 */
|
||||
background: #e8ecf2;
|
||||
}
|
||||
|
||||
/* 覆盖在 video 右上角原生 PIP/小窗按钮上的色块
|
||||
颜色取 video 内容右上角的浅灰白渐变(#dde2eb 左右),让色块融入视频画面
|
||||
仅小程序端有效(cover-view 是小程序唯一能盖住 native 组件的元素) */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 三档位推荐
|
||||
* ============================================================ */
|
||||
.presets {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.preset {
|
||||
flex: 1;
|
||||
background: $card-bg;
|
||||
border: 2rpx solid $card-border;
|
||||
border-radius: $radius-card;
|
||||
padding: 22rpx 12rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
box-shadow: $shadow-sm;
|
||||
transition: all 0.18s;
|
||||
|
||||
.preset-icon {
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.preset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-1;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.preset-bpm {
|
||||
font-size: 24rpx;
|
||||
color: $text-2;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.preset-desc {
|
||||
font-size: 20rpx;
|
||||
color: $text-3;
|
||||
letter-spacing: 1rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $brand-soft;
|
||||
border-color: $brand;
|
||||
box-shadow:
|
||||
0 8rpx 20rpx rgba(16, 185, 129, 0.18),
|
||||
inset 0 0 0 2rpx rgba(16, 185, 129, 0.4);
|
||||
|
||||
.preset-name {
|
||||
color: $brand-deep;
|
||||
}
|
||||
.preset-bpm {
|
||||
color: $brand-deep;
|
||||
}
|
||||
.preset-desc {
|
||||
color: $brand;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 右下角微调(不显眼)
|
||||
* ============================================================ */
|
||||
.quick-adjust {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
bottom: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
padding: 10rpx 18rpx;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
border-radius: 999rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.qa-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.qa-label {
|
||||
font-size: 20rpx;
|
||||
color: $text-3;
|
||||
margin: 0 4rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.qa-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
color: $text-2;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
&:active {
|
||||
background: rgba(16, 185, 129, 0.18);
|
||||
color: $brand-deep;
|
||||
}
|
||||
}
|
||||
|
||||
.qa-meter {
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
color: $text-3;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
transition: all 0.15s;
|
||||
|
||||
&.active {
|
||||
background: $brand;
|
||||
color: #fff;
|
||||
box-shadow: 0 2rpx 6rpx rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.qa-divider {
|
||||
width: 1rpx;
|
||||
height: 22rpx;
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
# 训练模块静态资源
|
||||
|
||||
本目录用于存放"练一练"功能的所有音频素材。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
training/static/
|
||||
├── audio/
|
||||
│ └── click.mp3 # 节拍器主音（短促金属敲击声，约 50ms）
|
||||
├── voice/
|
||||
│ ├── numbers/
|
||||
│ │ └── 1.mp3 ~ 30.mp3 # 数字报数
|
||||
│ └── prompts/
|
||||
│ ├── start.mp3
|
||||
│ ├── ready.mp3
|
||||
│ ├── rest.mp3
|
||||
│ ├── next-set.mp3
|
||||
│ ├── last-rep.mp3
|
||||
│ ├── keep-it-up.mp3
|
||||
│ ├── good-job.mp3
|
||||
│ ├── breathe-in.mp3
|
||||
│ └── breathe-out.mp3
|
||||
└── bgm/
|
||||
├── train-light.mp3 # 训练时背景乐（轻快有节奏感）
|
||||
└── rest-meditation.mp3 # 休息时背景乐（舒缓冥想）
|
||||
```
|
||||
|
||||
## 准备步骤
|
||||
|
||||
### 1. 语音素材（小米 MiMo TTS 自动生成）
|
||||
|
||||
需要 Node 18+（用内置 `fetch`）。先准备小米 MiMo API Key：
|
||||
|
||||
- 文档: https://platform.xiaomimimo.com/
|
||||
- API Key 形如 `sk-xxxxxxxx`
|
||||
|
||||
```bash
|
||||
export MIMO_API_KEY=sk-your-key-here
|
||||
|
||||
cd uniapp
|
||||
node scripts/generate-voice.mjs
|
||||
```
|
||||
|
||||
会自动调用 `mimo-v2.5-tts` 模型生成 39 个 mp3（30 个数字 + 9 个口令）到 `voice/` 目录。
|
||||
|
||||
**可选参数**：
|
||||
|
||||
```bash
|
||||
# 换音色（默认 冰糖；可选：冰糖/茉莉/苏打/白桦/Mia/Chloe/Milo/Dean）
|
||||
node scripts/generate-voice.mjs --voice 茉莉
|
||||
|
||||
# 换格式（默认 mp3，需要跟 hooks/useVoiceCoach.ts 里的 .mp3 后缀对应）
|
||||
node scripts/generate-voice.mjs --format wav
|
||||
|
||||
# 强制重新生成（默认存在则跳过）
|
||||
node scripts/generate-voice.mjs --force
|
||||
```
|
||||
|
||||
**音色推荐**（中文女声更适合健身教练）：
|
||||
- `冰糖`：温柔甜美，亲和力强（默认）
|
||||
- `茉莉`：清爽利落，有"运动博主"感
|
||||
- `苏打`：年轻男声，有力量感
|
||||
- `白桦`：成熟男声，沉稳
|
||||
|
||||
### 2. 节拍器 click 音
|
||||
|
||||
**已内置 3 种音色**（来自 [chrono-bump](https://github.com/johnnysn/chrono-bump) MIT 协议项目）：
|
||||
|
||||
| 文件 | 用途 | 大小 |
|
||||
|------|------|------|
|
||||
| `audio/click.mp3` | 默认 click（标准节拍器音） | 3.4 KB |
|
||||
| `audio/click-soft.mp3` | 柔和音色 | 4.2 KB |
|
||||
| `audio/click-wood.mp3` | 木鱼/原木质感（推荐用于重音 accent） | 4.6 KB |
|
||||
|
||||
如果想换更好听的，可以去：
|
||||
- [freesound.org](https://freesound.org) 搜 "click" / "tick"（注意 CC 协议）
|
||||
- [pixabay.com/sound-effects](https://pixabay.com/sound-effects/) 搜 "metronome"（免费可商用）
|
||||
|
||||
替换时保持文件名不变即可，无需改代码。
|
||||
|
||||
### 3. 背景音乐
|
||||
|
||||
每首 30 秒~2 分钟即可（loop 后听不出接缝）。
|
||||
|
||||
推荐来源（免费可商用）：
|
||||
- [pixabay.com/music](https://pixabay.com/music) 搜 "calm" / "meditation" / "lofi"
|
||||
- [freemusicarchive.org](https://freemusicarchive.org)
|
||||
- [bensound.com](https://bensound.com)（含署名）
|
||||
|
||||
文件大小建议 < 1MB（mp3 128kbps 单声道即可）。
|
||||
|
||||
## 在代码里被引用的位置
|
||||
|
||||
- `training/hooks/useMetronome.ts` → `audio/click.mp3`
|
||||
- `training/hooks/useVoiceCoach.ts` → `voice/numbers/*.mp3`、`voice/prompts/*.mp3`
|
||||
- `training/hooks/useTrainingBgm.ts` → `bgm/*.mp3`
|
||||
|
||||
如需修改路径，修改对应 hook 文件里的常量即可。
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 微信小程序对单个文件大小有 10MB 上限，本目录所有文件加起来建议控制在 5MB 以内。
|
||||
- 小程序整包大小限制（主包 2MB / 总包 20MB），如果资源较大建议放 CDN 而非本地 static。
|
||||
- 把 `useVoiceCoach.ts` 里的 `VOICE_BASE` 改成 CDN URL 即可。
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150">
|
||||
<g fill="#e2e8f0" fill-opacity="0.92">
|
||||
<path d="M 50,30 C 38,30 28,32 24,40 C 19,50 18,60 22,70 C 26,82 26,92 28,102 C 30,122 40,140 50,140 C 60,140 70,122 72,102 C 74,92 74,82 78,70 C 82,60 81,50 76,40 C 72,32 62,30 50,30 Z"/>
|
||||
<ellipse cx="30" cy="20" rx="6.5" ry="8" transform="rotate(-18 30 20)"/>
|
||||
<ellipse cx="43" cy="11" rx="5" ry="6.8" transform="rotate(-6 43 11)"/>
|
||||
<ellipse cx="55" cy="9" rx="4.5" ry="6.2" transform="rotate(4 55 9)"/>
|
||||
<ellipse cx="66" cy="13" rx="4" ry="5.5" transform="rotate(13 66 13)"/>
|
||||
<ellipse cx="76" cy="20" rx="3.5" ry="5" transform="rotate(22 76 20)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 730 B |
Reference in New Issue
Block a user