修改样式

src/pc/create/index.tsx

@@ -1,10 +1,21 @@
-import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import styles from "./index.module.less";
-import { NRadio, NSpace, NSpin, useDialog } from "naive-ui";
+import { NDialog, NModal, NRadio, NSpace, NSpin, useDialog } from "naive-ui";
 import { getImage } from "../home/images";
 import TheCreate from "./component/the-create";
 import { storeData } from "/src/store";
-import { api_musicSheetCreationPage, api_musicSheetCreationRemove } from "../api";
+import {
+  api_musicSheetCreationPage,
+  api_musicSheetCreationRemove,
+} from "../api";
 import ABCJS from "abcjs";
 import { usePageVisibility } from "@vant/use";
 import UploadToResources from "../component/upload-to-resources";
@@ -12,7 +23,11 @@ import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
 import UploadToTasks from "../component/upload-to-tasks";
 import UploadFile from "../component/upload-file";
-import { eventGlobal, saveUploadCatch, uploadState } from "../component/upload-to-tasks/state";
+import {
+  eventGlobal,
+  saveUploadCatch,
+  uploadState,
+} from "../component/upload-to-tasks/state";
 import { formateAbc, renderMeasures } from "../home/runtime";
 import requestOrigin from "umi-request";
 
@@ -41,7 +56,7 @@ export default defineComponent({
       data.loading = true;
       try {
         const res = await api_musicSheetCreationPage({ ...forms });
-        console.log(res, 'res')
+        console.log(res, "res");
         if (res?.code == 200) {
           if (data.isCreated) {
             data.isCreated = false;
@@ -68,42 +83,19 @@ export default defineComponent({
       }
     });
 
-    const handleDelte = (item: any) => {
-      const checked = ref(true);
-      dialog.warning({
-        autoFocus: false,
-        class: "deleteDialog",
-        title: "删除曲谱",
-        maskClosable: false,
-        content: () => (
-          <div onClick={() => (checked.value = !checked.value)}>
-            <NRadio checked={checked.value}>同步删除我的资源中的该曲目</NRadio>
-          </div>
-        ),
-        // content: () => <div>确认删除当前曲谱?</div>,
-        positiveText: "取消",
-        positiveButtonProps: {
-          type: "default",
-        },
-        negativeText: "删除",
-        negativeButtonProps: {
-          type: "primary",
-          ghost: false,
-        },
-        onPositiveClick: () => {},
-        onNegativeClick: async () => {
-          await api_musicSheetCreationRemove(item.id, checked.value ? 1 : 0);
-          handleReset();
-
-          // 删除上传记录里面的数据
-          const index = uploadState.uploadList.findIndex((upload: any) => upload.musicSheetCreationId === item.id);
-          if (index !== -1) {
-            uploadState.uploadList.splice(index, 1);
-
-            saveUploadCatch();
-          }
-        },
-      });
+    const checked = ref(true);
+    const dialogWarning = ref(false);
+    const itemId = ref();
+    const handleDelete = (item: any) => {
+      // dialog.warning({
+      //   autoFocus: false,
+      //   class: "deleteDialog",
+      //   title: "删除曲谱",
+      //   maskClosable: false,
+      // });
+      checked.value = true;
+      dialogWarning.value = true;
+      itemId.value = item.id;
     };
     const loadingRef = ref();
 
@@ -147,12 +139,16 @@ export default defineComponent({
       );
     };
     const productSvg = (abc: string, id: string) => {
-      const a = ABCJS.renderAbc(id, abc, { selectTypes: false, add_classes: true })[0];
+      const a = ABCJS.renderAbc(id, abc, {
+        selectTypes: false,
+        add_classes: true,
+      })[0];
       return a;
     };
 
     const handleSuccess = () => {
-      data.list.find((item: any) => item.id === data.item.id).uploadStatus = "YES";
+      data.list.find((item: any) => item.id === data.item.id).uploadStatus =
+        "YES";
     };
     return () => (
       <div class={styles.wrap}>
@@ -161,7 +157,10 @@ export default defineComponent({
         <div class={styles.wrapBox}>
           <div class={styles.itemWrap}>
             <div class={styles.itemWrapBox}>
-              <div class={styles.createItem} onClick={() => (data.addShow = true)}>
+              <div
+                class={styles.createItem}
+                onClick={() => (data.addShow = true)}
+              >
                 <img src={getImage("icon_29.png")} />
                 <div>新建乐谱</div>
               </div>
@@ -171,7 +170,10 @@ export default defineComponent({
           {data.list.map((item, index: number) => (
             <div class={styles.itemWrap}>
               <div class={styles.itemWrapBox}>
-                <div class={styles.item} onClick={() => handleOpenNotaion(item)}>
+                <div
+                  class={styles.item}
+                  onClick={() => handleOpenNotaion(item)}
+                >
                   <div class={[styles.imgBox]} id={"item_" + index}>
                     <img
                       src={getImage("icon_staff.png")}
@@ -182,28 +184,52 @@ export default defineComponent({
                             const result = await requestOrigin.get(item.xml, {
                               mode: "cors",
                             });
-                            let abc: any = new DOMParser().parseFromString(result, "text/xml");
+                            let abc: any = new DOMParser().parseFromString(
+                              result,
+                              "text/xml"
+                            );
                             const title = abc.querySelector("movement-title");
                             // xmlParse.getElementsByTagName("words");
                             // const title = abc.getElementsByTagName("movement-title");
-                            if (title && title.textContent.trim() !== item?.name) {
+                            if (
+                              title &&
+                              title.textContent.trim() !== item?.name
+                            ) {
                               title.textContent = item.name;
                             }
 
-                            abc = (window as any).vertaal(abc, { p: "f", t: 1, u: 0, v: 3, mnum: 0 });
-                            const r: any = ABCJS.renderAbc("importRef", abc[0], { responsive: "resize" }); //ABCJS.renderAbc("item_" + index, abc[0], { selectTypes: false, add_classes: true })[0];
-                            const abcd = formateAbc(r[0], { subjectCode: "acoustic_grand_piano" });
+                            abc = (window as any).vertaal(abc, {
+                              p: "f",
+                              t: 1,
+                              u: 0,
+                              v: 3,
+                              mnum: 0,
+                            });
+                            const r: any = ABCJS.renderAbc(
+                              "importRef",
+                              abc[0],
+                              { responsive: "resize" }
+                            ); //ABCJS.renderAbc("item_" + index, abc[0], { selectTypes: false, add_classes: true })[0];
+                            const abcd = formateAbc(r[0], {
+                              subjectCode: "acoustic_grand_piano",
+                            });
                             const config = renderMeasures(abcd, {
                               hiddenIndex: true,
                               showTitle: true,
                               showCreator: true,
                             });
-                            item.visualObj = productSvg(config, "item_" + index);
+                            item.visualObj = productSvg(
+                              config,
+                              "item_" + index
+                            );
                           } catch (e) {
                             console.log(e, "1222222");
                           }
                         } else {
-                          item.visualObj = productSvg(item.creationConfig, "item_" + index);
+                          item.visualObj = productSvg(
+                            item.creationConfig,
+                            "item_" + index
+                          );
                         }
                       }}
                     />
@@ -222,8 +248,14 @@ export default defineComponent({
                           src={getImage("icon_29_2.png")}
                           onClick={(e: Event) => {
                             e.stopPropagation();
-                            const abc = item.creationData ? JSON.parse(item.creationData) : {};
-                            data.item = { ...item, subjectCode: abc.subjectCode || "acoustic_grand_piano" };
+                            const abc = item.creationData
+                              ? JSON.parse(item.creationData)
+                              : {};
+                            data.item = {
+                              ...item,
+                              subjectCode:
+                                abc.subjectCode || "acoustic_grand_piano",
+                            };
                             nextTick(() => {
                               data.uploadShow = true;
                             });
@@ -235,19 +267,27 @@ export default defineComponent({
                         src={getImage("icon_29_3.png")}
                         onClick={(e: Event) => {
                           e.stopPropagation();
-                          handleDelte(item);
+                          handleDelete(item);
                         }}
                       />
                     </div>
                   </div>
-                  {item.uploadStatus === "YES" && <img class={styles.btn} src={getImage("icon_29_4.png")} />}
-                  {item.uploadStatus === "UPDATE" && <img class={styles.btn} src={getImage("icon_29_5.png")} />}
+                  {item.uploadStatus === "YES" && (
+                    <img class={styles.btn} src={getImage("icon_29_4.png")} />
+                  )}
+                  {item.uploadStatus === "UPDATE" && (
+                    <img class={styles.btn} src={getImage("icon_29_5.png")} />
+                  )}
                 </div>
               </div>
             </div>
           ))}
 
-          <div id="importRef" class={styles.importRef} style={{ display: "none" }}></div>
+          <div
+            id="importRef"
+            class={styles.importRef}
+            style={{ display: "none" }}
+          ></div>
         </div>
         {!data.finish && (
           <NSpace ref={loadingRef} justify="center" style={{ padding: "30px" }}>
@@ -262,9 +302,67 @@ export default defineComponent({
           }}
         />
 
-        <UploadToResources v-model:show={data.uploadShow} item={data.item} onSuccess={() => handleSuccess()} />
+        <UploadToResources
+          v-model:show={data.uploadShow}
+          item={data.item}
+          onSuccess={() => handleSuccess()}
+        />
 
         <UploadToTasks />
+
+        <NModal
+          autoFocus={false}
+          show={dialogWarning.value}
+          unstableShowMask={false}
+          maskClosable={false}
+          // onUpdate:show={(val) => {
+          //   model.productOpen = false;
+          //   emit("update:show", val);
+          // }}
+        >
+          <NDialog
+            type="warning"
+            class={"deleteDialog"}
+            title="删除曲谱"
+            positiveText="取消"
+            positiveButtonProps={{
+              type: "default",
+            }}
+            content={() => (
+              <div onClick={() => (checked.value = !checked.value)}>
+                <NRadio checked={checked.value}>
+                  同步删除我的资源中的该曲目
+                </NRadio>
+              </div>
+            )}
+            negativeText="删除"
+            negativeButtonProps={{
+              type: "primary",
+              ghost: false,
+            }}
+            onClose={() => dialogWarning.value = false}
+            onPositiveClick={() => {
+              dialogWarning.value = false;
+            }}
+            onNegativeClick={async () => {
+              await api_musicSheetCreationRemove(
+                itemId.value,
+                checked.value ? 1 : 0
+              );
+              handleReset();
+
+              // 删除上传记录里面的数据
+              const index = uploadState.uploadList.findIndex(
+                (upload: any) => upload.musicSheetCreationId === itemId.value
+              );
+              if (index !== -1) {
+                uploadState.uploadList.splice(index, 1);
+
+                saveUploadCatch();
+              }
+            }}
+          />
+        </NModal>
       </div>
     );
   },

src/pc/home/index.tsx

@@ -1530,6 +1530,13 @@ export default defineComponent({
      */
     let musicLock = false; // 添加锁
     const handleSaveMusic = async (tips = true) => {
+      if(!data.musicName) {
+        if(tips) {
+          message.destroyAll();
+          message.error("请输入曲谱名称");
+        }
+        return
+      }
       if (musicLock) return;
       musicLock = true;
       const query = getQuery();
@@ -1594,7 +1601,7 @@ export default defineComponent({
       data.uploadClick = false;
       data.saveLoadingText = false;
       musicLock = false;
-    };
+    };  
     const hanldeInitCreate = () => {
       const query = getQuery();
       const abc = decodeUrl(query.config);