介绍

盘古平台的脚手架项目的高代码页面中支持文案的多语言显示。

维护词条文案

在项目的src/locales/lang目录下维护了多种语言的词条文案，用户可以在这里扩展添加其他语言，以简体中文（zh-CN）、英语（en-GB）为例。

src/locales/lang/zh-CN.js文件的示例内容如下：

export default {
  ...,
  // 词条的key值是以"intl_"作为前缀的字符串，
  "intl_platform.username": "用户名",
  /**
   * 词条的显示文案值是普通字符串，
   * 但如果要包含显示@、 $、 {、 }、 |，这几个特殊字符，
   * 则需要通过用{''}包裹来转义处理（花括号内部的引号必须是单引号，换成双引号会转义失败）
   */
  "intl_includes_special_characters": "{'@'}、{'$'}、{'{}'}、{'}'}、{'|'}",
  ...,
}

src/locales/lang/en-GB.js文件的示例内容如下：

export default {
  ...,
  "intl_platform.username": "User Name",
  "intl_includes_special_characters": "{'@'}、{'$'}、{'{'}、{'}'}、{'|'}",
  ...,
}

上述key为intl_includes_special_characters的词条最终将显示为：@、$、{、}、|。

注册语言包

维护完文案，还需要在src/locales/index.ts文件中注册语言包，以简体中文（zh-CN）为例，src/locales/index.ts文件中扩展添加语言需要调整的部分如下：

...

import zh from "./lang/zh-CN";

...

const languageMap = {
  // key值为语言编码，不同语言对应不同编码
  zh_CN:{
    ...zh
  },
  ...,
}

...

语言对应语言编码

语言	语言编码
简体中文	zh_CN
繁体中文	zh_TW
英语	en_GB
日本语	ja_JP
德语	de_DE
俄语	ru_RU
葡萄牙语	pt_PT
意大利语	it_IT
法语	fr_FR
西班牙语	es_ES
印地语	hi_IN
希腊语	el_GR
阿拉伯语	ar_EG
韩语	ko_KR
越南语	vi_VN
斯洛文尼亚语	sl_SL
泰语	th_TH
马来语	ms_MY

显示引用词条

在需要引用显示的组件代码中，引入多语言hook，用hook中封装的公共方法获取词条文案，示例如下：

<template>
  ...
  <p>{{ showAlias('intl_includes_special_characters') }}</p>
  <p>{{ showAlias('intl_platform.username') }}</p>
  ...
</template>
<script setup lang="ts">
...
import useIntl from "@/hook/pangea/use-intl";
const { showAlias } = useIntl();

...

</script>