feat(PianoRoll): 重构乐谱编辑与音符转换逻辑

- 更新ScoreEditor组件，使用pianoRollStore管理乐谱转换数据
- 在PianoRoll组件中调整音符渲染逻辑，确保与pianoRollStore的数据一致性
- 增强音符编辑功能，优化用户体验
- 添加注释以提高代码可读性和可维护性

Author: Encaik

packages/web/src/components/editor/ScoreEditor.vue

@@ -31,7 +31,7 @@ import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount, watch } from
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap, ViewUpdate, lineNumbers } from '@codemirror/view';
 import { history, defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { useEditorStore, type PianoRollNote } from '../../stores';
+import { useEditorStore, usePianoRollStore } from '../../stores';
 import { HighlightStyle, syntaxHighlighting, StreamLanguage } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { SNPointerLayer, SNTransition } from 'simple-notation';
@@ -46,6 +46,7 @@ const emits = defineEmits(['toggle-accordion']);
 
 const scoreEditorRef = ref<HTMLDivElement | null>(null);
 const editorStore = useEditorStore();
+const pianoRollStore = usePianoRollStore();
 const router = useRouter();
 
 /**
@@ -54,7 +55,8 @@ const router = useRouter();
 function editInPianoRoll() {
   const { score, info } = editorStore.formData;
   const beatsPerBar = parseInt(info.beat || '4', 10);
-  editorStore.setConversionData(score, beatsPerBar);
+  pianoRollStore.setConversionData(score, beatsPerBar);
+  pianoRollStore.setIsEditingFromScoreEditor(true);
   router.push('/piano-roll');
 }
 

packages/web/src/pages/PianoRoll.vue

@@ -2,7 +2,7 @@
   <Card>
     <template v-slot:title>
       <div class="flex justify-between items-center w-full">
-        <span>{{ editorStore.isEditingFromScoreEditor ? '编辑乐谱' : '编曲文本转换工具' }}</span>
+        <span>{{ pianoRollStore.isEditingFromScoreEditor ? '编辑乐谱' : '编曲文本转换工具' }}</span>
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-2">
             <label for="beatsPerBarInput" class="text-sm font-medium text-gray-300">拍/节:</label>
@@ -39,14 +39,14 @@
             />
           </div>
           <Button @click="togglePlayback">{{ isPlaying ? '停止' : '播放' }}</Button>
-          <Button v-if="editorStore.isEditingFromScoreEditor" @click="completeEditing"
+          <Button v-if="pianoRollStore.isEditingFromScoreEditor" @click="completeEditing"
             >完成编辑</Button
           >
-          <Button v-if="!editorStore.isEditingFromScoreEditor" @click="onGenerateClick"
+          <Button v-if="!pianoRollStore.isEditingFromScoreEditor" @click="onGenerateClick"
             >生成模板文本</Button
           >
           <Button
-            v-if="!editorStore.isEditingFromScoreEditor"
+            v-if="!pianoRollStore.isEditingFromScoreEditor"
             @click="createNewScoreFromArrangement"
             >以此新建乐谱</Button
           >
@@ -113,10 +113,11 @@ import { useRouter } from 'vue-router';
 import { SNTransition, type SNTemplate } from 'simple-notation';
 import * as Tone from 'tone';
 import { useTone } from '@/use';
-import { useEditorStore, type PianoRollNote } from '@/stores';
+import { useEditorStore, usePianoRollStore, type PianoRollNote } from '@/stores';
 
 const { playNote, midiToNoteName, setInstrument } = useTone();
 const editorStore = useEditorStore();
+const pianoRollStore = usePianoRollStore();
 const router = useRouter();
 const pianoGridRef = ref<InstanceType<typeof PianoGrid> | null>(null);
 const isModalOpen = ref(false);
@@ -256,34 +257,38 @@ function loadAndRenderNotes(notesToRender: PianoRollNote[], beatsInfo: number) {
   tempo.value = parseInt(editorStore.formData.info.tempo || '120', 10);
 
   // 3. 将转换后的音符存入 store（如果它们还不在那里）
-  if (editorStore.pianoRollNotes !== notesToRender) {
-    editorStore.pianoRollNotes = notesToRender;
+  if (pianoRollStore.pianoRollNotes !== notesToRender) {
+    pianoRollStore.setPianoRollNotes(notesToRender);
   }
 }
 
 onMounted(() => {
   // Case 1: 从乐谱编辑器带数据过来，需要异步转换
-  if (editorStore.scoreToConvert && editorStore.beatsPerBarToConvert && pianoGridRef.value) {
-    editorStore.isEditingFromScoreEditor = true;
+  if (
+    pianoRollStore.isEditingFromScoreEditor &&
+    pianoRollStore.scoreToConvert &&
+    pianoRollStore.beatsPerBarToConvert &&
+    pianoGridRef.value
+  ) {
     (async () => {
       isLoading.value = true;
       loadingProgress.value = 0;
       const notes = await convertTextToNotesWithProgress(
-        editorStore.scoreToConvert!,
-        editorStore.beatsPerBarToConvert!,
+        pianoRollStore.scoreToConvert!,
+        pianoRollStore.beatsPerBarToConvert!,
         (progress) => {
           loadingProgress.value = progress;
         },
       );
-      loadAndRenderNotes(notes, editorStore.beatsPerBarToConvert!);
+      loadAndRenderNotes(notes, pianoRollStore.beatsPerBarToConvert!);
       isLoading.value = false;
-      editorStore.clearConversionData(); // 清理临时数据
+      pianoRollStore.clearConversionData(); // 清理临时数据
     })();
   }
   // Case 2: 刷新页面或从其他页面返回，直接加载store中已有的数据
-  else if (editorStore.isEditingFromScoreEditor && pianoGridRef.value) {
+  else if (pianoRollStore.isEditingFromScoreEditor && pianoGridRef.value) {
     const beatsInfo = parseInt(editorStore.formData.info.beat || '4', 10);
-    loadAndRenderNotes(editorStore.pianoRollNotes, beatsInfo);
+    loadAndRenderNotes(pianoRollStore.pianoRollNotes, beatsInfo);
   }
 });
 
@@ -498,7 +503,7 @@ function completeEditing() {
     const notesList = pianoGridRef.value.generateNotesList();
     const scoreText = convertNotesToText(notesList, beatsPerBar.value);
     editorStore.updateScore(scoreText); // 只更新乐谱文本
-    editorStore.isEditingFromScoreEditor = false; // 重置标志位
+    pianoRollStore.setIsEditingFromScoreEditor(false); // 重置标志位
     router.push('/');
   }
 }

packages/web/src/stores/editor.ts

@@ -8,16 +8,6 @@ import {
   SNChordType,
   SNScoreType,
 } from 'simple-notation';
-import { ref } from 'vue';
-
-// 编曲工具音符数据接口
-export interface PianoRollNote {
-  index: number;
-  pitch: number;
-  pitchName: string;
-  start: number;
-  duration: number;
-}
 
 export const useEditorStore = defineStore('editor', {
   state: () => ({
@@ -48,10 +38,6 @@ export const useEditorStore = defineStore('editor', {
       },
     } as Partial<SNOptions>,
     selectionRange: { start: null as number | null, end: null as number | null },
-    isEditingFromScoreEditor: false,
-    pianoRollNotes: [] as PianoRollNote[],
-    scoreToConvert: null as string | null,
-    beatsPerBarToConvert: null as number | null,
   }),
 
   actions: {
@@ -112,13 +98,5 @@ export const useEditorStore = defineStore('editor', {
         },
       };
     },
-    setConversionData(score: string, beatsPerBar: number) {
-      this.scoreToConvert = score;
-      this.beatsPerBarToConvert = beatsPerBar;
-    },
-    clearConversionData() {
-      this.scoreToConvert = null;
-      this.beatsPerBarToConvert = null;
-    },
   },
 });

packages/web/src/stores/index.ts

@@ -2,3 +2,4 @@ export * from './instrument/piano';
 export * from './instrument/guitar';
 export * from './instrument/harmonica';
 export * from './editor';
+export * from './pianoRoll';

packages/web/src/stores/pianoRoll.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+
+// 编曲工具音符数据接口
+export interface PianoRollNote {
+  index: number;
+  pitch: number;
+  pitchName: string;
+  start: number;
+  duration: number;
+}
+
+export const usePianoRollStore = defineStore('pianoRoll', {
+  state: () => ({
+    isEditingFromScoreEditor: false,
+    pianoRollNotes: [] as PianoRollNote[],
+    scoreToConvert: null as string | null,
+    beatsPerBarToConvert: null as number | null,
+  }),
+  actions: {
+    setConversionData(score: string, beatsPerBar: number) {
+      this.scoreToConvert = score;
+      this.beatsPerBarToConvert = beatsPerBar;
+    },
+    clearConversionData() {
+      this.scoreToConvert = null;
+      this.beatsPerBarToConvert = null;
+    },
+    setPianoRollNotes(notes: PianoRollNote[]) {
+      this.pianoRollNotes = notes;
+    },
+    setIsEditingFromScoreEditor(isEditing: boolean) {
+      this.isEditingFromScoreEditor = isEditing;
+    },
+  },
+});