feat(layout): 增强布局构建逻辑以支持元信息行的处理

- 删除 LAYOUT_SIZE_DESIGN.md 文档。
- 在 SNLayoutBuilder 中添加对 Score 和 Section 元信息行的处理逻辑，确保标题和信息行能够正确创建并添加到布局中。
- 更新 SVG 渲染逻辑，支持元信息标题和信息行的居中和对齐，提升视觉效果。
- 引入新的辅助函数 createTitleLine 和 createInfoLine，以简化元信息行的创建过程。

该变更提升了布局构建的能力，增强了代码的可维护性和可扩展性。

Author: Encaik

packages/simple-notation/docs/LAYOUT_SIZE_DESIGN.md

@@ -125,12 +125,39 @@ export class SNLayoutBuilder {
       // 先计算 Block 的宽度（这样子节点 Section Block 可以获取父节点宽度）
       this.calculateNodeWidth(scoreBlock);
 
+      // 计算所有子节点（包括元信息行）的宽度和高度
+      if (scoreBlock.children) {
+        for (const child of scoreBlock.children) {
+          this.calculateNodeWidth(child);
+          this.calculateNodeHeight(child);
+        }
+      }
+
       // 构建 Section 节点
       this.buildSections(score.children || [], scoreBlock);
 
       // 子节点构建完成后，计算 Score Block 的高度和位置
       this.calculateNodeHeight(scoreBlock);
       this.calculateNodePosition(scoreBlock);
+
+      // 计算所有子节点（包括元信息行和Section）的位置
+      if (scoreBlock.children) {
+        for (const child of scoreBlock.children) {
+          // 先确保子节点的宽度和高度已计算
+          this.calculateNodeWidth(child);
+          this.calculateNodeHeight(child);
+          // 计算子节点的位置
+          this.calculateNodePosition(child);
+          // 如果子节点是Line，需要递归计算其子节点（Element）的位置
+          if (child.children) {
+            for (const grandChild of child.children) {
+              this.calculateNodeWidth(grandChild);
+              this.calculateNodeHeight(grandChild);
+              this.calculateNodePosition(grandChild);
+            }
+          }
+        }
+      }
     }
   }
 
