Multilingual Settings

Multilingual settings are required during the development of control panels. tuya-panel-kit provides the built-in internationalization module to configure multilingual settings.

Configure multilingual settings

Define the following languages in the file src/i18n/strings.{js,ts}.

// Both the `en` and `zh` fields must be defined.
export default {
  en: {
    hello: 'Hello',
  },
  zh: {
    hello: '你好',
  }
};

Generate and export multilingual settings

Export the instance from the file src/i18n/index.{js,ts}.

import { I18N } from 'tuya-panel-kit';
import Strings from './strings';

export default new I18N(Strings);

Use multilingual settings

The multilingual settings apply to any multilingual scenario.

import Strings from '../i18n';

const localizedText = Strings.getLang('hello');

console.log(localizedText);

Define the rules to set multilingual keys

For more information about the use of the bitmap type, see How to use of bitmap.

export default {
  en: {
    dsc_edit: 'Edit', // Basic multilingual settings start with `dsc_` and define the semantics.
    dsc_countdown_on: 'Turn on after {0}',
    dp_switch: 'Switch', // The multilingual settings of data points (DPs) are defined in the format of `dp_${dpCode}`.
    dp_switch_on: 'Switch is On', // The multilingual settings of Boolean DP status are defined in the format of `dp_${dpCode}_${'on' || 'off'}`.
    dp_mode_smart: 'Smart Mode', // The multilingual settings of enum DP status are defined in the format of `dp_${dpCode}_${enumValue}`.
    dp_fault_0: 'Binary first bit is faulty', // The multilingual settings of bitmap DP status are defined in the format of `dp_${dpCode}_${bit}`.
    dp_fault_1: 'Binary second bit is faulty',
  },
  zh: {
    dsc_edit: '编辑', //  基础多语言以 dsc_ 开头并命名语义化即可
    dsc_countdown_on: '设备将在{0}后开启',
    dp_switch: '开关', // 功能点（DP）相关多语言需按照 `dp_${dpCode}` 进行命名
    dp_switch_on: '开关开', // 布尔类型功能点状态相关多语言需按照 `dp_${dpCode}_${'on' || 'off'}` 进行命名
    dp_mode_smart: '智能模式', // 枚举类型功能点状态相关多语言需按照 `dp_${dpCode}_${enumValue}` 进行命名
    dp_fault_0: '第一位故障', // Bitmap 类型功能点状态相关多语言需按照 `dp_${dpCode}_${bit}` 进行命名
    dp_fault_1: '第二位故障',
  }
};

Multilingual setting API methods

The following examples come from the preceding section of multilingual key definition rules.

getLang

/**
 * @desc Returns basic multilingual settings.
 * @param {String} key - The multilingual key.
 * @returns {String} The multilingual value.
 */
// en: Edit; zh: 编辑; If not found: i18n@dsc_edit;
Strings.getLang('dsc_edit');

getDpLang

/**
 * @desc Returns the DP multilingual setting.
 * @param {String} dpCode - The DP name.
 * @param {String|Number} value - The DP value.
 * @returns {String} The multilingual value.
 */
// en: Smart Mode; zh: 智能模式; If not found: dp_mode_smart;
Strings.getDpLang('mode', 'smart');

formatValue

/**
 * @desc Concatenate multilingual values.
 * @param {String} key - The multilingual key.
 * @param {...String|Number} values - One or more matching values to be replaced.
 * @returns {String} The multilingual value.
 */
// en: Turn on after 1 minute; zh: 设备将在1分钟后开启; If not found: null character;
Strings.formatValue('countdown_on', '1分钟');

Import multilingual settings to Tuya Developer Platform

1. Find the section to import the multilingual settings.

2. Click Download or Import.

3. Import the multilingual file in the following JSON format.

   {
     "en": {
       "hello": "Hello"
     },
     "zh": {
       "hello": "你好"
     }
   }