国际化（i18n）

编辑器提供 175+ 个可翻译 label key，覆盖所有 UI 元素。默认文案为中文，并提供完整中文 labels 预设。

使用中文文案

<script setup>
import { EmailEditor, ZH_LABELS } from "@fpfe-group/email-editor-ai";
import "@fpfe-group/email-editor-ai/style.css";
</script>

<template>
  <EmailEditor :labels="ZH_LABELS" />
</template>

局部覆盖

你不需要一次性翻译全部文案，只传入需要修改的 key 即可：

<EmailEditor
  :labels="{
    editor_title: 'Mein Editor',
    undo: 'Ruckgangig',
    redo: 'Wiederholen',
    blocks: 'Bausteine',
  }"
/>

缺失的 key 会回退到默认中文文案。

创建完整翻译

完整翻译可以实现 EditorLabels 接口：

import type { EditorLabels } from "@fpfe-group/email-editor-ai";

export const DE_LABELS: Partial<EditorLabels> = {
  // Toolbar
  blocks: "Bausteine",
  styles: "Stile",
  layers: "Ebenen",
  search_blocks: "Bausteine suchen...",
  undo: "Ruckgangig",
  redo: "Wiederholen",

  // Block categories
  category_layout: "Layout",
  category_content: "Inhalt",
  category_composite: "Fertige",

  // Content blocks
  block_content_text: "Text",
  block_content_image: "Bild",
  block_content_button: "Schaltflache",

  // ... 170+ more keys
};

Label 分类

文案按功能分组：

分类	数量	示例
Toolbar	16	blocks、undo、redo、code、fullscreen
Block categories	4	category_layout、category_content
Layout blocks	6	block_layout_1_col、block_layout_2_col
Content blocks	7	block_content_text、block_content_image
Composite blocks	28	block_comp_header、block_comp_hero_banner
Node types	13	node_mj_text、node_mj_section
Property groups	10	group_background、group_spacing
Property labels	34	prop_background_color、prop_font_family
Property options	26	align_left、border_solid、mode_horizontal
UI 操作	7	delete_node、duplicate_node、move_up
全局样式	11	global_styles、email_background
行内工具栏	11	bold、italic、link、text_color_label
状态	3	loading、empty_canvas_hint

访问默认 Labels

import { DEFAULT_LABELS, ZH_LABELS } from "@fpfe-group/email-editor-ai";

// 默认中文文案
console.log(DEFAULT_LABELS.blocks); // '区块'

// 中文预设
console.log(ZH_LABELS.blocks); // '区块'

插件中的 Labels

插件上下文中也可以拿到当前 labels，因此插件可以复用宿主应用的翻译：

const myPlugin: Plugin = (ctx) => {
  // 响应式访问当前 labels
  const currentLabels = ctx.labels.value;

  ctx.registerBlock({
    id: "my-block",
    label: "my_block_label", // 使用 key
    category: "content",
    icon: "Star",
    factory: () => createText("Hello"),
  });
};