Merge branch '2023-8-28'

src/pc/home/index.module.less

@@ -303,7 +303,7 @@
     box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
     border-radius: 16px;
     border: 1px solid #F5F5F7;
-    cursor: move;
+    // cursor: move;
 
     .mearesInput {
         display: flex;

src/pc/home/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import ABCJS, {
 	AbcElem,
 	AbcVisualParams,
@@ -57,12 +57,12 @@ import {
 import instrumentsNames from "/src/constant/instrmentsNames.json";
 import { ALL_NOTES, ALL_Pitches } from "./noteData";
 import { Close } from "@vicons/ionicons5";
-import { UseDraggable } from "@vueuse/components";
 import { getQuery } from "/src/utils/queryString";
 import Metronome, { metronomeData } from "/src/helpers/metronome";
 import cleanDeep from "clean-deep";
 import { saveAs } from "file-saver";
 import qs from "query-string";
+import { useDocumentVisibility } from "@vueuse/core";
 
 export const initMusic = (total: number): IMeasure[] => {
 	return new Array(total).fill(0).map((item, index) => {
@@ -1360,6 +1360,14 @@ export default defineComponent({
 			abcData.abc.measures = initMusic(abc.measure ?? 30);
 			data.loading = false;
 		};
+		const visibility = useDocumentVisibility()
+		watch(() => visibility.value, (val: any) => {
+			if (val === 'hidden') {
+				if (data.playState) {
+					togglePlay('pause')
+				}
+			}
+		})
 		onMounted(async () => {
 			const query = getQuery();
 			if (query.id) {
@@ -1839,15 +1847,17 @@ export default defineComponent({
 												filterable
 												options={instruments.value}
 												v-model:value={abcData.synthOptions.program}
-												onUpdate:value={async () => {
-													abcData.synthControl.disable(true);
+												onUpdate:value={ () => {
+													abcData.synthControl.pause();
 													data.playState = false;
-													await loadMiniMp3();
-													resetMidi(true);
-													popup.selectSubjectShow = false;
-													abcData.abc.subjectCode =
-														ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
-													autoSave();
+													nextTick(async () => {
+														await loadMiniMp3();
+														resetMidi(true);
+														popup.selectSubjectShow = false;
+														abcData.abc.subjectCode =
+															ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
+														autoSave();
+													})
 												}}
 											></NSelect>
 										</>
@@ -2488,8 +2498,8 @@ export default defineComponent({
 					<TheSetting v-model:show={popup.settingShow} />
 
 					{data.selectMeasures.state && (
-						<UseDraggable
-							initialValue={{ x: data.selectMeasures.x, y: data.selectMeasures.y }}
+						<div
+							style={{ left: data.selectMeasures.x + 'px', top: data.selectMeasures.y  + 'px'}}
 							class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
 						>
 							<div onKeyup={(e: Event) => e.stopPropagation()}>
@@ -2548,7 +2558,7 @@ export default defineComponent({
 									</div>
 								</NSpace>
 							</div>
-						</UseDraggable>
+						</div>
 					)}
 				</div>
 				<div class={styles.exportPng}>