Internationalization Configuration

Type Definition

interface I18nConfig {
  /**
   * Default language
   */
  defaultLanguage?: string;

  /**
   * Supported languages list
   */
  supportedLanguages?: string[];

  /**
   * Translation resources (will be merged with core translations)
   */
  resources?: Record<string, Record<string, unknown>>;
}

Default Values

Option	Default
`defaultLanguage`	`'zh'`
`supportedLanguages`	`['zh', 'en']`

Basic Configuration

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

Built-in Translations

The core provides the following built-in translation keys:

common namespace

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

settings namespace

Key	Chinese	English
`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

Using Translations

In Components

import { useTranslation } from 'react-i18next';

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

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

Translations with Parameters

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

const { t } = useTranslation();
t('app.welcome', { name: 'John' }); // "Welcome, John!"

Pluralization

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"

Switching Languages

Use the built-in LanguageSwitcher component or customize:

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>
  );
}

Adding New Languages

Add language code to supportedLanguages
Add corresponding translations in resources

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

Dynamic Translation Loading

For large translation resources, you can load dynamically:

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

// Dynamically load translations for a language
async function loadLanguage(lang: string) {
  const resources = await import(`./locales/${lang}.json`);
  addI18nResources(lang, resources.default);
}

Complete Example

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: '服务器错误',
        },
      },
    },
  },
};

Internationalization Configuration

On this page