feat(editor): 添加和弦线显示选项及高度设置功能

- 在 SnOptions 组件中新增和弦线显示选项及和弦线高度设置功能，允许用户自定义和弦线的显示与高度。
- 更新 editorStore，增加 showChordLine 和 chordLineHeight 属性以支持新功能。
- 在 SNScore 类中调整计算逻辑，考虑和弦线高度的影响。
- 增强代码注释，符合jsdoc规范，提升可读性和维护性。

Author: Encaik

examples/public/score/template/【Simple-Notation】小星星.conf.json

@@ -0,0 +1,6 @@
+{
+  "score": {
+    "showChordLine": true,
+    "chordLineHeight": 50
+  }
+}

examples/src/App.vue

@@ -191,7 +191,6 @@ const initSn = (container: HTMLDivElement) => {
     contextMenuX.value = event.detail.e.pageX + 20;
     contextMenuY.value = event.detail.e.pageY + 10;
   });
-  sn.value?.loadData(editorStore.formData);
 };
 
 onMounted(() => {

examples/src/components/PanelExample.vue

@@ -110,14 +110,14 @@ import { defineEmits, ref, computed } from 'vue';
 import { examples } from './examples';
 import { Example } from '../model';
 
-// 示例列表
-
 const emits = defineEmits(['load-example']);
 
 const handleClick = (example: Example) => {
   emits('load-example', example);
 };
 
+handleClick(examples[0]);
+
 // 筛选相关状态
 const filterName = ref('');
 const filterType = ref('');

examples/src/components/editor/SnOptions.vue

@@ -222,6 +222,43 @@
               min="0"
             />
           </div>
+          <!-- 显示和弦线 -->
+          <div class="input-group flex flex-col gap-2">
+            <!--
+            * @description 是否显示和弦线
+            -->
+            <label
+              for="show-chord-line-input"
+              class="font-medium text-[#333] whitespace-nowrap"
+              >显示和弦线</label
+            >
+            <select
+              id="show-chord-line-input"
+              v-model="editorStore.snOptions.score!.showChordLine"
+              class="flex-1 p-2 px-3 border border-[#ddd] rounded text-sm bg-white bg-opacity-80"
+            >
+              <option :value="true">开启</option>
+              <option :value="false">关闭</option>
+            </select>
+          </div>
+          <!-- 和弦线高度 -->
+          <div class="input-group flex flex-col gap-2">
+            <!--
+            * @description 和弦线的高度
+            -->
+            <label
+              for="chord-line-height-input"
+              class="font-medium text-[#333] whitespace-nowrap"
+              >和弦线高度</label
+            >
+            <input
+              id="chord-line-height-input"
+              type="number"
+              v-model.number="editorStore.snOptions.score!.chordLineHeight"
+              class="flex-1 p-2 px-3 border border-[#ddd] rounded text-sm bg-white bg-opacity-80"
+              min="0"
+            />
+          </div>
         </div>
       </div>
     </div>

examples/src/components/examples.ts

@@ -4,7 +4,7 @@ import { Example } from '../model';
 export const examples: Example[] = [
   {
     name: '小星星',
-    hasConf: false,
+    hasConf: true,
     type: SNDataType.TEMPLATE,
     isFinished: true,
   },

examples/src/stores/editor.ts

@@ -43,6 +43,8 @@ export const useEditorStore = defineStore('editor', () => {
       allowOverWeight: 40,
       chordType: SNChordType.Default,
       scoreType: SNScoreType.Simple,
+      showChordLine: false,
+      chordLineHeight: 0,
     },
   });
 
@@ -130,6 +132,8 @@ export const useEditorStore = defineStore('editor', () => {
         allowOverWeight: 40,
         chordType: SNChordType.Default,
         scoreType: SNScoreType.Simple,
+        showChordLine: false,
+        chordLineHeight: 0,
       },
     };
   }

lib/src/components/score.ts

@@ -92,6 +92,7 @@ export class SNScore extends SNBox {
       totalY +=
         SNConfig.score.chordHeight +
         SNConfig.score.lineHeight +
+        (SNConfig.score.showChordLine ? SNConfig.score.chordLineHeight : 0) +
         SNConfig.score.lineSpace +
         (SNRuntime.lyric ? SNConfig.score.lyricHeight : 0);
     });

lib/src/config/config.ts

@@ -42,6 +42,8 @@ export class SNConfig {
       allowOverWeight: 40,
       chordType: SNChordType.Default,
       scoreType: SNScoreType.Simple,
+      showChordLine: false,
+      chordLineHeight: 0,
       ...options?.score,
     };
     SNConfig.debug = options?.debug ? DEBUG_OPTIONS : {};
@@ -89,6 +91,8 @@ export class SNConfig {
       allowOverWeight: 40,
       chordType: SNChordType.Default,
       scoreType: SNScoreType.Simple,
+      showChordLine: false,
+      chordLineHeight: 0,
       ...options?.score,
     };
     SNConfig.debug = options?.debug ? DEBUG_OPTIONS : {};

lib/src/types/options.ts

@@ -49,6 +49,8 @@ export interface SNContentOptions {
  * @property {number} allowOverWeight - 每行歌词允许的溢出权重。
  * @property {SNChordType} chordType - 和弦显示类型。
  * @property {SNScoreType} scoreType - 总谱显示类型。
+ * @property {boolean} showChordLine - 是否显示和弦线。
+ * @property {number} chordLineHeight - 和弦线高度。
  */
 export interface SNScoreOptions {
   padding: number;
@@ -60,6 +62,8 @@ export interface SNScoreOptions {
   allowOverWeight: number;
   chordType: SNChordType;
   scoreType: SNScoreType;
+  showChordLine: boolean;
+  chordLineHeight: number;
 }
 
 export enum SNChordType {