国际化

渲染进程与主进程的 i18next,内置英文与简体中文。

模板在 React 渲染进程与 Electron 主进程中使用同一套 i18next 资源。页面文字、原生 菜单、托盘标签、命令面板与设置文案都来自同一个翻译系统。

出厂内容

文件作用
语言 JSONapp/locales/{en,zh}/{common,auth,settings,showcase}.json按 namespace 分组的翻译文案。
资源注册app/lib/i18n/resources.ts导入 locale JSON,声明支持语言、namespaces 与 fallback language。
渲染进程 i18napp/lib/i18n/index.tsreact-i18next 初始化 i18next,并暴露 changeLanguage
启动引导app/lib/i18n/bootstrap.tsReact 挂载前读取持久化语言设置。
主进程 i18nlib/main/i18n.ts为原生菜单与托盘文字创建独立 i18next 实例。

模板默认包含英文(en)与简体中文(zh)。common 是默认 namespace; settingsauth 保存功能相关文案。

showcase 标记为 [template-demo]。当你的产品页面替换演示层后,应连同 Showcase 一起删除这个 namespace。

启动与运行时流程

渲染进程启动时,app/renderer.tsx 会先调用 bootstrapI18n(),再挂载 React:

  1. 通过 Conveyor 读取 settings.locale
  2. 如果值是 enzh,使用该语言。
  3. 如果值是 system,向主进程查询 app.getLocale()
  4. 不支持的系统语言回退到 en
  5. 用有效语言初始化渲染进程 i18n。

当前 bootstrap 会把解析后的 system 选择写回 settings,因此后续启动结果是确定的。

运行时语言切换发生在 Settings → General。GeneralSection 更新 settings store, 调用渲染进程 changeLanguage(effective),再通过 Conveyor 调用 app.setLocale(effective)。主进程 handler 会调用 setMainLanguage() 并触发 onLocaleChanged,从而重建原生菜单并刷新托盘本地化标签。

添加一种语言

添加语言文件

为每个 namespace 创建一个 JSON 文件:

app/locales/fr/common.json
app/locales/fr/auth.json
app/locales/fr/settings.json
app/locales/fr/showcase.json

如果已经删除演示层,可以省略 showcase.json

注册语言

app/lib/i18n/resources.ts 中导入文件,把语言代码加入 SUPPORTED_LANGUAGES,并在 resources 下加入新的资源对象。

扩展 settings schemas

lib/conveyor/schemas/app-schema.ts 中把语言代码加入 localeSettingSchemasupportedLanguageSchema。同步更新仍只列出 en | zh 的 TypeScript union。

添加设置项标签

在每个 locale 中添加 settings:general.language.fr,让 General 语言选择器能显示 新选项。

验证两个进程

在 Settings → General 切换到新语言。确认 React 文案、原生菜单标签与托盘菜单标签 都能在不重启的情况下更新。

翻译键

组件不在默认 namespace 中时,使用 namespaced keys:

const { t } = useTranslation('settings')

return <h1>{t('appearance.title')}</h1>

跨 namespace 调用时带上 namespace 前缀:

i18next.t('auth:toasts.signedOut')

原生菜单与托盘代码使用 lib/main/i18n.ts 导出的 t(),但 key 来自同一套资源。 菜单标签大多位于 common:menu.*

删除 Showcase 翻译

删除演示层时:

  • 删除 app/locales/en/showcase.jsonapp/locales/zh/showcase.json
  • 移除 app/lib/i18n/resources.ts 中的 showcase imports。
  • I18N_NAMESPACES 以及每个语言的 resources 中移除 showcase
  • 清理 routes、palette sources 或 tests 中残留的 showcase: keys。

运行:

rg "showcase:" app lib
pnpm lint:check && pnpm typecheck && pnpm test

相关页面

On this page