From e5d0d7db930f46750511c0a6384d0630258e5ef7 Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 11:18:30 +0800
Subject: [PATCH] =?UTF-8?q?style(training/metronome):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=AD=E5=A4=AE=E5=9C=86=20UI,=E7=A7=BB=E9=99=A4=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E6=8B=8D=E7=82=B9=E6=8C=87=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除顶部 .beat-bar 4 个圆点指示器,界面更简洁
- 中央圆按钮重新设计:
  · "速度"标签下方居中放置纯 CSS 几何绘制的大 ▶/⏸ 图标
    (icon-play 70rpx 三角形 / icon-pause 22rpx×84rpx 双竖条),
    跨机型一致、不再依赖 emoji 字符
  · 移除"开始/暂停"文字 + 药丸样式背景,保留 icon 即可识别
  · 圆心使用更深的渐变和内/外阴影,质感更立体
  · 增加第二层 ring 错相 0.4 周期播放,呼吸感更连续
- 状态提示文案调整:"点击" → "轻点"
- 顶部 padding 收紧 60rpx → 20rpx,圆体上下居中更平衡

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 uniapp/src/pages/training/metronome.vue | 164 +++++++++++-------------
 1 file changed, 77 insertions(+), 87 deletions(-)

diff --git a/uniapp/src/pages/training/metronome.vue b/uniapp/src/pages/training/metronome.vue
index 9c4d864a..0e795eb3 100644
--- a/uniapp/src/pages/training/metronome.vue
+++ b/uniapp/src/pages/training/metronome.vue
@@ -1,23 +1,16 @@
 <template>
     <view class="metronome-page">
-        <view class="beat-bar">
-            <view
-                v-for="i in accentEvery"
-                :key="i"
-                class="beat-dot"
-                :class="{
-                    accent: i === 1,
-                    active: ((beatIndex - 1) % accentEvery) + 1 === i && isPlaying,
-                }"
-            />
-        </view>
-
         <view class="pulse-stage" @click="togglePlay">
             <view
                 class="pulse-ring"
                 :class="{ playing: isPlaying }"
                 :style="ringStyle"
             />
+            <view
+                class="pulse-ring pulse-ring-2"
+                :class="{ playing: isPlaying }"
+                :style="ringStyle"
+            />
             <view
                 class="pulse-core"
                 :class="{ playing: isPlaying, accent: isAccent }"
@@ -25,9 +18,12 @@
             >
                 <text class="bpm-num">{{ bpm }}</text>
                 <text class="bpm-label">速度</text>
-                <view class="play-state">
-                    <text class="play-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
-                    <text class="play-text">{{ isPlaying ? '暂停' : '开始' }}</text>
+                <view class="ctrl-icon">
+                    <view v-if="isPlaying" class="icon-pause">
+                        <view class="bar" />
+                        <view class="bar" />
+                    </view>
+                    <view v-else class="icon-play" />
                 </view>
             </view>
         </view>
