节奏律动模式修改

src/view/rhythm/index copy.tsx

@@ -0,0 +1,64 @@
+import { computed, defineComponent, onBeforeMount, ref } from "vue"
+import styles from "./index.module.less"
+import state from "/src/state"
+import { headTopData } from "/src/page-instrument/header-top"
+
+export default defineComponent({
+   name: "rhythm",
+   setup(props, { emit, expose }) {
+      type rhythmData = {
+         isDot: boolean
+         denominator: number
+         isRestFlag: boolean
+         rhythmImg: string
+      }
+      const rhythmImgObj: Record<string, any> = {
+         "1/1": "1",
+         "1/2": "2",
+         "1/4": "3",
+         "1/8": "4",
+         "1/16": "5",
+         "1/32": "6",
+         "1/1.": "1",
+         "1/2.": "2",
+         "1/4.": "3",
+         "1/8.": "4",
+         "1/16.": "5",
+         "1/32.": "6",
+         rest: "7"
+      }
+      const rhythmData = ref<rhythmData[]>([])
+      const actRhythmData = computed<rhythmData[]>(() => {
+         return rhythmData.value.slice(state.activeNoteIndex, state.activeNoteIndex + 7)
+      })
+      function initRhythmData() {
+         rhythmData.value = state.times.map(item => {
+            const noteElement = item.noteElement
+            const isDot = !!noteElement?.DotsXml
+            const denominator = noteElement?.typeLength?.denominator || 4
+            const isRestFlag = !!noteElement?.isRestFlag
+            return {
+               isDot,
+               denominator,
+               isRestFlag,
+               rhythmImg: isRestFlag ? "rest" : `1/${denominator}${isDot ? "." : ""}`
+            }
+         })
+      }
+      initRhythmData()
+      return () => {
+         return (
+            <>
+               <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
+                  <div class={styles.titImg}></div>
+                  <div class={styles.rhythmBox}>
+                     {actRhythmData.value.map(item => {
+                        return <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[item.rhythmImg]}`]]}></div>
+                     })}
+                  </div>
+               </div>
+            </>
+         )
+      }
+   }
+})

src/view/rhythm/index.module.less

@@ -29,6 +29,9 @@
             background-repeat: no-repeat;
             background-position: center;
             margin-right: 14px;
+            &.active{
+                outline: 2px solid #36A8FF; 
+            }
             &:first-child{
                 width: 74px;
                 height: 74px;

src/view/rhythm/index.tsx

@@ -27,12 +27,12 @@ export default defineComponent({
          "1/32.": "6",
          rest: "7"
       }
-      const rhythmData = ref<rhythmData[]>([])
+      const rhythmData = ref<rhythmData[][]>([])
       const actRhythmData = computed<rhythmData[]>(() => {
-         return rhythmData.value.slice(state.activeNoteIndex, state.activeNoteIndex + 7)
+         return rhythmData.value[Math.floor(state.activeNoteIndex / 6)]
       })
       function initRhythmData() {
-         rhythmData.value = state.times.map(item => {
+         const rhythmArr = state.times.map(item => {
             const noteElement = item.noteElement
             const isDot = !!noteElement?.DotsXml
             const denominator = noteElement?.typeLength?.denominator || 4
@@ -44,6 +44,17 @@ export default defineComponent({
                rhythmImg: isRestFlag ? "rest" : `1/${denominator}${isDot ? "." : ""}`
             }
          })
+         rhythmData.value = splitArrayWithReduce(rhythmArr, 6)
+      }
+      function splitArrayWithReduce(arr: any[], chunkSize: number) {
+         return arr.reduce((result, item, index) => {
+            const chunkIndex = Math.floor(index / chunkSize)
+            if (!result[chunkIndex]) {
+               result[chunkIndex] = [] // 初始化一个新组
+            }
+            result[chunkIndex].push(item)
+            return result
+         }, [])
       }
       initRhythmData()
       return () => {
@@ -52,8 +63,17 @@ export default defineComponent({
                <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
                   <div class={styles.titImg}></div>
                   <div class={styles.rhythmBox}>
-                     {actRhythmData.value.map(item => {
-                        return <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[item.rhythmImg]}`]]}></div>
+                     <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}></div>
+                     {actRhythmData.value.map((item, index) => {
+                        return (
+                           <div
+                              class={[
+                                 styles.rhythmImg,
+                                 styles[`rhythm${rhythmImgObj[item.rhythmImg]}`],
+                                 state.activeNoteIndex % 6 === index && styles.active
+                              ]}
+                           ></div>
+                        )
                      })}
                   </div>
                </div>