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