Merge branch '2023-8-28'

src/pc/home/index.tsx

@@ -53,6 +53,7 @@ import {
 	api_musicSheetCreationDetail,
 	api_musicSheetCreationSave,
 	api_musicSheetCreationUpdate,
+	api_xmlToAbc,
 } from "../api";
 import instrumentsNames from "/src/constant/instrmentsNames.json";
 import { ALL_NOTES, ALL_Pitches } from "./noteData";
@@ -63,6 +64,7 @@ import cleanDeep from "clean-deep";
 import { saveAs } from "file-saver";
 import qs from "query-string";
 import { useDocumentVisibility } from "@vueuse/core";
+import request from "/src/utils/request";
 
 export const initMusic = (total: number): IMeasure[] => {
 	return new Array(total).fill(0).map((item, index) => {
@@ -276,7 +278,7 @@ export default defineComponent({
 				speed: "Q:1/4=60",
 				key: "K:C",
 				visualTranspose: 0,
-				visualKey: 'K:C',
+				visualKey: "K:C",
 				subjectCode: "acoustic_grand_piano",
 				measures: initMusic(30),
 			} as IAbc,
@@ -1243,7 +1245,7 @@ export default defineComponent({
 		};
 
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if ((e.target as HTMLElement).nodeName === 'INPUT') return;
+			if ((e.target as HTMLElement).nodeName === "INPUT") return;
 			if (!data.active) return false;
 			console.log(e.key);
 			if (e.key === "Backspace") {
@@ -1311,11 +1313,17 @@ export default defineComponent({
 		};
 		const handleSaveMusic = async (tips = true) => {
 			const query = getQuery();
+			abcData.abc.title = data.musicName;
+			abcData.abc.creator = data.creator;
 			if (query.id) {
 				await api_musicSheetCreationUpdate({
 					name: data.musicName,
 					creator: data.creator,
-					creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true, showTitle: true, showCreator: true }),
+					creationConfig: renderMeasures(abcData.abc, {
+						hiddenIndex: true,
+						showTitle: true,
+						showCreator: true,
+					}),
 					creationData: JSON.stringify(cleanDeep(abcData.abc)),
 					id: query.id,
 					subjectId: "",
@@ -1324,7 +1332,11 @@ export default defineComponent({
 				const res = await api_musicSheetCreationSave({
 					name: data.musicName,
 					creator: data.creator,
-					creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true, showTitle: true, showCreator: true }),
+					creationConfig: renderMeasures(abcData.abc, {
+						hiddenIndex: true,
+						showTitle: true,
+						showCreator: true,
+					}),
 					creationData: JSON.stringify(cleanDeep(abcData.abc)),
 					subjectId: "",
 				});
@@ -1360,14 +1372,17 @@ 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')
+		const visibility = useDocumentVisibility();
+		watch(
+			() => visibility.value,
+			(val: any) => {
+				if (val === "hidden") {
+					if (data.playState) {
+						togglePlay("pause");
+					}
 				}
 			}
-		})
+		);
 		onMounted(async () => {
 			const query = getQuery();
 			if (query.id) {
@@ -1575,22 +1590,29 @@ export default defineComponent({
 			const input = document.createElement("input");
 			input.type = "file";
 			input.accept = ".xml,.musicxml";
-			input.onchange = (e: any) => {
+			input.onchange = async (e: any) => {
+				data.loadingAudioSrouce = true;
 				const file = e.target.files[0];
+				// const formData = new FormData();
+				// formData.append("xmlFile", file);
+				// const res = await api_xmlToAbc(formData);
+				// console.log("🚀 ~ res:", res.data)
 
 				const reader = new FileReader();
-				reader.onload = (e: any) => {
+				reader.onload = async (e: any) => {
 					let abc = e.target.result;
-					// console.log("🚀 ~ abc:", abc);
+
 					abc = new DOMParser().parseFromString(abc, "text/xml");
-					// console.log("🚀 ~ abc:", abc);
+					// // console.log("🚀 ~ abc:", abc);
 					abc = (window as any).vertaal(abc, { p: "f", t: 1, u: 0, v: 3, mnum: 0 });
 					// console.log(abc);
 					const parseData = ABCJS.renderAbc("importRef", abc[0], { responsive: "resize" });
 					console.log("🚀 ~ parseData:", parseData);
 					abcData.abc = formateAbc(parseData[0], { subjectCode: abcData.abc.subjectCode });
 					data.musicName = abcData.abc.title || data.musicName;
-					handleResetRender();
+					data.creator = abcData.abc.creator || data.creator;
+					await handleResetRender();
+					data.loadingAudioSrouce = false;
 				};
 				reader.readAsText(file);
 			};
@@ -1847,7 +1869,7 @@ export default defineComponent({
 												filterable
 												options={instruments.value}
 												v-model:value={abcData.synthOptions.program}
-												onUpdate:value={ () => {
+												onUpdate:value={() => {
 													abcData.synthControl.pause();
 													data.playState = false;
 													nextTick(async () => {
@@ -1857,7 +1879,7 @@ export default defineComponent({
 														abcData.abc.subjectCode =
 															ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
 														autoSave();
-													})
+													});
 												}}
 											></NSelect>
 										</>
@@ -2499,7 +2521,7 @@ export default defineComponent({
 
 					{data.selectMeasures.state && (
 						<div
-							style={{ left: data.selectMeasures.x + 'px', top: data.selectMeasures.y  + 'px'}}
+							style={{ left: data.selectMeasures.x + "px", top: data.selectMeasures.y + "px" }}
 							class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
 						>
 							<div onKeyup={(e: Event) => e.stopPropagation()}>

src/pc/home/runtime.ts

@@ -346,6 +346,7 @@ export const formateAbc = (visualObj: TuneObject, option: any) => {
 		visualTranspose: 0,
 		subjectCode: option.subjectCode ?? "acoustic_grand_piano",
 		title: visualObj?.metaText?.title ?? "",
+		creator: visualObj?.metaText?.composer ?? "",
 	};
 	const list = [];
 	let notes = [];