liushengqiang 1 год назад
Родитель
Сommit
2a4d9a829a
6 измененных файлов с 88 добавлено и 34 удалено
  1. 44 26
      src/pc/create/index.tsx
  2. BIN
      src/pc/home/images/icon_12.png
  3. 3 7
      src/pc/home/index.tsx
  4. 2 0
      src/pc/home/runtime.ts
  5. 37 1
      src/pc/theme.css
  6. 2 0
      src/pc/types.ts

+ 44 - 26
src/pc/create/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 import styles from "./index.module.less";
-import { NButton, NSpace, NSpin, useDialog } from "naive-ui";
+import { NButton, NCheckbox, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
 import { getImage } from "../home/images";
 import TheCreate from "./component/the-create";
 import { storeData } from "/src/store";
@@ -13,7 +13,7 @@ export default defineComponent({
 	setup() {
 		const router = useRouter();
 		const dialog = useDialog();
-        console.log(storeData.user)
+		console.log(storeData.user);
 		const forms = reactive({
 			teacherId: storeData.user.id,
 			page: 1,
@@ -32,6 +32,7 @@ export default defineComponent({
 			const res = await api_musicSheetCreationPage({ ...forms });
 			if (res?.code == 200) {
 				if (data.isCreated) {
+					data.isCreated = false;
 					handleOpenNotaion(res.data.rows[0]);
 				}
 				data.list = data.list.concat(res.data.rows);
@@ -46,32 +47,45 @@ export default defineComponent({
 			getList();
 		};
 		const handleDelte = (item: any) => {
+			const checked = ref(true);
 			dialog.warning({
-				title: "警告",
-				content: `确定删除${item.name}曲谱吗?`,
-				positiveText: "确定",
-				negativeText: "取消",
-				onPositiveClick: async () => {
+				autoFocus: false,
+				class: "deleteDialog",
+				title: "删除曲谱",
+				content: () => (
+					<div onClick={() => checked.value = !checked.value}>
+						<NRadio checked={checked.value}>同步删除我的资源中的该曲目</NRadio>
+					</div>
+				),
+				positiveText: "取消",
+				positiveButtonProps: {
+					type: "default",
+				},
+				negativeText: "删除",
+				negativeButtonProps: {
+					type: "primary",
+					ghost: false,
+				},
+				onPositiveClick: () => {},
+				onNegativeClick: async () => {
 					await api_musicSheetCreationRemove(item.id);
 					handleReset();
 				},
-				onNegativeClick: () => {},
 			});
 		};
 		const loadingRef = ref();
 		onMounted(() => {
 			getList();
-            if(loadingRef.value){
-
-                const obv = new IntersectionObserver((entries) => {
-                    if (entries[0].isIntersecting) {
-                        if (data.finish || data.loading) return;
-                        forms.page++;
-                        getList();
-                    }
-                });
-                obv.observe(loadingRef.value?.$el);
-            }
+			if (loadingRef.value) {
+				const obv = new IntersectionObserver((entries) => {
+					if (entries[0].isIntersecting) {
+						if (data.finish || data.loading) return;
+						forms.page++;
+						getList();
+					}
+				});
+				obv.observe(loadingRef.value?.$el);
+			}
 		});
 		const handleOpenNotaion = (item: any) => {
 			window.parent.postMessage(
@@ -83,9 +97,9 @@ export default defineComponent({
 			);
 		};
 		const productSvg = (abc: string, id: string) => {
-            if(abc) {
-                const a = ABCJS.renderAbc(id, abc, {selectTypes: false, add_classes: true});
-            }
+			if (abc) {
+				const a = ABCJS.renderAbc(id, abc, { selectTypes: false, add_classes: true });
+			}
 		};
 		return () => (
 			<div class={styles.wrap}>
@@ -115,14 +129,18 @@ export default defineComponent({
 										</div>
 										<div class={styles.time}>{item.updateTime}</div>
 									</div>
-									<img style={{pointerEvents: 'none', opacity: .3}} class={styles.bottomBtn} src={getImage("icon_29_2.png")} />
+									<img
+										style={{ pointerEvents: "none", opacity: 0.3 }}
+										class={styles.bottomBtn}
+										src={getImage("icon_29_2.png")}
+									/>
 									<img
 										class={styles.bottomBtn}
 										src={getImage("icon_29_3.png")}
 										onClick={(e: Event) => {
-                                            e.stopPropagation();
-                                            handleDelte(item)
-                                        }}
+											e.stopPropagation();
+											handleDelte(item);
+										}}
 									/>
 								</div>
 							</div>

BIN
src/pc/home/images/icon_12.png


+ 3 - 7
src/pc/home/index.tsx

@@ -138,6 +138,7 @@ export const initMusic = (total: number): IMeasure[] => {
 					tCode: "",
 					dot: "",
 					slus: "",
+					tieline: ""
 				},
 			],
 		};
@@ -587,7 +588,7 @@ export default defineComponent({
 					});
 					return;
 				}
-				activeNote.accidental = value;
+				activeNote.accidental = activeNote.accidental == value ? '' : value;
 				await handleResetRender();
 				rangeHighlight(data.active.startChar);
 			}
@@ -709,12 +710,7 @@ export default defineComponent({
 				const activeNote =
 					abcData.abc.measures[data.active.measureIndex]?.notes[data.active.noteIndex] || null;
 				if (!activeNote) return;
-				if (activeNote.tie === value) {
-					activeNote.tie = "";
-				} else {
-					activeNote.tie = value;
-					console.log("🚀 ~ activeNote:", activeNote);
-				}
+				activeNote.tieline = activeNote.tieline == value ? '' : value;
 				await handleResetRender();
 				rangeHighlight(data.active.startChar);
 			}

+ 2 - 0
src/pc/home/runtime.ts

@@ -156,6 +156,7 @@ export const createNote = (options: Partial<INote>): INote => {
 		tCode: options.tCode || "",
 		dot: options.dot || "",
 		slus: options.slus || "",
+		tieline: options.tieline || "",
 	};
 };
 
@@ -210,6 +211,7 @@ export const renderMeasures = (abc: IAbc) => {
 			text += note.content; // 音符
 			text += note.noteType; // 音符类型
 			text += note.dot; // 附点
+			text += note.tieline; // 延音
 			if (note.tie.includes(")")) {
 				// 连音线 后
 				text += note.tie;

+ 37 - 1
src/pc/theme.css

@@ -1,6 +1,7 @@
-:root{
+:root {
     --primary-color: #198CFE;
 }
+
 * {
     margin    : 0;
     padding   : 0;
@@ -24,6 +25,41 @@ path {
 .abcjs-annotation {
     display: none;
 }
+
 .abcjs-download-midi {
     display: none;
+}
+
+.deleteDialog {
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px;
+    min-height   : 178px;
+}
+
+.deleteDialog.n-dialog .n-dialog__title {
+    justify-content: center;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.deleteDialog.n-dialog .n-dialog__icon {
+    display: none;
+}
+.deleteDialog.n-dialog .n-dialog__action {
+    margin-top: auto;
+    justify-content: center;
+}
+.deleteDialog.n-dialog .n-dialog__action .n-button{
+    width: 117px;
+    height: 35px;
+    line-height: 35px;
+    border-radius: 18px;
+}
+
+.deleteDialog.n-dialog .n-dialog__content{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

+ 2 - 0
src/pc/types.ts

@@ -29,6 +29,8 @@ export interface INote {
     dot: string;
 	/** 3连音 */
 	slus: string
+	/** 延音 */
+	tieline: string
 }
 export interface IMeasure {
 	/** 小节号 */