From a6ee87b91cc7b7ec201edfae4dea296429aa9892 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 6 Feb 2023 00:58:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AA=9E=E8=A8=80=E5=88=87=E6=8F=9B?=
 =?UTF-8?q?=E5=BE=8C=E4=B8=8B=E6=8B=89=E9=81=B8=E9=A0=85=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E5=8F=8A=E6=99=82=E8=AE=8A=E6=8F=9B=E8=AA=9E=E8=A8=80=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings.vue | 83 +++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 05479109..a6526beb 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,52 +1,52 @@
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
 import { grantAccessKey, revokeAccessKey } from '~/utils/index'
 import { accessKey, isShowTopbar, language } from '~/logic'
 
-export default defineComponent({
-  emits: ['close'],
-  data() {
-    return {
-      isShowTopbar,
-      accessKey,
-      language,
-      langs: [
-        {
-          value: 'en',
-          label: this.$t('settings.select_language_opt.english'),
-        },
-        {
-          value: 'cmn-CN',
-          label: this.$t('settings.select_language_opt.Mandarin_CN'),
-        },
-        {
-          value: 'cmn-TW',
-          label: this.$t('settings.select_language_opt.Mandarin_TW'),
-        },
-        {
-          value: 'jyut',
-          label: this.$t('settings.select_language_opt.jyut'),
-        },
-      ],
-    }
-  },
-  watch: {
-    language() {
-      this.$i18n.locale = this.language
+const emit = defineEmits(['close'])
+
+const { t, locale } = useI18n()
+
+const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
+const langsSelect = ref<HTMLElement>() as Ref<HTMLElement>
+
+const langs = computed(() => {
+  return [
+    {
+      value: 'en',
+      label: t('settings.select_language_opt.english'),
     },
-  },
-  methods: {
-    close() {
-      this.$emit('close')
+    {
+      value: 'cmn-CN',
+      label: t('settings.select_language_opt.Mandarin_CN'),
     },
-    onAuthorize() {
-      const authorizeBtn = this.$refs.authorizeBtn as HTMLButtonElement
-      grantAccessKey(authorizeBtn)
+    {
+      value: 'cmn-TW',
+      label: t('settings.select_language_opt.Mandarin_TW'),
     },
-    onRevoke() {
-      revokeAccessKey()
+    {
+      value: 'jyut',
+      label: t('settings.select_language_opt.jyut'),
     },
-  },
+  ]
 })
+
+watch(() => language.value, (newValue, oldValue) => {
+  locale.value = newValue
+})
+
+function close() {
+  emit('close')
+}
+
+function onAuthorize() {
+  grantAccessKey(authorizeBtn.value)
+}
+
+function onRevoke() {
+  revokeAccessKey()
+}
 </script>
 
 <template>
@@ -78,6 +78,7 @@ export default defineComponent({
       </div>
 
       <bew-select
+        ref="langsSelect"
         v-model="language"
         :options="langs"
         w="full"