本页介绍了 AFFiNE 的国际化 (i18n) 系统,该系统支持应用程序的多语言。内容涵盖了翻译资源结构、TypeScript 集成以实现类型安全、React Hooks 用于组件使用以及错误消息处理。
AFFiNE 的国际化系统围绕 JSON 翻译文件、TypeScript 类型生成和 React 集成而构建。它提供了一个框架,可在保持代码库类型安全的同时,以用户偏好的语言显示 UI 文本。
来源
翻译资源存储在 packages/frontend/i18n/src/resources/ 目录下的 JSON 文件中。每种支持的语言都有自己的文件,其中包含键值对,键是字符串标识符,值是翻译后的文本。
翻译文件使用扁平化的键值结构
翻译键有两种主要格式
"Bold" 或 "Cancel""com.affine.appearanceSettings.language.title"命名空间键遵循以下约定:"com.affine.<feature>.<component>.<key>"。
某些翻译包含在运行时替换的参数
这些参数在 TypeScript 类型系统中定义,以确保正确使用。
来源
AFFiNE 支持多种语言,翻译完整度各不相同,在 i18n-completenesses.json 中有记录
| 语言 | 代码 | 完整性 |
|---|---|---|
| 英语 | en | 100% |
| 简体中文 | zh-Hans | 99% |
| 繁体中文 | zh-Hant | 99% |
| 日语 | ja | 99% |
| 法语 | fr | 99% |
| 俄语 | ru | 99% |
| 德语 | de | 99% |
| 西班牙语 | es | 99% |
| 阿拉伯语 | ar | 99% |
| 波兰语 | pl | 99% |
| 葡萄牙语(巴西) | pt-BR | 99% |
| 瑞典语 | sv-SE | 99% |
| 乌克兰语 | uk | 99% |
| 希腊语 | el-GR | 99% |
| 意大利语 | it-IT | 100% |
| 韩语 | ko | 57% |
英语是参考语言,完整度为 100%,所有其他语言都以此为基础。
来源
i18n 系统在 i18n.gen.ts 中生成 TypeScript 类型,以便在使用翻译时提供类型安全。这支持 IDE 自动完成、参数验证和文档。
来源
i18n.gen.ts 文件导出一个 hook 函数 useAFFiNEI18N(),该函数返回一个对象,其中包含每个翻译键对应的方法
生成的类型提供了
来源
i18n 系统通过 useAFFiNEI18N() hook 与 React 集成,该 hook 是基于 react-i18next 库构建的。
React 组件中的示例用法
TypeScript 集成确保了
来源
i18n 系统包含错误消息的翻译,这些翻译由应用程序的错误处理系统使用。
翻译文件中的错误消息
后端错误系统(UserFriendlyError)将错误分为几类
这些错误类型映射到 HTTP 状态码,并包含本地化消息,这些消息会以用户选择的语言显示给用户。
来源
下图显示了代码中的翻译键如何连接到 UI 元素
来源
在使用 i18n 系统时
en.json:所有其他语言文件都以此英文参考为基础"com.affine.<feature>.<component>.<key>" 模式来源