菜单

国际化

相关源文件

本页介绍了 AFFiNE 的国际化 (i18n) 系统,该系统支持应用程序的多语言。内容涵盖了翻译资源结构、TypeScript 集成以实现类型安全、React Hooks 用于组件使用以及错误消息处理。

概述

AFFiNE 的国际化系统围绕 JSON 翻译文件、TypeScript 类型生成和 React 集成而构建。它提供了一个框架,可在保持代码库类型安全的同时,以用户偏好的语言显示 UI 文本。

系统架构

来源

翻译资源

翻译资源存储在 packages/frontend/i18n/src/resources/ 目录下的 JSON 文件中。每种支持的语言都有自己的文件,其中包含键值对,键是字符串标识符,值是翻译后的文本。

翻译文件结构

翻译文件使用扁平化的键值结构

翻译键有两种主要格式

  1. 简单键:例如 "Bold""Cancel"
  2. 命名空间键:例如 "com.affine.appearanceSettings.language.title"

命名空间键遵循以下约定:"com.affine.<feature>.<component>.<key>"

参数插值

某些翻译包含在运行时替换的参数

这些参数在 TypeScript 类型系统中定义,以确保正确使用。

来源

支持的语言

AFFiNE 支持多种语言,翻译完整度各不相同,在 i18n-completenesses.json 中有记录

语言代码完整性
英语en100%
简体中文zh-Hans99%
繁体中文zh-Hant99%
日语ja99%
法语fr99%
俄语ru99%
德语de99%
西班牙语es99%
阿拉伯语ar99%
波兰语pl99%
葡萄牙语(巴西)pt-BR99%
瑞典语sv-SE99%
乌克兰语uk99%
希腊语el-GR99%
意大利语it-IT100%
韩语ko57%

英语是参考语言,完整度为 100%,所有其他语言都以此为基础。

来源

TypeScript 集成

i18n 系统在 i18n.gen.ts 中生成 TypeScript 类型,以便在使用翻译时提供类型安全。这支持 IDE 自动完成、参数验证和文档。

翻译流程

来源

类型生成

i18n.gen.ts 文件导出一个 hook 函数 useAFFiNEI18N(),该函数返回一个对象,其中包含每个翻译键对应的方法

生成的类型提供了

  1. 带有英文翻译作为注释的文档
  2. 翻译中参数的类型检查
  3. IDE 中翻译键的自动完成

来源

React 集成

i18n 系统通过 useAFFiNEI18N() hook 与 React 集成,该 hook 是基于 react-i18next 库构建的。

在组件中使用翻译

React 组件中的示例用法

TypeScript 集成确保了

  1. 只能使用有效的翻译键
  2. 必需参数以正确的类型提供
  3. 错误在编译时而不是运行时被捕获

来源

国际化错误处理

i18n 系统包含错误消息的翻译,这些翻译由应用程序的错误处理系统使用。

错误键结构

翻译文件中的错误消息

错误系统架构

后端错误系统(UserFriendlyError)将错误分为几类

这些错误类型映射到 HTTP 状态码,并包含本地化消息,这些消息会以用户选择的语言显示给用户。

来源

代码到 UI 的翻译流程

下图显示了代码中的翻译键如何连接到 UI 元素

来源

最佳实践

在使用 i18n 系统时

  1. 先将新翻译添加到 en.json:所有其他语言文件都以此英文参考为基础
  2. 为新功能使用命名空间键:遵循 "com.affine.<feature>.<component>.<key>" 模式
  3. 为动态内容使用参数:避免字符串拼接,以免破坏翻译
  4. 避免在翻译中包含 HTML:改为使用 React 组件包裹翻译内容
  5. 检查翻译完整度:使用完整度跟踪来识别需要更新的语言

来源