国际化
渲染进程与主进程的 i18next,内置英文与简体中文。
模板在 React 渲染进程与 Electron 主进程中使用同一套 i18next 资源。页面文字、原生 菜单、托盘标签、命令面板与设置文案都来自同一个翻译系统。
出厂内容
| 层 | 文件 | 作用 |
|---|---|---|
| 语言 JSON | app/locales/{en,zh}/{common,auth,settings,showcase}.json | 按 namespace 分组的翻译文案。 |
| 资源注册 | app/lib/i18n/resources.ts | 导入 locale JSON,声明支持语言、namespaces 与 fallback language。 |
| 渲染进程 i18n | app/lib/i18n/index.ts | 用 react-i18next 初始化 i18next,并暴露 changeLanguage。 |
| 启动引导 | app/lib/i18n/bootstrap.ts | React 挂载前读取持久化语言设置。 |
| 主进程 i18n | lib/main/i18n.ts | 为原生菜单与托盘文字创建独立 i18next 实例。 |
模板默认包含英文(en)与简体中文(zh)。common 是默认 namespace;
settings 与 auth 保存功能相关文案。
showcase 标记为 [template-demo]。当你的产品页面替换演示层后,应连同
Showcase 一起删除这个 namespace。
启动与运行时流程
渲染进程启动时,app/renderer.tsx 会先调用 bootstrapI18n(),再挂载 React:
- 通过 Conveyor 读取
settings.locale。 - 如果值是
en或zh,使用该语言。 - 如果值是
system,向主进程查询app.getLocale()。 - 不支持的系统语言回退到
en。 - 用有效语言初始化渲染进程 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 中把语言代码加入
localeSettingSchema 与 supportedLanguageSchema。同步更新仍只列出 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.json与app/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