@@ -126,9 +122,11 @@ const coreStyle = computed(() => ({
 }))
 
 const statusHint = computed(() => {
-    if (isPlaying.value)
-        return `第 ${((beatIndex.value - 1) % accentEvery.value) + 1} 拍 / 共 ${accentEvery.value} 拍`
-    return '点击中间圆圈开始'
+    if (isPlaying.value) {
+        const cur = ((beatIndex.value - 1) % accentEvery.value) + 1
+        return `第 ${cur} 拍 / 共 ${accentEvery.value} 拍`
+    }
+    return '轻点圆圈开始'
 })
 
 onShow(() => {
@@ -150,7 +148,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .metronome-page {
     min-height: 100vh;
-    padding: 60rpx 32rpx 80rpx;
+    padding: 20rpx 32rpx 80rpx;
     background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
     display: flex;
     flex-direction: column;
@@ -158,50 +156,18 @@ onUnmounted(() => {
     color: #f1f5f9;
 }
 
-/* ===== 拍点指示 ===== */
-.beat-bar {
-    display: flex;
-    gap: 28rpx;
-    margin-bottom: 60rpx;
-    height: 40rpx;
-    align-items: center;
-
-    .beat-dot {
-        width: 28rpx;
-        height: 28rpx;
-        border-radius: 50%;
-        background: #334155;
-        transition: all 0.12s;
-
-        &.accent {
-            background: #475569;
-        }
-
-        &.active {
-            background: #22c55e;
-            transform: scale(1.6);
-            box-shadow: 0 0 24rpx #22c55e;
-
-            &.accent {
-                background: #f59e0b;
-                box-shadow: 0 0 28rpx #f59e0b;
-            }
-        }
-    }
-}
-
 /* ===== 中心可点击圆 ===== */
 .pulse-stage {
     position: relative;
-    width: 560rpx;
-    height: 560rpx;
-    margin-bottom: 60rpx;
+    width: 600rpx;
+    height: 600rpx;
+    margin: 40rpx 0 50rpx;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &:active .pulse-core {
-        transform: scale(0.96);
+        transform: scale(0.97);
     }
 }
 
@@ -210,20 +176,25 @@ onUnmounted(() => {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: 6rpx solid rgba(34, 197, 94, 0.2);
+    border: 4rpx solid rgba(34, 197, 94, 0.18);
+    pointer-events: none;
 
     &.playing {
         animation: ring-pulse var(--beat-duration, 750ms) ease-out infinite;
     }
+
+    &.pulse-ring-2 {
+        animation-delay: calc(var(--beat-duration, 750ms) * -0.4);
+    }
 }
 @keyframes ring-pulse {
     0% {
-        transform: scale(0.95);
-        opacity: 1;
-        border-color: rgba(34, 197, 94, 0.6);
+        transform: scale(0.92);
+        opacity: 0.9;
+        border-color: rgba(34, 197, 94, 0.55);
     }
     100% {
-        transform: scale(1.12);
+        transform: scale(1.18);
         opacity: 0;
         border-color: rgba(34, 197, 94, 0);
     }
@@ -234,57 +205,76 @@ onUnmounted(() => {
     width: 460rpx;
     height: 460rpx;
     border-radius: 50%;
-    background: linear-gradient(135deg, #22c55e, #16a34a);
+    background: linear-gradient(140deg, #22c55e 0%, #15803d 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 16rpx 48rpx rgba(34, 197, 94, 0.4);
-    transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
+    box-shadow:
+        inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
+        inset 0 20rpx 60rpx rgba(255, 255, 255, 0.12),
+        0 24rpx 60rpx rgba(34, 197, 94, 0.45);
+    transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
 
     &.playing {
         animation: core-beat var(--beat-duration, 750ms) ease-in-out infinite;
     }
 
     &.playing.accent {
-        background: linear-gradient(135deg, #f59e0b, #d97706);
-        box-shadow: 0 16rpx 48rpx rgba(245, 158, 11, 0.45);
+        background: linear-gradient(140deg, #fbbf24 0%, #b45309 100%);
+        box-shadow:
+            inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
+            inset 0 20rpx 60rpx rgba(255, 255, 255, 0.18),
+            0 24rpx 60rpx rgba(245, 158, 11, 0.5);
     }
 
     .bpm-num {
         font-size: 200rpx;
-        font-weight: 700;
+        font-weight: 800;
         color: #fff;
         line-height: 1;
         font-variant-numeric: tabular-nums;
+        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.18);
     }
 
     .bpm-label {
-        font-size: 30rpx;
-        color: rgba(255, 255, 255, 0.85);
-        letter-spacing: 6rpx;
-        margin-top: 12rpx;
+        font-size: 28rpx;
+        color: rgba(255, 255, 255, 0.7);
+        letter-spacing: 8rpx;
+        margin-top: 8rpx;
     }
 
-    .play-state {
-        position: absolute;
-        bottom: 60rpx;
+    /* ===== 中央播放/暂停 icon（CSS 几何绘制，跨机型一致） ===== */
+    .ctrl-icon {
+        margin-top: 36rpx;
+        width: 110rpx;
+        height: 90rpx;
         display: flex;
         align-items: center;
-        gap: 12rpx;
-        padding: 12rpx 28rpx;
-        background: rgba(255, 255, 255, 0.18);
-        border-radius: 40rpx;
+        justify-content: center;
+    }
 
-        .play-icon {
-            font-size: 32rpx;
-            color: #fff;
-            line-height: 1;
-        }
-        .play-text {
-            font-size: 28rpx;
-            color: #fff;
-            font-weight: 500;
+    .icon-play {
+        width: 0;
+        height: 0;
+        border-left: 70rpx solid #fff;
+        border-top: 44rpx solid transparent;
+        border-bottom: 44rpx solid transparent;
+        margin-left: 16rpx;
+        filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.2));
+    }
+
+    .icon-pause {
+        display: flex;
+        gap: 22rpx;
+        height: 84rpx;
+
+        .bar {
+            width: 22rpx;
+            height: 100%;
+            background: #fff;
+            border-radius: 6rpx;
+            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
         }
     }
 }
@@ -294,7 +284,7 @@ onUnmounted(() => {
         transform: scale(1);
     }
     50% {
-        transform: scale(1.05);
+        transform: scale(1.045);
     }
 }