缓存逻辑修改

src/music-sheet/index.tsx

@@ -11,6 +11,7 @@ import { Toast } from 'vant'
 import axios from 'umi-request'
 import { Cursor } from '../helpers/cursor'
 import { formatZoom } from '../helpers/utils'
+import { musicInfo } from '../subpages/colexiu/state'
 
 export type onRerenderType = (osmd?: OpenSheetMusicDisplay | null) => void
 
@@ -154,38 +155,18 @@ export default defineComponent({
 
     onMounted(async () => {
       if (rendered.value) return
-      // console.log( SettingState.sett.keySignature, detailState.activeDetail)
-      if (
-        (SettingState.sett.type === 'staff' && !detailState?.activeDetail?.musicSvg) || // 没有五线谱缓存数据
-        (SettingState.sett.type === 'jianpu' &&
-          SettingState.sett.keySignature &&
-          !detailState?.activeDetail?.musicFirstSvg) || // 没有固定调缓存数据
-        (SettingState.sett.type === 'jianpu' &&
-          !SettingState.sett.keySignature &&
-          !detailState?.activeDetail?.musicJianSvg) // 没有首调缓存数据
-      ) {
+      if (!musicInfo.musicSvg || props.isSoundEffect) {
         setOsdm()
         return
       }
-      try {
-        if (SettingState.sett.type === 'staff' && detailState.activeDetail?.musicSvg) {
-          renderData.value = JSON.parse(detailState.activeDetail.musicSvg)
-        } else {
-          if (SettingState.sett.keySignature && detailState.activeDetail?.musicFirstSvg) {
-            //固定调
-            renderData.value = JSON.parse(detailState.activeDetail.musicFirstSvg)
-          } else {
-            // 首调
-            if (detailState.activeDetail?.musicJianSvg) {
-              renderData.value = JSON.parse(detailState.activeDetail.musicJianSvg)
-            }
-          }
-        }
-      } catch (error) {
-        console.error(error)
-        detailState.renderType = 'native'
+      if (SettingState.sett.type === 'staff') {
+        renderData.value = musicInfo.musicSvg?.staff
+      } else {
+        //是否固定调
+        renderData.value = SettingState.sett.keySignature ? musicInfo.musicSvg?.fixed : musicInfo.musicSvg?.first
       }
-      if (renderData.value && !props.isSoundEffect) {
+      // console.log("🚀 ~ renderData:", renderData)
+      if (renderData.value && renderData.value.json) {
         productJsonAndSvg(renderData.value)
       } else {
         setOsdm()
@@ -205,7 +186,7 @@ export default defineComponent({
             await useOsmdLoader(osmd.value, score.value)
             emit('rerender', osmd.value)
             event.emit('loaded')
-            resetFormate()
+            // resetFormate()
           } catch (error) {
             console.error(error)
             emit('renderError')
@@ -233,7 +214,7 @@ export default defineComponent({
             await useOsmdLoader(osmd.value, renderScore)
             emit('rerender', osmd.value)
             event.emit('loaded')
-            resetFormate()
+            // resetFormate()
           } catch (error) {
             console.error(error)
             emit('renderError')
@@ -251,10 +232,6 @@ export default defineComponent({
         }
         productJsonAndSvg(renderData.value)
       }
-      console.log(renderData.value)
-      // if (detailState.renderType == 'cache'){
-      //   detailState.times = getNotePosition(detailState.times)
-      // }
     }
 
     const resetFormate = () => {
@@ -625,11 +602,7 @@ export default defineComponent({
 
     return () => {
       return (
-        <div
-          id="svgContainer"
-          class={styles.container}
-          style={{ position: 'relative' }}
-        >
+        <div id="svgContainer" class={styles.container} style={{ position: 'relative' }}>
           <div ref={container}></div>
           {/* 小节覆盖层 */}
           {props.showSection && (

src/music-sheet/uses.ts

@@ -61,7 +61,6 @@ export const useOsmd = (
 
 export const useOsmdLoader = async (osmd: OpenSheetMusicDisplay, score: string) => {
   if (!score) throw 'score is required'
-  const hint = Toast('加载中，请稍后...')
   try {
     if (score && osmd) {
       await osmd.load(score)
@@ -69,5 +68,4 @@ export const useOsmdLoader = async (osmd: OpenSheetMusicDisplay, score: string)
       await osmd.render()
     }
   } catch (error) {}
-  hint.close()
 }

src/pages/detail/helpers.ts

@@ -450,7 +450,7 @@ export const getAllNodes = (osmd: any) => {
           // 如果是弱起就补齐缺省的时长
           if (i === 0) {
             const diff = getMeasureDurationDiff(iterator.currentMeasure)
-            console.log('diff', diff)
+            // console.log('diff', diff)
             // 酷乐秀 不处理弱起
             if (diff > 0) {
               difftime = diff * vDenominator * (60 / beatSpeed)

src/subpages/colexiu/fingering/format-id.ts

@@ -1,6 +1,6 @@
-export type ObjectType = { [key in string]: string | number }
+export type ObjectType = { [key in string]: any }
 
-// 酷乐秀 指法映射
+//指法映射
 export const formatdata: ObjectType = {
   Flute: 2,
   Clarinet: 4,
@@ -22,23 +22,19 @@ export const formatdata: ObjectType = {
   Piano: 150,
 }
 
+/**
+ * 管乐团声部映射指法声部code
+ */
 export const subjectTypes: ObjectType = {
+  '1': 'SmallDrum',
   '2': 'Flute',
+  '3': 'Saxophone',
   '4': 'Clarinet',
-  '14': 'Trombone',
-  '17': 'Tuba',
-  '12': 'Trumpet',
-  '13': 'Horn',
-  '6': 'AltoSaxophone',
-  '15': 'UpBassHorn',
-  '137': 'Melodica',
-  '136': 'HulusiFlute',
-  '135': 'PanFlute',
-  '134': 'Ocarina',
-  '120': 'Recorder',
-  '130': 'Ukulele',
-  '140': 'Mouthorgan',
-  '150': 'Piano',
+  '5': 'Trumpet',
+  '6': 'Trombone',
+  '7': 'Horn',
+  '8': 'UpBassHorn',
+  '9': 'Tuba',
 }
 export const getSubjectIdCode = (subjectId: string) => {
   return subjectTypes[subjectId] || ''

src/subpages/colexiu/index.tsx

@@ -36,7 +36,7 @@ import { browser } from '/src/helpers/utils'
 import { postMessage } from '/src/helpers/native-message'
 import { svgtopng } from './helpers'
 import { restPromptMain } from '/src/helpers/restPrompt'
-import ProductJson from './popups/productJson'
+import ProductJson, { getHasCache } from './popups/productJson'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import Tips from './tips'
@@ -45,6 +45,7 @@ import ModelWraper from './buttons/model-wraper'
 import Follow from './popups/follow'
 import UnitTest from './unitTest'
 import { renderError } from './App'
+import { musicInfo } from './state'
 
 // json化曲谱的note信息和svg
 export const musicJSON = reactive({
@@ -131,7 +132,6 @@ export default defineComponent({
     }
 
     const settingFingeringChange = throttle(() => {
-      // console.log('settingFingeringChange')
       const { direction } = fingeringDetail.value as ITypeContentItem
       if (direction === 'vertical') {
         // Toast('加载中，请稍后...')
@@ -147,10 +147,6 @@ export default defineComponent({
 
     useSuspendPlay()
 
-    //需要生成缓存数据的条件
-    const isProductJson = ref(false)
-    const productRef = ref()
-
     /**结束全屏动画 */
     const endFullLoading = () => {
       // @ts-ignore
@@ -164,6 +160,8 @@ export default defineComponent({
       })
     }
 
+    const productRef = ref()
+
     /** 当渲染完成后的回调 */
     const onRerender = async (osmd: OpenSheetMusicDisplay) => {
       endFullLoading()
@@ -174,7 +172,7 @@ export default defineComponent({
       //@ts-ignore
       const saveSpeed = (store.get('speeds') || {})[search.id]
       const bpm = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM
-      
+
       detailState.activeSpeed = saveSpeed || detail.value.playSpeed || bpm || 100
       detailState.baseSpeed = detail.value.playSpeed || bpm || 100
       detailState.code = detail.value?.code || ''
@@ -182,16 +180,11 @@ export default defineComponent({
       if (detailState.renderType === 'native') {
         detailState.times = getAllNodes(osmd)
       }
-      isProductJson.value =
-        search.modeType === 'json' ||
-        !detailState.activeDetail?.musicSvg ||
-        !detailState.activeDetail?.musicJianSvg ||
-        !detailState.activeDetail?.musicFirstSvg
-      if (isProductJson.value) {
+      if (search.modeType === 'json' || getHasCache()) {
         const { numerator, denominator } = getDuration(osmd)
         try {
           musicJSON.json = JSON.stringify({
-            musicId: detailState.activeDetail.id,
+            musicId: musicInfo.musicId,
             musicSheetName: encodeURIComponent(detailState.activeDetail.musicSheetName),
             osmd: {
               product: true,
@@ -202,14 +195,13 @@ export default defineComponent({
             },
             times: detailState.times,
           })
-          // console.log('生成缓存数据', musicJSON)
+          console.log('生成缓存数据', musicJSON)
           musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
           nextTick(() => {
             musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
             musicJSON.rended = true
             productRef.value?.autoProduct()
           })
-          // console.log("🚀 ~ detailState.times", document.getElementById('osmdSvgPage1'))
         } catch (error) {
           console.log(error)
         }
@@ -273,6 +265,16 @@ export default defineComponent({
       renderLoading.value = false
     }
 
+    /** 是否评测模式,并且有指法监听变化 */
+    watch(() => runtime.evaluatingStatus, () => {
+      // 指法开启的时候
+      if (SettingState.sett.fingering) {
+        nextTick(() => {
+          MusicSheetRef.value.reRender()
+        })
+      }
+    })
+
     return () => {
       const loading = renderLoading.value || detailStatus.value === 'loading'
       const error = renderError.value || detailStatus.value === 'error'
@@ -286,7 +288,7 @@ export default defineComponent({
       const calcLeft = paddingLeft || '0px'
       const isVertical = direction === 'vertical'
       const calcRightWidth = direction === 'vertical' ? '20px' : '0px'
-      const needFingering = fingeringStatus.value === 'show' && SettingState.sett.fingering //&& !runtime.evaluatingStatus
+      const needFingering = fingeringStatus.value === 'show' && SettingState.sett.fingering && !runtime.evaluatingStatus
       const needFingeringWidth = direction === 'vertical' && needFingering
       const musicSheetStyle = {
         ...(isVertical && { margin: 'auto', marginRight: 0 }),

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

@@ -7,6 +7,20 @@ import request from '/src/helpers/request'
 import detailState from '/src/pages/detail/state'
 import axios from 'umi-request'
 import { useClientType, useOriginSearch } from '../../uses'
+import { musicInfo } from '../../state'
+
+/**检测是否需要生成缓存数据 */
+export const getHasCache = () => {
+  let isProduction = false
+  // 是否有五线谱的缓存
+  if (SettingState.sett.type === 'staff') {
+    isProduction = !musicInfo.musicSvg?.staff
+  } else {
+    //是否有固定调和首调的缓存
+    isProduction = SettingState.sett.keySignature ? !musicInfo.musicSvg?.fixed : !musicInfo.musicSvg?.first
+  }
+  return isProduction
+}
 export default defineComponent({
   name: 'productJson',
   setup(props, { expose }) {
@@ -20,25 +34,17 @@ export default defineComponent({
       if (!musicData.svg) {
         return
       }
-      if (SettingState.sett.type === 'staff') {
-        if (!detailState.activeDetail?.musicSvg) {
-          handleSave(false)
-        }
-      } else {
-        if (
-          (SettingState.sett.keySignature && !detailState.activeDetail?.musicFirstSvg) ||
-          (!SettingState.sett.keySignature && !detailState.activeDetail?.musicJianSvg)
-        ) {
-          handleSave(false)
-        }
-      }
+      handleSave(false)
     }
     expose({
       autoProduct,
     })
     //清空数据
     const handleRemove = async () => {
-      await handleUpdate({}, true)
+      await handleUpdate({
+        id: musicInfo.id,
+        musicSvg: '',
+      })
       Toast('清除成功')
       setTimeout(() => {
         history.go(0)
@@ -70,27 +76,31 @@ export default defineComponent({
         json: '',
       }
       renderData.json = await beforeUpload(`${detailState.activeDetail?.id}.json`, musicData.json)
-
       if (toast) toast.message = '上传数据中 2/2'
       renderData.svg = await beforeUpload(`${detailState.activeDetail?.id}.svg`, musicData.svg)
+      if (!renderData.json || !renderData.svg) {
+        if (showMsg) Toast('上传缓存数据失败')
+        return
+      }
       let body = {
-        id: detailState.activeDetail?.id,
-        musicSvg: detailState.activeDetail.musicSvg,
-        musicJianSvg: detailState.activeDetail.musicJianSvg,
-        musicFirstSvg: detailState.activeDetail.musicFirstSvg,
+        id: musicInfo.id,
+        musicSvg: '',
       }
+      const musicSvg = {} as any
       if (SettingState.sett.type === 'staff') {
-        body.musicSvg = JSON.stringify(renderData)
+        musicSvg.staff = renderData
       } else {
         if (SettingState.sett.keySignature) {
           // 固定调
-          body.musicFirstSvg = JSON.stringify(renderData)
+          musicSvg.fixed = renderData
         } else {
           //首调
-          body.musicJianSvg = JSON.stringify(renderData)
+          musicSvg.first = renderData
         }
       }
+      body.musicSvg = JSON.stringify(musicSvg)
       if (toast) toast.message = '保存数据中'
+      console.log('🚀 ~ body:', body)
       const res = await handleUpdate(body)
       if ((res as any)?.code == 200) {
         if (toast) toast.message = '保存成功'
@@ -103,17 +113,7 @@ export default defineComponent({
     }
 
     // 保存
-    const handleUpdate = async (body: any, isClear: Boolean = false) => {
-      if (isClear) {
-        body = {
-          id: detailState.activeDetail?.id,
-          musicJSON: '',
-          musicSvg: '',
-          musicJianSvg: '',
-          musicFirstSvg: '',
-        }
-      }
-      body.id = '1627508678335987714'
+    const handleUpdate = async (body: any) => {
       const res: any = await request.post('/musicSheet/updateRenderFile', {
         requestType: 'json',
         data: body,
@@ -127,7 +127,7 @@ export default defineComponent({
       return res
     }
     const beforeUpload = async (fileName: string, fileData: string) => {
-      const bucketName = 'cloud'
+      const bucketName = 'cloud-coach'
       const ossUrl = `https://${bucketName}.ks3-cn-beijing.ksyuncs.com/`
       let key = Date.now() + '_' + fileName
       let obj = {
@@ -144,8 +144,6 @@ export default defineComponent({
         requestType: 'json',
         data: obj,
       })
-      //   console.log(2)
-      //   console.log('🚀 ~ res', res)
       const formData = new FormData()
       const body = {
         policy: res.data.policy,

src/subpages/colexiu/state.ts

@@ -1,5 +1,21 @@
 import { reactive } from 'vue'
 
+export const musicInfo = {
+  id: '',
+  /** 原音 */
+  audioFileUrl: '',
+  /**曲谱ID */
+  musicId: '',
+  /**声部 */
+  musicSubject: '',
+  /**曲谱缓存 */
+  musicSvg: '' as any,
+  /** 曲谱速度 */
+  speed: null,
+  /**曲谱code */
+  track: ''
+}
+
 export type DetailState = {
   // 当前页面加载状态
   loading: 'initail' | 'loading' | 'error' | 'success'

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

@@ -15,6 +15,7 @@ import formatId, { getSubjectIdCode } from '../fingering/format-id'
 import { evaluatStopPlay } from '../buttons/evaluating'
 import state from '/src/pages/detail/state'
 import { getGradualLengthByXml } from '/src/pages/detail/calcSpeed'
+import { musicInfo } from '../state'
 
 const search = useOriginSearch()
 const skpList = ['Ukulele']
@@ -56,7 +57,12 @@ export const useMp3s = async (detail: MusicSheelDetail) => {
   const search = useOriginSearch()
   const partIndex = ((search['part-index'] as string) || 0) as unknown as number
   const activebg = detail.background?.[partIndex]
-
+  Object.assign(musicInfo, activebg)
+  if (musicInfo.musicSvg) {
+    try {
+      musicInfo.musicSvg = typeof musicInfo.musicSvg === 'string' && musicInfo.musicSvg ? JSON.parse(musicInfo.musicSvg) : ''
+    } catch (error) {}
+  }
   // 伴奏
   const backgroundSong = encodeURI(detail.metronomeUrl || detail.audioFileUrl || detail.url || '')
   // 原音