国际化
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-vue
的 locale
自动切换语言。一般无需手动切换。
如需手动切换 @uozi-admin/curd
语言,可以通过以下方式:
ts
import { useLocale } from '@uozi-admin/curd'
const { setLocale } = useLocale()
// 切换语言
setLocale('en-US')
支持语言
@uozi-admin/curd
语言代码遵循 ISO 639-1 和 ISO 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')
}
}