Flash Warehouse Goes Global: Implementing Chinese, English, and Russian i18n

Why a WMS Needs Internationalization

The user base for warehouse management software is expanding beyond domestic borders. With the growth of cross-border e-commerce and international trade corridors, small and medium businesses increasingly need to share inventory data with overseas partners. A Chinese-only WMS becomes a collaboration bottleneck in these scenarios.

Flash Warehouse WMS currently supports three languages: Simplified Chinese (zh-CN), English (en-US), and Russian (ru-RU). These cover the PC management interface, mobile application, and marketing website, spanning over 10 business modules and thousands of translation strings.

Architecture: Two i18n Frameworks in Parallel

Flash Warehouse's frontend consists of three independent projects, each with its own internationalization approach.

PC and Mobile: vue-i18n

The PC management interface (Vue 3 + TDesign) and mobile app (uni-app) both use vue-i18n 9.x in Composition API mode. Translation files are split by business module:

flash_warehouse_pc/src/locales/
  zh-CN/
    common.js      # Buttons, statuses, messages, units
    login.js       # Authentication pages
    home.js        # Dashboard and navigation
    purchase.js    # Procurement module
    sales.js       # Sales module
    warehouse.js   # Warehouse operations
    staff.js       # Employee management
    partner.js     # Suppliers and customers
    settings.js    # System configuration
    mcp.js         # MCP integration
  en-US/           # Identical structure
  ru-RU/           # Identical structure

The mobile app follows a similar pattern but includes additional modules like bill.js, cooperative.js, permission.js, and profile.js -- 16 module files per language. The PC frontend has approximately 2,400 lines of translation code per language; the mobile app has around 1,700.

Templates use the standard $t('common.button.add') syntax. The createI18n configuration sets legacy: false for Composition API support and fallbackLocale: 'zh-CN' to ensure missing translations fall back to Chinese.

Marketing Website: next-intl

The marketing website runs on Next.js 15 deployed to Cloudflare Pages, using next-intl for internationalization. It currently supports Chinese (zh) and English (en) with JSON translation files totaling approximately 5,500 lines.

Due to Cloudflare Workers Edge Runtime constraints, translation files use static imports rather than dynamic import(). The routing configuration uses localePrefix: 'always', so URLs always include the language prefix (e.g., /zh/about, /en/about). Server components call setRequestLocale(locale), while client components use the useTranslations('Namespace') hook.

IP-Based Language Auto-Detection

Requiring users to manually select a language on first visit is poor UX. Flash Warehouse's PC interface implements automatic language detection via IP geolocation, with the following priority:

1. localStorage -- user's explicit language choice (highest priority)
2. IP geolocation -- via the ip-api.com service
3. Browser language preference -- navigator.language
4. Default Chinese

The IP detection maps country codes to languages:

• Chinese regions: CN, TW, HK, MO, SG
• Russian-speaking regions: RU, BY, KZ, UA
• All other regions: default to English

The detection result is cached in localStorage under a wms-language-ip-detected flag to prevent redundant API calls. Once a user manually switches languages, the system clears the IP detection flag and never overrides their choice again.

The Russian UI Challenge

Among the three languages, Russian has the most significant impact on UI layout.

Text Length Expansion

Russian text is typically 3 to 5 times longer than Chinese and 1.5 to 2 times longer than English for the same meaning:

To fit Russian text into button and table column constraints, we systematically abbreviated Russian translations. In common.js, the button labels use truncated forms:

// Russian buttons use abbreviated forms
button: {
  add: 'Добав.',      // instead of full Добавить
  edit: 'Ред.',        // instead of Редактировать
  delete: 'Удал.',     // instead of Удалить
  save: 'Сохр.',       // instead of Сохранить
  export: 'Эксп.',     // instead of Экспортировать
  refresh: 'Обнов.',   // instead of Обновить
}

Custom TDesign Russian Locale

TDesign UI does not ship with an official Russian language pack. Flash Warehouse provides a complete custom Russian locale covering pagination, cascader, calendar, date picker, upload, form validation, tables, and more -- over 260 lines of component-level translations. These are injected via t-config-provider's globalConfig and switch in real time with the language.

Date Format Differences

Russian dates use DD.MM.YYYY format (e.g., 31.05.2026), which differs from both Chinese ("2026年5月31日") and English ("May 31, 2026"). The date picker configuration requires a separate dayjsLocale: 'ru' setting and Russian-specific format strings.

Why Russian Was Chosen

Adding Russian as the third language was a deliberate decision. The Central Asian trade corridor -- Kazakhstan, Uzbekistan, Kyrgyzstan, and neighboring countries -- represents an important export market for Chinese SMBs. Russian serves as the common business language across these nations.

In the IP detection country mapping, Russian covers four country codes: Russia (RU), Belarus (BY), Kazakhstan (KZ), and Ukraine (UA). The warehouse management needs of these regions differ from domestic Chinese operations, but Flash Warehouse's multi-tenant architecture (data isolation via binding_user_id) natively supports cross-regional deployment.

Translation File Maintenance

Managing translation files across three languages carries risks of missing keys and structural drift. Flash Warehouse addresses this with several strategies:

Modular splitting: Each business module has its own translation file rather than one monolithic JSON. The PC frontend has 10 module files; the mobile app has 16. When adding a feature, only the corresponding module's translation files need updating.

Chinese as the baseline: The Chinese locale (zh-CN) is the source of truth. New translation keys are added to Chinese first, then synchronized to English and Russian. The fallbackLocale: 'zh-CN' configuration ensures users never see blank strings if a translation is missing.

Parallel structure enforcement: The aggregation files (index.js) for all three languages import the exact same set of modules. If Chinese has common, login, home, and 7 other modules, English and Russian must have the same 10 modules with identical structure.

Summary

Internationalization extends far beyond translating strings. It involves language detection strategy, UI layout adaptation, component library localization, and date format handling. Flash Warehouse's current three-language system spans the PC interface (10 modules x 3 languages), mobile app (16 modules x 3 languages), and marketing website (2 languages), totaling over 15,000 lines of translation code.

For WMS projects planning multilingual support, the recommendation is to establish the i18n architecture early in development. Languages like Russian, with wider character glyphs and longer word forms, require UI designs that accommodate significant text expansion from the start.