feat: 谱面编辑修改

osmd-extended

@@ -1 +1 @@
-Subproject commit f757e1c4b7125efbdf514db6a6835335829d20ec
+Subproject commit 9b847e5f475415bbeaba33e736fc5c563a9eead6

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

@@ -3,7 +3,7 @@ import styles from "./index.module.less"
 import { headImg } from "../image";
 import { headTopData } from "../index"
 import { Switch, showToast, Field, Popup, Slider } from "vant";
-import state, { refreshMusicSvg, IPlatform } from "/src/state"
+import state, { refreshMusicSvg, IPlatform, checkMoveNoSave } from "/src/state"
 import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/communication";
 import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
@@ -208,10 +208,11 @@ export default defineComponent({
                                 <div class={styles.radioBox}>
                                     {
                                         [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
-                                            return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
+                                            return <div class={ state.isSingleLine===item.value && styles.active } onClick={ async ()=>{ 
                                                 if(state.isSingleLine === item.value){
                                                     return
                                                 }
+                                                await checkMoveNoSave();
                                                 headTopData.settingMode = false
                                                 // resetRenderMusicScore(state.musicRenderType)
                                                 const _time = setTimeout(() => {
@@ -233,10 +234,11 @@ export default defineComponent({
                                 <div class={styles.radioBox}>
                                     {
                                         notationList.value.map(item=>{
-                                            return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ 
+                                            return <div class={ state.musicRenderType===item.value && styles.active } onClick={ async ()=>{ 
                                                 if(state.musicRenderType === item.value){
                                                     return
                                                 }
+                                                await checkMoveNoSave();
                                                 headTopData.settingMode = false
                                                 // resetRenderMusicScore(state.musicRenderType)
                                                 const _time = setTimeout(() => {

src/state.ts

@@ -1,4 +1,4 @@
-import { closeToast, showToast } from "vant";
+import { closeToast, showToast, showConfirmDialog } from "vant";
 import { nextTick, reactive, watch } from "vue";
 import { OpenSheetMusicDisplay } from "../osmd-extended/src";
 import { metronomeData } from "./helpers/metronome";
@@ -21,6 +21,7 @@ import { downloadXmlStr } from "./view/music-score"
 import { musicScoreRef, headerColumnHide } from "/src/page-instrument/view-detail/index"
 import { headTopData } from "/src/page-instrument/header-top/index";
 import { api_lessonTrainingTrainingStudentDetail } from "/src/page-instrument/api"
+import { undoData, moveData } from "/src/view/plugins/move-music-score"
 
 const query: any = getQuery();
 
@@ -2110,6 +2111,34 @@ watch(
   }
 )
 
+// 后台编辑谱面模式，切换谱面时，如果有操作没有保存，需要给出提示
+export const checkMoveNoSave = async () => {
+  return new Promise((resolve, reject) => {
+    if (query.isMove) {
+      if (moveData.open && undoData.undoList.length) {
+        showConfirmDialog({
+          title: "温馨提示",
+          message: "您有新的修改还未保存，切换谱面后本次编辑的内容将不会保存",
+        }).then(() => {
+          moveData.open = false
+          resolve(true)
+        }).catch(() => {
+          return;
+        });
+      } else {
+        moveData.open = false
+        undoData.undoList = []
+        resolve(true)
+      }
+    } else {
+      resolve(true)
+    }
+  });
+
+
+}
+
+
 /** 刷新谱面 */
 export const refreshMusicSvg = () => {
   clearSelection();

src/view/plugins/move-music-score/index.module.less

@@ -68,6 +68,7 @@
     justify-content: flex-end;
     padding: 14PX 30PX;
     pointer-events: none;
+    min-height: 58PX;
     .editItem {
         display: flex;
         align-items: center;

src/view/plugins/move-music-score/index.tsx

@@ -1,5 +1,5 @@
 import { Row, showToast, showConfirmDialog } from "vant";
-import { defineComponent, onMounted, reactive, nextTick, ref } from "vue";
+import { defineComponent, onMounted, onUnmounted, reactive, nextTick, ref } from "vue";
 import state from "/src/state";
 import request from "/src/utils/request";
 import { getQuery } from "/src/utils/queryString";
@@ -242,6 +242,7 @@ export const filterMoveData = async () => {
 			showToast("保存成功");
 			undoData.undoList = [];
 			undoData.activeItem = null;
+			state.extStyleConfigJson = JSON.stringify(extStyleConfigJson)
 		}
 		clearActiveModel();
 	}
@@ -570,10 +571,21 @@ export default defineComponent({
 			// 	initSvgId();
 			// }
 			// renderForMoveData();
+			moveData.modelList = []
 			nextTick(() => initNoteCoord())
+			// const hasToolDom = Array.from(document.body.children)?.some((item: any) => item?.id === 'toolBox')
+			// if (!hasToolDom) {
+			// 	const toolBox = document.getElementById("toolBox");
+			// 	toolBox && document.body.appendChild(toolBox);
+			// }
 			const toolBox = document.getElementById("toolBox");
 			toolBox && document.body.appendChild(toolBox);
 		});
+		onUnmounted(() => {
+			moveData.modelList = []
+			const toolBox = document.getElementById("toolBox");
+			toolBox && document.body.removeChild(toolBox);
+		})
 		return () => (
 			<div class={[moveData.open ? "" : styles.moveDisabled]}>
 				<div id="toolBox">
@@ -612,37 +624,41 @@ export default defineComponent({
 							class={[styles.rightHideIcon, !showToolBox.value ? styles.rightIconShow : '']} 
 							src={rightHideIcon}
 							onClick={() => showToolBox.value = true } />
-					}   */}
-					<div class={[styles.editToolBox, !moveData.open && styles.itemDisabled]}>					
-						<div class={[styles.editItem, styles.canEdit]} onClick={switchMoveState}>
-							<img src={moveData.open ? editCloseIcon : editIcon} />
-							<span>{moveData.open ? '取消' : '编辑'}</span>
-						</div>
-						<div class={styles.editItem} onClick={filterMoveData}>
-							<img src={editSaveIcon} />
-							<span>保存</span>
-						</div>
-						<div class={[styles.editItem, !undoData.undoList.length && styles.disabled]} onClick={handleUndo}>
-							<img src={editPreIcon} />
-							<span>撤回</span>
-						</div>
-						<div class={[styles.editItem, moveData.activeIndex <= -1 && styles.disabled]} onClick={handleDeleteMoveNote}>
-							<img src={editDeleteIcon} />
-							<span>{moveData.modelList[moveData.activeIndex]?.isDelete ? '回显' : '删除'}</span>
-						</div>
-						<div class={styles.editItem} onClick={resetMoveNote}>
-							<img src={editResetIcon} />
-							<span>重置</span>
-						</div>
+					}   */}	
+					<div class={[styles.editToolBox, !moveData.open && styles.itemDisabled]}>		
 						{
-							moveData.tool.isAddAndSub && 
-							<div class={styles.extraItem}>
-								<img src={editReduceIcon} onClick={() => handleAddAndSub('sub')} />
-								<img src={editAddIcon} onClick={() => handleAddAndSub('add')} />
-							</div>								
-						}
-																							
-					</div>
+							state.musicRenderType === 'staff' && !state.isSingleLine && 
+							<>
+								<div class={[styles.editItem, styles.canEdit]} onClick={switchMoveState}>
+									<img src={moveData.open ? editCloseIcon : editIcon} />
+									<span>{moveData.open ? '取消' : '编辑'}</span>
+								</div>
+								<div class={styles.editItem} onClick={filterMoveData}>
+									<img src={editSaveIcon} />
+									<span>保存</span>
+								</div>
+								<div class={[styles.editItem, !undoData.undoList.length && styles.disabled]} onClick={handleUndo}>
+									<img src={editPreIcon} />
+									<span>撤回</span>
+								</div>
+								<div class={[styles.editItem, moveData.activeIndex <= -1 && styles.disabled]} onClick={handleDeleteMoveNote}>
+									<img src={editDeleteIcon} />
+									<span>{moveData.modelList[moveData.activeIndex]?.isDelete ? '回显' : '删除'}</span>
+								</div>
+								<div class={styles.editItem} onClick={resetMoveNote}>
+									<img src={editResetIcon} />
+									<span>重置</span>
+								</div>
+								{
+									moveData.tool.isAddAndSub && 
+									<div class={styles.extraItem}>
+										<img src={editReduceIcon} onClick={() => handleAddAndSub('sub')} />
+										<img src={editAddIcon} onClick={() => handleAddAndSub('add')} />
+									</div>								
+								}		
+							</>						
+						}										
+					</div>		
 				</div>
 				{moveData.modelList.map((item: any, index: number) => {
 					return (

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -1,7 +1,7 @@
 import { PropType, computed, defineComponent, ref, toRefs, onMounted, watch, nextTick } from 'vue'
 import { Picker, Button, Icon } from 'vant'
 import styles from './index.module.less'
-import state, { IPlatform } from "/src/state";
+import state, { IPlatform, checkMoveNoSave } from "/src/state";
 import changeName from "./imgs/changeName.png"
 import { headImg } from "/src/page-instrument/header-top/image";
 import { toggleMusicSheet } from "../index"
@@ -73,7 +73,8 @@ export default defineComponent({
               visible-option-num={5}
               option-height={"1.06666rem"}
             />
-            <img src={ okBtn } class={styles.button} onClick={() => {
+            <img src={ okBtn } class={styles.button} onClick={async () => {
+                await checkMoveNoSave();
                 myPicker.value.confirm()
                 nextTick(()=>{
                   emit('close', selValues.value[0])

vite.config.ts

@@ -76,9 +76,9 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        target: "https://dev.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        // target: "https://dev.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         // target: "https://test.kt.colexiu.com",
-        // target: "https://mec.colexiu.com",
+        target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),
       },