语言选项记忆

Author: Linho1219

src/i18n.ts

@@ -19,7 +19,7 @@ export default {
         confirm: "确定",
         language: "语言",
         repo: "GitHub 仓库",
-        toogleTheme: '切换主题',
+        toogleTheme: "切换主题",
         copy: "复制",
         undo: "撤销",
       },
@@ -75,7 +75,7 @@ export default {
         confirm: "Confirm",
         language: "Language",
         repo: "GitHub Repo",
-        toogleTheme: 'Toggle Theme',
+        toogleTheme: "Toggle Theme",
         copy: "Copy",
         undo: "Undo",
       },

src/ui/navbar.vue

@@ -46,19 +46,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
+import { onMounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { locale, t } = useI18n();
+onMounted(() => {
+  const localLocale = localStorage.getItem("lang");
+  const lang = localLocale ?? navigator.language;
+  if (lang.startsWith("zh")) locale.value = "zh-CN";
+  if (lang.startsWith("en")) locale.value = "en-US";
+  document.documentElement.setAttribute("lang", locale.value);
+  watch(locale, () => {
+    document.documentElement.setAttribute("lang", locale.value);
+    localStorage.setItem("lang", locale.value);
+  });
+});
 
 import SIconLanguage from "@/ui/icons/language.vue";
 import SIconGtihub from "@/ui/icons/github.vue";
 import SIconAutoTheme from "@/ui/icons/autotheme.vue";
 
-const lang = ref("");
-
-watchEffect(() => console.log(lang.value));
-
 function openGithub() {
   window.open("https://github.com/Linho1219/function-plot-GUI");
 }