From 16bcce30b30f67dfb510f5cc201a2393789d4fda Mon Sep 17 00:00:00 2001
From: AkiChase <1003019131@qq.com>
Date: Fri, 10 May 2024 17:13:36 +0800
Subject: [PATCH] feat(Setting): add language setting

---
 src/components/setting/Basic.vue | 28 +++++++++++++++++++++++++++-
 src/i18n/{en.json => en-US.json} |  0
 src/i18n/index.ts                | 10 +++++-----
 src/i18n/{zh.json => zh-CN.json} |  0
 4 files changed, 32 insertions(+), 6 deletions(-)
 rename src/i18n/{en.json => en-US.json} (100%)
 rename src/i18n/{zh.json => zh-CN.json} (100%)

diff --git a/src/components/setting/Basic.vue b/src/components/setting/Basic.vue
index 778eb8a..c4fd319 100644
--- a/src/components/setting/Basic.vue
+++ b/src/components/setting/Basic.vue
@@ -13,9 +13,12 @@ import {
   useDialog,
   NCard,
   NIcon,
+  NFormItem,
+  NSelect,
 } from "naive-ui";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { onMounted, ref } from "vue";
+import i18n from "../../i18n";
 
 const localStore = new Store("store.bin");
 const dialog = useDialog();
@@ -25,8 +28,16 @@ const showDataModal = ref(false);
 const dataModalInputVal = ref("");
 let curDataIndex = -1;
 
-onMounted(() => {
+const languageOptions = [
+  { label: "简体中文", value: "zh-CN" },
+  { label: "English", value: "en-US" },
+];
+
+const curLanguage = ref("en-US");
+
+onMounted(async () => {
   refreshLocalData();
+  curLanguage.value = (await localStore.get<string>("language")) ?? "en-US";
 });
 
 async function refreshLocalData() {
@@ -69,10 +80,25 @@ function delLocalStore(key?: string) {
     });
   }
 }
+
+function changeLanguage(language: "zh-CN" | "en-US") {
+  if (language === curLanguage.value) return;
+  curLanguage.value = language;
+  localStore.set("language", language);
+  i18n.global.locale = language;
+}
 </script>
 
 <template>
   <div class="setting-page">
+    <NH4 prefix="bar">语言</NH4>
+    <NFormItem>
+      <NSelect
+        :value="curLanguage"
+        @update:value="changeLanguage"
+        :options="languageOptions"
+      />
+    </NFormItem>
     <NFlex justify="space-between">
       <NH4 prefix="bar">本地数据</NH4>
       <NFlex>
diff --git a/src/i18n/en.json b/src/i18n/en-US.json
similarity index 100%
rename from src/i18n/en.json
rename to src/i18n/en-US.json
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 7013601..1b712f9 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,18 +1,18 @@
 import { createI18n } from "vue-i18n";
 import { Store } from "@tauri-apps/plugin-store";
 
-import en from "./en.json";
-import zh from "./zh.json";
+import enUS from "./en-US.json";
+import zhCN from "./zh-CN.json";
 
 const localStore = new Store("store.bin");
-const language = (await localStore.get<string>("language")) ?? "en";
+const language = (await localStore.get<string>("language")) ?? "en-US";
 
 const i18n = createI18n({
   locale: language,
   allowComposition: true,
   messages: {
-    en,
-    zh,
+    "en-US": enUS,
+    "zh-CN": zhCN,
   },
 });
 
diff --git a/src/i18n/zh.json b/src/i18n/zh-CN.json
similarity index 100%
rename from src/i18n/zh.json
rename to src/i18n/zh-CN.json