云端

src/pc/component/upload-to-resources/index.module.less

@@ -84,4 +84,11 @@
             margin: 0 8px;
         }
     }
+}
+.productIframe{
+    position: fixed;
+    width: 1000px;
+    height: 80vh;
+    border: none;
+    z-index: -100;
 }

src/pc/component/upload-to-resources/index.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, onMounted, reactive, watch } from "vue";
+import { defineComponent, onMounted, onUnmounted, reactive, watch } from "vue";
 import { api_musicSheetCreationWav2mp3, api_musicSheetSave, api_subjectList } from "../../api";
-import { NButton, NForm, NFormItem, NIcon, NModal, NSelect, NSpace } from "naive-ui";
+import { NButton, NForm, NFormItem, NIcon, NModal, NSelect, NSpace, useMessage } from "naive-ui";
 import styles from "./index.module.less";
 import { Close } from "@vicons/ionicons5";
 import { SelectMixedOption } from "naive-ui/es/select/src/interface";
+import { api_uploadFile } from "/src/utils/uploadFile";
 
 export default defineComponent({
 	name: "UploadToResources",
@@ -19,14 +20,20 @@ export default defineComponent({
 	},
 	emits: ["update:show"],
 	setup(props, { emit }) {
+		const message = useMessage();
 		const model = reactive({
 			subjects: [] as SelectMixedOption[],
 			saveLoading: false,
+			productOpen: false,
+			productIfameSrc: "",
 		});
 		const froms = reactive({
 			subjectId: null,
 			isPublic: 0,
 			mp3: "",
+			musicImg: "",
+			musicSvg: "",
+			musicJianSvg: "",
 		});
 		const getSubjects = async () => {
 			const { data } = await api_subjectList();
@@ -37,14 +44,63 @@ export default defineComponent({
 				};
 			});
 		};
+
+		const handleProductResult = (res: MessageEvent) => {
+			const data = res.data;
+			if (data?.api === "webApi_renderSvg") {
+				let imgs: any = [];
+				try {
+					imgs = JSON.parse(data.product);
+				} catch (error) {
+					console.log("🚀 ~ error:", error);
+				}
+				imgs = imgs.filter((item: any) => item.base64);
+				if (imgs.length === 3) {
+					message.success("生成成功");
+					handleUploadImg(imgs);
+				} else {
+					message.error("生成失败");
+				}
+				console.log("🚀 ~ 上传之前", [...imgs]);
+			}
+		};
+		const handleUploadImg = async (imgs: any[]) => {
+			for (let i = 0; i < imgs.length; i++) {
+				const fileName = `${Date.now()}p${i}.png`;
+				const file = dataURLtoFile(imgs[i].base64, fileName);
+				imgs[i].url = await api_uploadFile(file, fileName, () => {});
+			}
+			froms.musicImg = imgs[0]?.url || "";
+			froms.musicSvg = imgs[1]?.url || "";
+			froms.musicJianSvg = imgs[2]?.url || "";
+			model.productOpen = false;
+			imgs = [];
+			handleSubmit();
+		};
+		/** base64转file */
+		const dataURLtoFile = (dataurl: string, filename: string) => {
+			let arr = dataurl.split(",") || [],
+				mime = arr[0].match(/:(.*?);/)?.[1],
+				bstr = atob(arr[1]),
+				n = bstr.length,
+				u8arr = new Uint8Array(n);
+			while (n--) {
+				u8arr[n] = bstr.charCodeAt(n);
+			}
+			return new File([u8arr], filename, { type: mime });
+		};
 		onMounted(() => {
 			getSubjects();
+			window.addEventListener("message", handleProductResult);
+		});
+		onUnmounted(() => {
+			window.removeEventListener("message", handleProductResult);
 		});
 		watch(
 			() => props.item,
 			() => {
 				console.log(props.item);
-                froms.subjectId = props.item.subjectId ?? null;
+				froms.subjectId = props.item.subjectId ?? null;
 			}
 		);
 
@@ -66,9 +122,9 @@ export default defineComponent({
 						track: "",
 					},
 				],
-				musicImg: props.item.coverImg,
-				musicSvg: "",
-				musicJianSvg: "",
+				musicImg: froms.musicImg,
+				musicSvg: froms.musicSvg,
+				musicJianSvg: froms.musicJianSvg,
 				extConfigJson: "",
 			});
 		};
