国际化

由 i18next 驱动的界面、菜单与托盘翻译。

模板用同一个 i18next 实例驱动 React 界面、原生应用菜单和托盘菜单。由于这些 Tauri 原生界面由 TypeScript 构建,无需再维护一套 Rust 端或独立原生进程的翻译系统。

已集成的结构

文件作用
翻译 JSONsrc/locales/{en,zh}/{common,auth,settings,showcase}.json按命名空间组织的英文和简体中文文案
资源注册src/lib/i18n/resources.ts语言、命名空间、导入、回退和 locale 解析
React 集成src/lib/i18n/index.tsreact-i18next 初始化 i18next,并导出 changeLanguage()
偏好设置src/lib/settings/schema.tsstore.ts校验并持久化 systemenzh
原生标签src/lib/menu/labels.ts通过同一实例解析 common:menu.*common:tray.*

common 是默认命名空间,settingsauth 分别保存对应功能的文案。 showcase 带有 [template-demo] 标记,应与可删除的演示层一起移除。

启动与运行时切换

App.tsx 会先同步初始化英文,确保第一次渲染已有可用资源。随后,启动 effect 读取 settings.locale

  1. enzh 直接生效。
  2. systemnavigator.language 解析。
  3. zh-CN 这类 locale 会缩减到受支持的主标签 zh
  4. 缺失或不支持的值回退到英文。

默认保存值是 system。与当前没有调用方的 src/lib/i18n/bootstrap.ts 不同,实际的 App.tsx 启动路径不会把 system 覆盖成解析后的具体语言。

运行时可在 设置 → 通用 → 语言 中切换。GeneralSection 保存偏好并调用 changeLanguage()initNativeShell() 监听 i18next 的 languageChanged 事件,重新安装应用菜单,并刷新当前已启用的托盘菜单。因此 React 与原生标签都能立即更新。

保留下来的 Conveyor 兼容调用 app.setLocale() 在 Tauri 模板中是空实现。 原生界面之所以能本地化,是因为菜单和托盘均由 JavaScript 构建,并监听同一个 i18next 实例。

使用翻译键

在 React 组件中指定命名空间:

const { t } = useTranslation('settings')

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

在未绑定命名空间的代码中,使用完整前缀:

i18n.t('common:menu.checkForUpdates')

所有语言文件应保持相同结构。src/lib/menu/labels.ts 提供英文默认标签, 让菜单在初始化完成前也能构建,但这不能替代对 common:menu.*common:tray.* 的完整翻译。

添加一种语言

添加全部命名空间文件

创建 src/locales/fr/common.jsonauth.jsonsettings.jsonshowcase.json。如果已经删除演示层,则无需创建 showcase.json

注册资源

src/lib/i18n/resources.ts 中导入新文件,将 fr 加入 SUPPORTED_LANGUAGES,并在 resources 中添加 fr 对象。

扩展持久化设置

src/lib/settings/schema.tslocaleSettingSchemasupportedLanguageSchema 中加入 fr,同时更新仍只列出 en | zh 的显式联合类型与测试。

添加选项名称

在每种语言的 settings.json 中添加 general.language.fr。 “通用”页面会根据 SUPPORTED_LANGUAGES 生成选项,因此注册后会自动出现法语。

验证所有界面

切换到法语并重启应用,检查页面、对话框、通知提示、命令面板、应用菜单和托盘菜单。 再使用一种不支持的系统语言,确认它会回退到英文。

删除 Showcase 命名空间

移除演示层时:

  • 删除 src/locales/en/showcase.jsonsrc/locales/zh/showcase.json
  • resources.ts 删除对应导入和资源项。
  • I18N_NAMESPACES 删除 showcase
  • 清理其余 showcase: 调用与测试。
rg "showcase:" src
pnpm lint:check && pnpm typecheck && pnpm test

相关页面

On this page