国际化配置

类型定义

interface I18nConfig {
  /**
   * 默认语言
   */
  defaultLanguage?: string;

  /**
   * 支持的语言列表
   */
  supportedLanguages?: string[];

  /**
   * 翻译资源（会与基座翻译合并）
   */
  resources?: Record<string, Record<string, unknown>>;
}

默认值

配置项	默认值
`defaultLanguage`	`'zh'`
`supportedLanguages`	`['zh', 'en']`

基本配置

i18n: {
  defaultLanguage: 'zh',
  supportedLanguages: ['zh', 'en'],
  resources: {
    en: {
      app: {
        name: 'My App',
        home: 'Home',
      },
    },
    zh: {
      app: {
        name: '我的应用',
        home: '首页',
      },
    },
  },
},

基座内置翻译

基座提供以下内置翻译 key：

common 命名空间

Key	中文	英文
`common.loading`	加载中...	Loading...
`common.error`	错误	Error
`common.confirm`	确认	Confirm
`common.cancel`	取消	Cancel
`common.save`	保存	Save
`common.delete`	删除	Delete

settings 命名空间

Key	中文	英文
`settings.title`	设置	Settings
`settings.general`	常规	General
`settings.about`	关于	About
`settings.language`	语言	Language
`settings.theme`	主题	Theme
`settings.theme.light`	浅色	Light
`settings.theme.dark`	深色	Dark
`settings.theme.system`	跟随系统	System
`settings.version`	版本	Version
`settings.checkUpdate`	检查更新	Check for Updates

使用翻译

在组件中使用

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('app.name')}</h1>
      <p>{t('common.loading')}</p>
    </div>
  );
}

带参数的翻译

resources: {
  en: {
    app: {
      welcome: 'Welcome, {{name}}!',
    },
  },
  zh: {
    app: {
      welcome: '欢迎，{{name}}！',
    },
  },
},

const { t } = useTranslation();
t('app.welcome', { name: 'John' }); // "欢迎，John！"

复数形式

resources: {
  en: {
    app: {
      items: '{{count}} item',
      items_other: '{{count}} items',
    },
  },
  zh: {
    app: {
      items: '{{count}} 个项目',
    },
  },
},

t('app.items', { count: 1 }); // "1 item"
t('app.items', { count: 5 }); // "5 items"

切换语言

使用内置的 LanguageSwitcher 组件或自定义：

import { changeLanguage, getCurrentLanguage } from '@linch-tech/desktop-core';

function LanguageSelect() {
  const handleChange = async (lang: string) => {
    await changeLanguage(lang);
  };

  return (
    <select
      value={getCurrentLanguage()}
      onChange={(e) => handleChange(e.target.value)}
    >
      <option value="zh">中文</option>
      <option value="en">English</option>
    </select>
  );
}

添加新语言

在 supportedLanguages 中添加语言代码
在 resources 中添加对应翻译

i18n: {
  defaultLanguage: 'zh',
  supportedLanguages: ['zh', 'en', 'ja'],  // 添加日语
  resources: {
    en: { ... },
    zh: { ... },
    ja: {
      app: {
        name: 'マイアプリ',
        home: 'ホーム',
      },
      settings: {
        title: '設定',
      },
    },
  },
},

动态加载翻译

如果翻译资源较大，可以动态加载：

import { addI18nResources } from '@linch-tech/desktop-core';

// 动态加载某个语言的翻译
async function loadLanguage(lang: string) {
  const resources = await import(`./locales/${lang}.json`);
  addI18nResources(lang, resources.default);
}

完整示例

export const config = {
  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My Desktop App',
          home: 'Home',
          dashboard: 'Dashboard',
          welcome: 'Welcome, {{name}}!',
          items: '{{count}} item',
          items_other: '{{count}} items',
        },
        errors: {
          notFound: 'Page not found',
          serverError: 'Server error',
        },
      },
      zh: {
        app: {
          name: '我的桌面应用',
          home: '首页',
          dashboard: '仪表盘',
          welcome: '欢迎，{{name}}！',
          items: '{{count}} 个项目',
        },
        errors: {
          notFound: '页面未找到',
          serverError: '服务器错误',
        },
      },
    },
  },
};

目录