@@ -77,9 +133,25 @@ export default defineComponent({
 			froms.mp3 = data;
 		};
 
-		const handleUpload = async () => {
-			model.saveLoading = true;
+		/** 自动生成图片 */
+		const handleAutoProduct = () => {
+			const xml = props.item.xml;
+			if (!xml) {
+				message.error("没有生成xml文件");
+				return;
+			}
+			const origin = /(localhost|192)/.test(location.host)
+				? "https://test.lexiaoya.cn"
+				: location.origin;
+			model.productIfameSrc = `${origin}/instrument/#/product-img?xmlUrl=${xml}&productXmlImg=1`;
+			model.productOpen = true;
+		};
 
+		const handleUpload = () => {
+			model.saveLoading = true;
+			handleAutoProduct();
+		};
+		const handleSubmit = async () => {
 			await wav2mp3();
 			await createMusic();
 			setTimeout(() => {
@@ -88,58 +160,61 @@ export default defineComponent({
 			}, 1000);
 		};
 		return () => (
-			<NModal autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
-				<div class={styles.setbox}>
-					<div class={styles.head}>
-						<div>上传到我的资源</div>
-						<NButton
-							class={styles.close}
-							quaternary
-							circle
-							size="small"
-							onClick={() => emit("update:show", false)}
-						>
-							<NIcon component={Close} size={18} />
-						</NButton>
-					</div>
-					<NForm class={styles.form} labelPlacement="left">
-						<NFormItem label="可用声部">
-							<NSelect
-								to="body"
-								placeholder="请选择素材可用乐器"
-								options={model.subjects}
-								v-model:value={froms.subjectId}
-							></NSelect>
-						</NFormItem>
-						<NFormItem label="是否公开">
-							<NSpace class={styles.checkbox} wrapItem={false}>
-								<NButton
-									secondary
-									bordered={false}
-									type={froms.isPublic === 1 ? "primary" : "default"}
-									onClick={() => (froms.isPublic = 1)}
-								>
-									公开
-								</NButton>
-								<NButton
-									secondary
-									bordered={false}
-									type={froms.isPublic === 0 ? "primary" : "default"}
-									onClick={() => (froms.isPublic = 0)}
-								>
-									不公开
-								</NButton>
-							</NSpace>
-						</NFormItem>
-					</NForm>
-					<div class={styles.btns}>
-						<NButton onClick={() => emit("update:show", false)}>取消</NButton>
-						<NButton type="primary" loading={model.saveLoading} onClick={() => handleUpload()}>
-							确定
-						</NButton>
+			<>
+				<NModal autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
+					<div class={styles.setbox}>
+						<div class={styles.head}>
+							<div>上传到我的资源</div>
+							<NButton
+								class={styles.close}
+								quaternary
+								circle
+								size="small"
+								onClick={() => emit("update:show", false)}
+							>
+								<NIcon component={Close} size={18} />
+							</NButton>
+						</div>
+						<NForm class={styles.form} labelPlacement="left">
+							<NFormItem label="可用声部">
+								<NSelect
+									to="body"
+									placeholder="请选择素材可用乐器"
+									options={model.subjects}
+									v-model:value={froms.subjectId}
+								></NSelect>
+							</NFormItem>
+							<NFormItem label="是否公开">
+								<NSpace class={styles.checkbox} wrapItem={false}>
+									<NButton
+										secondary
+										bordered={false}
+										type={froms.isPublic === 1 ? "primary" : "default"}
+										onClick={() => (froms.isPublic = 1)}
+									>
+										公开
+									</NButton>
+									<NButton
+										secondary
+										bordered={false}
+										type={froms.isPublic === 0 ? "primary" : "default"}
+										onClick={() => (froms.isPublic = 0)}
+									>
+										不公开
+									</NButton>
+								</NSpace>
+							</NFormItem>
+						</NForm>
+						<div class={styles.btns}>
+							<NButton onClick={() => emit("update:show", false)}>取消</NButton>
+							<NButton type="primary" loading={model.saveLoading} onClick={() => handleUpload()}>
+								确定
+							</NButton>
+						</div>
 					</div>
-				</div>
-			</NModal>
+				</NModal>
+                { model.productOpen && <iframe class={styles.productIframe} src={model.productIfameSrc}></iframe>}
+			</>
 		);
 	},
 });

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

@@ -21,16 +21,12 @@ import {
 	useMessage,
 } from "naive-ui";
 import { defineComponent, onMounted, reactive, watch } from "vue";
-import { CheckmarkCircle, Close } from "@vicons/ionicons5";
+import { Close } from "@vicons/ionicons5";
 import styles from "./index.module.less";
 import { getImage } from "/src/pc/home/images";
 import { ABC_DATA } from "/src/pc/home/runtime";
 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";
-import { getQuery } from "/src/utils/queryString";
 const instruments = [
 	{
 		label: "竖笛",

src/pc/create/index.module.less

@@ -164,4 +164,5 @@
         font-size: 12px;
         color: #777;
     }
-}
+}
+

src/pc/create/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
-import { NButton, NCheckbox, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
+import { NButton, NCheckbox, NModal, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
 import { getImage } from "../home/images";
 import TheCreate from "./component/the-create";
 import { storeData } from "/src/store";
@@ -157,12 +157,11 @@ export default defineComponent({
 										<div class={styles.bottombox}>
 											<div class={styles.bottomLeft}>
 												<div class={styles.itemtitle}>
-													<img class={styles.icon_29} src={getImage("icon_29_1.png")} />
-													<span>{item.name}</span>
+													<span>{item.name || `未命名乐谱-${index + 1}`}</span>
 												</div>
 												<div class={styles.time}>{item.updateTime}</div>
 											</div>
-											{/* <img
+											<img
 												class={styles.bottomBtn}
 												src={getImage("icon_29_2.png")}
 												onClick={() => {
@@ -171,7 +170,7 @@ export default defineComponent({
 														data.uploadShow = true;
 													});
 												}}
-											/> */}
+											/>
 											<img
 												class={styles.bottomBtn}
 												src={getImage("icon_29_3.png")}
@@ -182,7 +181,8 @@ export default defineComponent({
 											/>
 										</div>
 									</div>
-									{/* <img class={styles.btn} src={getImage("icon_29_4.png")} /> */}
+									<img class={styles.btn} src={getImage("icon_29_4.png")} />
+									<img class={styles.btn} src={getImage("icon_29_5.png")} />
 								</div>
 							</div>
 						</div>
@@ -202,6 +202,7 @@ export default defineComponent({
 				/>
 
 				<UploadToResources v-model:show={data.uploadShow} item={data.item} />
+
 			</div>
 		);
 	},