feat: 优化输入体验

src/menu/editor.js

@@ -1,4 +1,3 @@
-import { Button, Menu, Upload } from "antd";
 import {
   FolderOpenOutlined,
   HighlightOutlined,
@@ -8,10 +7,14 @@ import {
   SaveOutlined,
   UndoOutlined,
 } from "@ant-design/icons";
+import { Menu } from "antd";
 import state from "../store/state";
 import store from "../store/global";
 import { createNotation, isNote, notations as N } from "../util/notation";
-import { createParagraph } from "../util/paragraph";
+import {
+  createParagraph,
+  createParagraphWithNotations,
+} from "../util/paragraph";
 import { exportFile, loadFile, saveFile } from "../util/file";
 import { findParagraphAndNotation } from "../util/editor";
 import {
@@ -55,19 +58,11 @@ const handleEditMenu = wrappedAction(({ key }) => {
       ];
       break;
     case "add-paragraph": {
-      store.paragraphs.push(
-        createParagraph({
-          notations: [
-            createNotation({ note: "0" }),
-            createNotation({ note: "0" }),
-            createNotation({ note: "0" }),
-            createNotation({ note: "0" }),
-            createNotation({ note: N.separator }),
-          ],
-        })
-      );
+      store.paragraphs.push(createParagraphWithNotations());
       break;
     }
+    default:
+      break;
   }
 });
 const handleConvertMenu = wrappedAction(() => {
@@ -176,8 +171,19 @@ const handleKeyPress = wrappedAction((ev) => {
       }
       case inputKey === "enter" && ctrl && !shift: {
         const newNotation = createNotation();
-        paragraph.notations.splice(notationIndex + 1, 0, newNotation);
-        state.selectedNotationKey = newNotation.key;
+        if (
+          notationIndex === paragraph.notations.length - 1 &&
+          paragraphIndex === store.paragraphs.length - 1
+        ) {
+          // 在最后一个音符时ctrl+enter插入新段落并创建符号
+          store.paragraphs.push(createParagraph({ notations: [newNotation] }));
+          state.selectedNotationKey = store.paragraphs
+            .at(-1)
+            .notations.at(0).key;
+        } else {
+          paragraph.notations.splice(notationIndex + 1, 0, newNotation);
+          state.selectedNotationKey = newNotation.key;
+        }
         break;
       }
       case inputKey === "j" && !ctrl && !shift: {
@@ -218,6 +224,8 @@ const handleKeyPress = wrappedAction((ev) => {
         paragraph.alignJustify = !paragraph.alignJustify;
         break;
       }
+      default:
+        break;
     }
   } else {
     // 仅未选中符号时
@@ -226,7 +234,10 @@ const handleKeyPress = wrappedAction((ev) => {
         state.selectedNotationKey =
           state.lastSelectedNotationKey ||
           store.paragraphs?.at(0)?.notations?.at(0).key;
+        break;
       }
+      default:
+        break;
     }
   }
   // 全局
@@ -261,6 +272,8 @@ const handleKeyPress = wrappedAction((ev) => {
       }
       break;
     }
+    default:
+      break;
   }
 });
 

src/menu/notation.js

@@ -1,25 +1,19 @@
 import {
-  ArrowDownOutlined,
-  ArrowUpOutlined,
   DeleteOutlined,
-  FontColorsOutlined,
-  MinusOutlined,
-  PauseOutlined,
-  PlusOutlined,
   RadiusSettingOutlined,
   StopOutlined,
 } from "@ant-design/icons";
-import { Menu, message } from "antd";
+import { Menu } from "antd";
 import state from "../store/state";
 import { findParagraphAndNotation } from "../util/editor";
-import { isNote, isSeparator } from "../util/notation";
+import { isNote } from "../util/notation";
 import { runInWrappedAction, wrappedAction } from "../store/history";
 
 const getNotationContextMenu = (notation, paragraph) => {
   const hasTie = notation.tieTo;
   const handleMenu = wrappedAction(function ({ key }) {
     switch (true) {
-      case key === "tie":
+      case key === "tie": {
         if (!hasTie) {
           state.tieSourceKey = notation.key;
           return;
@@ -30,6 +24,7 @@ const getNotationContextMenu = (notation, paragraph) => {
         }
         notation.tieTo = null;
         break;
+      }
       case key === "break-underline":
         notation.breakUnderline = !notation.breakUnderline;
         break;
@@ -38,76 +33,35 @@ const getNotationContextMenu = (notation, paragraph) => {
         notation.note = separator;
         break;
       }
+      default:
+        break;
     }
   });
 
   return (
     // ENHANCE: 分音符类型显示菜单项
     <Menu onClick={handleMenu} style={{ minWidth: "80px" }}>
-      {
+      {isNote(notation) && (
         <Menu.Item key="break-underline" icon={<StopOutlined />}>
           {notation.breakUnderline
             ? "在此处延续增减时线"
             : "在此处打断增减时线"}
         </Menu.Item>
-      }
-      {
-        <Menu.Item key="tie" icon={<RadiusSettingOutlined />}>
+      )}
+      {isNote(notation) && (
+        <Menu.Item
+          key="tie"
+          icon={<RadiusSettingOutlined />}
+          notation={notation}
+        >
           {notation.tieTo ? "删除连音线" : "从此处添加连音线到..."}
         </Menu.Item>
-      }
+      )}
       <Menu.Item key="delete" icon={<DeleteOutlined />}>
         删除
       </Menu.Item>
     </Menu>
   );
-
-  return [
-    {
-      key: "octaveUp",
-      text: "升高一个八度（8）",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
-        notation.octave += 1;
-      }),
-    },
-    {
-      key: "octaveDown",
-      text: "降低一个八度（Shift + 8）",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
-        notation.octave -= 1;
-      }),
-    },
-    {
-      key: "tie",
-      text: notation.tieTo ? "删除连音线" : "从此处添加连音线到...",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {}),
-    },
-    {
-      key: "break-underline",
-      text: notation.breakUnderline
-        ? "在此处延续增减时线"
-        : "在此处打断增减时线",
-      visible: isNote(notation),
-      onClick: wrappedAction(() => {
-        notation.breakUnderline = !notation.breakUnderline;
-      }),
-    },
-    {
-      key: "delete",
-      text: "删除",
-      onClick: wrappedAction(() => {
-        const index = paragraph.notations.indexOf(notation);
-        if (index !== -1) {
-          paragraph.notations.splice(index, 1);
-        } else {
-          message.error("符号不存在");
-        }
-      }),
-    },
-  ];
 };
 
 // ENHANCE: 使用EditableContent组件的overlay属性传入菜单

src/menu/paragraph.js

@@ -32,6 +32,8 @@ function getParagraphMenuOptions(paragraph) {
           store.paragraphs.splice(idx, 1);
         }
         break;
+      default:
+        break;
     }
   });