feat: 跟练模式优化

src/subpages/colexiu/buttons/evaluating.tsx

@@ -309,7 +309,7 @@ const getEvaluationCriteria = () => {
  * @param num 频率
  * @returns 转化后频率
  */
-const formatPitch = (num?: number): number => {
+export const formatPitch = (num?: number): number => {
   if (!num) {
     return -1
   }

src/subpages/colexiu/popups/follow/index.module.less

@@ -4,6 +4,18 @@
       fill: green;
     }
   }
+  .follow-down{
+    .vf-note path{
+      fill:#ffca67 !important;
+      stroke: #ffca67 !important;
+    }
+  }
+  .follow-up{
+    .vf-note path{
+      fill:rgb(255, 0, 0) !important;
+      stroke: rgb(255, 0, 0) !important;
+    }
+  }  
 }
 .follow {
   position: fixed;

src/subpages/colexiu/popups/follow/index.tsx

@@ -11,6 +11,8 @@ import state, { refreshView, setCurrentTime } from '/src/pages/detail/runtime'
 import detailState from '/src/pages/detail/state'
 import iconFollwBtn from './icons/icon-follwBtn.png'
 import { unitTestData } from '/src/subpages/colexiu/unitTest/index'
+import { formatPitch } from '/src/subpages/colexiu/buttons/evaluating'
+
 // 显示或隐藏播放按钮
 const togglePlayer = (show: boolean = false) => {
   let globalPlayer: HTMLElement = document.querySelector('#globalPlayer')!
@@ -147,6 +149,8 @@ const getNoteIndex = (): any => {
     id: item.id,
     min: item.frequency - (item.frequency - item.noteElement.pitch.prevFrequency) * 0.1,
     max: item.frequency + (item.noteElement.pitch.nextFrequency - item.frequency) * 0.1,
+    duration: item.duration,
+    baseFrequency: formatPitch(item.noteElement.pitch.frequency),
   }
 }
 let checking = false
@@ -172,25 +176,30 @@ const checked = () => {
       next()
       data.index += 1
       data.list = data.list.slice(i + 1)
-      setColor(item, true)
+      setColor(item, '', true)
       checking = false
       return
     }
   }
-  setColor(item)
+  setColor(item, audioFrequency.value > item.baseFrequency ? 'follow-up' : 'follow-down')
   checking = false
 }
-const setColor = (item: any, isRight = false) => {
+
+const setColor = (item: any, state: 'follow-up' | 'follow-down' | '', isRight = false) => {
   const note: HTMLElement = document.querySelector(`div[data-vf=vf${item.id}]`)!
   if (note) {
+    note.classList.remove('follow-up', 'follow-down', 'follow-error', 'follow-success')
     if (isRight) {
-      note.classList.remove('follow-error')
       note.classList.add('follow-success')
     } else {
-      note.classList.remove('follow-success')
-      note.classList.add('follow-error')
+      note.classList.add('follow-error', state)
     }
   }
+  const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!
+  if (_note) {
+    _note.classList.remove('follow-up', 'follow-down')
+    state && _note.classList.add(state)
+  }
 }
 
 export default defineComponent({