生成图片

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

@@ -86,14 +86,16 @@ export default defineComponent({
 			formsOptions.loading = true;
 			try {
 				await api_musicSheetCreationSave({
-					creationData: "",
-					name: "",
-					creationConfig: JSON.stringify({
-						key: froms.key.value,
-						meter: froms.meter.value,
-						speed: froms.speed,
-						measure: froms.measure,
+					creationData: JSON.stringify({
+						celf: "K:treble",
+						minUnit: "L:1/4",
+						meter: froms.meter,
+						speed: `Q:1/4=${froms.speed}`,
+						key: froms.key || "K:C",
+						measures: '',
 					}),
+					name: "",
+					creationConfig: ``,
 					subjectId: 1,
 				});
 				emit("create");
@@ -237,7 +239,12 @@ export default defineComponent({
 							<NButton round onClick={() => emit("update:show", false)}>
 								取消
 							</NButton>
-							<NButton loading={formsOptions.loading} round type="primary" onClick={() => handleCreate()}>
+							<NButton
+								loading={formsOptions.loading}
+								round
+								type="primary"
+								onClick={() => handleCreate()}
+							>
 								确定
 							</NButton>
 						</div>

src/pc/create/index.tsx

@@ -6,6 +6,7 @@ import TheCreate from "./component/the-create";
 import { storeData } from "/src/store";
 import { api_musicSheetCreationPage, api_musicSheetCreationRemove } from "../api";
 import { useRouter } from "vue-router";
+import ABCJS from "abcjs";
 
 export default defineComponent({
 	name: "Create",
@@ -77,7 +78,9 @@ export default defineComponent({
 				"*"
 			);
 		};
-
+		const productSvg = (abc: string, id: string) => {
+			const a = ABCJS.renderAbc(id, abc, {selectTypes: false});
+		};
 		return () => (
 			<div class={styles.wrap}>
 				<NSpace size={18}>
@@ -86,9 +89,17 @@ export default defineComponent({
 						<div>新建乐谱</div>
 					</div>
 
-					{data.list.map((item) => (
+					{data.list.map((item, index: number) => (
 						<div class={styles.item} onClick={() => handleOpenNotaion(item)}>
-							<div class={styles.imgBox}>{/* <img src={getImage("icon_29.png")} /> */}</div>
+							<div class={styles.imgBox} id={"item_" + index}>
+								<img
+									style={{ display: "none" }}
+									src={getImage("icon_29.png")}
+									onLoad={() => {
+										productSvg(item.creationConfig, "item_" + index);
+									}}
+								/>
+							</div>
 							<div class={styles.itemBottom}>
 								<div class={styles.bottombox}>
 									<div class={styles.bottomLeft}>

src/pc/home/index.tsx

@@ -924,7 +924,8 @@ export default defineComponent({
 					console.log(error);
 				}
 				if (abc) {
-					abcData.abc.measures = abc;
+					console.log("🚀 ~ abc:", abc)
+					abcData.abc.measures = abc.measures || initMusic(30);
 				}
 			}
 		};