1 前言

编写此规范旨在让大家快速了解并掌握国际化插件的使用方法。

2 前端说明

2.1 实现流程

流程说明：当访问模块页面，判断是否是通过外框访问：

1：是，则继续判断是否是登录模块：

​ 1）是，则请求默认语言，之后请求对应中英文包；

​ 2）否，则是其他模块页面，之后请求对应中英文包；

2：否：则是单点登录直接访问方式，继续判断访问时是否携带对应参数：

​ 1）是，则请求对应翻译包

​ 2）否，则结束

语言切换流程

流程说明：登录模块进行语言切换时，判断window上是否挂载登录翻译包：

​ 1）是，则从window中获取语言包，更新页面内容

​ 2）否，则请求获取登录翻译包，挂载在window上，更新页面内容

细化2：

流程说明：访问模块时，判断window上是否挂载对应翻译包：

​ 1）是，则从window中获取语言包，更新页面内容

​ 2）否，则获取对应模块翻译包，之后更新页面内容

2.2 翻译包说明

翻译包文件目录：（设备列表为例子）

各个插件翻译包统一放在en-US和zh-CN文件夹下Front目录下，其命名规则为模块名.页面名（如：ganwei-iotcenter-equip-lists.equipListsIot.json）

Json文件配置示例：（ganwei-iotcenter-equip-lists.equiplistsIot.json）(注意文件名全小写)

前端规定固定命名格式：以常规组件为前缀key，内部根据页面自行定义，统一为驼峰命名。

示例：(输入框)

{
  “input”:{
      “inputSearchEquip”:”搜索设备名称”
    }
}

2.3 插件使用说明

中英文切换：在登录界面进行切换（需下载最新登录包）

若不启用国际语言切换，可在web配置中配置，设置为否

以设备列表（ganwei-base-equip-lists）为例，展示插件中如何使用i18n。

1.在入口文件index.js中

import i18n from 'gw-base-utils/i18n.js'

说明：引用i18n国际化插件

2.在App.vue中

import moduleObserve from 'gw-base-utils/moduleObserve'

mixins: [moduleObserve],

说明：监听当前语言类型变化，切换语言

页面中使用：以设备列表为例

页面图表暂无数据文字提示修改

:data-noData='$t("equipListsIot.publics.noData")'

说明：页面暂无数据国际化切换

2.4 公共组件适配

本部分用于规范公共组件中英文适配的具体配置

公共组件分为 多插件公共组件（多插件共用的）和 插件内公共组件（插件内多个页面共用）

2.4.1多插件公共组件

目前这类公共组件都放在@ganwei-web npm包中，组件内部已实现中英文适配，插件在引用时无需做额外配置。

例如，loading组件

2.4.2插件内公共组件

以Vue2插件 工业CRM（ganwei-iotcenter-modules-industry-crm）为例，展示插件内公共组件如何做中英文适配。

1.编辑App.vue：

App.vue中将import moduleObserve from 'gw-base-utils/moduleObserve' 改为

import moduleObserve from './src/mixins/moduleObserve' 并拷贝原路径下的moduleObserve.js 到本地src/mixins

2.编辑moduleObserve.js：

在created里添加 await this.i18n.getLanguage(packageId, pluginName, 'all', this)

作用：在加载首个页面中英文时，同步加载插件内公共组件的中英文。

3.公共组件写法：

components下的所有公共组件内中文均使用 $t('all.xxx') / this.$t('all.xxx')

4.公共组件中英文json：

以ganwei-iotcenter-modules-industry-crm为例，components下的所有组件中英文都放在ganwei-iotcenter-modules-industry-crm.all.json 中。

注：json名中的all是与 await this.i18n.getLanguage(packageId, pluginName, 'all', this) 、$t('all.xxx') / this.$t('all.xxx') 是保持一致的。

在vue3插件中，仅第一步App.vue的编辑有所不同，其余同vue2一致。

2.5 api请求处理

let languageType = window.sessionStorage.languageType
if (languageType && languageType !== 'zh-CN') {
  let split = config.url.includes('?') ? '&' : '?'
  config.url = config.url + split + 'culture=' + languageType
}

3 后端说明

前端页面内容和相关操作等提示都由后台统一返回，翻译文件结构如下图所示：

请关注上述截图Localization翻译目录静态文件说明：

1、zh-CN文件：公共中文翻译

2、en-US文件：公共英文翻译

3、zh-CN目录

4、Back：后台插件中文翻译

5、Front：前端UI中文翻译

6、en-US目录

7、 Back：后台插件英文翻译

8、 Front：前端UI英文翻译

注1：前端文件命名约定【前端插件名.子菜单名.json】

注2：后台插件命名约定【插件名.po】(以v6.x后台拆分插件项目作为插件名）

举例说明：

我们以如下截图设备列表中文翻译为例，作进一步详细说明

3.1 前端UI

ganwei-base-equip-lists：设备列表插件名称，

equipListsIot：设备列表子菜单名称，

该json文件内容即为点击【全部设备】所呈现UI里所有内容翻译，完全自定义。

3.2 后端响应

翻译模板文本内容：

msgid “填写翻译键” msgstr “填写翻译值”

使用.NET Core框架所提供【IStringLocalizer】构造函数注入，进行翻译。

private readonly IStringLocalizer_stringLocalizer;

1、公共翻译部分内容（建议翻译键以【common_】作为前缀），其他单词通过下划线隔开

若需响应参数不正确或参数为空或不能为空等，对应公共翻译键如_stringLocalizer["common_parameter_is_incorrect"]

2、插件翻译内容（建议翻译键以【插件名简称_】作为前缀），其他单词通过下划线隔开

比如翻译设备不存在，_stringLocalizer["equip_config_device_not_exist"]