语义结构
TechUI 的语言包本质上是一个层级分明的 JavaScript 对象。为了便于维护,源码层面采用了模块化拆分,但在运行时,它们会被聚合为一个完整的树状结构。
数据结构概览
语言包的根节点主要由“通用词汇”、“组件文案”和“业务模块”三部分组成。
以下是核心的语义分类说明:
| 根节点 Key | 描述 | 示例内容 |
|---|---|---|
| universal | 通用词汇 | 确定、取消、返回、加载中... |
| components | 组件内部文案 | 表格空数据提示、分页器文本、上传状态... |
| theme | 主题名称 | 天穹、夜阑、深色、浅色... |
| controlPanel | 全局设置 | 控制面板中的选项标题、提示语(如“3D面板开关”)... |
| datetime | 日期时间 | 年、月、日、刚刚、几分钟前... |
| login | 登录页 | 用户名、密码、验证码、忘记密码... |
| panicAlert | 错误/告警 | 屏幕分辨率不足提示、禁止调试提示... |
| error/success... | 状态反馈 | 成功、失败、警告等状态的基础标签。 |
模块化拆分
在源码层面(@techui/locales),为了避免单个文件过大,我们将语言包拆分为多个插件文件:
text
@techui/locales/
├── plugins.cn/ # 简体中文模块目录
│ ├── components.js # 组件相关
│ ├── login.js # 登录相关
│ ├── universal.js # 通用词汇
│ └── ...
├── cn.js # 入口文件(聚合上述模块)
└── ...在初始化时,cn.js 会通过 ... 扩展运算符将这些分散的模块合并为一个对象,因此在调用时您无需关心物理文件结构,只需关心逻辑层级(如 i18n('login.username'))。
语法规范
静态文本
最基础的键值对,直接对应翻译文本。
javascript
"empty": {
"text": "暂无内容",
"buttonText": "返回"
}动态插值 (Variable Placeholder)
支持在文本中嵌入变量,格式为 ${变量名}。这在需要动态显示设备名、倒计时或特定数值时非常有用。
定义示例:
javascript
"panicAlert": {
"device": {
"content": "此页面为 ${deviceA} 端专属,当前访问设备为 ${deviceB}..."
}
}调用示例:
javascript
i18n('panicAlert.device.content', {
deviceA: 'PC',
deviceB: 'Mobile'
});
// 输出: "此页面为 PC 端专属,当前访问设备为 Mobile..."如何查看完整定义?
由于语言包包含数百个键值对,且会随着 TechUI 版本更新而增加,本文档不进行全量罗列。
如果您需要查找某个特定文案的 Key,或查看所有可用的翻译项,建议直接查阅项目依赖中的源码文件:
- 在您的 IDE 中,展开
node_modules目录。 - 找到
@techui/locales包。 - 打开对应的语言入口文件(如
cn.js)或其子目录plugins.cn。
这些文件是定义语义结构的唯一真理来源(Single Source of Truth)。