更新

src/views/tempo-practice/index.module.less

@@ -62,12 +62,12 @@
 
     &:nth-child(2n + 1) {
       justify-content: flex-end;
-      padding-right: 16px;
+      padding-right: 12px;
     }
 
     &:nth-child(2n + 2) {
       justify-content: flex-start;
-      padding-left: 16px;
+      padding-left: 12px;
     }
 
     .beat {
@@ -75,6 +75,7 @@
       width: 65px;
       height: 86px;
       cursor: pointer;
+      margin: 0 7px;
 
       &::before,
       &::after {

src/views/tempo-practice/index.tsx

@@ -60,12 +60,12 @@ export default defineComponent({
           await handleStartBeat();
         }
       } else {
-        handleStopPlay();
+        handleStop();
       }
     };
     /** 播放类型 */
     const handlePlayType = () => {
-      handleStopPlay();
+      handleStop();
       if (setting.playType === 'beat') {
         setting.playType = 'tempo';
       } else {
@@ -73,7 +73,7 @@ export default defineComponent({
       }
     };
 
-    const handleStopPlay = () => {
+    const handleStop = () => {
       setting.playState = 'pause';
       if (setting.playType === 'beat') {
         hendleEndTick();
@@ -150,7 +150,7 @@ export default defineComponent({
             class={styles.randomTempo}
             onClick={() => {
               renderScore();
-              handleStopPlay();
+              handleStop();
             }}>
             <img src={randDom} />
           </div>
@@ -162,7 +162,7 @@ export default defineComponent({
               onClick={() => {
                 if (setting.speed <= 40) return;
                 setting.speed -= 1;
-                handleStopPlay();
+                handleStop();
               }}
             />
             <Popover
@@ -179,7 +179,7 @@ export default defineComponent({
                     item.color = '#060606';
                   }
                 });
-                handleStopPlay();
+                handleStop();
               }}>
               {{
                 reference: () => (
@@ -194,7 +194,7 @@ export default defineComponent({
               onClick={() => {
                 if (setting.speed >= 200) return;
                 setting.speed += 1;
-                handleStopPlay();
+                handleStop();
               }}
             />
           </div>

src/views/tempo-practice/setting.ts

@@ -9,7 +9,7 @@ export const setting = reactive({
   tempo: ['1', '2', '3'] as any[], // 节奏形筛选
   scorePart: [] as any, // 生成谱面
   playState: 'pause' as 'pause' | 'play',
-  playType: 'tempo' as 'beat' | 'tempo',
+  playType: 'beat' as 'beat' | 'tempo',
   speed: 60 // 默认速度
 });
 

src/views/tempo-practice/tick.ts

@@ -97,18 +97,20 @@ export const handleStartTick = async () => {
   tickData.beatLengthInMilliseconds = (60 / setting.speed) * 1000;
   let startTime = +new Date();
   // const allTick: any = [];
+  console.log(setting.scorePart, tickData.len);
   for (let i = 0; i < setting.scorePart.length; i++) {
     if (tickData.tickEnd) return false;
-    for (let j = 0; j < tickData.len; j++) {
+    const temp = setting.scorePart[i];
+    for (let j = 0; j < temp.length; j++) {
       // 提前结束, 直接放回false
       if (tickData.tickEnd) return false;
       const source =
         j === 0
           ? tickData.source1
-          : j === tickData.len
+          : j === temp.length
           ? null
           : tickData.source2;
-      // console.log(j, 'source');
+      console.log(j, 'source');
       await handlePlay(j, source);
       initSelectScorePart(i, j);
     }