Skip to main content
Version: Next

Multilingual Support (i18n)

Table of Contents​

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion
  10. Appendix (if necessary)

Introduction​

This document systematically describes the multilingual support architecture, focusing on the analysis of the language manager implementation in src/libs/Language/Language.ts. The document details the loading mechanism of language packages, switching process, hot update solution, fallback handling for missing keys, support for plural forms and variable interpolation, and how to extend new languages. By analyzing the langZH.ts and langEN.ts files, it explains how to maintain language dictionaries and keep them synchronized with JSON files under public/language/. At the same time, it provides examples of using the t() function in Vue components and TS logic.

Project Structure​

The multilingual support architecture mainly consists of the following parts:

  • src/libs/Language/: Contains the core implementation of the language manager
  • src/libs/Language/i18n/: Contains language package files for different languages
  • public/language/: Contains language files in JSON format
  • src/components/: Contains Vue components that use multilingual functionality

Chart Source

Section Source

Core Components​

Core components mainly include the language manager Language class and related language package files. The language manager is responsible for managing language switching, loading, and translation functions. Language package files contain translation dictionaries for different languages.

Section Source

Architecture Overview​

The multilingual support architecture adopts a layered design, mainly including the language manager layer, language package layer, and usage layer. The language manager layer is responsible for providing a unified API interface, the language package layer is responsible for storing translation content in different languages, and the usage layer is responsible for calling translation functions in specific components.

Chart Source

Detailed Component Analysis​

Language Manager Analysis​

The language manager Language class is the core of multilingual support, providing the t() function for translating text. A translation function for specific namespaces can be created through the scope function.

Class Diagram​

Chart Source

Language Switching Process​

Chart Source

Section Source

Language Package Analysis​

Language package files contain translation dictionaries for different languages, organized in the form of nested objects.

Language Package Structure​

Chart Source

Section Source

Dependency Analysis​

The multilingual support architecture depends on the models.Language class in the SDK, imported via import sdk from 'sdk'. At the same time, there is no interdependency between language package files, and each file independently contains the translation content of one language.

Chart Source

Section Source

Performance Considerations​

Language packages are loaded using static imports, avoiding the performance overhead of dynamic imports at runtime. At the same time, the implementation of the translation function t() has been optimized to ensure good performance even when called frequently.

Troubleshooting Guide​

When encountering issues with incorrect translation content or ineffective language switching, you can check the following:

  1. Confirm whether the key-value pairs in the language package files are correct
  2. Check whether the instantiation parameters of the language manager are correct
  3. Verify whether the calling method of the t() function is correct

Section Source

Conclusion​

This document details the implementation of the multilingual support architecture, including the working principle of the language manager, the organization of language packages, and the usage of translation functions. Through this architecture, the system can flexibly support multiple languages and provide a good user experience.

Appendix​

Usage Example​

Example of using the t() function in a Vue component:

import { _t } from '@/libs/Language/Language'

// Use in component
const title = _t('手动工位设置')
const placeholder = _t('请输入可访问IP')

Section Source

Last updated on