From 4509616b64b6cc9ce53de506fc1a382f4c938d9f Mon Sep 17 00:00:00 2001
From: Flop <kukuzuo@gmail.com>
Date: Tue, 14 May 2024 20:21:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E5=9F=BA=E7=A1=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front_end/package.json              |  1 +
 front_end/src/i18n/config.ts        | 15 +++++++++
 front_end/src/i18n/index.ts         | 47 +++++++++++++++++++++++++++++
 front_end/src/i18n/locales/en.ts    |  8 +++++
 front_end/src/i18n/locales/zh-cn.ts |  8 +++++
 front_end/src/i18n/locales/zh-tw.ts |  8 +++++
 front_end/src/main.ts               |  3 +-
 7 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 front_end/src/i18n/config.ts
 create mode 100644 front_end/src/i18n/index.ts
 create mode 100644 front_end/src/i18n/locales/en.ts
 create mode 100644 front_end/src/i18n/locales/zh-cn.ts
 create mode 100644 front_end/src/i18n/locales/zh-tw.ts

diff --git a/front_end/package.json b/front_end/package.json
index 044bda1..85663d8 100644
--- a/front_end/package.json
+++ b/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"
   },
diff --git a/front_end/src/i18n/config.ts b/front_end/src/i18n/config.ts
new file mode 100644
index 0000000..c194c84
--- /dev/null
+++ b/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
+    }
+}
diff --git a/front_end/src/i18n/index.ts b/front_end/src/i18n/index.ts
new file mode 100644
index 0000000..b451f51
--- /dev/null
+++ b/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(),
+})
diff --git a/front_end/src/i18n/locales/en.ts b/front_end/src/i18n/locales/en.ts
new file mode 100644
index 0000000..179426a
--- /dev/null
+++ b/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}',
+    },
+}
diff --git a/front_end/src/i18n/locales/zh-cn.ts b/front_end/src/i18n/locales/zh-cn.ts
new file mode 100644
index 0000000..ff4f06a
--- /dev/null
+++ b/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}',
+    },
+}
diff --git a/front_end/src/i18n/locales/zh-tw.ts b/front_end/src/i18n/locales/zh-tw.ts
new file mode 100644
index 0000000..b4b7f92
--- /dev/null
+++ b/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}',
+    },
+}
diff --git a/front_end/src/main.ts b/front_end/src/main.ts
index ff03beb..f30e5a7 100644
--- a/front_end/src/main.ts
+++ b/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