动画和逻辑修改

src/pages/detail/runtime.ts

@@ -822,16 +822,12 @@ export const setTick = (stop: () => void, speed?: number) => {
   }
 }
 
+/**设置播放状态 */
 export const setPlayState = async () => {
-  console.log('click play', detailState.activeTick, state.audiosInstance.getStatus())
   if (detailState.activeTick > -1 || state.ticking) {
     return
   }
   await syncPlayState()
-  // console.table({
-  //   playState: state.playState,
-  //   currentTime: state.currentTimeNum,
-  // })
   if (state.playState !== 'pause' && state.playState !== 'suspend') {
     await toggleState()
     return

src/subpages/colexiu/buttons/evaluating.tsx

@@ -566,20 +566,6 @@ export default defineComponent({
     return () => {
       return (
         <>
-          {/* <Button
-            v-animate
-            class={[styles.button, styles.hasText]}
-            style={{ display: detailState.frozenMode ? 'none' : '' }}
-            onClick={() => {
-              runtime.evaluatingStatus = false
-              if (playStatus.value === 'play' || playStatus.value === 'connecting') {
-                cancelTheEvaluation()
-              }
-            }}
-          >
-            <ButtonIcon name="practise" />
-            <span>练习</span>
-          </Button> */}
           {/* 评测 */}
           <Evaluating data={endResult.value} />
 

src/subpages/colexiu/buttons/index.module.less

@@ -16,6 +16,10 @@
   box-sizing: border-box;
   padding: 0 16px;
   background: #fff;
+  transition: transform .3s ease-out;
+}
+.outUp{
+  transform: translateY(-100%);
 }
 
 .moreButton {
@@ -312,7 +316,7 @@
     box-sizing: border-box;
   }
   .dialogueIcon {
-    width: 50px;
+    width: 60px;
     height: 60px;
     margin-right: 14px;
   }

src/subpages/colexiu/buttons/index.tsx

@@ -112,9 +112,7 @@ const startEvaluat = () => {
 }
 export type IModelType = 'practice' | 'evaluation' | 'follow' | 'init'
 export const modelType = ref<IModelType>('init')
-const modelWraperShow = ref(true)
 export const onChangeModelType = (type: IModelType) => {
-  modelWraperShow.value = false
   if (type === modelType.value) return
   if (type === 'evaluation') {
     RuntimeUtils.changeSpeed(detailState.activeDetail?.originalSpeed, false)
@@ -203,9 +201,10 @@ export default defineComponent({
         (detailState.activeDetail?.isAppPlay && detailState.midiPlayIniting)
       return (
         <div
+          onClick={(e: Event) => e.stopPropagation()}
           class={[
             styles.container,
-            show.value ? 'animate__animated animate__fadeInDown' : 'animate__animated animate__fadeOutUp',
+            show.value ? '' : styles.outUp,
           ]}
           style={route.query.headerHeight ? { height: '1rem', paddingTop: '0.25rem' } : ''}
         >
@@ -266,7 +265,6 @@ export default defineComponent({
                     }
                   }
                   modelType.value = 'init'
-                  modelWraperShow.value = true
                 }}
               >
                 <ButtonIcon
@@ -326,16 +324,7 @@ export default defineComponent({
                   </CellGroup>
                 </Popover>
 
-                <div style={{ display: 'none' }}>
-                  {!runtime.evaluatingStatus ? (
-                    <Button class={[styles.button, styles.hasText]} onClick={startEvaluat}>
-                      <ButtonIcon key="evaluating" name="evaluating" />
-                      <span>评测</span>
-                    </Button>
-                  ) : (
-                    <Evaluating ref={evaluatingRef} key="lianxi" />
-                  )}
-                </div>
+                <Evaluating ref={evaluatingRef} key="lianxi" />
               </>
             )}
 
@@ -489,24 +478,9 @@ export default defineComponent({
               </>
             )}
 
-            {modelType.value === 'follow' && (
-              <>
-                <Follow ref={followRef} />
-              </>
-            )}
+            
           </div>
 
-          {/* <Teleport to="body">
-            {!route.query?.modelType && modelType.value !== 'evaluation' && (
-              <div class={styles.btnMusicList} onClick={openMusicList}>
-                <ButtonIcon name="music-list1" />
-              </div>
-            )}
-          </Teleport> */}
-
-          {detailState.initRendered && !detailState.frozenMode && (
-            <ModelWraper show={modelWraperShow.value} onChangeModelType={onChangeModelType} />
-          )}
           <FloatWraper />
           <Dialog.Component
             teleport="body"

src/subpages/colexiu/buttons/model-wraper.module.less

@@ -8,11 +8,11 @@
     padding: 10px 0;
     display: flex;
     justify-content: center;
-    background: rgba(255, 255, 255, 0.7);
+    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
     img {
       width: 72px;
       height: 28px;
-      margin: 0 14px;
+      margin: 0 12px;
     }
   }
 }

src/subpages/colexiu/buttons/model-wraper.tsx

@@ -7,10 +7,6 @@ import model3 from './icons/model-3.png'
 export default defineComponent({
   name: 'modelWraper',
   props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
     onChangeModelType: {
       type: Function,
       default: () => {},
@@ -18,19 +14,13 @@ export default defineComponent({
   },
   setup(props, ctx) {
     return () => (
-      <Teleport to="body">
-        <Transition name="van-fade">
-          {props.show && (
-            <div class={styles.modelWraper}>
-              <div class={styles.wrap}>
-                <img data-step="step0" onClick={() => props.onChangeModelType!('practice')} src={model1} />
-                <img data-step="step1" onClick={() => props.onChangeModelType!('follow')} src={model3} />
-                <img data-step="step2" onClick={() => props.onChangeModelType!('evaluation')} src={model2} />
-              </div>
-            </div>
-          )}
-        </Transition>
-      </Teleport>
+      <div class={styles.modelWraper} onClick={(e: Event) => e.stopPropagation()}>
+        <div class={styles.wrap}>
+          <img data-step="step0" onClick={() => props.onChangeModelType!('practice')} src={model1} />
+          <img data-step="step1" onClick={() => props.onChangeModelType!('follow')} src={model3} />
+          <img data-step="step2" onClick={() => props.onChangeModelType!('evaluation')} src={model2} />
+        </div>
+      </div>
     )
   },
 })

src/subpages/colexiu/index.module.less

@@ -89,3 +89,15 @@
     font-size: 14px !important;
   }
 }
+.errorWrap{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/subpages/colexiu/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch, nextTick } from 'vue'
+import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch, nextTick, Transition } from 'vue'
 import MusicSheet from '/src/music-sheet'
 import store from 'store'
 // import { throttle } from 'lodash'
@@ -22,7 +22,7 @@ import {
   useActivity,
   useConfigMusicSheetFreeRate,
 } from './uses'
-import Buttons, { IModelType, modelType, onChangeModelType } from './buttons'
+import Buttons, { followRef, IModelType, modelType, onChangeModelType } from './buttons'
 import ButtonsPlayer from './buttons/player'
 import Permission from './popups/permission'
 import MusicList from './music-list'
@@ -43,9 +43,8 @@ import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import Tips from './tips'
 import AfterClassTraining from './afterClassTraining'
-
-const search = useOriginSearch()
-const browserInfo = browser()
+import ModelWraper from './buttons/model-wraper'
+import Follow from './popups/follow'
 
 // json化曲谱的note信息和svg
 export const musicJSON = reactive({
@@ -60,8 +59,11 @@ export const MusicSheetRef = ref()
 export default defineComponent({
   name: 'Colexiu',
   setup() {
+    const search = useOriginSearch()
+    const browserInfo = browser()
+    const tipShow = ref(false)
     const route = useRoute()
-    // console.log("🚀 ~ route", route.query, search)
+    console.log("🚀 ~ route", route.query, search)
     detailState.midiPlayIniting = true
     const renderLoading = ref(true)
     const renderError = ref(false)
@@ -214,14 +216,6 @@ export default defineComponent({
         }
       }
       console.timeEnd('获取数据')
-      // console.time('循环引用')
-      // if (detailState.times.length) {
-      //   for(let i = 0; i < detailState.times.length;i++){
-      //     let item = detailState.times[i]
-      //     item.measures = item.measures.map((n: any) => detailState.times.find((m: any) => m.NoteToGraphicalNoteObjectId === n.NoteToGraphicalNoteObjectId))
-      //   }
-      // }
-      // console.timeEnd('循环引用')
       console.log('🚀 ~ detailState.times', detailState.times)
 
       const songEndTime = detailState.times[detailState.times.length - 1 || 0]?.endtime || 0
@@ -253,6 +247,7 @@ export default defineComponent({
         modelType.value = 'evaluation'
       }
 
+      // 如果进来为评测模式,直接设置成评测模式
       const _modelType: IModelType = route.query.modelType as IModelType
       if (_modelType && _modelType == 'evaluation') {
         nextTick(() => {
@@ -318,7 +313,7 @@ export default defineComponent({
             browserInfo.android && 'android',
           ]}
         >
-          <Buttons class={styles.buttons} />
+          <Transition name="van-slide-down">{!renderLoading.value && <Buttons class={styles.buttons} />}</Transition>
           <div
             id="colexiu-detail-music-sheet"
             class={[styles.musicSheet, { evaluating: runtime.evaluatingStatus || modelType.value === 'follow' }]}
@@ -333,10 +328,13 @@ export default defineComponent({
                 : '',
             }}
           >
-            <div style={{width: !renderLoading.value ? musicSheetStyle.width : ''}} class={styles.headTitle}>{detail.value.musicSheetName}</div>
+            {!!detail.value.musicSheetName && (
+              <div style={{ width: !renderLoading.value ? musicSheetStyle.width : '' }} class={styles.headTitle}>
+                {detail.value.musicSheetName}
+              </div>
+            )}
             <Skeleton class={styles.skeleton} rowWidth="80%" title loading={detailStatus.value === 'loading'} />
-            <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value && !error} />
-            {error && <Empty />}
+            <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value} />
             {score.value && fingeringInited && (
               <>
                 <MusicSheet
@@ -380,8 +378,9 @@ export default defineComponent({
                 )}
               </>
             )}
+            {modelType.value === 'follow' && <Follow ref={followRef} />}
           </div>
-          {!loading && !error && <ButtonsPlayer />}
+          {!renderLoading.value && <ButtonsPlayer />}
           {/* 节拍器弹窗 */}
           <TickPopup score={score.value} />
           <Permission />
@@ -393,10 +392,30 @@ export default defineComponent({
           <MusicList />
           {/* 保存json */}
           <ProductJson ref={productRef} />
-          {/* 引导 */}
-          <Tips />
+
           {/* 后台课后训练小节选择 */}
           <AfterClassTraining />
+
+          {/* 模式选择 */}
+          <Transition
+            name="van-slide-up"
+            onAfterEnter={() => {
+              tipShow.value = true
+              console.log('2342')
+            }}
+          >
+            {!renderLoading.value && modelType.value == 'init' && <ModelWraper onChangeModelType={onChangeModelType} />}
+          </Transition>
+
+          {/* 引导 */}
+          {tipShow.value && <Tips />}
+
+          {/* 加载错误 */}
+          {error && (
+            <div class={styles.errorWrap}>
+              <Empty />
+            </div>
+          )}
         </div>
       )
     }

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

@@ -7,11 +7,11 @@
 }
 .follow {
   position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
   top: 0;
-  z-index: 1000;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
 }
 .title {
   margin-top: 40px;

src/subpages/colexiu/router.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw, createWebHistory } from 'vue-router'
+import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
   {

src/subpages/colexiu/tips/index.tsx

@@ -11,40 +11,35 @@ import { useRoute } from 'vue-router'
 export default defineComponent({
   name: 'tips-step',
   setup(props, ctx) {
-    const route = useRoute()
-    const _modelType = route.query.modelType
     const tipShow = ref(false)
     const guide = reactive({
       tip1: false,
       tip2: false,
     })
-    watch(
-      () => state.initRendered,
-      () => {
-        if (_modelType) return
-        const isFirstTip = localStorage.getItem('isFirstTip')
-        if (state.initRendered && modelType.value === 'init' && !isFirstTip) {
-          tipShow.value = true
-          guide.tip1 = true
-          guide.tip2 = false
-          console.log('首次渲染结束')
-        }
-      }
-    )
     watch(modelType, () => {
-      if (_modelType) return
-      console.log(modelType.value)
+      if (modelType.value !== 'practice') return
+      handleChange()
+    })
+    const setLocalData = (key: string) => {
+      localStorage.setItem(key, 'ok')
+    }
+    /** 触发器 */
+    const handleChange = () => {
+      const isFirstTip = localStorage.getItem('isFirstTip')
       const isFirstModel = localStorage.getItem('isFirstModel')
-      if (state.initRendered && modelType.value === 'practice' && !isFirstModel) {
+      if (modelType.value == 'init' && !isFirstTip) {
+        tipShow.value = true
+        guide.tip1 = true
+        guide.tip2 = false
+      } else if (modelType.value == 'practice' && !isFirstModel) {
         tipShow.value = true
         guide.tip1 = false
         guide.tip2 = true
-        console.log('模式更改')
       }
-    })
-    const setLocalData = (key: string) => {
-      localStorage.setItem(key, 'ok')
     }
+    onMounted(() => {
+      handleChange()
+    })
     return () => (
       <Popup teleport="body" closeOnClickOverlay={false} class={styles.tipsContainer} v-model:show={tipShow.value}>
         {guide.tip1 && (

src/subpages/colexiu/tips/tip1.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
         data.rect = eleRect || {}
         parentElement.appendChild(eleNode)
         contentRef.value?.append(parentElement)
-        console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
+        // console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
       }
     }
 

src/subpages/colexiu/tips/tip2.tsx

@@ -132,7 +132,7 @@ export default defineComponent({
         } || {}
         parentElement.appendChild(eleNode)
         contentRef.value?.append(parentElement)
-        console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
+        // console.log('🚀 ~ eleRect', contentRef.value, eleRect, `[data-step='step${data.step}']`)
       }
     }
 

src/subpages/colexiu/uses/use-app.ts

@@ -151,6 +151,7 @@ export const useDetail = (id: number | string): [Ref<ShaeetStatusType>, Ref<Musi
         ...res.data,
         code: Array.isArray(res?.data?.background) && res.data.background.length ? getSubjectIdCode(res.data.background[0].musicSubject) : ''
       }
+      // notation: 是能转简谱 0: 不可以,需要设置成五线谱模式
       if (data.value.notation == 0) {
         SettingState.sett.type = 'staff'
       }

src/subpages/colexiu/uses/use-menu.ts

@@ -21,7 +21,7 @@ export const useMenu = () => {
       }
       show.value = !show.value
     },
-    { target: document.body.querySelector('#app') as HTMLElement }
+    { target: document.body.querySelector('#colexiu-detail-music-sheet') as HTMLElement }
   )
 
   watch(