[FEATURE] Internationalization support for multi languages

[DongHuiTiao]

实现思路

1. 前端引入 vue-i18n 依赖
2. 依照项目现有代码，整理需要随着【语言】替换的 message 字符列表
3. 将 message 绑定到 vue-i18n 实例，将 vue-i18n 实例绑定到 vue 上
4. 通过 {{ $t("message.[field]") }} 将配置到的字符串渲染到页面上
5. 在菜单列表中增加可切换语言的菜单

初始化时的默认语言

第一次打开自动选择系统的语言（已从 rust 获取系统的语言）

语言设置的持久化

当选定一个语言，之后每次打开都应该保持当前选择的语言

TASKS

• get current system language
• add package vue-i18n globally
• extract text variables from all components to a json file
• replace all text field with {{ $t("[field]") }}
• adjust UI display for different language
• add language switch in setting
• persistent storage for selected language

[orangelckc]

Anyone wishes to contribute, be free to comment and @DongHuiTiao.

Currently, only English is on the translations list. If you want to translate our app to another/other language(s), please let us know, and we will add it/them to the list.

Thank you for your support and help in making our app accessible to more people around the world!

[davidramos-om]

Hi @DongHuiTiao,

I'm just right away to add support for internationalization. I been thinking of choosing between the following:

• i18n pure : easy to set up, requires us to add every sentence to a JSON file, making our flow intermittent.
• FormatJS/vue-intl : good when we work with values
• Lingui.dev : we just wrap the text, and extract all sentences by running a CLI command, and then translate. We can keep building as long we wrap the texts.

I would choose LinguiJS. From my experience, it makes coding painless, but any of them is good enough.

What are your thoughts about it?

[davidramos-om]

My bad, just realized Vue is not fully supported by LinguiJS, looks like that feature is on the way, but for now, let's go with i18n

[DongHuiTiao]

Hi @davidramos-om

I found relatively little information on GitHub when searching for "lingui" and "Vue" as keywords, which is a pity.

While Lingui's ability to translate vocabulary by itself is convenient, there is a risk of inaccurate translations.

So, how about we try to use vue-i18n? It appears to be very straightforward, If anyone need to add a language, just add a corresponding vocabulary configuration.

[DongHuiTiao]

Hi @davidramos-om

I found relatively little information on GitHub when searching for "lingui" and "Vue" as keywords, which is a pity.

While Lingui's ability to translate vocabulary by itself is convenient, there is a risk of inaccurate translations.

So, how about we try to use vue-i18n? It appears to be very straightforward, If anyone need to add a language, just add a corresponding vocabulary configuration.

Sorry, I used translation software for English, so my words may look a bit strange.

[orangelckc]

As mentioned in the tasks, we have already decided to use vue-i18n as the default language support plugin.
I just pushed the configured commit b66a6ea in branch dev_lang.
Please notice that the vite-plugin for vue-i18n is here, we need one that supports vite@4.

[davidramos-om]

Thanks @orangelckc, sorry for the oversight.

[DongHuiTiao]

Hi @davidramos-om ,

I have just extracted all the text variables from the project and updated them in the dev_lang branch.

You can find these variables in the json files under src/locales.

I used the I18n ALLY plugin in vscode to translate them, but my variable names and machine-translated English might not be very standard.

Could you please take some time to review the code and test it? Thank you!

[davidramos-om]

Thanks @DongHuiTiao
Translations were pretty good, I just made a few adjustments to the labels we familiarized, and also support for Spanish added.

I've open a PR from my cloned repo to dev_lang branch

[ayangweb]

@davidramos-om Thanks to David's contribution, your pr has been merged and if you have time, you can add REDEME in Spanish!

[ayangweb]

@davidramos-om Hi David, I uploaded the Spanish docs in the dev_lang branch, can you help me with the touch-ups? I translated it from the English docs!

[davidramos-om]

done! @bilibili-ayang , screenshots for English and Spanish added too.

[ayangweb]

@davidramos-om Thanks, it's cool, good cooperation

[andrii-bodnar]

Hey everyone 👋

Recently Lingui had an official v4 release and the Vue.js support is already here - https://lingui.dev/tutorials/extractor-vue

[davidramos-om]

That's a wonderful news @andrii-bodnar, thanks for the head up.