Semantic Structure

TechUI's language packages are essentially hierarchical JavaScript objects. While the source code is split into modules for easier maintenance, they are aggregated into a complete tree structure at runtime.

Data Structure Overview

The root node of a language package primarily consists of three parts: "Universal Vocabulary," "Component Copy," and "Business Modules".

The following table explains the core semantic categories:

Root Node Key	Description	Example Content
universal	Universal vocabulary	OK, Cancel, Back, Loading...
components	Internal component copy	Table empty data hints, pagination text, upload status...
theme	Theme names	Sky Blue, Dark Night, Dark, Light...
controlPanel	Global settings	Option titles and hints in the control panel (e.g., "3D Panel Switch")...
datetime	Date and time	Year, month, day, just now, a few minutes ago...
login	Login page	Username, password, verification code, forgot password...
panicAlert	Errors/Alerts	Insufficient screen resolution prompts, debugging disabled prompts...
error/success...	Status feedback	Basic labels for success, failure, warning, and other statuses.

Modular Splitting

At the source code level (@techui/locales), language packages are split into multiple plugin files to prevent individual files from becoming too large:

@techui/locales/
  ├── plugins.cn/          # Simplified Chinese module directory
  │     ├── components.js  # Component related
  │     ├── login.js       # Login related
  │     ├── universal.js   # Universal vocabulary
  │     └── ...
  ├── cn.js                # Entry file (aggregates the modules above)
  └── ...

During initialization, the entry file (e.g., cn.js) uses the spread operator (...) to merge these scattered modules into a single object. Consequently, you do not need to worry about the physical file structure when calling them; you only need to focus on the logical hierarchy (e.g., i18n('login.username')).

Syntax Specifications

Static Text

The most basic key-value pairs that correspond directly to translated text.

"empty": {
  "text": "No content",
  "buttonText": "Back"
}

Dynamic Interpolation (Variable Placeholder)

This supports embedding variables into text using the ${variableName} format. This is highly useful for dynamically displaying device names, countdowns, or specific values.

Definition Example:

"panicAlert": {
  "device": {
    "content": "This page is exclusive to ${deviceA}, current access device is ${deviceB}..."
  }
}

Calling Example:

i18n('panicAlert.device.content', { 
  deviceA: 'PC', 
  deviceB: 'Mobile' 
});
// Output: "This page is exclusive to PC, current access device is Mobile..."

How to View Full Definitions

Because language packages contain hundreds of key-value pairs and grow with TechUI version updates, this document does not list them all.

If you need to find a specific key or view all available translation items, it is recommended to check the source files in your project dependencies directly:

1. In your IDE, expand the node_modules directory.
2. Locate the @techui/locales package.
3. Open the corresponding language entry file (e.g., cn.js) or its plugins.cn subdirectory.

These files serve as the Single Source of Truth for defining the semantic structure.