feat: 跟练模式修改

src/page-instrument/follow-model/index.module.less

@@ -66,4 +66,22 @@
       border-radius: 50%;
       transform: rotate(-20deg);
   }
+}
+
+.operatingBtn{
+  position: fixed;
+  right: 30px;
+  bottom: 0;
+  height: var(--header-height);
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  .iconBtn{
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      & + .iconBtn{
+          margin-left: 20px;
+      }
+  }
 }

src/page-instrument/follow-model/index.tsx

@@ -6,13 +6,14 @@ import { Popup } from "vant";
 import Microphone from "./microphone";
 import state, { IPlatform } from "/src/state";
 import PcEndIcon from "../header-top/image/pc_end_icon.png"
+import { headImg } from "/src/page-instrument/header-top/image";
 
 export default defineComponent({
 	name: "follow-model",
 	setup() {
 		return () => (
 			<>
-				<Transition name="pop-center">
+				{/* <Transition name="pop-center">
 					{!followData.start && (
 						<div class={styles.startBtn} key="start">
 							<img
@@ -35,13 +36,27 @@ export default defineComponent({
 							/>
 						</div>
 					)}
-				</Transition>
-				<div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
+				</Transition> */}
+				<div class={styles.operatingBtn}>
+					{!followData.start && (
+						<img class={styles.iconBtn} src={headImg("icon_play.png")} 
+						onClick={() => {
+							handleFollowStart()
+						}} />
+						)}
+					{followData.start && (
+						<>
+						<img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={()=>handleFollowEnd()} />  
+						<img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleFollowEnd()}/> 
+						</>
+					)} 
+				</div>				
+				{/* <div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
 					<span style={{ background: "#ffca67" }} class={styles.dot}></span>
 					<span>低</span>
 					<span style={{ background: "rgb(255, 0, 0)" }} class={styles.dot}></span>
 					<span>高</span>
-				</div>
+				</div> */}
 				<Popup
 					teleport="body"
 					closeOnClickOverlay={false}

src/page-instrument/header-top/index.tsx

@@ -9,7 +9,7 @@ import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast, NoticeBar
 import Speed from "./speed";
 import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
 import Settting from "./settting";
-import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState } from "/src/state";
+import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState, refreshMusicSvg } from "/src/state";
 import { getAudioCurrentTime } from "/src/view/audio-list";
 import { followData, toggleFollow } from "/src/view/follow-practice";
 import { api_back } from "/src/helpers/communication";
@@ -78,6 +78,11 @@ export const headTopData = reactive({
       // evaluatingData.rendered = true;
       // evaluatingData.soundEffectMode = true;
     } else if (value === "follow") {
+      // 跟练模式，只有一行谱模式
+      if (!state.isSingleLine) {
+        state.isSingleLine = true
+        refreshMusicSvg()
+      }
       toggleFollow();
     }
     headTopData.modeType = "show";

src/page-instrument/header-top/settting/index.tsx

@@ -72,22 +72,26 @@ export default defineComponent({
                                 <div class={styles.timeName}>毫秒</div>    
                             </div>
                         </div>
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>切换谱面</div>
-                            <div class={styles.radioBox}>
-                                {
-                                    [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
-                                        return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
-                                            state.isSingleLine = item.value 
-                                            // resetRenderMusicScore(state.musicRenderType)
-                                            headTopData.settingMode = false
-                                            refreshMusicSvg();
-                                            // musicScoreRef.value?.refreshMusicScore()
-                                        } }>{item.name}</div>
-                                    })
-                                }
-                            </div>
-                        </div>
+                        {/** 练习模式才有单行/多行谱切换功能，跟练、评测只有单行谱模式 */}
+                        {
+                            state.modeType === 'practise' ? 
+                            <div class={styles.cellBox}>
+                                <div class={styles.tit}>切换谱面</div>
+                                <div class={styles.radioBox}>
+                                    {
+                                        [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
+                                            return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
+                                                state.isSingleLine = item.value 
+                                                // resetRenderMusicScore(state.musicRenderType)
+                                                headTopData.settingMode = false
+                                                refreshMusicSvg();
+                                                // musicScoreRef.value?.refreshMusicScore()
+                                            } }>{item.name}</div>
+                                        })
+                                    }
+                                </div>
+                            </div> : null                        
+                        }
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>转谱</div>
                             <div class={styles.radioBox}>

src/page-instrument/view-detail/index.tsx

@@ -36,6 +36,7 @@ import tickWav from "/src/assets/tick.mp3";
 import AuthorName from "../component/authorName"
 import { initSmoothAnimation } from "./smoothAnimation"
 import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
+import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 
 const DelayCheck = defineAsyncComponent(() =>
   import('/src/page-instrument/evaluat-model/delay-check')
@@ -294,7 +295,15 @@ export default defineComponent({
             container: {
               paddingBottom: detailData.headerHide ? state.fingeringInfo.height : state.fingeringInfo.scaleData?.offset
             },
-            fingerBox: detailData.headerHide ? {
+            // 横向指法，跟练&评测模式，默认展示贴底展示
+            fingerBox: (state.modeType === 'follow' || state.modeType === 'evaluating') ? 
+            {
+              height: state.fingeringInfo.height,
+              position: 'absolute',
+              bottom: 0,
+              width: '100%'
+            } : 
+            detailData.headerHide ? {
               height: state.fingeringInfo.height
             } : {
               height: state.fingeringInfo.height,