feat: 新增多语言基础配置

front_end/package.json

@@ -29,6 +29,7 @@
     "uuid": "^9.0.0",
     "vue": "^3.2.13",
     "vue-echarts": "^6.7.1",
+    "vue-i18n": "^9.13.1",
     "vue-router": "^4.0.3",
     "vuex": "^4.1.0"
   },

front_end/src/i18n/config.ts

@@ -0,0 +1,15 @@
+import type { VueMessageType } from 'vue-i18n'
+import { LocaleMessage } from '@intlify/core-base'
+
+/**
+ * 配置语法：https://vue-i18n.intlify.dev/guide/essentials/syntax.html
+ */
+export type LocaleConfig = LocaleMessage<VueMessageType> & {
+    // 当前语言唯一标识
+    local: string
+    // 嵌套配置示例 TODO 删除嵌套配置示例
+    example: {
+        // 占位符配置示例 TODO 删除占位符配置示例
+        placeholder: string
+    }
+}

front_end/src/i18n/index.ts

@@ -0,0 +1,47 @@
+import { createI18n } from 'vue-i18n'
+import { en } from '@/i18n/locales/en'
+import { zhCn } from '@/i18n/locales/zh-cn'
+import { zhTw } from '@/i18n/locales/zh-tw'
+import { LocaleConfig } from '@/i18n/config'
+
+/**
+ * 获取所有语言
+ */
+function getMessages (): Record<string, LocaleConfig> {
+    const messages: Record<string, LocaleConfig> = {}
+    messages[zhCn.local] = zhCn
+    messages[zhTw.local] = zhTw
+    messages[en.local] = en
+    return messages
+}
+
+/**
+ * 获取默认语言
+ */
+function getDefaultLocale () {
+    const languages = navigator.languages || [navigator.language]
+    for (const language of languages) {
+        if (/^zh(.?CN)?$/i.test(language)) {
+            // 简体中文，包括 zh 和 zh-CN
+            return zhCn.local
+        } else if (/^zh\b/i.test(language)) {
+            // 除简体中文外的所有中文默认使用繁体中文
+            return zhTw.local
+        } else if (/^en\b/i.test(language)) {
+            // 英语
+            return en.local
+        }
+    }
+    // 默认使用简体中文
+    return zhCn.local
+}
+
+/**
+ * 配置 Vue I18n，开发工具参见：https://vue-i18n.intlify.dev/ecosystem/tools.html
+ */
+export default createI18n({
+    legacy: false,
+    fallbackLocale: zhCn.local,
+    locale: getDefaultLocale(),
+    messages: getMessages(),
+})

front_end/src/i18n/locales/en.ts

@@ -0,0 +1,8 @@
+import { LocaleConfig } from '@/i18n/config'
+
+export const en: LocaleConfig = {
+    local: 'en',
+    example: {
+        placeholder: 'Placeholder: {0}',
+    },
+}

front_end/src/i18n/locales/zh-cn.ts

@@ -0,0 +1,8 @@
+import { LocaleConfig } from '@/i18n/config'
+
+export const zhCn: LocaleConfig = {
+    local: 'zh-cn',
+    example: {
+        placeholder: '占位符: {0}',
+    },
+}

front_end/src/i18n/locales/zh-tw.ts

@@ -0,0 +1,8 @@
+import { LocaleConfig } from '@/i18n/config'
+
+export const zhTw: LocaleConfig = {
+    local: 'zh-tw',
+    example: {
+        placeholder: '佔位符: {0}',
+    },
+}

front_end/src/main.ts

@@ -4,6 +4,7 @@ import * as ELIcons from '@element-plus/icons-vue';
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import i18n from '@/i18n'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import $axios from './http'
@@ -23,7 +24,7 @@ for (const name in ELIcons) {
 }
 
 app.use(ElementPlus);
-app.use(store).use(router);
+app.use(store).use(router).use(i18n);
 app.mount('#app');
 
 const win: any = window