From 1ce825f4fc425b6478c997eb77549e2b9be12dad Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 7 Apr 2022 17:08:17 +0800
Subject: [PATCH] add: Select language function add update Settings style

---
 src/components/Settings.vue      | 60 +++++++++++++++++++++++++++++---
 src/contentScripts/views/App.vue |  7 ++++
 src/logic/storage.ts             |  2 +-
 src/styles/main.scss             | 10 ++++--
 4 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 60751bcc..707db2a2 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,14 +1,33 @@
 <script lang="ts">
 import { grantAccessKey, revokeAccessKey } from '~/utils/index'
-import { isShowTopbar, apperance, accessKey } from '~/logic/storage'
+import { language, isShowTopbar, accessKey } from '~/logic'
 
 export default defineComponent({
   emits: ['close'],
+
   data() {
     return {
       isShowTopbar,
-      apperance,
       accessKey,
+      language,
+      langs: [
+        {
+          value: 'en',
+          label: 'settings.select_language_opt.english',
+        },
+        {
+          value: 'cmn_SC',
+          label: 'settings.select_language_opt.mandarin_sc',
+        },
+        {
+          value: 'cmn_TC',
+          label: 'settings.select_language_opt.mandarin_tc',
+        },
+        {
+          value: 'jyut',
+          label: 'settings.select_language_opt.jyut',
+        },
+      ],
     }
   },
   methods: {
@@ -22,6 +41,9 @@ export default defineComponent({
     onRevoke() {
       revokeAccessKey()
     },
+    onChangeLocale() {
+      this.$i18n.locale = language.value
+    },
   },
 })
 </script>
@@ -48,6 +70,25 @@ export default defineComponent({
     <div text="3xl" m="b-4">
       {{ $t('settings.title') }}
     </div>
+
+    <div class="settings-item">
+      <div>
+        {{ $t('settings.select_language') }}
+      </div>
+      <select
+        v-model="language"
+        @change="onChangeLocale()"
+      >
+        <option
+          v-for="lang in langs"
+          :key="lang.value"
+          :value="lang.value"
+        >
+          {{ $t(lang.label) }}
+        </option>
+      </select>
+    </div>
+
     <div class="settings-item">
       <div>
         {{ $t('settings.authorize_app') }}
@@ -66,6 +107,7 @@ export default defineComponent({
         <span>{{ $t('settings.btn.revoke') }}</span>
       </button>
     </div>
+
     <div class="settings-item">
       <div>
         {{ $t('settings.topbar_visiable') }}
@@ -85,17 +127,25 @@ export default defineComponent({
 
 <style lang="scss">
 #settings-window {
-  @apply fixed top-1/5 left-1/2 w-700px h-1/2
+  @apply fixed top-1/5 left-1/2 w-700px
     transform -translate-x-1/2
     rounded-$bew-radius p-8
     bg-$bew-content-solid-1;
   box-shadow: var(--bew-shadow-3);
 
   .settings-item {
-    @apply flex justify-between items-center py-2;
+    @apply flex justify-between items-center py-2 text-base;
     .desc {
-      @apply text-xs text-$bew-text-3;
+      @apply text-sm text-$bew-text-3;
+    }
+
+    > *:first-child {
+      @apply w-4/5 mr-4;
     }
   }
 }
+button,
+select {
+  @apply w-120px
+}
 </style>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index ee58d669..fb7fa139 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -46,13 +46,20 @@
 <script setup lang="ts">
 import { useToggle, useDark } from '@vueuse/core'
 import { apperance, isShowTopbar } from '~/logic/storage'
+import { language } from '~/logic'
 import 'virtual:windi.css'
 import '~/styles/index.ts'
 import Home from './Home/index.vue'
+import { useI18n } from 'vue-i18n'
 
 const [showSettings, toggle] = useToggle(false)
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
+const { locale } = useI18n()
+
+window.onload = () => {
+  locale.value = language.value
+}
 
 </script>
 
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index ff9f951b..2afec05c 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -1,6 +1,6 @@
 import { useStorageLocal } from '~/composables/useStorageLocal'
 
 export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo', { listenToStorageChanges: true })
+export const language = useStorageLocal('language', 'en', { listenToStorageChanges: true })
 export const isShowTopbar = useStorageLocal('isShowTopbar', true, { listenToStorageChanges: true })
-export const apperance = useStorageLocal('apperance', 'automatic', { listenToStorageChanges: true })
 export const accessKey = useStorageLocal('accessKey', '', { listenToStorageChanges: true })
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0bdf8321..ac206f2f 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -71,11 +71,10 @@ body {
 .line-btn {
   @apply px-4 py-2 rounded-$bew-radius inline-block
     cursor-pointer transform duration-300
-    filter outline-none
+    bg-transparent filter
     border-2 border-solid border-$bew-fill-4
     text-$bew-fill-4
-    active:scale-95 active:bg-$bew-theme-color active:brightness-110
-    focus:bg-$bew-theme-color 
+    active:scale-95 active:brightness-110
     disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50;
 }
 
@@ -93,3 +92,8 @@ body {
     @apply ml-4;
   }
 }
+
+select {
+  @apply px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
+    text-center appearance-none text-$bew-text-1 outline-none;
+}