Skip to content

语义结构

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,或查看所有可用的翻译项,建议直接查阅项目依赖中的源码文件:

  1. 在您的 IDE 中,展开 node_modules 目录。
  2. 找到 @techui/locales 包。
  3. 打开对应的语言入口文件(如 cn.js)或其子目录 plugins.cn

这些文件是定义语义结构的唯一真理来源(Single Source of Truth)。