Skip to content

国际化

CURD 组件支持国际化配置,可以自定义各种文案。

配置方式

ts
import { createCurdConfig } from '@uozi-admin/curd'

app.use(createCurdConfig({
  i18n: {
    // 设置语言
    locale: 'zh-CN',

    // 自定义文案
    messages: {
      'zh-CN': {
        view: '查看',
        edit: '编辑',
        delete: '删除',
        restore: '恢复',
        deletePermanently: '彻底删除',
        save: '保存',
        close: '关闭',
        reset: '重置',
        // ...
      },
      'en-US': {
        view: 'View',
        edit: 'Edit',
        delete: 'Delete',
        restore: 'Restore',
        deletePermanently: 'Delete Permanently',
        save: 'Save',
        close: 'Close',
        reset: 'Reset',
        // ...
      }
    }
  }
}))

获取当前语言

ts
import { useLocale } from '@uozi-admin/curd'

const { getLocale } = useLocale()

// 获取当前语言
const locale = getLocale()

切换语言

@uozi-admin/curd 内部会根据 ant-design-vuelocale 自动切换语言。一般无需手动切换。

如需手动切换 @uozi-admin/curd 语言,可以通过以下方式:

ts
import { useLocale } from '@uozi-admin/curd'

const { setLocale } = useLocale()

// 切换语言
setLocale('en-US')

支持语言

@uozi-admin/curd 语言代码遵循 ISO 639-1ISO 3166-1 标准。

内置支持以下语言:

语言代码
中文zh-CN
英文en-US
台湾繁体中文zh-TW
香港繁体中文zh-HK

自定义语言

如所需语言不在内置语言中,可以通过 i18n 配置自定义语言。

如缺失法语(fr-FR),可以通过以下方式配置:

ts
import { createCurdConfig } from '@uozi-admin/curd'

app.use(createCurdConfig({
  i18n: {
    messages: {
      'fr-FR': { 
        view: 'Voir', 
        edit: 'Modifier', 
        delete: 'Supprimer', 
        restore: 'Restaurer', 
        deletePermanently: 'Supprimer définitivement', 
        save: 'Enregistrer', 
        close: 'Fermer', 
        reset: 'Réinitialiser', 
        // ...//
      }, 
    },
  }
}))

导出翻译字段工具

CURD 提供了一个导出翻译字段工具脚本 generateTranslations.js,它可以将内置的 JSON 格式的翻译文件转换为 TypeScript/JavaScript 代码,同时保持原始的层级结构,方便用户在应用中执行 gettext 翻译并加载其他语言的翻译。

使用方法

bash
node packages/curd/scripts/generateTranslations.js [选项]

选项

选项说明默认值
--output <path>输出文件路径src/curd_translations.ts
--wrapper <func>用于包装翻译的函数名$gettext
--help显示帮助信息-

示例

基本用法:

bash
node packages/curd/scripts/generateTranslations.js

自定义输出路径:

bash
node packages/curd/scripts/generateTranslations.js --output src/i18n/translations.ts

自定义包装函数:

bash
node packages/curd/scripts/generateTranslations.js --wrapper "t" --output src/locale.js

输出格式

脚本会保留原始 JSON 的层级结构,并将所有字符串值包装在指定的函数中:

js
export const translations = {
  key1: $gettext('value1'),
  key2: $gettext('value2'),
  nestedKey: {
    subKey1: $gettext('subValue1')
  }
}

根据 Apache-2.0 许可发布。