新建曲谱，按键指法

src/pc/component/keys/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, onUnmounted, reactive } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import { notationInstruments } from "../../create/component/the-create";
 
@@ -88,6 +88,18 @@ export default defineComponent({
 				data.range = range;
 			}
 		};
+		watch(
+			() => props.instrumentCode,
+			() => {
+				const range = notationInstruments.find((item) => item.key === props.instrumentCode)?.range;
+				data.range = range
+					? range
+					: {
+							min: 0,
+							max: 83,
+					  };
+			}
+		);
 		const noteList = computed(() => {
 			const list = data.list
 				.map((items) => {

src/pc/create/component/the-create/index.tsx

@@ -29,56 +29,57 @@ import TheIcon from "/src/components/The-icon";
 import TheSpeed from "/src/pc/home/component/the-speed";
 import { api_musicSheetCreationSave, api_subjectList } from "/src/pc/api";
 import { initMusic } from "/src/pc/home";
+import { encodeUrl } from "/src/utils";
 const instruments = [
 	{
 		label: "竖笛",
 		key: "recorder",
 		id: 4,
 		icon: getImage("icon_27_0.png"),
-		range:{
+		range: {
 			min: 48,
-			max: 74
-		}
+			max: 74,
+		},
 	},
 	{
 		label: "排箫",
 		key: "pan_flute",
 		id: 1,
 		icon: getImage("icon_27_1.png"),
-		range:{
+		range: {
 			min: 43,
-			max: 77
-		}
+			max: 77,
+		},
 	},
 	{
 		label: "口风琴",
 		key: "piccolo",
 		id: 5,
 		icon: getImage("icon_27_2.png"),
-		range:{
+		range: {
 			min: 41,
-			max: 72
-		}
+			max: 72,
+		},
 	},
 	{
 		label: "陶笛",
 		key: "blown_bottle",
 		id: 2,
 		icon: getImage("icon_27_3.png"),
-		range:{
+		range: {
 			min: 45,
-			max: 65
-		}
+			max: 65,
+		},
 	},
 	{
 		label: "葫芦丝",
 		key: "clarinet",
 		id: 3,
 		icon: getImage("icon_27_4.png"),
-		range:{
+		range: {
 			min: 40,
-			max: 57
-		}
+			max: 57,
+		},
 	},
 ];
 export const notationInstruments = instruments;
@@ -95,11 +96,9 @@ export default defineComponent({
 		const message = useMessage();
 
 		const formsOptions = reactive({
-			subjects: [] as any[],
 			loading: false,
 		});
 		const froms = reactive({
-			subjectId: 4,
 			key: ABC_DATA.key[0],
 			meter: ABC_DATA.meter[0],
 			speed: 80,
@@ -117,35 +116,29 @@ export default defineComponent({
 				return;
 			}
 			formsOptions.loading = true;
-			try {
-				await api_musicSheetCreationSave({
-					creationData: JSON.stringify({
-						celf: "K:treble",
-						minUnit: "L:1/4",
-						meter: froms.meter,
-						speed: `Q:1/4=${froms.speed}`,
-						key: froms.key,
-						subjectCode: froms.subjectCode,
-						measures: initMusic(froms.measure),
-					}),
-					name: "",
-					creationConfig: ``,
-					subjectId: 1,
-				});
-				emit("create");
-			} catch (error) {
-				console.log("🚀 ~ error:", error);
-			}
+			handleOpenNotaion({
+				meter: froms.meter.value,
+				speed: `Q:1/4=${froms.speed}`,
+				key: froms.key.value,
+				subjectCode: froms.subjectCode,
+				measure: froms.measure,
+			});
+			emit("create");
 			formsOptions.loading = false;
 		};
 
-		const getSubjects = async () => {
-			const res = await api_subjectList();
-			formsOptions.subjects = res.data || [];
+		const handleOpenNotaion = (data: any) => {
+			const url = `${location.origin}/notation/#/?v=1.0.3&config=${encodeUrl(data)}`;
+			window.parent.postMessage(
+				{
+					api: "notation_open",
+					url: url,
+				},
+				"*"
+			);
+			// window.open(url, "_blank");
 		};
-		onMounted(async () => {
-			getSubjects();
-		});
+
 		return () => (
 			<NModal
 				transformOrigin="center"
@@ -171,9 +164,8 @@ export default defineComponent({
 						<NSpace size={32} style={{ paddingBottom: "45px" }}>
 							{instruments.map((item) => (
 								<div
-									class={[styles.item, froms.subjectId === item.id && styles.itemActive]}
+									class={[styles.item, froms.subjectCode === item.key && styles.itemActive]}
 									onClick={() => {
-										froms.subjectId = item.id;
 										froms.subjectCode = item.key;
 									}}
 								>

src/pc/create/index.tsx

@@ -115,7 +115,7 @@ export default defineComponent({
       window.parent.postMessage(
         {
           api: "notation_open",
-          url: `${location.origin}/notation/#/?v=1.0.2&id=${item.id}`,
+          url: `${location.origin}/notation/#/?v=1.0.3&id=${item.id}`,
         },
         "*"
       );
@@ -181,8 +181,6 @@ export default defineComponent({
           v-model:show={data.addShow}
           onCreate={() => {
             data.addShow = false;
-            data.isCreated = true;
-            handleReset();
           }}
         />
       </div>

src/pc/home/index.tsx

@@ -45,11 +45,15 @@ import {
 } from "naive-ui";
 import { LongArrowAltDown, LongArrowAltUp, GripLinesVertical } from "@vicons/fa";
 import { svg2canvas } from "/src/utils/svg2canvas";
-import { downloadFile } from "/src/utils";
+import { decodeUrl, downloadFile } from "/src/utils";
 import FileBtn, { IFileBtnType } from "./component/file-btn";
 import TheSetting from "./component/the-setting";
 import { useRoute } from "vue-router";
-import { api_musicSheetCreationDetail, api_musicSheetCreationUpdate } from "../api";
+import {
+	api_musicSheetCreationDetail,
+	api_musicSheetCreationSave,
+	api_musicSheetCreationUpdate,
+} from "../api";
 import instrumentsNames from "/src/constant/instrmentsNames.json";
 import { ALL_NOTES, ALL_Pitches } from "./noteData";
 import { Close } from "@vicons/ionicons5";
@@ -58,6 +62,7 @@ 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";
 
 export const initMusic = (total: number): IMeasure[] => {
 	return new Array(total).fill(0).map((item, index) => {
@@ -338,7 +343,7 @@ export default defineComponent({
 							const progress = startTime / 1000 / totalTime;
 							nextTick(() => {
 								(abcData.synthControl as any).seek(progress);
-							})
+							});
 							return;
 						}
 					}
@@ -1237,8 +1242,8 @@ export default defineComponent({
 			return instrumentsNames[code as keyof typeof instrumentsNames];
 		});
 		const getDetailData = async () => {
+			const query = getQuery();
 			data.loading = true;
-			const query: any = getQuery();
 			const res = await api_musicSheetCreationDetail(query.id);
 			if (res?.code == 200) {
 				data.musicId = res.data.id || "";
@@ -1269,21 +1274,63 @@ export default defineComponent({
 			return res;
 		};
 		const handleSaveMusic = async (tips = true) => {
-			await api_musicSheetCreationUpdate({
-				name: data.musicName,
-				creator: data.creator,
-				creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true }),
-				creationData: JSON.stringify(cleanDeep(abcData.abc)),
-				id: data.musicId,
-				subjectId: 3,
-			});
+			const query = getQuery();
+			if (query.id) {
+				await api_musicSheetCreationUpdate({
+					name: data.musicName,
+					creator: data.creator,
+					creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true }),
+					creationData: JSON.stringify(cleanDeep(abcData.abc)),
+					id: query.id,
+					subjectId: "",
+				});
+			} else {
+				const res = await api_musicSheetCreationSave({
+					name: data.musicName,
+					creator: data.creator,
+					creationConfig: renderMeasures(abcData.abc, { hiddenIndex: true }),
+					creationData: JSON.stringify(cleanDeep(abcData.abc)),
+					subjectId: "",
+				});
+				if (res?.data) {
+					const hash = location.hash.split("?");
+					const qs_data = qs.parse(hash[1]);
+					qs_data.id = res.data;
+					try {
+						delete qs_data.config;
+					} catch (error) {
+						console.log("🚀 ~ error:", error)
+					}
+					location.hash = hash[0] + "?" + qs.stringify(qs_data);
+				}
+			}
 			if (tips) {
 				message.success("保存成功");
 			}
 			data.isSave = true;
 		};
+		const hanldeInitCreate = () => {
+			const query = getQuery();
+			const abc = decodeUrl(query.config);
+			console.log("🚀 ~ abc:", abc);
+			abcData.abc.celf = abc.celf ?? "K:treble";
+			abcData.abc.key = abc.key ?? "K:C";
+			abcData.abc.meter = abc.meter ?? "M:4/4";
+			abcData.abc.speed = abc.speed ?? "Q:1/4=80";
+			abcData.abc.visualTranspose = abc.visualTranspose ?? 0;
+			abcData.abc.subjectCode = abc.subjectCode ?? "acoustic_grand_piano";
+			const _instruments = ABCJS.synth.instrumentIndexToName.indexOf(abcData.abc.subjectCode as any);
+			abcData.synthOptions.program = _instruments > -1 ? _instruments : 0;
+			abcData.abc.measures = initMusic(abc.measure ?? 30);
+			data.loading = false;
+		};
 		onMounted(async () => {
-			await getDetailData();
+			const query = getQuery();
+			if (query.id) {
+				await getDetailData();
+			} else {
+				hanldeInitCreate();
+			}
 			if (ABCJS.synth.supportsAudio()) {
 				abcData.synthControl = new ABCJS.synth.SynthController();
 				// console.log("🚀 ~ abcData.synthControl:", abcData.synthControl)
@@ -1758,6 +1805,8 @@ export default defineComponent({
 													await loadMiniMp3();
 													resetMidi(true);
 													popup.selectSubjectShow = false;
+													abcData.abc.subjectCode =
+														ABCJS.synth.instrumentIndexToName[abcData.synthOptions.program];
 												}}
 											></NSelect>
 										</>

src/utils/index.ts

@@ -139,3 +139,10 @@ export function downloadFile(url: string, fileName?: string) {
 	window.URL.revokeObjectURL(url);
 	document.body.removeChild(link);
 };
+
+export function encodeUrl(data: object) {
+	return window.btoa(encodeURIComponent(JSON.stringify(data)))
+}
+export function decodeUrl(data: string) {
+	return JSON.parse(decodeURIComponent(window.atob(data)))
+}