步骤详解 - 补充国际化文案

← 返回主文档

📋 功能描述

在 Info.json 中为新组件添加多语言文案。这些文案用于：物料面板中组件的显示名称、右侧属性面板中各字段的 label、画布中的默认文本等。确保系统在不同语言环境下都能正确显示文本。

🧩 模块描述

Info.json 是页面设计器的国际化文案文件，通过 vue-i18n 加载。文案按模块分组组织：

widget - 物料组件相关文案（名称、描述）
settings - 属性面板字段标签
common - 通用文案

📁 文件信息

文件路径

packages/form-designer/src/locales/model/Info.json

操作类型

修改 - 添加新的国际化键值对

文案类型

物料名称、属性面板标签、占位文本等

所属层级

页面设计器层 (packages/form-designer)

💻 修改示例

{
  // ... 其他文案 ...

  "widget": {
    "CommonTxt": { "title": "通用文本" },
    "CommonBtn": { "title": "通用按钮" },

    // ← 添加新组件文案
    "MyNewComponent": {
      "title": "新组件",
      "description": "这是一个新的物料组件"
    }
  },

  "settings": {
    "MyNewComponent": {
      "content": "文本内容",
      "fontSize": "字体大小",
      "color": "字体颜色",
      "placeholder": "请输入内容"
    }
  }
}
            

📝 文案规范

key 使用 camelCase 命名
中文文案直接写在当前 Info.json
如需支持多语言，在对应语言目录（如 en.json）中添加英文翻译
文案要简洁准确，符合产品术语

💡 提示

物料面板显示的名称来自 Helper 的 buildMaterialConfig().title，但该 title 通常引用 Info.json 中的国际化 key。确保 key 与 JSON 中的路径匹配。

🎉 完成！

完成以上 7 个步骤后，新的物料组件已成功添加到页面设计器中。

验证方式：

运行 pnpm form-designer:dev
访问页面设计器
检查左侧物料面板是否出现新组件
拖入画布验证渲染和属性面板