@@ -156,6 +183,14 @@ export class SNLayoutBuilder {
       // 先计算 Block 的宽度（这样子节点 VoiceGroup 可以获取父节点宽度）
       this.calculateNodeWidth(sectionBlock);
 
+      // 计算所有子节点（包括元信息行）的宽度和高度
+      if (sectionBlock.children) {
+        for (const child of sectionBlock.children) {
+          this.calculateNodeWidth(child);
+          this.calculateNodeHeight(child);
+        }
+      }
+
       // 构建 VoiceGroup（包含所有 Voice，并处理分行逻辑）
       this.buildVoiceGroups(
         (section.children || []) as SNParserNode[],
@@ -165,6 +200,25 @@ export class SNLayoutBuilder {
       // 子节点构建完成后，计算 Section Block 的高度和位置
       this.calculateNodeHeight(sectionBlock);
       this.calculateNodePosition(sectionBlock);
+
+      // 计算所有子节点（包括元信息行和VoiceGroup）的位置
+      if (sectionBlock.children) {
+        for (const child of sectionBlock.children) {
+          // 先确保子节点的宽度和高度已计算
+          this.calculateNodeWidth(child);
+          this.calculateNodeHeight(child);
+          // 计算子节点的位置
+          this.calculateNodePosition(child);
+          // 如果子节点是Line，需要递归计算其子节点（Element）的位置
+          if (child.children) {
+            for (const grandChild of child.children) {
+              this.calculateNodeWidth(grandChild);
+              this.calculateNodeHeight(grandChild);
+              this.calculateNodePosition(grandChild);
+            }
+          }
+        }
+      }
     }
   }
 
@@ -679,7 +733,28 @@ export class SNLayoutBuilder {
           node.layout.width > 0;
 
         if (!hasFixedWidth) {
-          if (node.children && node.children.length > 0) {
+          // 检查是否是元信息标题容器元素（需要撑满父级宽度）
+          const nodeData = node.data as any;
+          const isMetadataTitleContainer =
+            nodeData?.type === 'metadata-title-container' ||
+            nodeData?.type === 'metadata-section-title-container';
+
+          if (isMetadataTitleContainer && node.parent) {
+            // 元信息标题元素：撑满父级可用宽度
+            const parentAvailableWidth = node.getParentAvailableWidth();
+            if (parentAvailableWidth !== null && parentAvailableWidth > 0) {
+              const padding = node.layout.padding || {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+              };
+              node.layout.width =
+                parentAvailableWidth - padding.left - padding.right;
+            } else {
+              node.layout.width = 0;
+            }
+          } else if (node.children && node.children.length > 0) {
             const childrenMaxWidth = node.calculateChildrenMaxWidth();
             const padding = node.layout.padding || {
               top: 0,
@@ -809,30 +884,83 @@ export class SNLayoutBuilder {
     // 对于垂直排列的节点（Block, Line），X = 父节点的padding.left
     // 对于水平排列的节点（Element），X = 父节点的padding.left + 前面兄弟节点的累积宽度
     if (node instanceof SNLayoutElement) {
-      // Element节点：水平排列，需要累加前面兄弟节点的宽度
-      let x = parentPadding.left;
+      // 检查是否是右对齐的元信息元素（如作词作曲）
+      const nodeData = node.data as any;
+      const isRightAlignedMetadata =
+        nodeData?.type === 'metadata-contributors' &&
+        nodeData?.align === 'right';
+
+      if (isRightAlignedMetadata && node.parent instanceof SNLayoutLine) {
+        // 右对齐的元信息元素：计算位置使其位于行的右侧
+        // 确保父节点（Line）的宽度已计算
+        if (
+          !parentLayout.width ||
+          typeof parentLayout.width !== 'number' ||
+          parentLayout.width === 0
+        ) {
+          // 如果父节点宽度未计算，先计算父节点宽度
+          this.calculateNodeWidth(node.parent);
+        }
 
-      const siblingIndex = node.parent.children?.indexOf(node) ?? -1;
-      if (siblingIndex > 0 && node.parent.children) {
-        for (let i = 0; i < siblingIndex; i++) {
-          const sibling = node.parent.children[i];
-          if (sibling.layout) {
-            const siblingWidth =
-              typeof sibling.layout.width === 'number'
-                ? sibling.layout.width
-                : 0;
-            const siblingMargin = sibling.layout.margin || {
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            };
-            // 累加兄弟节点的宽度和右边margin
-            x += siblingWidth + siblingMargin.right;
+        const parentWidth =
+          typeof parentLayout.width === 'number' ? parentLayout.width : 0;
+        const elementWidth =
+          typeof node.layout.width === 'number' ? node.layout.width : 0;
+        const elementPadding = node.layout.padding || {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        };
+
+        // 如果父节点宽度仍然为0，使用父节点的父节点宽度
+        let actualParentWidth = parentWidth;
+        if (actualParentWidth === 0 && node.parent.parent?.layout) {
+          const grandParentWidth =
+            typeof node.parent.parent.layout.width === 'number'
+              ? node.parent.parent.layout.width
+              : 0;
+          if (grandParentWidth > 0) {
+            actualParentWidth = grandParentWidth;
+          }
+        }
+
+        // x = 父节点可用宽度 - 元素宽度
+        // 父节点可用宽度 = 父节点宽度 - 父节点padding.left - 父节点padding.right
+        const parentAvailableWidth =
+          actualParentWidth - parentPadding.left - parentPadding.right;
+        // 元素实际占用宽度 = 元素宽度 + 元素padding.left + 元素padding.right
+        const elementTotalWidth =
+          elementWidth + elementPadding.left + elementPadding.right;
+        // x = 父节点padding.left + (父节点可用宽度 - 元素实际占用宽度)
+        node.layout.x =
+          parentPadding.left + parentAvailableWidth - elementTotalWidth;
+      } else {
+        // Element节点：水平排列，需要累加前面兄弟节点的宽度
+        let x = parentPadding.left;
+
+        const siblingIndex = node.parent.children?.indexOf(node) ?? -1;
+        if (siblingIndex > 0 && node.parent.children) {
+          for (let i = 0; i < siblingIndex; i++) {
+            const sibling = node.parent.children[i];
+            if (sibling.layout) {
+              const siblingWidth =
+                typeof sibling.layout.width === 'number'
+                  ? sibling.layout.width
+                  : 0;
+              const siblingMargin = sibling.layout.margin || {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+              };
+              // 累加兄弟节点的宽度和右边margin
+              x += siblingWidth + siblingMargin.right;
+            }
           }
         }
+        node.layout.x = x;
       }
-      node.layout.x = x;
     } else {
       // Block和Line节点：垂直排列，X = 父节点的padding.left
       node.layout.x = parentPadding.left;

packages/simple-notation/src/layout/builder.ts

@@ -0,0 +1,107 @@
+/**
+ * 元信息格式化工具函数
+ *
+ * 用于格式化乐谱元信息（标题、调号、拍号、速度、创作者等）为可显示的文本
+ */
+
+import type {
+  SNKeySignature,
+  SNTimeSignature,
+  SNTempo,
+} from '@core/model/music';
+import type { SNContributor, SNScoreProps } from '@data/model/props';
+
+/**
+ * 格式化调号文本
+ *
+ * @param keySignature - 调号对象
+ * @returns 格式化后的调号文本，如 "1 = C"、"1 = ♯G"、"1 = ♭F"
+ */
+export function formatKeySignature(keySignature?: SNKeySignature): string {
+  if (!keySignature) return '';
+
+  const { symbol, letter } = keySignature;
+  let symbolText = '';
+
+  if (symbol === 'sharp') {
+    symbolText = '♯';
+  } else if (symbol === 'flat') {
+    symbolText = '♭';
+  }
+
+  return `1 = ${symbolText}${letter}`;
+}
+
+/**
+ * 格式化拍号文本
+ *
+ * @param timeSignature - 拍号对象
+ * @returns 格式化后的拍号文本，如 "4/4"、"3/4"、"6/8"
+ */
+export function formatTimeSignature(timeSignature?: SNTimeSignature): string {
+  if (!timeSignature) return '';
+
+  const { numerator, denominator } = timeSignature;
+  return `${numerator}/${denominator}`;
+}
+
+/**
+ * 格式化速度文本
+ *
+ * @param tempo - 速度对象
+ * @returns 格式化后的速度文本，如 "♩ = 120"
+ */
+export function formatTempo(tempo?: SNTempo): string {
+  if (!tempo) return '';
+
+  const { value } = tempo;
+  return `♩ = ${value}`;
+}
+
+/**
+ * 格式化创作者信息文本
+ *
+ * @param contributors - 创作者列表
+ * @returns 格式化后的创作者文本，如 "作曲：张三"、"作词：李四"
+ */
+export function formatContributors(contributors?: SNContributor[]): string {
+  if (!contributors || contributors.length === 0) return '';
+
+  const roleMap: Record<SNContributor['role'], string> = {
+    composer: '作曲',
+    lyricist: '作词',
+    arranger: '编曲',
+    transcriber: '转录',
+  };
+
+  const parts: string[] = [];
+  for (const contributor of contributors) {
+    const roleName = roleMap[contributor.role] || contributor.role;
+    parts.push(`${roleName}：${contributor.name}`);
+  }
+
+  return parts.join('  ');
+}
+
+/**
+ * 提取并格式化音乐信息（调号、拍号、速度）
+ *
+ * @param props - 乐谱属性
+ * @returns 格式化后的音乐信息文本，如 "1 = C  4/4  ♩ = 120"
+ */
+export function formatMusicInfo(props?: SNScoreProps): string {
+  if (!props) return '';
+
+  const parts: string[] = [];
+
+  const keyText = formatKeySignature(props.keySignature);
+  if (keyText) parts.push(keyText);
+
+  const timeText = formatTimeSignature(props.timeSignature);
+  if (timeText) parts.push(timeText);
+
+  const tempoText = formatTempo(props.tempo);
+  if (tempoText) parts.push(tempoText);
+
+  return parts.join('  ');
+}